FiboFilters offers seamless integration with the Uncode theme owned by Undsgn.
Table of Contents
- What does the integration include?
- Ways to embed filters in the Uncode theme
- Above the product listing
If you have an active parent or child theme of Uncode, you will be able to activate the integration in the FiboFilters settings under the “General” tab. You should see the following screen:
What does the integration include?
Breakpoints
The Uncode theme sets the mobile breakpoint to 959 px. When the breakpoint is reached, FiboFilters will use the horizontal layout for the filters.
Colors
In Uncode theme, you can specify the accent color that will be used across your website. This can be done in Uncode > Theme Options > Visual > Customize > General > Accent Color:
FiboFilters will use this color for the filters.
Number of products per page
FiboFilters is compatible with “Number Of Products” per page specified in Uncode > Theme Options > Archives > Products > Content:
Ways to embed filters in the Uncode theme
The most popular ways to embed filter UI elements in the Uncode theme are adding them to the sidebar or displaying them above the product listing as horizontal filters.
Sidebar
First, you need to enable the sidebar in Uncode options. Go to Uncode > Theme Options > Archives > Products > Sidebar and set “Activate Sidebar” to “On”. Select the widget area that will hold the sidebar content (“Sidebar” in our example) and the position of the sidebar:
After that, navigate to Appearance > Widgets and add FiboFilters to the widget area selected in the previous step (“Sidebar” in our example):
Finally, go to WooCommerce > FiboFilters > General and select “Sidebar” in the “Filter location” section.
As a result, you should see FiboFilters in the sidebar:
Above the product listing
Go to WooCommerce > FiboFilters > General and select “Above the products” in the “Filter location” section. FiboFilters will then place horizontal filters above the products:
