Products Grid

With this element you can add products grids to your page. You can find “Products Grid” element in editing panel of Elementor in “TheGem WooCommerce” group

Content Tab

Layout

Grid ID

Specify the unique ID for the grid. You can keep this field empty - in this case the Grid ID will be automatically generated and assigned after saving. Grid ID is used for example for grid filtering via the Grid Filter element.

Layout

here you can choose between “Grid” and “List” layout modes for presenting the products loop

Skins

TheGem comes with 26 pre-made skins / presets for products grid to accelerate your work. All this skins are customizable and editable.  

Columns Desktop, Tablet, Mobile

select number of columns to display in products grid on different screens. In case of selecting 100% width for desktop, your products grid will be automatically stretched to the 100% width of the page and you will get an additional option “100% Width Columns” to specify the number of columns for 100% width grid for screen resolutions greater than 1920px. Please note: 100% width doesn’t appear as 100% width in Elementor edit mode as the element is always limited by section/column’s width settings. However on the front end the gallery grid will take the full 100% width.

Grid Layout

specify grid layout of products grid. You can choose between justified, masonry and metro style layouts

Image Size

You can choose to display thumbnails, generated by theme for products grids, or original featured images, uploaded in posts (full size)

Image Aspect Ratio

With this setting you can specify the custom image aspect ratio to display in products grid. Leave blank to show the original image ratio.

Disable Grid Preloader

By default Products Grid uses isotope script for showing grids. However, you can switch to use pure CSS grid for better performance by enabling the setting “Disable Grid Preloader”. Note: this setting works only for justified grids, it disables the grid preloader and deactivates the displaying of highlighted (double size) posts. 

Products

In this section you can choose products to display in products grid. 

Source

you can multi-select products by categories, tags and attributes. Also you can manually select separate products to be displayed. Depending on your selection additional controls for selecting categories, attributes, tags and products (and their values) will appear.

Offset

this control helps to displace or pass over products in grid/list. For example, if you specify “2” products to be displaces, the first two products in grid will be excluded.

Exclude Products

here you can select products which should be excluded.

Sorting

specify the default sorting order for displaying products in grid 

Sorting on Frontend

enable/disable sorting control to be displayed above the products grid 

Caption

Caption contains product title, product price, product categories, product rating, add to cart and add to wishlist. In this section you can enable/disable displaying of this elements in product container in grid.  

Caption Position

In TheGem products grid caption can be shown below image, on image or on image hover. Here you can specify the position of caption

Attribute Swatches

attribute swatches can be activated for product attributes as described in this sections

https://codex-themes.com/thegem/documentation/#color_swatches,

https://codex-themes.com/thegem/documentation/#label_swatches.

In this setting you have an option to activate attribute swatches to display swatches in product list/grid. If activated, you can then select the attributes to be displayed and number of values to show.

Add to Cart

in TheGem products grid there are two types of “Add to cart” element. It can be displayed as button or as icon. Use “Type” field to select the type of “Add to cart” element. “Select options” element is displayed instead of “Add to cart” in case of variable product. 

Add to Wishlist

this element can be enabled in case you have installed “YITH WooCommerce Wishlist” plugin. With this element (heart icon by default) your website visitors can add any product in grid to their wishlist. You can control the behavior of clicking on “Add to wishlist” element in the settings of “YITH WooCommerce Wishlist”. For example, if you wish, that by repeated clicking on “Add to wishlist” element (heart icon) the product should be removed from wishlist, you need to make this setting

in“YITH WooCommerce Wishlist” plugin.

Pagination

This section is for selection of pagination type of products grid.

Items per page

select, how many portfolio items should be visible in grid on one page

Pagination

enable/disable pagination for products grid

Pagination Type

select type of pagination:

• Numbers: classic numbered pagination
• Load More Button: additional items will be loaded by clicking on load more button
• Infinite Scroll: additional items will be automatically loaded while scrolling down

In case “Load More Button” type is selected, you can further specify the button text and optionally add some icon to load more button. You can automatically stretch this button to content fullwidth by activating “Stretch to Full Width” or add separator to the left and to the right of the load more button by activating “Separator” control.

Labels

This section is for specifying different product labels to be displayed in products grid. 

Labels Style

TheGem comes with 4 different styles of labels, which can be further customized in “Styles” sections (see description below). 

“New” Label

enable/disable displaying of “New” label for new products and specify its text 

“Sale” Label

enable/disable displaying of “Sale” label for products on sale. You can specify whether to display product price discount or some text. 

“Out of stock” Label

