General information

The following modes are available:

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


To configure your mobile and desktop shop filters follow the steps:

  1. Go to Administration → Appearance → Widgets.
  2. Add the same widgets to both "Shop Widget Area (desktop)" and "Shop Widget Area (mobile)":
    1. AJAX Product Filters: Category
    2. AJAX Product Filters: Color (Operator: OR)
    3. AJAX Product Filters: Size (Operator: OR)
    4. AJAX Product Filters: Price range
  3. Optionally you can use the default WooCommerce widgets instead:
    1. Product Categories
    2. Filter Products by Attribute: Color (Query type: OR)
    3. Filter Products by Attribute: Size (Query type: OR)
    4. Filter Products by Price

Color circles can be enabled using BLK Color Filters plugin.

If you have completed the actions described in this article and it did not solve your issue, you may:
Search the community forum or file a support ticket