Compatibility with WooCommerce has now been expanded to Divi 5, providing you with complete regulate over product pages with out depending on WooCommerce’s integrated templates. The newly-integrated WooCommerce Product Modules allow you to design enticing, user-friendly layouts that fit your emblem and lend a hand spice up gross sales, whilst tapping into all of Divi 5’s options, together with Flexbox, to construct product pages with fashionable structure regulate.

On this put up, we’ll duvet the modules’ key options and display you the right way to use them on your subsequent Divi 5 ecommerce website online. Let’s dive in.

What Are WooCommerce Product Modules?

Woo Product Modules are specialised content material parts inside Divi 5, designed to customise product and class pages for Woo-powered retail outlets. Those modules exchange the WooCommerce templates that come same old with the plugin, enabling you to create customizable layouts. Not like those conventional templates, Divi 5’s modules permit ingenious freedom whilst keeping up compatibility with WooCommerce’s core capability.

The discharge of 17 WooCommerce Modules in Divi 5 marks an important milestone. Those modules, which duvet all product and class web page design sides, are now not in legacy mode, which means they’re all totally optimized for Divi 5’s fashionable structure. With this transition to a extra environment friendly basis, Divi 5 plays higher, is extra scalable, and is suitable with the way forward for WordPress.

The rest 8 Woo Modules, involved in cart and checkout pages, are anticipated to roll out quickly.

Key Options Of Divi 5’s WooCommerce Product Modules

Let’s move over the important thing options that you’ll be expecting now that the WooCommerce Product Modules were included into Divi 5.

Complete Module Set

The primary batch of Divi 5’s WooCommerce Product Modules contains gear designed to take care of a selected side of product and class web page design. Those modules are:

• Woo Breadcrumbs: Shows navigational breadcrumb trails to lend a hand customers simply navigate the shop.
• Woo Realize: Displays gadget messages like cart updates, mistakes, or confirmations.
• Woo Product Upload to Cart: Renders an Upload to Cart button with non-compulsory amount controls.
• Woo Product Description: Outputs the primary long-form product description.
• Woo Product Gallery: Shows further product photographs in grid or slider codecs.
• Woo Product Photographs: Displays the primary product symbol or a gallery of pictures.
• Woo Product Knowledge: Shows product main points like weight, dimensions, or attributes.
• Woo Product Meta: Displays product SKU, classes, and tags.
• Woo Product Value: Shows the product’s value, together with sale costs.
• Woo Product Ranking: Displays the typical celebrity score and evaluation depend.
• Woo Product Opinions: Permits shoppers to view and post product opinions.
• Woo Product Inventory: Signifies product availability and inventory ranges.
• Woo Product Tabs: Shows default product tabs for description, more information, and opinions.
• Woo Product Identify: Outputs the product’s identify as a customizable heading.
• Woo Product Upsell: Promotes upsell merchandise to inspire higher-value purchases.
• Woo Merchandise: Creates customizable product grids for class pages.
• Woo Similar Merchandise: Shows comparable merchandise in keeping with classes or tags.

In combination, those modules supply the entirety you wish to have to construct product and class pages, from navigational breadcrumbs to dynamic product presentations.

Ingenious Freedom

Divi 5’s WooCommerce Product Modules loose customers from the limitations of same old WooCommerce Templates. With those modules, you’ll totally regulate your product pages’ structure, construction, and design, developing distinctive studies.

The modules enhance dynamic content material, which means they pull product information without delay from WooCommerce, making sure real-time updates for costs, inventory ranges, and outlines. This permits you to construct pages that force engagement and conversions with out requiring third-party plugins or customized code.

Customization Choices

Each and every module has intensive design settings, all manageable inside the Visible Builder. You’ll be able to customise parts like product galleries, sale badges, buttons, and extra with choices for typography, colours, spacing, and animations.

