Making the Quantity Field a Dropdown in WooCommerce

There are different reason why you may want to make the quantity field a dropdown. Maybe you only sell products in fixed packages, or you want to increase the average order value by increasing the quantity being purchased.

Whatever your own reasons are, in this post I’ll show you how you can change the quantity field into a dropdown without the use of a plugin. To accomplish making the quantity field a dropdown you will have to make a template change, so using a child theme is required (unless you fully control the parent theme)

Making the Quantity Field a Dropdown

First thing we’re going to do is add additional arguments so we can use this in the quantity field template later on. These arguments will determine the minimum, maximum and steps taken by the dropdown.

In the above code snippet the dropdown will be setup to start at 1 quantity, and move up to a maximum of 100 in steps of 5. You can of course change these values according to your needs. 

For the basic example I’ve chosen to set a fixed maximum value. It is also possible to set the maximum to the product stock, but I wouldn’t recommend this if your stock count is high, and the chance of a customer purchasing such quantity low.

$args['max_value'] = $product->managing_stock() ? $product->get_stock_quantity() : 100;

The Dropdown Quantity Field Template

Now its time to override one of WooCommerce’s default templates. You can create (or replace if existing) the wp-content/themes/{your-theme}/woocommerce/global/quantity-input.php file. The following code can be used inside that template.

This is what actually changes the quantity field into a dropdown, but only if the correct arguments (the ones we’ve set before) are available. If its a product that is sold individually it won’t show any quantity input, or it will use the number field as a fallback.

The result will look something like this;

Dropdown Quantity Field With Custom Steps

The prior setup is focussed on creating a dropdown quantity field with fixed steps. But what if you want to have your own custom steps instead?

For that you can use the following code. These two replace the prior quantity-input template and arguments function accordingly.

In this file you can see (and change) the values that will be used in the dropdown. Add/remove as many as you’d like. 

Template file;

Which will result in;

Showing the Dropdown Quantity Input on Shop Pages

Previously I wrote about Adding a quantity field to the Shop Pages, happy to report that these will automatically change to the dropdown when possible!