In terms of ecommerce, status out way ditching cookie-cutter templates for product pages that now not handiest captivate but in addition convert. With Divi 5‘s Woo Product Modules, you’ll construct high-impact product pages completely from scratch, all whilst seamlessly integrating real-time WooCommerce information.

On this submit, we’ll stroll you thru making a product web page from scratch the use of Divi 5’s 17 Woo Product Modules and the Theme Builder. Let’s get began.

Working out The Woo Product Modules In Divi 5

Divi 5’s Woo Product Modules constitute a step ahead in ecommerce design, providing 17 local modules that pull dynamic information at once from WooCommerce. You’ll have complete keep an eye on over each and every component, from attention-grabbing visuals to seamless consumer interactions by way of Divi’s intuitive Visible Builder.

To make sense of this toolkit, we’ve grouped the 17 modules into 4 intuitive classes in line with their roles in a standard product web page glide. Every integrates easily with Woo’s backend, making sure your content material remains recent and practical. Let’s ruin them down:

Navigation & Messages

Get started robust through guiding customers and retaining them knowledgeable with those foundational parts that deal with orientation and real-time comments.

• Woo Breadcrumbs: This module generates a dynamic navigational path, linking out of your homepage hyperlinks thru classes to the present product web page. This is helping customers retrace their steps. It pulls retailer construction information at once from WooCommerce, making it very best for in-depth opinions of your catalog.
• Woo Understand: Highest for surfacing Woo machine indicators — like cart addition confirmations, error messages, or good fortune notifications. The module dynamically renders those parts, making sure that your consumers keep knowledgeable with out disrupting the design glide.

Product Show

On the middle of any compelling product web page, those modules show off the necessities: visuals, main points, and specifications that hook guests and construct consider.

• Woo Product Identify: Render the product’s title as a daring, customizable heading, sourced instantly from Woo’s submit information. It serves as your web page’s anchor for Search engine optimization-friendly hierarchy.
• Woo Product Description: Show the lengthy (or brief) description, pulling content material from Woo fields to create enticing, story-driven sections.
• Woo Product Pictures: Show off the featured symbol with pro-level choices, similar to zoom results or lightbox popups, and fetch Woo’s number one and gallery photographs.
• Woo Product Gallery: Extend the view with a grid or slider of extra photographs, seamlessly built-in from Woo’s gallery attachments.
• Woo Product Data: Show variable attributes (colours, sizes, fabrics), leveraging Woo’s database to explain choices and decrease cart abandonment.
• Woo Product Meta: Show taxonomy main points, similar to classes and tags, to fortify discoverability and context with out muddle.
• Woo Product Worth: Show dynamic pricing, together with sale pricing or variable charges, at once from Woo for accuracy that builds purchaser self assurance.
• Woo Product Score: Display big name scores along evaluate counts, leveraging Woo’s aggregated comments so as to add social evidence.
• Woo Product Inventory: Show availability badges, such as ‘In Inventory’ or ‘Low Inventory’, pulled from WooCommerce stock.

Interactions And Opinions

With those modules, you’ll flip passive browsers into energetic consumers.

• Woo Upload To Cart: Show off easy or variable product choices and an Upload To Cart button that you’ll taste the use of the Visible Builder.
• Woo Product Opinions: Create a scrollable checklist of shopper testimonials, whole with submission paperwork, all powered through Woo’s opinions for social validation.
• Woo Product Tabs: Prepare content material into tabs for descriptions, more information, and opinions, for a blank, mobile-optimized enjoy.

Similar And Lists

Wrap up with sensible upselling and broader explorations, the use of those to increase classes and inflate order values.

• Woo Similar Merchandise: Show pieces in line with Woo’s integrated common sense, displayed in columns to encourage the ones “consumers additionally purchased” moments.
• Woo Product Upsell: Spotlight top class or bundled choices out of your Woo upsell settings, strategically positioned to carry carts with higher-margin ideas.
• Woo Merchandise: Create product grids to show merchandise and clear out them through class, tags, and extra. With numerous customization choices, you’ll modify the collection of columns, the show order, and extra.

With those modules, you’re now not simply development pages however growing reports that convert. Within the subsequent phase, we’ll roll up our sleeves and step thru development a customized product web page, from format to release. Should you’d love to practice at the side of a finished design, fill out the shape beneath to obtain the information.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media handiest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can e-mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative wonderful and unfastened Divi sources, guidelines and tips. Practice alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely kind for your e-mail cope with beneath and click on obtain to get right of entry to the format pack.

DOWNLOAD

You could have effectively subscribed. Please test your e-mail cope with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!

How To Create A Customized Product Web page In Divi 5

This phase will information you thru growing a contemporary product web page the use of Divi 5’s Woo Product Modules. By means of the top, you’ll have an absolutely practical product web page that superbly showcases every product for your website online. Right here’s a handy guide a rough preview:

You’ll wish to make certain that WooCommerce is put in and activated and that you’ve got created no less than one product.

Step 1: Create A New Template

Subsequent, navigate to Divi > Theme Builder and click on the + Upload New Template button.

As soon as the modal seems, click on Construct New Template.

Within the Template Settings modal, scroll all the way down to and test All Merchandise. Click on Create Template to proceed.

Subsequent, click on Upload Customized Frame.

When the Theme Builder a lot, make a choice Construct From Scratch from the to be had choices.

Step 2: Upload Content material

Upload a unmarried column row to the web page.

When the Insert Module Or Row modal seems, find the Woo Modules possibility and make a choice it.

Upload The Woo Breadcrumbs Module

Find the Woo Breadcrumbs module and upload it to the row.

By means of default, This Product might be decided on within the Product dropdown menu within the Content material tab. This selection will permit Divi 5 to simply pull content material for every product in each and every class. For this educational, we can make a choice a product to show to assist you to see how the format will glance with a real product in view. As you upload modules to the design, make certain that This Product is all the time decided on.

Click on over to the Design tab and amplify the Textual content dropdown menu. Be certain the Paragraph tab is chosen and select Poppins because the Textual content Font, #5a4130 because the Textual content Colour, and 14px because the Textual content Textual content Dimension.

Subsequent, make a choice the Hyperlinks tab within the Textual content menu. Make a selection Poppins because the Hyperlink Font, Underline because the Hyperlink Font Taste, and #83A65B because the Hyperlink Textual content Colour.

Upload The Woo Product Pictures Module

Subsequent, upload a two-column row at once beneath the primary row within the format. Within the left column, upload the Woo Product Pictures module to the column.

Change to the Design tab. Extend the Symbol menu adopted through the Border menu. Set the Symbol Border Radius to 20px on both sides.

Scroll down to show the Sale Badge menu. Extend it and upload #C77347 because the Sale Badge Colour. Within the Textual content menu, make a choice Poppins because the Sale Badge Font, Uppercase for the Sale Badge Font Taste, #ffffff because the Sale Badge Textual content Colour, and 15px because the Sale Badge Textual content Dimension.

Upload The Woo Product Identify

Upload the Woo Product Identify module in the second one column.

Make a selection the Design tab and amplify the Identify Textual content menu. Set the Identify Heading Stage to H1, Poppins because the Identify Font, and #5A4130 because the Identify Textual content Colour. Set the Identify Textual content Dimension to 4em.

If you wish to make the format responsive as you cross alongside, you’ll click on the Edit Responsive Values button to make instant adjustments to any module, saving time as you design the web page.

When the Responsive Editor modal seems, you’ll modify the values in real-time. Input 2.75em for pill and telephone perspectives.

Upload The Woo Product Score Module

Subsequent, upload the Woo Product Score module beneath the Identify in the second one column.

Within the Design tab, amplify the Celebrity Score menu. Set the Celebrity Score Textual content Alignment to Left, #5A4130 because the Celebrity Score Textual content Colour, 15px because the Celebrity Score Textual content Dimension, and 1px because the Celebrity Score Letter Spacing.

Subsequent, amplify the Textual content menu. Input Poppins because the Textual content Font, #5A4130 because the Textual content Textual content Colour, and 13px because the Textual content Textual content Dimension.

Upload The Woo Product Description Module

Subsequent, upload the Woo Product Description Module to the second one column.

Within the Content material tab, come to a decision whether or not to make use of the Description or Brief Description within the Description Kind box.

Transfer to the Design tab. Extend the Textual content dropdown menu and make a choice Poppins because the Textual content Font, #5A4130 because the Textual content Textual content Colour, and 1.8em because the Textual content Line Top.

Upload The Woo Product Worth Module

Subsequent, we’ll upload the Woo Product Worth module to the second one column.

Extend the Worth Textual content menu. Make a selection Poppins because the Worth Font and #5A4130 because the Worth Textual content Colour.

Upload The Woo Product Upload To Cart Module

Upload the Woo Product Upload To Cart module.

Within the Design tab, amplify the Box Labels menu and input Poppins because the Box Labels Font. Within the Box Labels Textual content Colour box, use #5A4130.

Subsequent, amplify the Fields menu. Input #5A4130 within the Fields Background Colour and Fields Center of attention Background Colour fields. Set the Opacity to 0. Within the Fields Center of attention Textual content Colour box, input #5A4130.

Extend the Fields Textual content menu. Input Poppins because the Box Font, #5A4130 because the Fields Textual content Colour, and 16px because the Fields Textual content Dimension.

Subsequent, amplify the Box Border menu. Within the Fields Border Radius settings, input 5px. Upload 1px Box Border Width and set the Fields Border Colour to #5A4130.

Within the Dropdown Menu settings, set the Dropdown Menus Background Colour and Fields Center of attention Background Colour to #5A4130 with an Opacity of 0. Set the Dropdown Menus Center of attention Textual content Colour to #5A4130.

Subsequent, amplify the Box Spacing settings. Set the Dropdown Menu Margin to 5px on both sides.

