DiviMerc Product Filters module lets customers filter WooCommerce products by category, price, attributes, ratings, and more. Add a Filter Item for each option you want to offer, such as color or price, and display the filters in a vertical, horizontal, or off-canvas layout.
Important Note:
- Your page must contain a DiviMerc Product Grid or Divi Woo Products module to display filtered results.
- Each Product Filter contains individual Filter Items. Add a separate Filter Item for each filter you want to display.
- You can use the filter on a page without a product listing by setting a Results Page URL to redirect customers to the page containing the products.
Content Tab #
The Content tab lets you add filter items, choose the filter layout, connect product listings, manage filtering behavior, and customize labels.
Filter Items #
- Show Result Count: Display the number of products matching the applied filters above the filter items.
- Result Count Format: Customize the result count text. Use {count} for the number of products that match the current filters and {total} for the number of products in the listing before filtering. For example, Showing {count} of {total} products.
- Show Active Filters: Display a removable label for each applied filter, along with a Clear All option, above the filter items.
- Show Reset Filter Button: Display a button below all filter items to clear applied filters. The button appears only when customers apply a filter. (Not available in the Off-canvas layout and filter with apply button.)
- Add Filter Items: Add, remove or duplicate individual filters to control which filtering options appear. Each Filter Item has its own Content and Design settings, explained in the Filter Item Settings section below.
Layout & Behaviour #
- Target Modules: Choose one or more Product Grid or Divi Woo Products modules to filter. Leave this field empty to filter the first Product Grid on the page.
- Layout: Choose how to display the filter items.
- Vertical: Stack filter items in one column.
- Horizontal: Arrange filter items in rows.
- Number Of Columns: Choose Auto or set 1 to 6 columns.
- Off-canvas: Show filter items in a panel that opens when customers click the Filter button.
- Off-Canvas Side: Choose whether the panel slides in from the Left or Right.
- Filter Button Label: Customize the text on the button that opens the panel.
- Panel Title: Customize the title at the top of the panel.
- Apply Filters: Choose when the product results update.
- Instantly on change: Update results when customers select or change a filter.
- With an Apply button: Update results when customers click Apply.
- Apply Label: Customize the Apply button text.
- Clear Label: Customize the Clear All button text. (Available in the Off-canvas layout or when Apply Filters is set to With an Apply button.)
- Scroll To Grid After Filtering: Scroll to the product listing after filters are applied.
- Empty Filter Items: Choose how to handle filter options with no matching products.
- Disabled: Keep unavailable options visible but prevent customers from selecting them.
- Hidden: Hide unavailable options (when Hide Values for an option has No Products). Hide the entire item if no options remain.
- Results Page URL: Enter the URL of the product listing page. (Use when the filter is on a different page.)
Reset Filter #
This setting group appears when Show Reset Filter Button is enabled.
- Button Text: Customize the reset button label. The default is "Reset Filters."
- Use Icon: Add an icon to the reset button.
- Only Icon: Display the icon by itself.
- Icon: Choose an icon for the reset button.
- Icon Position: Place the icon Before Text or After Text. Available when Only Icon is disabled.
Loader #
- Loader Content: Choose Text only, Loader only, Loader with text, or None to control what appears while filtered products load.
- Loader: Choose Spinner, Dual Ring, Bouncing Dots, Pulse, Bars, Ripple, or Orbit as the loading animation. (Available when Loader Content is set to Loader only or Loader with text.)
- Loader Text: Customize the loading message. (Available when Loader Content is set to Text only or Loader with text.)
Background: Customize the background of the entire module using Divi's standard background settings.
Element Label: Set a custom admin label to identify the module in the Divi Visual Builder.
Design Tab #
The Product Filters module's Design tab lets you customize the overall layout, filter items, selection controls, buttons, active filters, and loading appearance.
Panel: Customize the filter panel’s border, box shadow, spacing, and background.
Filter Item #
- Gap Between Items: Adjust the spacing between filter items.
You can also customize the border, spacing, and background of filter items.
Item Header #
- Collapse Icon Color: Set the color of the expand and collapse icon.
- Collapse Icon Size: Adjust the size of the icon.
You can also customize the title typography, border, spacing, and background.
Item Body #
- Max Height: Set the maximum height of the filter item body.
You can also customize the border, spacing, and background.
Results Bar #
Available when Show Result Count or Show Active Filters is enabled.
- Inline: Display the result count and active filters side by side. Disable it to stack them.
- Active Filters First: Display active filters before the result count. Available when both Show Active Filters and Show Result Count are enabled.
- Alignment: Choose Left, Center, Right, or Justify Between.
These three settings can be adjusted separately for each device. You can also customize the results bar’s border, spacing, and background.
Active Filters #
Available when Show Active Filters is enabled.
Chips #
- Remove Icon Color: Set the color of the icon used to remove an applied filter.
- Remove Icon Size: Adjust the size of the remove icon.
You can also customize the chip text, border, and spacing.
Clear All #
Customize the Clear All text, border, spacing, and background.
Filter Button #
Available on devices where Layout is set to Off-canvas.
Button #
- Icon Color: Set the color of the filter button icon.
- Icon Size: Adjust the size of the icon.
You can also customize the button text, border, spacing, and background.
Count Badge #
Customize the count badge’s text, border, spacing, and background.
Off-Canvas Panel #
Available on devices where Layout is set to Off-canvas.
Header #
- Close Icon Color: Set the color of the panel’s close icon.
- Close Icon Size: Adjust the size of the close icon.
You can also customize the title typography, border, spacing, and background.
Body #
- Panel Width: Adjust the width of the panel.
- Overlay Color: Set the color of the overlay behind the panel.
- Overlay Blur: Adjust how much the page behind the panel blurs.
You can also customize the body’s spacing and background.
Footer #
Customize the footer’s border, spacing, and background. You can also style the text, border, spacing, and background of the Apply and Clear All buttons. The Apply button appears when Apply Filters is set to With an Apply button.
Apply & Clear Buttons #
Available in the Vertical and Horizontal layouts when Apply Filters is set to With an Apply button.
- Apply: Customize the appearance of the Apply button.
- Clear All: Customize the appearance of the Clear All button.
- Container: Customize the border, box shadow, spacing, and background of the row that holds both buttons.
Result Count: Customize the result count typography. Available when Show Result Count is enabled.
Reset Filter #
Available when Show Reset Filter Button is enabled.
- Icon Color: Set the color of the reset button icon.
- Icon Size: Adjust the size of the icon.
- Icon Spacing: Adjust the spacing around the icon.
- Alignment: Align the reset button to the Left, Center, or Right.
The icon settings appear when Use Icon is enabled. You can also customize the button text, border, box shadow, and background. The button text settings are hidden when Only Icon is enabled.
Loader #
- Loading Overlay Color: Set the color of the overlay shown over the products while results load.
- Loading Overlay Blur: Adjust how much the products blur while results load.
- Products Opacity: Control how visible the products remain while results load.
- Loader Size: Adjust the size of the loading indicator. Set it to 0px to hide it.
- Loader Color: Set the color of the loading indicator.
You can also customize the loading text typography.
Disabled Items #
Available when Empty Filter Items is set to Disabled.
- Preview Disabled State: Preview all filter items in their disabled state in the builder.
- Opacity: Adjust how visible disabled options and fields are.
- Cursor: Choose the cursor shown when hovering over a disabled option or field.
You can also customize the option text for disabled options and fields. Border, box shadow, spacing, and background apply to the field when the entire filter item is disabled.
Sizing: Adjust the module's width, height, and alignment.
Spacing: Customize the module's margin and padding.
Border: Customize the border style, width, color, and corner radius.
Box Shadow: Add shadow effects to the module.
Filters: Apply visual effects such as brightness, contrast, and saturation.
Transform: Scale, rotate, move, or skew the module.
Animation: Apply animation effects and customize their duration, delay, and other animation settings.
Advanced Tab #
The Advanced tab provides additional controls, including Custom CSS, Position, Visibility, Conditions, and other standard Divi settings. You can also apply custom CSS to the Panel, Item, and Option elements.
Filter Item Settings #
Each Filter Item controls a specific product filter, such as category, price, attributes, ratings, or stock availability. You can choose how filter values appear and customize each item's design separately.
Important Note:
- Filter Items can only be added inside the Product Filters module.
- Each Filter Item supports one filtering criterion. Add multiple items to offer different filters.
- Individual Filter Item design settings override the shared styles of the parent Product Filters.
Content Tab #
The Content tab lets you choose what to filter, select a field type, control filter values, and manage how each Filter Item appears.
Filter #
- Filter By: Choose what to filter. Options include Product categories, Product tags, Brands, Product attribute, Price, Rating, Stock status, On sale, Featured, Keyword search, and Sort by.
- Field Type: Choose how filter values appear. Available options depend on the selected Filter By.
- Product categories: Checkboxes, Radio buttons, Buttons / labels, Image swatches, Dropdown.
- Product tags: Checkboxes, Radio buttons, Buttons / labels, Dropdown.
- Brands: Checkboxes, Radio buttons, Buttons / labels, Image swatches, Dropdown.
- Product attribute: Checkboxes, Radio buttons, Buttons / labels, Colour swatches, Image swatches, Dropdown.
- Price: Range slider + inputs, Min / max inputs.
- Rating: Stars, Radio buttons, Dropdown.
- Stock status: Checkboxes, Radio buttons, Buttons / labels, Dropdown.
- On sale / Featured: Toggle switch, Checkboxes.
- Sort by: Dropdown, Radio buttons, Buttons / labels.
- Attribute: Select a global or local product attribute, such as color or size. (Available when Filter By is Product attribute.)
- Price Step: Set how much the price slider and inputs change with each adjustment. The default is 1. (Available when Filter By is Price.)
- Show Sub-Categories: Show or hide subcategories in the filter. (Available when Filter By is Product categories.)
- Only These Values: Select specific categories, tags, brands, or attribute values to display. Leave it empty to show all available values. (Available when Filter By is Product categories, Product tags, Brands, or Product attribute.)
- Order By: Sort filter values by Name, Product count, or Term order. Available for product categories, product tags, brands, and product attributes.
Note: Keyword search displays a search field without a separate Field Type setting. Global attributes are managed under Products > Attributes, while local attributes are configured for individual products.
Options #
The available settings depend on the selected Filter By and Field Type, such as categories, attributes, price, ratings, or keyword search.
- Allow Several Values: Let customers select multiple values. (Available for buttons and swatches on supported filters.)
- Match Products With: Choose Any selected value (OR) or All selected values (AND). (Available for categories, tags, brands, and attributes using checkboxes, or buttons and swatches with Allow Several Values enabled.)
- Show Product Counts: Show the number of matching products beside each value. (Available for supported value lists, Rating, On sale, and Featured. Colour swatches require Show Swatch Names.)
- Count Position: Place the count After Label or at the End. (Available for supported field types.)
- Count Format: Customize the count text using {count}.
- Hide Values With No Products: Hide values with no matching products. (When the parent’s Empty Filter Items setting is Disabled, values with no matches after filtering stay visible and disabled.)
- Show Swatch Names: Display names below swatches. (Available for Colour swatches and Image swatches.)
- Swatch Tooltip: Show value names on hover or keyboard focus. (Available for product attribute swatches when Show Swatch Names is disabled.)
- Show Star Rating: Display rating labels beside the stars. (Available when Rating uses Stars.)
- Gap: Adjust the spacing between filter values. (Available for checkboxes, radio buttons, buttons, swatches, and stars.)
- Show More After: Set how many values appear before the Show More link. Enter 0 to show all values. (Available for value lists and Rating, except dropdowns.)
- Search Placeholder: Customize the search field placeholder. (Available for Keyword search.)
- With Button: Add a search button. Customers can click it or press Enter to search. (Available for Keyword search.)
- Button Text: Customize the button label.
- Use Icon: Add an icon to the button.
- Only Icon: Display only the icon.
- Icon: Choose the button icon.
- Icon Position: Place the icon Before Text or After Text. (Available when Only Icon is disabled.)
- Option Text: Customize the label beside the filter control. (Available for On sale and Featured.)
- Dropdown "Any" Text: Customize the label for the unfiltered option. (Available for Dropdown.)
- Show Input Labels: Display labels above the minimum and maximum price inputs. (Available for Price.)
- Min Label: Customize the minimum price label.
- Max Label: Customize the maximum price label.
- Show Currency Symbol: Display the store’s currency symbol inside each price input. (Available for Price.)
Display #
- Show Title: Display the Filter Item title.
- Rename Title: Enter a custom title or leave it blank to use the default.
- Collapsible: Let customers click the title to expand or collapse the item.
- Start Collapsed: Collapse the item when the page loads.
Background: Customize the Filter Item background using color or gradient settings.
Element Label: Set a custom admin label to easily identify the Filter Item in the Divi Visual Builder.
Design Tab #
The Filter Item's Design tab lets you customize its individual appearance. These settings override the corresponding styles applied to all items in the parent Product Filters.
Title #
Available when Show Title is enabled.
- Collapse Icon Color: Set the color of the expand and collapse icon. (Available when Collapsible is enabled.)
- Collapse Icon Size: Adjust the size of the expand and collapse icon. (Available when Collapsible is enabled.)
You can also customize the typography, background, border, and spacing of the Filter Item title.
Header #
Customize the background, border, and spacing of the bar that holds the title and collapse icon. (Available when Show Title is enabled.)
Body #
- Max Height: Limit the height of the item body so longer option lists scroll within it.
You can also customize the body’s background, border, and spacing.
Counts: Customize the typography of product counts displayed beside filter values. (Not available for Image swatches, Dropdown, Range slider + inputs, or Min / max inputs.)
Checkboxes #
Available when Field Type is set to Checkboxes.
- Checkbox Size: Adjust the size of checkboxes.
- Checkbox Border Width: Adjust the thickness of checkbox borders.
- Checkbox Color: Set the color of unchecked checkboxes.
You can also customize the checkbox text, border, spacing, and background.
Selected Checkbox #
Available when Field Type is Checkboxes #
- Selected Checkbox Color: Set the color of selected checkboxes.
You can also customize the selected text, border, and background.
Radio Buttons #
Available when Field Type is Radio buttons.
- Radio Size: Adjust the size of radio buttons.
- Radio Border Width: Adjust the thickness of radio button borders.
- Radio Color: Set the color of unselected radio buttons.
You can also customize the radio text, border, box shadow, spacing, and background.
Selected Radio #
Available when Field Type is Radio buttons.
- Selected Radio Color: Set the color of selected radio buttons.
You can also customize the selected text, border, and background.
Buttons / Labels #
Available when Field Type is Buttons / labels.
- Display Behaviour: Choose how to arrange filter buttons.
- Default: Fit each button to its text.
- Justified: Stretch the buttons to fill each row.
- Full Width: Display one full-width button per row.
- Columns: Arrange buttons in columns.
- Number Of Columns: Choose how many columns to display.
- Content Alignment: Align button content left, center, or right, or spread it across the button with Justify Between. (Hidden when Content Position is set to End.)
You can also customize the button text, border, box shadow, spacing, and background.
Selected Button: Customize the text, background, border, and box shadow of selected buttons. (Available when Field Type is set to Buttons / labels.)
Swatches #
Available when Field Type is set to Colour swatches or Image swatches.
- Display Behaviour: Choose how to arrange swatches. (Available for Colour swatches when Show Swatch Names is enabled.)
- Default: Fit each swatch to its label.
- Justified: Stretch the swatches to fill each row.
- Full Width: Display one full-width swatch per row.
- Columns: Arrange swatches in columns.
- Number Of Columns: Choose how many columns to display.
- Swatch Size: Adjust the size of the swatches.
- Gap Between Swatches: Adjust the spacing between swatches.
- Tooltip Background: Set the tooltip background color. (Available when Swatch Tooltip is enabled.)
Use Swatch Border for the swatch outline and Border, Box Shadow, Spacing, and Background for the full option. Style the swatch name and tooltip text (when enabled).
Selected Swatch: Customize the border and box shadow of selected swatches. (Available when Field Type is set to Colour swatches or Image swatches.)
Dropdown Field #
Available when Field Type is Dropdown.
- Background Color: Set the background color of the dropdown field.
- Arrow Color: Customize the color of the dropdown arrow.
You can also customize the dropdown text, border, box shadow, and spacing.
Price Slider #
Available when Filter By is Price and Field Type is Range slider + inputs.
- Track Color: Set the color of the slider track.
- Track Height: Adjust the thickness of the slider track.
- Handle Border Color: Set the border color of the slider handles.
- Handle Color: Set the color of the slider handles.
- Handle Size: Adjust the size of the slider handles.
You can also customize the selected price range's fill color and handle box shadow.
Price Inputs: Customize the separator color, input text, currency symbol, border, box shadow, spacing, and background. You can also customize the input label typography and spacing when Show Input Labels is enabled.
Toggle #
Available when Filter By is set to On sale or Featured and Field Type is set to Toggle switch.
- Track Color: Set the color of the inactive toggle track.
- Track Color (On): Set the color of the active toggle track.
- Knob Color: Customize the color of the toggle knob.
You can also customize the toggle label typography.
Stars #
Available when Filter By is Rating and Field Type is Stars.
- Star Color: Set the color of unfilled rating stars.
- Filled Star Color: Set the color of filled rating stars.
- Star Size: Adjust the size of rating stars.
You can also customize the rating text typography when Show Star Label is enabled.
Selected Stars: Customize the typography of selected star rating and the star color. (Available when Filter By is Rating, Field Type is Stars, and Show Star Label is enabled.)
Search Field: Customize the search text, placeholder text typography, border, box shadow, spacing, and background. (Available when Filter By is Keyword search.)
Search Button #
Available when Filter By is set to Keyword search and With Button is enabled.
- Icon Color: Set the color of the search button icon.
- Icon Size: Adjust the size of the icon.
- Icon Spacing: Adjust the spacing around the icon.
You can also customize the button text (when Only Icon is disabled), border, box shadow, and background.
Show More / Less: Customize the typography and spacing of Show More and Show Less links. (Not available for Dropdown, Range slider + inputs, Min / max inputs, or Toggle switch.) Requires Show More After to be greater than 0.
Sizing: Adjust the Filter Item's width, height, and alignment.
Spacing: Customize the Filter Item's margin and padding.
Border: Customize the border style, width, color, and corner radius.
Box Shadow: Add shadow effects to the Filter Item.
Advanced Tab #
The Advanced tab includes standard Divi settings such as Position, Visibility, and Conditions. For Custom CSS, use the parent Product Filters module's Panel, Item, and Option fields.
Need Help? #
If you have any questions or need assistance, contact our support team: [email protected].
