Building an e-commerce website can be a lot of work. However, the simple and user-friendly interface of the Divi theme can reduce the hassle of doing it.

But, if you are a beginner with Divi and don’t know where to start, we have just the right guide for you. In this article, we will share with you how to build an e-commerce website with Divi in just 9 steps.

Step One: Domain and Hosting

Before starting a website, you’ll need a domain and hosting. A domain is your site’s name, and hosting stores all your website’s data. Here’s how to choose a good domain and hosting:

For Domain:

• Create a unique and memorable name.
• Check availability on a domain registrar site. 
• Choose an extension like .com, .net, or .org.
• Register the available name, paying a yearly fee.

For Hosting:

• Consider speed, storage, and support.
• Read reviews for insights.
• Ensure high uptime for site availability.
• Reliable customer support is crucial.

For domain and hosting, consider Hostinger or Namecheap for their user-friendliness and affordability.

Step Two: Install WordPress

With your hosting and domain ready, it’s time to get WordPress for the Divi theme. You can use your hosting’s auto-installer for an easy setup or manually download and install WordPress from the official WordPress website.

Step Three: Get the Divi Theme

To use the Divi theme for your website, you’ll need to purchase it, as there are no free versions available. Here’s how to buy the Divi theme:

• Visit the Elegant Themes website.
• Sign up for an account from the pricing page by providing the necessary information to complete your registration.
• Download the Divi theme and install it within your WordPress.
• After installation, you’ll receive a message confirming the successful installation.
• Click on “Activate” to set Divi as your active theme.

With all the necessary prerequisites in place, we are ready to start building our e-commerce website with Divi. 

Step Four: Setup WooCommerce

WooCommerce is probably the best WordPress e-commerce plugin to help streamline all your business processes from start to finish. That’s why it’s a given that you need to install and set this up for convenience. 

To install WooCommerce, go to your site Dashboard > Plugins > Add New Plugin. Then type in WooCommerce in the search bar. The correct plugin should be the first result, click on Install Now and then click on Activate.

After activation, you will be greeted with a welcome page. You can let WooCommerce automatically set up a part of your store by answering some questions or you can skip the guided setup. To make things easier, we will choose “Set up my store.”

In the next step, WooCommerce will ask you if you are an experienced seller or not, and you need to answer accordingly.

After clicking on continue, you will be asked to set up a store name, the type of products you are going to sell, and the location of your business.

Then WooCommerce will suggest some additional plugins for you to add. You can skip them if you want, but for now, we’ll add them. 

WooCommerce will then ask you to log in to your WordPress account, which we will skip for now. 

You will be taken to your WordPress dashboard, where you will see the steps to complete the WooCommerce store setup broken down.

We will follow these steps to complete your WooCommerce store setup.

Step Five: Add Products

To add a product, simply click the “Add Products” button in your WooCommerce dashboard. You will then get to choose the type of product you want to add.

For now, let’s add a physical product, so click on the first option. But if this isn’t your first rodeo, you can choose a product you like or if you don’t see the type of product you want to see, you can start blank. 

The next page will have fields so you can add your product name, price, and description. You can fill these out as needed.

The tabs on top will let you add more details about your product like shipping options, quantity, etc. Remember, it’s best to give out as much information as you can. 

When you are done filling out information about your product, simply click “Add” on the top right corner to finish adding a product.

Now, it’s common for products to have variations in color, size, etc. To add variations to your product, go to the Variations tab and click on Add Variation Options.

A window will appear where you can search for an existing variation or create a new one. 

You can add as many attributes as you want and when you are done click on the Add button to finish. 

Now you will get a warning message about the variable product price.

Click on the Set Prices button to set a flat price for all of them. If you want to add a different price, click on the Edit option. 

This is where you can edit this variation specifically by adding different images, descriptions, pricing, etc.

Step Six: Set Up Payment, Shipping, Tax Rates

After adding products you need to set up your payment options, shipping policies, tax rate, and other transactional options. For that, you need to go to WooCommerce > Settings in your dashboard.

From these tabs,  you can set everything related to taxes, shipping, payments, and other aspects of your store. Explore these options to provide all the necessary information. 

Step Seven: Create a Home Page

Now that you have completed your store setup, we can finally move on to designing your e-commerce store with the Divi theme. 

If you go to Pages > All Pages, you will see that WooCommerce has already created the essential pages for us. But a home page is missing, so we will create a home page.

Go to Pages > Add New Page, and you will be taken to the new page. Give it a name, for example, “Home” by writing it on the page then hit publish.

Now, go back to your WordPress dashboard, and click on Settings > Reading.  Change the Your homepage displays option from Your latest posts to A static page and set the “Home” page as the Homepage.

This means we have set the Home page we created as the homepage of our website. Now, we will start designing the home page using the Divi builder.

Go to Pages > All Pages, Hover over the Home page and you will see an option named “Edit with Divi.” 

You will be presented with three options-

Choose “Start Building” and it will take you to a blank page with an option to add different sections.

Upload Your Logo and Create a Menu

Go to your WordPress Dashboard then go to Divi > Theme Options. You can upload your logo directly from your computer in the next window.

