Update Cart Automatically on Quantity Change

In this tutorial we are going to remove the “Update cart” button in WooCommerce and to do auto-update cart when quantity changes.

Also check my lightweight plugin for WooCommerce that allows to do the same.

Below on the screenshot you can see how it is going to look like:

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

The code we need in order to achieve that is quite simple, we just have a couple CSS lines and a couple JavaScript (jQuery) 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 JavaScript and if you remove it, nothing will ever happen on quantity change.

.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");
	});
} );

The basic version of the code is not perfect and I will tell you why. Because it allows to send too many AJAX requests! One request on every quantity change! Let’s optimise it a little bit.

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

We’ve just added the timer and that’s all we need.

Where to add the code – you may ask?

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 not, you can use wp_head and wp_footer hooks for this purpose.

Complete code is below.

<?php
/**
 * Update Cart Automatically on Quantity Change
 *
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/remove-update-cart-button.html
 */
add_action( 'wp_head', function() {

	?><style>
	.woocommerce button[name="update_cart"],
	.woocommerce input[name="update_cart"] {
		display: none;
	}</style><?php
	
} );

add_action( 'wp_footer', function() {
	
	?><script>
	jQuery( function( $ ) {
		let timeout;
		$('.woocommerce').on('change', 'input.qty', function(){
			if ( timeout !== undefined ) {
				clearTimeout( timeout );
			}
			timeout = setTimeout(function() {
				$("[name='update_cart']").trigger("click"); // trigger cart update
			}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
		});
	} );
	</script><?php
	
} );

# WooCommerce, Cart

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter