How it works? #

A Shortcode generator will help you create any kind of filter you want. First, add the fields that you want in your filter. And then generate the shortcode. For styling and configurations go to Styling and Configurations section below.

Go to the tab

WordPress Admin Left Bar >> Woo Custom Filter Widget >> Shortcode Filter >> Create Shortcode

First, locate the plugin menu on the 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 be by default taken to Shortcode Filter >> Create Shortcode tab so there is nothing more to do.

Create Shortcode #

Step 1: Add Filter Field(s) #

Creating a new shortcode is a three-step process, in the first step, in the Add Filter Field section at the top, you can add as many fields as you want in your filter like dropdown, text search, checkbox, etc. Please look at the image below, You need to provide input for the four fields highlighted in red colour, an example input is given in the image. If you want to create an advanced filter with the parent-child relationship then please see the section Parent-Child Filter below.

Step 2: Filter Fields (optional) #

In the second step there is nothing much to do but if you want to remove any field from your filter then hit the remove X icon for any particular row in the Filter Fields section.

Step 3: Generate Shortcode #

In the third step, all you need to do is hit the Generate Shortcode button in the Generate Shortcode section and then copy the shortcode that is displayed in the area below the button. Please look at the video below to see the whole process including where it is displayed on the website frontend.

Styling & Configurations #

Button Text and Styling #

For ease of reading, we have created a dedicated page for styling, configuration etc. Please visit button text & styling guide for styling the button.

Dropdown #

Please visit the dropdown styling guide for styling the dropdown select boxes.

Configurations #

Please visit the Configurations guide for configuring redirect URLs and some other options.

Parent-Child Filter #

If you want to create dependant filters then this section is for you. Dependant filters can be created for categories. It works by populating a child filter with child categories, you can create any number of parent-child levels you want.

Step 1

In the first step, in the Add Filter Field section/form, create the category filter with the (root/main) category that you want to be at the top in the parent-child hierarchy of filters. Make sure to specify a unique id e.g. parent_filter_id_1, it will be useful in connecting parent-child dependency.

Step 2

After you create the category filter in Step 1 above, if you look again at the Filter field dropdown in the Add Filter Field section/form you will notice that there is now an additional option available to select with the title same as the unique ID you specified in the above step. You can be able to see an example in the image provided below. Select that new option that is now available to be selected.

Step 3

In Step 3, the rest of the process is the same as you had created the field in Step 1, Select the input type of your choice fill in other fields and hit the Add Filter button.

Step 4 (Optional)

If you want to create more dependent levels simply repeat Step 3 as many times as you want. Please look at the video provided below for a better understanding and to see how the entire process works from creating the Parent-Child Filter on the admin panel to how it functions on the front-end of the website.