FiboFilters is integrated with many popular WooCommerce themes. However, it can work with any theme. This guide will walk you through embedding and customizing filters in a custom-built theme.
Table of Contents
- Embedding filters on a page
- Disabling automatic insertion of filter elements
- Customizing filters
- Troubleshooting
Embedding filters on a page
FiboFilters allows you to place the filters in a sidebar, above the products, or in a custom location. This can be set in WooCommerce > FiboFilters > General.
When you select “Above the products”, filter elements are automatically added to the page. This includes:
- horizontal filters
- mobile filters
- applied filters
- pagination (“Show more products” buttons or infinite scroll trigger)
When you select “Sidebar”, all you need to do is add the FiboFilters widget to the appropriate widget area. The rest is handled automatically.
The automatic insertion of filter elements is managed with two WooCommerce actions:
woocommerce_before_shop_loop, which inserts filter elements before the product grid. This applies to horizontal filters, mobile filters, applied filters, and the “Show previous products” button.woocommerce_after_shop_loop, which inserts filter elements after the product grid. This applies to the “Load more” button and infinite scroll trigger.
If your theme doesn’t support these actions, you’ll need to use the custom location for filters and add all filter elements manually. For a full list of required elements, refer to “Filter location – custom location”.
Disabling automatic insertion of filter elements
If you don’t want FiboFilters to insert filter elements automatically, you can disable them with the following code snippets:
// Remove horizontal filters do_action( 'fibofilters/remove_action', 'woocommerce_before_shop_loop', 'filtering.front', 'display_horizontal_filters_placeholder', 500 ); // Remove mobile filters do_action( 'fibofilters/remove_action', 'woocommerce_before_shop_loop', 'filtering.front', 'display_mobile_filters_placeholder', 510 ); // Remove applied filters do_action( 'fibofilters/remove_action', 'woocommerce_before_shop_loop', 'filtering.front', 'display_applied_filters_placeholder', 520 ); // Remove "Show previous products" button do_action( 'fibofilters/remove_action', 'woocommerce_before_shop_loop', 'filtering.front', 'display_load_previous_button_placeholder', 520 ); // Remove "Load more" button do_action( 'fibofilters/remove_action', 'woocommerce_after_shop_loop', 'filtering.front', 'display_load_more_button_placeholder', 5 ); // Remove infinite scroll trigger do_action( 'fibofilters/remove_action', 'woocommerce_after_shop_loop', 'filtering.front', 'display_infinite_scroll_trigger', 5 );
ⓘLearn how to add this snippet to your WordPress.
Customizing filters
Once the filters are up and running, you can customize their appearance and add extra functionality.
Colors
FiboFilters uses two colors: base color and link color. These can be changed in FiboFilters settings or overridden with CSS:
body {
--fibofilters--colors--base: #e9c600;
--fibofilters--colors--link: #6ea9de;
}
ⓘLearn how to add custom CSS to your WordPress.
Off-canvas position
By default, off-canvas filters slide in from the right. To change this, add the following code to your website:
add_filter( 'fibofilters/config/offcanvas_position', function() {
return 'left'; // Supported values: 'left', 'right'
} );
ⓘLearn how to add this snippet to your WordPress.
Products per page
FiboFilters calculates the number of products displayed on a page by multiplying “Products per row” and “Rows per page” defined in Appearance > Customize > WooCommerce > Product Catalog. You can override this value in your theme with the following code:
add_filter( 'fibofilters/config/products_per_page', function (): int {
return 12;
} );
ⓘLearn how to add this snippet to your WordPress.
Pagination strategy
The pagination strategy (classic, “Load more” button, or infinite scroll) can be set in WooCommerce > FiboFilters > Appearance. You can also configure it using this code:
add_filter( 'fibofilters/config/pagination_strategy', function() {
return 'infinite-scroll'; // Supported values: 'show-more-button', 'infinite-scroll', 'pagination'
} );
ⓘLearn how to add this snippet to your WordPress.
Dynamic product sorting
FiboFilters includes a JavaScript-based product sorting module that allows users to sort results without reloading the page. Learn how to enable and customize it: “Product sorting”.
Products per page selector
If your theme includes a “products per page” selector that allows customers to change the number of displayed products, you can make it work with FiboFilters, as long as it reloads the page and adds a URL parameter (e.g., ?perpage=12). Use the following code (replace perpage with your actual URL parameter):
add_filter( 'fibofilters/config/non_removable_url_params', function ( $params ) {
$params[] = 'perpage';
return $params;
} );
add_filter( 'fibofilters/config/products_per_page', function ( $products_per_page ): int {
$per_page = ! empty( $_GET['perpage'] ) && is_numeric( $_GET['perpage'] ) ? absint( $_GET['perpage'] ) : 0;
if ( $per_page > 0 ) {
$products_per_page = $per_page;
}
return $products_per_page;
} );
ⓘLearn how to add this snippet to your WordPress.
Pagination
If you want to use classic pagination, you can slightly modify its appearance with the following code:
add_filter( 'fibofilters/config/pagination_args', function ( $args ) {
return wp_parse_args(
[
'prev_text' => '‹',
'next_text' => '›',
'mid_size' => 5,
'end_size' => 2,
'type' => 'plain', // Supported values: 'plain', 'list'
],
$args
);
} );
ⓘLearn how to add this snippet to your WordPress.
After applying the code, pagination will look like in the picture below. end_size specifies the number of page numbers displayed before and after the three dots, and mid_size specifies the number of page numbers displayed before and after the currently viewed page (page 13 in this case).
JavaScript events
FiboFilters fires several JS events during filtering. These can be used to add extra functionality or synchronize with third-party features. Refer to “JavaScript events” for a full list of FiboFilters events.
Troubleshooting
Once you embed filters on your shop pages, FiboFilters re-renders the product grid by removing existing products and inserting the filtered ones. It also affects pagination.
This may cause issues. Here’s a list of common ones and how to resolve them.
Filtering does not affect the product grid
If FiboFilters can’t detect the product grid, filtering will have no effect. The solution is to inform FiboFilters of the CSS selector for the product grid: “Fixing loop start selector”.
JavaScript features (like “Quick view”) no longer work
If there are JavaScript events attached to products, they will be lost after FiboFilters re-renders the product grid. The solution is to re-attach the events once the rendering is complete: “Fixing product JS events”.
Wrong image placeholders
FiboFilters temporarily displays placeholder images before product images load. To change the placeholder image, follow this solution: “Fixing product image placeholder”.
No pagination
The “Pagination” pagination strategy set in FiboFilters settings requires the default WooCommerce pagination container (.woocommerce-pagination) to be present on the page. If your theme is using a different pagination selector (eg. nav.pagination), you can make it work with FiboFilters with the following code:
add_filter( 'fibofilters/config/pagination_selectors', fn() => [ 'nav.pagination' ] );
ⓘLearn how to add this snippet to your WordPress.
You can also use the [fibofilters_pagination] shortcode to insert the FiboFilters pagination.
Read more about pagination here: “Pagination”.