Filter location – custom location

For most use cases, “Sidebar” or “Above the products” filter locations are sufficient and will help you to quickly embed filters on your site. These locations also follow our suggested user experience, maintaining seamless transitions between vertical, horizontal, and mobile-optimized filter layouts.

However, there are cases where you’d want to embed your filters elsewhere – this is what the “Custom location” option is built for. Please be aware that with this selection:

• all UI filter elements will be unregistered
• all rules that manage the transitions between vertical, horizontal, and mobile filter layouts will also be removed
• you’ll need to manually register the UI elements and rules, using shortcodes or widgets

Table of Contents

• Adding UI elements manually
  • Examples of adding shortcodes in PHP
• Changing the filter layout depending on the screen size
  • Example
• Displaying filter on non-WooCommerce pages
  • WooCommerce shortcode [products]
  • Pagebuilders

Adding UI elements manually

FiboFilters consists of a few elements, embedded by default in various WooCommerce templates using hooks such as woocommerce_before_shop_loop or woocommerce_after_shop_loop. These are the following elements:

• filter placeholders – placeholders that can display vertical, horizontal, or mobile filter layouts
• Applied filters – information about currently applied filter values
• the “Show more products button” – used to load more filtering results

The full list of FiboFilters UI elements you can add using shortcodes:

UI element	Shortcode	Description
Vertical filters	[fibofilters layout="vertical"]	Filters in the vertical layout
Horizontal filters	[fibofilters layout="horizontal"]	Filters in the horizontal layout
Mobile filters	[fibofilters layout="mobile"]	Filters in the mobile-optimized layout
Applied filters	[fibofilters_applied_filters]	Information about currently applied filter values
“Show more products” button	[fibofilters_show_more_products_btn]	When in WooCommerce settings (WooCommerce → FiboFilters → Appearance → Pagination types) the “Show more products” button is selected, you’ll need to manually add it, using a shortcode below the product grid

FiboFilters also automatically work with other WooCommerce elements, such as:

• pagination
• WooCommerce Product Count
• the product grid

These elements don’t need to be embedded manually, because they are recognized and overwritten automatically.

Our recommendation for filter placement:

• Sidebar – vertical filters
• Above the products  – horizontal filters, mobile filters, and Applied Filters
• Below the products – a “Show more products” button

Examples of adding shortcodes in PHP

Add horizontal filters above the products

add_action( 'woocommerce_before_shop_loop', function () {
	echo do_shortcode( '[fibofilters layout="horizontal"]' );
}, 51 );

Add the “Show more products” button below the products

add_action( 'woocommerce_after_shop_loop', function () {
	echo do_shortcode( '[fibofilters_show_more_products_btn]' );
}, 51 );

Changing the filter layout depending on the screen size

Vertical, horizontal and mobile filters are displayed always, regardless of screen size. It’s then necessary to specify the screen size ranges in which a particular filter layout should be displayed.  To do so, use the min_screen and max_screen attributes. Filters will be hidden for remaining ranges. This setting works similar to CSS Media Queries.

Example

You want to display vertical filters in the sidebar on desktops, horizontal filters above the products for screens smaller than 1024px, and mobile filters for screens smaller than 560px. In this case, you’ll need to add 3 shortcodes to all three respective locations:

Sidebar – add this shortcode; it forces the vertical layout and hides filters on screens smaller than 1024px

[fibofilters layout=”vertical” min_screen=”1025” ]

Above the products – add these two shortcodes; this way two HTML placeholders will be added, for both horizontal and vertical filters; also, these shortcodes contain information about which filter layout should be displayed/hidden

[fibofilters layout=”horizontal” min_screen=”561” max_screen=”1024” ]
[fibofilters layout=”mobile” max_screen=”560” ]

Displaying filter on non-WooCommerce pages

Filters can be embedded on non-WooCommerce pages: for example posts, pages, custom posts, or even the main page if it doesn’t contain any products. Custom product archives made with pagebuilders are another popular example – these are also considered as non-WooCommerce WordPress pages.

WooCommerce shortcode [products]

These conditions must be met for FiboFilters to be correctly displayed on such pages:

1. Products must be displayed by the WooCommerce shortcode “products”, with this parameter: fibofilters=1
   As in this example: [products fibofilters=1]
2. If the integration with your pagebuilder of choice doesn’t add UI elements on these pages automatically, you’ll need to add the elements according to this list

Pagebuilders

Like Elementor, Pagebuilders uses their own widgets, blocks or modules to add products to pages. In such cases, look for information directly in the articles about integration with these builders. Currently, we support:

1. Elementor widget called the WooCommerce Products widget
2. Divi module called the Woo Products Module

If you encounter any issues with the integration, please contact our technical support team.