Grid Sorting

TheGem offers built-in grid sorting 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 sorting options are inherently tied to the grid itself, with predefined positions and layouts. If you wish to position the grid sorting control anywhere on your page with completely different sorting layout, you can use the Grid Sorting content element.

With TheGem's grid sorting, you have the flexibility to add sorting options 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.

How to add grid sorting?

You can find “Grid Sorting” element in editing panel of WPBakery in “TheGem” group:

Grid to Sort

Here you can specify, what should be sorted:

  • Grid ID: the grid sorting should sort the grid according to specified Grid ID
  • Current Query (Archive): the grid sorting should sort the grid on the archive page. This option should be used when you create archive templates with TheGem templates builder and use Grid Sorting element in this archive templates

Grid ID

Here you can specify which grid should be sorted. All grid elements in TheGem have the "Grid ID" field, where you can define some unique ID.

To sort the respective grid simply copy the grid ID of this grid and insert it in the "Grid ID" field of the Grid Sorting element

Open Dropdown

how the sorting dropdown should be open: on hover or on click

Sorting

In this repeater section you can add sorting options.

Sort By

here you can choose between sorting by

  • Title: sorting by post titles
  • Date: sorting by post dates
  • Price: sorting by product price (WooCommerce)
  • Rating: sorting by product rating (WooCommerce)
  • Popularity: sorting by sales (WooCommerce)
  • TheGem Custom Fields: sorting by TheGem's custom fields (see description on chapter “Custom Fields”)
  • ACF/Toolset custom field groups: sorting by ACF/Toolset fields
  • Project details: sorting by project details (for portfolio items, see description in chapter “Portfolio”)
  • Manual Meta Key: sorting by any custom field using its fields name

Using the "Order" field you can select the ascending (ASC) or descending (DESC) sorting order.

In case of custom fields, project details and ACF/Toolset field groups following additional settings are available:

Select Field

Select the custom field for sorting

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 sort the number fields like "area", "amount", "length" etc.

How to style grid sorting?

By switching to the "Style" tab you will find multiple settings for styling of the sorting element.