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
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.
here you can choose between “Grid” and “List” layout modes for presenting the products loop
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.
specify grid layout of products grid. You can choose between justified, masonry and metro style layouts
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.
In this section you can choose products to display in products grid.
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.
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.
here you can select products which should be excluded.
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 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.
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 can be activated for product attributes as described in this sections
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.
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
enable/disable pagination for products grid
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.
This section is for specifying different product labels to be displayed in products grid.
TheGem comes with 4 different styles of labels, which can be further customized in “Styles” sections (see description below).
enable/disable displaying of “New” label for new products and specify its text
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
In this section you can enable filters for products grid.
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.
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.
enable/disable filter by price range.
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.
enable/disable filter by product status.
enable/disable product search for searching products in grid.
in this input fields you can specify different text fragments for filter controls.
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.
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.
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.
enable/disable Quick View feature for products in grid.
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).
Grid Images Style
specify gaps between products in products grid
enable/disable product separator in grid and adjust its settings
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.
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.
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.
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.
here you can select between 4 different color presets for caption container, which can be further customized with additional settings.
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.
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.
Style settings for sorting control in products grid. Here you can also adjust different text fragments used in sorting control.
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
Section to customize the look of labels, which appear on products in grid: new, sale, out of stock.
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.)