FiboFilters integrates seamlessly with Bricks Builder, enabling you to create dynamic, user-friendly filters for your WooCommerce store directly within Bricks layouts. This guide will walk you through the steps to integrate and use FiboFilters with Bricks Builder, ensuring your store benefits from the best of both tools.
Bricks Builder offers three modes to display products in your WooCommerce store, each supporting FiboFilters. This guide explains these modes and setting up filters for them:
- Default Mode (No Template) – Uses the default WooCommerce product archive layout from the active theme.
- “WooCommerce – Product Archive Template with “Products” Element – A template with the “Products” element for moderate customization.
- Custom Loop Template “Product Archive (Custom Loop)” – A custom template with a tailored product loop for full control.
The following sections will guide you through setting up filters for each of these modes.
Default Mode (No Template)
In Default Mode, without templates in Bricks > Templates, products use the theme’s archive-product.php layout. FiboFilters works automatically here, as with other themes. See detailed instructions: Creating Filters and Facets.
“WooCommerce – Product Archive Template with “Products” Element
Add a “WooCommerce – Product Archive” template in Bricks > Templates with the “Products” element. Configure Template Settings > Conditions to apply it to product archives and category archives. FiboFilters integrates automatically, displaying horizontal filters above the product grid.
Filters can be added in two ways: using dynamic actions or manually adding filtering elements. Both options are supported, and detailed instructions are provided in the next section.
Method #1 (using dynamic actions)
Add “Basic Text” elements with dynamic content to trigger WooCommerce actions woocommerce_before_shop_loop and woocommerce_after_shop_loop. In these elements, use {do_action:woocommerce_before_shop_loop} and {do_action:woocommerce_after_shop_loop} in the content.
Embedding Filters. We assume that the filters are added using the “FiboFilters” element or that the Filters location option in WooCommerce > FiboFilters > General is set to Above the products.
In the Products > Query you need to enable the “Is main query” option.
To display the product count and sorting, you need to enable the appropriate widgets in the “Products” element.
Method #2 (manually adding filtering elements)
Instead of adding elements with actions, you can manually insert all the necessary elements. As part of the Bricks integration, all the elements required to build filtering are available. These elements have been added to the “WooCommerce” group.
In the Products > Query you need to enable the “Is main query” option.
Note:
If someone wants pagination, in addition to changing the option in our plugin settings, the “Products Pagination” element must be added to the template.
Custom Loop Template “Product Archive (Custom Loop)”
In Bricks > Templates, add “Product Archive (Custom Loop)” of type “WooCommerce – Product Archive” featuring a custom product loop. Building loops in Bricks is described in their documentation. Configure Template Settings > Conditions to apply it to product archives and category archives.
See the structure of the elements in this example.
In the “Products Container” element, expand the “FiboFilters” section and check the box labeled “Mark this element as a container for products“.
In the “Product” element, under the “Query” section, check the box labeled “Is main query“. Also, in the same element, under the “FiboFilters” section, check the box labeled “Mark this element as a repeatable product item“.
When it comes to embedding filters, as in the example “Bricks (horizontal filters, template with ‘Products’ element)”, this can be done in two ways: by adding elements with hooks or manually adding filtering elements. See how to do it above.
Summary
The integration of FiboFilters with Bricks Builder allows for seamless product filtering in WooCommerce. You can use the default template, the “Products” element, or a custom loop to suit your needs. For assistance, contact us at FiboFilters Support.