Overview
Product grids that look clean and well-spaced on desktop often become difficult to browse on smaller screens, either by showing too many products in a long vertical list or by forcing products into cramped columns. By default, the Divi Woo Products module applies the same product count and column layout across all devices, which limits your ability to optimize the shopping experience for tablet and phone users.
The Divi Responsive Helper plugin extends the Woo Products module with responsive controls for both product count and column layout. You can define how many products are displayed and how many products appear side by side at each breakpoint. These features work together to help you create product grids that feel intentional, readable, and well-balanced across all screen sizes.
The GIF below demonstrates the Woo Product number of columns feature (shown in Divi 4):
How To Use
Step 1: Enable Woo Products Module Features Globally Divi 4
To start using the responsive Woo Products module features in Divi 4, go to the Divi > Theme Options menu in your WordPress backend, then select the Divi Responsive Helper tab, which our plugin adds. Select the Column Stacking subtab and enable the following settings:
- Woo Products Module Number of Columns
- Woo Products Module Product Count
Enabling these global settings does not change any layouts on its own. It only activates the necessary settings inside the Woo Products module so they can be configured per module.
Step 1: Enable Woo Products Module Features Globally Divi 5
To start using the responsive Woo Products module features in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the Module Item Counts & Columns tab from the left sidebar. From there, enable the following settings:
- Woo Products Module Number Of Columns
- Woo Products Module Product Count
Enabling these global settings does not change anything on its own. It only activates the necessary settings inside the Woo Products module in the Divi Builder so they can be configured there.
NOTE: The instructions in this document also apply exactly the same for the other Woo modules, which are not mentioned or shown separately.
2. Select The Number Of Columns In The Woo Products Module Divi 4
Once the Woo Products Module Number of Columns setting is enabled in Divi Theme Options, a new set of settings will appear in every Woo Products module in the Divi Builder.
- Open up the Woo Products module Settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content Toggle.
There you will see three new options appear:
- Number of Woo Products Columns on Desktop
- Number of Woo Products Columns on Tablet
- Number of Woo Products Columns on Phone
These are all set to default, so to change them simply choose a number from the dropdown menu for Desktop, a number for Tablet, and another number for Phone.
Keep in mind that this setting only controls the number of columns, while the other setting from step 3 controls the number of products shown.
Step 2: Select The Number Of Columns In The Woo Products Module Divi 5
Once the Woo Products Module Number Of Columns setting is enabled globally, a new set of settings will become available in every Woo Products module in the Divi Builder.
- Open up the Woo Products module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
Two settings, Number Of Columns and Space Between Columns, will appear. Both settings are added by our plugin.
NOTE: The Number Of Columns setting and Space Between Columns setting, which are added by our plugin, only become available when the Layout Style dropdown is set to Block. The Layout Style is a new feature in Divi 5. Block is usually not selected by default.
This setting can be adjusted per breakpoint using Divi 5’s responsive editing controls, allowing you to define how many columns remain side-by-side on each breakpoint. Keep in mind that this setting only controls the number of columns, while the other setting from step 3 controls the number of products shown.
In Divi 5, the module layout behavior is controlled by a Layout Style setting using one of the following layout modes:
- Block
- Flex
- Grid
The number of columns feature in Divi Responsive Helper is designed to work with the Block layout style, which matches the behavior in Divi 4.
Step 3: Configure Woo Products Module Product Count Divi 4
After enabling the Woo Products Module Product Count setting globally in Theme Options, a new responsive editor option will become available for the Product Count setting in the Divi Builder. This allows you to set the image count for each breakpoint. The setting itself is technically already there, but it is not responsive, meaning it does not have the options to set the number for each breakpoint as expected. Our plugin enables this ability.
- Open up the Woo Products module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
- Hover over the Product Count setting and click the responsive phone icon.
- Enter the desired number for Desktop, a number for Tablet, and another number for Phone.
Keep in mind that this setting only controls the number of products shown, while the other setting from step 2 controls the number of columns.
Step 3: Configure Woo Products Module Product Count Divi 5
After enabling the Woo Products Module Product Count setting globally, a new responsive editor option will become available for the Image Count setting in the Divi Builder. This allows you to set the product count for each breakpoint. The setting itself is technically already there, but it is not responsive, meaning it does not have the options to set the number for each breakpoint as expected. Our plugin enables this ability.
- Open up the Woo Products module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
- Hover over the Product Count setting and click the responsive phone icon, which opens a Responsive Editor
- Enter the desired number for each breakpoint.
Keep in mind that this setting only controls the number of products shown, while the other setting from step 2 controls the number of columns.
