Product Grid Module
Product Grid displays WooCommerce products in a flexible, responsive grid. Use it for shop sections, product archives, category layouts, Divi Theme Builder templates, and custom ecommerce pages.
Product query
Open Content → Products to choose which products appear. Available sources include:
Latest Products
Featured Products
On Sale
Best Selling
Top Rated
Specific Categories or Tags
Specific Products
Current Loop, Current Category, or Current Tag
Related Products
Use Current Loop in a Theme Builder archive template when the grid should follow the archive being viewed for example a Category/Tag/Brand and other archive pages. Related Products is useful on product templates when you want products related to the current item. You can also control the product count, order, exclusions, and stock visibility.
Product elements
Choose the information and actions each card displays. Common elements include the product image, category, brand, title, price, rating, badges, swatches, Wishlist, Quick View, and Add to Cart.
You do not need to show everything. For a compact grid, keep the image, title, price, and one primary action. For a more detailed catalog, add categories, ratings, stock, attributes, or a short description.
Product filters
Enable filters when customers need to narrow a larger catalog. Depending on your store setup, the toolbar can include product search, sorting, category and tag filters, price, rating, stock, sale status, and product attributes.
Filters can appear in a sidebar, horizontal toolbar, dropdown toolbar, or off-canvas panel. Only the filter features you enable are loaded.
Variable products and swatches
Color or attribute swatches give customers a quick view of a variable product's options. Choose the WooCommerce attribute to show, then set the maximum number and swatch size.
For variable products, the card can open Quick View so the customer can select a complete variation, or send the customer to the product page instead. The Add to Cart label can be changed to Choose Options or another helpful phrase.
Quick View
Quick View opens product details without taking the customer away from the grid. It can show the gallery, title, rating, price, description, stock, SKU, attributes, swatches, and purchase controls. Variable options can be selected inside the popup before adding the product to the cart.
Wishlist
Enable the Wishlist element to add a heart action to product cards. Customers can save and remove items using the plugin's native wishlist system; no separate wishlist plugin is required.
Add to Cart
Simple products can be added directly from the card. Variable products need a complete option selection, so the module can open Quick View or take the customer to the product page, depending on Variable Product Action.
You can also enable the optional Add to Cart popup to confirm that an item was added and provide next-step links.
Pagination
Choose the browsing method that suits the page:
Standard Pagination for numbered pages
Previous / Next for a simpler step-through control
Load More to append products after a button click
Infinite Scroll to append products as the customer reaches the end
No Pagination when the initial product count is enough
Design the grid
The Design tab covers the product card, images, product content, price, rating, badges, swatches, product actions, Quick View, Wishlist, filters, pagination, and empty states. Settings are grouped as Section → Element → Styling, so you can move from a broad area to the exact item you want to change.
Start with card layout, columns, gaps, and image ratio. Then style the elements that are actually enabled instead of adjusting every available design group.
Product Carousel uses the same product-card system. See Product Carousel when you want the same cards in a sliding layout.
If the preview does not update
Reload the Visual Builder and confirm that Product Grid is enabled under Divi Ecommerce → Modules. Also confirm that WooCommerce is active. If the page uses Current Loop or Related Products, preview it in the matching Theme Builder context.
Last updated
Was this helpful?