This guide 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.
Save it and return do the default preset.
The implementation of 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 show on screen resolution larger than.
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 show on screen resolution smaller than.
Hit save and 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.
Watch more Product Filter for WooCommerce videos to learn more. Thank you!
How do I create hooks based on product category.. i.e. show different filter preset based on category.
I have created multiple presets already just need to link it accordingly.
all video’s have disappeared
🙂 🙂 no they’re just not ready yet, but you can use the Help Center, our support agents will guide you if you have difficulties with the text.
yeah, no video here.
Where is the video? Can’t seem to get the hang of this through this text.