FiboFilters offers seamless integration with the Porto theme owned by P-THEMES.
Table of Contents
If you have an active parent or child theme of Porto, 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?
Breakpoint
The Porto theme sets the mobile breakpoint to 991px. When this breakpoint is reached, the filters will be moved from the sidebar above the products.
Colors
In Porto theme, you can specify a primary color that will be used across your website. This can be done in Theme Options > Skin > Theme Colors > Primary Color:
FiboFilters will use this color for the filters.
For links, it will use the dark color:
Pagination strategy
FiboFilters is compatible with Porto pagination style set in Theme Options > WooCommerce > Product Archives:
If you don’t see this option, click the “Show more options” button at the top of the “Product Archives” settings page:
Products per page
FiboFilters is compatible with the number of products per page set in Theme Options > WooCommerce > Product Archives:
Ways to embed filters in the Porto theme
The most popular ways to embed filter UI elements in the Porto theme are adding them to the sidebar, displaying them above the product listing as horizontal filters or using the WPBakery and Elementor builders.
Sidebar
First, you need to enable the sidebar in Porto options. Go to Theme Options > WooCommerce > Product Archives and select one of the sidebar layouts:
Once the sidebar is enabled, navigate to Appearance > Widgets and add the FiboFilters widget to the “Shop Sidebar(Woo Category Sidebar)” widget area.
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 products
Go to WooCommerce > FiboFilters > General and select “Above the products” in the “Filter location” section. FiboFilters will then place horizontal filters above the products:
WPBakery
FiboFilters is integrated with the Porto WPBakery “Type Builder Archives” widget. To enable the integration, go to the widget settings and turn on the “Integrate with FiboFilters” option in the “Extras” tab:
Note that FiboFilters will use the widget products per page and pagination style and ignore the global settings defined in Theme Options > WooCommerce > Product Archive.
Elementor
FiboFilters is integrated with the Porto Elementor “Type Builder Archives” widget. To enable the integration, go to the widget settings and turn on the “Integrate with FiboFilters” option under “FiboFilters”:
Note that FiboFilters will use the widget products per page and pagination type and ignore the global settings defined in Theme Options > WooCommerce > Product Archive.