There are various approaches for adding plus and minus buttons to the Quantity Input of your Cart, many relying on plugins or code snippets.
This one uses PHP and jQuery together to add buttons, and controls them through functions added to woocommerce_after_quantity_input_field and woocommerce_before_quantity_input_field hooks.
How to Add a Plus Button
There are multiple methods available to you for adding plus and minus buttons to the quantity input on the Cart page, one being using a plugin such as “Quantity Plus Minus Button for WooCommerce.” This plugin allows you to choose which pages it should appear (Cart, Product, Checkout and Shop pages, for instance).
Add plus and minus buttons to the Cart page using a code snippet. This code uses PHP functions to alter the HTML output of product pages while jQuery detects whether one or both buttons is clicked, updating quantity input field accordingly.
Step one of this snippet involves writing a PHP function that will modify the product page. This function calls on hooks woocommerce_after_quantity_input_field and woocommerce_before_quantity_input_field to add plus and minus buttons as well as use the wc_enqueue_js() function for adding JavaScript code directly onto the product page.
How to Add a Minus Button
In addition to eliminating default arrows, this plugin enables you to select quantities using plus and minus buttons instead of text input fields. Plus and minus buttons provide faster updating capabilities than text input fields as they let users instantly update their cart quantity using them.
Baymard Premium users often make mistakes when changing quantities in text fields, leading to frustrating errors that cause cart abandonments and thus increasing error rates. By including plus and minus buttons on the Quantity Input area of their Cart, we hope that we can reduce errors further.
This plugin uses WordPress’ add_action() function to modify the woocommerce_before_quantity_input_field and woocommerce_after_quantity_input_field hooks that are invoked before and after product page quantity input fields, respectively. It uses jQuery snippets for button display – either specific pages or all. As demonstrated below on Product Pages.
How to Remove a Plus Button
If your store uses WooCommerce, customers might not have an easy way to increase or decrease the quantity of items in their cart using plus and minus buttons. This issue can easily be remedied using a code snippet.
This code will add plus and minus buttons to cart pages, product pages and any other area with quantity input fields. It uses jQuery to update quantities when one of the buttons is clicked; depending on your theme you may need to adjust its css so it looks perfect for your storefront.
Testing revealed that users were easily able to use these buttons to modify the quantities in their carts, with an obvious hit area much larger than trying to click tiny text fields in their cart. Furthermore, accidentally removing products was much less likely.
How to Remove a Minus Button
Tests conducted on users who click into text fields such as quantity inputs have revealed that users often struggle to recognize they must delete any existing content before typing their desired value into them. Once aware, it can often prove challenging to remove said existing content in time.
This code snippet adds “+” and “-” buttons on either side of WooCommerce pages that require quantity input fields, using jQuery to detect when these buttons are clicked and update their value accordingly. This lightweight solution does not block your page, however in order to float buttons properly. Depending on your theme this may be necessary in order to avoid display issues when managing large carts; unfortunately this snippet won’t work on sites which only utilize drop-downs for managing products in their cart.