4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

WPNeon  Tutorials Reviews Themes Plugins Hosting Theme Stores

Page Builders

How to Build a
WooCommerce Store using
Divi Theme Builder from
Elegant Themes?
Updated on February 11, 2022 by WPNeon Tutorials

eCommerce is gaining popularity as a lucrative online money-

making business. That’s why; people are searching for the
perfect WordPress themes, which offer the most beautiful
designs and settings with eCommerce compatibility.

Also read:
– WooCommerce Product Filter – The Best WooCommerce
Filter Plugin?
– 21 Must-Have WordPress WooCommerce Plugins You Need
For Your Store

To launch a successful online WooCommerce store, you will

have to get a WordPress WooCommerce theme that perfectly
fits your business goals. Plus, the theme must offer attractive
and stunning shop styles with quick and practical solutions.

The Divi theme comes with perfect WooCommerce

compatibility and rich-features, including Divi’s Shop Module.
The incredible Divi shop modules let you display your products
instantly with innovative and modern looks.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 1/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

In this article, we will put in plain words the step-by-step

procedure of how you can integrate WooCommerce plugin
with Divi theme and achieve the extra ordinary.

We will also discuss how you can establish your eCommerce

store using the Divi Shop module and start selling your
products quickly.

Table of Contents [ show ]

Prerequisite:
1. Divi WordPress Theme

2. Free WooCommerce Plugin

Why is WooCommerce the #1 Choice

for Creating an eCommerce Store?
WooCommerce is a robust eCommerce store that is being used
by about 2.3 million eCommerce stores.

WooCommerce comes with several essential features that help

in creating and managing online stores efficiently.

WooCommerce has multiple helpful features along with its

secured payment options that are a cost-effective solution,
otherwise purchasing any third-party plugins or extensions
may add cost to the budget.

WooCommerce offers flexibility to its users, and you can sell

anything ranging from physical products, digital products, and
subscriptions.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 2/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

Some other incredible features include more than 100

payment gateways that can be easily integrated into your
store website. Also, multiple shipping methods that are
configurable with shipping zones.

“ In a nutshell, WooCommerce is a compact

eCommerce solution that is fast, reliable, and easily
adjustable to your eCommerce business needs.

Given that, WooCommerce seamlessly integrates with Divi

theme, and you can create an amazing store by using Divi Shop
modules, which are highly customizable as per your business
goals.

How to Set up WooCommerce plugin?

Setting up the WooCommerce plugin is a simple and
straightforward procedure. Once you have installed the
WooCommerce plugin, an automatic setup wizard will walk you
through all store’s configuration settings.

Once you enter into the setup wizard, then click the “Let’s Go”
button to start the setup.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 3/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

In the setup menu, the “Page Setup” will provide you

information that all the essential pages will be automatically
created if you haven’t created any yet.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 4/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

In the “Store Locale” page, you will have to enter information

about your store’s location, currency, preferred weight, and
dimension units.

The next step requires you to enter information regarding your

shipping procedure.

Either you would be shipping physical products and charge the

sales tax or not. You can also modify the settings later on.

In the end, you will be asked you do you want to receive your
money, i.e., the Payment method.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 5/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

You can select whichever payment gateway suits to your needs.

WooCommerce comes with more than 100 payment gateways
integrations that are worldwide accepted.

Once you are done with all the setup procedure, a “Store’s
Ready page” can be visualized. And you can start adding your
products to sale.

For a more detailed step by step guide, you can also check our
in-depth WooCommerce tutorial here.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 6/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

Now, when your store page is ready, you can start adding your
products using Divi shop Modules.

I am assuming that you already have the Divi theme installed

on your WordPress site.

How to Add Products Using Divi Shop

Modules?
Divi comes with dazzling shop modules that easily sync with
your product categories with a plethora of customization
options.

You can arrange, organize, and readjust your products with

easily customizable options in the shop pages. Here is how you
can add products to your shop pages.

Step 1: Create Your First Product

Once you are done with the setup wizard, the next step is to
create your first product.

Go to Products -> Add New in the dashboard area. Click on the

“Add New Product” tab and edit the product name in the title
box and then start adding its description in the main content
area.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 7/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

In the left menu bar, below the General tab, you will see all
other necessary settings regarding inventory, shipping, and
additional information. Put all the information in the relevant
fields.

Right below this section, a product short description section

will be visible, and this section will appear in the listing pages
alongside the product images. And on the right-hand side of
the image, another part is visible where you can add the image
of the product.

Go to the product image section -> click on “Set Product

Image” -> upload the product image. You can add as many
pictures of your products as you like to the Product Gallery
section.

In the last, you will have to select the product category because
the shop module needs to know in which category you want to

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 8/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

place your product.

Now, publish your product and move to the next section where
you can create a page to display your product.

Step 2: Create a Page to Add Products.

Now, when you have created your first product, you’ll need a
page to display your products. If you have installed
WooCommerce and gone through the setup wizard, a blank
page with “Shop” name would be appearing, and if it doesn’t
appear, you can create it manually.

Go to Pages -> Add New page -> select “Use the Divi builder“.

