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 develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me