For the filtering process to be easy to use, and compliant with customers’ habits, we had to bear in mind some crucial design principles. We decided to propose a dedicated mobile-optimized layout for FiboFilters on mobile.
Design of the filters on mobile
Our mobile filters are very similar to the desktop horizontal filters, with a few differences:
- Only a maximum of 3 buttons can be displayed, the first 2 with filters and the last button labeled “All filters”
- Clicking on any filter name, or the “All filters” button, will display a dedicated overlay instead of an off-canvas menu – this interface is deliberately designed to manage filters on mobile devices
Displaying filters on mobile
The mobile filters are always displayed above the product grid. In other layouts (for example in the sidebar), filters are hidden so that customers only make use of mobile filtering.
When are mobile filters activated?
By default, the mobile filters are displayed automatically on devices with a screen width lower than 450px.
The default breakpoint can be set in the FiboFilters settings:
WooCommerce → FiboFilters → General (tab) → Filter location → Mobile (view) → Mobile breakpoint
Forcing of the mobile view can also be disabled in the FiboFilters settings:WooCommerce → FiboFilters → General (tab) → Filter location → Mobile (view) → Enable mobile-optimized layout
Mobile filters will be disabled when a “Custom location” option is selected in WooCommerce -> FiboFIlters -> General (tab) -> Filter location.
Change the number of buttons
On mobile devices, there are two buttons + an additional “All filters” button.
To hide all buttons except “All filters”, use the following snippet:
add_filter( 'fibofilters/config/mobile_max_buttons', fn() => 0);
To show 3 filter buttons on mobile: + the “All filters” use the following snippet:
add_filter( 'fibofilters/config/mobile_max_buttons', fn() => 3);
On desktop, horizontal filters by default are shown as 5 buttons with filter labels + an additional one that opens the off-canvas, labeled “All filters”. If you want to change this number, see the article about horizontal filters.