Divi WooCommerce Product Grid is designed to display products in a beautiful and sleek manner on your website and make it easy for your customers to find and buy your products online. Offering both a simple drag-and-drop function and complete layout personalization, you can display your products in a grid gallery that not only looks amazing but is easy to explore.
Prerequisites — What Do You Need Before Getting Started #
Before you create the product grid, ensure you have a few things prepared:
Divi Theme Pack or Divi Builder Plugin
Upload the Divi Theme or Divi Builder Plugin and activate it.
To start with an online store of your own, get the WooCommerce plugin and activate it.
WooCommerce Products
Add and setup products into WooCommerce. The Product Grid module visualizes these products.
Install our Divi WooCommerce product grid module.
Without these, the product grid won’t appear correctly!
Adding the Product Grid Module #
Add a New Section and Row
- Navigate to the visual builder of a page
- Tap the + (plus sign) to start a new section.
- Choose a Regular Section.
- Click the + within the section to insert a row.
- Choose your column configuration (e.g., 1, 2).
Add the Product Grid Module
- Select the gray + button on the row.
- Search for Product Grid.
- Choose the Product Grid Module.
- Set the Product Grid Settings
Child Components and Child Features #
1. Product Title #
Purpose: Shows the name of the product in the grid.
Content Tab: #
Select Title Tag for product (H1, H2, H3, etc.). Also, the background of the title can be changed using the background feature.
Design Tab: #
Configure the text settings such as font, size, color, letter spacing, line height, and text shadow.
General Styling: #
These features are available for each child component and work the same.
Sizing feature: Set width, height, and alignment.
Spacing feature: Control Margin and padding system.
Border feature: Custom Border of the products grid, like broader color, width, and styles and rounded corners.
Box Shadow effects: Add shadow effects for depth.
Filters feature: Apply filters like Hue, brightness, and opacity sliders.Transform feature: Use Transformations (scaling, rotation, etc.)for dynamic effects.
2. Featured Image #
Purpose: Shows the primary image of the product.
Content Tab: #
Image Size (small, medium, large, custom size). Also, the background of the featured-image can be changed using the background feature.
Design Tab: #
Overlay: Insert or delete image overlays, and modify the overlay’s background color.
3. Product Gallery #
Purpose: Shows more product images in a gallery form.
Content Tab: #
The Background of the product gallery can be changed using the background feature.
Design Tab: #
Gallery: Adjust picture size, gaps, and borders.
4. Short Description #
Purpose: Displays a brief product description.
Content Tab: #
Option to Show the Brief Product Description.
Design Tab: #
Short Description Text: Set font size, text color, letter spacing, and text shadow.
5. Product Price #
Purpose: Shows the price of the product.
Content Tab: #
Select the Price Tag and Type (i.e., sale, regular price).
Display Type: Shows the display type of the price, inline, Inline Block, or Block.
Animation: Can select the animation type.
Design Tab: #
Price text: Set font size, text color, letter spacing, and text shadow of the price text.
6. SKU #
Purpose: Displays the product’s unique identification code (SKU).
Content Tab: #
Select the Stock Keeping Unit (SKU).
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Set font size, text color, letter spacing, and text shadow of the SKU text.
7. Cart Quantity #
Purpose: This is the input area to add several products in the cart.
Content Tab: #
Show quantity field for adding multiple items to the cart.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Edit text like “Quantity”.
Cart Quantity: Control the color, background of the cart quantity input field.
8. Add to Cart button #
Purpose: Display a button to add products in the shopping cart.
Content Tab: #
This will include the button that adds the product to the cart.
Add to cart text: Customize the text that appears on the button (i.e., buy now or purchase now).
Add to cart read more text: Set alternative text for detailed product view if needed.
Icon Element: The Icon Element provides the ability to customize and show icon with the add to cart text.
Show Icon: Enable or disable the icon display next to the button text.
Icon: Select an icon from the icon list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between button text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Icon Element: Add icon color and size.
Add to Cart Text: Set font size, text color, letter spacing, and text shadow of the add to cart text.
9. Quick View #
Purpose: Open a preview of the product in a pop-up.
Content Tab: #
Icon Element: The Icon Element provides the ability to customize and show an icon with the quick view text.
Show Icon: Enable or disable the icon display next to the text.
Icon: Select an icon from the list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Quick View Text: Ability to set font size and style of quick view text.
Icon Element: Add icon color and size
10. Sale Badge #
Purpose: Displays a label to indicate the product is on sale.
Content Tab #
Component Type: Choose Yes or set the component type to “Sale Badge” to make the badge functional.
Badge Position: Select badge position with product image.
Sale Badge Text: Enter the text you want to show up in the sale badge (e.g., “Sale,” “Discount,” etc.).
Sale Badge Type: Choose the sale badge type that will be shown (e.g., “percentage,” “flat Amount,” etc.).Discount Show: Select when the discount should show up compared to the sales badge ( after sale badge or before sale badge)
Design Tab: #
Badge Text: Set font size and style of sale batch text.
11. New Badge #
Purpose: Displays a label to indicate product is new.
Content Tab #
Component Type: Choose Yes or set the component type to “New Badge” to make the badge functional.
Days: Use the slide to configure the number of days for which the product is considered new. This sets the duration the ”New” badge will be displayed according to the product release date.
Badge Position: Select the badge position with the product image.
New Badge Text: Enter the text you want to show up in the new badge (e.g., “New,” “Just Arrived,” etc.).
Design Tab: #
Component Text: Set font size and style of the new batch text.
12. Ratings #
Purpose: Shows product ratings from customer reviews.
Content Tab: #
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Star Rating: Specify size, color, and margin for stars.
This element also offers the following design options to customize: Size (width, height, alignment), Spacing (margin and padding), Border (with color, width, and border styles), Box Shadow, Filters (hue, brightness, opacity), and Transform (scaling, rotation, etc.).
13. Description #
Purpose: Shows the product’s entire description.
Content Tab: #
Describe the product in full.
Background: Customize the background using the background features.
Design Tab: #
Description Text: Change the font, size, color, and add a shadow to the text.
14. Stock #
Purpose: Show availability of product (in stock/out of stock).
Content Tab #
Component Type: Set component as “Stock” to show the stock status of the product whether available or not.
Show Custom Text: Check this to show custom text for the stock status (you will add the custom text in a new section to have more control of the appearance).
Custom Stock Status (In Stock Message): This is the text that will display when the product is in stock, for example, “In stock” or “Available”.
Custom Stock Status (Unavailable): As for the product status when out of stock (e.g, Out of Stock, Unavailable), you can also customize the text as needed.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Change the font, size, color, and add a shadow to the text.
15. Categories #
Purpose: Shows product categories.
Content Tab: #
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (you can choose a type of animation to apply effects) Background (you can configure a custom background using this feature).
Design Tab: #
Categories Text: Set the font, size, and color of category names.
16. Tags #
Purpose: Shows tags of products.
Content Tab: #
Product tags are visible here.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Tags Text: Customize the product tags text.
17. Button #
Purpose: Add a button which can be set to link to any URL (i.e., a product page).
Content Tab: #
Adds a button with an external link option.
Button Text: Change button’s text
Icon Element: The Icon Element provides the ability to customize and show icon with the button text.
Show Icon: Enable or disable the icon display next to the button text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between button text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Button Text: Set button’s text font, size, and color.
Icon Element: Add icon color and size
18. Custom Text #
Purpose: Add a custom text under the product.
Content Tab #
Text: field to add personalized text under product.
Icon Element: The Icon Element provides the ability to customize and show icon with the custom text.
Show Icon: Enable or disable the icon display next to the text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Set custom text font, size, and color.
Icon Element: Add icon color and size
19. Date #
Purpose: Shows the date your product was published or modified.
Content Tab: #
Date type: Shows the published or modified date of the product.
Date Format: Can select the date format.
Design Tab: #
Component Text: date text’s font, size, and alignment can be modified.
20. Divider #
Purpose: Inserts a line between blocks.
Content Tab: #
Divider Line Height: Slider used to customize the line size.
Design Tab: #
Divider line: Change the Color, Color direction starting and ending position of the divider.
21. YITH Wishlist #
To use YITH WooCommerce Wishlist, users need to install the YITH WooCommerce Wishlist plugin.
Purpose: Enables product Wishlist functionality.
Content Tab: #
Wishlist Text: Add to Wishlist: The text that will be displayed on the Wishlist button. The user can edit this text (e.g., ”Save for later” or “Favorite”).
Added Wishlist Text: This is the text to be shown when the product is already in the Wishlist. It means the product is added to the wishlist, and clicking on it will take the user to the wishlist page.
Icon Element: The Icon Element provides the ability to customize and show icon with the wishlist text.
Show Icon: Enable or disable the icon display next to the wishlist text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Customize the Wishlist button text.
Icon Element: Add icon color and size
22. YITH Compare #
To use YITH WooCommerce Compare, users need to install the YITH WooCommerce Compare plugin.
Purpose: Allows customers to compare different products.
Content Tab: #
Compare Text: Set the text for the compare button.
Icon Element: The Icon Element provides the ability to customize and show icon with the compare text.
Show Icon: Enable or disable the icon display next to the compare text.
Icon: Select an icon from the list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Customize the compare button text.
Icon Element: Add icon color and size
Global Features Of Woo Product Grid Settings #
Content Tab – Woo Product Grid Settings #
The content tab offers an extensive number of options to control how products are displayed in the product grid. This section is made to be customizable in layout and sorting.
Content Setting → Product View Type #
Functionality: This option sorts products based on different parameters like product name, custom menu order, etc.
Default Sorting: Menu order + name, which orders products by the menu order and the name.Customization options: You can choose different ways to sort by bestselling products, by latest products, etc, to customize the format for your website.
Content Setting → Product Count #
Functionality: This option lets you determine how many products are displayed for each page on the grid.
Default Setting: The 12 products option displays 12 products per page.
Customization options: The value can be set according to personal preference.
Content Setting → Column #
Functionality: The column setting specifies how many vertical columns are used to display the items: More columns make for a smaller product, and less columns create a larger product.
Default Setting: Products will display in 3 vertical columns.Customization options: The number can be customized to fit the design; it can be 2, 4, or even more.
Content Setting → Column Gap #
Functionality: Column gap controls setting the space between product cards for better separation and a more organized layout.
Default Setting: 20px, a 20px space between columns.
Customization options: You can customize the gap by changing the value to make larger or narrower space between columns, for example, 10px or 30px.
Content Setting → Each Row Same Height #
Functionality: When enabled, all the product items will have an equal height in the same row.
Content Setting → Order #
Functionality: This feature enables products to be shown based on one of several criteria, like sort by rating, sort by popularity, etc.
Customization options: Select how products are sorted, such as by rating, popularity, etc.
Content Setting → Product Offset Number #
Functionality: Allows skipping a few products from the beginning of the grid. For instance, if you set the offset to 3, the first three products would not be displayed.
Default Setting: The default value is 0, which would start showing products on the grid from the first one.
Customization options: This offset can be customized to jump over a certain number of products and set the starting point of the grid display.
Content Setting → Show Pagination #
Functionality: Manage visibility of pagination in the product grid. By using pagination, products are spread over several pages, but users can visit them via the page number
Customization options: you can choose to enable (YES) or disable (NO) pagination, so that all products load on one single page, with no additional pages required.
Content Setting → Show Result Count #
Functionality: Shows the count of the products that fit the filter
Customization options: Customization of this setting (YES/NO) will show on top or bottom of the grid.
Content Setting → Show Product Ordering #
Functionality: Users can use this feature to sort the products displayed in the grid. There can be sorting on the basis of price, popularity, or dat,e and users could have the facility to easily view products according to their choice.
Customization options: If NO, the dropdown or buttons used to order the product are hidden, and the user isn’t able to change the order the products are shown!
Background #
Customize the background display of the WooCommerce product grid by setting a background color, image, or style. It allows you to customize the grid design so that it fits on your website and matches your site’s look.
Admin Label #
The Admin Label is good for locating/managing the product grid in the WordPress admin panel. Administrators/developers can find/grab the grid component faster than other elements
Design Tab – Woo Product Grid Settings #
The Design tab in the Woo Product Grid module lets you customize how the product grid appears on your site. You can adjust the look and feel of the grid and its items.
Text: It is used for customizing text alignment and text shadow within the grid.
Product Item: it is used for customization product items’ background, margin, padding, product wrapper rounded corners, and its border style, width, color also used to give box shadow in product items.
Quick View Modal: This is used to design how users will see a quick view pop-up in the event that they click to view a product without leaving the page. You can style this modal however you really want to match your theme!
Quick View Modal Items: Set the items that are being displayed inside the quick view popup. You can display the product image, price, description, or any other optional information inside the modal.
Result Count: it is used for customization of result count background, margin, padding, rounded corners, and its broader style, width, color, also used to give box shadow in result count.
Result Count Text: This gives you the option to change the font, size, color, and font style of the text used in the result count.
Ordering: It is used for customization of ordering background, margin, padding, rounded corners, and its broader style, width, and color, also used to give box shadow in ordering.
Ordering Text: You can use this option to change the font, size, color, and style of the text used for ordering.
Pagination: It is used for customization of pagination wrapper background, number background margin, padding, rounded corners, and its broader style, width, and color, also used to give box shadow in pagination.
Pagination Text: Customize text (font, size, color, style) used in pagination
Active Pagination: It is used for customization of active pagination number background, number margin, padding, rounded corners, and its broader style, width, color, also used to give box shadow in active pagination.
Active Pagination Text: Customize the text to display on the active pagination button. This will be able to be adjusted to match your site’s style.
Sizing: This is where you control the size of your entire product grid and your product items. You can make the items display in the grid as big or small as you want.
Spacing: Changes the distance between the product items. You can close in or spread the gap between products for a tighter or more spread-out look.
Border: Allows you to put borders around the whole product grid or single product items. This serves to visually distinguish the items from the background and other items.
Box Shadow: Allows you to apply a shadow around the product grid. It adds a feeling of depth and makes the pieces pop a bit more.
Filters Effect: Hue, brightness, and opacity sliders to make the grid more appealing.
Transform: You can rotate and scale the grid or items. These effects can be a good way to add some interactive effects or visible flair to the grid.
Animation: Intermittent animations occur when the user interacts with the product grid. For instance, products could fade in or slide in from the side when the page is loaded or when users hover over them.
Advance Tab – Woo Product Grid Settings #
The Advanced section of the Woo Product Grid module offers more customization for those who’d like to have more control over the behaviour and visibility of the product grid, as well as how the user will interact with it. These are mostly for those who know a bit of web development or who want to make fine-tuned adjustments. It offers options such as adding CSS IDs or classes, using its own custom CSS for design adjustments, and setting conditions for when the grid is displayed.