The Divi theme is one of the most popular themes for WordPress. One of the main reasons it’s so popular is that it comes with an easy to use, drag and drop page builder. You can use Divi theme to create any type of website, from simple blog and portfolio sites to complex eCommerce stores.
In this post, I’ll show you how to create a stunning eCommerce website with the Divi theme. This is a step by step tutorial that will walk you through the process of buying a hosting plan, installing WordPress, setting up your pages with the Divi theme, adding and creating products, and creating custom layouts for your shop, product category, and product pages.
eCommerce Website Preparation Steps To create an eCommerce website with the Divi theme, first, you’ll need to follow a few simple steps:
Getting a domain name and hosting Installing WordPress Install Divi theme Here’s a quick look at the website we’ll be creating:
With that out of the way, let’s walk through these steps one by one.
Step 1: Get Domain and Hosting The first step is to get a domain name and a hosting plan for your new eCommerce website. For this I recommend Siteground.com. You can purchase your domain and a hosting plan at the same time, not to mention Siteground is the fastest web hosting company with the best uptime.
To get started visit Siteground and choose the Grow Big plan so you can host an unlimited number of websites.
On the next page, you’ll need to enter your desired domain name and then fill out your billing information.
Once you have submitted your payment, your hosting account will be created and you’ll be able to proceed to your customer area and move on to the next step.
Step 2: Install WordPress In your customer area, click on the orange button that says Set Up Website. Then, click on Start a new website. Select WordPress, enter your desired email and password which you will use to log in to your website, and then click Continue.
Siteground will then install WordPress for you and when the installation is complete, click the Manage Site button. You’ll then be able to see all the installations in your Siteground hosting account. Click on the login button next to the site you want to work with and you’ll be taken to your WordPress dashboard.
By default, Siteground will install a Starter plugin, however, you can uninstall it because you don’t really need it.
At this point, you might notice that your browser is telling your site is not secure. You can fix this by installing and activating a plugin called Really Simple SSL .
Before proceeding to the next step, head on over to Settings > Permalinks and make sure to select Post name then save your changes. This will make your page URL structure more user and SEO-friendly.
Step 3: Download Divi Theme With that out of the way, we can install our theme. Head on over to Elegant Themes and choose either the yearly or the lifetime plan. Then, in your account area, download the Divi theme.
Go back to your website’s dashboard and go to Appearance > Themes > Add new. Upload the zip folder of the Divi theme and click Install now. When the theme is done installing, click Activate.
The Divi theme will now be active on your site and we can proceed with setting up our pages and our shop.
Create Your eCommerce Website With The Divi Theme Now that all the prep work is behind us, it’s time to actually create your site. The steps involved in this process include:
Creating basic pages Designing page layouts Installing WooCommerce Creating products Styling the shop with the Divi theme Configuring shipping and payment options Let’s walk through these steps.
Step 1: Creating basic pages The first step is to create the basic pages for our shop. These will include Home, About and Contact Us page. The rest of the pages such as the Shop and the Checkout page will be created automatically once we install the eCommerce plugin.
To add a new page go to your dashboard and click Pages > Add new. Type in the name of your page, Home, and then click Publish.
Repeat this process for the About and Contact Us page. When all the pages have been created, go to Appearance > Theme Customizer > Homepage settings. Set this to display a static page and then choose your newly created homepage from the drop down menu.
The last thing we need to is create a menu. Head to Appearance > Menus. Give your menu a name and click Create. Then, select your pages from the left-hand side and click Add to menu. Save and then visit your site to see how the menu looks.
Step 2: Designing page layouts Now it’s time to start creating the layout for our pages. To do this, view your site and click on the Home link to make sure you’re on the homepage. Then, click the Enable Visual Builder. Select Build from scratch.
The first thing you’ll need to do is add a row and then a module. For example to add a full-width header image like in the demo site, you’ll select a one-column row and then you’ll add a Full width Header section.
You can add additional modules like a text module, a button module, image module, and more. To add a background image, click on the Content tab, select Background and then add an image from your computer or from your Media Library.
As you can see, working with the page builder is easy and you can drag and drop various elements in place as well as adjust typography, colors, spacing, and more. The Divi theme also allows you to add animations and various other effects if you want to get creative with your website design.
If you want to save some time designing these pages, you can download a free Divi eCommerce layout that I’ve created for this tutorial. You can then import it into your site by following these steps:
In your dashboard go to Pages > All Pages and hover over a page you want to work with. Click on Edit with Divi Select Build from scratch and press the Start Building button Close out of the row builder and instead press the purple dots in the middle of your screen Click the up and down arrow icons and then select Import Drag the Divi layout for the page you want to create and drop it onto the Importer Press the Import Divi Builder Layout and wait for the process to finish Click the Save button or customize the page to your liking Step 3: Installing WooCommerce As you might have noticed, our homepage has a section that shows our products. Let’s go ahead and create our shop and products now.
Start by going to Plugins > Add new. Search for WooCommerce, install and activate the plugin. You’ll then be prompted to go through the store setup process where you can configure your payment and shipping options as well as which currency you want to get paid in, tax options, and more.
When your store has been created, click the Visit Dashboard button. You’ll notice you have two new sections in your sidebar, WooCommerce, where you can access the settings and the stats for your store, and Products where you can create and manage your inventory. This brings us to the next step of the tutorial which is creating products.
Step 4: Creating Products To create a simple product go to Products > Add new.
As you can see from the screenshot, you can add a product title and description, add images, set the price, and more. Since this is a simple product, all I’m doing right now is adding a description, an image, and setting the price.
You can also add categories for your products to make your store more organized and easier for your customers to navigate.
When you’re done entering all the information, click on Publish and your product will be live.
If you want to create a variable product, you’ll follow the same steps but this time, you’ll need to click the Attributes section and create product attributes. In this example, I’ve added attributes for size and color.
Then, click on Variations tab and select the option to create variations from attributes. Keep in mind that you’ll need to set a price for each variation, otherwise they won’t show up in your store.
Step 5: Styling Shop and Product Pages By default, the shop and product pages created by WooCommerce don’t look that great. However, you can change this by using the Divi Theme Builder option.
In your dashboard, go to Divi > Theme Builder. Click Add a New layout and select Shop. Then, click Create Template. You can then use the Divi builder as you would with regular pages to create an attractive layout for your store.
In this example, I’ve clicked the Build custom body and then added a three-column row followed by a row that has a narrow and a wide column. I’ve then added the Sidebar module followed by the Shop module.
In a similar fashion, you can use the Divi Theme builder to create custom layouts for product categories as well as individual product pages.
Step 6: Configuring Shipping and Payment Options The last step in this tutorial is to configure your shipping and payment options. Go to your WordPress dashboard and navigate to WooCommerce > Settings > Shipping.
Click the Add Shipping Zone button and then configure your shipping settings. In this example, I’ve created Flat Rate Shipping for United States.
You can also add a Free shipping rate for certain countries or states can get free shipping if they spend a certain amount or if they have a specific coupon.
To configure your payment options, go to Payments tab. You’ll see PayPal enabled if you’ve selected it during the WooCommerce setup so you can click on Manage to check and configure the settings.
You can also enable additional payment gateways such as Stripe by installing a free addon for WooCommerce called WooCommerce Stripe Payment Gateway.
Video Tutorial: How to Make an eCommerce Website With Divi Theme If you want to follow along with this tutorial or prefer to watch the video, I’ve included the entire video tutorial below.
Final Thoughts As you can see, creating an eCommerce website is not difficult even if you have zero coding skills. With a theme like Divi and the drag and drop page builder, you can create an amazing eCommerce website in a matter of hours so get started building your online store with Divi theme today.
Lester Hardesty
Hi Darrel, Great training video. I do have a question on how you set-up reacquiring charges.