WooCommerce And Divi 5: The Complete Ecommerce Guide

by | Mar 8, 2026 | Etcetera | 0 comments

Construction an internet retailer used to imply balancing design and capability. You sought after a shop that regarded polished, felt on-brand, and labored easily at checkout, however reaching all 3 continuously took additional effort.

Divi and WooCommerce have lengthy been a robust mixture for construction on-line shops, and Divi 5 takes that additional. With a rebuilt basis, trendy structure programs, a more potent design workflow, and local WooCommerce modules, you could have a lot more regulate over how your retailer appears and works throughout product, cart, checkout, and archive templates.

That implies the design selections you are making early, like your colours, typography, and product card styling, can lift via your retailer extra simply and extra persistently. As a substitute of rebuilding the similar patterns over and over again, you create the basis as soon as and reuse it as your retailer grows.

On this publish, we’ll stroll you via the entire procedure, from putting in place your retailer’s visible basis to construction your store, product, cart, and checkout pages, the entire approach to going reside.

Why Divi 5 And WooCommerce

WooCommerce is the engine. It reliably handles your merchandise, bills, delivery, and stock. What it doesn’t do by itself is provide you with a lot visible regulate over how your retailer appears and feels. The default templates are useful, however they are able to really feel inflexible, and customizing them the normal approach continuously method operating with template overrides or customized CSS. For lots of retailer homeowners, that hole between how their retailer works and the way they would like it to seem is the place the disappointment begins.

Divi 5 closes a lot of that hole, and it does so at a degree previous variations of Divi couldn’t fit. The rebuilt structure is cleaner and extra trendy, however the larger shift is in how the gadget works as a complete.

Divi 5 is designed that will help you arrange your retailer holistically, no longer simply part by way of part. That philosophy displays up in 4 distinct techniques.

1. Local WooCommerce Modules

Divi 5 comprises local WooCommerce modules for product pages, product listings, cart pages, checkout pages, notices, breadcrumbs, and extra. Every one pulls reside information immediately from WooCommerce, so the content material remains in sync along with your retailer. You center of attention at the structure and styling, whilst WooCommerce handles the underlying retailer information.

woo modules

2. Loop Builder For Customized Product Grids

The Loop Builder takes {that a} step additional. You design a unmarried product card precisely the way in which you need it, attach it for your retailer’s reside information by way of Dynamic Content material, and the Loop Builder routinely repeats that design for each and every product to your catalog. Post a brand new product, and it could possibly inherit that card design instantly, no handbook updates, no reformatting. Pair the Loop Builder with the Group Carousel module, and your product sliders can replace the similar approach.

3. Device-Stage Retailer Construction With Theme Builder

Maximum web page developers deal with each and every web page as its personal undertaking. The Theme Builder in Divi 5 allows you to deal with your retailer as one hooked up gadget. You’ll be able to construct one template on your store web page, one on your product pages, one on your cart, and one for checkout, and every template can observe globally once you reserve it. Replace a font, modify a structure, or change a colour, and that adjust rolls out throughout each and every related template.

Managing a rising retailer begins to really feel much less like repetitive upkeep and extra like operating from a repeatable gadget.

theme builder

4. A Constructed-In Design Device

Underpinning all of that is how Divi 5 handles design consistency. Design Variables, Presets, and Advanced Units paintings in combination to stay your retailer’s visible identification constant as you construct.

  • You outline your model colours, fonts, spacing values, hyperlinks, and different reusable values as soon as within the Variable Supervisor and will reuse them throughout your web page.
  • Presets assist you to save a component’s styling and reuse it throughout your retailer, protecting your product playing cards, buttons, and worth tags visually constant.
  • Complex Devices provide you with exact regulate over spacing and sizing at each and every display measurement, so the shop feels intentional whether or not any person’s buying groceries on a pc or a telephone.

On peak of that, Divi 5 helps to keep WooCommerce customization visible and drag-and-drop. You’ll be able to construct so much with out writing code, even though customized CSS or deeper WooCommerce customization might nonetheless be useful on some shops. To provide you with a quicker get started, we’ve put in combination a unfastened set of ready-made ecommerce layouts you’ll be able to import immediately and customise to compare your model. You’ll in finding the obtain hyperlink originally of this information, and also you’ll need to use the most recent model of Divi 5 to observe alongside.

