Product Filters - Botiga Pro

The Product Filters module from Botiga Pro allows you to have advanced options for filtering products with a beautiful design and good user experience.

1. Activate the module

First of all make sure you have the module enabled under Admin > Botiga > Theme Dashboard

Once the modules is activated, go to the module settings:

2. The module settings overview

The Product Filters module settings page is divided into four sections:

Filter Presets: Where the presets are created and defined.
General: The general options which are applied to all filters.
Customization: Contains options to customize certain types of filters.
SEO: Specific term filter related SEO options.

3. Setup the Filter Presets (required)

The presets are the core from the module and required to get it working. To create a new Preset click on the button + Add new preset.

Add the preset name and some filters:

The available filter settings are:

Filter Name: The filter name which is displayed in the frontend.
Filter For: Controls which parameters to filter (Taxonomy, Order By, Price Slider, Reviews or In Stock/On Sale/Featured).
Taxonomy: Selects the attribute to filter the terms.
Auto Populate Terms: Choose to auto populate the terms or not.
Filter Type: The type of filter to display in the frontend (Checkbox, Select, Text, Label or Color Swatches).
Display as Accordion: Displays the filter with accordion/toggle style.
Show Hierarchy: Controls whether to display the hierarchy of the terms or not.
Display Count of Products: Displays the count of products that are available for each term.
Multiple Selection: Allow multiple terms selection.
Multiple Selection Relation: The relation between multiple selections.
Adoptive Filtering: Terms will be hidden while filtering whether products doesn’t match.
Terms Loading Type: Controls how the terms are loaded.

Important: Some of the above fields are dynamic. For example, if you set the Filter For to Order By, some fields that are displayed for Taxonomy won’t be displayed (and vice-versa).

To display the filters in the frontend you have to add the Botiga Product Filters Preset block widget under Admin > Appearance > Widgets. Once you are in the page, select the sidebar where you want to display the widget and add it:

In the block widget settings select the preset which you’ve created previously:

In the above step (4) you added the widget block to display in the frontend. If your website is already displaying the selected sidebar, then you can skip this step 5. However, if your website isn’t displaying the sidebar you have to enable it under Admin > Apperance > Customize > WooCommerce > Product Catalog > Layout > Sidebar Layout:

6. Set the General Settings (optional)

This setting controls the general aspects from the module and applies to all filters and presets.

Hide empty terms: Hide terms that have no products.
Display ‘Clear’ on each filter: Displays a “clear” button above each filter in the preset.
Display active filters: Displays the active filters. It shows the current filters selection and can be used to remove any active filter.
Active filters position: The position of the active filters.
Scroll to top on filter: Scrolls to the top of the page when a filter is selected.

6. Customization (optional)

This settings controls the design/style aspects from some filter types.

Color swatch size: Controls the size for the color swatches.
Color swatch style: Controls the style for the color swatches.

7. SEO (optional)

This settings section contains some extra options for SEO relative to the terms filtering.

Enable SEO options: Enable to add ‘robots’ meta tag to the head of the page when the filters are activated.
Meta tag: Which tag to use in the filtered pages.
Add ‘nofollow’ to filter anchors: Add rel=”nofollow” to the filter anchors.