Search Filters

< All Topics
Widget Used
Search Filters
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to build a search content filter menu for your website/product. Then we have created a dominant and well-designed widget. Search filters are a great way to save time by narrowing down the search results you want. Our widget simplifies this process by providing a quick and easy solution for filtering search results. With just one click, you can display only the items relevant to your needs.

Table Of Contents
Pro tip
Why don’t you use this widget? Because with the help of this widget, you can enroot and see as many options as there are filtering search results for the post, product, etc of other people.

How to use the Search Filters Widget of The Plus Addons For Elementor

The Search Filters widget comes with three filter types. With the custom styling options, you can make a pleasant and suitable layout.

Requirement

You need to install Woo Commerce and Advanced Custom Fields (ACF) to make better use of this widget’s feature.

You can make better use of this widget’s feature with ​the Dynamic Listing and Woo Product Listing widget that we have already created.

General Steps

Search for the Search Filters element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Search Filters widget. First, click on the Content tab.

1. Content

1) Filter Area

Search Field Repeater

1. Filter Type

We have given three types of filters for the search filter. Select your desired type for the search filter. You can set the field where you want to set it, such as the top, middle, bottom, and add and remove it.

You will be able to do see & filter posts/products according to the selected filter.

The types we provided are:

1. WordPress Filter
2. Woo Filter

3. Filter Meta

1.1) Select Source (WordPress Filter)

We have given eight options of WordPress filter for the search filter. Select your desired option of WordPress filter for the search filter.

By selecting source options you can see the filter-wise effect for taxonomy and ACF (advanced custom fields) using its related option.

The options we provided are:

1. Alphabet Filter
2. Check Box

3. Date Picker
4. Drop Down
5. Radio Button
6. Range Slider
7. Search Input
8. Tabbing Filter

1. Alphabet Filter

You can search post alphabet filter wise using its related option.

Alphabet Type

You can choose alphabet and numeric type for filtering.

2. Check Box

You can search post checkbox filter wise using its related option.

3. Date Picker

You can search post date picker filter wise using its related option.

4. Drop Down

You can search post drop down filter wise using its related option.

5. Radio Button

You can search post radio button filter wise using its related option.

6. Range Slider

You can search post range slider filter wise using its related option.

7. Search Input

You can search post search input text filter wise using its related option.

8. Tabbing Filter

You can search post tabbing filter wise using its related option.

1.2) Select Source (Woo Filter)

We have given four options of Woo filter for the search filter. Select your desired option of Woo filter for the search filter.

By selecting source options you can see the filter-wise effect for taxonomy and ACF (advanced custom fields) using its related option.

The options we provided are:

1. Button
2. Color
3. Image
4. Rating

1. Button

You can search post button filter wise using its related option.

2. Color

You can search post color filter wise using its related option.

3. Image

You can search post image filter wise using its related option.

4. Rating

You can search post rating filter wise using its related option.

1.3) Select Source (Filter Meta)

We have given three options of Filter Meta for the search filter. Select your desired option of Filter Meta for the search filter.

By selecting source options you can see the filter-wise effect using its related option.

The options we provided are:

1. Filter Tag
2. Filter Reset
3. Total Search Results

1. Filter Tag

You can see post filter tag wise.

2. Filter Reset

You can reset filter from which side you want using its option.

2.1 Tag Position

You can set filter tag reset position.

3. Total Search Results

You can see total search results of post/product.

3.1 Total Results Text

You can set Total Result (Message) text.

1. Select Type

You can select type between Taxonomy or ACF for selected source.

1.1 Taxonomy

You can search your post taxonomy filter wise using its related option.

1.2 ACF Connection

You can search your post ACF connection filter wise using its related option.

Select Taxonomy

We have given six taxonomy types of the post/product for the search filter. Select your desired taxonomy type of the post/product for the search filter.

You can apply filter on your post selected taxonomy wise.

The types we provided are:

1. Category
2. Post Tag
3. Nexter Builder Category

4. Product Category
5. Product Tag
6. Product Attributes

Select Attributes

We have given two attributes types of the post/product for the search filter. Select your desired attribute type of the post/product for the search filter.

You can apply filter on your post selected attribute wise.

The types we provided are:

1. Color
2. Size

Step 1: Go to “The Plus Settings” from the WordPress Dashboard and press “Extra Options” to enable “Woo Commerce Swatches” for your widgets taxonomy.

Step 2: Scroll the page and enable “Woo Commerce Swatches” then you can see the “Attribute” option under “Product“.