For instance, you’ll regulate the structure of the Woo Product Gallery module to show photographs in a slider or grid, taste the Woo Product Upload to Cart button with customized colours and hover results, or tweak the Woo Product Ranking module to align celebrity scores completely together with your design.

Those settings allow you to create cohesive, branded retailer pages comfortably.

Dynamic Templates With Theme Builder

Divi 5’s Theme Builder allows you to embody the total attainable of WooCommerce Product Modules through permitting you to create international templates for product and class pages. With Theme Builder, you’ll design a unmarried template that applies to all the merchandise and classes on your retailer, making sure a constant, cohesive glance.

Loop Builder For Dynamic WooCommerce Content material

The Divi 5 Loop Builder gives an alternate technique to construct dynamic Woo content material. With Loop Builder, you’ll question WooCommerce merchandise and design versatile product loops the use of any Divi part, developing layouts, lists, and carousels that transcend the mounted construction of devoted 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 segment will stroll you thru making a product web page in Divi 5’s Theme Builder the use of the brand new WooCommerce Product Modules.

Create A New Theme Builder Template

Navigate to Divi > Theme Builder within the WordPress dashboard. Click on on + Upload New Template.

Click on Construct New Template when the conversation field seems.

Subsequent, we’ll want to assign our template to our merchandise. Underneath Merchandise, choose All Merchandise to assign the template.

Click on Create Template to assign it.

Click on Upload Customized Frame. This may increasingly let us construct the frame of our product web page template.

Make a selection Construct Customized Frame when the conversation field seems.

Construct The Product Template

When the Theme Builder launches, you’ll construct a template from scratch, make a selection a premade structure, or construct with AI. We’ll choose Construct From Scratch for this instructional.

Click on the inexperienced + icon so as to add a brand new row.

When the choices seem, make a selection the two-column row. New rows you upload to any Divi 5 web page or template will use Flebox through default. Divi 5’s Flexbox Layout System provides you with extra regulate over how your product pages glance than ever, together with converting how your WooCommerce Product Modules stack across different screen sizes.

Scroll down to expose the Woo Product Modules possibility. As soon as clicked, you’ll have 17 Divi 5 Woo modules and eight legacy (Divi 4) modules.

Upload The Woo Product Photographs Module

In finding and choose the Woo Product Photographs module and upload it to the primary column.

This Put up is chosen through default within the Product box within the Content material tab. For those who’d love to construct the template the use of an current product, make a selection it from the dropdown menu. It is a nice technique to preview how your template will glance whilst developing it. Consider to switch it again to This Put up earlier than the general save.

Enlarge the Components dropdown menu to expose the settings. Right here, you’ll regulate which photographs show within the module, together with the featured symbol, gallery photographs, and sale badge.

Click on the Symbol dropdown menu within the Design tab to expose the settings. Right here, you’ll power the picture to occupy the entire to be had area (power fullwidth), upload a border, field shadow, regulate spacing, or upload filters.

You’ll be able to additionally taste the Sale Badge through assigning a background colour, textual content, borders, and extra.

Upload The Woo Product Identify Module

Within the second column, click on Woo Product Modules and scroll to choose the Woo Product Identify module.

Use the dropdown menu within the Product box of the Content material tab to choose a product and preview how it’s going to glance within the template.

Subsequent, navigate to the module’s Design tab and make bigger the Identify Textual content dropdown menu. Right here, you’ll assign a font and elegance the heading as you’d like.

Upload The Woo Product Value Module

Underneath the product identify, click on so as to add a brand new module. Make a selection the Woo Product Modules and scroll to choose the Woo Product Value Module.

Within the Design tab, you’ll taste each and every side of the product’s value, together with the textual content, sale textual content, new value textual content, and extra.

Upload The Woo Product Ranking Module

Subsequent, we’ll upload the Woo Product Ranking Module beneath the Woo Value Module.

Within the Content material tab beneath Components, you’ll make a selection to turn or disguise the celebrity score and buyer opinions depend.

