As an e-commerce website owner, you might have experienced that when you change the quantity of a product on the default cart page, its price is not updated automatically. Instead, you have to update it manually. This can be a hassle for your customers and could lead to a bad user experience. However, you can solve this problem by adding WooCommerce auto update cart function to your WooCommerce website.

WooCommerce auto update cart

In this article, we will guide you through the steps on how to add the WooCommerce Auto Update Cart on Quantity Change. We have broken down the steps to make it easy for you to follow.

Install Simple Custom CSS and JS Free Plugin

Before we proceed, ensure that your WordPress WooCommerce website has the “custom CSS and custom js” feature. If it does not, you can still proceed by using a plugin. In this case, we will use Simple Custom CSS and JS, which is a free plugin that you can download from the WordPress plugin repository.

To install the plugin, log in to the dashboard of your WordPress website. Click on “Add New” from the plugins menu, then type “Simple Custom CSS and JS” in the search bar. Install and activate the plugin. Congratulations! You have successfully installed the Simple Custom CSS and JS plugin.

Hide Update Cart Button

The next step is to hide the update cart button. This step is crucial because we want the quantity to be updated automatically without requiring the user to click the update cart button.

To do this, copy the CSS code below and paste it into custom CSS. Then, click on “Publish” and refresh the cart page. You should see that the update cart button is now hidden.

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none !important;
}

Add Auto Update Cart Function

Finally, we will add the auto-update cart function to your WooCommerce website. This function will automatically update the cart when the user changes the quantity of a product.

Copy and paste the JavaScript code below into the custom JS section of the Simple Custom CSS and JS plugin. Then, click on “Publish” to add the auto-update cart function.

var timeout;
 
jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
 
		if ( timeout !== undefined ) {
			clearTimeout( timeout );
		}
 
		timeout = setTimeout(function() {
			$("[name='update_cart']").trigger("click");
		}, 500 ); // 1 second delay, half a second (500) seems comfortable too
 
	});
} );

Are you looking for ways to improve the performance of your WooCommerce website? One of the best ways to do this is by automatically deleting images associated with products that have been deleted. While deleting images manually is an option, it can be time-consuming and tedious. Automating this process will save you time and help ensure that your website remains running efficiently. Read More

Conclusion

In this article, we have learned how to add the WooCommerce Auto Update Cart on Quantity Change. By following the steps outlined above, you can ensure that your customers have a hassle-free experience when shopping on your WooCommerce website. Remember to share this post with your friends and colleagues who might benefit from it. If you have any questions or comments, feel free to leave them below, and we will be glad to assist you.