Remove “Update Cart” button and Do It Automatically on Quantity Change

It is just a tiny thing but sometimes it can confuse your website customers. Because by default when you change the product quantity in WooCommerce cart, the cart won’t be updated until you smash the Update cart button.

What do you think – would it be better if the cart will be updated automatically like this:

Update WooCommerce cart automatically on quantity change
When you change the product quantity, the cart will be immediately updated.

It is possible to do with just a couple lines of code. First of all we have to hide the button. And yes – we shouldn’t remove it, just to hide! Because it is connected to the trigger in JS and if you remove it, nothing will happen.

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	display: none;
}

And the second step – a small jQuery event:

jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
		$("[name='update_cart']").trigger("click");
	});
} );

Above you can see the basic version of the code but it is not perfect and I will tell you why. Because it sends too many AJAX requests! One request on every quantity change! Let’s optimize it a little bit.

var timeout;
 
jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
 
		if ( timeout !== undefined ) {
			clearTimeout( timeout );
		}
 
		timeout = setTimeout(function() {
			$("[name='update_cart']").trigger("click");
		}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
 
	});
} );

Where to add the code? 🤔

The perfect way to insert the code is if you are already using a child theme and your theme has .css and .js files. But if you are not, you can use wp_head and wp_footer hooks for this purpose.

Read more about WooCommerce Cart

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code

I will only use your personal information to contact you. Privacy Policy