How to Add WooCommerce Auto Update Cart on Quantity Change

We are the ones who have created an e-commerce website with WordPress WooCommerce. 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. Click Add New, then type Simple Custom CSS and JS in the search bar, then install and activate from the plugin. OK, we have successfully installed the 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, paste it into custom CSS, and click publish. Refresh the cart page again. OK, we were able to hide the update cart button successfully.

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

Add Auto Update Cart Function

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

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 helpful 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: 24

Newsletter Updates

Enter your email address below to subscribe to our newsletter

3 Comments

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.

Your email address will not be published.

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