One of the things you have to think about when you’re setting up a WordPress eCommerce site is compatibility between your theme and your eCommerce plugin. For the Divi theme Elegant Themes have made it easy for you by making the theme compatible with the WooCommerce plugin.
They’ve also added a Divi eCommerce / Shop Module, which works with WooCommerce and makes it easier to add product highlights throughout your pages and sell at any location on your site.
With a dedicated eCommerce Module, full compatibility with WooCommerce and pre-made store layout pages, Divi is the perfect theme to use for your online store.
WooCommerce is the plugin that we recommend, as it has the nicest feature set, a great interface and follows the best coding practices.
Elegant Themes
Divi theme eCommerce Module and the WooCommerce plugin
You don’t have to use the Divi Builder when you use WooCommerce, you can create standard pages and use standard WordPress shortcodes without the Builder. You can also use WooCommerce shortcodes within the Builder inside text modules and you can build your normal checkout and shopping cart pages as you normally would.
What the eCommerce Module does is make it much easier to highlight and showcase your products. You can use the eCommerce module to show a list of your most recent products or your top rated products etc and you can place them just about anywhere on your pages.
This short video by Nick Roach of Elegant Themes shows you how the eCommerce module adds to and integrates with WooCommerce.
This video is part of the Divi Theme Documentation, which include videos and text documents to cut down the Divi theme learning time and get you online quickly.
Please note that while the builder includes various WooCommerce modules, you can also use WooCommerce by itself without the builder just fine. You can create standard pages for Checkout, Shopping Cart, etc, as outlined in their documentation.
You can also link straight to your WooCommerce categories, or use the WooCommerce Shortcodes within a Divi text module. This gives you the freedom to do just about anything.
Setting up the Divi eCommerce Module
Nick’s video covers everything you need to know about setting up the eCommerce Module but just to remind you, these are the various settings that you can configure:
- Type – the type of products you would like to display in your product feed. Choices are Recent Products which will display all of your products in chronological order, Featured Products, Sale Products, Best Selling Products, or Top Rated Products.
- Post Number – the number of products that you wish to display. You need to have products made for anything to show inside of this module. If you’re not familiar with the WooCommerce plugin then head over to WooThemes to See How to Add & Manage Products.
- Columns Number – the number of columns to display in your shop module. 4 columns should be used for a 1 column row. 3 columns should be used for a 3/4 row column. 2 column should be used for a 1/2 row column. 1 column should be used for a 1/4 row column.
- Order By – define how you would like your products to be ordered. Choose to order by Default Sorting, Popularity, Rating, Date, Priced Low to High, and Priced High to Low.
- Admin Label – specify the label that your shop module will have in the Divi Builder for easy identification. By default the Shop Module has the label ‘Shop’ but you can change it to anything you like.
Use the Divi pre-made store layouts to get you online fast
With the Divi Pagebuilder you can create just about any layout of page that you can imagine, but if your inspiration has deserted you or you just want to get up and running fast then you can use one of the pre-made store layouts that come bundled with Divi.
Current layouts are:
- Homepage Shop – a fabulous premade page for the homepage of your eCommerce site. The page has five sections including: welcome, featured products, recent products with a call to action, customer testimonials and a “browse our full shop” link.
- Shop Basic – a great starter eCommerce page with two main sections, which include: a full width header welcome message, four rows for recent products and a call to action message.
- Shop Extended – a comprehensive five section eCommerce page, which includes: a full width slider with call to action, recent products with call to action, four columns for most popular items and a final full-width “view all our on-sale items” call to action.
To use the pre-made store pages all you have to do is create a new page and activate the Page Builder.
From the top of the Builder select Load Layout then scroll down the list of layouts to Predefined Layouts and choose the layout you want. You can then add your text and images and fine tune the layout to your liking.
If you’re new to Divi check out my other Divi posts
An introduction to the Divi theme: An overview of the awesome Divi Builder
Save, import and export Divi layouts: Saving, importing and exporting Divi layouts
An introduction to Divi Sections: The creative power of Divi Sections
The Parallax effect in Divi Sections: Divi Sections and how to use the parallax effect like a pro
Divi Modules and how to use them: the complete guide to Divi Modules
Hope you find them useful when building your Divi website.
Set up your eCommerce site with Divi and the WooCommerce plugin
With a dedicated eCommerce Module, full compatibility with WooCommerce and pre-made store layouts, Divi is the perfect theme to get your online store up and running in no time.
To get started with Divi, sign up with Elegant Themes, download your copy of the Divi Pagebuilder theme and start creating your own online store.
We offer no-questions-asked refunds to all customers within 30 days of your purchase. If you are not satisfied with our product, then simply send us an email and we will refund your purchase right away. Our goal has always been to create a happy, thriving community. If you are not thrilled with the product or are not enjoying the experience, then we have no interest in forcing you to stay an unhappy member.
Nick Roach – Elegant Themes
I hope that you enjoyed the post and that I’ve shown you the advantages of using the Divi theme to create your online store.
If you have any thoughts about Divi please leave a comment and if you’d like to spread the word about this fabulous theme please use the social icons below.
Credits:
My thanks and gratitude to Elegant Themes for the graphics, videos and details of the Divi features used in this post.
