-
-
Save mikaelz/f41e29c6a99a595602e4 to your computer and use it in GitHub Desktop.
/** | |
* 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>'; | |
} |
@ 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?
This is what worked for me