WooCommerce dropdown product quantity: Complete guide

Choosing from a dropdown is a much more user-friendly way for eCommerce customers to select a quantity. Discover the easy way to replace the usual quantity field with a WooCommerce quantity dropdown.

There’s no one right way to build an online shop. Every detail of your WooCommerce store should be tailored to meet yours and your customers’ needs.

There are countless features you can change to improve user experience and make your shop’s workflow easier. For example, you can tweak the way quantities are displayed and changed in your shop.

There are plenty of ways to display and allow users to change quantities, but by default WooCommerce displays a basic quantity selector. This allows users to manually input the amount they want, or use an up/down arrow to increase or decrease the quantity.

However, another great option is using a quantity dropdown menu. Rather than simply having users input their preferred amount, you can have them choose from a predefined list of options like this:

Not all shops need a WooCommerce quantity dropdown plugin, but when it applies, it can make things far simpler for you and your customers.

This article is going to help you figure out whether or not quantity dropdowns are right for your site. I'll also teach you how to do so using the Product Options plugin to replace the quantity selector with a product quantity dropdown for WooCommerce.

Why use quantity dropdown menus?

As I already mentioned, quantity dropdown menus work best for certain types of shops and products.

There are many benefits to being able to include quantity dropdowns on your website, including:

Set up text-based quantity options

A major benefit of having a WooCommerce quantity dropdown is that you can add extra text to appear alongside each quantity option value, like this:

This descriptive text can:

• Guide customers in choosing the amount that’s best for them.
• Allows you to contextualize/target the sale.
• Pair the quantity with a tier or phrase to improve the sales experience.

For example, the above screenshot shows a shop selling first aid supplies. Each quantity option is targeted to a different user group. This is clear from the text which appears next to each quantity option:

• "Home first aid - 2 packs of bandages"
• "Office first aid - 6 packs of bandages"
• "Classroom first aid - 15 packs of bandages"

As you can see, adding extra text to the quantity dropdown is far clearer than just allowing customers to choose a pack of 2, 6 or 15.

Increase average order value

Quantity dropdown menus can help you sell more of each item in your WooCommerce store. Customers inputting their own quantity don’t have any specific encouragement to order more, whereas quantity dropdowns subtly encourage them to add more items to your cart.

This isn’t likely to make a difference for every item. However, it's worth trying for impulse items or items customers are likely to use a lot of. It prompts them to make a conscious decision of what quantity to order, which can lead to higher values on the cart page. They then checkout spending more than they otherwise would have done.

Set order minimum and maximum amounts

Another benefit of a WooCommerce quantity dropdown is that you can choose what numbers to include in the dropdown. This is open-ended with the default WooCommerce quantity input, where customers can enter literally any quantity (unless you use a min/max quantity plugin like WooCommerce Quantity Manager to set minimum and maximums).

In contrast, a quantity dropdown gives you much more flexibility. Simply add a number to the dropdown for each quantity that you will accept. This is a natural way to set the lowest and highest possible order amounts, such as a maximum order quantity.

Controlling quantities in this way can help ensure you sell enough to exceed shipping costs and keep each sale profitable. It can also prevent you from getting massive orders all at once, creating inventory problems.

Create step values for orders

Menu quantity dropdowns also allow you to set quantity step values. For example, you can sell products only in multiples of 10. To do this, simply add the quantities to the dropdown as 5, 10, 15, 20, and so on (in whatever multiples you require).

This is perfect for wholesale shops and those selling high-volume products such as specialty craft supplies. It can also allow you to ship products by the case, which can cut down significantly on order fulfillment time.

Reduce mistakes

Leaving customers to manually enter a quantity leaves open the door for major user errors. For example, imagine that someone intends to buy 4 of something but accidentally orders 44 😱!

These kinds of errors take time and money to fix, and can annoy customers. WooCommerce quantity dropdown menus improve the user experience and reduce errors, by providing a more logical way to select a quantity.

What kind of stores should use WooCommerce quantity dropdown menus?

There are several kinds of shops where quantity dropdown menus make good sense. These include:

Wholesale shops

If you have a WooCommerce wholesale store then you probably need to sell in specific or bulk quantities. Quantity dropdowns are a good way to achieve this without needing a bulk pricing plugin.

The WooCommerce Product Options plugin which I'll tell you about in a minute lets you create quantity dropdowns for specific user roles only. For example, you might want to use the normal quantity selector for retail customers and a wholesale-specific quantity dropdown for B2B users. Alternatively, you might want to show different quantity dropdowns - each showing different quantity options - to retail and wholesale buyers.

Supply shops selling items often purchased in bulk

Of course, bulk buying isn't only about wholesale. All sorts of stores sell items in larger quantities, or specific quantity groupings.

For example, WooCommerce quantity dropdowns are useful for homegoods stores that sell products like paper towels or toilet paper. Online grocery or convenience stores often sell items in certain pre-fixed quantities. It's also a great way to sell stationery supplies like paper, sticky notes and pens.

Specialty stores

