How to Add Quantity Buttons (Plus & Minus) in WooCommerce?

Quantity Increment Buttons for WooCommerce allows you to add user-friendly plus/minus buttons and sliders to quantity fields in your WooCommerce store. Control limits, steps, tooltips, and design to make shopping quick and easy.

Configuration

↑ Back to top

Go to WooCommerce > Quantity Buttons. Here, you will find all the configuration settings for the Quantity Buttons plugin.

General Settings

↑ Back to top

Go to WooCommerce > Quantity Buttons and Click the General Settings Tab

The General Settings section allows you to control the visibility, behavior, and appearance of quantity buttons across your store, including options for sliders, tooltips, and decimal quantities.

1. Enable Quantity Buttons – Toggles quantity buttons on product pages site-wide.
2. Enable on Shop Page – Enables quantity buttons on the shop pages.
3. Allow Decimal Quantities – Allows customers to enter fractional quantities (e.g., 0.5, 1.25).
4. Enable Icon Button – Displays plus/minus as icons instead of standard buttons.
5. Enable Slider – Replaces buttons with a slider UI for selecting quantity (max 100).
6. Enable Tooltip – Shows a tooltip displaying step, min, and max values near the quantity input.
7. Tooltip Format – Customize tooltip text using placeholders like {step}, {min}, and {max}

Rules Settings

↑ Back to top

Head to WooCommerce > Quantity Buttons > Click Rules Tab

The Rules tab lets you create targeted quantity restrictions for specific products and user roles, including control over minimum, maximum, and step values.

1. Rule Name – Enter a descriptive name to identify this rule
2. Enable Rule – Toggle to activate or deactivate the rule
3. Apply To – Choose where the rule should apply::
   • Products – Select one or more specific products
   • Categories – Select one or more specific categories
4. User Roles – Restrict the rule to selected user roles (e.g., customer, guest)
5. Minimum Quantity – Set the minimum quantity allowed in the cart for selected items
6. Maximum Quantity – Set the maximum quantity a customer can purchase
7. Step – Define the quantity increment (e.g., enter 2 to allow 2, 4, 6…)

Rules Grid

↑ Back to top

The Quantity Button Rules grid displays all configured rules, allowing store admins to quickly view, edit, or delete quantity restrictions based on product type, minimum and maximum quantities, step values, and activation status.

1. Name – The descriptive name given to the rule for easy identification
2. Type – Specifies the target type for the rule (e.g., Product, Category)
3. Items – Lists the specific products or categories the rule applies to
4. Min – Displays the minimum quantity allowed for the listed item(s)
5. Max – Displays the maximum quantity allowed for the listed item(s)
6. Step – Indicates the quantity increment for the rule (e.g., 1, 2, 5)
7. Enabled – Shows whether the rule is currently active (Yes) or inactive (No)
8. Actions – Provides Edit and Delete links to modify or remove the rule (shown below rule name)

Customization

↑ Back to top

Go to WooCommerce > Quantity Buttons > Click the Customization Tab.

The Customization tab allows you to personalize the appearance, position, and icon style of the quantity buttons to match your store’s design and branding.

1. Button Shape – Select the shape of the quantity buttons:
   • Square
   • Rounded
   • Circle
2. Button Size – Adjust the button size by choosing from
   • Small
   • Medium
   • Large
3. Button Color – Set the background color of the quantity buttons.
4. Button Hover Color – Choose the button color when a user hovers over it.
5. Button Border Color – Define the border color for quantity buttons.
6. Button Text Color – Set the color of the icon or text inside the buttons.

7. Icon Type – Choose the icon style:

• Plus/Minus
• Arrows
• Chevrons
• Custom icons

8. Custom Icons – Upload or link to custom increment and decrement icons.

9. Button Position – Determine where buttons appear:

• Before the quantity input
• After the quantity input
• Around the quantity input

10. Enable Responsive Support – Toggle responsive styling for better mobile and tablet compatibility.