If you’re looking to create a fully customizable online store without writing a single line of code, then combining WooCommerce with Divi is one of the most effective ways to get started. WooCommerce provides the powerful eCommerce functionality you need, while Divi gives you complete control over how your site looks and feels using a visual drag-and-drop interface.
In this guide, you’ll learn exactly how to build a professional eCommerce website using WordPress, WooCommerce, and the Divi theme—from choosing your domain and hosting provider to launching your store and optimizing it for conversions. Whether you’re selling physical products, digital downloads, or services, this guide will walk you through every key step of the process.
Step 1: Choose Your Domain Name and Hosting Provider
The first step to building your WooCommerce store with Divi is securing a reliable domain name and web hosting plan. These two elements are the foundation of your website and play a crucial role in performance, branding, and SEO.
Domain Name Tips
Your domain name should reflect your brand and make it easy for users to find and remember you online. It’s also helpful to choose a name that aligns with the niche you’re selling in and, where appropriate, includes keywords for SEO.
Here are a few tips for selecting the right domain:
- Keep it short, brandable, and easy to spell.
- Avoid numbers or hyphens, as they can create confusion.
- Choose a
.comextension for credibility and SEO. - Use domain registrars like Namecheap, GoDaddy, or Google Domains to check availability and secure your domain.
Most domain names will cost between $10 and $15 per year, though premium domains or certain TLDs may be more expensive.
Choosing a Hosting Provider
Your hosting provider is where your site’s files are stored. A poor-quality host can make your site slow, insecure, and unreliable—which is the last thing you want for an eCommerce business. Look for a host that is optimized for WordPress and WooCommerce.
When selecting a hosting provider, consider the following:
| Feature | What to Look For |
|---|---|
| Speed | SSD storage, caching, and fast PHP execution |
| SSL Certificate | Free SSL for secure customer checkout |
| Support | 24/7 live support with WooCommerce knowledge |
| Scalability | Upgrade options as your store grows |
| One-Click WordPress Install | Makes setup faster and easier |
Some reliable hosting providers that are compatible with both WooCommerce and Divi include:
- SiteGround – Excellent speed, built-in caching, and strong security.
- Cloudways – Offers scalable cloud hosting with powerful performance.
- WPX Hosting – Known for outstanding customer support and ultra-fast speeds.
- Hostinger – Affordable yet offers great speed and support for new stores.
Step 2: Install WordPress on Your Domain
Once you’ve purchased your hosting and domain, the next step is to install WordPress. WordPress is the foundation of your website and the platform that both Divi and WooCommerce run on.
How to Install WordPress:
Most hosts offer one-click WordPress installation from the dashboard or control panel. For example:
- Log into your hosting account.
- Navigate to the WordPress section or app installer.
- Choose your domain, create login credentials, and click install.
Once installed, you can log into your WordPress admin dashboard by visiting yourdomain.com/wp-admin.
Pro Tip: Some managed WordPress hosts like Kinsta or WP Engine will install WordPress automatically, and others like Divi Hosting even come pre-installed with the Divi theme already activated.
Step 3: Install the Divi Theme
Divi is a premium theme created by Elegant Themes and is one of the most popular WordPress themes for building fully customized websites. With Divi, you can build your store visually without coding using the powerful Divi Builder.
Steps to Install Divi:
- Download the Divi theme ZIP file from your Elegant Themes account.
- In your WordPress dashboard, go to Appearance > Themes > Add New > Upload Theme.
- Choose the ZIP file and click Install Now.
- Once installed, click Activate to make Divi your active theme.
After installation, you’ll also be prompted to enter your Elegant Themes API key, which gives you access to updates and premium layouts.
Step 4: Install WooCommerce Plugin
WooCommerce is a free WordPress plugin that turns your site into a fully functional eCommerce platform. It handles everything from product listings and carts to payment gateways and shipping options.
How to Set Up WooCommerce:
- From your WordPress dashboard, go to Plugins > Add New.
- Search for WooCommerce, then click Install Now and Activate.
- Follow the onboarding wizard that appears.
The WooCommerce setup wizard will guide you through key configurations:
- Store location and currency
- Product types (physical, digital, memberships, etc.)
- Payment methods (PayPal, Stripe, credit card)
- Shipping zones and rates
- Tax settings and automated calculations
- Recommended plugins and services
You can always modify these settings later under WooCommerce > Settings.
Step 5: Add Your First Product
Once WooCommerce is active, it’s time to add your first product. WooCommerce supports simple, variable, grouped, and even subscription-based products depending on your business model.
To Add a Product:
- Go to Products > Add New.
- Enter the product name, full description, and upload product images.
- Under the “Product Data” panel, select the product type (Simple or Variable).
- Set the price, SKU, inventory status, and shipping details.
- Add categories, tags, and a short product description.
Each product can also include attributes like size, color, and materials. If you're selling products with variations (e.g., shirts in multiple sizes), use the Variable Product option and define your variations.
Step 6: Customize Product Pages Using Divi WooCommerce Modules
Divi includes over 20 custom WooCommerce modules that let you design product and shop pages visually. This means you’re not locked into default layouts—you can build completely custom product pages using drag-and-drop elements.
Some popular Divi WooCommerce modules include:
- Woo Title
- Woo Images
- Woo Price
- Woo Rating
- Woo Add to Cart
- Woo Description
- Woo Tabs
- Woo Related Products
- Woo Breadcrumbs
- Woo Meta
Designing a Product Page with Divi:
- Go to Divi > Theme Builder > Add New Template.
- Choose to apply it to all products or specific ones.
- Click Add Custom Body > Build Custom Body.
- Use Divi Builder to add rows and modules for each section of the product page.
This level of customization allows you to create high-converting pages that match your brand perfectly, including upsell elements like trust badges, countdown timers, and bundled offers.
Step 7: Build Your Shop, Category, Cart, and Checkout Pages
Divi allows full control over all WooCommerce pages—not just product pages. You can design your shop, category, cart, checkout, and customer account pages using the same visual builder.
Page Types and Key Modules:
| Page | Key Modules to Use |
|---|---|
| Shop Page | Woo Products, Filters, Category Selector |
| Product Category Page | Woo Post Title, Woo Breadcrumb, Woo Products |
| Cart Page | Woo Cart Products, Woo Cart Totals |
| Checkout Page | Woo Checkout Billing, Payments, Shipping |
| My Account Page | Text Module with WooCommerce shortcode [woocommerce_my_account] |
Each of these pages can be customized through the Divi Theme Builder. Simply create a new template for the respective page, build the custom layout, and assign it accordingly.
Step 8: Optimize for Mobile Responsiveness
Many customers will access your store from mobile devices, so mobile optimization is essential. Thankfully, Divi makes it easy to preview and tweak designs for tablet and phone views directly in the builder.
Mobile Optimization Tips:
- Use large, tappable buttons and avoid tiny fonts.
- Check all modules in mobile preview mode.
- Adjust padding and spacing for small screens.
- Avoid cluttered sidebars or too many columns.
Divi also allows you to hide or show elements depending on device, making it easier to deliver a streamlined user experience.
Step 9: Improve Performance and SEO
No matter how great your store looks, if it loads slowly or doesn’t show up in search results, you’re leaving money on the table. Here are the key tools and strategies to make sure your WooCommerce Divi site runs fast and ranks well.
Speed Optimization Tools:
- WP Rocket – Caching and minification
- Smush or ShortPixel – Image optimization
- Cloudflare – CDN for faster global load times
- Divi Performance Settings – Remove unused CSS and enable dynamic loading
SEO Optimization Tools:
- RankMath SEO – Optimizes product metadata, breadcrumbs, and schema
- Yoast SEO – Adds SEO fields to product pages and categories
- Google Search Console – Monitor indexing and performance
- Ahrefs/SEMRush – Keyword tracking and competitor research
Make sure your product titles, meta descriptions, and image alt text are optimized. Use clean URLs and internal linking to improve page authority across your store.
Step 10: Test and Launch Your Store
Before going live, it’s important to test every element of your store to ensure everything works smoothly from browsing to checkout.
Final Pre-Launch Checklist:
- Test adding products to the cart and completing a full checkout
- Verify payment methods are working (use sandbox modes)
- Confirm that email confirmations are being sent to customers
- Check how your store looks on mobile and tablet
- Review all legal policies: terms, privacy, shipping, returns
Once your store is fully tested, remove any “Coming Soon” plugins or maintenance mode, and officially launch your site to the public. Promote your store via email marketing, SEO, paid ads, or social media.
Conclusion: Why WooCommerce with Divi Is a Great Match
Combining WooCommerce with Divi gives you the freedom to build a flexible, scalable, and conversion-focused online store on WordPress. Divi’s drag-and-drop builder paired with WooCommerce’s powerful backend features allows anyone—from beginners to experienced store owners—to create high-quality shopping experiences that truly represent their brand.
If you’re tired of rigid templates or monthly platform fees, this setup gives you full ownership, design freedom, and the ability to scale as your business grows.
“Fantastic” should have been left off the title
divi is fine, but you will have problems when you have to filter the products of the store, it does not have an elegant solution. I do not recommend it because it does not have a complete solution. It is not a complete solution for woocommerce
Hi there, thank you for this article…
I am looking to setup a new online store though… but what is the difference between doing it this way (above: Bluehost+Wordpress+wooCommerce) vs. just Shopify?
Appreciate your help!
Hi Vicky, Check out this link for more info: https://ecommerce-platforms.com/compare/shopify-vs-woocommerce
Cheers!
–
Bogdan – Editor at ecommerce-platforms.com
Thank you for this detailed post:) Do you know how i set a fixed image/thumbnail size for the products on display. I have tried to change it under the wocommerce settings and regenerate thumbnails, but it didnt work.
in denmark we have Viabill so you can pay through that, is it possible to attach that to my webshop ?
Hi Karen,
It’s definitely possible, you might need to contact a developer and see exactly how to implement Viabill on your website.
Best of luck,
—
Bogdan – Editor at ecommerce-platforms.com
Is it possible to create a vendor marketplace with divi & woo commerce?
Hi Mila,
No, but you can do this using the Marketify Theme (a theme that supports marketplace functionality with custom templates, styles etc…), check out our tutorial here: How to Build a Physical Product Marketplace with WordPress and Marketify
Best of luck,
Bogdan – Editor at ecommerce-platforms.com
Hello,
I am working in the Shop feature and having two issues.
1. I am trying to show ALL products and am having to always select a category? Do I have to create a category of ALL or is there another way?
2. I have noticed that with the display to shop items it displays all items on one page (30 items) rather than spreading them across pages and allowing a user to move to page 2, page 3 etc? Is there a way to change this so default page is 12 items and then the remaining goes to the next page ?
Hi Magda,
You should try WpCurve for small WordPress related tweaks.
Best of luck!
Cheers!
Bogdan – Editor at ecommerce-platforms.com
Hi, I was wondering how to add related products in each product page with Woocommerce and Divi. Thanks in advance!
Hi
I would like some guidance as it is the first time using Divi and Woocommerce together.
My requirements;
I would like to know which option or direction to go in for customer registration for the site, to be used for marketing communications and to purchase products online.
– Customers should be able to register even if they are not purchasing anything
– How will i achieve the most flexibility in gaining these details leke exporting them and having a spreadsheet record for tracking and manipulation like sending out mass mails or SMS’s etc as there would be times where I will need to backup information somewhere just in case, and the need to then use the same database (MySQL) for just users in another part of the site or say within the store as it is for a pharmacy and we may setup patient histories with blood pressure, glucose readings and many others for instance and then perhaps add custom pages where their profile information will be used.
Data is also needed to then import/add customers into our local pharmacy program in our physical store to process prescription medications, delivery addresses and most importantly medical aid information as this is not a standard form field or structure item etc to be in accordance to lay and so it would mean csv/other file exports from online membership database to then import into SQL databases on our in store server.
– Ideally I need to be able to move data around conveniently or more smoothly and thus i need to cater for this properly on the site before just using any registration or form for sign-up. Could i setup a separate database for the users that will be its own, independent database that is not within the WordPress/Divi/Woocommerce tables or databases that are created by default ?
– Another element is safety for online payments, is this enforced through the theme itself or woocommerce or the wordpress backend or perhaps in all 3 ?
Thank you and hope to hear from you soon.
Any recommendations on using Divi Pricing tables and WooCommerce. Rather than a shop it’s a packaged consulting led offering that clients buy?
i am trying to add this shortcode there in code module [product_categories parent=”0?] for displaying product categories but it is not displaying anything on inspecting there is only blank div showing with class=”woocommerce column -4″ so please help me regarding this if someone know what is problem
I’m having an issue getting my products page to look like my other pages. everything looks good until you click “create your perfect print” and choose “white Birch” or “Brushed Aluminum” then all the products are jumbled and the back ground is white. Im absolutely helpless when it comes to this stuff, i basically learned this all today. We are using “Fancy product designer” for our custom product and Im trying to pick up where someone else left off without any previous experience or information. Any help would be appreciated.
ok this totally helped, but the shop module still has a side bar. there is no shortcode in that module?
I have chosen to show my ‘featured items’.. but nothing is showing. How do I chose what products are ‘featured’ ?
What if you want to display your shop by Categories?
The Divi modules dont give that option, only Featured, Best-Selling and so on…
🙁
You can insert a text module and use the shortcode WC provides;
[product_categories parent=”0″]
Hi Craig you can display the products category using the Divi Shop module. In the module’s general setting under the Type option drop-down,select Product Category . Now you should already have some items for each product category you created in your woo-commerce,with that done, you will see an option Include Category; go ahead an select the category you want to display. I hope this help you. Remember have items in each category of your products before you activate this option
Thank you for the detail ‘luashoro’. I have two categories with products in both and the ‘Product Category’ is still not showing for me. Any clues please?
Actually you can’t.
Hi, I’ve done all the above, except I have a custom page, using a blank page template with Divi throughout my site. The shop, cart, checkout can all be built using shortcodes and the page builder…however, the products using woocommerce cannot…or not as much as I can find. I’m new to all this, but surely there must be a way to make the products pages look the same as the rest of the site?? I don’t want there to be the Divi header and all that showing?? got any ideas? It looks unprofessional at the moment.
Thanks
yes you can remove it from some of the pages using blank page option but for some reason it wont on others kind of messes it up.
probally best way is to make child theme and edit some of the code
or search for predone divi-commerce themes pay few $ and customise
however here is simple way of doing for the pages you can
open the wp admin , > dashboard> all Pages >
use the following to edit (look at the pages woocommerce automatically adds ie cart. etc)
example: eidt and make a custom cart page
important to do this bit to make things easy before you use ET page page builder all you will see is the woocommerce short code
cart page = [woocommerce_cart]
copy the short code to a new notepad, text pad, or simillar with a little description if you want
step 1
remove divi header , go to page attributes change it from default to blank, click update to save the page, preview , divi header is gone 🙂
step 2
I want to use ET page builder for new beautiful design ( yes please)
first delete (cut saves it ready to paste) the woocommerce short code [woocommerce_cart] so now you have an empty page, update changes again
you can now start to edit the page using the ET page builder, start by adding a text module somewhere paste your woocommerce shortcode, [woocommerce_cart] for a quick test update and preview changes
step3
rinse and repat for the other pages 🙂
Dont forget you can switch side bar on/off or edit the widgets
happy days and endless beautiful designs, yipee!
woocommerce shortcodes > http://docs.woothemes.com/document/woocommerce-shortcodes/
paste them on a notepad/text doc ready to cut n paste
John