How to customize the WooCommerce quantity selector [Tutorial]

In this in-depth tutorial, I’ll explain how the built-in WooCommerce quantity selector tool works, then walk you through the steps to customize its style and function — no technical skills needed.

Have you ever wanted to customize the style and value of the WooCommerce quantity selector but don’t know how?

The quantity picker tool is a small UI element that can have a big impact on your store’s user experience, conversion rates, and average order value. So, it’s a good idea to modify it.

In this guide, I’ll show you step-by-step how to customize the quantity selector using the powerful Min/Max Quantity for WooCommerce plugin. The best part? The entire process takes less than 7 minutes from start to finish — even if you’re a non-technical user.

Plugin used in this tutorial

• Min/Max Quantity for WooCommerce: A simple-to-use plugin used by thousands of WooCommerce stores to customize the style and function of the quantity selector tool. It also enables you to change the default quantity, set minimum and maximum quantity rules, modify the step quantity value, and more. Check out the plugin demo or define maximum quantity limits in your WooCommerce store with the free or pro version now.

To start, let’s take a quick look at the inner workings of WooCommerce’s built-in quantity picker tool.

An overview of the default WooCommerce quantity selector

In WooCommerce, the default quantity selector is the input field interface (typically placed right above the “Add to cart” button on product detail pages) that lets customers choose how many units of a product they want while adding it to their shopping carts.

By default, WooCommerce sets the quantity selector as an <input type=”number”> field. This means:

• The style of the quantity picker usually depends on the active theme.
• Storefront and various other ecommerce themes follow a basic, functional design of a small, simple number input box with a white background and a thin border.
• Customers can manually enter a number.
• They can click the plus (+) and minus (-) or up (▲) and down (▼) arrow button controls for increasing or decreasing quantity (if their active theme supports them).
• The minimum quantity value is 1, but this can be adjusted per product.
• If you enable stock management, the maximum quantity value is restricted based on the available inventory.
• If the product is meant to be sold in multiples — think: packs of 5 or sets of 6 — you can modify the step value to increase in according increments (e.g., 5, 10, 15).

Fundamental limitations of WooCommerce’s built-in quantity selector

WooCommerce’s default quantity picker follows a basic, functional design that does the job — but it’s far from ideal for most stores. If you want to enforce specific product rules, improve your conversion rate, and make your store more user-friendly, you’ll quickly realize where it falls short.

• It offers limited styling and design control. Out of the box, the quantity input is a basic <input type=”number”> field. The design depends on your theme and browser. Some themes style it well, while others don’t which means that the (+/-) buttons may be missing or poorly designed.
• There are limited quantity management options. There is no option to manually modify the built-in controls for:
  • Step quantity increment values.
  • Minimum quantity requirements.
  • Maximum quantity limits (except for inventory limits for stores that enable stock management).
• It isn’t built with a mobile-first experience in mind. Customers shopping on the desktop version of your website can use a mouse to adjust the desired product quantity. However, customers shopping on mobile devices might struggle with small buttons or an inconsistent user interface (UI).

Benefits of customizing the WooCommerce quantity selector

Modifying the style of the quantity picker tool is much more than upgrading your ecommerce store’s visual design. Here are the top benefits of customizing the quantity selector in WooCommerce.

Better user experience (UX)

WooCommerce’s default quantity input system works, but it may not be the most intuitive or user-friendly for your store. For example, an online beauty store that sells subscription boxes in packs of 3, 6, or 12, might find that presenting quantity options in a dropdown can make it much easier for customers to select products than typing a number manually.

Faster, smoother checkout process

The easier it is for customers to adjust product quantities, the quicker they get to move through checkout. For example, for items that are typically sold in bulk, presenting a dropdown with preset quantities can speed up product selection and move them toward checkout faster.

Enforce product-specific purchase rules

Some products need strict quantity rules. For instance:

• Stores that cater to wholesale customers may want to set a minimum order quantity to prevent retail purchases.
• If some items are only available in limited stock, you might decide to restrict the maximum quantity per customer to ensure fair distribution.
• Stores that sell inexpensive products might want to modify the default quantity or set minimum order amount rules to prevent low-value purchases.

Increase average order value (AOV)

When implemented strategically, you can customize your store’s quantity selector to subtly encourage customers to buy more per order. Changing the default starting quantity, setting a minimum quantity requirement, or modifying the step increment value to a higher quantity nudges customers to buy more in a single purchase.

Match your store’s branding and design

Changing the layout from the generic number input field with the plus (+) and minus (-) buttons to dropdowns or buttons may better fit your WooCommerce store’s aesthetic.

