WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

Here’s a quick snippet you can simply copy/paste to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page.

This snippet comes with a jQuery script as well, as we need to detect whether the plus or minus are clicked and consequently update the quantity input. jQuery might look difficult to many, but the beauty of this is that you don’t need to have a degree in jQuery – just copy/paste and see the magic happen.

Note: you will probably also require some additional CSS, as your theme might give a “float” to the quantity DIV while by default HTML buttons take inline-block. I’ve added some CSS valid for the Storefront theme below.

How to show Plus and Minus buttons beside the Add to Cart Quantity input @ WooCommerce single Product Page

Snippet (PHP): Display Plus & Minus Quantity Buttons @ WooCommerce Single Product Page

Snippet (CSS): Adjust the Quantity Div to Make Sure Plus and Minus Buttons Stay on Either Side of It (Storefront Theme)

As I said in the intro, our plus and minus HTML buttons will take a display:inline-block. If your theme applies a float to the quantity DIV, then the buttons will display on the same side, and not one on the left and one on the right.

This CSS is valid for Storefront theme (you’ll need to amend it based on your custom one):