This element is designed to display products in various styles.
Available skins:
Default Skin
Displays a basic list of products.
You can choose how many products per row to show and how many products to load (limit).

Carousel Skin
Displays a basic list of products in the form of a carousel. You can choose how many products (slides) to show and how many to scroll at once.
Accessing Carousel Settings section, you will notice a lot of options that can customize the functionality of the carousel.
Adding custom navigation:
You can add a custom navigation (either arrows or bullets) using the Slider Navigation element.
First you’ll need to access the Products Grid element, access the Carousel settings section and copy the Carousel Unique ID code.
Paste this unique ID into the Slider Navigation element’s “Slider Unique ID” field. This will basically tell one another to be connected and in sync.
I chose this method because there’s a much bigger design freedom to have separate elements, as i can position them anywhere.
The Slider Navigation element also supports bullets eg: Beijing demo .

Carousel Section Skin
This awesome skin is meant to display products, but with their images embedded into the parent’s section background, as a slideshow.
As seen in the example below, the product’s information (title, price and buttons) on the left, while on the right, there are completely different elements, that are added in this section, into another column.
Here’s a quick demo how to add this element with this skin https://d.pr/v/xBMfGY .

Additional settings
Image size:
You can force a different image size for the products thumbnails. This is highly useful for Carousel Products skin to load a full image (or at least large enough).
You can force a different image size for the products thumbnails. This is highly useful for Carousel Products skin to load a full image (or at least large enough).
Products query
In this options section you can customize the query to show only the products that you want, sorted differently, even only including or excluding some products.
Components
Enable or disable any component of the product you want.
6 Replies to “Products Grid Element”
Boris
Hello, when i use custom product archive template for shop page, grid header above products cannot be shown (column switcher, sorting options etc.). It is visible only when i dont use custom elementor template, just default shop view.
Is is posible to show this element when using custom template
Marius[ Post Author ]
Hi Boris. To be able to display the grid header, it will require some extra options to be enabled eg: https://d.pr/v/EghrOj . Hope it helps!
Ali
Hey! Is there any way to put discount percentage badge over grid’s thumbnail? Like how you have for stock, SKU etc. options. Want to show discount percentage tag in a similar way. Thanks!
Marius H[ Post Author ]
Hey!
I see. Can you check the price/discount settings in Customizer > WooCommerce > Product catalog – Components eg: https://d.pr/i/8X4iyg ? I think this should do it.
Marius
Erica
Hello,
Any way to remove the gap between the photo and the product title? Everything is set to 0, meanwhile the gap remains quite large…
Thank you,
Erica
Marius H[ Post Author ]
Hi Erica,
Please try adding this css snippet https://d.pr/n/GMNfgg (and adjust the margin as you want) into Customizer > Additional CSS.