Within the Module Textual content dropdown menu, input Poppins because the Dropdown Menu Font, #5A4130 because the Dropdown Menu Textual content Colour, and 13px because the Dropdown Menu Textual content Dimension.

Subsequent, amplify the Box Border menu. Upload 1px Dropdown Menus Border Width and set the Dropdown Menus Border Colour to #5A4130.

Taste The Button

The final step on this module is to taste the Button. Extend the Button menu and toggle Use Customized Kinds For Button on.

Extend the Button Background settings and assign #83A65B because the Button Background Colour.

Within the Button Border menu, upload 50px Button Border Radius.

Within the Button Textual content menu, use Poppins because the Button Font, Uppercase within the Button Font Taste, and 15px for the Button Textual content Dimension.

In any case, within the Button Spacing menu, upload 15px Button Padding to the peak and backside and 35px for the left and proper.

Upload The Woo Product Meta Module

The final module so as to add to the second one column of the row is the Woo Product Meta module.

Within the Design tab, amplify the Textual content menu. For the Paragraph tab, input Poppins because the Meta Font, Left within the Meta Textual content Alignment box, and #5A4130 within the Meta Textual content Colour box.

Tab over to Hyperlinks. Make a selection Poppins because the Hyperlink Font and input #83A65B because the Hyperlink Textual content Colour.

Upload The Woo Product Tabs Module

Upload a brand new single-column row underneath the two-column row that homes our product data. Make a selection the Woo Product Tabs module.

Extend the Frame Textual content menu. Input Poppins for the Font and set the Textual content Colour to #5A4130.

Subsequent, amplify the Tab Textual content menu. Input #83A65B because the Energetic Tab Textual content Colour and #5A4130 because the Tab Textual content Colour. Set the Tab Font to Poppins.

Upload The Woo Similar Merchandise Module

Upload a brand new single-column row. Make a selection and upload the Woo Similar Merchandise module to the web page.

Extend the Overlay menu. Upload #C77347 to the Overlay Icon Colour box.

Open the Symbol menu. Within the Border settings, upload 20px Symbol Border Radius to both sides.

Make a selection and amplify the Celebrity Score menu. Set the Celebrity Score Textual content Alignment to Left. Use #C77347 for the Celebrity Score Textual content Colour box.

Open the Sale Badge menu. Input #C77347 because the Sale Badge Color. Extend the Textual content menu. Make a selection Poppins because the Sale Badge Font, set the Sale Badge Font Taste to Uppercase, the Sale Badge Textual content Colour to #ffffff, the Sale Badge Textual content Dimension to 15px, and the Sale Badge Letter Spacing to 1px.

Subsequent, open the Identify Textual content menu. Use Poppins because the Identify Font, #5A4130 because the Identify Textual content Colour, and 4em for the Identify Textual content Dimension. Use Divi 5’s Responsive Editor to set the pill and telephone perspectives to 2.75em.

Open the Product Identify Textual content menu. Input Poppins for the Product Identify Font and set the Product Identify Textual content Alignment to Left. Use #5A4130 because the Product Identify Textual content Colour and set the Product Identify Textual content Dimension to 16px. Use 1.2em because the Product Identify Line Top.

For the Worth Textual content menu, input Poppins because the Worth Font and use #5A4130 because the Worth Textual content Colour.

In any case, open the Sale Worth Textual content menu. Use Poppins because the Sale Worth Font. Within the Sale Worth Textual content Colour box, input #5A4130.

Step 3: Check For Responsiveness

Earlier than saving your product web page, use Divi 5’s Customizable Responsive Breakpoints to navigate thru every display measurement. This guarantees that your format appears seamless on each and every instrument. By means of default, Divi allows 3 breakpoints, however you’ll simply allow all 7 of them through clicking the ellipsis menu in Divi’s toolbar on the peak of the Builder. Use the toggles to permit the breakpoints you’d like, then click on the Save Button.

As you navigate every breakpoint, you’ll simply exchange your design.

Step 4: Save The Web page

If you’ve made the entire vital refinements, save the product web page within the Theme Builder. Click on the Save Button on the peak proper nook of the Builder.

When redirected again to the WordPress dashboard, save the Template through clicking the Save Adjustments Button.

That’s it! As you’ll see, growing a sophisticated and efficient product web page template is really easy because of Divi 5’s intuitive Visible Builder and Woo Product modules.

Construct Your Subsequent Ecommerce Site In Divi 5!

Divi 5‘s Woo Product modules free up inventive freedom on your ecommerce website online, letting you construct product pages which can be as distinctive as your emblem. From navigation to dynamic show modules, those 17 local modules seamlessly combine Woo information with Divi’s Visible Builder for enticing, responsive designs with out the use of third-party plugins. Should you’re able to take your next step, download the latest version of Divi 5 and experiment with those robust modules.

We’d love to listen to your ideas about those new modules. Please remark beneath or submit on our social media channels.

The submit How To Create Custom Product Pages In Divi 5 (New Woo Modules) seemed first on Elegant Themes Blog.

read more