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

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. 11 yrs of experience.

Need some custom developer help? Get in touch