In this documentation, we will discuss the customization of the Product Filters widget, brought to you by the Ultimate Sto Kit addon for Elementor.

Enable The Product Filters Widget

To use the Product Filters widget from Ultimate Store Kit, first, you have to enable the widget.

1. Go to WordPress dashboard > Ultimate Store Kit Plugin dashboard.
2. Then, Click the Core Widgets Tab.
3. Search the Product Filters Widget Name.
4. Enable the Product Filters Widget.
5. Hit the Save Settings Button.

Inserting the Product Filters widget

1. Go to the Elementor Editor Page and hit the “+” icon Button.

2. Search the Product Filters widget.

3. Drag the widget and drop it on the editor page.

Note: The Product Filters widget works with any grid widget of Ultimate Store Kit. Here, we choose the Florence Grid widget to show the Product Filters widget features. If you want, then you can choose another grid widget that you like.

Work With The Content Tab

Filters Section

Go to Content > Filters

1. Show Filters Title: Enable the switcher to show the Filters title to the audience.
2. Filters Title: You can change the filters title text with this option.

Filter Order Sub Section

1. Close Item: You can delete the Slider item by clicking the Close icon button.
2. Copy Item: This option lets you copy the same item.
3. Add Item: You can add a new item by clicking the “+”Add Item button.
4. Reset Button Text: You can change the reset button text with this option.

In the Filters order, we have 4 filter sections. These are Price, Categories, Tags & Attributes. Let’s start with the Price Section –

1. Filter Type: You can change the filter type from here. The types are Price, Categories,Tags & Attributes. Here we selected the type as Price.
2. Custom Title: You can add the title text with this option.
3. Min Price: You can add the minimum price to show products with this option.
4. Max Price: You can add the maximum price to show products with this option.
5. Step:  The Step option controls how much the price changes when you move the slider. The number you will set it will move each time as per the maximum price multiplication.

Now let’s proceed to the Category Tab –

6.  Filter Type: You can change the filter type from here. The types are Price, Categories, Tags & Attributes. Here we selected the type as categories.
7. Custom Title: You can change the title with this option.

Now, let’s proceed to the Tags Tab –

8.  Filter Type: You can change the filter type from here. The types are Price, Categories, Tags & Attributes. Here, we selected the type as tags.
9. Custom Title: You can change the title with this option.

Last, let’s proceed to the Attributes Tab –

10. Filter Type: You can change the filter type from here. The types are Price, Categories, Tags & Attributes. Here, we selected the type as attributes.
11. Custom Title: You can change the title with this option.
12. Select Attributes: You can select the attributes from this option.

(Note: The Attributes Tab will work only when you have products with variation swatches also if you leave the custom title filed black then the selected attributes will show with their original title.)

Work with The Style Tab

Filter: Header Title Section

Go to Style > Filter : Header Title

1.  Color: You can change the header title color with this option.
2. Border Color: You can change the border color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
4. Margin: This option allows you to adjust the space & create gaps between elements.

Filter: Items Section

Go to Style > Filter : Items

In this section, we have 4 tabs. These are Wrap, Titles, List & Count. Let’s start with the Wrap Tab – 
1. Background Type: You can select the background type to classic or gradient with this option. Here we selected the classic background.
2. Color: You can change the background color with this option.
3. Image: You can change the background image with this option.
4. Padding: This option allows you to adjust the inner space and gaps of the items.

5. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
6. Border Width: Set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Border Radius: This option controls the roundness of the border.

9. Box Shadow: While working with this option, you will get three more options (Blur, Horizontal & Vertical). Blur Controls how sharp or soft the shadow will appear. By using the horizontal option you can move the shadow left or right and by using the vertical option you can move the shadow up or down.
10. Items Gap: You can adjust the items gap with this option.
11. Thumb Color: You can change the thumb color with this option.
12. Track Color: You can change the track color with this option.

Now, let’s proceed to the Titles Tab –

1. Color: You can change the title color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3.Margin: This option allows you to adjust the space & create gaps between elements.

Now, let’s proceed to the List Tab –

1. Text Color: You can change the list text color with this option.
2. Active Text Color: You can change the active text color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

4. Background Color: You can change the checkbox background color with this option.
5. Border Color: You can change the checkbox border color with this option.
6. Checked Background: You can change the checked background color with this option.
7. Checkmark color: You can check the checkmark color with this option.

8. Checkbox Size: This option allows you to make changes to the checkbox size.
9. Border Radius: You can control the checkbox border roundness with this option.
10. Item Gap: You can adjust the space between the checkbox with this option.

Now, let’s proceed to the Count Tab –

1. Color: You can change the count text color with this option.
2. Background Color: You can change the count background color with this option.
3. Typography: You can change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

4. Color: You can change the count text’s hover color with this option.
5. Background Color: You can change the count’s background hover color with this option.
6. Active Color: You can change the count text’s active color with this option.
7. Active Background: You can change the count’s active background color with this option.

Filter : Price Section

Go to Style > Filter : Price

In this section, we have two tabs. These are Slider & Input. Let’s explore the Slider Tab – 

1. Bar Color: You can change the bar color with this option.
2. Range Color: You can change the range color with this option.
3. Handle Color: You can change the handle color with this option.
4. Focus Color: You can change the focus color with this option.

Now, let’s proceed to the Input Tab –

5. Label Color: You can change the label color with this option.
6. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
7. Text Color: You can change the text color with this option.
8. Background Color: You can change the background color with this option.

9. Border Type: You can add a border around the input text with this option.
10. Border Width: Set the thickness of the border with this option.
11. Border Color: You can change the border color with this option.
12. Focus Border Color: You can change the focus border color with this option.

13. Focus Shadow Color: You can change the focus shadow color with this option.
14. Border Radius: This option controls the roundness of the border with this option.
15. Margin: This option allows you to adjust the space & create gaps between elements.

Filter :  Reset Button Section

Go to Style > Filter : Reset Button

In this tab, we have two more sub section. One is Normal and the other is Hover. Let’s start with the Normal sub section – 

1. Text Color: You can change the button text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Background Color: You can change the background type with this option.
4. Padding: You can adjust the inner space and gaps of the reset button with this option.

5. Border Type: You can add a border to the reset button with this option.
6. Border Width: Set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Border Radius: This option controls the roundness of the border with this option.
9. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.
Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.
Box Shadow Color: This lets you change the Box Shadow color.

Now, Let’s Proceed to the Hover Tab –

10. Text Color: You can change the button text hover color with this option.
11. Background Color: You can change the background hover color with this option.
12. Border Color: You can change the border color with this option.
13. Box Shadow: You can add a hover shadow effect with this option.
14. Focus Border Color: You can change the focus border hover color with this option.

All done! You have successfully customized the Product Filters widget on your website. 

Video Assist

The video will come soon. Please visit the demo page for examples.

Thanks for being with us.