WooCommerce: Automatically Update Cart on Quantity Change

There is a lot of literature online that solves this UX problem – so in this article let’s see if I can give you a simplified, working, updated version.

So, do you hate the “Update Cart” button too? Yes, the one you have to click after you update the quantity of a product in the cart…

Well, you’re in the right place: a simple PHP function, two lines of JQuery, one line of CSS and the result is pretty straight forward!

Part 1 – CSS Snippet: Hide the WooCommerce “Update Cart” Button

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.

input[name='update_cart'] {
   display: none !important;
}

/* OR TRY THIS */

button[name='update_cart'] {
   display: none !important;
}

Part 2 – PHP Snippet: Auto-update WooCommerce Cart when Quantity Changes

Now that the button is hidden, all we need to do is to “click” the button via JQuery and let WooCommerce do the exact same job (updating cart totals, taxes, etc.).

In detail, when we “click” on any of the quantity inputs, we go and trigger a “click” on the hidden Update Cart button.

Easy, no?

/**
 * @snippet       Automatically Update Cart on Quantity Change - WooCommerce
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 6
 * @donate $9     https://www.tutoraspire.com
 */

add_action( 'wp_footer', 'tutoraspire_cart_refresh_update_qty' ); 

function tutoraspire_cart_refresh_update_qty() {
if ( is_cart() || ( is_cart() && is_checkout() ) ) {
wc_enqueue_js( "
$('div.woocommerce').on('click', 'input.qty', function(){
$('[name='update_cart']').trigger('click');
});
" );
}
}