Creating filters and facets

FiboFilters offers multiple UI elements for product filtering. We use a primary filter element called “Categories” and a variety of facets, including “Checkboxes,” “Radio list,” “Number Range,” “Toggle,” and more.

Although we use the terms “filters” and “facets” interchangeably, if you wish to gain a better understanding of the differences between these terms, you can refer to this post.

Adding a new filter/facet

To add a new filter/facet:

  1. Navigate to WooCommerce > FiboFilters -> Filters
  2. Click the “New filter” button
  3. Open the “Data source” dropdown and select the desired source for filtering

Step 1 – Selecting data sources

A data sources dropdown
A data sources dropdown

Filters can be built based on multiple data sources. The primary data sources include categories, prices, product attributes, and others. FiboFilters supports the following product data sources:

  • Product categories
  • Price
  • Stock status (in stock / out of stock)
  • On Sale
  • Product tags
  • Product attributes

The selections made from each available data source are analyzed to determine their nature and determine types of applicable filters.

For example:

  • A Number Range filter for numeric values
  • Checkboxes or Radio lists for string values – the Number Range filter will be automatically hidden
  • A Toggle for boolean data sources

Step 2 – Selecting a filter type

In most cases, after selecting a data source, another dropdown menu called “Facet type” will appear. Depending on the chosen data source, the most relevant filter types will be displayed.

Selecting a filter type
Selecting a filter type

Creating a complete list of filters

In the creator, you need to make all the filters that fit your store and products. Don’t worry if the filters apply to different product categories –  they will only be displayed in the matching, contextually relevant views.

The filters are always cross-matched with the displayed products to ensure relevance. FiboFilters algorithms prevent the presence of filters that do not match any products in your store’s current catalog.

For example, in the “Laptops” category, your customers will see a “CPU manufacturer” filter, but the same filter will not appear in the “Displays” category. This ensures that the filters displayed are specific to the product category. Read more about content-aware filters.

Displaying the filters

You need to specify where the filters should be displayed in your store. You can do this by going to the settings of the WooCommerce plugin -> FiboFilters -> General (tab) -> Filter location. A detailed guide on embedding filters in your WooCommerce store is available here – How to add FiboFilters to your website?