Mobile preset for Product Filter

This guide covers how to use Mobile Preset in the Product Filter.

To start this tutorial click on the Filter Presets tab and then the Responsive button so all the settings appear.

Under Responsive Behaviour, we have a dropdown list with all our options. To do nothing means that the preset you are currently using will be used and all the options and styles will be the same on desktop and on mobile.

The show and hide options will be explained in depth in a separate future video guide.

For now, let’s select the option to Switch with filter preset. Immediately after selecting you will see a new option appearing. The preset option.

There you will choose a preset for the filter on mobile. I will choose the test preset. On this preset I only changed the style to be fixed sidebar left with overlay.

We also have the option to set the specific resolution that will activate the changing of the filter presets. I will leave it to be at 768.

Hit save and let’s go to the shop page to see the changes.

You will see one preset for the desktop and when we resize for mobile devices you will see the different filter preset be shown when we reach our trigger resolution.

Watch more Product Filter for WooCommerce videos to learn more. Thank you!