Add a WooCommerce product category dropdown filter: 2 easy ways

Add a WooCommerce product category dropdown filter: 2 easy ways

WooCommerce category dropdown filter plugin

Categories are essential to helping customers to find the products they're interested in. Discover 2 easy ways to add a WooCommerce category dropdown or categories widget to your store.

If you have more than a few products, then you probably need to structure them into categories. Categories provide a quick and easy route for customers to navigate your shop and quickly find products they're interested in.

But despite this, there's no built-in WooCommerce product categories widget or filter. Instead, you need to install a plugin.

In this article, I'll tell you about two easy ways  to add WooCommerce category filters to your store:

  • WooCommerce Product Filters adds category filter dropdowns either to the top of your shop pages, or as a filter categories widget. Or to make your filters more interactive, consider replacing the dropdown with something more visual like clickable category images!
  • WooCommerce Product Table transforms your store layout as well as adding a category dropdown filter above the quick product order form.

Problems with the default WooCommerce categories widget

Before we start looking at plugins, I should mention that WooCommerce itself does have a product categories widget. It looks like this:

WooCommerce product category widget

This categories widget is just a list of product categories and subcategories. There are a few reasons why it's not ideal for your store:

  • It's not a category filter - The list of categories simply links to the different category pages. It's not actually a way to filter by category.
  • Looks unprofessional - As you can see in the screenshot above, it doesn't look great and includes the "Uncategorized" category. This doesn't look great.
  • Lists all categories, including irrelevant ones - The WooCommerce categories widget lists all categories, not just the ones relating to products on the current page.
  • The list can get very long - If you have lots of categories then they'll all be listed in the widget, which again looks unprofessional. It's better to list them in a WooCommerce category dropdown which take up less space.

Of course, WooCommerce also comes with some filter widgets. However, they only let you filter by attribute, price, or average rating - but not category. WooCommerce doesn't have a category dropdown widget.

But that's fine, as there are plenty of easy ways to add one. Next, I'll tell you about 2 plugins which provide much better ways to add a category dropdown or widget to WooCommerce.

Solution 1: Create filter widgets with WooCommerce product category dropdowns

Our first solution is far more than just a WooCommerce category dropdown plugin - it's a fully featured filtering plugin.

WooCommerce Product Filters lets you add a wide range of flexible and user-friendly filters to your store. And you guessed it - this includes a WooCommerce product categories widget. Also a category dropdown. And category checkbox filters. And category image fields. You get the picture 😅

You can use the WooCommerce Product Filters plugin to:

  • Add WooCommerce category dropdown widgets to the left or right sidebar.
  • Display all of these options above your shop instead of in the sidebar.
  • Allow customers to filter by category, tag, attribute, and even custom taxonomies - all at once.
  • Choose whether to list categories as drop downs, checkboxes, radio buttons, clickable images, and more.

Here's a screenshot of the different types of category dropdown and widget that you get with this plugin:

Creating dependent category/subcategory dropdowns

You can also use the plugin to create WooCommerce step filter dropdowns. With these, the customer selects a parent category and then an additional category dropdown appears listing the child categories. When they select these, the grandchild categories appear. And so it continues, for as deep as your category structure goes:

WooCommerce stepped filter dropdowns

As you can see, WooCommerce Product Filters is an incredibly versatile way to add category dropdowns and widgets to your store. Next, I'll tell you how to set it up.

Instructions: How to add category dropdowns and filters to WooCommerce

  1. Install the WooCommerce Product Filters plugin.
  2. Go to Products → Product Filters → Add New.
  3. This opens the 'Add filter group' screen. Use this to add as many filters as you like.
  4. Enter all the information for the filter. Remember to select 'Categories' and a style of filter, e.g. dropdown.
    WooCommerce product filter styles types
  5. Once you have saved the filter group, it's time to add it to the page. This depends on where you want it to appear in your shop:
    • Display a categories dropdown above the shop - Go to Products → Product Filters → Settings and select your filter group in the 'Shop filters' setting.
    • Add a WooCommerce categories widget to the sidebar - Go to Appearance → Widgets and add a 'Product Filters' widget.

Solution 2: Create product tables with WooCommerce category dropdown filters

WooCommerce Product Table Filters

The first solution involves using the WooCommerce Product Filters WordPress plugin to add category dropdowns or widgets to your store. However, it doesn't actually change your shop layout, and products are still listed in the default grid layout. That's where the WooCommerce Product Table plugin comes in.

WooCommerce Product Table adds category dropdowns while also transforming your store's layout. It does this by creating a list view of your products.

Listing products in a table instantly makes your store easier to navigate. The table comes complete with instant AJAX search box and various filtering options including - you guessed it! - category dropdown lists. It's the perfect way to display WooCommerce categories and products in a dropdown list.

Customers can view all products in the table and quickly select a category or sub-category from the dropdown. This instantly filters the list of products by category.

Here are all the different types of product category filter that come with WooCommerce Product Table:

Category filter dropdown above the table

WooCommerce category dropdown filter plugin

This is the most obviously way to add a drop down category option in WooCommerce. The list of categories is hierarchical, perfectly reflecting the structure of your store. The sub-categories (and sub-sub-categories, etc.) are automatically nested/indented to show the category relationships.

Shoppers simply open the categories dropdown and select a category. The list of products updates instantly to display products from that category.

To clear the category selection, the shopper simply clicks the reset link to view all products.

Filter by clicking on a category in the table

WooCommerce table search on click true

You can choose which columns of data to include in your product tables. If you choose to include a 'categories' column, then this will list each product's categories within the table. Customers can click on these to instantly filter by a specific category. Or if you prefer, you can disable 'search on click' so that clicking on a category will load the category archive page.

Add to any page or to your main shop page

You can create as many tables as you like using the table builder, and then insert it using a block or shortcode. These tables can either list all your products, or specific products only. Alternatively, you can select specific shop templates (e.g. the main shop page or category pages) which will display the product table, replacing your default store layout.

Either way, the tables will be complete with a product category dropdown.

Instructions: How to add product tables with WooCommerce category dropdowns to your store

  1. Install the WooCommerce Product Table plugin.
  2. Go to Products → Product Tables → Add New.
  3. This opens the table builder. Use this to set up the table.
  4. On the first page, choose the option to show the product table on your main shop pages.
    Create page of table builder
  5. On the 'Search & Sort' page, add filters including a categories dropdown.
    WooCommerce Product Table builder filter dropdowns

Now when you visit your shop pages, you'll see a WooCommerce category dropdown above the list of products.

However, it doesn't come with a WooCommerce product categories widget

While WooCommerce Product Table provides several types of category dropdowns and filters, it doesn't include a categories widget. It does work with the built-in WooCommerce widgets - but like I said before, there's no category dropdown widget.

If you want this for the sidebar, then you should use WooCommerce Product Table with the WooCommerce Product Filters plugin that I described above.

WooCommerce Product Table Filters Category Shop Page
Use WooCommerce Product Filters and Product Table together for best results

Get your category dropdown filters set up today

It's a shame that the basic product categories widget that comes with WooCommerce isn't a filter - it's just a list of links. However, you can easily fix this by installing either or both of these high quality plugins:

  • WooCommerce Product Filters adds category filter dropdowns either to the top of your shop pages, or as a filter categories widget. Or to make your filters more interactive, consider replacing the dropdown with something more visual like clickable category images!
  • WooCommerce Product Table transforms your store layout as well as adding a category dropdown filter above the quick product order form.

Whichever plugin(s) you use, this is a fantastic way to let customers find products by category.

Please share your thoughts...

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