WooCommerce

Automatically Update Cart on Quantity Change

There are many possible ways on internet to update cart by simply changing product quantity. Today this tutorial you will learn that how you can easily do this by simply adding few line of code in your website. Follow below steps to Automatically Update Cart on Quantity Change:

Step: 1

First of all we need to hide the button, as we’re not going to use it at all and let PHP and JQuery do the magic instead. I know !important is not a great thing to have in your CSS code… but for this time we’ll keep it simple.

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

Step: 2

Now you need to add below JavaScript code in your website. If your theme has Custom JS option then you can add this code here, as shown in below image.

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

 

*Using woodmart theme for this tutorial