Product filters for Divi (WooCommerce)

With FiboFilters you can add product filters to a Divi WooCommerce shop in the sidebar or above the products. You can also place them next to a Divi Woo Products module on a page you built. The Divi integration works with Divi 4 and Divi 5 and is included in every FiboFilters plan. The Woo Products module on Divi 5 needs FiboFilters 1.13.0 or newer.

Before you start

Turn on the Divi integration

The FiboFilters setup wizard turns the integration on. If you skipped the wizard, the integration is off, so check it first.

  1. Go to WooCommerce > FiboFilters > General.
  2. Turn on “Enable integration”. You see this option only when Divi or a Divi child theme is active.
"Enable integration" in the FiboFilters general settings, shown when Divi is active.
“Enable integration” in the FiboFilters general settings, shown when Divi is active.

The integration takes the filter color from Divi’s “Color Schemes” setting, sets the main breakpoint to 980 px and uses Divi’s number of products for shop and category pages.

Add filters to the sidebar

  1. Go to Divi > Theme Options > General and set “Shop Page & Category Page Layout for WooCommerce” to “Right Sidebar” or “Left Sidebar”.
  2. Go to Appearance > Widgets and add FiboFilters to the “Sidebar” widget area.
  3. Go to WooCommerce > FiboFilters > General. In the “Filters location” section, select “Sidebar”.

On screens 980 px wide or less, the sidebar filters move above the products as horizontal filters. On phones (450 px or less by default), shoppers get the mobile filters.

Add filters above the products

  1. Go to WooCommerce > FiboFilters > General.
  2. In the “Filters location” section, select “Above the products”.

FiboFilters shows horizontal filters above the product list, and no widget is needed. On phones (450 px or less by default), it shows the mobile filters instead.

Add filters to a page with the Woo Products module

Use this when you show products with the Divi Woo Products module on a page you built, for example a landing page.

  1. Open the page in the Divi builder.
  2. In the settings of the Woo Products module, turn on “Integrate with FiboFilters”. It’s at the end of the “Content” section. The option appears only after you turn on “Enable integration”.
  3. In the “Elements” section of the module, turn on “Show Pagination”, so filters work on the whole listing.
  4. Add a Text module above the Woo Products module with these shortcodes: [fibofilters layout="horizontal"], [fibofilters layout="mobile"] and [fibofilters_applied_filters].
  5. Add a Text module below it with [fibofilters_show_more_products_btn]. Without this button, shoppers can’t reach the next products, because FiboFilters hides the module’s pagination.
"Integrate with FiboFilters" in the Woo Products module on Divi 5.
“Integrate with FiboFilters” in the Woo Products module on Divi 5.
"Integrate with FiboFilters" in the Woo Products module on Divi 4.
the same option on Divi 4.

These steps work with the “Above the products” location. With “Sidebar”, the horizontal filters show only on screens from 451 to 980 px, unless you add all_screens="1" to the shortcode.

With the “Above the products” location, you don’t need the shortcodes on the shop page built with this module or in a Theme Builder template for the shop and categories. FiboFilters adds the filters and the “Show more products” button itself. On the shop page, keep “Show Pagination” turned on, because without it no filters appear.

If you select “Custom location” instead, FiboFilters stops placing the filters, the applied filters and the “Show more products” button automatically in your whole store, including shop and category pages. Shoppers can’t reach the next products until you add those elements with shortcodes (see the list). A FiboFilters widget in the sidebar stays. With this location, [fibofilters layout="horizontal"] shows on every screen, so skip layout="mobile".

What you’ll see

FiboFilters in the Divi sidebar, with "Sidebar" selected in "Filters location".
FiboFilters in the Divi sidebar, with “Sidebar” selected in “Filters location”.
Horizontal filters with "Above the products" selected in "Filters location".
horizontal filters with “Above the products” selected in “Filters location”.
Filters above a Woo Products module with "Integrate with FiboFilters" turned on.
filters above a Woo Products module with “Integrate with FiboFilters” turned on.

Limits and notes

One Woo Products module per page: in FiboFilters 1.13.1, if a page has a Woo Products module with “Integrate with FiboFilters” turned on, a Woo Products module placed after it shows the products of the first one, with or without this option. Keep one Woo Products module on such a page.

  • Woo Products without pagination: the module shows only the number of products set in it, and filters may find fewer products than match.
  • Products per page: shop and category pages use Divi > Theme Options > General > “Number of Products displayed on WooCommerce archive pages”. A page with an integrated Woo Products module uses the number set in the module, so fill in this field. If you leave it empty, the page shows 12 products, but on Divi 5 without pagination it shows the number of posts set in Settings > Reading.
  • Color: FiboFilters reads only the “Color Schemes” setting in Appearance > Customize: Pink, Green, Red or Orange. Any other setting gives the default blue, and Divi Global Colors and custom accent colors are not used.
  • Settings Divi takes over: while the integration is on, Divi sets the base color and the main breakpoint, so you can’t change them in FiboFilters settings. Both settings show a lock and the note “This option is overwritten by the Divi theme integration.”
  • CSS: the integration also adds a few small CSS fixes for Divi.
  • If no filters show on a page with the Woo Products module, check that “Enable integration” is on and that “Integrate with FiboFilters” is turned on in the module. If filters show but products do not change, see Filtering does not affect products.

For developers

  • fibofilters/config/products_per_page: changes the number of products per page. The Divi integration sets it through this filter.
  • --fibofilters--colors--base: the CSS variable with the main color. The Divi integration sets it on body.
  • fibofilters-divi-products: the CSS class FiboFilters adds to a Woo Products module with the integration turned on.
  • ?nofibofilters=1: add it to a page address to see the page without FiboFilters, which helps when you compare product lists.

Last tested

Last tested and confirmed working with WooCommerce 11.2.1, FiboFilters 1.13.1 and Divi 4.27.9 and 5.18.1 on November 2, 2026.