How to add ‘Clear Cart’ button for the products in the shopping cart in OpenCart 2.x

OpenCart 2 comes with many improvements, one of which is the nice and slick design. Unfortunately, there are still some features that are left out and in this post we will show you one of them.


Get the modification for OpenCart 3.x here!


Here is an example of how the shopping cart looks with a bunch of products:

It surely looks good. However, if you want to clear your cart, you have to remove your products one by one. Not very efficient, right?

In this blog post we will show you a nice and easy way to add functionality which clears the shopping cart with one single click. Like you can see from the screenshot above, there is no such feature in OpenCart. However, we will show you how this can be achieved using OCmod. Additionally, we will add a similar button in the Shopping Cart page. You just have to follow the steps described below.

First of all, you will need to create a file by using any text editor (we suggest Notepad++ or Dreamweaver) and paste the following code:

<modification>
    <name>ClearShoppingCart by iSenseLabs</name>
	<version>1.0 (Initial)</version>
	<link>https://isenselabs.com</link>
	<author>iSenseLabs</author>
	<code>isenselabs_clearshoppingcart</code>

	<file path="catalog/view/theme/*/template/common/cart.tpl">
		<operation>
			<search><![CDATA[<a href="<?php echo $cart; ?>"><strong><i class="fa fa-shopping-cart"></i>]]></search>
			<add position="replace"><![CDATA[
            <script type="text/javascript">
            function clearCart() {
                $.ajax({
                  url: 'index.php?route=checkout/cart/clearcart',
                  dataType: 'json',
                  success: function(json) {
                      $('#cart-total').html(json['total']);
                      if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                          location = 'index.php?route=checkout/cart';
                      } else {
                          $('#cart > ul').load('index.php?route=common/cart/info ul li');
                      }
                  }
              });
            }
            </script>
   			<a onclick="clearCart();" ><strong><i class="fa fa-times"></i> <?php echo $button_clearcart; ?></strong></a>&nbsp;&nbsp;&nbsp;<a href="<?php echo $cart; ?>"><strong><i class="fa fa-shopping-cart"></i>
			]]></add>
		</operation>
	</file>
  
  	<file path="catalog/controller/checkout/cart.php">
		<operation>
			<search><![CDATA[public function add() {]]></search>
			<add position="before"><![CDATA[
   			public function clearcart() {
				$this->load->language('checkout/cart');
				$json = array();
				$this->cart->clear();
				$total = 0;
                
				unset($this->session->data['vouchers']);
                unset($this->session->data['shipping_method']);
                unset($this->session->data['shipping_methods']);
                unset($this->session->data['payment_method']);
                unset($this->session->data['payment_methods']);
                unset($this->session->data['reward']);

				$json['total'] = sprintf($this->language->get('text_items'), $this->cart->countProducts() + (isset($this->session->data['vouchers']) ? count($this->session->data['vouchers']) : 0), $this->currency->format($total));

				if (isset($this->request->get['shoppingcart']) && $this->request->get['shoppingcart']=='true') {
					$this->response->redirect($this->url->link('checkout/cart'));
				} else {
					$this->response->addHeader('Content-Type: application/json');
					$this->response->setOutput(json_encode($json));
				}
			}
			]]></add>
		</operation>
  	</file>

  	<file path="catalog/controller/common/cart.php">
		<operation>
			<search><![CDATA[$data['button_remove'] = $this->language->get('button_remove');]]></search>
			<add position="before"><![CDATA[
   			$data['button_clearcart'] = $this->language->get('button_clearcart');
			]]></add>
		</operation>
  	</file>
  
	<file path="catalog/controller/checkout/cart.php">
		<operation>
			<search><![CDATA[$data['button_remove'] = $this->language->get('button_remove');]]></search>
			<add position="before"><![CDATA[
   			$data['button_clearcart'] = $this->language->get('button_clearcart');
			$data['link_clearcart'] = $this->url->link('checkout/cart/clearcart', 'shoppingcart=true');
			]]></add>
		</operation>
  	</file>
  
    <file path="catalog/language/english/common/cart.php">
		<operation>
			<search><![CDATA[$_['text_recurring']  = 'Payment Profile';]]></search>
			<add position="before"><![CDATA[
   			$_['button_clearcart']  = 'Clear Cart';
			]]></add>
		</operation>
  	</file>
  
    <file path="catalog/language/english/checkout/cart.php">
		<operation>
			<search><![CDATA[$_['column_total']             = 'Total';]]></search>
			<add position="before"><![CDATA[
   			$_['button_clearcart']  = 'Clear Cart';
			]]></add>
		</operation>
  	</file>
  
  	<file path="catalog/view/theme/*/template/checkout/cart.tpl">
		<operation>
			<search><![CDATA[<?php if ($coupon || $voucher || $reward || $shipping) { ?>]]></search>
			<add position="before"><![CDATA[
   				<a href="<?php echo $link_clearcart; ?>" class="btn btn-default" title="<?php echo $button_clearcart; ?>"><?php echo $button_clearcart; ?></a>
			]]></add>
		</operation>
  	</file>  
</modification>

What we do here is quite simple:

  • Add a couple language strings for the buttons in the mini-cart and in the shopping cart
  • Add the functionality which clears the cart
  • Add the HTML code for the buttons in the front-end of your store

As you  might notice, this modification is hard-coded for stores using English language. If you are using another language, make sure to update the modification file on lines <file path="catalog/language/english/common/cart.php"> and <file path="catalog/language/english/checkout/cart.php"> by changing ‘english’ to the according folder. You should also translate the phrase ‘Clear cart’ on this line: $_['button_clearcart']  = 'Clear Cart' (you will find it twice) - to your preference. 

What happens if you have more than one language? Then you have to copy the entire <file>...</file> block and translate it. Here is an example for a store with English and Bulgarian languages:

<file path="catalog/language/english/common/cart.php">
    <operation>
    	<search><![CDATA[$_['text_recurring']  = 'Payment Profile';]]></search>
		<add position="before"><![CDATA[
   		$_['button_clearcart']  = 'Clear Cart';
		]]></add>
	</operation>
 </file>

<file path="catalog/language/bulgarian/common/cart.php">
	<operation>
		<search><![CDATA[$_['text_recurring']  = 'Payment Profile';]]></search>
		<add position="before"><![CDATA[
   		$_['button_clearcart']  = 'Изпразни количката';
		]]></add>
	</operation>
 </file>

As you can see, you have to change the path attribute in the file tag and also translate the variable $_['button_clearcart'].

Once you are ready with the code, you have to save it using the following approach: nameofthefile.ocmod.xml. You should know by now that .ocmod.xml extension is mandatory for the Extension Installer in OpenCart.

After you have created the file go to your store and navigate to Administration Page > Extensions > Extension Installer and upload the file. You will receive a success message. When that happens go to Extensions > Modifications and click on the Refresh button in order to apply the new changes.

Congratulations! You are all set. Now the customers will be able to clear their carts from the mini-cart widget:

They will also be able to do that from the shopping cart page:

That’s it! I hope you guys find this trick useful and try it out. If you have any questions, make sure to use the comments section below.

Stay tuned for our next posts!

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time
comments powered by Disqus