Combining widget version for desktops and custom action for mobile

Welcome to Product Filter for WooCommerce video guide.

This video covers how to combine the widget version filter for desktops and custom action filter for mobile in the Product Filter.

First, let’s go to Appearance > Widgets and add a Product Filter Widget in our sidebar. The preset here we will use is the default one.

Now I will create a second filter preset by going to filter presets and clicking the new button. I will name it test and I will add my category and size filter as in the default preset, but I will also go to style and change the design to be fixed sidebar left with overlay.

The second filter preset we will make in the Shop Integration tab. Under preset we will set the name of the preset we just made.

Save and navigate to Filter Presets tab and then the Responsive button.

Under Responsive Behaviour let’s set the behavior for our default/widget mode. I will select to hide after resolution matches and save it.

Now we need to go to filter preset option and change the preset, I will select the test preset I’ve created.

Here I will set the behavior option to be shown after resolution matches.

Hit save and if we go to the shop you will see one preset for the desktop and when we resize for mobile you will see the different filter preset.

Save it and head on to the Shop page. If we resize and hit the trigger resolution we will see our widget filter disappearing and custom action filter appearing.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

2 comments on “Combining widget version for desktops and custom action for mobile”