Step 3: Go to “Products” from the WordPress Dashboard and press “Attributes” and you can add Color and Size for your widget.

Step 4: Go to “Products” from the WordPress Dashboard and Edit any Product for color and size which you can filter that product for your widget.

Step 5: Scroll the Page and set that Product color and size from the Attributes option then you can see that color-size-related product for your widget.

ACF Key

You can put the ACF key and find the post ACF filter-wise.

ACF Color Picker

You can put the acf color picker key and find the post acf filter-wise.

Placeholder Text

You can set Placehoder text.

Generic Filters

We have given seven types of generic filters for the filter of your post/product.

By enabling generic filters options one by one you can filter your post/product selected type wise.

You can search and filter your post/product title-wise.
You can search and filter your post/product content-wise.
You can search and filter your post/product permalink-wise.
You can search and filter your post/product excerpt content-wise.
You can search and filter your post/product category-wise.
You can search and filter your post/product tag-wise.
We have given two types of search for the search filter menu. Select your desired type of search for the search filter menu.
The types we provided are:
1. Full Match :- You have to type only the all alphabet of any word. you can type only ‘Plus Addon’ Alphabet For Exp. Plus Addon
2. Default :- You have to type only the first alphabet of any word. you can type only ‘P’ Alphabet For Exp. Plus Addon

Show Lable

By enabling this option you can see start date and end date label for the date picker.

First Lable

You can set first (start) label text.

Second Lable

You can set second (end) label text.

Border Style

You can select date picker border style between default and inline.

Select Media

You can select none, icon and image as media option of tabbing filter for woo sort filter option.

Icon Library

You can choose icon for woo sort filter category.

Choose Image

You can choose image for woo sort filter category.

Default Title

You can set default title of selected taxonomy for the selected source.

Layout

You can select defult title layout between style 1 or style 2 of selected taxonomy for the selected source.

Show Image

By enabling this option you can see post/product image for selected source.

Woo Sorting

By enabling this option you can see filter category sort option of your product for woo filter type (commerce).

Select (Woo Filters Select)

We have given five sort options of the product for the woo. Select your desired option of the product for the woo.

You can sort product filter wise and select more than one options too.

The options we provided are:

1. Featured
2. On Sale
3. Top Sales
4. In Stock
5. Out of Stock

Show Count

By enabling this option you can see counter number for the filter type.

Show Tick Icon

By enabling this option you can see tick icon of tabbing filter for the wp filter type.

Show Child Category

By enabling this option you can see child category.

Maximum Price

You can set product maximum price for the range slider.

Minimum Price

You can set product minimum price for the range slider.

Steps

You can set step count for the range slider.

Show More

We have given some options of show more button for the filter of your post/product.

By using its options you can see and filter your post/product selected type wise.

By enabling options of show more button one by one you can see and filter your post/product selected type wise.
You can set number of post/product display as a default.
You can set show more filter button text.
You can set show less filter button text.
By enabling this option you can see scroll hight option.
You can set hight of the scroll line.

Tooltip

By enabling this option you can see a tooltip over the selected taxonomy for the selected sources.

Desktop Column

Set the number of listing columns for the selected source to be displayed on the desktop.

Tablet Column

Set the number of listing columns for the selected source to be displayed on the tablet.

Mobile Column

Set the number of listing columns for the selected source to be displayed on the mobile.

Heading Setting

You can see which option you want to see in post/product heading results of selected sources for filter type by enabling it one by one in this setting.

By enabling this option you can see taxonomy heading on your post/product.
You can set heading title text.
You can set post / product layout position between default and inline.
You can set width of title label for an inline layout.
By enabling this option you can disable toggle button.
By enabling this option you can see open the default toggle button.
By enabling this option you can see icon option.
You can choose taxonomy title icon for the post/product.

2) Columns Manage

You can set the number of columns for different types of screen layouts.

Set the number of listing columns to be displayed on the desktop.
Set the number of listing columns to be displayed on the tablet.
Set the number of listing columns to be displayed on the mobile.
Set the space between your columns. We recommend 15-20px.
Set the margin for the columns.

3) Extra Option

Filter Toggle Button

We By enabling this option you can see all options of the filter toggle button.have given some options for the filter toggle button using that you can customize the filter toggle button.

By enabling this option you can see all options of the filter toggle button.
You can set the filter button number-wise.
You can set the button alignment left, center, and right.
You can set the filter button position between relative or fix.
You can set show more button text.
You can set show less button text.
You can select the search button icon option from the none, icon, image.
You can choose the filter button icon.
You can choose the filter button image.
You can select the button icon position where you want to show.

