Product filter in the form of a drop-down list – how and when to use it?

September 17, 2020

A dropdown filter is the main way to structure products in a WooCommerce store. It provides customers with a quick and easy way to navigate your online store and quickly find products they are interested in. But despite this, there are no product dropdown filters on most WooCommerce websites. It’s a shame because this is a fantastic opportunity to let customers filter this way.

Luckily, with the WooCommerce Product Filter by WooBeWoo plugin, there is a way to add dropdown filters to your store.

Keep reading to learn all the pros and cons of displaying filters as a drop-down list and how to implement it in your product filter in the best way.

What a dropdown list is?

The dropdown is one of the standard input fields in the Input Form Design Toolbox.

On the surface, a dropdown seems to be a great way to get information from the user. It can include an unlimited number of options; it is compact; it is a part of the standard user interface for web and mobile versions of websites. Need a way to collect information from users without entering data? A dropdown list will help you. In the case of input fields, it is as universal, as the Swiss army knife. At the same time, there are problems with the usability of the dropdown. Like a real Swiss army knife, it can do a lot, but only a little of that is good. Swiss army knife is great for cutting wood if you don’t have anything else. But if I had a choice, I’d rather have a chainsaw. I would take a Swiss army knife with me on a camping trip, but I would not use it to cut wood in my backyard.

Sometimes a dropdown can be a great solution, but you need to consider all its advantages and disadvantages to understand where it can be used.

What a dropdown list is?

Advantages of dropdown

 Benefits of using a dropdown list:

  • Saving space. Dropdowns are great when you need to present the user choices in a very compact input form. The dropdown list can take up little space but contain a lot of information.
  • Standardization. The dropdown allows you to get all the benefits of using a standard item, including less debugging time, built-in accessibility for people with disabilities, and more predictable behavior.
  • Fewer mistakes. Collecting data through a text field is unpredictable. Users can make typos, errors, or misunderstand what information needs to be entered. By providing pre-filled choices, you can collect more predictable data from users.
  • Flexibility. Not sure how many options there will be? Just use the dropdown and it will change itself as you change the number of options. One of the advantages of using a dropdown is that all the choices are contained within the element. Thus, you can design any number of input options without changing the whole design.

Advantages of dropdown

Disadvantages of dropdown 

While this is a great way to display some of your filter items, as we pointed out earlier, not ideal. So, let’s take a look at some of the disadvantages of using dropdowns:

  • Users sometimes skip dropdowns. When users work with a form, they first visually scan it to find fields to fill out. It’s easy to highlight empty text boxes, radio buttons, and checkboxes because they look empty. In contrast, dropdown lists look “full”, while the data in them has yet to be entered:
  • Available options are hidden by default. Another disadvantage of dropdown lists is that the available options are always hidden from the user. The limited space of the dropdown menu forces the user to interact more with the list of available options to see and understand each one.
  • Dropdown lists slow down the user experience. This is an insignificant but still existing disadvantage of this display since the user needs to open the list every time.

Dropdown Tips 

All the disadvantages of such a display are similar, and in fact, they can be combined into just one “Invisible size with the need to constantly open it.” But at the same time, its size is also an advantage. Therefore, carefully study your need for a dropdown list and apply exactly where it is needed.

Sometimes it is very appropriate to use the dropdown. The most common cases are when space is limited or data entry is not important. Probably the most common example is sorting a list.

  • Use “meaning” names for input fields. Use a name for the dropdown list and a name for the default state. Using a title outside the dropdown helps users remember the field while correcting errors. Using the default word inside the dropdown is useful for customers to make the dropdown have its meaning in the default state.
  • Sort options in a predictable way. It’s tempting to sort the options by frequency, but listing options in an unpredictable order makes users slow down. In most cases, stick to alphabetical order and make exceptions when there are other predictable patterns (such as days of the week).
  • Use short, meaningful names of the list items. The names of the available options are truncated on the mobile phone after about 35 characters, so try to keep them shorter, otherwise, there is a risk that they will be truncated and become unreadable. For example, L; XL, etc.
  • Do not use the dropdown for all filters. Firstly, if you use a dropdown list display for absolutely all filters, this will make your filter small in size and the user will simply have a feeling of incompleteness. Secondly, why should you display the “clothing color” in a dropdown list if you can do it using special beautiful color icons?

Dropdown Tips 

Multi-selection in the drop-down list

The classic dropdown list is great, but it only allows you to select one option from the set. Sometimes this is exactly what is needed, but there are situations when the user needs to be able to select multiple items from the list. Woocommerce Product Filter by WooBeWoo has both single and multiple dropdown choices, as well as many customizable options for them. For example, it is very useful when choosing several shoe sizes or several colors.

How to create a dropdown filter? 

This is a great way to display, for example, WooCommerce product categories in a dropdown list. With the Woocommerce Product Filter by WooBeWoo plugin, there is a way to add dropdown filters to your store. You can apply the dropdown to the following filters:

Customers can filter all products and quickly select a product item from the dropdown list.

If you have a lot of categories and sub-categories, then navigating through them can become awkward, especially if the sidebar is not too long. To remedy this situation, we use the dropdown lists of categories.

Managing the Woocommerce Product Filter plugin is very simple. Using this plugin, you just need to click on the “Show frontend as” option in the filter editor menu and select the way you want to display the product filter, in our example, the dropdown list.

Read this documentation article to learn more about it.

How to create a dropdown filter


The dropdown list, whether single or multiple, is an important way to display WooBeWoo Product Filter items, allowing you to select from several predefined parameter values. As with much in the design of your Product Filter, choosing the best UI element depends entirely on the context in which that element is used. We hope this information will help you choose the correct input method when creating your next product filter.

Leave a Reply

Your email address will not be published. Required fields are marked *

Buy Now Bundle and save over 60%

Buy now