Auto update cart on click in WooCommerce

Question

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

Answer 1

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...

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

The update button is actually disabled when the page loads, so you need basically to enable it, right before triggering the click event.

Use this code:

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']").removeAttr('disabled');
           jQuery("[name='update_cart']").trigger("click"); 
        });
   </script>
<?php
endif;
}

Answer 7

Copy this code to functions:

function bbloomer_cart_refresh_update_qty() { 
   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 
   } 
}

End this to style:

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

Answer 8

The reason it only works on the first click is because everytime you update the form, it refreshes itself. So instead of doing:

jQuery('div.woocommerce').on('click', '.quantity .button', function() {

You need to switch div.woocommerce to document :

jQuery('document').on('click', '.quantity .button', function() {