WooCommerce Product Grid for Elementor

WC Products grid for Elementor is a new component that will allow you to create a perfect grid of products that you want to sell or showcase as a catalog.
By following this tutorial you will be able to build a grid of products filtered by categories tags or attributes without coding.
The grid and the related woocommerce pages can be transformed into a catalog of your products.
Show/hide relevant elements that will engage your visitors and easily build a page from which you can visually manage the administration of your stock, quantity sold by product, low quantity alert threshold…

Table of Contents

Enable and activate the component product grid

By default the component is disabled.
In the admin panel select ‘EAC Components’ page then ‘Advanced’ tab and enable the option ‘WC Products grid’ and save settings.

Product grid active component

And after from the panel settings you have to drag & drop the ‘WC Products grid’ icon on the panel preview.

Product panel icon

Select taxonomy, tags and build advanced queries

From ‘Products‘ tab you can choose the taxonomy that will serve as a filter such as categories, tags or product attributes even those that you have customized.

Product grid simple query

An advanced query is built from a key, the data type of the key, a comparison operator and one or more values to compare.
This is what you can achieve in the ‘Queries‘ tab with the dynamic tags specially created for WooCommerce.

Set settings and layout mode

The ‘Settings‘ section allows you to determine the number of products that will be displayed and to activate pagination.
It is nevertheless incongruous to activate the pagination when you have the filters at the top of the grid. But…

In the ‘Layout‘ section you will choose the display mode as well as the number of columns per row for each device.
For each mode you can determine the best type of display of the content of each product, in column (default) or side by side.

Select the elements that will be displayed in the grid

The ‘Content‘ section is the heart of the device in which you will select the elements you want to display and in what form.

The ‘Product‘ tab in which you find the elements specific to the product, description, price, reviews, stock, quantity sold.

The ‘Buttons‘ tab in which you can select which buttons will be displayed ‘Read more’ and ‘Add to cart’.

The ‘Metas‘ tab will allow you to add metadata, the name of the author of the product sheet, his avatar and the date of creation of the sheet.

The fourth tab ‘Badges‘ will allow you to activate the display of ‘Sale’, ‘Out of stock’  badges and the number of products that have been added to the cart.

The last tab ‘Links‘ will allow you to activate the product link on the image or to open a Fancybox.

Configure buttons badges and woocommerce integration

Configure the buttons, indicate their label, the associated pictogram as well as the content of the badges and their position.
Woocommerce integration
You have several options that will allow you to integrate the product grid with standard Woocommerce pages.

  • Redirect URLs: if enabled the buttons on the cart page will redirect the customer to the product grid you created,
  • Catalog: transform your shop as a catalog without possibility to sell product,
  • Redirect breadcrumb: the URL of the category contained in the breadcrumb will be redirected to the product grid you created,
  • Remove meta tags: SKU, categories and tags of the product page will not be displayed.

Apply differentiated styles for each element

In the Style tab, you will define the font size and color of all the constituent elements of a product.
You can also configure the style of the buttons in depth as well as the shape and color of the badges.

Leave a Comment