Add Ajax Quantity Selector Buttons To Mini Cart Widget in WooCommerce

This code displays the quantity in the mini cart widget for WooCommerce : The code :

• Adds the quantity selector with plus and minus buttons.
• Adds ajax to the quantity so it instantly updates without page refresh.
• Works in any widget area where you place the cart widget.
• Works in any hook location or template file when calling the cart widget programmatically using a function call.( provided in the PHP code )

Demo Video

Shows the WooCommerce cart widget ( Mini Cart ) with added quantity buttons updating instantly on quantity change. Shows the buttons working when using the carts function call programmatically with a hook as well as the standard cart widget.

Installation

There’s 3 steps :

1. Upload the woocommerce folder to your child theme.
2. Copy and paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file.
3. Copy and paste the CSS to the end of your child themes stylesheet. This may need tweaking for use in different themes which all use different default styles for woocommerce.

Using the WC Widget OR Function Call

If using the cart widget, remove the code from functions between line 66 and 77. Use this code if not wanting to use the widget and call the cart function directly using a hook or template file using the code on line 73.