Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/nixnesa/web/help.xforwoocommerce.com/public_html/wp-content/plugins/awesome-support/includes/functions-templating.php on line 694

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/nixnesa/web/help.xforwoocommerce.com/public_html/wp-content/plugins/awesome-support/includes/class-product-sync.php on line 193

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/nixnesa/web/help.xforwoocommerce.com/public_html/wp-content/plugins/awesome-support/includes/class-product-sync.php on line 220

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/nixnesa/web/help.xforwoocommerce.com/public_html/wp-content/plugins/awesome-support/includes/class-product-sync.php on line 242
Combining widget version for desktops and custom action for mobile – XforWooCommerce.com Help Center

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.

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!

Leave a Reply

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

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

  1. 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.

    1. 🙂 🙂 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.