URL Parameter

When your post result is not found that time you can see a post not found message. You can set custom post not found message.

Filter Tag Title Enable

When your post result is not found that time you can see a post not found message. You can set custom post not found message.

Post Not Found Message

When your post result is not found that time you can see a post not found message. You can set custom post not found message.

2. Style

The Style tab is used for customizing the look of all the Search Filters widget components such as Title, Alphabet, Check Box, Date Picker, Drop Down, Radio Button, Range Slider, Search Input, Tab Button, Woo Button Field, Woo Color Field, Woo Image Field, Woo Rating, Woo Tooltip, Filter Tag, Filter Reset Button, Total Result (Filter Meta), Show More / Show Less, Filter Toggle Button and Background Option.

Title Style

Set Padding, Margin, Typography, Color, Toggle Icon Color, Background, Border, Border Radius and Box Shadow for the Title.

Alphabet Style

Set Padding, Margin, Typography, Color, Background, Border, Border Radius, Box Shadow and Box Options for the Alphabet.

Check Box Style

Set Check Size (width, Height), Offset Left, Background, Border, Border Radius, Select Checkbox Icon Options, Label Options, Counter Options, Toggle Icon Options, Image Options, Scroll Bar Options and Box Options for the Check Box.

Date Picker Style

Set Box Options (Padding), Lable Option (Typography, Padding, Color), Date picker Option (Typography, Inner Padding, Placeholder Color, Background, Border, Box Shadow, Icon Opacity, and Date picker Box Options) for the Date Picker.

Drop Down Style

Set Padding, Margin, Width, Typography, Color, Background, Border, Border Radius, Box Shadow, Drop Down Inner Options, Counter Options, Image Options, and Scroll Bar Options for the Drop Down.

Radio Button Style

Set Size, Offset Left, Color, Border, Border Radius, Radio Icon Options, Label Options, Counter Options, Toggle Icon Options, Image Options, Scroll Bar Options, and Box Options for the Radio Button.

Range Slider Style

Set Padding, Margin, Width, Line Color, Active Line Color, Button Color, Button Border Radius, and Tooltips Options for the Range Slider.

Search Input Style

Set Padding, Margin, Typography, Placeholder Color, Text Color, Icon Color, Background, Border, Border Radius, Box Shadow and Box Options for the Search Input.

Tab Button Style

Set Padding, Margin, Typography, Text Color, Background, Border, Border Radius and Counter Options, Image Options, Tick Icon Options, Scroll Bar Options, Box Options for the Tab Button.

Woo Button Field Style

Set Padding, Margin, Size, Border, Border Radius and Counter Options for the Woo Button Field.

Woo Color Field Style

Set Padding, Margin, Size, Border, Border Radius and Box Options for the Woo Color Field.

Woo Image Field Style

Set Padding, Margin, Border, Border Radius, Box Shadow and Box Options for the Woo Image Field.

Woo Rating Style

Set Padding, Margin, Star Color, Star Background Color, Border, Border Radius, Box Shadow, and Box Options for the Woo Rating.

Woo Tooltip Style

Set Padding, Margin, Top Offset, Text Color, Arrow Color, Background, Border and Box Shadow for the Woo Tooltip.

Filter Tag Style

Set Padding, Margin, Text Typography, Icon Typography, Text Color, Icon Color, Background, Border, Border Radius for the Filter Tag.

Filter Reset Button Style

Set Padding, Margin, Typography, Color, Icon Color, Background, Border, Border Radius and Box Shadow for the Filter Reset Button. ,

Total Result (Filter Meta) Style

Set Text Alignment, Padding, Margin, Typography, Text Color, Background, Border, Border Radius and Box Shadow for the Total Result (Filter Meta).

Show More / Show Less Style

Set Show More Alignment, More Text Padding, More Text Margin, Typography, Show More Color, Show Less Color, Background, Border, Border Radius and Box Shadow for the Show More / Show Less.

Filter Toggle Button Style

Set Padding, Margin, Typography, Icon or Image Size, Text Color, Icon Color, Background, Border, Border Radius, Box Shadow and Media Padding for the Filter Toggle Button.

Background Option Style

Set Padding, Margin, Background, Border, Border Radius, Box Shadow and Backdrop Filter Options for the Background Option.

Preview

Here you can see with details how the Style option of the Search Filters Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?