The Tabs Filter widget will allow website visitors to filter posts dynamically on the page by clicking the different tabs. Each time a user will click on a tab the post widget will filter accordingly and show the posts related to the term or tag selected.
The Tabs filter is a universal solution which can connect to any post widget inside of Unlimited Elements widget library including Post & Product Gallery widgets and Dynamic Loop widgets. Our filter solution works also with two or more synced widgets using the connect widget settings.
Add Post Widget to Page #
Before starting with the Tabs Filter you will need to add a post widget to the page. For example you can add: Post Grid, Post List, WooCommerce Grid and many more supported widgets.
Post Widget - Post Query #
After you have added the post widget to the page you need to setup the post query to show whatever initial posts you want to show when the page is loaded. If you are not familiar with post query you can visit our documentation for step by step guidance on how to show the posts you want in your post widget.
Post Widget Ajax #
Navigate to the “Posts Pagination and Ajax” and enable the Post Filtering option. Now you can choose the Filter Behaviour:
- Ajax with URL change
Add Tabs Filter to Page #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Tabs Filter”
- Hover over the widget in the search results and click install
- Add your “Tabs Filter” widget to any Elementor Page
Tabs Filter Settings #
Resets the post widget to its initial query and adds an ALL item in the tabs filter.
The text for the first "All" tab
The filter will show only terms that are included in the post widget query.
Determine if the first tab of the filter will be selected by default on page load.
The filter will override the terms selected in the post query of the post widget.
* Use when the "Add first Item ALL" option is turned off.
To override the output of the post widget.
- Single - When there are no children filters.
- Main - Set filter to be parent filter of children filters.
- Child - A child filter of a parent. Will be visible only when parent is selected.
To learn more about creating multi-level filters visit the step-by-step tutorial in the link below:
Terms Selection #
Determine which terms to show in your filter.
Select which post type you want to filter. This should be the same as in your post widget. Fore example: Pages, Posts, WooCommerce Products or any other Custom Post Type.
Select what kind of taxonomy yo want to filter:
- Specific terms
- Children of
- Children of current term
- By search text
- Only childless
- Not a child of another term
- Term meta
- Specific Terms
- Current Term (for archive only)
- Hide Empty Terms
Set the maximum number of terms to show in your filter.
- Term Group
- Term ID
- Count (number of posts associated)
- Include (specific terms order)
- Meta value
- Meta value (numeric)
Show the query for debugging purposes. Don't forget to turn it off before the page is published.
Tabs Filter Layout Settings #
Add an icon to the tabs.
Select an icon for the filter items.
- Flex - Inline
- Grid - Columns
Space between tabs
Shows the number of posts assigned to each tab.
Shows the number on "ALL" filter tab.
Show an image for each filter item.
Type in the meta name of the image field you want to show.
Show related meta field names you can use.
Tabs Filter Loader Settings #
- Grayed Tabs
- Hidden Tabs
Limit the number of tabs shown when the page is loading.
Tabs Filter Responsive Settings #
- Swipe to Scroll
Set the screen resolution in pixels from when the responsive behaviour will take action.
The icon for opening the filters.
The icon for closing the filters.
Set the alignment for the toggle.
Tabs Filter Item Styling #
Set the style for the filter items. You can add different styles for different states: Normal, Hover, Selected.
Tabs Filter Icon Styling #
Set the style for the filter icon.
Tabs Filter Post Count Styling #
Set the style for the filter post count.
Tabs Filter Toggle Styling #
Set the style for the filter toggle.
Multi-Level Filter Tutorial #
Video Overview #
Usage Example #
Create Multi-Level Filters
Add filters to multi-source galleries
Add Filters to WooCommerce widgets
Connect two post widgets with the sync feature and filter them together using the Tabs Filter widget.
Widgets That Work with Tabs Filter Widget #
Thank you for reading 🙂 To see the Tabs Filter in action you can visit our live demo in the link below: