Skip to content

Instantly share code, notes, and snippets.

@mikaelz
Last active January 26, 2022 11:03
Show Gist options
  • Save mikaelz/f41e29c6a99a595602e4 to your computer and use it in GitHub Desktop.
Save mikaelz/f41e29c6a99a595602e4 to your computer and use it in GitHub Desktop.
WooCommerce auto-update cart when quantity changed, relates with https://gist.github.com/mikaelz/418a337dace188ba95b476ce65abfe0c
/**
* 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>';
}
@lukecav
Copy link

lukecav commented Oct 3, 2017

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

@ArtDubrovsky
Copy link

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

@ross-bell
Copy link

ross-bell commented Nov 17, 2017

@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?

@newbieboss
Copy link

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

Copy link

ghost commented Nov 20, 2017

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

@antoinehenrich
Copy link

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

@obajte01
Copy link

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

@fabrizioschiavi
Copy link

@ghost solution works!

@pacmanito
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment