How it works?

First, you will need to specify settings in the Settings section regarding where and how you want it to display. And then in the section Add Filter Fields add as many filter fields as you want in your filter with all different customization available related to functionality and styling as explained in below sections. Adding field process is repetitive so when you save the form once one field will be added to your filter layout for e.g. fields like text search, dropdown search, slider, etc.

Go to the page

WordPress Admin Left Bar >> Woo Custom Filter Widget >> Shop/Category Filter

First, locate the plugin menu on WordPress left bar menu, you should see the menu with the title Woo Custom Filter Widget, click on it. Now on the Woo Custom Filter Widget admin area that will be loaded, you will see the Shop/Category Filter tab on top, click on it.

Settings #

Filter Location

On this field there are two options Shop Page and Category Page, select the either or both to specify on which page you want to show filter. If you select the category page option then you will be asked to select a category on which you want to display the filter.

Two Filters? (optional)

This is useful when you have a specific requirement to show two different kinds of filters, both the filters function separately based on two different categories. If you enable this option you will be asked to select dependent categories, a detailed explanation is provided in the Configuring Two Filters section below.

Alternate Mobile View? (optional)

Enable this option if you want to use an alternate mobile UI which is quite suitable for mobile layout. 

Selected Filters? (optional)

Enable this option if you want to show in a line all selected filters with an option to remove them.

Want Sample Filters? (optional)

If you want to try with sample filters first then click Add Sample Filter Data button, you can select what sample data you want to add in the next step and later you can remove sample data by clicking “Remove sample data” button. A sample page will also be added when you add sample data. After adding sample data you will be able to visit the sample page to see it in action!. Take a look at the example video below.

CSS for Custom Styling (optional)

In this field, you can put your custom CSS. You can customize the styling of anything that is within filter widget, you may need to override class of any element of which you want to customize styling.

Add Filter Fields #

First thing you will see in this section is the fields list. When you first visit this page you will find it empty, it will be populated after you add fields from the section under it. From this list, you can delete any field that you don’t want anymore.

Add Field Form

Filter
In this input, you will need to specify the category or attribute on which the filter field should do the searching.

Label

Label text to display on the website for the filter field’s heading title.

Is advanced filter option? (optional)

If this option is selected the filter field will be placed in the advanced section. Note that advanced section will be hidden by default and when the user clicks on its link/action it will become visible.

Column Width (optional)

This input controls what width the filter field should use on filter layout, this is useful when you want to display filters with different width, more important when some filters are important and others are less important. You will be required to specify a numeric value, the unit of which is considered as a percentage of layout width.

Ordering (optional)

The display order of the filter fields, useful when you want to show filter fields in a particular order. If you keep default then the Ascending order, of the order in which you saved them, will be considered.

Input Type

Select the type of input field that you want to display for e.g. if you select dropdown, a dropdown box will appear on filter layout on your website.

Icon size (optional)

If you selected any of the input types from above input type field that contains icons then this input value will be applied to the icon, the unit of value is px, please be sure to append px to any value you specify. For e.g., if you specify 48px then a 48×48 icon will be displayed on filter layout. For advanced users, the unit px can be replaced which means you can replace px with any other unit that CSS supports.

Icon label size (optional)

When you select icon input type with text that is “Icon and Text”, use this field to specify the font size of the text, the unit of value is rem, please be sure to append rem to any value you specify. For advanced users, the unit rem can be replaced which means you can replace rem with any other unit that CSS supports.

Add reset action? (optional)

If you select this option a reset action will be provided for the filter field using which user can reset their search criteria.

Child filter? (optional)

If you want to create dependent filters for e.g. for Sub Categories of the main category, then after selecting category in the Filter(very first field in this form) field select/enable this option. When you enable this option an additional field will show up below, namely, Child Label, which is the label for the Child Filter field please specify appropriate text in that field.
Take a look at the video below for visual example, it also shows how the filters look on website front-end.

Configuring Two Filters #

First Category

When you enable “Two Filters” option, you will be asked to provide some more detail. For the First Category input please select the category under which the first filter should do the searching. We recommend that you take a look at video below to get a better idea of it.

First Filter Title

The title text that is set to the first filter’s heading title.

Second Category

For this input please select the second category under which the second filter should do the searching.

Second Filter Title

The title text that is set to the second filter’s heading title. As recommended above also, please take a look at the video provided below.