What You Want Earlier than Getting Began

This information assumes you have already got WordPress put in. From there, you wish to have two issues in position ahead of we commence construction: WooCommerce and Divi 5.

Should you haven’t put in WooCommerce but, head for your WordPress dashboard, move to Plugins, seek for WooCommerce, and turn on it. The onboarding go with the flow will stroll you during the fundamentals and permit you to arrange the core retailer pages and settings you wish to have, together with Store, Cart, Checkout, and My Account. Those are the pages Divi 5 can take over visually after we get going.

install woocommerce

Subsequent, set up Divi 5. Log in for your Sublime Issues member house and obtain the most recent Divi zip package deal. Then add it underneath Look > Issues to your WordPress dashboard.

install divi

As soon as it’s energetic, authenticate your Sublime Issues account to obtain updates and get admission to Divi services and products. That’s your setup executed. Each step from right here occurs within Divi 5.

divi dashboard

Earlier than we bounce into construction, it’s value taking a second to know how Divi 5 constructions a WooCommerce retailer, because it shapes each and every choice we make from right here on out.

Working out Ecommerce Structure In Divi 5

Earlier than we commence construction, you wish to have to understand the place the entirety lives. Pass to Divi to your WordPress dashboard sidebar and click on Theme Builder. That is the place you’ll create and arrange the shop templates used all the way through this information. Every template will get assigned to a particular WooCommerce web page or content material kind, and Divi takes over the design from there.

theme builder

Right here’s how the 4 template varieties damage down. The Store template controls your primary product checklist web page. The All Merchandise template applies to person product pages throughout your catalog and controls what shoppers see once they click on via to them. The Cart template is assigned for your Cart web page, and the Checkout template is assigned for your Checkout web page. Every one is constructed independently within the Visible Builder, stored as soon as, after which implemented the place it’s assigned.

See also  How to Create a WooCommerce Cart Page Template with Divi

Obtain & Get admission to The Layouts & Templates Used In This Information

The obtain comes as a .ZIP record containing a couple of JSON recordsdata. Those recordsdata are designed to paintings with Divi 5’s local import programs, so setup is fast if you’re on a contemporary Divi 5 set up. The structure recordsdata are uploaded to the Divi Library, whilst the templates are uploaded immediately to the Theme Builder.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can electronic mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of different wonderful and unfastened Divi sources, pointers and tips. Apply alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely kind to your electronic mail deal with under and click on obtain to get admission to the structure pack.

You might have effectively subscribed. Please test your electronic mail deal with to substantiate your subscription and get get admission to to unfastened weekly Divi structure packs!

How To Use Divi 5 With WooCommerce

Step 1. Set Up Your Design Variables

Earlier than you contact a unmarried web page, it’s useful to define your store’s visual identity in a single position. Recall to mind it as laying the basis that each and every template you construct will draw from. Design Variables assist you to just do that. You outline your colours, fonts, spacing, and extra as soon as throughout the Variable Supervisor, and Divi 5 can reuse the ones values throughout all of your retailer. When you wish to have to replace your number one coloration later, you exchange it as soon as, and each and every connected use updates.

To get began, open any web page to your WordPress dashboard and release the Visible Builder. Search for the Variable Supervisor icon within the left sidebar and click on it. This opens a panel with tabs for Colours, Fonts, Numbers, Textual content, Pictures, and Hyperlinks.

variable manager

On your retailer, you’ll essentially paintings with Colours and Fonts. Get started with the Colours tab. Create or edit the variables you need to make use of on your model, reminiscent of number one, secondary, heading, and frame textual content colours.

colors tab

Click on into the Number one Colour box, input your model’s primary coloration as a hex code, and click on Save Variables.

Do the similar for Secondary. Those two colours continuously pressure maximum of your retailer’s visible identification, protecting the entirety from buttons and hyperlinks to accents and highlights. In case your retailer makes use of further tones, reminiscent of a background coloration or a particular color on the market badges, upload them as new variables and provides them transparent, descriptive names like Background Mild or Sale Badge Purple in order that they’re simple to spot later.

