Adding FiboFilters to your website

Before proceeding, make sure you have already added the filters in the filters builder.

There are several ways to display filters in your online store. The most popular method is to embed the filters in the sidebar. You can also place them as horizontal filters located above the product grid. Alternatively, you can use a shortcode, block editor, or other builders like Elementor to insert the filters.

Note:
Some themes have unique solutions for product filtering, which may require custom integration. Check if your theme is listed among the themes we are fully integrated with. In such cases, embedding filters may look slightly different than the standard method.

Table of Contents

  1. Adding filters to the sidebar
  2. Adding filters above the product grid
  3. Adding filters using shortcode
  4. Adding filters in Elementor

Adding filters to the sidebar

Step 1
Navigate to Appearance -> Widgets

Step 2
Add the FiboFilters block to the proper widget area. Find the FiboFilters block and drag it to the desired widget area. The specific widget area where FiboFilters might be presented depends on the theme you’re using. For example, in the Storefront theme, it will be the widget area named “Sidebar”:

Adding filters to the sidebar in the Storefront theme
Adding filters to the sidebar in the Storefront theme

Step 3
Next, go to WooCommerce -> FiboFilters -> General (tab) in your WordPress dashboard.

Step 4
Select “Sidebar” from the Filter location radio list. This ensures that the filters are displayed in the sidebar widget area.

Sidebar option
Selected an option “Sidebar” on a Filter Location radio list

Step 5
If you have successfully added the FiboFilters widget and configured the settings, you will be greeted with a “Well done!” message.

Adding filters above the product grid

After selecting this option, the filters will be displayed above the product grid, and always in a horizontal layout.

Step 1
Navigate to WooCommerce -> FiboFilters -> General (tab) in your WordPress dashboard.

Step 2
Select “Above the products” from the Filter location radio list. This ensures that the filters are displayed above the product loop. We use an action hook woocommerce_before_shop_loop with a priority of 31 for this purpose.

Above the products option
Selected an option “Above the products” on a Filter Location radio list

On the front end, you should now see filters above the production in the horizontal layout.

Filters above the product loop
An example of displaying filters above the product loop

Adding filters using shortcode

You don’t have to embed filters in the sidebar or directly above the products. You can embed your filters anywhere in the store using shortcodes. If you choose this way to embed filters, remember to select a “Custom location” in the Filter location option. Then filters will not be displayed both in the sidebar and above the products grid. Otherwise, the filters may be duplicated i.e. displayed in eg. the sidebar and your custom location pointed by shortcodes.

Custom location
Selected an option “Custom location” on a Filter Location radio list

Shortcode variations:

[fibofilters]Displays filters in a vertical layout, similar to a sidebar
[fibofilters layout="horizontal"]Displays filters in a horizontal layout
[fibofilters layout="mobile"]Displays filters in a horizontal layout only on devices with screen width smaller than 450px. Read more
echo do_shortcode('[fibosearch]');You can also display filters using a plain PHP command

Adding filters in Elementor

We’ve created a dedicated Elementor widget, named “FiboFilters”. You can embed it whenever you like to suit your layout best.

Elementor widget, named “FiboFilters”

You can choose whether the filters should be displayed in a horizontal or vertical version. We recommend selecting the horizontal versions if you want to place the filters above the “Archive Products”. Select the vertical version if you want to add the filters to the sidebar.