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
Tab / Shift-Tab keyboard keys to navigate between filter labels
Enter / Space keyboard keys to activate a filter
aria-label text 'Filter results by + filter label'
Tab / Shift-Tab keyboard keys to navigate between links
Home keyboard key to move focus to the first link
End keyboard key to move focus to the last link
Escape keyboard key exit the grid
aria-label text on links and button Read more 'View single product page + product title'
aria-label text on button Add to cart 'Add to cart + product title'
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.
And after from the panel settings you have to drag & drop the WC Products grid icon on the panel preview.
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.
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…
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.
Select and configure the elements that will be displayed in the grid
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.
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.
Apply differentiated styles for each element
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.
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.
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;
}
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
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