Grid Filter
TheGem offers built-in grid filtering options in its grid and listing content elements such as Products Grid, Posts Extended Grid, and Portfolio Grid. These options can be found and activated in the respective content element's Filters & Sorting section.
However, these filters options are inherently tied to the grid itself, with predefined positions and layouts. But what if your project requires filters with completely different layouts and positions on the page? What if you need to combine different filters with unique designs on the same page? Or even place the filter and the listing on separate pages, where the filter on one page filters the listing on another? This is where the grid filter content elements come in handy.
With TheGem's grid filter, you have the flexibility to add filters to:
- WooCommerce products (Products Grid element)
- Portfolios (Portfolio Grid element)
- Blog posts (Posts Extended Grid element)
- Any custom post types (Posts Extended Grid element)
in any position and design you desire.
Video Tutorial
Check this video tutorial (narrated) on how to build content filters with TheGem:
How to add grid filter?
You can find “Grid Filter” element in editing panel of WPBakery in “TheGem” group:
Following settings are available:
Grid to Filter
Here you can specify, what should be filtered:
- Grid ID: the grid filter should filter the grid according to specified Grid ID
- Current Query (Archive): the grid filter should filter the grid on the archive page. This option should be used when you create archive templates with TheGem templates builder and use Grid Filter element in this archive templates
Grid ID
Here you can specify which grid should be filtered. All grid elements in TheGem have the "Grid ID" field, where you can define some unique ID.
To filter the respective grid simply copy the grid ID of this grid and insert it in the "Grid ID" field of the Grid Filter element
Filtering Type
- "Instant filter" applies the filter immediately after selecting any filtering values.
- "Filter Button" triggers the filtering only when the "Apply Filters" button is clicked.
- "Triggered by other grid filter" allows filtering based on values selected in another grid filter element. This last option is useful for designing an extended filter layout with different filter sections and columns on one page.
In case "Filter Button" is selected, you can then optionally specify the URL of the page with the grid, which should be filtered.
In case "Triggered by other grid filter" is selected, you need to add one additional filter to this post/page with "Instant filter" or "Filter Button" filtering type selected. Otherwise the grid filter will not trigger any filtering action.
Filters Style
In this field you can choose between three filter layouts:
- Vertical: useful for adding filters in a sidebar
- Horizontal: useful for the fullwidth modern grid layouts
- Hidden Sidebar: all filters are hidden in the off canvas sidebar which can be displayed by clicking on "Show Filters" button
Filters Style (mobile)
If the "Hidden Sidebar" option is selected, the filter will be automatically replaced by the "Show Filters" button on mobile devices. Clicking on this button will reveal the hidden sidebar with the filters.
Scroll To Top
If activated the grid will be automatically scrolled to top after the filter is applied
Filters
In this repeater section you can add filters.
Filter By
here you can choose between filtering by
- Taxonomies: all taxonomies, including WooCommerce and any custom taxonomies are supported
- Product Attributes (WooCommerce)
- Product Price (WooCommerce)
- Product Status (WooCommerce)
- TheGem Custom Fields (see description on chapter “Custom Fields”)
- ACF/Toolset custom field groups
- Project details (for portfolio items, see description in chapter “Portfolio”)
- Manual Meta Key: filtering by any custom field using its fields name
- Search: you can add search
In case filter by taxonomies is selected, following additional settings appear:
Select Taxonomy
here you can select the taxonomy for the filter
Hierarchy
whether to display taxonomy hierarchy in filter
Collapsible
whether to display the hierarchy collapsible
Click Behavior
whether the click on the filter attribute should filter the grid or load the respective term archive page
In case filter by product attributes is selected, following additional settings appear:
Attribute
here you can select the product attribute for your filter
In case search is selected, you can the specify:
Reset Filters on Search
whether all selected filters should be reseted if search is performed
Live Search
whether the search should perform instantly, immediately after entering the beginning of the search term
NOTE: To choose between search by content or by meta fields you need to use the grid's "Filters & Sorting" settings:
In case of manual meta key, following field appears:
Specify Field's Name
Here you can manually paste the field's name of any custom field in your installation.
In case of custom fields, project details and ACF/Toolset field groups following additional settings are available:
Select Field
Select the custom field for filtering
Field Type
Select between the "inherit", “text” and “number” field types. The "inherit" option is available for ACF and Toolset field types and inherits the field type from the settings set in this plugins. The “number” field type helps you to display slider control (like price range slider) in filter
Regardless of the selection in "Filter By" field, following additional options are always available:
Query Type
Select between "AND" (for multiple choice) and "OR" (for only one choice) query types
Display Type
Here you can choose between filter as dropdown or filter as a list of filter attributes.
Open Dropdown
how the filter dropdown should be open: on hover or on click
How to style grid filter?
By switching to the "Style" tab you will find multiple settings for styling of the filter elements.