enable/disable displaying of “Out of stock” label for out of stock products and specify its text 

Filters

In this section you can enable filters for products grid. 

Filters Style

you can choose between 3 styles of filters. Standard style will display filter controls as dropdowns above the products grid. Sidebar will display filters in a sidebar to the left of the products grid. Hidden sidebar will display a button above the products grid – by clicking on this button a hidden sidebar with filters will appear. 

Categories

enable/disable filter by product categories. You can enable categories hierarchy to be displayed in filter and add product counts for displaying available amount of product in this categories. 

Price

enable/disable filter by price range.

Attributes

enable/disable filter by attributes. This control is made as a repeater, so you can add as many product attributes as needed. Each repeater item contains controls for naming the attribute in filter, for selecting attribute and query type. 

Product Status

enable/disable filter by product status.

Product Search

enable/disable product search for searching products in grid. 

Text Labels

in this input fields you can specify different text fragments for filter controls.

Notification

When your website visitor takes some actions in products grid (for example adding product to cart, adding product to wishlist etc.) the notification bar appears notifying this user about taken action. In this section you can specify different notification text fragments. 

Social Sharing

Here you can enable social sharing button to be shown in products in grid as well as select social networks where the item can be shared.

Additional Options 

Lazy Loading Animation

enable/disable and select type of loading animation for products in grid. 

Ignore Highlighted Products

in TheGem you can specify some products to be emphasized in products grid. You can make it in page options of this products by using this setting 

In this way this products will be displayed double bigger as another products. This is a cool way of attracting visitors attention to some product highlights and to make creative grids.

By activating “Ignore Highlighted Products” control this products emphasizing will be ignored and all highlighted products will be displayed as normal products. 

Show only “Featured” products

by enabling this control only featured products will be displayed. All other products in your grid selection will be ignored. You can set a product as “featured” product in product settings here 

Show only “On Sale” products

by enabling this control only “on sale” products will be displayed. All other products in your grid selection will be ignored.

Quick View

enable/disable Quick View feature for products in grid. 

Metro Options

This section appears only in case if “Metro Style” has been selected in Layout section. Due to its specificity, metro grid automatically defines the row’s height in a grid. Using “Max. row’s height in metro grid (px)” setting you can specify the maximum allowed height of an item in a grid for best appearance (380px recommended).

Style Tab

Grid Images Style

Gaps

specify gaps between products in products grid

Product Separator

enable/disable product separator in grid and adjust its settings 

Hover Effect

select hover effect for product images while hovering on product in grid. This control works only in case you have added more than one image for your product. 

Fallback Hover

in case some product has only one product image, here you can specify which hover effect should be applied in this case. 

Better Thumbnails Quality

in case you wish to put your products grid in Elementors fullwidth section, here you can enable better quality for product images to be displayed in such sections. 

Shadow

In Grid Images Style section you can also enable shadow and border. By default, shadow is applied only on image container. By activating “Apply shadow on caption container” setting you can enable a common shadow for image container and caption container.

Caption Style

Here you can customize the style and typography of caption elements: product categories, product title, price, rating stars.

Caption Container Style

Set of settings to customize the appearance of caption container. 

Preset

here you can select between 4 different color presets for caption container, which can be further customized with additional settings.

Icons Style

Settings to control appearance of icons in products in grid: “Add to wishlist” icon, “Add to cart” icon (in case “Add to cart” element has been set to “Icon” in Content tab – Caption section), sharing icon. 

Buttons Style

Settings to control appearance of buttons in products grid: “Add to cart” button, “Select options” button etc. (in case “Add to cart” element has been set to “Button” in Content tab – Caption section).

Filter Style (Standard) 

Style settings for filter controls in grid, if filter type has been set to “Standard” in Content tab – Caption section. 

Filter Style (Sidebar) 

Style settings for filter controls in grid, if filter type has been set to “Sidebar” or “Hidden Sidebar” in Content tab – Caption section. Please note: in responsive mode all filters are always automatically changed to “Hidden Sidebar” – you can customize the styles of this hidden sidebar here as well.

With “Scroll to top” control you can enable/disable automatic scrolling to the top of the grid after choosing some filters.  

Sorting Style 

Style settings for sorting control in products grid. Here you can also adjust different text fragments used in sorting control. 

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

Labels Style

Section to customize the look of labels, which appear on products in grid: new, sale, out of stock.

Notification Style

In this section you can customize the style of notification bar when your website visitor takes some actions in products grid (for example adding product to cart, adding product to wishlist etc.)