Automatically Update Cart when quantity changed in WooCommerce


Today’s blog will allow you to have your cart totals automatically update when you modify the amount field without having to click the update button on the cart page.

Remove the WooCommerce Update Cart Button

add_action( 'wp_head', 'cxc_cart_refresh_update_hide_button' );
function cxc_cart_refresh_update_hide_button() { 
		.woocommerce button[name="update_cart"],
		.woocommerce input[name="update_cart"] { display: none; }

Automatically WooCommerce Cart when Quantity Changes

Now that the button is hidden, all we need to do is “click” it with JQuery and let WooCommerce handle the rest.

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

I hope you found this post useful. If you like it, please share it. Please leave a remark if there is an issue. I’ll attempt to figure things out. CodexCoach.

Also Read:

How To Disable Payment Gateways For Specific User Roles in WooCommerce

How to Edit Payment Gateway Title and Description in WooCommerce

How to Create and apply Coupons Programmatically in WooCommerce


In WordPress, how do I automatically update my cart?

To use this function, go to Appearance > Customize > WooCommerce > Cart and check the Auto Update box.

How can I add a quantity to my WooCommerce cart?

Navigate to WooCommerce > Settings > Advanced Product Quantity. then go to “Cart Quantities”

Was this article helpful?

Leave a comment

Your email address will not be published.