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

Attributes

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 then 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

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.