Products Grid

With this element you can add products grids to your page.

You can find “Products Grid” element in editing panel of WPBakery in “ WooCommerce” group

Products & Layout Tab

Grid ID

Specify the unique ID for the grid. Grid ID is used for example for grid filtering via the Grid Filter element.

Products

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

Source: you can select products by categories and / or attributes. Depending on your selection additional controls for selecting categories and product attributes (and their values) will appear.

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 

Layout

Skin: 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.

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.

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

Image Aspect Ratio: you can choose between portrait and square aspect ratios for displaying product images in 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 

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 

Image Border: specify width and color of the border around image. By using checkbox “Apply border on caption container” you can automatically apply the specified border on caption container as well (in case caption position is set to “Below Image” in Appearance tab) 

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. 

Used in Fullwidth Section: 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. 

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. 

Note: this section appears only in case if “Caption Position” is set to “Below Image” in Content tab – Caption section.

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).

Pagination Style

In this section you can customize the look of pagination.

Sorting Style 

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

Labels Style

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

Filters Tab

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 cont

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.

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.  

Additional Tab

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 

Quick View: enable/disable Quick View feature for products in grid. 

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.)