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.

Selected an option “Custom location”
Selected an option “Custom location” on a Filter Location radio list

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

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:

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

UI elementShortcodeDescription
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

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.