How to Use Divi WooCommerce Modules
By Sam Nguyen
The Divi Builder’s WooCommerce Modules allow you to change and style WooCommerce elements. This will allow you to use Divi’s power to add, remove, and style the WooCommerce Elements that make up a product page layout, allowing you to construct totally bespoke product pages from the ground up. There’s no need to use external CSS or edit WooCommerce page layouts with custom code anymore.
In this article, I will show you How to use Divi WooCommerce Modules to construct your online store better.
How WooCommerce Modules work
WooCommerce Modules function in the Divi Builder in the same manner that dynamic content does. To generate dynamic content connected with a WooCommerce Module, you must first select a product. The information you submitted when setting up your product in WooCommerceis included in the dynamic content, which is fetched from the database. Once a product has been chosen, you can style the dynamic WooCommerce product content using the Divi Builder settings, just like any other Divi module.
How to access WooCommerce Modules from the Divi Builder
Step 1: Install the Divi theme
When you install the Divi Theme on your website, you’ll see a Use Divi Builder button appear above the post editor every time you create a new product or page. When you click this button, the Divi Builder will be enabled, and you will have access to all of the Divi Builder’s modules, including WooCommerce Modules. When you enable the Divi Builder on a WooCommerce Product page, Woo Modules will take the place of any Woo Elements that were active on the page before Divi was enabled. You may also launch the builder in Visual Mode by clicking the Build On The Front End button. If you are logged in to your WordPress Dashboard, you may also click the Enable Visual Builder button while viewing your website on the front end.
Step 2: Add a new module
You can add a new module to your page by clicking the gray addition button once you’ve entered the Divi Builder. Within the list of modules, look for Woo modules and click on one to add it to your page.
The module list is searchable, so you can type “woo” to see all Woo Modules or “Woo Title” to go to the Woo Title module easily!
After you’ve added the module, you’ll be met with the module’s choices, just like any other Divi module. There are three main groups of options: Content, Design, and Advanced.
How to use WooCommerce Modules on Product Page
Step 1: Modify the default product page
A WooCommerce Product Page will operate flawlessly with Divi’s Woo Modules. The following is a walkthrough on how to use Woo Modules on a Divi product page.
Divi will use the WooCommerce Product Page template by default, which isn’t modifiable with the Divi Builder.
When modifying the default product page on the backend, this is what it looks like.
To use Woo Modules on your page, all you have to do is enable the Divi Builder on the Product Page by clicking the “Use the Divi Builder” button.
Step 2: Enable the Divi Builder on a product page
Divi will turn the product page elements into a collection of WooCommerce modules that mirror the default Divi product page style whenever you enable the Divi Builder on a standard product page. Divi offers a WooCommerce Module for each of the Woo Elements that are relevant to your product, which allows you to deploy and build that Woo Element using the Divi Builder. For example, the product title is replaced with a new Woo Title module that includes all of Divi’s design possibilities for customizing the title.
When you enable the Divi Builder on a Product page, this is what it looks like.
The user may then utilize the Divi builder to change all of the WooCommerce elements (such as product photos, price, and description). You’ll be able to develop fully unique product pages as a result of this.
It’s vital to understand that every Woo Module is dynamic, which means it relies on the existing WooCommercedata you submitted when creating your items. As a result, you must ensure that the product contains the necessary information to display the module.
How to use WooCommerce Modules on Normal Pages and Posts
Step 1: Set up WooCommerce Modules on regular pages
The WooCommerce Modules in Divi can be used on any regular page or post on your website (not just WooCommerce Product Pages).
For example, you can quickly add a Woo Add To Cart button to a custom landing page you designed for a certain product in your store.
Add the Woo Add to Cart module to the page in the same way you would any other Divi module.
Then make sure the product you wish to link to the module is selected.
In this scenario, I’d like to choose a certain item. As a result, I’d have to look through the module’s dropdown list of products to discover a certain product in the WooCommerce database.
Of course, this is the product I’d like to see on the landing page. When the button is clicked, the module will dynamically fetch the product data and, in this case, add the product to the basket.
Step 2: Combine distinct modules for product layouts
You can also combine different WooCommerce Modules to create fully unique product information layouts. For example, you might wish to highlight a product by employing different Woo Modules, each of which is related to the same product, so that the information is updated dynamically.
Here’s an example of a landing page with six Woo Modules all dynamically displaying information for the same product.
You may get a wonderful-looking featured product section for your landing page because each Woo Module is styled using Divi’s sophisticated built-in design options.
5 Best Divi WooCommerce Modules
1. Fleur
Fleur was designed specifically for crafters, female entrepreneurs, and bloggers. It includes a blog, single post, category, search results, archive, account, product, basket, and checkout page, among others. Sean Barton’s Search, CPT, Taxonomy, Divi Layout Injector, and Woo Layout Injector are among the premium plugins included. The product carousel is a great way to show off your products. Bloom and Monarch styling is also available.
Price: 167$
2. Artisan
Artisan is a Divi eCommerce child theme built specifically for food bloggers, photographers, and creatives. The homepage, about, blog, single post, store, product, account, cart, and checkout pages are among the 6 bespoke Divi page layouts included. With slider, lightbox, and full-width gallery options, you can show off your products. There are also links to the free typefaces used in the help file, as well as layered Photoshop files.
Price: 229$
3. Royal Commerce
Royal Commerce was created with WooCommerce and eCommerce websites in mind. Quick View, Product Slider, Wishlist, Product Image Zoom, Ajax Product Filtering, and Sticky Shopping Cart are some of the features included. Using the included icons, you can see the wishlist and cart totals in the header. Product Categories, Sales and Promotions, Product Collections, and other information are displayed on banners. Also included is the Divi Logo Swap plugin. All of these options can be enabled or disabled. It features a simple design that emphasizes the products.
Price: 209$
4. Store
Store was created exclusively for the purpose of creating a WooCommerce store. It focuses heavily on categories and has a large number of themed modules. Display what your customers are saying about you in the custom testimonial module and much more in the custom shop module. A homepage, shop, blog, FAQ, contact, account, cart, checkout, Divi product page layout, Divi shop layout, and more are among the layouts available. The simplistic design is attractive and does not obstruct your items.
Price: 68$
5. Divi eCommerce
Divi eCommerce was created with online stores in mind. It has two home pages, a shop, three product pages, an about page, a news page, and a contact page. It also comes with a custom WooCommerce sidebar that makes your products stand out. Stackable tabs for description and reviews are included on the designed product pages.
Price: 82$
Conclusion
The WooCommerce Modules in the Divi Builder let you edit and customize WooCommerce elements. This will allow you to use Divi’s power to add, remove, and modify the WooCommerce Elements that make up a product page layout, allowing you to build completely custom product pages from scratch. There’s no need to use external CSS or custom code to edit WooCommercepage layouts any longer.
I hope you will find this tutorial about How to use Divi WooCommerce Modules fundamental.
