advertise on ashwathshivaram.com

WooCommerce: How to update cart Automatically 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;
}
 
/*TRY THIS IF THE ABOVE CODE DID NOT HIDE THE BUTTON */
 
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  FREE
 * @author        Ashwath Shivaram
 * @compatible    Woo 4.3
 * @donate $9     
 */
 
add_action( 'wp_footer', 'cart_update_qty_script' ); 
function cart_update_qty_script() { 
    if (is_cart()) : 
    ?> 
   <script>
    jQuery('div.woocommerce').on('change', '.qty', function(){
        jQuery("[name='update_cart']").prop("disabled", false);
        jQuery("[name='update_cart']").trigger("click"); 
    });
    </script>
    <?php 
    endif; 
}

Contact me for any WooCommerce help

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related Articles

Recommended Products

Latest Articles