Go back to WordPress Dashboard then Divi > Theme Customizer > Menus > Create New Menu. When you click on that button, you will see different options for creating and customizing your homepage menu.

First, set your Menu name then select which menu you want to customize. For now, select Primary Menu and click Next.

From the next menu, you can add new pages to your menu bar or rearrange them.

Create a Hero Section

To start with we would like to design a hero section that has a content part and an image. So, we will select two columns to accommodate that. 

Now, we will choose a background color for the whole section. For that, click on Section Settings > Background > Add Background Color. Now, if you make your hero section catchier, you can add an image, video, gradient, pattern, or mask. 

Once you have chosen what to use for the background, you can go over to the design tab to customize it as you like.   

Now, to finalize the hero section, we will add two columns and we’ll use a text module on the left and the image module on the right. Upload the appropriate image and text to decorate your hero section. 

As you can see in the picture we made a simple hero section with background masking, some text, and an image.

Create a Banner

Now, we will try and create a banner with different product categories. Add a new section, then add three columns within it. 

To make a banner, we will use the blurb module which is an image with a body of text underneath.

Add images and text to fill up the blurbs. Also, don’t forget to add a background to this section.

It would be best to link these blurbs to your shop. Hover the cursor over each blurb and click on the gear icon to open the blurb settings. Under the content tab, find the link section and use the targeted page link.

Create a Footer

To complete the home page, we will now design the footer, which will be a global footer applied to all the pages.

To create a global footer, go to your WordPress Dashboard > Divi > Theme Builder. Then click on Add Global Footer > Build Global Footer.

You will be led to a blank page where you can start building a global, custom footer. Our footer will have a quick link section, a social media section, and a contact details section.

That’s why, we will use three columns again. As for modules, we will use a blurb for the contact details.

But instead of images, we will use icons. Open blurb settings, go to the Image & Icon section, and enable the use icon button.

For the contact section, we need an icon of a phone, so search for a phone icon and click on it to select. Go to the Design > Image & Icon and set the icon placement to the left. Change the text to your phone number.

Copy the blurb module and add other contact details (like email or location) in the same process. Also, from the design tab customize the look of the module.

For social media links, there’s a module named social media follow. Use the social media follow module to add social media links. 

The next step will be to add links to the social media icons. From the editor, click on the settings icon beside the social media name, find the option to link, and add your social media link.

Now, for the last part, we will add a section with links to your site’s pages. Write the names of the pages you want to link in the body of the text module. When you select your text and press Ctrl + K, a box with options to link will appear. 

You just need to write “/” and the name of the page you want to link. For example, “/about” links to the About page. 

The background color of the linked pages will by default be blue, which can be an issue. To fix this, we need to write a small CSS code.

Click Ctrl + S to save the changes on the footer. Then, navigate to Divi > Theme Customizer > Additional CSS in the WordPress dashboard.

Write the following code in the code editor –

footer a:link {

color:#fff

}

Click Publish to save the changes.  

We will also add another text module at the very bottom of the footer, which would say “All Rights Reserved | Powered by Divi”. Adjust the space of the module from Section Settings > Design > Spacing. 

This is how your footer should look-

Step Eight: Create Other Pages

With the homepage done, we will turn our attention to other pages. We will start with creating a single product page template. 

Create a Product Page Template

Go to your WordPress Dashboard > Divi > Theme Builder > Add New Template > Build New Template > All Products.

Click on “Create Template” then Add Custom Body > Build Custom Body. A blank page will appear where you can design your product page. 

Add a single column and use the Woo Breadcrumb module to create breadcrumbs. You can customize the items in the breadcrumb from the design tab.

Up next, use a two-column row and add different Woo modules to design your page template.

Here, we have used in total of 10 Woo modules-

1. Woo Breadcrumb
2. Woo Product Title
3. Woo Product Image
4. Woo Product Rating
5. Woo Product Description
6. Woo Product Price
7. Woo Product Stock
8. Woo Product Cart
9. Woo Product Tab
10. Woo Product Information

With this, you can design a full-fledged product page template. Also, following the same process you can design other pages like the Shop, Product Category, Cart, Checkout, etc. 

Create a Contact Us Page

Create a new page and add a two-column row. Add a text or a blurb module on one side and use a contact form module on the other.

With a text module on one side, a default contact form should look like this. You can open the Contact Form settings and customize the form as you wish. 

Here is a sample for you-

Step Nine: Finish Up

The steps we have shown you throughout the article are enough to build a basic e-commerce website with Divi. Once you are done with creating all the necessary pages, test all the functionalities to see if they are working. 

Also, you need to optimize your web design for smaller devices. 

While editing with the visual editor, you should see a small bar in the bottom left corner.

From these options, you can check out how your webpage looks from smaller devices and you can also optimize them accordingly. Your changes will only apply to the smaller devices and not the PC view.

Conclusion

It’s not complicated to build an e-commerce website with Divi, thanks to its drag-and-drop modules and customizable features. However, since there are so many options and features to customize, it can sometimes get tedious. 

The best way to make Divi work for you is to explore and experiment with everything it has to offer. Once you spend enough time tweaking its features, you can build the most amazing websites in a flash.