save colors

Transfer to the Fonts tab subsequent. That is the place you outline the font variables you’ll use for headings and frame textual content throughout product titles, costs, descriptions, and navigation.

save fonts

When you’re right here, it’s value spending a couple of mins at the different tabs too. Within the Numbers tab, save your base spacing values, reminiscent of an ordinary padding measurement for sections and a border radius for buttons and product playing cards. Within the Textual content tab, retailer ordinary content material like your tagline or go back coverage blurb that looks throughout a couple of pages. Within the Hyperlinks tab, save your social media URLs and any hyperlinks you intend to reuse within the header, footer, and product pages. Small selections made now translate into numerous time stored as you’re employed via every template.

As soon as your variables are stored, each and every template you construct from this level can draw from this basis. And whilst you import the unfastened layouts incorporated originally of this information, the Inspector device permit you to in finding hardcoded kinds and exchange them with your personal Design Variables.

Step 2. Construct Your Ecommerce Header And Footer

Your header and footer are the only factor each and every web page of your retailer stocks, so construction them first signifies that each and every template you create later on can inherit them routinely. You put them up as soon as and transfer on.

Pass to Divi to your WordPress dashboard sidebar and click on Theme Builder. Within the Default Website online Template field, click on Upload World Header after which select Construct World Header.

build global header

This opens the Visible Builder, the place you’ll design the header. Get started by way of including a row with 3 columns, your brand at the left, navigation within the heart, and a button or application house at the proper. This sensible ecommerce structure provides shoppers fast get admission to to a very powerful portions of your retailer.

3 column row

Within the first column, upload an Symbol module and add your retailer brand. Within the heart column, upload a Menu module and make a selection the navigation menu you’ve arrange in WordPress. Within the 3rd column, upload a Button module or application parts like account and cart hyperlinks. Pull to your model colours immediately out of your Design Variables to stay the entirety in keeping with what you place up in Step 1.

header design

For cart, account, and seek shortcuts, you’ll be able to upload Icon modules and hyperlink them to the related locations, or use whichever Divi modules perfect have compatibility the interplay you need.

icon modules

As soon as your structure is in position, taste the segment background, set your font colours the usage of your Design Variables, and test the header throughout display sizes. Divi 5’s Responsive Controls assist you to modify the structure at pill and cellular breakpoints so the entirety remains in position on smaller monitors.

header

Whilst you’re pleased with it, click on Save within the Visible Builder toolbar, then click on Go out to go back to the Theme Builder dashboard.

theme builder global

Click on Upload World Footer in the similar Default Website online Template field and select Construct World Footer. Your footer doesn’t want to be advanced. A blank structure along with your brand, a brief set of secondary hyperlinks like your refund coverage and phone web page, social icons, and a copyright line covers what maximum shops want. Construct it the similar approach you constructed the header, then save when executed.

global footer layout

Again at the Theme Builder dashboard, click on Save Adjustments within the peak proper to make each templates reside.

save changes

Each web page of your retailer can now use this header and footer, together with the WooCommerce templates we’re about to construct.

You’ll be able to in finding the Header-Footer-Template.json record within the freebie folder originally of this information, waiting to import immediately into your Theme Builder.

Step 3. Construct Your Store Web page With Loop Builder

The store web page is the place shoppers browse, uncover, and come to a decision. Getting it proper issues greater than nearly every other web page to your retailer, and the Loop Builder is what makes it imaginable to design it the way in which you need with out rebuilding it each and every time your catalog grows.

See also  Get a Free Email Marketing Layout Pack for Divi

1. Create The Store Web page Template

Pass to Divi to your WordPress dashboard sidebar and click on Theme Builder. Click on Upload New Template and select Construct New Template.

add template

Within the Template Settings modal, scroll right down to WooCommerce Pages and test the Store choice. Click on Create Template.

shop page template

As soon as the template seems within the dashboard, click on Upload Customized Frame and make a selection Construct Customized Frame.

build custom body

This opens the Visible Builder, the place you’ll design all of the structure of the store web page.