Specialist or niche products often have specific cart quantity needs. For example, this might apply to stationery shops selling custom-made thank-you cards that are sold in certain pack sizes or with a minimum order quantity. Similarly, it's a good option for gemstone or trinket grab-bag shops where you buy by the scoop.

Ultimately, whether or not to use a WooCommerce quantity dropdown plugin comes down to the specific type of products you sell. Think about whether it's a good option for your online shop.

You may also like: How to add quantity buttons with up/down arrows to WooCommerce.

How do you add a quantity dropdown menu to your WooCommerce site?

It's important to understand that WooCommerce itself doesn't come with quantity dropdowns. To get around this, there are several ways to replace the standard quantity input field with a flexible dropdown list of available quantities:

• Using a WooCommerce quantity dropdown plugin (easier, beginner friendly).
• Editing your child theme (hard, needs coding know-how).

I'll take you through both methods next.

Using WooCommerce Product Options to add quantity dropdowns

One of the wonderful things about using WordPress is that there’s a vast ecosystem of plugins out there to help you achieve your goals. The WooCommerce Product Options plugin is an excellent tool for adding text-based quantity menus to products.

In this step-by-step tutorial, we'll use WooCommerce Product Options to replace the usual quantity field with a completely new type of product option where the available quantities are listed in a dropdown. As a recap, this is what the end result will look like:

You'll be able to:

You get a huge amount for your money with this plugin, as you can also create a wide range of other types of product option such as checkboxes, text fields, and more. Either display these to other customers, or use conditional logic to choose who sees the extra options.

You can even use it to increase your average order value by displaying other products from your store as optional extras above the add to cart button. This is more effective than the way that WooCommerce usually displays related products as it forces customers to make an active decision on whether they want these additional products.

Let’s take a look at how to build a quantity dropdown using WooCommerce Product Options.

Step-by-step instructions - Create text-based quantity dropdowns

1. First, you need to disable the default quantity input for the products where you're adding a dropdown. To do this, go to the 'Edit' page for each product, open the 'Inventory' tab in the 'Product Data' section, and tick the "Sold individually" box.
   

   

2. Next, download and install WooCommerce Product Options.
3. Find 'Products' in the left-hand navigation menu, hover over it, and select 'Product Options'.
4. Click 'Add Group' to create a group for your quantity dropdown menu option.
5. Now choose which product(s) and categories the quantity dropdown will be added to, or display it globally if you prefer. This will define which products in your store get the dropdown menu.
6. Set a title for the options group - this can be visible on your site or stay hidden. For this use case, you should probably hide the group name from your site.
7. In 'Options', select 'Dropdown select' and then scroll down to the 'Choices' section. Here you can add the options that will appear in your dropdown menu. For example:
   • "5 cloth diapers - 3-4 loads of laundry/week - $30"
   • "10 cloth diapers - 2-3 loads of laundry/week - $50"
   • "15 cloth diapers - 1-2 loads of laundry/week - $60"

You should set the price for each quantity in the dropdown like this:

• For quantities of "1", leave it set to "No cost". That's because when creating the product, you already entered a base cost to be used for single quantities. Selecting a quantity of 1 therefore shouldn't change the price.
• For quantities of 2 or more, select "Flat fee" and enter the cost of 2 items minus the product base price. In my example, the base price of the product is $15 so for a quantity of 2, I needed to enter "$15" (i.e. $30 - the cost for 2 items - minus $15).

If you like, enter a description which will appear underneath the WooCommerce quantity dropdown.

Now check the single product page 👀

Click 'Save' and check the front end of your site to make sure it’s working as intended. The single product page should look something like this screenshot. The plugin will display quantity dropdown options above the add to cart button:

If you want to display the quantity dropdown lists on the main Shop page too, then there's a way to do that. You need to use the WooCommerce Product Options plugin with its sister plugin, WooCommerce Express Shop Page. This displays the quantity dropdowns on your main shop pages so that customers can choose quantities without accessing the single product page.

Doing it with code

If you have coding experience and want a plugin-free option, then you can write custom code to create your own quantity dropdowns. For example Ace Plugins, have published a useful tutorial about this for developers complete with code snippets.

However, it’s important to remember that this is only a suitable option for those with coding experience.

• You'll need knowledge of technologies like HTML, CSS, JavaScript, and which PHP file to edit in your template.
• Messing around in a child theme without the right know-how can put you in a bad spot.
• May break other parts of your site and be unable to solve the issue.
• Only go this route if you know what you’re doing.

The all-round easiest solution is to use the WooCommerce Product Options plugin, as it saves you the time and hassle.

Add WooCommerce quantity dropdowns with the Product Options plugin

Adding features like quantity dropdown menus can improve your eCommerce site for you and your customers. However, it’s not just about adding a neat feature to your site. You have to think critically about what your customers need, how they use your products, and the best way to allow them to select quantities.

For products where a WooCommerce quantity dropdown makes sense, the Product Options WooCommerce plugin is an ideal way to do it. It replaces the basic quantity selector with a completely new type of quantity option. You can set the price for each quantity in the dropdown, add text, and even add other types of product option too. It's the perfect way to tailor the customer experience and, ultimately, make customers more likely to buy your products 😄