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…

Accessibility for product grid widget

Enable and use product grid component

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
Enable Products grid component

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

Product panel icon
Use Products grid component

Select taxonomy tags and set settings

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.

WooCommerce Product grid simple query
Simple query filter

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…

Settings section

Configuring product grid and global layout

Layout section you will choose the display mode as well as the number of columns per row for each device.

Side by side you can determine the best type of display of the content of each product, in column (default) or side by side.

Image layout select resolution, delay loading and apply image ratio and vertical position.

Content layout you can select vertical and horizontal alignment for the content.

WooCommerce define layout mode
Layout items, images and content mode

Select and configure the elements that will be displayed in the grid

WooCommerce define the content to be displayed
Define the elements that will appear for each product

The Content section is the heart of the widget 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 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 Badges tab will allow you to activate the display of ‘Sale’, ‘Out of stock’ , ‘New product’ badges and the number of products that have been added to the cart.

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

The final Links tab lets you activate the product link on the title and apply it globally.
Apply the previously selected link to the entire item. This option is only visible if you have selected a link before.

WooCommerce content links
Select link and apply global

All badges in action

All badges in action

Configure buttons and badges

Configure the buttons, indicate their label, the associated pictogram as well as the content of the badges and their position.

Configure buttons and badges

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.
Customize product content
You can also configure the style of the buttons in depth as well as the shape and color of the badges.
Customize buttons and badges

Turn your WooCommerce store into a catalog

You have several options that will allow you to integrate the product grid you created with the standard Woocommerce pages and convert your product shop into a catalog.
To do this, go to the settings page of the EAC Components plugin WC integration tab.
Some options are only visible after selecting the page you created with the component.

WooCommerce integration settings page

Configure product grid integration with WooCommerce

Activate the Catalog option to convert your product store into a product catalog where no orders can be made.
This will remove all Add to cart buttons and prices if the user is not logged in.
After that you will be able to display a notification in each product page to indicate that a quote request is possible by activating the option Request a quote if you have, of course, set up a contact form and finally you can Redirect page URLs if you want the Shop, Cart and checkout pages to be redirected to the page selected in the list.
You can add a notice above the product grid using the following filter.
All PHP snippets should be added via a child theme’s functions.php file.

add_filter( 'eac_woo_catalog_product_message', function() {
    return 'The purchase of products online is temporarily closed';
} );

Independently of the previous options and after selecting the product page from the list, you can:

  • Redirect button URLs: if enabled the buttons on the cart page will redirect the customer to the page selected in the list,
  • Redirect breadcrumb: the URL of the categories contained in the breadcrumb will be redirected to the page selected in the list,
  • Redirect meta tag URLs: categories and tags of the simple product page will be redirected to the page selected in the list.

Don’t forget to save the settings with the appropriate button.

WCI configure

Add your own notice for the simple product pages

After activating the Request a quote option you can modify the default notice of the component either globally OR for certain product pages using the following filter.
All PHP snippets should be added via a child theme’s functions.php file.

/** Notice for all simple product pages */
add_filter( 'eac_woo_catalog_product_request_a_quote', 'request_a_quote_global', 19 );
function request_a_quote_global() {
	return "Use the 'Contact us' button to request a quote";

/** Notice for some simple product pages */
add_filter( 'eac_woo_catalog_product_request_a_quote', 'request_a_quote', 19, 2 );
function request_a_quote( $notice, $id ) {
	$notice = '';
	$ids = array( 7243, 7235, 3735, 2471 );
	if ( in_array( $id, $ids ) ) {
		$notice = "Use the 'Contact us' button to request a quote";
	return $notice;

2 thoughts on “WooCommerce Product Grid for Elementor”

  1. Hi, I’ve used this post grid with Default Style… How can I make The title and short Description show as in
    Any css that I can add?
    Thanks for your kind help

    • Hello Fernando,
      Yes you can
      Select post grid properties/Advanced/EAC custom CSS and paste this CSS:
      selector .al-post__content-wrapper {
      position: relative;
      selector .al-post__text-wrapper {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      max-height: 100px;
      background-color: rgba(244, 179, 201, .7);
      And you can play with Layout mode, Image ratio and apply your own colors.


Leave a Comment