Product grid

Product grid for Elementor is a new widget that will lets you easily display your WooCommerce products anywhere on the page with plenty of styling options including attractive customized skin layouts.
You can select the characteristics you want to display as well as their representation formats.
You can switch your store to ‘Catalog’ mode at any time.
Use advanced queries to create an administration page that will allow you to manage your products with ease.
Follow this link for the documentation.

Table of Contents

Simple and advanced queries

The product grid is automatically displayed with a filter that can be refined between the categories, tags and attributes you have defined.
You can build a query with the meta data provided, choose a comparison operator and enter/select an operand as a reference value for the comparison.
Sort output of products with different criteria.

Product query filter
Product layout mode

Set layout mode

You can choose to display the Product Grid with three layout modes “Masonry, Grid and Slider“ and for each of these modes, align the product image and its description side by side.
The number of columns per row that will be showed for each device.

Select the product items you want to display

This is the heart of the system where you must choose the characteristic elements of the product that will be highlighted to capture your future customers.
Its description, the reviews, the different prices (regular, on sale) the quantity in stock as well as the quantity already sold.
Define the behavior of the ‘Read more‘ and ‘Add to cart‘ buttons.
Display badges that will visually indicate the stock position for this product, the sale campaign as well as the number of items already in the cart.

Product content items
Product woocommerce integration

Woocommerce integration

In this section you will be able to define how the product grid will integrate with the pages generated in WooCommerce.
For example the ‘Return to shop‘ and ‘Continue shopping‘ buttons on the shopping cart page will redirect the customer to the product grid you created.
You may want to showcase products, but not want to sell online. The ‘Catalog‘ option will do the job for you. It will disable the ‘Add to cart’ button as well as the product price and other features.

How to style the product grid

You will be able to select the style of each item from 13 different styles.
Modify the position, color and typography of the filter.
Change the size, the typography of each of the constituents of a product that you selected previously.

product style

Final outcome