2. Construct The Web page Structure

Get started by way of including a single-column row on the peak on your store identify. Upload a Heading module and sort to your store identify or a brief label like “Store” or “Our Merchandise.” This provides the web page a transparent place to begin for guests.

shop heading

Under that, upload a brand new segment on your product grid. That is the place the Loop Builder will reside. Upload a row to this segment, verify the row is the usage of Flex, and permit wrapping if wanted. This is helping your product playing cards wrap well throughout rows at other display sizes, combating overflows and structure breaks.

layout wrap

3. Design Your Product Card

Within the row, make a selection the column and open the Content material tab. Scroll down to seek out the Loop choice and toggle Loop Component on.

As soon as enabled, the Loop question settings seem. Set the Submit Kind to Product, configure the collection of merchandise consistent with web page, and set Order By means of to Date or your most popular sorting.

This tells Divi 5 which merchandise to drag out of your WooCommerce retailer and in what order they seem.

product page loop settings

Now it’s time to design the cardboard itself. Get started by way of including 10px padding and a 20px border radius to the column. Those small selections give every card respiring room and a cleaner visible form, setting apart merchandise from one any other.

border padding

For the product symbol, move to the column’s Background Symbol surroundings and use the Dynamic Content material choice to choose the product’s featured symbol within the loop context. This connects the cardboard’s background immediately to every product’s featured symbol in WooCommerce, so each and every card shows the precise symbol routinely.

Upload an Icon module and a Module Team throughout the column. The Icon can create visible house above the product main points so the background symbol remains visual, and the Module Team helps to keep the entire card parts contained and more straightforward to regulate as a unmarried unit.

icon and module group

Customise the Icon module and modify its spacing so the background symbol has sufficient respiring room.

Within the Module Team, upload a Heading module for the product identify. Hover over the Heading box within the Content material tab, click on the Dynamic Content material icon, and make a selection Loop Product Name. Every product’s identify populates routinely out of your retailer. Under that, upload a Textual content module for the fee and attach it to Loop Product Worth the usage of the similar Dynamic Content material choice. This pulls the fee immediately from WooCommerce, together with sale costs when acceptable.

Your base store web page is waiting. If you wish to take it additional, you’ll be able to upload a sale badge the usage of Stipulations within the Complex tab to turn it best on discounted merchandise, observe a hover impact at the Module Team for a extra polished really feel, and save all of the card as a Preset so you’ll be able to reuse it somewhere else in your web page. That remaining step is value doing ahead of you progress on, for the reason that identical card design can lift via to class pages later with out rebuilding it from scratch.

Click on Save within the Visible Builder toolbar, then click on Go out to go back to the Theme Builder dashboard. Click on Save Adjustments to put up the template. Consult with your store web page at the entrance finish to peer the Loop Builder operating along with your actual merchandise, populating the grid routinely.

Should you’d choose a quicker setup with much less customization, you’ll be able to additionally construct your store web page the usage of the Woo Merchandise module, which gives a more effective drag-and-drop way for product listings.

woo products design

Each store structure designs are incorporated within the freebie. Import Store-Segment-Loop-Builder.json or Store-Segment-Woo-Merchandise.json from the freebie folder into your Divi Library to make use of both design immediately.

Step 4. Set Up Your Product Web page

Each product to your retailer wishes its personal web page, however that doesn’t imply you need to design every one for my part. You construct one template, assign it to all merchandise, and WooCommerce routinely pulls the precise content material for every product.

Again within the Theme Builder, click on Upload New Template and select Construct New Template. Within the Template Settings modal, scroll down and test All Merchandise. Click on Create Template, then click on Upload Customized Frame and make a selection Construct Customized Frame.

all products

Including The Modules

Get started with a single-column row on the peak and upload the Woo Realize module. This handles gadget messages like “Merchandise added to cart” or inventory warnings, and it must take a seat above the entirety else at the web page.

woo notice

Under that, upload the Woo Breadcrumbs module. This provides shoppers a transparent navigation path appearing the place they’re to your retailer, like House / Class / Product Identify, so they are able to transfer again via your retailer with out depending at the browser button.

