General information
The following modes are available:
- Mobile resolutions can only have a bottom-aligned filter bar.
- Desktop resolutions can have:
- The bar filters which will be created when you use only AJAX widgets and if they can fit that area.
- The panel which will be created when you use only AJAX widgets and if they can't fit the bar.
- The sidebar which is created automatically when you use any non-AJAX widgets in that area.




Configuration
To configure your mobile and desktop shop filters follow the steps:
- Go to Administration → Appearance → Widgets.
- Add the same widgets to both "Shop Widget Area (desktop)" and "Shop Widget Area (mobile)":
- AJAX Product Filters: Category
- AJAX Product Filters: Color (Operator: OR)
- AJAX Product Filters: Size (Operator: OR)
- AJAX Product Filters: Price range
- Optionally you can use the default WooCommerce widgets instead:
- Product Categories
- Filter Products by Attribute: Color (Query type: OR)
- Filter Products by Attribute: Size (Query type: OR)
- Filter Products by Price
Color circles can be enabled using BLK Color Filters plugin.