The best plugin for modifying the WooCommerce quantity selector

Min/Max Quantity for WooCommerce is a simple-to-use plugin that enables you to customize the quantity selector in WooCommerce to either a radio button or select dropdown.

It is a full-featured quantity management plugin, meaning that along with modifying the quantity picker style, you can use it to set minimum and maximum purchase limits, define step intervals, apply advanced quantity rules, and more.

Min/Max Quantity for WooCommerce works smoothly with any WooCommerce theme as well as cart and checkout plugins to ensure quantity rules apply throughout the ordering process. Plus, it’s super easy to use — for example, most customizations take less than 7 minutes to set up from scratch, even for non-technical users.

Let’s explore its top features.

Key features

Change the WooCommerce quantity selector style

Instead of WooCommerce’s standard and basic number input button, you can choose from 2 options to modify the quantity selector style: radio buttons or select dropdowns.

You can also modify the default values in a way that makes sense for your products (e.g., start at 5 instead of 1).

Set minimum and maximum quantity limits

WooCommerce’s default quantity selector lacks the option to modify the minimum and maximum quantity rules. With the Min/Max Quantity for WooCommerce plugin, you can:

• Require customers to buy at least X units of a product.
• Set a maximum purchase limit of X per customer to prevent bulk buyers from wiping out the entire stock.
• Enforce different rules for different products (both simple and variable) and entire product categories.

Define step increment values

Instead of letting customers enter any number into your store’s quantity picker (or leaving it as the default of 1), you can ensure that they buy in higher increments. This has the double benefit of increasing your sales and preventing customers from buying bundled products in odd quantities.

Set granular product quantity rules

You can set up rules about managing product quantity with various levels of targeting: per product (both simple and variable), per product category, and globally i.e. on all products. This makes it easy to tailor your store’s product quantity settings as needed and saves time.

Add a wide range of criteria

Custom rules and conditions enable you to adjust the quantity management settings to work for your specific uses. You can set quantity restrictions based on:

• User role, for instance, to offer different quantity limits for wholesalers, retailers, or VIP customers.
• Shipping zone, for instance, to restrict large-quantity purchases for international shipping while allowing bulk orders for local delivery.
• Stock availability, for instance, to prevent a small group of customers from buying out inventory of high-demand products while leaving other customers empty-handed.
• Time-based rules, e.g. if you want to run limited-time promotions, such as flash sales with special quantity limits.

Showcase quantity rules on the front end

Min/Max Quantity for WooCommerce enables you to showcase product purchasing rules in easy-to-understand tables directly on your store’s product detail and cart pages. This keeps customers aware of the quantity limits and lowers abandoned cart rates.

Customize error messages

Customers whose shopping carts don’t exactly match your store’s quantity rules will be shown a clear, customizable message to guide them on what to do to fix their order.

How to customize the WooCommerce quantity selector

With Min/Max Quantity for WooCommerce, the process of changing the WooCommerce quantity selector style is pretty straightforward. Follow the steps below.

We created a video to guide you through the steps to customize the WooCommerce quantity selector, press play to watch it if you prefer a video walkthrough. If you prefer written instructions, read on.

1. Add and activate Min/Max Quantity for WooCommerce’s free or pro version to your website.
2. In your site’s admin panel, head to Dotstore Plugins → Min/Max Quantity and press the “Add New” button.
   
3. Name the quantity rule (this will only be visible to site admins).
4. Press the “Add Group” button then enlarge the collapsible panel that houses the product quantity rule.
5. Add conditions and define actions for how the quantity rule operates:
   • In the “Conditions” modal, define the products (simple or variable), categories, stock quantity, user roles, and other criteria for the rule.
   • In the “Actions” modal, select your preferred quantity selector style, whether select dropdowns or radio buttons. You can modify additional product quantity settings here, including the minimum, maximum, step increment, and default value.
6. Once everything is set up, click Save Changes at the bottom of the page to apply the product quantity rule.

Customize the WooCommerce quantity selector tool

The benefits of modifying the WooCommerce quantity selector are numerous — a better user experience, a simpler checkout process, and an increase in average order value (AOV), among others.

By default, the quantity selector appears as a simple number input with basic styling that matches your theme. In this in-depth tutorial, I’ve shown you how to modify the quantity picker’s style and function using the powerful Min/Max Quantity for WooCommerce plugin.

Get the free or pro version of Min/Max Quantity for WooCommerce and customize your WooCommerce store’s quantity selector tool in 7 minutes or less!