---
title: How To Use the Product Filters Widget By Wow Elements Pro
description: "The [Product Filters](https://wowelements.com/widgets/product-filters-widget-for-elementor/) widget from [Wow Elements](https://wowelements.com/) Pro is a powerful tool for adding advanced filtering options to your WooCommerce product listings. It allows customers to filter products based on categories, attributes, prices, ratings, and other available options, making it…"
url: "https://wowelements.com/docs/product-filters-widget/"
updated: "2026-09-17"
category: Pro Widgets Customization Guide
tags:
  - Elementor
  - Elementor Addon
  - Elementor Templates
  - Elementor Widgets
---

# How To Use the Product Filters Widget By Wow Elements Pro

The [Product Filters](https://wowelements.com/widgets/product-filters-widget-for-elementor/) widget from [Wow Elements](https://wowelements.com/) Pro is a powerful tool for adding advanced filtering options to your WooCommerce product listings. It allows customers to filter products based on categories, attributes, prices, ratings, and other available options, making it easier to find the products they need. With flexible filter, layout, and styling controls, you can easily customize the product filters to match your store’s branding and improve the overall shopping experience. In this documentation, we will guide you through how to use and customize the Product Filters widget in Wow Elements Pro.

## Enable the Product Filters Widget

![Enable the Product Filters Widget](https://wowelements.com/wp-content/uploads/2026/09/Enable-the-widget-1-1024x533.webp)

To use the **Product** **Filters** by Wow Elements Pro, first, you have to enable the widget.

1. Go to **WordPress Dashboard → Wow Elements Pro Plugin** dashboard.
2. Then Click the **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

![Inserting the Product Accordion widget](https://wowelements.com/wp-content/uploads/2026/09/Insertings-the-widget-01-1024x554.webp)

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 Product Grid widget of Wow Elements. Here, we choose the Product Grid widget to show the Product Filters widget features. So, you have to enable the widget and then drag & drop the widget in the same container where you have placed the Product Filters. Let's see how -

![Inserting the Product Grid widget](https://wowelements.com/wp-content/uploads/2026/09/Insertings-the-widget-02-1024x557.webp)

4. Go to the **Elementor Editor** Page and Hit the **“+”** icon Button.
5. Search the **Product Grid** widget.
6. Drag the widget and drop it on the editor page

## **Content Tab Overview**

### **Filters Section**

Go to **Content → Filters**

![Filters Section](https://wowelements.com/wp-content/uploads/2026/09/C-Filters-01-1024x633.webp)

**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**

![Filters Section - Filter Order Sub Section 01](https://wowelements.com/wp-content/uploads/2026/09/C-Filters-02-1024x610.webp)

**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.

![Filters Section - Filter Order Sub Section 02](https://wowelements.com/wp-content/uploads/2026/09/C-Filters-03-1024x550.webp)

In the Filters order, we have several options. 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.

![Filters Section - Filter Order Sub Section 03](https://wowelements.com/wp-content/uploads/2026/09/C-Filters-04-1024x585.webp)

Now let’s proceed to the **Category Tab –**

**1.  Filter Type: **You can change the filter type from here. Here we selected the type as categories.
**2. Custom Title: **You can change the field title with this option.

![Filters Section - Filter Order Sub Section 04](https://wowelements.com/wp-content/uploads/2026/09/C-Filters-05-1024x578.webp)

Now, let’s proceed to the** Tags Tab –**

**1.  Filter Type: **You can change the filter type from here. Here, we selected the type as tags.
**2. Custom Title: **You can change the filed title with this option.

![Filters Section - Filter Order Sub Section 05](https://wowelements.com/wp-content/uploads/2026/09/C-Filters-06-1024x593.webp)

Now, let’s proceed to the** Reviews Tab –**

**1.  Filter Type: **You can change the filter type from here. Here, we selected the type as reviews.
**2. Custom Title: **You can make changes to the title field with this option.

## **Work with The Style Tab**

### **Filter: Header Title Section**

Go to **Style **→** Filter : Header Title**

![Filter: Header Title Section](https://wowelements.com/wp-content/uploads/2026/09/Filter-Header-Title-1024x637.webp)

**1. Color:** You can make changes to the header title text color with this option.
**2. Border Color:**You can make changes to 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 & gaps between the elements.

### **Filter: Items Section**

Go to **Style **→** Filter : Items**

![Filter: Items Section - wrap 01](https://wowelements.com/wp-content/uploads/2026/09/Filter-Items-Wrap-01-1024x573.webp)

In this section, we have four more tabs. These are Wrap, Titles, List & Count. Let's start describing those one by one.

**1. Background Type:** You can change the background type to be classic or gradient with this option. Here, we have selected the background type as Classic.
**2. Color:**You can make changes to the background color with this option.
**3. Image:**You can make changes to the background image with this option.
**4. Padding:**You can adjust the inner space with this option.

![Filter: Items Section - wrap 02](https://wowelements.com/wp-content/uploads/2026/09/Filter-Items-Wrap-02-1024x575.webp)

**5. Border Type:** You can add and change the border types with this option.
**6. Border Width:**You can set the thickness of the border with this option.
**7. Border Color:** You can make changes to the border color with this option.
**8. Border Radius:** You can control the roundness of the border with this option.
**9. Box Shadow:**You can add a shadow effect to the item field with this option.
**10. Items Gap:**You can adjust the space between the items with this option.
**11. Thumb Color:**You can make changes to the thumb color with this option.
**12. Track Color:** You can make changes to the track color with this option.

![Filter: Items Section - Titles](https://wowelements.com/wp-content/uploads/2026/09/Filter-Items-Title-1024x618.webp)

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.

![Filter: Items Section - List 01](https://wowelements.com/wp-content/uploads/2026/09/Filter-Items-List-01-1024x595.webp)

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. Review Color:** You can make changes to the review start color with this option.
**4. Typography: **Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

![Filter: Items Section - List 02](https://wowelements.com/wp-content/uploads/2026/09/Filter-Items-List-02-1024x587.webp)

**1. Background Color: **You can change the checkbox background color with this option.
**2. Border Color: **You can change the checkbox border color with this option.
**3. Checked Background: **You can change the checked background color with this option.
**4. Checkmark color: **You can check the checkmark color with this option.
**5. Checkbox Size:** This option allows you to make changes to the checkbox size.
**6. Border Radius:** You can control the checkbox border roundness with this option.
**7. Item Gap: **You can adjust the space between the checkbox with this option.

![Filter: Items Section - Count](https://wowelements.com/wp-content/uploads/2026/09/Filter-Items-Count-1024x583.webp)

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**

![Filter : Price Section - Slider](https://wowelements.com/wp-content/uploads/2026/09/Filter-Price-Slider-1-1024x612.webp)

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

**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.

![Filter : Price Section - Input 01](https://wowelements.com/wp-content/uploads/2026/09/Filter-Price-Input-01-1024x585.webp)

Now, let’s proceed to the** Input Tab –**

**1. Label Color: **You can change the label 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. Text Color:** You can change the text color with this option.
**4. Background Color:** You can change the background color with this option.
**5.** **Border Type:** You can add and change the border types with this option.

![Filter : Price Section - Input 02](https://wowelements.com/wp-content/uploads/2026/09/Filter-Price-Input-02-1024x532.webp)

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

### **Filter :  Reset Button Section**

Go to **Style → Filter : Reset Button**

![Filter :  Reset Button Section - Normal ](https://wowelements.com/wp-content/uploads/2026/09/Filter-Reset-Button-1024x563.webp)

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

**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 and change the border types with this option.
**6. Border Width:** You can set the thickness of the border with this option.
**7. Border Color:**You can make changes to the border color with this option.
**8. Border Radius:**You can control the roundness of the border with this option.
**9. Box Shadow:**You can add a shadow effect to the reset filter button with this option.

![Filter :  Reset Button Section - Hover](https://wowelements.com/wp-content/uploads/2026/09/Filter-Reset-Button-02-1024x572.webp)

Now, Let’s Proceed to the** Hover Tab –**

**1. Text Color: **You can change the button text hover color with this option.
**2. Background Color: **You can change the background hover color with this option.
**3. Border Color:** You can change the border color with this option.
**4. Box Shadow: **You can add a hover shadow effect with this option.
**5. 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

You can also watch the video tutorial to learn more about the **Product Filters** Widget. Please visit the [demo page](https://wowelements.com/widgets/product-filters-widget-for-elementor/) for examples.

Thanks for being with us.