Woo Product Grid Element

Last Update: August 29, 2025

The Avada Woo Product Grid Element allows you to display in a grid format on your website, either as the main shop page, or just wherever you want a grid of WooCommerce Products to be shown. You have control over which products display and how they are presented.

Watch the video below for a visual overview of the Element, view the Avada Woo Product Grid Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Woo Product Grid Element

The Avada Woo Product Grid Element can be the basis for your main shop page, but you can also use it on any page where you want to display a grid of products. To add it to your main shop page, edit the assigned WooCommerce Shop page, design your layout, and add the Element into a Column.

Category or Tag can pull the Products displayed, and you can select or exclude specific categories or tags for complete flexibility. You can also specify how many products you want to display in total, how many columns to use, how they are ordered, and what type of pagination to use. There is also a range of design options for styling.

Element Options

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Pull Products By		Choose to show products by category or tag.
Categories		Select a category or leave blank for all.
Exclude Categories		Select categories to exclude.
Tags		Select a tag or leave blank for all.
Exclude Tags		Select a tag to exclude.
Number of Products		Select the number of products to display.
Product Offset		The number of products to skip. ex: 1.
Number of Columns		Set the number of columns per row.
Column Spacing		Insert the amount of spacing between items without 'px'. ex: 40.
Order By		Defines how products should be ordered. NOTE: If Order by Price is not working, please regenerate the Product Lookup Tables here.
Order		Defines the sorting order of products.
Pagination Type		Choose the type of pagination.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Show Thumbnail		Display the product featured image.
Show Title		Display the product title below the featured image.
Show Price		Choose to show or hide the price.
Show Rating		Choose to show or hide the rating.
Show Buttons		Choose to show or hide Add to Cart / Details buttons.
Grid Box Color		Controls the background color for the grid boxes.
Grid Border Color		Controls the color of borders for the grid boxes.
Grid Separator Style		Controls the line style of grid separators. NOTE: Separators will display, when buttons below the separators is displayed and Box Design mode set to Classic.
Grid Separator Color		Controls the line style color of grid separators. NOTE: Only work when Box Design mode set to Classic.
Margin		In pixels or percentage, ex: 10px or 10%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.