In this guide, we will show you how to use the “Checkboxes Filter widget“ on your Elementor website. The Checkboxes Filter widget allows you to create a dynamic filter system using checkboxes, enabling users to select multiple options to refine the content displayed on the page. It’s perfect for websites with a large volume of content, helping users easily navigate and discover relevant posts, products, or items based on specific criteria. With its responsive design and customizable settings, the Checkboxes Filter widget enhances user experience and improves content accessibility.
Let’s explore the customization options available in the “Checkboxes Filter widget“ for Elementor below.
Elementor Free Checkboxes Filter Tutorial Video
Add a Free Checkboxes Filter to Elementor
Add a Free Checkboxes Filter Widget to an Elementor Page
Elementor Checkboxes Filter Widget General Settings
Sync to Posts Widget After Load
Determines whether the filter will display all available terms or only those present in the initial query of a connected posts widget.
Override Query Terms
Controls whether the filter ignores pre-selected terms defined in the connected posts widget’s query.
Filter Logic
Sets how multiple selected terms are applied:
Or – Shows content matching any of the selected terms.
And – Shows content matching all selected terms.
Filter Role
Defines the filter’s relationship with other filters on the page (e.g., single/independent or parent/child).
Disabled Mode
Hides or disables checkboxes for terms that have no matching content.
Connect To Grids Group
Automatically connects the filter to the nearest or main content grid/post widget.
No Terms Found Text
Specifies the message displayed when no available terms are found for filtering
Select Post Type
Choose the post type from which the filter will pull terms.
Select Taxonomy
Select the taxonomy to filter by.
Include By
Manually include specific terms from the selected taxonomy.
Exclude By
Manually exclude specific terms from the selected taxonomy.
Max Number of Terms
Sets the maximum number of terms to display in the filter.
Order By
Determines the sorting method for terms (e.g., default, name, ID).
Order Direction
Sets the sorting order: ascending or descending.
Show Query Debug
Toggles the visibility of the raw database query used to fetch terms for debugging purposes.
Query ID
Assign a custom ID for server-side filtering queries, useful when connecting multiple filters or grids.
Loader Type
Determines how the filter appears while loading. Options include:
Grayed Tabs – Tabs or checkboxes are visible but faded until fully loaded.
Hidden Filter – The filter remains hidden and only appears after initialization.
Limit Number of Tabs While Loading
Sets a maximum number of grayed/faded tabs to display during loading. If left empty, all tabs are rendered in their loading state.
Show Title
Toggles whether a heading or title is displayed above the filter checkboxes.
Title
Sets the text for the filter’s title. It can also be dynamically sourced.
Hide Title When Filter Has No Terms
Determines whether the title is hidden if no terms are available to display in the filter.
Show See More Button
Enables a button to reveal additional hidden filter terms.
Terms To Show Initially
Sets the number of filter terms visible when the page first loads.
See More Button Expand Title
Defines the text displayed on the button to expand the hidden terms.
See More Button Expand Icon
Chooses the icon displayed next to the expand button text.
See More Button Collapse Title
Sets the text displayed on the button to collapse the list back to the initial terms.
See More Button Collapse Icon
Chooses the icon displayed next to the collapse button text.
Show Clear Button
Toggles the visibility of the “Clear Selection” button, allowing users to reset their filters.
Debug Clear Button
Forces the clear button to always be visible for design purposes, even if no filters are selected.
Clear Button Text
Sets the text displayed on the clear button (e.g., “Clear Filters” or “Reset All”).
Clear Button Icon
Selects an icon from Elementor or FontAwesome to display alongside the button text.
Clear Button Position
Determines where the clear button appears relative to the filter checkboxes (e.g., above or below).
Layout Type
Defines how the filter options are displayed, such as Checkboxes or Accordion.
Hide Accordion When Filter Has No Terms
Hides the entire filter section if no terms are available to display.
Accordion as Dropdown
Makes the accordion behave and look like a standard dropdown menu.
Accordion Opened by Default
Determines whether the accordion is expanded when the page first loads.
Accordion Button Open Text
Sets the text displayed on the button when the accordion is closed.
Accordion Button Close Text
Sets the text displayed on the button when the accordion is open.
Open Accordion Icon
Chooses the icon displayed when the accordion is closed.
Close Accordion Icon
Chooses the icon displayed when the accordion is open.
Elementor Checkboxes Filter Widget Style Settings
Checkbox Layout
Determines the orientation of the filter terms, such as horizontal (row) or vertical (column).
Align Checkboxes
Sets the alignment of the checkboxes within the container (left, center, or right).
Checkbox Gap
Adjusts the horizontal spacing between individual checkboxes.
Checkbox Row Gap
Adjusts the vertical spacing between rows of checkboxes.
Checkbox Size
Sets the overall size (width and height) of each checkbox input.
Check Scale
Adjusts the size of the checkmark or dot inside the checkbox when it’s selected.
Check Intend
Controls the inner spacing between the checkmark and the checkbox edges.
Check Color
Defines the color of the checkmark or dot inside the checkbox (for normal and checked states).
Background Color
Sets the background color of the checkbox input (for normal and checked states).
Border Radius
Rounds the corners of the checkbox input.
Border Type
Defines the style of the checkbox border (such as solid, dotted, or none).
Checkbox Shadow
Adds a shadow around the checkbox input for a more prominent or 3D look.
Label Color
Defines the text color of the checkbox label in its normal (unselected) state.
Label Color Checked
Defines the text color of the checkbox label when it is selected.
Label Typography
Controls the font family, size, weight, and style of the label text.
Label Shadow
Adds a shadow effect to the label text for depth or emphasis.
Label Gap
Adjusts the spacing between the checkbox and its corresponding label text.
Spacing
Sets the space below the title, separating it from the filter options.
Text Align
Aligns the title text horizontally within the widget container.
Color
Sets the text color for the title.
Title Typography
Controls the font family, size, weight, and style of the title text.
Text Shadow
Adds a shadow effect to the title text for depth or emphasis.
Post Count Spacer
Sets the space between the label text and the post count number.
Post Count Color
Defines the text color of the post count number.
Post Count Typography
Controls the font family, size, weight, and style of the post count number.
Post Count Shadow
Adds a shadow effect to the post count number text.
Show See More Button
Enables or disables the button for expanding or collapsing the list of terms.
Terms To Show Initially
Sets the number of filter options visible before the "See More" button hides the rest.
See More Button Expand Title
Sets the text shown on the button when the list is collapsed.
See More Button Expand Icon
Selects the icon displayed next to the "See More" text.
See More Button Collapse Title
Sets the text shown on the button when the list is expanded.
See More Button Collapse Icon
Selects the icon displayed next to the "See Less" text.
Spacing Top
Adds vertical space (margin) above the button.
Spacing Bottom
Adds vertical space (margin) below the button.
Button Typography
Controls the font family, size, weight, and style of the button text.
Border Type
Sets the style of the button's border (e.g., Solid, Double, None).
Border Radius
Rounds the corners of the button container.
Icon Size
Sets the size of the icon used.
Icon Gap
Controls the horizontal space between the icon and the button text.
Button Padding
Adds inner space between the button content (text/icon) and its border.
Button Text Color
Sets the color of the button text (for Normal and Hover states).
Button Background Color
Sets the background color of the button (for Normal and Hover states).
Icon Color
Sets the color of the icon (for Normal and Hover states).
Button Typography
Controls the font, size, and weight of the Accordion button text.
Button Padding
Adds inner space around the button's content.
Button Position
Aligns the button within its container (e.g., Left, Right, Full Width).
Button Border Radius
Rounds the corners of the button.
Button Spacing
Adds vertical space (margin) below the button.
Button Border Type
Sets the style of the button's border (e.g., Solid, Dotted).
Button Background Color
Sets the fill color of the button (for Regular, Hover, and Active states).
Button Color
Sets the text and icon color of the button (for Regular, Hover, and Active states).
Icon Size
Sets the size of the accordion's open and close icons.
Icon Spacing
Adds space between the icon and the button text.
Icon Color
Sets the color of the icon in its default (Regular) state.
Icon Color Hover
Sets the color of the icon when the user hovers over the accordion button.
Icon Color Active
Sets the color of the icon when the accordion is open (Active state).
Checkboxes Filter Widget Design Examples For Elementor
Here are some live use cases for the Checkboxes Filter widget.
Team Member Post List.
Post Blocks Cocktails.
Thank you for using the Checkboxes Filter widget for Elementor! This powerful and interactive tool allows you to create dynamic filtering options for your content, giving users an easy way to sort and find exactly what they’re looking for. Highlight key categories, tags, or attributes using checkboxes to enhance user experience and improve content discoverability on your website. Designed for flexibility and responsiveness, it offers full customization options to perfectly match