Within the Design tab, the Format dropdown menu allows you to make a selection the right way to show the celebrity score. Components will also be displayed inline or stacked.

Different styling choices come with assigning a colour, textual content dimension, and letter spacing for the celebrities and styling choices for the score textual content.

Upload The Woo Product Description Module

Underneath the Woo Celebrity Ranking Module, click on so as to add a brand new Woo Module. This time, we’ll choose the Woo Product Description Module. Within the Content material tab, make a selection which description to show (description or quick description).

Within the Design tab, you’ll taste the outline with choices for font, weight, taste, alignment, colour, dimension, and extra.

Upload The Woo Product Upload To Cart Module

Subsequent, we’ll upload the Woo Product Upload to Cart Module. It’s going to permit your shoppers so as to add the product to their carts and make a selection any permutations assigned to the product.

The Components toggles within the Content material tab mean you can display or disguise the volume box and to be had inventory. Fast observe: For the inventory amount to show, you should test organize inventory within the Woo product itself.

You’ll be able to taste the sector labels, textual content, dropdown menus (for permutations), and the button to compare your branding within the Design tab.

Proceed including modules, just like the Woo Product Meta Module to show SKU numbers and classes.

You’ll be able to additionally upload the Woo Product Tabs Module to show an outline, opinions, and extra data about your product.

For optimum achieve, you’ll show a chain of Similar Merchandise for your product template to inspire your web page’s guests to discover further merchandise on your retailer, expanding the risk of a conversion.

Saving The Template

As soon as completed including modules, make any further adjustments you wish to have, after which save the template through clicking at the Save button on the peak proper nook of the Theme Builder.

Subsequent, click on the Go out button to go back to the Theme Builder dashboard.

Again within the Theme Builder dashboard, click on Save Adjustments to avoid wasting the template and use it on your Woo merchandise.

As you’ll see, making a product template with Divi 5’s Woo Product Modules is a straightforward procedure. We gained’t duvet all modules on this instructional, however the use of they all, you’ll create spectacular product or class pages that stay your guests engaged.

Download The Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container sort enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container sort button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}

Obtain For Loose

Sign up for the Divi E-newsletter and we can e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative wonderful and loose Divi assets, pointers and methods. Practice alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely sort on your e mail deal with beneath and click on obtain to get right of entry to the structure pack.

DOWNLOAD

You may have effectively subscribed. Please test your e mail deal with to substantiate your subscription and get get right of entry to to loose weekly Divi structure packs!

What’s Subsequent For Divi 5’s WooCommerce Integration?

The second one batch of WooCommerce Modules, specializing in cart and checkout pages, can be launched in the following few weeks, wrapping up the combination with WooCommerce. Those additions will permit customers to completely customise all the ecommerce funnel, from product surfing to checkout. The Divi 5 Public Beta will refine those options additional, incorporating person comments and extra worm fixes to make sure balance.

Past WooCommerce compatibility and integration, Divi 5 continues to conform with fresh options just like the Group Carousel Module for developing dynamic product sliders, the Lottie Module for including light-weight animations, and a brand new Flexbox Layout System for enhanced structure regulate. Those additions supplement the Woo modules, providing much more ingenious probabilities for ecommerce websites.

Check out Out Divi 5’s Woo Product Modules These days

Divi 5‘s Woo Product Modules mean you can create fascinating product and class pages with exceptional flexibility and creativity. The modules be offering a mix of ingenious freedom, dynamic content material integration, and function, all inside an intuitive interface. From customizable product galleries to customized layouts by way of the Theme Builder, Divi 5 makes developing high-converting retailer pages simple.

Are you in a position to dive into Divi 5? Download the latest Divi 5 Public Alpha to discover those modules and notice how they may be able to develop into your WooCommerce web page. We’d love to listen to your ideas. Percentage your comments within the feedback or hook up with us on our social media channels.

The put up Everything You Need To Know About Divi 5’s WooCommerce Product Modules gave the impression first on Elegant Themes Blog.

read more