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 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
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 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
Simple query filter

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.

Advanced queries filter

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…

Settings section

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

You can select the Equal height option for grid mode so that each row has the same height.
For each mode you can determine the best type of display of the content of each product, in column (default) or side by side.

Post grid display mode
Layout mode and columns count

Select the elements that will be displayed in the grid

Define the elements that will appear for each product

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’ , ‘New product’ 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.

Select badges that wil appear for each product

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
    xxxxxxxxxxxxxxxxxxxxxxx
    Any css that I can add?
    Thanks for your kind help

    Reply
    • 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.
      Rgds

      Reply

Leave a Comment