Product filters

From vs 1.2.1 you are able to make product filters (for the frontend shop). Let us have a look at how this looks and works.

Creating and update filters

In Bulk Category Editor find the tab: Product filters

In the section you find a button to add filters (New) and a table that list your filters and a section to edit them. Note: fonts, height and width uses pixels (px). Let us start by creating a new filter.

Create a product filter

You can create a default filter just by clicking the Save filter button (this way you can test it before you make your custom changes). Here is how you use the options:

1. Enter a filter name, i.e Category filter (optional)
2. Labels
   1. Set your labels for filter title, current filter, search text and price range (or use the default)
   2. Change the font size (default 20px) – set a numeric value
   3. Change the font colour for the titles using the colour selector
3. Buttons
   1. Set label for set and reset filter (or use default: Set filter and Reset filter)
   2. Change background colour
   3. Set the on mouse over (hover) colour if you do not want to use the default.
   4. Change font colour (this colour will also be used for the plus/minus icons)
   5. If you like to round the buttons corners set the value here or set 0
   6. Note: If you check the filter on click, the Set filter button will not show (when filter is set when the user clicks on a category)
4. Category Exclusions (hide categories)
   1. Check categories to hide (exclude) categories in the list. In addition to hide categories from the list, this function adds these categories to your WooCommerce category query and hides these categories in the shop.
   2. Note: In B2B (role-based) solutions where a role can hide categories you will need to test how it work together before using this function.
5. Design (look and feel for the category filter box)
   1. Set a background colour if you like
   2. Set font colour on list elements in the box (the list of categories and attributes)
   3. If you like to round the corners of the boxes, set a value here i.e 6 (uses pixels)
   4. Set height and width (max width) on the filter box (or use the defaults) – numeric values
      1. Note: This box scrolls automatically if the list of categories becomes larger than the height of the box.
   5. Check the remove border if you do not want the boxes with border (includes the buttons)
   6. Note: Most of the filter boxes / buttons have a CSS class so if you like to make it even more fancy, it is possible using some CSS. (Add extra CSS in the theme custom CSS).
6. Settings
   1. Page (default shop page): This will ensure that you get back to the right page when filtering, default the filter finds the page you defined as your shop page and redirects the filter to this page.
   2. Hide search (top), if you do not want a search bar above the filters (searches in products and stays on the same page)
   3. Check hide search (in category box) if you do not want the search in the box. Search filter your categories or search in products (if product search you need to check the search in products – described below)
   4. Remove posttype in query: By default this is product and will work good when the shop is on the frontpage (home) of your site. Sometimes when used in a template you need to check this to make the filter work as supposed. (Tip: try first and see if the filtered result is OK before checking this)
   5. Hide attributes filter: Default (not checked) the attributes filter (i.e Colour and Size) will be listed in the filter. If you check this all attributes (filter) will not be shown.
   6. Hide price range filter, check this if you do not want to enable this option for your customers.
   7. Search in products is for the search box inside the category filter, if you check this the search box searches in products else it filter your categories as you type.
   8. Hide mini reset button, hides the mini button to the right of filter title
   9. Filter on click: Sets filters every time you click a category. If this option is set (on) the button: Set filter will not show (due to it will never be in use)
   10. Show empty categories: If you like to show all your categories, use this option
   11. No hierarchy: Check this if you want a flat structure of your categories 
   12. Show thumbnail: If you check this (on) categories will be listed with the category thumbnail first.
   13. Product count: If you like to show how many product every category contains check this. Shows like this: Shirt (25)
   14. Shop page only: If you check this (on) the filter will only be showed on the Shop page (defined in WooCommerce settings). Note: This setting will not remove any sidebars.
7. Save filter
   1. Click the Save filter button to save the filter. Use this button every time you change the filters.

Use the filters in your shop

Using the created filters is easy, you just click the shortcode i.e [wbc_category_filter id=”565″] – this copies the shortcode for you. Now you can use this in your shop pages, example:

1. Paste it in Appearance > Widgets > Sidebar (just add a shortcode section first)
2. If you use a template designer i.e Elementor, add a shortcode section and paste your shortcode

When you have done this, go to your shop and see how it looks. Do changes in Bulk Category Editor as described above.

Please let us know if you have any ideas or request that you like us to add to the filters.