If you want to run an online store with WordPress, then you most likely use the WooCommerce plugin for it. In connection with the WordPress content management system, WooCommerce has a long history and is therefore the first choice for many when it comes to e-commerce. So, especially if you’re already using Divi anyway, WooCommerce is the ideal addition to create a shopping platform based on the CMS.
WooCommerce modules in Divi are visual building blocks for the design and structure of your WordPress online store. Divi by Elegant Themes already comes with an impressive number of modules. With Div extensions you can increase the functionality even more.
In this post I will now show you why this is so. I’ll explain what the WooCommerce modules for Divi are all about and show you some useful extensions for the system. Based on this article, you will be able to create a unique store without needing a lot of technical background knowledge.
So if you want to learn how WooCommerce works in conjunction with Divi, what you need to look out for and how you can extend the whole system even further, read on.
Connecting WooCommerce with Divi
If you’re already using WooCommerce to run an online store or maybe just sell a handful of select products, then you’re all set with Divi right from the start. That’s because Divi allows you to design the WooCommerce elements relatively freely with the Divi Page-Builder. This is accomplished by connecting WooCommerce to Divi.
There’s no need for a separate step to do this at all. Once Divi and WooCommerce are installed together, Divi’s WooCommerce modules are automatically unlocked and available accordingly. With these, it is then possible for you to create particularly exciting product pages. You can create these pages from scratch with Divi and create unique experiences for very special products.
The best part is that Divi doesn’t even limit WooCommerce to product pages. So you can add appropriate modules virtually anywhere on your blog or website. This way, even away from the store, you’ll create various buttons for direct shopping or even dynamic displays of matching products. The limit is what you make of it.
Access to the Divi WooCommerce modules
Getting access to the Divi WooCommerce modules doesn’t require much of a detour at all. Basically, this works the same way for WooCommerce as it does for Divi’s own modules. So you open the Divi Page-Builder to get access to the Divi modules. Just like always and exactly as if you were creating a normal page or post.
In the selection of different modules, there is now a new tab called Woo Modules. This category hides the actual interesting modules for WooCommerce. So, once clicked, this will take you to the respective module selection.
Here you can see all currently available Divi modules for WooCommerce and can be activated and added with a click. It is important to understand that each module has separate settings. How the modules work exactly, you will learn in the next paragraph. There I will introduce you to each of them in detail. Don’t worry, we will go through all the modules one by one and briefly discuss what they are actually responsible for exactly.
Divi WooCommerce modules comparison
But enough of the preparatory words. You’re probably eager to find out which WooCommerce modules the Divi Page-Builder has in store for you. That’s exactly what this section is about. Here I will introduce you to all WooCommerce modules in Divi briefly and concisely.
This way you will get an impression of what is possible with WooCommerce and Divi in combination. With this knowledge, you can then plan ahead of time how you will ultimately implement your product pages.
Currently, WooCommerce in Divi includes 23 different modules that can dynamically address almost every function of WooCommerce. This is exactly how the modules should be viewed. Each WooCommerce module thus relates to a specific product. The dynamic content is retrieved from the database in the process. The module itself works like any other Divi module.
Woo Cart Products
This WooCommerce module for Divi displays the products that are currently in your customer’s cart.
Woo Checkout Billing
With this it is possible to display the exact billing details during the WooCommerce checkout.
Woo Checkout Details
Through the Woo Checkout Details module, the details are output in the checkout of WooCommerce. These are for example the prices and the products themselves.
Woo Checkout Information
With the Woo Checkout Information module for Divi, the field for additional information is displayed during the WooCommerce checkout.
Woo Checkout Payment
The Woo Checkout Payment module is responsible for outputting various payment details such as the payment method as well as additional info in the payment form itself.
Woo Checkout Shipping
This displays the appropriate field for the shipping method, which plays a crucial role in the checkout during the checkout process.
Woo Cross Sells
With this module you can use the Cross-Sells feature and display related products in the shopping cart. Cross-Sells means matching products that serve as additions to the shopping cart and are bought especially often.
Woo Product Description
With the Woo Product Description module it is possible to display the short description or product description of an item on any page of Divi.
Woo Product Gallery
The Woo Product Gallery module allows you to add a product gallery on any regular page. This will then display all the images that have been stored for that particular product.
Woo Product Images
Product images are displayed here as well, but only the main product image if desired. The gallery can of course also be displayed in its entirety on any page that is edited with Divi.
Woo Product Information
This displays the additional information of a product on any page. For example, the dimensions or weight of the item.
Woo Product Meta
This module is used to display all the metadata of a product. Metadata are tags, categories and the like.
Woo Product Price
The name is already very clear here and this module can’t do much more. It shows the corresponding price of the selected product. That is all.
Woo Product Rating
The module not only displays the average rating in stars, but likewise the latest customer ratings and reviews for the selected product.
Woo Product Reviews
With the review module for WooCommerce, it is possible to output appropriate product reviews on any page created with Divi, as well as a form that allows users to leave a new review.
Woo Product Stock
This module is designed to display the current stock level. So, the WooCommerce module shows whether a product is still available or already out of stock.
Woo Product Tabs
This is used to output tabs to the respective product description. So additional information of all kinds, which were deposited in different tabs.
Woo Product Title
Hardly surprising, this WooCommerce module for Divi simply outputs the product name. This can be freely added to all Divi pages.
Woo Product Upsell
The upsell module allows you to add an upsell element to the respective page. Upsells are enticing offers designed to get customers to drastically increase the cart value by buying not the cheapest option, but an even more expensive one.
You may still know Divi’s Woo Products module under the name Shop Module. That’s what it used to be called. It still allows you to add products to the page in the easiest way possible.
Woo Related Products
Here, too, the name says it all. The WooCommerce module for Divi outputs related or similar products. These are, for example, items with the same tags or products from the same category.
This adds a breadcrumb navigation to the respective page. This navigation shows the current path through all categories and leads to users not only understanding where in the store they are, but also easily finding their way back to the original category.
What is the Divi WooCommerce Builder?
The Divi WooCommerce Builder is basically nothing more than the Divi Page-Builder itself. So the term is a common synonym for the Divi Page-Builder when used in conjunction with WooCommerce. This is partly because the Divi Theme and also the Divi Page-Builder have been compatible with WooCommerce from the very beginning and still are. The difference is that in the beginning, there were no separate modules for it.
In the meantime, this has changed, as you could already learn in detail above. Currently, there are countless Divi modules for WooCommerce, which make almost any function of the online store plugin also available in the Divi Page-Builder. Starting from the shopping cart to the detailed information or the output of matching product images.
The WooCommerce Builder means with Divi really only the Page-Builder itself. This is fully compatible with WooCommerce and can be used on any page. This also applies to the Divi WooCommerce modules, which you can integrate wherever it makes sense and is needed.
Create exciting product pages with Divi
The genius of Divi is that it seamlessly integrates with the WordPress CMS. This in turn means that you can also build product pages for WooCommerce naturally with the Divi Page-Builder and design them relatively freely. I’ll explain how to do that in a little more detail in this paragraph.
As you can see on the screenshot above, you can customize all store modules responsive.
To use Divi for WooCommerce products as well, you don’t have to do too much work. First of all, you create a product or select an existing product. When the WordPress editor opens, you will notice that there is a button below the field where you can enter the product name. This will take you directly to the Divi Page-Builder or in this case the Divi WooCommerce Builder.
The Divi Page-Builder looks a little different here though. It doesn’t open on the actual page, but in a kind of editor or window. This automatically converts the product page into a Divi layout. Via button it also goes back to the standard editor or directly to the page to edit WooCommerce within the live preview.
WooCommerce modules for normal pages
Of course, the WooCommerce modules for Divi are not only available to you on WooCommerce product pages. Rather, you have access to them everywhere you can open the Divi Page-Builder and use it to edit the respective page. The same means that any ordinary page can also include the WooCommerce modules.
This opens up a lot of interesting and clever possibilities. You could create a Landing-Page and add a shopping cart button for a specific product that works seamlessly with your WooCommerce store.
Also, if you run a blog alongside your store for marketing purposes, you could include matching products under each article or even between paragraphs, linking to them and displaying them with their corresponding product images or product descriptions. In this way, potential customers can immediately strike and do not even have to visit your store to order the product there.
The genius of all these possibilities that WooCommerce offers in conjunction with the Divi theme is that all content is created completely dynamically. So you don’t add the product manually, but all the information is always up to date. All details and metadata are pulled from the database and are therefore always provided with the latest values. No matter if it is about the product pictures or the current price.
Other uses for the WooCommerce modules
The Divi WooCommerce modules work not only on product pages, but as mentioned also on all ordinary pages of your WordPress blog. At the same time, they are also available in other WooCommerce pages. At the latest now the possibilities become almost unlimited.
You could, when users are logged in, make sure that special items are displayed in their account overview. Products that are only visible to those who have created an account with you. In this way, purchasing behavior can be further individualized and the incentive to register in the store increases noticeably. However, this is only one of many examples of how the WooCommerce modules can be used cleverly.
Custom store pages, Landing-Pages, products in the article or theme overview, unique offers and much more. All this becomes possible in connection with WooCommerce and the Divi Theme. There are very few limits with it. As a result, you can come up with an almost unlimited number of creative combinations to wow your customers accordingly. Divi also makes all this pretty easy for you.
Child themes for exciting WooCommerce stores
What exactly Child Themes are, I’ve gone into in a separate article and explained all the peculiarities and special features there. You can also find a few suitable examples here. In addition, there is a tutorial on how you can create your own child theme for Divi. You can find the article here, if you are interested in it.
Because the topic of child themes is really a thing of its own and the themes in general can be very extensive, I would like to mention it here at least once more. After all, it also plays a major role in terms of WooCommerce to customize your own store.
If you are really interested in Divi WooCommerce themes, templates and child themes that you can use together with Divi, you will also find a post on my blog. In it, I introduce you to the options for themes in WooCommerce and name a few of my favorites.
Be sure to check back here if you’re into it or want to learn more about how you can make Divi much more custom and exciting in conjunction with WooCommerce. That’s just as a little side note.
Extensions for Divi and WooCommerce
To conclude this post, I’d now like to introduce you to three useful extensions for Divi and WooCommerce. As always, there are more than enough plugins for WordPress here, but three of them are well worth a look and should be mentioned separately.
These are especially suitable if you have already almost completely exhausted the possibilities of Divi and WooCommerce. Even if you are missing modules or have difficulties with the operation, additional extensions can significantly improve this situation.
Divi Shop Builder for WooCommerce
The Divi Shop Builder for WooCommerce extension mainly expands the pure possibilities with which you can customize WooCommerce pages. Products are reordered, there are badges or markers that can be added with a click and much more.
The developer promises eight modules and more than a hundred settings on the website. So the extension is just that. An extension for Divi with WooCommerce that brings in even more easy modification options that you may still be missing.
With the Divi WooCommerce Customizer and Styling Plugin, there are many useful addons. Among others a mini shopping cart, an Ajax button to add products to the Divi shopping cart and much more. The plugin also has extensions for the checkout page ready for you.
Basically, the extension ensures that you can design all Divi and WooCommerce pages yourself. From the Login Page-Builder, to the Category Page-Builder, the Product Page-Builder as well as the Checkout Page-Builder and many more features, there are the right modules for every WooCommerce page to go with it. In total, 75 new modules for WooCommerce are added. That is truly quite a lot.
WooCommerce Builder for Divi
Like the extensions just mentioned, WooCommerce Builder for Divi also tries to add more possibilities of design first of all. This is done with the additional modules.
Starting from the Ajax button for the shopping cart, to a Masonry View of the products – the design options are actually more than reasonably extended here. Purely in terms of mass, there are fewer modules than the other extensions in this list, but everything seems to be very well thought out.
My conclusion about the Divi WooCommerce modules
Towards the end, I would like to give a conclusion about Divi in connection with WooCommerce. Also in terms of modules and extensions, this is quite important. This is partly due to the fact that Divi is already very strongly positioned with WooCommerce. WordPress thus becomes the absolute secret weapon in terms of e-commerce due to the new possibilities.
Over the past few years, updates have ensured that Divi and WooCommerce have made a true dream team. Both systems work wonderfully together out of the box and combine their strengths in the powerful Divi theme. If you are still missing something, you can find useful extensions for WordPress, which can be easily installed and henceforth bring even more modules than already.
Who wants to build a WooCommerce store or calls his own, is well advised with the Divi Theme as a Page-Builder. Especially because there are now not only in Divi itself countless possibilities for stores, but also because many extensions exist, which bring almost infinite new features with and integrate into existing systems.
Divi plus WooCommerce is therefore a sure thing to build an impressive and powerful online store. Not only does it look good with Divi, but it can also be designed completely freely. Gone are the days when every WooCommerce store looked the same. The design freedom that a Page-Builder brings with it has long since arrived in e-commerce.