WooCommerce Product Filter Main Settings

We have all the necessary options in one plugin. You can start to try them now, following this clarification. It’s really easy to make the required settings and add Filter Plugin into your online store.
Product filter contain 3 main tabs:

Filters

Options

Advanced


Filters

With the help of our plugin, your customers can filter your products by any criteria –

Each filter criteria customizable, giving you maximum control over what your customers are filtering and the results they see.

All settings changes you can see in the life preview:

 

Let’s consider each criterion for filtering:

Price

Here you can put Filter title and description.price filter

Set the way to display a filter label on the page: no label, show as close/opened

Here is an example of title label displaying:

filter display

Filter skin – select the design (default, flat, big, modern, sharp, round, square) and make a custom setting for its design (not available for default skin): colour and enable/disable grid.

filter price skins

Show price input fields – check if you want to provide customers with an option to specify the price.

price input fields

Symbol position. Change the position of currency displaying: before or after input fields.

Show currency as – select the way to display currency: code or symbol.

Use text tooltip instead of input fields – check if you need not input fields, just text tooltip.
Image from Gyazo


Price range

Here you can make the following settings:price range product filter

  • Put Filter title and description.
  • Show label as open/close/none
  • Set how to show on front-end: checkbox list/drop-down.filter dropdown
  • Drop-down label. Set a drop-down first option text.
  • Set range automatically. If this option is enabled, you may set the price range settings automatically.
  • Price range step. Here you may set the value of price increase step. The default value is set to 20. All the steps are equal.
  • Set range manually. If it’s enabled, you can press the Setup button and customize your price range.

price range filter

  • Set Maximum height on front-end.

Sort by

Here you can:

  • Put Filter title and description
  • Select the sorting options  (min 2 options).

Sort by Product filter


Categories

Here you can:

  • Put Filter title and description.
  • Show in front-end as checkbox list or drop-down. Depending on whether you need one or several categories to be available at the same time, you may show your categories list as checkbox or drop-down.
  • Set a Drop-down label. 
  • Sort by. Here you may set categories sorting by ascending or descending price.
  • Order by custom. Categories are displayed according to the order of their selection in the input fields.
  • Show hierarchical. Show paternal and subsidiary categories (for checkbox list).
  • Enable Show count.
  • Hide categories without products. Do not show filter option if there are no products with such category.
  • Product categories. Here you may select product categories to be displayed on your site from the list. If you want to select several categories, hold the “Shift” button and click on category names. Or you can hold “Ctrl” and click on category names. Press “Ctrl” + “a” for checking all categories.
  • Exclude terms ids. Here you may exclude category terms from the filter by ids. Example input: 1,2,3
  • Show search – enable if you need to add a field for searching  by categories 
  • Maximum height. Set maximum displayed height on front-end.
  • Hide child. Hide child taxonomy.

categories filter

 


Tags

Here you can:

  • Put Filter title and description.
  • Show label as open/close/none.
  • Show on front-end as checkbox list or drop-down. Depending on whether you need one or several tags to be available at the same time, you may show your tags list as checkbox or drop-down.
  • Set a Drop-down label. 
  • Sort by. Here you may set Tags sorting by ascending or descending price.
  • Order by custom. Tags are displayed according to the order of their selection in the input fields.
  • custom sorting
  • Enable Show count.
  • Hide tags without products. Do not show filter option if there are no products with such tag.
  • Product tags. Here you may select product tags to be displayed on your site from the list. If you want to select several tags, hold the “Shift” button and click on category names. Or you can hold “Ctrl” and click on category names. Press “Ctrl” + “a” for checking all tags.
  • Exclude terms ids. Here you may exclude category terms from the filter by ids. Example input: 1,2,3
  • Show search.
  • Maximum height. Set maximum displayed height on front-end.

tags filtering


 Author

Here you can:

  • Put Filter title and description.
  • Show label as open/close/none.
  • Define which role show to users in the drop-down. 
  • Show on front-end as checkbox list or drop-down. Depending on whether you need one or several tags to be available at the same time, you may show your tags list as checkbox or drop-down.
  • Drop-down label. Set a drop-down first option text.
  • Show search.
  • Maximum height. Set maximum displayed height on front-end.

Author product filter


Featured, On sale, Stock status

Here you can:

  • Put Filter title and description.
  • Show label as open/close/none.

In Stock status filter you are able to select the parameters to display: In stock, Out of stock and On backorder.


Rating

Here you can:

  • Put Filter title and description.
  • Show label as open/close/none.
  • Show on front-end as radio buttons list, drop-down, multiline star rating and single line star rating.

For Stars rating you can select the icon size, icon size and border, set an additional text.

  • Drop-down label. Set a drop-down first option text.

rating stars


Search by text

Here you can:

  • Put Filter title and description.
  • Show label as open/close/none.
  • Search by – chose searching params: title, content, excerpt, content or excerpt, title or content, title and content.

For searching by title a Search by full word only and Autocomplete (autocomplete relevant variants) options are available.


Attribute

Here you can:

  • Put Filter title and description.
  • Select an attribute to be displayed on your site from the list.
  • Show label as open/close/none.
  • Show on front-end as checkbox list, drop-down, multiple drop-down or colours.
  • Hide categories without products. Do not show filter option if there are no products with such category.
  • For Colors, you have additional settings: icon type, layout – horizontal and vertical. Also, you can choose the number of Colors in a row, set an icons spacing, set an icon size and border. Check if you want to Show border and select the icon colour. 
  • Drop-down label. Use a drop-down first option text.
  • Set attributes sorting by ascendance or descendants.
  • Put maximum displayed height in the frontend.


 

Options

In this tab set the options to improve the work of the filter:

  • Enable ajax. If you don’t want the page to reload every time a filtering action is performed, you can also use AJAX load function. Filtering starts as soon as filter elements change and filter results are displayed instantaneously.

 

  • Show Clear all button. If this option is enabled, the “Clear” button appears at the page. All filter presets will be removed after pressing the button.
  • Show Filtering button. This button is necessary when ajax mode is disabled. It allows users to set all necessary filter parameters before starting the filtering.
  • Display filter on.  Chose where display filter: for all devices/for mobile/for a desktop.
  • Recount products by selected filter. Automatically recount product by selected filters (if product category loading slowly – disable this function).
  • Checked items to the top. Lets checked terms will be on the top.

Also, here you can set the Filter design: Button position, style and colour of an icon and other design settings:

  • Filter Width – here you can set the filter width in pixels or in percentage.
  • Filter Block Width – here you can set the filter block width in pixels or in percentage.
  • Select Filter Buttons Position – here you may select the position of filter buttons on the page: bottom, top or both.
  • Enable filter icon on load – enable filter icon while a page is loading.
  • Filter Loader Icon. Here you may select the animated loader, which appears when filtering results are loading.

  • Filter Loader colour. Here you may select the colour of filter loader animation.
  • Enable overlay. 
  • Overlay background colour and opacity.
  • Show Loader Icon on an overlay.
  • Show loading word on an overlay. 
  • Set loading word for an overlay. Here you may select overlay skin for a filter. 

 


Advanced

If you have some knowledge in coding, this tab will be useful and you can set the following editor:

CSS editor. Write your own CSS style

JS editor. Write your own js code

Display only on the page. Chose page for a filter: Shop, Product Category or Both

Hide filter by title click. 

advanced product filter

 

Categories
Latest Articles