BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Guide

Active Filters Pro

How to set up and style the Active Filters widget in Elementor.

Active Filters shows every filter in use for a loop widget as a chip. A click on a chip removes that filter, and Clear all removes them all. It can also show the number of results.

Part of: Bright Addons Pro. Before you start: A Loop Grid or Loop Carousel with a Query ID on the same page (Bright Addons Pro).

Set it up

  1. Add a Loop Grid or Loop Carousel and type a Query ID in its Layout section, for example blog-grid.

  2. Add the Active Filters widget from the Bright Addons Filters category.

  3. Under Filter, type the Label and the Clear All Text.

  4. Turn Number of Results on and set the Results Text.

  5. Type the same Query ID in Connect to Query ID.

  6. Publish the page and try the filter on the live page.

Content options

Filter

Option What it does
Connect to Query ID The Query ID of the Loop Grid or Loop Carousel this filter controls.
Title Optional heading above the filter, with Title HTML Tag.
Label Text before the chips.
Clear All Text Text of the button that removes every filter.
Number of Results Shows how many results the list has.
Results Text Text of the number, %s is the number.
Bright Addons Pro

Unlock this and 90+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Title

    typography, color and spacing of the heading.

  • Items

    accent color, space between items, text typography and colors, background, border, radius and padding, with hover and active colors.

Tips

  • The chips use the Items style section, so they match the other filters.

  • Give the Loop Grid or Loop Carousel a Query ID in its Layout section first, then type the same Query ID in Connect to Query ID.

Questions and answers

Does the page reload when a visitor uses the filter?

No. The connected loop widget loads the new results in place, and the other filters update to match.

Does it work without other filter widgets?

It shows the number of results, but chips only appear when other filter widgets with the same Query ID are used.

Can I change the look of the chips?

Yes. The Items style section sets their text, background, border, radius and padding.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides