Cart

WooCommerce Automatically Update Cart On Quantity Change

WooCommerce cart automatically updating totals after the product quantity is changed

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

On the cart page, you may spot a greyed out disabled “Update Cart” button.

This confuses a lot of users and only becomes clear when you change the product quantity and nothing happens.

That’s right, you have to manually update the cart instead of WooCommerce just updating it via AJAX.

The first step is to hide the pesky button and the second step is to introduce some jQuery which checks the input for changes and updates the cart accordingly.

/**
 * Snippet Name:	WooCommerce Automatically Update Cart On Quantity Change
 * Snippet Author:	ecommercehints.com
 */

// First, hide the Update Cart button
add_action( 'wp_head', 'ecommercehints_hide_update_cart_button' );
function ecommercehints_hide_update_cart_button() { ?>
	<style>
		button[name="update_cart"], input[name="update_cart"] {
			display: none;
		}
</style>
<?php }

// Second, add the jQuery to update the cart automaitcally on quantity change
add_action( 'wp_footer', 'ecommercehints_update_cart_on_quantity_change');
function ecommercehints_update_cart_on_quantity_change() { ?>
	<script>
	jQuery( function( $ ) {
		let timeout;
		$('.woocommerce').on('change', 'input.qty', function(){
			if ( timeout !== undefined ) {
				clearTimeout( timeout );
			}
			timeout = setTimeout(function() {
				$("[name='update_cart']").trigger("click");
			}, 500 ); // 500 being MS (half a second)
		});
	} );
	</script>
<?php }

Snippet Benefits

  • Reduce the number of clicks the user has to make to update the cart.
  • Remove the confusing, greyed out Update Cart button from the WooCommerce Cart template.
  • Automatically update the cart when the product quantity is changed.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 10% off on your first month with us.

26027
WELCOME OFFER