Products element (grid or carousel)

Products element

Our theme’s products Grid/Carousel element is a flexible Elementor tool to present WooCoomerce products. Products element allows to configure a grid with 1-6 items in a row and show the products by category, tag or ID.  In addition, you can display products by type: Sales products, Featured products, New products, Top rated, and Bestsellers. This element has three main groups of settings:

1. Content. Here you can configure products query options
2. Style. All options related to grid or carousel styles
3. Advanced. Elementor options for paddings, margins, parallax, responsive, animations, etc.

Content Options

Items per page – the number of products shown per page.

Product Source – option to narrow the displayed  product range by:

• Featured –  products marked as featured in Dashboard -> Products -> products having star sign.

• Sale Products – Products having regular and sales price

• With “New” label – in order to show products with this label, you will need to activate labels in Theme Settings -> Shop > Product labels -> “New” label on products -> “On”. Then it is necessary to configure a product to have “New” label: enter the product editing mode, navigate down to Product Settings (custom meta box from the theme) and mark up the checkbox for Add “New” label.

• Bestsellers – products most often purchased.
• Top rated – products with the highest ratings.
• Related – related products that work on the single product page only.
• Upsells – upsells WooCommerce products for a single product page only.
• List of products – allows you to specify which products to display by their names.

Taxonomies – select taxonomies (category, tag, attribute) to filter displayed products.

Query – this set of options gives you the ability to order products in different ways and exclude particular ones.

Style options

Design – you can set different hover styles and override the option set in Theme Settings. The set of product designs may vary between themes.

Image size – select predefined image size for product previews or specify custom width and height.

View – grid or carousel. 

Columns – number of products per row.

Items gap – options to set 30, 20, 10, 6, 2, 0 pixels between grid items.

Masonry grid – an opportunity to enable Masonry type of grid. Useful for products with different height of images.

Different sizes – you can double the width of particular products to highlight them in the grid.

Pagination – if you set the number of products in “Item per page ” less than its real quantity,  you can configure pagination which suggests four options:

• Without – the grid will show the number of “Item per page”  without any possibility to load more products.
• Load more button – will load more products by clicking.
• Infinite scrolling – more products will be loaded when you scroll the page down.
• Arrows – will appear on grid hover and the next set of products stipulated in “Items per page” of the product would fade in and loaded with AJAX. Check on the demo

Carousel settings – if you select a carousel view you will get a new tab called “Carousel settings”. It will contain all settings for the carousel like items per slide, pagination, arrows, autoplay, speed etc.

Countdown timer – the checkbox enabling countdown to the end sale date will be shown. Be sure you have set the final date of the product sale price.

Stock progress bar – enables stock progress for product grid. Read more here 

Animation in view – add nice appearance effects to each product.

Lazy loading – load product images only when you scroll the page to the element.