add woo breadcrumbs

Subsequent, upload a two-column row. That is the core of your product web page structure. The left column holds the product visuals, and the precise column holds the entirety a buyer must make a purchase order choice.

Within the left column, upload the Woo Product Pictures module. It pulls the product’s featured symbol and gallery photographs immediately from WooCommerce.

2 column row

In the precise column, construct the acquisition go with the flow from peak to backside. Upload the Woo Product Name module and set the heading degree to H1. Under that, upload the Woo Product Score module to show celebrity scores and assessment counts. Then upload the Woo Product Description module. Within the Content material tab, you’ll be able to choose from the entire description or the quick description relying on how a lot element you need above the fold.

product woo modules

Upload the Woo Product Worth module subsequent, which routinely shows each common and sale costs. Under that, upload the Woo Product Upload To Cart module. This handles the volume selector, the Upload to Cart button, and variation dropdowns for variable merchandise, all pulled from WooCommerce. Whole the precise column the usage of the Woo Product Meta module, which shows supporting main points reminiscent of SKU, classes, and tags underneath the cart button.

Under the two-column row, upload a single-column row and position the Woo Product Tabs module and, if you need a separate main points block, the Woo Product Knowledge module. Those stay the decrease segment of the web page arranged and provides shoppers get admission to to specifications and main points with out cluttering the principle acquire house. Upload yet another single-column row on the backside and position the Woo Similar Merchandise module.

woo modules on product page

The Woo Similar Merchandise module generally pulls merchandise with comparable phrases, reminiscent of shared classes or tags, and shows them as a grid on the backside of the web page, giving shoppers someplace to move if the present product isn’t slightly proper. End by way of including the Woo Product Critiques module, and your product web page template is entire. Take a look at your structure throughout display sizes the usage of Divi 5’s responsive controls ahead of saving.

See also  7 Best AI SEO Tools in 2023 (Reviewed & Compared)

Click on Save within the Visible Builder, then Go out again to the Theme Builder dashboard and click on Save Adjustments to make the template reside. Right here’s an entire information to creating a product page with the new Woo modules in Divi 5.

You’ll be able to in finding the Product-Web page-Template.json record within the freebie folder originally of this information, waiting to import into your Theme Builder.

Step 5. Set Up Your Cart And Checkout Pages

The cart and checkout pages are the place the entirety you’ve constructed both will pay off or falls aside. A well-designed product web page can convey a buyer proper to the brink of a purchase order, and a cluttered cart or a complicated checkout shape can nonetheless lose the sale on the remaining second. Those two pages deserve the similar care you set into the remainder of your retailer.

Construction The Cart Web page

Again within the Theme Builder dashboard, click on Upload New Template and select Construct New Template. Within the Template Settings modal, scroll right down to WooCommerce Pages and test the Cart choice. Click on Create Template, then click on Upload Customized Frame to open the Visible Builder.

use on cart

Get started with a single-column row on the peak. Upload a Heading module and set the textual content to Cart.

Upload the Woo Realize module under that and set the Web page Kind to Cart within the Content material tab. This guarantees the module shows cart-specific messages, reminiscent of coupon confirmations and inventory indicators, quite than generic ones.

cart post type

Under that, upload the Woo Cart Merchandise module. This shows the entirety within the buyer’s cart, together with product photographs, names, amounts, and costs. Within the Content material tab you’ll be able to regulate precisely which parts seem, together with the Product Symbol, Coupon Code box, Replace Cart button, and Take away Merchandise icon.

woo cart modules

Upload a brand new two-column row under. The left column is a great position for the Woo Move Sells module, which surfaces comparable merchandise and provides shoppers a reason why to stay surfing ahead of they take a look at. In the precise column, upload the Woo Cart Totals module, which shows the order abstract, together with subtotal, delivery, taxes when enabled, and the general overall, in conjunction with the Continue to Checkout button.

cart totals

Construction The Checkout Web page

Again within the Theme Builder dashboard, click on Upload New Template once more, then select Construct New Template. In the Template Settings modal, scroll to WooCommerce Pages and test the Checkout field. Click on Create Template, upload a customized frame, and open the Visible Builder.

