How to Auto-Update WooCommerce Cart on Quantity Change

By default, WooCommerce requires users to manually click the "Update Cart" button after changing the quantity of a product. However, you can enhance the user experience by making the cart update automatically whenever the quantity changes.

1. Add the WooCommerce Cart Shortcode

First, ensure your cart page includes the default WooCommerce cart shortcode:

[woocommerce_cart]

2. Use JavaScript for Auto-Update

Add the following JavaScript snippet in your theme's functions.php file or enqueue it as a custom script:

jQuery(function($) { $('div.woocommerce').on('change', 'input.qty', function() { var $this = $(this); var delay = 500; if ($this.data('timer')) { clearTimeout($this.data('timer')); } $this.data('timer', setTimeout(function() { $('[name="update_cart"]').trigger('click'); }, delay)); }); });

3. Save and Test

After adding the script, go to your WooCommerce cart page, change the quantity of a product, and you will see that the cart updates automatically.

Conclusion

Auto-updating the WooCommerce cart enhances the shopping experience, making it more intuitive for users. Implementing this simple JavaScript solution eliminates the need for extra clicks, leading to a smoother checkout process.