GeneratePress theme

FiboFilters offers seamless integration with the GeneratePress theme.

Table of Contents

If you have an active parent or child theme of GeneratePress, you will able to activate the integration in the FiboFilters settings view under the General tab. You should see the following screen:

Integrate FiboFilters with GeneratePress

What does the integration include?

Colors

In the GeneratePress theme, you can define your own color palette. You can do this in Appearance -> Customize -> Colors -> Global Colors. FiboFilters will use the accent color for filter checkboxes, radio buttons, etc.:

GeneratePress color palette

Breakpoints

GeneratePress sets the mobile breakpoint to 768 px. FiboFilters respects this breakpoint. If you place the filters in a sidebar, FiboFilters will move them above the products when the breakpoint is reached.

Ways to embed filters in the GeneratePress theme

The most popular ways to embed filter UI elements in the GeneratePress theme are adding them to the sidebar or displaying them above the product listing as horizontal filters.

First, make sure you have enabled the sidebar in the GeneratePress theme settings. Go to Appearance -> Customize -> Layout -> Sidebars and set Blog Sidebar Layout to either Sidebar / Content (for a left sidebar) or Content / Sidebar (for a right sidebar):

Create a sidebar in GeneratePress

Next, add FiboFilters to the sidebar in Appearance -> Widgets. If you’ve selected Sidebar / Content in the theme settings, add FiboFilters to the Left Sidebar widget area. If you’ve selected Content / Sidebar, choose the Right Sidebar area:

Add FiboFilters widget to GeneratePress sidebar

Finally, go to WooCommerce -> FiboFilters -> General and select Sidebar in the Filter location section.

As a result, FiboFilters will be displayed in the GeneratePress sidebar:

FiboFilters in GeneratePress 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:

FiboFilters above products in GeneratePress