WooCommerce auto-update cart when quantity changed, relates with https://gist.github.com/mikaelz/418a337dace188ba95b476ce65abfe0c

functions.php

/**
 * Auto update cart after quantity change
 *
 * @return  string
 **/
add_action( 'woocommerce_after_cart', 'custom_after_cart' );
function custom_after_cart() {
    echo '<script>
    jQuery(document).ready(function($) {

        var upd_cart_btn = $(".update-cart-button");
        upd_cart_btn.hide();

        $(".cart-form").find(".qty").on("change", function(){
            upd_cart_btn.trigger("click");
        });

    });
    </script>';
}

use this plugin... https://wordpress.org/plugins/woocommerce-ajax-cart/

@Musiphilos
I'm unable to get the upd_cart_btn.trigger("click") to work using woocommerce 2.6

appreciate any ideas. thx

Hi, the solution suggested by @Musiphilos works well for me. There is only one small downside, namely that it only works once. If I change the quantity again it doesnt do anything. Any idea how I can make it work every time someone clicks the button?

thanks

I have the same problem as tabasco86. This code works the first time, but once the cart reloads, it no longer triggers. This appears to be a result of the entire form being removed and re-added on the WooCommerce ajax update. Moving the script to the wp_footer action, with an is_cart() conditional check and changing to a delegate event appears to fix it for me.

/**
 * Auto update cart after quantity change
 *
 * @return  string
 **/
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;
}

Did anyone come right with this ? I found that adding location.reload(true); after the jQuery("[name='update_cart']").trigger("click"); but then it reloads the page when you increase or decrease the quantity

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

Here's the full 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;
}

Is it possible to auto update cart when someone select from variations.
let me know how I can do that .... I want to update cart when someone select radio buttons and if someone type price in input field
Please check this link www.stunomatic.com/amp/donation/

Hey guys,

im really intrested in getting this worked.
I tried your Codes but nothing is happening when i change the quantitys. But if i for example add the location.reload(true); that dizzyza mentioned the pages refreshes endlessely so the code seems to work a bit can someone help me?

MfG
Rennmoehre

Works fine on a Avada theme I am using:

add_action(` 'woocommerce_after_cart', 'custom_after_cart' );

function custom_after_cart() {
echo '<script>
function click_update_cart_btn(upd_cart_btn) {

     var upd_cart_btn = jQuery(".fusion-update-cart");
     upd_cart_btn.trigger("click");

}

jQuery(document).ready(function($) {
    var update_cart;        
         
    jQuery("body").delegate(".cart_item .qty").on("change", function(){
        
        if(update_cart != null){
            clearTimeout(update_cart);
        }
        update_cart = setTimeout(click_update_cart_btn, 1000);
    });
});   
        
</script>
<style> .fusion-update-cart { display:none!important;} </style>';

}

Woo 2.6.14 not working

I Added a mouseout function:

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

?>`

With the mouseout function @luizlopescom posted, it works fine on desktop/notebook but not on my ipad and smartphone. Any idea how to fix it would be really appreciated!

@gianlucaciralli, works good, thanks.

This is what worked for me

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

@ jonathan-kosgei above code works for me as well

@ jonathan-kosgei But now it is done for only one time ? don't works for second time ?

Hi there. If it helps anyone, to solve the 'it works every second time' issue I had to...

Use a more specific selector:
jQuery('div.woocommerce').on('click', 'input.qty', function(){

remove the 'disabled' attribute from the Update Cart button before applying the click trigger:
jQuery("[name='update_cart']").removeAttr("disabled").trigger("click");

(Actually, I cannot be sure the first tip was necessary!)

I have tried all of these solutions with no success. It seems like

jQuery("[name='update_cart']").removeAttr("disabled").trigger("click");

should work but it seems like the frontend woocommerce script (cart.min.js) is clobbering any related javascript I load in the page footer.

I have also tried with:
jQuery("input[name='update_cart']").prop( 'disabled', false ).click();

The only thing that has worked for me is to override the frontend script completely by unregistering the script and registering a custom version of it with the button disabling turned off completely.

I am concerned that the solution of overriding the frontend script in my child theme will cause me problems down the line as Woocommerce is updated. Does anyone have an opinion about whether or not overriding the frontend script is good or bad practice?

I have this working now and I figured I'd share my solution. When the quantity is initially updated and the update cart button is triggered, the frontend js disables the update cart button upon successful ajax call. So I added code to enable the button after successful ajax calls. This solves the issue of it only working on the first quantity change.

add_action( 'wp_footer', 'cart_update_qty_script', 1000);
function cart_update_qty_script() {
    if (is_cart()) :
        ?>
        <script type="text/javascript">
                jQuery(document).ready(function( $ ) {
			// Enable update cart button upon successful ajax call
			$(document).ajaxSuccess(function() {
			$( 'div.woocommerce > form input[name="update_cart"]' ).prop( 'disabled', false );
		});
		// Enable update cart button on initial page load
		$( 'div.woocommerce > form input[name="update_cart"]' ).prop( 'disabled', false );

		// Update cart when quantity pulldown is changed
		$('body').on('change', '#quantity_pulldown', function () {
                       var quantity_selected = $("#quantity_pulldown option:selected").val();
		       $('#product_quantity').val(quantity_selected);

		       jQuery("[name='update_cart']").removeAttr('disabled');
		       jQuery("[name='update_cart']").trigger("click");

	       });

	});

      </script>
        <?php
    endif;
}

@gianlucaciralli, your solution is the best. Thank you very much.

gianlucaciralli solution is the best.

Nevertheless, the Ajax behavior is slower compared to the plugin https://wordpress.org/plugins/woocommerce-ajax-cart/ recommended in this thread.

Any idea on how to speed up the Ajax behavior?

Thanks

@gianlucaciralli solution works fine on WC 3.2.0-beta.2 using Storefront as the active theme.

@gianlucaciralli thank you for the code. it works on WC 3.1.2 with Flat-some. a little bit slowly, but it works!

@gianlucaciralli thank you for the code. However there is a time delay between jQuery("[name='update_cart']").removeAttr('disabled'); and when the actual update-cart button is "enabled" in the DOM, so jQuery("[name='update_cart']").trigger("click"); fails because it happens between those two events. I altered your code as follows:

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

While this avoids the problem by adding a little time buffer between the two events, it does not solve the problem and does not assure success. I should also mention that I changed the quantity selector to a dropdown menu and the time delay is variable as it depends on the speed in which the user selects the quantity (the longer the better). I am not good with jQuery at all, is there a way to monitor an attribute status change and only trigger the "click" once an element's attribute has changed?

@ross-bell thanks, your code works perfect and is better than the @gianlucaciralli code

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
  if (is_cart()) :
   ?>
    <script>
    	jQuery(window).on('load', function(){
    		jQuery("[name='update_cart']").removeAttr('disabled');
    	});
    	jQuery( document.body ).on( 'updated_cart_totals', function(){
		    jQuery("[name='update_cart']").removeAttr('disabled');
		});
		jQuery('div.woocommerce').on('change', '.qty', function(){
           jQuery("[name='update_cart']").trigger("click"); 
        });
   </script>
<?php
endif;
}

This might be interesting, I had similar problems as you folks mentioned and I also had to handle some quantity buttons:
https://stackoverflow.com/questions/47392550/woocommerce-quantity-increment-with-buttons-not-working-after-ajax-refresh-and-a/4740007

Hi guys, anyone have a solution for updating cart totals when is delivery method changed ?

@ghost solution works!

Any ideas how to prevent cart auto update if user tries to add stock for product with insufficient stock?