Update Cart Automatically on Quantity Change
In this tutorial we are going to remove the “Update cart” button in WooCommerce and to do auto-update cart when quantity changes.
Also check my lightweight plugin for WooCommerce that allows to do the same.
Below on the screenshot you can see how it is going to look like:

The code we need in order to achieve that is quite simple, we just have a couple CSS lines and a couple JavaScript (jQuery) lines of code.
First of all we have to hide the button. And yes – we shouldn’t remove it, just to hide! Because it is connected to the trigger in JavaScript and if you remove it, nothing will ever happen on quantity change.
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none;
}
And the second step – a small jQuery event:
jQuery( function( $ ) {
$('.woocommerce').on('change', 'input.qty', function(){
$("[name='update_cart']").trigger("click");
});
} );
The basic version of the code is not perfect and I will tell you why. Because it allows to send too many AJAX requests! One request on every quantity change! Let’s optimise it a little bit.
jQuery( function( $ ) {
let timeout;
$('.woocommerce').on( 'change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click"); // trigger cart update
}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
});
} );
We’ve just added the timer and that’s all we need.
Where to add the code – you may ask?
The perfect way to insert the code is if you are already using a child theme and your theme has CSS and JS files. But if not, you can use wp_head
and wp_footer
hooks for this purpose.
Complete code is below.
<?php
/**
* Update Cart Automatically on Quantity Change
*
* @author Misha Rudrastyh
* @url https://rudrastyh.com/woocommerce/remove-update-cart-button.html
*/
add_action( 'wp_head', function() {
?><style>
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none;
}</style><?php
} );
add_action( 'wp_footer', function() {
?><script>
jQuery( function( $ ) {
let timeout;
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click"); // trigger cart update
}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
});
} );
</script><?php
} );

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Mike, thanks for a great advice!!!
it works perfectly
(one small comment for those who are not familiar with coding: the first snippet is Custom CSS)
Working perfectly, thanks!
I get an error
syntax error, unexpected ‘var’ (T_VAR), expecting end of file
This is JavaScript by the way 🙃
Is it possible to do this from the product page? I have it working on the checkout page but would like to allow users to use this function on the product page itself.
I actually just figured it out! Thanks :D
Awesome! 🙃
Thank you much. It only allows me to auto update a qty once.
nice, working great, thanks for hint
Perfect! Works fine!
Awesome, so simple.
Simple and works great :) Thanks :)
Thank you so much! Still works perfectly…
Hi, looks nice piece of code. Is this working with minicart?
Hi, thanks! Just tested it with Storefront, seems like it is working
CSS code needs the addition of !important.
Probably, but it is better to avoid it as a best practice (when possible).
Thanks you so much, your code work perfectly
Thanks! You are the one!
Hi, this is August 2023 and I found your code
thanks for snippet
It work smoothly on desktop and mobile
but on mobile the button still showing.
I google and found the solution