How to Add a 'Clear Cart' Button in The OpenCart 3.x Shopping Cart

Have you ever noticed something might be missing from the cart view dropdown in your OpenCart 3.0 store?

Haven’t you ever been in a scenario where you’re browsing an online store and adding items to the cart one by one…

… when suddenly you decide you want to start over, whatever the reason.

Wouldn’t it be easier to have a single button that removes all the items from your shopping cart?

Of course it would be better to have a single click option to clear your cart.

And we’re here to show you how to get that button in OpenCart 3.x for free.

From now on, it will be easier for your customers to manage their shopping cart contents.

Get the modification for OpenCart 2.x here!

​To get this button, you need to install a simple modification in your store.

We will show you how this looks like below.

When you’re done, your cart view will look like this:

To get this modification into your store, open a text editor like Notepad++, Dreamweaver, etc.

Copy this piece of 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.twig">
		<operation>
			<search><![CDATA[<a href="{{ 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 style="cursor:pointer;" onclick="clearCart();" ><strong><i class="fa fa-times"></i> {{button_clearcart }}</strong></a>&nbsp;&nbsp;&nbsp;<a href="{{ 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, $this->config->get('config_currency')));

				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[$this->load->language('common/cart');]]></search>
			<add position="after"><![CDATA[
   			$data['button_clearcart'] = $this->language->get('button_clearcart');
			]]></add>
		</operation>
  	</file>
  
	<file path="catalog/controller/checkout/cart.php">
		<operation>
			<search><![CDATA[$this->load->language('checkout/cart');]]></search>
			<add position="after"><![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/en-gb/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/en-gb/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.twig">
		<operation>
			<search><![CDATA[{% if modules %}]]></search>
			<add position="before"><![CDATA[
   				<a href="{{ link_clearcart }}" class="btn btn-default" title="{{button_clearcart}}">{{button_clearcart}}</a>
			]]></add>
		</operation>
  	</file>  
</modification>

Now paste it into your text editor.

Save the file and name it install.xml.

After that compress it into a .ZIP and give it a name like clearcart.ocmod.zip.

Anything that ends on .ocmod.zip will work.

Go to your OpenCart admin and then Extensions > Installer.

Upload the .ZIP and then go to Modifications.

Click the Refresh button.

Now you’re all done!

For Multilingual OpenCart Stores

Since the modification above is for stores with a default English language, we are prepared for anything.

This additional modification allows you to add the same button, but in your own language.

We will give an example with a code sample that translates the Clear Cart button to Portuguese.

Copy the code:

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>Clear Cart Modification</name>
    <code>clear_cart_modification</code>
    <version>1.0</version>
    <author>iSenseLabs</author>
    <link>https://isenselabs.com</link>
    
    <file path="catalog/language/en-gb/checkout/cart.php">
        <operation>
            <search><![CDATA[$_['text_recurring']]]></search>
            <add position="before"><![CDATA[
               $_['button_clearcart']  = 'Clear Cart';
            ]]></add>
        </operation>
     </file>

    <file path="catalog/language/pt-br/checkout/cart.php">
        <operation>
            <search><![CDATA[$_['text_recurring']]]></search>
            <add position="before"><![CDATA[
               $_['button_clearcart']  = 'Esvazie o Carrinho';
            ]]></add>
        </operation>
     </file>

        <file path="catalog/language/pt-br/common/cart.php">
        <operation>
            <search><![CDATA[$_['text_recurring']]]></search>
            <add position="before"><![CDATA[
            $_['button_clearcart']  = 'Esvazie o Carrinho';
            ]]></add>
        </operation>
    </file>

</modification>

Change the “Clear Cart” text to the equivalent in your language.

Now, repeat the same action.

Paste it into your text editor, save it as install.xml, compress it into a .ZIP with .ocmod.zip at the end and upload it with the Installer.

Go to Modifications and click Refresh.

The New Clear Cart Button in the Storefront

Now that our modification is working, here is how it looks like in the cart view.

There’s more!

The Clear Cart button also appears in the cart page.

When you click the View Cart link, it will take you to the page before continuing the checkout.

Your customers will now be able to quickly edit their shopping carts and have a bit of a better experience in your store.

Hope you like the modification! Let us know what you think in the comments below!