1. Home
  2. /
  3. Blog
  4. /
  5. WooCommerce Basics
  6. /
  7. Woocommerce Widgets and filters

Woocommerce Widgets and filters

In this video I’ll be using Woocommerce Widgets and filters to enable my customers to drill down and find the exact products they’re looking for on my site.

This is the transcript of the video above…


If you examine several online shops you’ll see a certain feature pop up time after time.

It’s the ability to drill down or refine your search results.

For instance, imagine that I’m visiting my favorite online shop and I’m on the page selling shirts. Now let’s assume I want to buy a small, black shirt and that I’ve only got 7.99 to spend.

Searching through all of the shirts to find small black shirts that cost 7.99 or less can be difficult.

Lucky, the owner of this online shop has put some WooCommerce widgets in the sidebar. And these widgets can help me find what I’m looking for.

The widgets are…

  • the Layered Nav widget
  • the Price filter widget
  • and the Average Rating filter widget

WooCommerce Widgets and filters of color and size

Let’s have a look and see how WooCommerce Widgets and filters work

The Layered Nav filter hides all products that do NOT have a certain Attribute applied to them. For instance, a black shirt would have an attribute of black. So I can filter to only see shirts that are available in black.

Now I want to refine my search even further. I only want to see small black shirts. So I filter by size choosing the small option.

To refine my search to a specific price range, I can drag the price slider to only see products in that price range.

Using the Average Rating filter I can filter the products displayed to only show products with a star rating of 2, 3, 4 or 5 stars.

Filtering by color or size, requires that the color or size attribute is already applied to the product.

You apply color and size attributes as you build or make your products. I showed you how to do that in a previous video.

You can apply as many WooCommerce Widgets and filters as you need to any specific product page in your shop.

Attributes in Woocommerce Widgets and filters

For instance a page listing shirts could have filters of…

  • Color
  • Size
  • Long Sleeve
  • Short Sleeve
  • with or without a hood etc.

WooCommerce widgets in the sidebar

Each industry or product type has it’s own set of attributes and Wooommerce Widgets and filters

For instance a bicycle shop would use attributes such as wheel size and hydraulic breaks or cable breaks. Whereas a food shop might have attributes of free range, organic and low fat.

Find the leading online shops in your industry. Then look at the filters they provide and see if you can do something similar using WooCommerce Widgets and filters on your site.

The important point is to use the filters to make your site user friendly. Help your customers find the products they need, as quickly and as easily as they can.

Let’s have a quick recap of using WooCommerce Widgets and filters

  1. Apply Attributes to your products.
  2. Put several Layered Nav widgets in your sidebar.
  3. Configure the Layered Nav widgets to filter for individual Attributes such as colour or size.
  4. Drag the Price Filter and Average Rating filter widgets in to the sidebar so your customers can view only products with a 3 or 4 star rating and select the price range they can afford.

That’s all for now, I hope you can pop back soon and join me in the next video.

Go to next WooCommerce tutorial →