How do the filters work on mobile devices?
The WooCommerce Product Filters plugin is designed to provide the optimum filtering experience on every device. As a result, the filters often work differently on mobile devices and bigger screens.
This article summarizes how the filters work on mobile, and the options for controlling this.
Filters above the list of products
You can display filters directly above the list of products - either by selecting a filter group in the plugin settings, or by adding a shortcode to the top of the page.
The plugin's visibility options let you choose whether or not the filters should be visible on the page by default. If the filters are set to be visible on desktop then an additional option appears, allowing you to hide them on mobile.
This is a good way to save space on smaller screen sizes, as users can click a button to view the filters in a mobile-friendly slide-out panel instead of having them on the page.
-
- Show horizontal filters above the shop on mobile
-
- Click a button to view the filters on mobile
Filter widgets
WooCommerce Product Filters comes with a Product Filters widget which you can use to add filters to a sidebar. This is an excellent way to display filters on desktop, but not very useful on mobile.
Most themes hide the sidebar on mobile or move it below the list of products. As a result, if you have added filter widgets to a page then these will automatically be hidden on mobile. Instead, a 'Filter' button (which you can customize the wording for) will appear above the list of products on mobile. Users can click this button to view the filters in a slide-out panel, which provides much better user experience on mobile devices.
Tip:Â If you don't want the filter widgets to be hidden on mobile, then there's a simple way to achieve this. Instead of using the 'Product Filter' widget, add the filter shortcode to a sidebar widget. The shortcode is coded differently from the widget to allow more flexibility, and will not be hidden on mobiles.