Use the Checkbox Filter widget with any of our Post widgets to help users filter the content on your Elementor page. By allowing users to select multiple criteria at once, these filters simplify navigation and make it easy to find specific items, content, or services. Whether for narrowing down products in an online store, searching job listings, or finding movies on a streaming site, checkbox filters give users the control they need to make more refined searches quickly, enhancing their overall experience.
Popular Use Cases for the Checkbox Filter
E-commerce Product Filtering
Use checkboxes filter on your e-commerce website to help users narrow down products by category, attributes (such as color or brand), price, and availability, making it easier to find specific items.
Blog and News Websites
Allow users to find articles by topics (e.g., politics or tech), content type (such as videos), and publication dates using checkbox filters, ensuring quick access to relevant information.
Movies Website Filtering
On a movies website, checkboxes filter let users select genres (such as action, comedy, or thriller), movie ratings (e.g., PG-13, R), release years, languages, and streaming platforms.
Travel Booking Websites
Use checkbox filters on your travel website to filter by amenities (e.g., Wi-Fi or breakfast included), room types, and transport options, helping users find accommodations that meet their needs.
Education or Course Platforms
Checkbox filters allow users to sort courses by level, duration, and certification options, enabling them to quickly find courses that align with their learning goals.
Real Estate Website
Use checkbox filters on a real estate website to let users easily refine property searches by selecting criteria such as property type, price range, and amenities.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Checkboxes Filter widget.
Then follow these steps:
Now that you have the plugin installed, it’s time to start creating the Checkboxes Filter.
Step #2: Adding the Checkboxes Filter widget to your Elementor website
To create a Checkboxes Filter you need to install the Checkboxes Filter widget from the Unlimited Elements Widget library.
This filter can work with other filters from the widget library, such as the ‘Tabs Filter,’ ‘Search Filter,’ ‘Active Filter,’ and more. For more information, visit our filters demo page.
Step #3: Add a widget for filtering
Before we begin, we need to add the ‘Post List’ widget to display our custom posts. The checkboxes filter integrates seamlessly with various widget types, including ‘Post Widgets,’ ‘Loop Widgets,’ ‘Woo Widgets,’ and more.
Once the Post List widget is added, select the desired post type in the ‘Posts Query’ option. Later, we will select the same post type in ‘Terms Selection’ for the checkboxes filter.
Step #4: Add the Checkbox filter to your Elementor page
Now, in the Elementor editor, Find the Checkboxes Filter widget and drag it to the desired part of your page.
Configure the Checkboxes Filter Settings
Sync to Posts Widget After Load
This will detect which taxonomies are used in the post widget and list them in the filter accordingly.
Override Query Terms
The filter will override the terms selected in the post query of the post widget.
Filter Logic
Set the filter logic (and/or) to change the behaviour.
Filter Role
Filter role let's you setup advanced multi-level filters for multiple use cases.
Terms Selection
Select Post Type
Select the same post type that we chose for the Post List widget in the 'Posts Query' settings.
Select Taxonomy
Choose the taxonomy accordingly.
Include / Exclude By
Include and exclude taxonomies by specific terms or set up advanced rules such as children of, current post terms, term meta, and much more.
Max Number of Terms
Set the maximum number of terms to display.
Other Options
Loader Type
Select the loader type to either "Grayed Tabs" or "Hidden Filter".
Title
Give it a filter title if needed.
Post Count
We can also show posts count with the terms.
See More Button
Use this to add a "See More" button to load more terms.
Clear Button
Enable this to also add a clear button to clear filter selection.
Layout
Select the layout type to either "Checkboxes" or "Accordion". The accordion can show as dropdown as well.
Wrapping it Up!
Incorporating a Checkboxes Filter on your Elementor website can significantly boost user engagement and satisfaction by offering a seamless browsing experience. With the ability to refine searches across various attributes, visitors can find what they’re looking for faster and with less effort. As a result, checkbox filters not only help organize vast amounts of content but also keep users coming back, knowing they can easily find exactly what they need.