You can style your shop in any way you like to. For example,
you can create a layout that matches your website layout or
any existing website layout, or you can go completely different
by creating contrasting designs to present your products
innovatively.

Or you might like the pre-built shop layout by Divi builder.

These pre-built layouts can be accessed through the “Load
from Library” option.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 9/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

From this Library option, you can choose which shop layout
compliments your shop style.

Step 3: Insert Your Shop Module

Once your shop page is created, you need to add products to

your shop pages. If you like to create any custom shop page
layout, click on the insert Module.

Click on the insert module tab and then scroll down to select
the shop tab.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 10/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

When you click on the shop, you’ll come to the General setting
tab where you can customize the layout of the module. In this
shop layout, you can select which products you want to display
from your best selling, new product, or a new product
category.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 11/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

In the advanced design, settings select how many products you

wish to show and how many columns should be displayed. And
at the final step, you will have to choose in which order you
want to showcase your products. You can order your products
by price, date, or rating.

Step 4: Style Your Layouts

Once you are done with the layout of your shop, the next step
is to style your shop. If you click on the Advanced Design
setting tab, you can see comprehensive options for styling your
shop, such as font colors, hover, hover overlay, title, and price
fonts.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 12/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

Style your Shop With More than Five

Shop Modules
Divi comes with highly customizable shop modules, and you
can choose from more than five product display modules to
showcase your products amazingly.

Let’s discuss how the default shop module looks like.

1. The Default Shop Module

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 13/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

This is how your default your products are going to showcase

using the default shop module.

The general steps involved in all Divi shop modules are as

follows:-

Create a new page from the “Page section“.

Select the “Use the Divi Builder” tab.

Click on the insert column section.

Select how many products to display in a row

Click on the insert Module and then select “Shop“.

This one leads to the general setting area.

Select the category you would like to display.

In posts, Number section select how many products you

want to display on the homepage.

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 14/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

In the column, number select how many columns you want

to display.

In the advanced setting area, you can change the color,

font, and background of the product images.

Here are the five shop modules which you can select and apply
the settings as mentioned earlier.

2. Flat Card Shop Module

This is the most straightforward yet elegant shop module

where you can display your product within three-column, and
you can also change the background color and font styles by
using the Custom CSS tab.

3. Material Cards Shop Module

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 15/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

This material card module creates excellent texture and

concentration by adding shadows in the images. In the above
example, we have created six products in 3 columns,
respectively. The title font was selected to be size 18, while the
pricing font was chosen to be size 17.

4. The Minimal Overlay Shop Module

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 16/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

This shop style focuses on the minimalistic view of the viewers.

You can see that there is no price or title tag is included
because when they hove over the image, the only icon will be
visible.

In this example, only three products are selected in three

column styles.

5. Closed Grid Shop Style

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 17/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

This shop style is conducive to displaying your products

creatively. For this module, you will have to create a separate
Divi shop module for each tile, and for this purpose, click on
the insert column and insert three tiles labeled as “1/3”.

Now you can clone the whole column and drag and drop the
copies to the other two columns.

6. Irregular Grid Shop Module

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 18/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

For this type of shop module, you can combine two rows of Divi
shop modules. In the above example, you can stack a row of
three columns above the row of five products and five
columns.

To get this look to create a Divi shop module with general

settings of three posts with three columns and then add a row
below it. Later in the row inserted below, you can select a shop
module with five products and five-column, and to remove the
title and price tags, add the same shortcode of invisibility as
mentioned below.

Over to You – How to Build a

WooCommerce Store using
Divi Theme Builder from
Elegant Themes?
https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 19/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

You can see in this tutorial that creating a well-designed and

eye-catching online store is no more a complicated task with
the help of the WooCommerce and Divi theme. Divi theme
comes with a plethora of customizable options that help you in
creating your desired shop display. Once you have installed the
WooCommerce plugin and Divi theme, you can quickly start
your online shop by simply entering your products and
inserting a shop module, which we have explained earlier.

Moreover, you can style your shop module in several ways, and
the Divi theme comes with five in-built shop modules that can
be further customized as per your business need.

Although the WooCommerce plugin would be suffice for any

beginner, additional WooCommerce extensions are
recommended for creating an advanced store with more
robust features.

I hope you find it easy to kick start your ideal online store with
Divi theme and WooCommerce combination. Do tell us your
opinion on how did you find this article and send us your
queries if you find anything challenging to start with.

5/5 - (1 vote)

Leave a Reply
Your email address will not be published. Required fields are
marked *

COMMENT *

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 20/21
4/17/22, 9:50 PM How to Build a WooCommerce Store using Divi Theme Builder?

NAME * EMAIL *

WEBSITE

NOTIFY ME OF FOLLOW-UP COMMENTS BY EMAIL.

NOTIFY ME OF NEW POSTS BY EMAIL.

POST COMMENT

   

Home About Us Privacy Policy Disclosure Advertise Contact Us

WPNEON.COM © 2022
ALL RIGHTS RESERVED. CONTENT REPRODUCTION IS STRICTLY PROHIBITED.

Crafted with ❤ Using Ultra Theme

https://wpneon.com/how-to-build-a-woocommerce-store-using-divi-theme-builder/ 21/21