How to automatically update the cart amount when changing quantities

There is almost unanimous agreement that having to click a button to update the amount of the shopping cart in an Ecommerce when changing quantities is a usability bug, a user experience error.

Unfortunately, WooCommerce by default does not include this functionality, for the shopping cart amounts to be updated, after changing any quantity in the shopping cart items, you have to click a button to display the changes.

But, fortunately, this is WordPress, and we have solutions for everything, also for this.

Automatic update of the cart when changing quantities (with code)

A simple method of having the cart amount automatically update as the quantities in the products change is through a bit of JavaScript, specifically this one:

<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").prop("disabled", false);
jQuery("[name='update_cart']").trigger("click"); 
});
</script>Code language: HTML, XML (xml)

The script will update the cart amounts when changing any amount in the cart items.

So what we’ll do is integrate it with WordPress by creating an action hook that launches it on the cart page from the footer, like this:

/* Update cart amounts when changing quantities */
add_action( 'wp_footer', 'wphelp_update_cart_when_changing_quantities' );
function wphelp_update_cart_when_changing_quantities() {
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
endif;
}Code language: JavaScript (javascript)

Simply copy the above code and paste it into the functions.php file of the active child theme or into a customization plugin if you already have one.

Once you save the changes you will have the desired effect.

If the part of hiding the update cart button in your theme doesn’t work for you, you can try this other one, adding it to the additional CSS section of the WordPress customizer:

/* Hide update cart button */
input[name=update_cart] {
display: none !important;
}Code language: CSS (css)

Automatic update of the cart when changing quantities (with plugins)

If you don’t feel comfortable adding code don’t worry, there are plugins that will help you in this usability improvement.

WooCommerce Ajax Cart

Simple plugin that does its job, with some optional settings that, however, I recommend that you do not activate, as they do not look especially good with all themes.

I advise you to go through its settings and deactivate the customizations.

Which, as you can see, do not look good in almost any theme:

But if you deactivate them it works perfectly, just like the code we have seen before.

Ajax Cart AutoUpdate

This other plugin also works perfectly, and its settings integrate somewhat better with any theme than the previous one.

Anyway, as with the other, I recommend you to disable their customizations, they do not add anything substantial, except perhaps ….

• Change the minimum quantity from 0 to 1, so that a product can not be emptied from the cart (it seems to me a usability error but maybe someone thinks it’s good)
• Not to show the messages of the updated cart, etc., when changing quantities and amounts automatically. It’s a matter of taste, but I think it’s not a bad thing for the customer to be fully aware that the amounts have changed.

What I always recommend to change is the delay of update of the amounts, by default something high (1.000 ms = 1 second), and that seems to me more correct to leave it in more or less the half, for example in 600 ms.

Something that does contribute that did not have the previous plugin is that in addition to the functionality, it also hides the “Update cart” button, which no longer makes sense to update the cart automatically.

How to hide the “update cart” button

As we’ve seen with the last plugin, it doesn’t make sense to show the “Update cart” button if it’s going to be updated automatically, either with the code we saw at the beginning or with the first plugin in the list.

So, if you want to hide the “Update cart” button because you are going to use the code or the first plugin, just add these CSS lines in “Appearance → Customize → Additional CSS“:

/* Hide update cart button */
button[name='update_cart'] {
display: none !important;
}Code language: CSS (css)

Paste the code and publish the changes, nothing else.

This would complete the whole cycle.

Do you also think it is better to automatically update the cart amount when changing quantities?