Filter Widget

The Filter widget in the 10Web Builder lets you add powerful filtering to your WooCommerce product pages. Customers can filter products by attributes like price, category, stock, and more—without page reloads. This guide shows you how to create, customize, and style filters seamlessly.

Adding Filter widget

1. On a page with a product widget, drag and drop the Filter widget.
2. Click Add a filter to open the filter builder popup.

Content tab

1. Click Add new filter to launch the filter builder popup.
2. Enter a Filter name and click Add field to begin configuring filter options.
3. Choose the filter field type and follow the steps to set it up.

Available filter field types

When adding a field, click Add element, then choose from the available field types. Each type has a unique behavior and data source setup. The preview updates live on the right-hand side to show how the filter will appear on your site.

Checkbox

Use for multi-select filters such as brands, sizes, or stock.

• Title: Enter a field name.

• Source of options:

  Variations: Pulls values like size, color from product attributes.

  Collections: Uses product tags, shows “All collections” label.

  Categories: Uses product categories, shows All, Categories and Subcategories label.

  Stock Status: Displays In stock, Out of stock, On backorder.

  Sale: Filters products currently on sale.

• Preview: Check how it will appear live.
• Save: Click Apply, then Save from the main filter screen.
   

Radio list

Use for single-select filters like selecting one storage option or category.

• Title: Enter a field name.
• Source of options: Same as Checkbox.
• Preview: Displays circular radio buttons for each value.
• Save: Click Apply, then Save.

Dropdown

Compact single-select filter that saves space using a dropdown list.

• Title: Enter a field name.
• Source of options: Same as Checkbox.
• Preview: Expands on click to show options.
• Save: Click Apply, then Save.

Price slider

Adds a range filter for prices using a slider.

• Title: Enter a field name.
• Min / Max price (optional): Define specific limits or leave blank to auto-calculate.
• Step value: Set the price interval (e.g., 10).
• Limit: Only one Price slider allowed per filter setup.
• Rounding: Values are adjusted automatically to nearest divisible step.
• Preview: Live slider reflects your settings.
• Save: Click Apply, then Save.

Box

Use for multi-select filters with a button-style layout (e.g., size).

• Title: Enter a field name.
• Source of options: Same as Checkbox.
• Preview: Displays each option as a rectangular button.
• Save: Click Apply, then Save.

Color list

Use for multi-select color filtering based on product variations.

• Title: Enter a field name.
• Source of options: Choose Variations, then select a color attribute.
• Display: Choose between color swatches or text labels.
• Preview: Shows the color palette dynamically.
• Save: Click Apply, then Save.

Pillbox

Stylish multi-select filter with rounded tags.

• Title: Enter a field name.
• Source of options: Same as Checkbox.
• Preview: Displays each selected option as a tag with remove icon.
• Save: Click Apply, then Save.

Expand Filter

Controls whether the filter section appears expanded or collapsed when the page loads.

• Yes: The filter widget will be expanded on page load.
• No: The filter will be collapsed by default.

Select Filter

Allows you to use or modify previously saved filters.

• Select filter: Choose an existing saved filter from the dropdown.
• Edit filter: Click this link to modify the selected filter in the builder popup.

Filter Without Page Reloading

Configure AJAX filtering behavior and clean URL support.

• Filter without Page Reloading: Enables AJAX filtering so the product list updates without reloading the entire page.
• Pretty URLs: Toggle this to create user-friendly URLs when filters are applied.

Working with filters

1. Fields appear listed in the main edit screen—toggle ON/OFF or remove as needed.
2. Filter preview updates live with changes.
3. Click Save on the main filter popup to store your filter setup.
4. Refreshing without saving shows an alert—you'll lose unsaved changes.
5. After saving, the filter applies to all product widgets on the page.

Admin-level filter management

• In WP Admin, open WooCommerce → Filters to add or view filters.
• Filters made in Admin are available in the builder popup.
• Filters created in builder will appear in Admin.

Style tab

General

• Title Alignment & Typography: Set the alignment (left, center, right) and adjust the typography for field titles.
• Title Color & Field Spacing: Customize the title color and define spacing between filter fields using the slider or input.
• Collapse, Expand, and Reset Typography: Adjust the typography for the collapse, expand, and reset controls (Normal and Hover states).
• Collapse, Expand, and Reset Text Color: Set the color of the text for collapse, expand, and reset actions.
• Collapse, Expand, and Reset Icon Color: Set the icon color for collapse, expand, and reset actions.
• Label Border Radius: Set individual border radius values (Top, Right, Bottom, Left) for field labels to achieve rounded corners.
• Filtered Tag Typography: Customize the typography of filtered tags.
• Filtered Tag Text Color: Set the text color for filtered tags.
• Filtered Tag Background Color: Define the background color of filtered tags.
• Filtered Icon Color: Set the icon color used in filtered tags.

Radio & Checkbox

• Typography: Customize the typography for radio and checkbox labels across Normal, Hover, and Active states.
• Text Color: Set the text color for each state.
• Radio Icon Color: Define the icon color for radio buttons.
• Checkbox Icon Color: Define the icon color for checkboxes.
• Icon Background Color: Customize the background color of icons across Normal, Hover, and Active states.

Price Slider

• Typography: Set the typography for price slider labels and values.
• Text Color: Define the text color used within the price slider.
• Slider Handle Color: Set the color of the slider handle.
• Slider Track Color: Customize the color of the slider track.
• Slider Range Color: Define the color of the selected range within the slider.

Color Filter

• View Type: Choose the layout type such as List or Grid.
• Typography & Text Color: Set the font style and color for filter options.
• Border Radius: Adjust the border radius for rounded corner styling.

Box

• Typography, Text Color & Background Color: Customize the font, text color, and background color.
• Border Radius: Define rounded or sharp corners by adjusting the border radius.

Pillbox & Dropdown

• Typography: Set the typography for pillbox and dropdown text.
• Option Text Color: Define the text color used for dropdown options in the default state.
• Option Hover Background Color: Set the background color that appears when hovering over dropdown options.
• Field Background Color: Customize the background color of the dropdown field.
• Field Border Color: Define the border color of the dropdown field.
• Field Border Radius: Set the border radius (in pixels) to control the roundness of the dropdown field corners.
• Pillbox Tag Background Color: Set the background color for tags displayed in the pillbox field.
• Pillbox Tag Icon Color: Define the color of the icon inside each pillbox tag.
• Pillbox Tag Text Color: Customize the text color used inside the pillbox tags.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.