How to Add WooCommerce Auto Update Cart on Quantity Change

We are the ones who have created an e-commerce website with WordPress WooCommerce. By increasing or decreasing the quantity of a product on the default cart page, its price is not updated automatically, it has to be updated manually.

In today’s post, we will learn How to Add WooCommerce Auto Update Cart on Quantity Change.

Install Simple Custom CSS and JS Free Plugin

Themes you are using on your WordPress WooCommerce website must have “custom css and custom js”. If not, there is no problem. We can continue working using a plugin. The name of the plugin is Simple Custom CSS and JS. You can download and upload from here if you want. Or you can install it from the WordPress dashboard.

How to Add WooCommerce Auto Update Cart on Quantity Change
Simple Custom CSS and JS Free Plugin

Login to the dashboard of your WordPress website to install the plugin. From the plugin, click Add New, then type Simple Custom CSS and JS in the search bar, then install and activate. OK, we have successfully installed Simple Custom CSS and JS plugin.

Install Simple Custom CSS and JS Free Plugin
Install Simple Custom CSS and JS Free Plugin

Hide Update Cart Button

To hide the update cart button, copy the css code below and paste it into custom css and click publish. Refresh the cart page again. OK, we were able to successfully hide the update cart button.

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none !important;
}
Hide Update Cart Button

Add Auto Update Cart Function

To add the Auto Update Cart Function, copy and paste the JS code below into the custom JS and click Publish. OK, we were able to successfully add the Add Auto Update Cart Function.

var timeout;
jQuery( function( $ ) {
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
}, 500 ); // 1 second delay, half a second (500) seems comfortable too
});
} );
Add Auto Update Function Cart Page
Add Auto Update Cart Function
You can read our other WordPress posts

I hope this post will be useful for you. If you like it, please share the post. If there is any problem, please comment. I will try to solve it.

Share your love
Default image
SM.Tanvir Hassan
I love technology and love to learn. This is my personal blog. I share with you everything I learn through this blog
Articles: 19

Newsletter Updates

Enter your email address below to subscribe to our newsletter

One comment

  1. The post has been great. I want more posts like this. I will add Auto Update Cart to my ecommerce site today

Leave a Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.