Auto update cart on click in WooCommerce

woocommerce update cart button
woocommerce update cart ajax hook
woocommerce update cart hook
woocommerce cart quantity not updating
woocommerce update mini cart quantity ajax
update cart on checkout page woocommerce
woocommerce auto update cart plugin
ajax update cart

I want to auto update the cart when quantity is changed. I got this working code in functions.php, but it's only working for the first click. How to adjust it so it's working for every click?

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

try it like this..

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

I it's because the html is being replaced, div.woocommerce click event is no longer there... if you attached it to body, it might work...

Ajax Cart AutoUpdate for WooCommerce – WordPress plugin , A light plugin that automatically updates cart page and mini-cart when product quantity is changed. Removes the default “Update cart” button. Optionally turns off  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.

You can use plugin like below.

https://wordpress.org/plugins/woo-update-cart-on-quantity-change/

Also this plugin is working for you.

https://wordpress.org/plugins/woocommerce-ajax-cart/

Please use plugin for your safe side because plugin works in every wordpress version and woocommerce version.

OR

You can try custom code with minor modifications like below.

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
    if (is_cart()) :
        ?>
        <script type="text/javascript">
            jQuery(document).on("click", "div.woocommerce .quantity .button", function(e) {
               jQuery("[name='update_cart']").trigger("click"); 
            });

OR  
            jQuery("body").on("click", "div.woocommerce .quantity .button", function(e) {
                jQuery("[name='update_cart']").trigger("click"); 
            });
        </script>
        <?php
    endif;
}

Auto update cart on click in WooCommerce, The cart page already works this way where when the quantity is changed on an item, the Update Cart button becomes clickable. The update button is actually disabled when the page loads, so you need basically to enable it, right before triggering the click event. Uses the default WooCommerce cart update event. Cart update is delayed by time in milliseconds since the last action affecting quantity, changeable in plugin settings, default 1000. It means that the update will fire only once when the customer is done with changes. Optionally change min quantity in the cart from 0 to 1, on by default.

The reason that is happening is because your dom is refreshed with the Ajax and events are flushed.

What you need to do is listen to the event 'updated_cart_totals' which will tell you that dom is updated and after that reactivate your listeners.

function quantity_upd() {
  $(".woocommerce-cart-form").on("change", ".qty", function() {
    $("[name='update_cart']").removeAttr('disabled');
    $("[name='update_cart']").trigger("click");
  });
}

$( document ).on( 'updated_cart_totals', function() {
  quantity_upd();
}

Please adjust it for your theme and HTML, it can vary

How to Update WooCommerce Cart on Quantity Change, Because by default when you change the product quantity in WooCommerce cart, the cart won't be updated until you smash the Update cart button. When you change the product quantity, the cart will be immediately updated. It is possible to do with just a couple lines of code. WooCommerce Auto Update Cart On Quantity Change: By default WooCommerce does not update cart when you change the quantity, you need to click on the update cart button. If you want to update cart on quantity change then you can simply do this by using jQuery change event.

As I don't know your HTML structure so I built a sample jQuery which is working on storefront theme.

Here is a sample code.

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
    if (is_cart()) :
    ?>
    <script>
        jQuery('div.woocommerce').on('keyup', '.quantity .qty', function(){
            //console.log('clicked');
            jQuery("[name='update_cart']").trigger("click"); });
    </script>
    <?php
    endif;
}

WooCommerce auto-update cart when quantity changed, relates , WooCommerce auto-update cart when quantity changed, relates with I'm unable to get the upd_cart_btn.trigger("click") to work using woocommerce 2.6. remove the 'disabled' attribute from the Update Cart button before applying the click trigger: jQuery("[name='update_cart']").removeAttr("disabled").trigger("click"); Sign up for free to join this conversation on GitHub .

Rather than try to trigger the click, how about removing the "disabled" attribute from the Update Cart button so the user can click it. The cart page already works this way where when the quantity is changed on an item, the Update Cart button becomes clickable.

add_action( 'wp_footer', 'cart_update_qty_script' ); 
function cart_update_qty_script() { 
    if (is_cart()) : 
    ?> 
    <script> 
        jQuery('body').on('click', 'div.woocommerce .quantity .button', function(){ 
            jQuery("[name='update_cart']").prop("disabled", false);
        }); 
    </script> 
    <?php 
    endif; 
}

Auto update cart after quantity change, 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,  Most of you would know that WooCommerce does not allow customers to update the cart from the checkout page. Which means that you cannot change the quantity or delete the product from the checkout page. Customer needs to go back to cart page, update the cart, and then go to the checkout page again. This …

WooCommerce Auto Update Cart, It automatically updates the cart when a customer changes the quantity of a product so they don't have to manually click the Update Cart button. Provides your  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 kn

How to Auto-update WooCommerce Cart when Quantity Changes, first post that shows how to add plus and minus on your woocommerce site on the single page or cart to update the product price and total price automatically. Since WooCommerce 2.6.0, released June 2016, WooCommerce cart page uses Ajax to update cart totals after clicking on Update cart button. WooCommerce 2.6.0 requires WP 4.4 or newer. No need to worry about backend and creating your own Ajax call, the one assigned to Update cart button can be used.

WooCommerce Auto Update Cart When Quantity Changes , Do you want WooCommerce auto update cart when quantity changes. Yes, with a simple php function with two lines of JQuery and the result is  Go to: WooCommerce > Settings > Products > General: ↑ Back to top. Select what page you want to be the default shop page. Need not be the Shop page that WooCommerce installed, or can be skipped if you use another method to display products. Add to cart behavior. Redirect to cart page after successful addition – Automatically takes the

Comments
  • use this plugin as well :wordpress.org/plugins/woocommerce-ajax-cart
  • unfortunately same problem, but thanks for telling why this happens
  • I've tried the code and it's working on my end. Do you have a link we can check? or see browser's console if there's an error when you click
  • I am trying on staging website (pw-protected). But you can see the problem on ergotopia.de. The problem there is, only every 2nd click is firing the auto update. Function was: 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; }
  • @KrystianManthey yes, you are right. Proper event is change not click. I have update code with version working for me in Nov 2019.
  • Thanks for answer, but I wont use not well supported plugins with bad ratings. Your code is working for the 2nd click only. Then nothing more happens.
  • @KrystianManthey Please check my edited answer. Try it and let me know.
  • both version updates on first click, but then clicks are not possible anymore (quantity doesnt change).
  • maybe its because we have the newest woocommerce, wordpress etc. With this code, nothing updates. But thank you for trying to help!
  • I have tested in Woo Version 3.1.1 and WP Version 4.8.1. can you share your website URL?
  • I am trying on staging website (pw-protected). But you can see a similar problem on ergotopia.de. The problem there is, only every 2nd click is firing the auto update. Function was: 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; }