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

Product Table Filters

WooCommerce Product Table FiltersWooCommerce 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 both types of filter in action on our Product Table Filters Demo.

Note: This page covers the options for letting customers filter the table to refine the list of products. If you want to create tables listing specific products based on category/tags/status etc. (i.e. perform a filter before the table first loads), check out this article.

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.

WooCommerce table plugin product filters

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 the 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.

WooCommerce table product filter widgets

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).

Can I perform a filter when the table first loads?

There are 2 ways to do this:

  1. If you want to create a product table that contains products with a specific category/tag/attribute/custom field or taxonomy/etc. only, please see our article on choosing which products appear in the table.
  2. You can also create product tables with a specific filter by including the filter value in the URL. For example, the URL http://producttable.barn2.co.uk/product-table-filters/?filter_color=black will load a page of our demo site that is pre-filtered for products with the ‘black’ attribute. Similarly, http://producttable.barn2.co.uk/product-table-filters/?min_price=100&max_price=200&filtering=1 will filter for products between $100-$200. You can get the URL’s by creating a product table with the filter widgets (instructions above), selecting the required filter, and copying the URL.

Can I use any Ajax filter plugins?

WooCommerce Product Table only works with the built-in WooCommerce filter widgets, which reload the page and do not use Ajax. We may integrate with other filter plugins in future if there is enough demand, so send us a feature request if you’d like this.

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.

Can I add category or tag filter widgets?

WooCommerce also comes with widgets for ‘WooCommerce Product Categories’ and ‘WooCommerce Product Tags’. These aren’t filters because instead of refining the existing list of products, clicking on them takes you to the relevant category or tag archive page.

If you’re using WooCommerce Product Table on a standard WordPress page, then you can’t use these widgets. If you’ve added product tables to your main shop page or archive template, then you can use these widgets. Clicking on a category or tag in the widget will take you to the relevant category or tag archive page, which will contain a product table.

Was this article helpful?

Related Articles