Compatibility with WooCommerce has now been expanded to Divi 5, giving you full control over product pages without relying on WooCommerce’s built-in templates. The newly-integrated WooCommerce Product Modules let you design engaging, user-friendly layouts that match your brand and help boost sales, while tapping into all of Divi 5’s features, including Flexbox, to build product pages with modern layout control.
In this post, we’ll cover the modules’ key features and show you how to use them for your next Divi 5 ecommerce website. Let’s dive in.
What Are WooCommerce Product Modules?
Woo Product Modules are specialized content elements within Divi 5, designed to customize product and category pages for Woo-powered stores. These modules replace the WooCommerce templates that come standard with the plugin, enabling you to create customizable layouts. Unlike these traditional templates, Divi 5’s modules allow creative freedom while maintaining compatibility with WooCommerce’s core functionality.
The release of 17 WooCommerce Modules in Divi 5 marks a significant milestone. These modules, which cover all product and category page design aspects, are no longer in legacy mode, meaning they are all fully optimized for Divi 5’s modern architecture. With this transition to a more efficient foundation, Divi 5 performs better, is more scalable, and is compatible with the future of WordPress.
The remaining 8 Woo Modules, focused on cart and checkout pages, are expected to roll out soon.
Key Features Of Divi 5’s WooCommerce Product Modules
Let’s go over the key features that you can expect now that the WooCommerce Product Modules have been integrated into Divi 5.
Comprehensive Module Set
The first batch of Divi 5’s WooCommerce Product Modules includes tools designed to handle a specific aspect of product and category page design. These modules are:
- Woo Breadcrumbs: Displays navigational breadcrumb trails to help users easily navigate the store.
- Woo Notice: Shows system messages like cart updates, errors, or confirmations.
- Woo Product Add to Cart: Renders an Add to Cart button with optional quantity controls.
- Woo Product Description: Outputs the main long-form product description.
- Woo Product Gallery: Displays additional product images in grid or slider formats.
- Woo Product Images: Shows the main product image or a gallery of images.
- Woo Product Information: Displays product details like weight, dimensions, or attributes.
- Woo Product Meta: Shows product SKU, categories, and tags.
- Woo Product Price: Displays the product’s price, including sale prices.
- Woo Product Rating: Shows the average star rating and review count.
- Woo Product Reviews: Allows customers to view and submit product reviews.
- Woo Product Stock: Indicates product availability and stock levels.
- Woo Product Tabs: Displays default product tabs for description, additional information, and reviews.
- Woo Product Title: Outputs the product’s name as a customizable heading.
- Woo Product Upsell: Promotes upsell products to encourage higher-value purchases.
- Woo Products: Creates customizable product grids for category pages.
- Woo Related Products: Displays related products based on categories or tags.
Together, these modules provide everything you need to build product and category pages, from navigational breadcrumbs to dynamic product displays.
Creative Freedom
Divi 5’s WooCommerce Product Modules free users from the constraints of standard WooCommerce Templates. With these modules, you can fully control your product pages’ layout, structure, and design, creating unique experiences.
The modules support dynamic content, meaning they pull product data directly from WooCommerce, ensuring real-time updates for prices, stock levels, and descriptions. This allows you to build pages that drive engagement and conversions without requiring third-party plugins or custom code.
Customization Options
Each module has extensive design settings, all manageable within the Visual Builder. You can customize elements like product galleries, sale badges, buttons, and more with options for typography, colors, spacing, and animations.
For example, you can adjust the layout of the Woo Product Gallery module to display images in a slider or grid, style the Woo Product Add to Cart button with custom colors and hover effects, or tweak the Woo Product Rating module to align star ratings perfectly with your design.
These settings let you create cohesive, branded store pages with ease.
Dynamic Templates With Theme Builder
Divi 5’s Theme Builder lets you embrace the full potential of WooCommerce Product Modules by allowing you to create global templates for product and category pages. With Theme Builder, you can design a single template that applies to all of the products and categories in your store, ensuring a consistent, cohesive look.
Loop Builder For Dynamic WooCommerce Content
The Divi 5 Loop Builder offers an alternative way to build dynamic Woo content. With Loop Builder, you can query WooCommerce products and design flexible product loops using any Divi element, creating layouts, lists, and carousels that go beyond the fixed structure of dedicated product modules. For single-product layouts, use the Woo Product Modules; for product collections and archives, use the Loop Builder.
How To Use Divi 5’s WooCommerce Product Modules
This section will walk you through creating a product page in Divi 5’s Theme Builder using the new WooCommerce Product Modules.
Create A New Theme Builder Template
Navigate to Divi > Theme Builder in the WordPress dashboard. Click on + Add New Template.
Click Build New Template when the dialog box appears.
Next, we’ll need to assign our template to our products. Under Products, select All Products to assign the template.
Click Create Template to assign it.
Click Add Custom Body. This will allow us to build the body of our product page template.
Choose Build Custom Body when the dialog box appears.
Build The Product Template
When the Theme Builder launches, you can build a template from scratch, choose a premade layout, or build with AI. We’ll select Build From Scratch for this tutorial.
Click the green + icon to add a new row.
When the options appear, choose the two-column row. New rows you add to any Divi 5 page or template will use Flebox by default. Divi 5’s Flexbox Layout System gives you more control over how your product pages look than ever, including changing how your WooCommerce Product Modules stack across different screen sizes.
Scroll down to reveal the Woo Product Modules option. Once clicked, you’ll have 17 Divi 5 Woo modules and 8 legacy (Divi 4) modules.
Add The Woo Product Images Module
Find and select the Woo Product Images module and add it to the first column.
This Post is selected by default in the Product field in the Content tab. If you’d like to build the template using an existing product, choose it from the dropdown menu. This is a great way to preview how your template will look while creating it. Remember to swap it back to This Post before the final save.
Expand the Elements dropdown menu to reveal the settings. Here, you can control which images display in the module, including the featured image, gallery images, and sale badge.
Click the Image dropdown menu in the Design tab to reveal the settings. Here, you can force the image to occupy all the available space (force fullwidth), add a border, box shadow, adjust spacing, or add filters.
You can also style the Sale Badge by assigning a background color, text, borders, and more.
Add The Woo Product Title Module
In the 2nd column, click Woo Product Modules and scroll to select the Woo Product Title module.
Use the dropdown menu in the Product field of the Content tab to select a product and preview how it will look in the template.
Next, navigate to the module’s Design tab and expand the Title Text dropdown menu. Here, you can assign a font and style the heading as you’d like.
Add The Woo Product Price Module
Under the product title, click to add a new module. Select the Woo Product Modules and scroll to select the Woo Product Price Module.
In the Design tab, you can style every aspect of the product’s price, including the text, sale text, new price text, and more.
Add The Woo Product Rating Module
Next, we’ll add the Woo Product Rating Module under the Woo Price Module.
In the Content tab under Elements, you can choose to show or hide the star rating and customer reviews count.
In the Design tab, the Layout dropdown menu lets you choose how to display the star rating. Elements can be displayed inline or stacked.
Other styling options include assigning a color, text size, and letter spacing for the stars and styling options for the rating text.
Add The Woo Product Description Module
Under the Woo Star Rating Module, click to add a new Woo Module. This time, we’ll select the Woo Product Description Module. In the Content tab, choose which description to display (description or short description).
In the Design tab, you can style the description with options for font, weight, style, alignment, color, size, and more.
Add The Woo Product Add To Cart Module
Next, we’ll add the Woo Product Add to Cart Module. It will allow your customers to add the product to their carts and choose any variations assigned to the product.
The Elements toggles in the Content tab allow you to show or hide the quantity field and available stock. Quick note: For the stock quantity to display, you must check manage stock in the Woo product itself.
You can style the field labels, text, dropdown menus (for variations), and the button to match your branding in the Design tab.
Continue adding modules, like the Woo Product Meta Module to display SKU numbers and categories.
You can also add the Woo Product Tabs Module to display a description, reviews, and additional info about your product.
For maximum reach, you can display a series of Related Products on your product template to encourage your site’s visitors to explore additional products in your store, increasing the chance of a conversion.
Saving The Template
Once finished adding modules, make any additional changes you need, and then save the template by clicking on the Save button at the top right corner of the Theme Builder.
Next, click the Exit button to return to the Theme Builder dashboard.
Back in the Theme Builder dashboard, click Save Changes to save the template and apply it to your Woo products.
As you can see, creating a product template with Divi 5’s Woo Product Modules is a simple process. We won’t cover all modules in this tutorial, but using all of them, you can create impressive product or category pages that keep your visitors engaged.
Download For Free
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
What’s Next For Divi 5’s WooCommerce Integration?
The second batch of WooCommerce Modules, focusing on cart and checkout pages, will be released in the next few weeks, wrapping up the integration with WooCommerce. These additions will enable users to fully customize the entire ecommerce funnel, from product browsing to checkout. The Divi 5 Public Beta will refine these features further, incorporating user feedback and additional bug fixes to ensure stability.
Beyond WooCommerce compatibility and integration, Divi 5 continues to evolve with recent features like the Group Carousel Module for creating dynamic product sliders, the Lottie Module for adding lightweight animations, and a new Flexbox Layout System for enhanced layout control. These additions complement the Woo modules, offering even more creative possibilities for ecommerce sites.
Try Out Divi 5’s Woo Product Modules Today
Divi 5‘s Woo Product Modules allow you to create captivating product and category pages with unparalleled flexibility and creativity. The modules offer a blend of creative freedom, dynamic content integration, and performance, all within an intuitive interface. From customizable product galleries to custom layouts via the Theme Builder, Divi 5 makes creating high-converting store pages easy.
Are you ready to dive into Divi 5? Download the latest Divi 5 Public Alpha to explore these modules and see how they can transform your WooCommerce site. We’d love to hear your thoughts. Share your feedback in the comments or connect with us on our social media channels.
The post Everything You Need To Know About Divi 5’s WooCommerce Product Modules appeared first on Elegant Themes Blog.
Click here to continue reading this article.