GET REY

Products Grid Element

You are here:
Estimated reading time: 1 min
In this article

This element is designed to display products in various styles.

Available skins:

LinkDefault Skin

Displays a basic list of products.

You can choose how many products per row to show and how many products to load (limit).

Default skin in London demo .

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.

LinkAdding 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 skin in Milano Demo, with navigation arrows element connected.

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 .

Carousel Section skin in Valencia demo .

LinkAdditional settings

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

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

LinkComponents

Enable or disable any component of the product you want.

Was this article helpful?
Dislike 6
Views: 2551

6 Replies to “Products Grid Element”

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

    1. 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!

  2. 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!

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

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

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

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!