checkout template

The checkout web page works properly with a two-column structure. Get started with a single-column row on the peak and upload the Woo Realize module. This time, set the Web page Kind to Checkout so it shows checkout-specific messages like box validation mistakes and coupon confirmations.

add woo notice

Upload a two-column row under. Within the left column, upload the Woo Checkout Billing module for billing main points, the Woo Checkout Delivery module under it for the delivery deal with, and the Woo Checkout Knowledge module on the backside for added order notes. In the precise column, upload the Woo Checkout Main points module to turn the order abstract with product names, amounts, and totals, then the Woo Checkout Cost module under it for the cost shape and Position Order button.

woo checkout

Earlier than you save, a couple of issues are value getting proper in this web page. Stay it distraction-free so there’s not anything pulling shoppers away ahead of they entire their order. Make the Position Order button distinguished and simple to seek out. Upload consider indicators, reminiscent of a safety badge or accredited cost icons, close to the cost segment, as small main points like those can support purchaser self assurance. And test the web page on cellular sparsely, as a result of a big portion of on-line purchases occur on telephones, and a checkout that breaks on smaller monitors will price you gross sales.

If you’re pleased with each pages, save every template within the Visible Builder and click on Save Adjustments within the Theme Builder dashboard.

The Cart-Web page-Template.json and Checkout-Web page-Template.json recordsdata are each incorporated within the freebie folder originally of this information.

Step 6. Class And Product Discovery Pages

In case your retailer has a couple of product classes, a devoted web page for every one provides shoppers a extra targeted surfing revel in and makes your catalog more straightforward to navigate. Construction one follows the similar procedure as your store web page, with one distinction within the Loop question settings.

Whilst you permit the Loop Component in your column and set the Submit Kind to Product, you’ll see an Most effective Come with Posts With Particular Phrases box. Make a choice your product class there and the Loop Builder will pull best the goods that belong to it.

choose product category in loop builder option

The Product-Class-Segment.json record is incorporated within the freebie originally of this information, waiting to import into your Divi Library and customise.

Your Ecommerce Template Preview

Each template on this information has a ready-made model within the freebie under. If you need the entirety directly, import All-WooCommerce-Theme-Builder-Templates.json into your Theme Builder and All-Store-and-Class-Sections.json into your Divi Library. Or take hold of person recordsdata for simply the pages you wish to have. Both approach, open the Inspector device and change to your Design Variables to convey any structure consistent with your model in only some clicks. That is what all the set seems like.

woocommerce layouts

header footer shop layouts

Configure Your Retailer Settings

Together with your templates constructed, the very last thing status between you and release is your WooCommerce configuration. Head to WooCommerce > Settings to your WordPress dashboard and paintings during the necessities ahead of your first order is available in. Below the Bills tab, permit the gateways you need to simply accept, like Stripe, PayPal, or direct financial institution switch. Below Delivery, create zones for the areas you ship to and assign your charges. If you wish to have taxes, first permit tax calculations underneath WooCommerce > Settings > Common, then configure the Tax tab and come to a decision whether or not your costs are entered inclusive or unique of tax.

Yet another surroundings value turning on ahead of you move reside is stock monitoring. Pass to WooCommerce > Settings > Merchandise, permit inventory control, and set inventory amounts for every product for my part. WooCommerce can mark pieces as out of inventory routinely when controlled inventory reaches 0, serving to you steer clear of overselling.

Get started Construction In Divi 5 These days!

What you’ve constructed here’s greater than an internet retailer. It’s a extra constant approach to construct and arrange one. The selections you are making early, like your Design Variables, world templates, and product card styling, can lift via the remainder of your web page because it grows. That’s the place Divi 5 makes a sensible distinction: it is helping you create a shop that’s more straightforward to replace, care for, and stay constant through the years.

As a substitute of constructing the similar adjustments web page by way of web page, you’ll be able to reuse the paintings you’ve already executed throughout the remainder of your retailer. The result’s a smoother construction procedure and a storefront that’s more straightforward to regulate as you keep growing.

The publish WooCommerce And Divi 5: The Complete Ecommerce Guide gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!