1. Home
  2. Knowledge Base
  3. WooCommerce Product Table
  4. Product Table Shortcode Options
  5. Product Filters

Product Filters

WooCommerce Product Table comes with 2 types of filter:

  1. Filter dropdowns, which appear above the table.
  2. Filter widgets, which you can add to any widgetized sidebar.

You can see examples of both types of filter on our Product Table Filters Demo. We’ve also provided an overview and instructions in this video:

Filter dropdowns

The filters option displays dropdown lists above your product table which let you filter (i.e. search) the table by product category, tag, custom taxonomies, attributes or variations.

To show filters based on the contents of the table, add filters="true" to the shortcode. This will show any filterable column or variations displayed (if variations=true) as filters above your table.

For example: [product_table columns="name,categories,tags,att:color,price,add-to-cart" filters="true"] would show categories, tags and the “color” attribute as search filters.

To specify which filters appear (regardless of the columns displayed), you can list the filters to be included, e.g. filters="att:color,att:size,categories". You need to use the attribute slug here – you can find this in the Products > Attributes section in the WordPress admin. Similarly, if you’re displaying a custom taxonomy as an attribute then you need to use the taxonomy slug. (See usage examples below.)

You can also use the keyword attributes in the filters option, e.g. filters="tags,attributes". This will display all available product attributes so you don’t have to list them individually.

The filters are displayed above the table by default, but if you have positioned your search box below the table (display_search_box="bottom") then the filters will appear below the table as well. You can also set them to display above and below the table using: display_search_box="both".

Examples:

  • All filters – [product_table columns="name,categories,tags,price" filters="true"]
  • Filters for ‘color’ attribute, ‘size’ attribute and tags – [product_table columns="name,price,add-to-cart" filters="att:color,att:size,tags"]
  • Filters for categories and all attributes – [product_table columns="name,price,add-to-cart" filters="categories,attributes"]
  • Tag filter only [product_table columns="name,categories,tags,price" filters="tax:area"]
  • Category filter only – [product_table filters="categories"]
  • Tag filter only – [product_table filters="categories"]
  • Custom taxonomy filter, where the taxonomy slug is ‘area’ – [product_table filters="tax:area"]
  • Attribute filter, where the attribute slug is ‘color’ – [product_table filters="att:color"]

Can I list categories and sub-categories as separate filter dropdowns?

Currently, WooCommerce Product Table treats parent categories and sub-categories equally. If you add a ‘categories’ filter dropdown above the product table then all your categories will be listed together.

We are interested to know how much demand there would be for an option to display category filters in a hierarchical list, with categories and sub-categories grouped separately. Please let us know if you would be interested in this feature, and we will contact you if we add it in future.


WooCommerce filter widgets

WooCommerce Product Table comes with its own version of all the built-in filter widgets that come with WooCommerce. These are:

  • WooCommerce Average Rating Filter – Refine the product table to show products based on star rating.
  • WooCommerce Layered Navigation Widget – Filter the products in the table by selecting one or more attributes.
  • WooCommerce Layered Nav Filters – Displays the active filters so customers can see which filters are already in place. Includes an option to revert the table to the original list of products.
  • WooCommerce Price Filter Widget – Adds a price range slider. Customers can drag it to set a budget and view products within their price range.

How to use filter widgets on pages

You can add the Product Table filter widgets to any widgetized area on your website, such as a left or right sidebar. They will only work on normal pages or posts that contain product tables.

  1. WooCommerce Product Filter WidgetsAdd a product table to any page on your website. Make sure the page has a widgetized area such as a right or left sidebar. (Most WordPress themes come with a page layout that includes a sidebar. Ask your theme developer if you’re not sure.)
  2. Go to Appearance > Widgets.
  3. On the list of available widgets on the left, look for the ones that start with ‘Product Table’. Drag one or more widgets to your sidebar area on the right.
  4. Choose the options to configure the product filter widget(s) as needed.
  5. Click ‘Save’ for each widget.

How to use filter widgets on category archives

WooCommerce filtersThe Product Table filter widgets do not work with product tables that you have programmatically added to the category archive template or shop template. This is because they only work on pages.

Instead, you need to use the built-in WooCommerce filter widgets, which are designed to work on category archives.

You can find these in Appearance > Widgets. They start with ‘WooCommerce’ instead of ‘Product Table’ (see screenshot).

Troubleshooting tip – “My attributes aren’t showing in the filter widget”

If you can’t select your attributes from the dropdown on the Layered Nav widget, then this is because you have added them to individual products instead of creating them as global attributes. You need to add them as global attributes via /Products/Attributes. If you create attributes directly on the single product page then they won’t be available in the widget.

Was this article helpful?

Related Articles