Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>';
}
@MrJoshFisher

This comment has been minimized.

Copy link

MrJoshFisher commented Feb 1, 2016

Had to make some modifications as the variables no longer work with the latest woocommerce version

var upd_cart_btn = $(".woocommerce-cart input[name="update_cart"]"); upd_cart_btn.hide(); $(".cart_item").find(".qty").on("change", function(){ upd_cart_btn.trigger("click"); }); }); </script>

@SavaTom

This comment has been minimized.

Copy link

SavaTom commented Feb 24, 2016

Line #19 & #20 of "original" code has three items after the ending script (apostrophe, semicolon and ending curly brace) but the new "modified" code does not have these three items.

Please advise.

Thank you.

@SavaTom

This comment has been minimized.

Copy link

SavaTom commented Feb 24, 2016

Either variation (original or modified) does not work for me

@MrJoshFisher

This comment has been minimized.

Copy link

MrJoshFisher commented Feb 26, 2016

Whats your site address ? Obvs, change line #11 & #14 to be the correct classes that are on your page, if it doesnt work in your functions add #9 to #19 minus the '; to your custom js file.

@Musiphilos

This comment has been minimized.

Copy link

Musiphilos commented Apr 7, 2016

I had to do the following change to make it work: var upd_cart_btn = $(".woocommerce-cart input[name='."update_cart".']");

I've also added upd_cart_btn.val("...updating"); and $(".cart_item").fadeTo( "slow" , 0.5); so it's more obvious to the user that the page is updating

So:

jQuery(document).ready(function($) { var upd_cart_btn = $(".woocommerce-cart input[name='."update_cart".']"); $(".cart_item").find(".qty").on("change", function(){ upd_cart_btn.trigger("click"); upd_cart_btn.val("...updating"); $(".cart_item").fadeTo( "slow" , 0.5); }); });

@immyryb

This comment has been minimized.

Copy link

immyryb commented Apr 26, 2016

@gayathrics

This comment has been minimized.

Copy link

gayathrics commented Sep 1, 2016

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

appreciate any ideas. thx

@tabasco86

This comment has been minimized.

Copy link

tabasco86 commented Oct 7, 2016

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

@no2pixel

This comment has been minimized.

Copy link

no2pixel commented Oct 14, 2016

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

This comment has been minimized.

Copy link

dizzyza commented Dec 13, 2016

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

@gianlucaciralli

This comment has been minimized.

Copy link

gianlucaciralli commented Dec 30, 2016

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

This comment has been minimized.

Copy link

stunomatic commented Jan 5, 2017

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/

@Rennmoehre

This comment has been minimized.

Copy link

Rennmoehre commented Feb 10, 2017

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

@jdsaraiva

This comment has been minimized.

Copy link

jdsaraiva commented Feb 22, 2017

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

}

@lukasprelovsky

This comment has been minimized.

Copy link

lukasprelovsky commented Mar 10, 2017

Woo 2.6.14 not working

@luizlopescom

This comment has been minimized.

Copy link

luizlopescom commented Apr 6, 2017

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

?>`

@Anikora

This comment has been minimized.

Copy link

Anikora commented Apr 20, 2017

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!

@brynzovskii

This comment has been minimized.

Copy link

brynzovskii commented May 2, 2017

@gianlucaciralli, works good, thanks.

@jonathan-kosgei

This comment has been minimized.

Copy link

jonathan-kosgei commented Aug 15, 2017

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

This comment has been minimized.

Copy link

amanhstu commented Aug 24, 2017

@ jonathan-kosgei above code works for me as well

@amanhstu

This comment has been minimized.

Copy link

amanhstu commented Aug 24, 2017

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

@sambomcd

This comment has been minimized.

Copy link

sambomcd commented Aug 24, 2017

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!)

@cgarone515

This comment has been minimized.

Copy link

cgarone515 commented Aug 28, 2017

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?

@cgarone515

This comment has been minimized.

Copy link

cgarone515 commented Sep 13, 2017

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

This comment has been minimized.

Copy link

SaiyanKingVegeta commented Sep 15, 2017

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

@dinamicore

This comment has been minimized.

Copy link

dinamicore commented Sep 24, 2017

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

@lukecav

This comment has been minimized.

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

This comment has been minimized.

Copy link

ArtDubrovsky commented Nov 1, 2017

@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

This comment has been minimized.

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

This comment has been minimized.

Copy link

newbieboss commented Nov 18, 2017

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

@ghost

This comment has been minimized.

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

This comment has been minimized.

Copy link

antoinehenrich commented Nov 20, 2017

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

This comment has been minimized.

Copy link

obajte01 commented Jan 24, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.