Compatibility with WooCommerce has now been expanded to Divi 5, supplying you with complete keep watch over over product pages with out depending on WooCommerce’s integrated templates. The newly-integrated WooCommerce Product Modules can help you design attractive, 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 trendy structure keep watch over.
On this submit, we’ll duvet the modules’ key options and display you tips on how to use them in your subsequent Divi 5 ecommerce site. Let’s dive in.
What Are WooCommerce Product Modules?
Woo Product Modules are specialised content material components inside of Divi 5, designed to customise product and class pages for Woo-powered shops. Those modules exchange the WooCommerce templates that come same old with the plugin, enabling you to create customizable layouts. In contrast to 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 a vital milestone. Those modules, which duvet all product and class web page design facets, are not in legacy mode, that means they’re all absolutely optimized for Divi 5’s trendy 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 remainder 8 Woo Modules, thinking about 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 able to 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 comprises equipment designed to maintain a selected side of product and class web page design. Those modules are:
- Woo Breadcrumbs: Presentations navigational breadcrumb trails to lend a hand customers simply navigate the shop.
- Woo Realize: Presentations machine 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 principle long-form product description.
- Woo Product Gallery: Presentations further product photographs in grid or slider codecs.
- Woo Product Pictures: Presentations the principle product symbol or a gallery of pictures.
- Woo Product Knowledge: Presentations product main points like weight, dimensions, or attributes.
- Woo Product Meta: Presentations product SKU, classes, and tags.
- Woo Product Value: Presentations the product’s worth, together with sale costs.
- Woo Product Ranking: Presentations the typical famous person score and evaluation rely.
- Woo Product Evaluations: Lets in shoppers to view and post product opinions.
- Woo Product Inventory: Signifies product availability and inventory ranges.
- Woo Product Tabs: Presentations default product tabs for description, additional info, 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: Presentations comparable merchandise in accordance with classes or tags.
In combination, those modules supply the entirety you want to construct product and class pages, from navigational breadcrumbs to dynamic product shows.
Inventive Freedom
Divi 5’s WooCommerce Product Modules unfastened customers from the restrictions of same old WooCommerce Templates. With those modules, you’ll be able to absolutely keep watch over your product pages’ structure, construction, and design, developing distinctive stories.
The modules fortify dynamic content material, that means they pull product information at once from WooCommerce, making sure real-time updates for costs, inventory ranges, and outlines. This permits you to construct pages that pressure engagement and conversions with out requiring third-party plugins or customized code.
Customization Choices
Each and every module has intensive design settings, all manageable throughout the Visible Builder. You’ll customise components like product galleries, sale badges, buttons, and extra with choices for typography, colours, spacing, and animations.
For instance, you’ll be able to 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 famous person rankings completely along with your design.
Those settings can help you create cohesive, branded retailer pages very easily.
Dynamic Templates With Theme Builder
Divi 5’s Theme Builder permits you to include the whole possible of WooCommerce Product Modules through permitting you to create international templates for product and class pages. With Theme Builder, you’ll be able to design a unmarried template that applies to the entire merchandise and classes to your retailer, making sure a constant, cohesive glance.
Loop Builder For Dynamic WooCommerce Content material
The Divi 5 Loop Builder gives another strategy to construct dynamic Woo content material. With Loop Builder, you’ll be able to question WooCommerce merchandise and design versatile product loops the use of any Divi component, developing layouts, lists, and carousels that transcend the fastened 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 via 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. Below Merchandise, make a selection All Merchandise to assign the template.
Click on Create Template to assign it.
Click on Upload Customized Frame. This will likely 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 be able to construct a template from scratch, make a choice a premade structure, or construct with AI. We’ll make a selection 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 choice 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 Format Machine provides you with extra keep watch over over how your product pages glance than ever, together with converting how your WooCommerce Product Modules stack throughout other display 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 Pictures Module
To find and make a selection the Woo Product Pictures module and upload it to the primary column.
This Submit is chosen through default within the Product box within the Content material tab. When you’d love to construct the template the use of an current product, make a choice it from the dropdown menu. It is a nice strategy to preview how your template will glance whilst developing it. Have in mind to change it again to This Submit sooner than the overall save.
Extend the Components dropdown menu to expose the settings. Right here, you’ll be able to keep watch over 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 be able to drive the picture to occupy the entire to be had house (drive fullwidth), upload a border, field shadow, regulate spacing, or upload filters.
You’ll 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 is going to glance within the template.
Subsequent, navigate to the module’s Design tab and extend the Identify Textual content dropdown menu. Right here, you’ll be able to assign a font and magnificence the heading as you’d like.
Upload The Woo Product Value Module
Below the product identify, click on so as to add a brand new module. Choose the Woo Product Modules and scroll to choose the Woo Product Value Module.
Within the Design tab, you’ll be able to taste each side of the product’s worth, together with the textual content, sale textual content, new worth 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 be able to make a choice to turn or conceal the famous person score and buyer opinions rely.
Within the Design tab, the Format dropdown menu permits you to make a choice tips on how to show the famous person score. Components may also be displayed inline or stacked.
Different styling choices come with assigning a colour, textual content dimension, and letter spacing for the celebs and styling choices for the score textual content.
Upload The Woo Product Description Module
Below the Woo Big name Ranking Module, click on so as to add a brand new Woo Module. This time, we’ll make a selection the Woo Product Description Module. Within the Content material tab, make a choice which description to show (description or brief description).
Within the Design tab, you’ll be able to 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’ll permit your shoppers so as to add the product to their carts and make a choice any permutations assigned to the product.
The Components toggles within the Content material tab mean you can display or conceal the amount box and to be had inventory. Fast notice: For the inventory amount to show, you should test organize inventory within the Woo product itself.
You’ll taste the sphere 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 additionally upload the Woo Product Tabs Module to show an outline, opinions, and further information about your product.
For optimum succeed in, you’ll be able to show a sequence of Similar Merchandise for your product template to inspire your website’s guests to discover further merchandise to your retailer, expanding the risk of a conversion.
Saving The Template
As soon as completed including modules, make any further adjustments you want, after which save the template through clicking at the Save button on the height 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 be able to see, making a product template with Divi 5’s Woo Product Modules is an easy procedure. We gained’t duvet all modules on this instructional, however the use of they all, you’ll be able to create spectacular product or class pages that stay your guests engaged.
@media simplest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner 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:sooner 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 kind enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container kind 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 will be able to e mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative superb and unfastened Divi sources, guidelines and tips. Practice alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e mail deal with underneath and click on obtain to get right of entry to the structure pack.
You’ve effectively subscribed. Please test your e mail deal with to substantiate your subscription and get get right of entry to to unfastened 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, will probably be launched in the following few weeks, wrapping up the combination with WooCommerce. Those additions will allow customers to completely customise all of the ecommerce funnel, from product surfing to checkout. The Divi 5 Public Beta will refine those options additional, incorporating consumer comments and further computer virus fixes to make sure balance.
Past WooCommerce compatibility and integration, Divi 5 continues to conform with fresh options just like the Staff Carousel Module for developing dynamic product sliders, the Lottie Module for including light-weight animations, and a brand new Flexbox Format Machine for enhanced structure keep watch over. Those additions supplement the Woo modules, providing much more ingenious probabilities for ecommerce websites.
Take a look at Out Divi 5’s Woo Product Modules Nowadays
Divi 5‘s Woo Product Modules mean you can create charming product and class pages with unprecedented flexibility and creativity. The modules be offering a mix of ingenious freedom, dynamic content material integration, and function, all inside of an intuitive interface. From customizable product galleries to customized layouts by means of the Theme Builder, Divi 5 makes developing high-converting retailer pages simple.
Are you in a position to dive into Divi 5? Obtain the most recent Divi 5 Public Alpha to discover those modules and notice how they may be able to turn out to be your WooCommerce website. We’d love to listen to your ideas. Proportion your comments within the feedback or hook up with us on our social media channels.
The submit The whole thing You Want To Know About Divi 5’s WooCommerce Product Modules seemed first on Chic Issues Weblog.
WordPress Web Design