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
Bright Addons
Download free
Guide

Filter Tabs Pro

How to set up and style the Filter Tabs widget in Elementor.

Filter Tabs shows the terms of a taxonomy, such as categories, as tab buttons. A click shows only the posts or products of that term in the connected Loop Grid or Loop Carousel, without reloading the page.

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

See the widget page and live demo

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 Filter Tabs widget from the Bright Addons Filters category.

  3. Under Filter, choose the taxonomy in Filter By and set the term options.

  4. Pick a Look and the Alignment.

  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.
Filter By The taxonomy whose terms are shown, for example Categories, Tags or Product categories.
Order of the Terms Name, Most posts first or Custom order.
Most Terms How many terms are shown, 0 shows them all.
Only These Terms (IDs) Optional list of term IDs to show.
Only Top Level Terms Hides child terms.
Hide Empty Terms Hides terms without posts.
Show Post Counts Shows how many posts each term has.
"All" Text Text of the choice that shows everything.
Alignment Left, center or right.
Look Pills, Underline or Boxes.
One Scrollable Row on Phones Keeps the tabs in one row that scrolls sideways on phones.
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.

See plans and pricing Compare Free and Pro

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 active tab uses the hover and active colors of the Items style section.

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

Can visitors pick more than one term?

Not with tabs. Use Filter Checkboxes for several terms at once.

Can I filter an archive that uses Current Query?

No. Archives built on the current query use normal page links. Choose a source such as Posts or Products in the loop widget to filter it.

Need more help?

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

Troubleshooting guide
All guides