WooCommerce Remove Update Cart Button and Make it Automatically Update.

WooCommerce Remove Update Cart button and make it automatically update.

WooCommerce gives us by default functionality to update the cart with the button, but what do you think – would it be better if the cart will be updated automatically? Automatically mean when you change the quantity of a product then it will update cart subtotal automatically.

WooCommerce Update Cart Button on Cart Page

If you are experienced with woocommerce and you know how the update cart button looks like. This button has the purpose to update the cart page including total, subtotal, tax, and shipping, etc when a customer has changed the quantity of product on the cart page.

cart page
This is the update cart button on cart page

Remove the Update Cart Button

So, let’s start to remove update cart button with just add a couple of lines of code in your .css and .js files OR your theme’s functions.php file (I suggest to use child theme). It is easy to play with code and make a hook to do this.

Method 1 (Using .css and .js files)

In this method, we will use only .css and .js files that are connected to the frontend.

Follow these are the points to remove the update cart button:

  1. Login into your cPanel account where you are hosting the website
  2. Go to File Manager and open your website’s folder
  3. Open your active theme folder and find the style.css file
  4. Add this below code in the style.css file

    Look at this CSS code:

    Save this file. And here I would like to tell you that, we will just hide or disable the cart button and we cannot remove this button because of some JS functions triggers with this button.

  5. And the next step we will also trigger the event on this button while changing the quantity of the product. And you will see the auto-update cart page.
  6. So, open your any .js file or custom enqueued .js file. And add this below jQuery code in the file.

NOTE:- You can also add above CSS and jQuery code in header.php OR footer.php file with using the HTML <style> and <script> tag.

After adding those couple of lines in their files, the cart page will work like this. You can see the page updating automatically.

cart page after
This is after cart page

Method 2 (Using functions.php File)

This is another way to do all thing in one single file. In this method, to remove the update cart button, we will use the theme’s functions.php file. We will make a hook function to add all the above code in the Header OR Footer of the website.

As I already mentioned above you can also use the header.php OR footer.php file directly but here we will hit the wp_footer hook in the functions.php file to do this.

Look at this WordPress Hook –

Add this above function in your active theme’s functions.php file and save it. And you are done!

Check the cart page and test with changing the quantity of product, you will see there is no update cart button now and the cart is updating automatically.

If you have any questions or stuck at any point, please ask me in the comment section. I would like to help you with that.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *