Auto update cart after quantity change

Question

I am trying to Auto update the woocommerce cart after quantity is changed. The following code within the function.php is working, BUT updates the cart only if I change the quantity twice. Do you know how to fix that?

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']").trigger("click"); 
        });
    </script>
    <?php
    endif;
}

Answer 1

Almost one year late, but this question might still get visitors: You trigger the click, but the button doesn't have enough time to become enabled, so that is why, by the time you click the second time the button becomes enabled. Remove the "disabled" propriety before triggering the click:

    <script>
    jQuery('div.woocommerce').on('change', '.qty', function(){
        jQuery("[name='update_cart']").prop("disabled", false);
        jQuery("[name='update_cart']").trigger("click"); 
    });
    </script>

Answer 2

Your above code works pretty well in my local system. Don't know why its not working on your system. But you can try writing the JS code like below-

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
    if (is_cart()) :
        ?>
        <script type="text/javascript">
            (function($){
                $(function(){
                    $('div.woocommerce').on( 'change', '.qty', function(){
                        $("[name='update_cart']").trigger('click');
                    });
                });
            })(jQuery);
        </script>
        <?php
    endif;
}

It's more precise approach and cleaner I think.

Hope the above thing helps.

Answer 3

I created a free plugin Ajax Cart AutoUpdate to update cart page and mini cart totals on product quantity change. It has nice additional options, but also script alone provides wider browser support and much better user experience.

Ajax calls aren't constantly sent due to introduced update delay, in provided example it's 1000 miliseconds, but actual plugin code uses value specified in settings. It works like this:

"Cart update is delayed by amount in miliseconds since last action affecting quantity, specified by user in settings, default 1000. It means that update will fire only once, when user is done with changes."

Also for page speed fanatics, remember that if you want to defer jQuery, you better load scripts using wp_enqueue_script, with jQuery dependency set, because inline script with jQuery will fail in such case.

var timeout;

jQuery('div.woocommerce').on('change keyup mouseup', 'input.qty', function(){ // keyup and mouseup for Firefox support
    if (timeout != undefined) clearTimeout(timeout); //cancel previously scheduled event
    if (jQuery(this).val() == '') return; //qty empty, instead of removing item from cart, do nothing
    timeout = setTimeout(function() {
        jQuery('[name="update_cart"]').trigger('click');
    }, 1000 ); // schedule update cart event with 1000 miliseconds delay
});