Grid Filter

Updated 1 month ago

Grid Filter element allows filtering items of a Grid element by multiple values such as taxonomies (categories, tags, product attributes, etc.) and posts custom fields.

Grid Filter settings include 5 types of filter items:

1. Checkboxes that support:
   
   • Taxonomies
   • Select ACF type
   • Checkbox ACF type
   • Radio button ACF type
   • Button group ACF type
2. Dropdown that supports:
   
   • Taxonomies
   • Select ACF type
   • Checkbox ACF type
   • Radio button ACF type
   • Button group ACF type
3. Radio buttons that support:
   
   • Taxonomies
   • Select ACF type
   • Checkbox ACF type
   • Radio button ACF type
   • Button group ACF type
4. Number range that supports:
   
   • Price field of WooCommerce products
   • Number ACF type
   • Number range ACF type
   • Select ACF type
   • Radio button ACF type
   • Button group ACF type
5. Range slider that supports:
   • Price field of WooCommerce products
   • Number ACF type
   • Number range ACF type
   • Select ACF type
   • Radio button ACF type
   • Button group ACF type

Grid Filter can filter only Grids showing posts (with any post type), Grids showing terms are not available for filtering at the moment.

When filtering, the Grid Filter element always adds query strings to the current page URL (check your browser's address bar). This allows you to share links with the filter applied. Therefore:

Only one Grid Filter element can work on a page.

Grid Filter can't work if there is no Grid element on a page. In that case, Grid Filter will show the "Nothing to filter" message.

Grid Filter on regular pages #

By default, the Grid Filter will be applied to the first Grid element inside page content, including a Page Template (if set) and Reusable Blocks (if used). Grid elements inside a Reusable Block used in Menus dropdowns cannot be available for filtering.

Zephyr version 8.15 came with the new ability to assign a Grid element for filtering by Grid Filter:

When you set a custom selector (class or ID), the Grid Filter element will be applied to Grid elements with such selector:

Using a class as a custom selector allows filtering several Grids by one Grid Filter element. Note that ID can't be the same for different elements on the same page.

Grid Filter on Archive pages #

By default, the Grid Filter will be applied to every Grid element showing Items of the current query.

Grids showing values other than the "Items of the current query" can't be filtered on archive pages, and they will be ignored by the Grid Filter element disregarding its settings.

Temporary fallback (will be removed in further Zephyr versions): if the Page Template set for archives doesn't have a Grid showing Items of the current query, then Grid Filter will work like on regular pages (will filter the first Grid or Grids specified by the selector in settings).

Grid Filter on the Search Results page #

Grid Filter will be applied to every Grid element showing Items of the current query.

Grids showing values other than the "Items of the current query" can't be filtered on the Search Results page, and they will be ignored by the Grid Filter element disregarding its settings.