How to Build an eCommerce Website with Divi

Building an eCommerce website with Divi is not as difficult as you might think! 

To make it clear, we will show you how to build an eCommerce website with Divi in the simplest way. 

From choosing the right domain name to launching your online store, this comprehensive guide will help you gain the knowledge and expertise to confidently navigate the eCommerce landscape.

Let’s get on that!

Step One: Choose a Domain Name and Web Hosting

Whenever it’s time to build a website – there remains always some pre-work to do. In order for our eCommerce site creation, we need to select a domain name and choose a web hosting provider first.

Choose Your Domain Name

Domain names serve as unique identifiers on the internet, just as a street address does in the real world. It’s the name people type into their web browsers to reach your website. Choosing a memorable, relevant, and easy-to-spell domain name is vital for enhancing brand recognition and user experience.

However, you can choose some well-known and reliable domain registrars, such as – Namecheap, Domain.com, GoDaddy, Bluehost, etc.

Select One Web Hosting

Web hosting is the service that stores and infrastructures your website’s files, images, and content. It’s like renting a physical space to store your business materials. Selecting a reliable and scalable web hosting provider is essential for ensuring your website’s accessibility, performance, and security.

Step Two: Install WordPress and Get Access to the Divi Theme

After getting done with the domain and hosting, it’s time to proceed with the installation of WordPress. Fortunately, most hosting providers offer a one-click installation feature. 

Simply access your hosting account’s control panel, locate the ‘One-Click Install’ section, select the WordPress icon, click ‘Install’, and follow the straightforward on-screen instructions.

Here’s a small note – if you are using a managed WordPress hosting or Divi hosting service, you can skip this installation process altogether. Those hosting providers are tailored to WordPress so that you will get pre-installed WordPress on it.

Get Access to Divi Theme

Divi Theme is powered by the most beautiful website creation features – especially in eCommerce. Since we are in the scratch-building process, we will install the Divi Theme in a beginner-friendly way.

• Download ‘Divi Theme’ from Elegant Themes 
• Then log in to your WordPress dashboard and navigate to Appearance > Themes
• Click on the Add New button at the top and then click the Upload Theme button
• Now, click the Choose File button and select the ZIP file of the Divi Theme
• After uploading, click the Install Now button to start installing the theme.
• After successful installation, trapping over Activate will activate the theme

Note: If you have chosen a Divi partner hosting, the theme will be automatically installed. You can skip this step.

Step Three: Setting Up the WooCommerce Store

In WordPress, building an eCommerce website is impossible without installing the WooCommerce plugin. But before getting over the setup of WooCommerce, we have to install it.

• Just get over the WP dashboard and hover Plugin will let you visible Add New option. Click on it
• Now, search for ‘WooCommerce’
• Tap the Install Now button and after installing activate it by tapping over the Activate button

Note: if you are on an existing setting with pre-installed WooCommerce, you can skip this. 

After activating WooCommerce you will be redirected to the welcome page. 

After activating WooCommerce, let’s proceed with setting up the WooCommerce store. Even though it’s an easy process, we’ll guide you through each step.

So, Click ‘Set up my store’ to begin the process

Next, select your reasons to start over with the WooCommerce,

After that, you have to fill up these blocks by giving your name, your selling product industry, location, and email address.

Note: If you want to receive tips and recommendations from the Woo team, you have to click on the checkbox 

Now this step lets you choose the free features of WooCommerce to optimize and scale your business. Mark according to your needs then proceed via the ‘Continue’ button.

Finally, you will redirected to these six steps to complete. They are – Add products, Choose your theme, Set up payments, Add tax rates, Add shipping costs, and Get more sales.

However, completing this six-step is a part of the WooCoammerce setup but we will make this step clear by going through the streamlined process. So that you can sync with our complete eCommerce website-building guide.  

Step Four: Start with the Basic Page Creation

With the core WooCommerce setup complete, it’s time to craft the essential pages that inform and engage your customers. These pages serve as the foundation of your online store, providing a seamless user experience and conveying key information about your products, services, and policies.

However, we are going to make them from scratch. Let’s on it.

Add Pages

For our eCommerce site, we’ll include five pages here – Home Page, Products, Cart, Contact, and About Us. Though WooCommerce comes with essential pages right out of the box. You can edit them or just add a new one.

• Go to Dashboard > Pages > Add New
• Enter a title for your page, such as ‘Home Page’
• Then click on ‘Publish’ and you’re done

The rest of the four pages will be made as same with these steps. You can make as many pages as you want. 

Here’s a small note – activating WooCommerce will give you some by-default pages. You don’t need to create them again. But you can try to design them with the Divi builder

Menu Creation

Creating a menu is a vital part of building a website. It makes your site easier to navigate for your visitors. 

• Go over the WP dashboard > Appearance > Menus 
• Enter a menu name in the Menu Name field
• Tick on Select All and then Add to Menu to add them
• And lastly, you can rearrange the menus as you need by drag-drop them

Here’s a small thing to notice. In Menu Settings you have options to make a suitable location for the menu on your website. Make sure you are on that. Select your preference and click Save Menu to save your changes.

Home Page Settings

Divi Theme by default displays the latest posts as a home page. To make a change, you have to do the following –

• Go back to the WP Dashboard > Divi > Theme Customizer main menu and click on Homepage Settings
• Select ‘Static Page’ for custom homepage insertion
• Now click over the ‘Home Page’ and you will get the options of pages that you want to choose as the homepage
• Click on ‘Publish’ and you are ready to go

Header

The header is the first section where visitors get to know your site branding and everything else from the navigation menu. 

Let’s take a look at what it takes to create a global header that can be used throughout your entire site. Let’s get started.

• Go over the Dashboard > Divi > Theme Builder > Add Global Header > Build Global Header

• Now, design the section by clicking on the section settings icon (If you want to change the default look)
• Insert the row by clicking on the green “+” button (a single row is ideal for good menu design)
• Then insert the ‘Menu’ module and customize it based on your preferences

Nurture the menu by uploading a logo, changing the background color, adjusting the text color, applying hover effects, and more. Here’s our final look –

Footer

The global footer is as important as the global header and the process of making the footer is the same as the header. 

You can customize the footer to your needs. Add contact information, social media accounts, location, useful links, newsletter signup forms, popular posts or articles, or more.

However, after using the most of Divi modules, we have created our own footer here. Let’s have a look –

Step Five: Add Products

Now, are on to create our first product. 

Just go to the WP dashboard > Products > Add New

Then in the default WooCommerce editor, you can create your first product by giving it a name, description, and price. After configuring the product, save and publish it so customers can purchase it.

After completing the product configuration, save and publish it to make it accessible to your customers. The final product page will look like this –

Create a Variable Product

You can also add variable products using WooCommerce’s variable product feature. It simplifies product management and avoids needing to add multiple versions of the same item separately.

Here is the process, of how you can create one –

Create attributes

• Go to the ‘Products’ section and select ‘Attributes’ from the menu bar.
• Fill out the ‘Name’ field with an attribute title. We named it ‘Color’.
• (Optional) Add a slug if necessary.
• Finally, click the ‘Add attribute’ button to save your changes.

Note: We also add here ‘Size’ attribute according to the same processes.

Add specific values of an attribute

• Select the ‘Configure terms’ option from the ‘Terms’ column.
• On the left side, you’ll find an ‘Add new Color’ form. Enter the color of your products, such as blue, gray, green, red, or yellow.
• To add more colors, click the ‘Add new color’ button.

Add attributes to an individual product

Click on ‘Products’ from the WordPress menu bar. Either select an existing product or create a new one, it’s up to you. Select ‘Variable product’ from the drop-down menu under ‘Product data’.

• Now, clicking on the ‘Attributes’ tab shows all the attributes you have set up for your WooCommerce product. These are the same attributes we created earlier.
• Choose one of the attributes from the drop-down menu list. For example, you can select the ‘color’ attribute. 
• If your product has multiple colors, you can select more than one option or simply click the ‘Select all’ button.
• Check both the ‘Visible on product page’ and ‘Used for variations’ options. This will display the attribute on the product page and enable variations based on the selected attribute.
• Click on ‘Save attributes’ to save your changes and update the product.

Add variations and finalize your product

• In the ‘Variations’ section, click on ‘Add manually’.
• Next, click on the drop-down menu ‘Default Form Values’ to select your color
• Again select a color from the drop-down menu beside the hash code and customize the rest of the settings.

Note: You can generate 50 variations automatically by clicking on ‘Generate Variations’.

Here’s the final look of our variable product –

Step Six: Create Core eCommerce Pages

Now, we proceed to add the core pages essential for our eCommerce store. These pages encompass a single product page, multiple product listing page, a product category page, a cart page, and the checkout page.

Let’s start them.

Single Product Page

First, we are going to make a template for a single product page. This will help you a lot to add a product to your site. 

To start the process,

• Go to Divi > Theme Builder and click ‘Add New Template’ 
• Click ‘Build new template’ to build from scratch. (Select ‘Add from library’ if you want to upload an existing template).
• Now scroll down and select ‘All Products’ to assign the custom product
• Click on the ‘Create Template’ button.
• Finally, click Add Custom Body > Build Custom Body

Next, we will redirect to the Divi visual builder to make our single product page template. Before starting designing, we have to add rows and modules according to our design.

To add a row, click on the green (+) icon to insert a new row. Next, opt for the single-column structure, and proceed to add the module.

Use these modules to give a minimalistic compelling look of a single product page. 

For the first row, we will add –

• Woo Breadcrumbs – Display the breadcrumbs navigation for your store.
• Woo Notice – Style the notice displayed on products and during checkout.

Now, add a second two-column row and insert these modules –

• Woo Image – To showcase the product image. (Only on the left row)
• Woo Title – To present the product title.
• Woo Rating – To display the product rating.
• Woo Price – To show the product price.
• Woo Description – To exhibit the product description.
• Woo Add To Cart – To add the ‘Add to Cart’ button.
• Woo Meta – To display additional product metadata such as SKU, categories, and tags.

After designing, save them. The template will look like this –

Next, insert the third row and select the single-column structure > add the Woo Product Tab module.

This module consists of three tabs: Description, Additional Information, and Review. You can disable a particular tab by unchecking it in the Include Tabs option in the Content block.

Now insert the fourth and last single column row and add the Woo Related Products module in the same process. Style them and least save changes. 

Make a Shop Page

Installing WooCommerce automatically creates a default ‘Shop’ page that showcases your product listings. 

With Divi Builder, you have the flexibility to design a personalized WooCommerce Shop page. This is where you can incorporate additional elements of your choice alongside the product feed.

Here’s how we can start –

• On your WordPress dashboard go to Divi > Theme Builder. 
• If you want to build a template from scratch choose ‘Build New Template’. (Select ‘Add from library’ if you want to upload an existing template).
• Then select ‘Shop’ in the ‘WooCommerce Pages’ block (here we are making a template for the Shop page).
• Click on the ‘Create Template’ button.
• After the template addition, click ‘Add Custom Body’ and select ‘Build Custom Body’

That’s the way you can go on to the template making. From now on, it’s the designing part. Where you can explore more with the Divi. Add row modules and create your unique one. Here’s our shop page –

Product Category Page

Now, we have to create a product category page to display our diverse product categories. We will create one category here. Rest assured, it follows the same process as Step Seven.

• Go to Divi > Theme Builder and add a new template by clicking the plus button. 
• Click ‘Build New Template’ to build from scratch. You have options to add templates by clicking on ‘Add from library’.
• Then select ‘All Product Category Pages’ from the ‘Archive Pages’ section
• Click on the ‘Create Template‘ button
• Next, click Add Custom Body > Build Custom Body.

Now explore and rundown your creativity and a category page as the same as to shop page. Here’s what we have made –

Cart Page Creation

This step is quite similar to single product page creation. However, here’s the way you can make in-

• Go to Divi > Theme Builder and add a new template by clicking the plus button. 
• Click ‘Build New Template’ to build from scratch. You have options to add templates by clicking on ‘Add from library’.
• Then select ‘Cart’ from the WooCommerce Pages block
• Click on the ‘Create Template‘ button
• Next, click Add Custom Body > Build Custom Body.

Now, you have to use a couple of modules to create a cart page. Here are they –

• Woo Cart Products – Display the products in the cart of a visitor.
• WooCart Totals – Show the product price breakdown for a customer’s cart.

Now, save your changes and exit the Divi builder.

Checkout Page

As the template inserting process is similar to the previous Cart Page Creation, we are not covering them here. Just follow that step and then insert these modules –

• Woo Checkout Billing – Provides the billing form during checkout.
• Woo Checkout Details – Display information about the purchase.
• Woo Checkout Information – Shows additional information during checkout.
• Woo Checkout Payment – Provides a list of payment options during checkout.
• Woo Checkout Shipping – Displays shipping options and information during checkout.

Step Seven: Create Other Essential Pages

Now, let’s proceed with creating the remaining pages: Contact, and About Us page. Access each page individually from the dashboard and use the visual builder to design them. Add sections, rows, and modules as needed to align with your design preferences. Be sure to save your work along the way for each page.

Contact Page

Contact pages give visitors multiple ways to contact the company. Including email addresses, phone numbers, physical addresses, social media links, contact forms, and more.

Explore the Divi modules and create your contact page copies. To make a simple contact page, we use the Text and Contact Form modules to continue –

About Us Page

The ‘About Us’ page is where you can share details about your website, organization, or business. This is where site owners typically provide information about the site’s history, the team behind it, its mission, and any other relevant details.

Step Eight: Set up payment processing

Now, let’s move forward with setting up the payment options, which is a straightforward process in WooCommerce.

Simply navigate to WooCommerce > Settings > Payments from the WordPress dashboard.

You’ll find three default payment options. To configure a payment method, click its title or the ‘Finish setup’ button.

For Direct bank transfer, provide a payment method title, description, instructions, and account details to proceed. You can add multiple account details to receive payments. And make sure you have enabled the check box for bank transfer in the first.

The Check payments is the same process as the direct bank transfer. The difference is you don’t have to fill in the bank account details. Rests are the same. After configuring, mark the Enable/Disable checkbox and Save the changes.

Next, configure the Cash on Delivery payment method by providing a title, descriptions, instructions, and selecting the appropriate shipping method. Additionally, you can enable the COD option for virtual orders. Finally, mark the Enable/Disable checkbox and Save the changes.

Note: You can utilize any of these three methods. Or else if you want to try another, there is a vast collection of payment plugins available in the WordPress marketplace. Just install, configure, and activate them for seamless integration.

Add Nice-to-have Sections (Optional)

While our eCommerce website is totally complete, there are still opportunities to enhance its appeal. You can add testimonials to showcase customer satisfaction, incorporate a blog page for regular updates, or establish an FAQ section to address common queries.

We will give you an example of adding a testimonial. The rest of the blog, FAQ page, or others will be the same as this.

Here, to make a testimonial, we use DiviGear’s Divi Carousel Module 2.0. Cause it has advanced features like single or multi-slide options, automatic playback with hover pause, looping, coverflow, lightbox, social icons, rating options, and more to make our review section stand out.

So, let’s make a testimonials within a short steps –

1. Add a new section, a single row, and then insert the Divi carousel module
2. Click ‘Add New Item’ to add and design the testimonial with Divi Carousel’s advanced content element and design options. Design them according to yours.
3. Finally, duplicate the primary item with as many reviews as you want. And later just input the content. 

To get a complete testimonial tutorial, check our guide on How to Create a Stunning Testimonial Carousel in Divi

And for the rest of the additions, you can try our DiviGear plugins to get the most out of your designs.

eCommerce Website Finalization

We are done to build an eCommerce website. But before launching our shop, we have to consider some testing-related precautions. Just simply check these things –

1. Review every part

Make sure all the content on your site sounds right and works properly.

2. Enable responsive design

Eliminate design issues that do not attract visitors. Moreover, your website should be fully responsive and look good across all web browsers and devices.

3. Check functionalities 

Verify that all details and features on your site are working properly. It may include lead generation forms, email signups, comments, and social sharing.

4. Use proven SEO techniques 

Using SEO will help you get more visitors to your website. Use proper search engine optimization techniques, such as unique page titles and meta descriptions for the launch.

5. Back up your site

The final step before launching a site is to make sure you set up site security and regularly back it up to prevent data loss. Creating and storing regular copies of the website can also help prevent malware attempts against the site.

Where to Next… ?

Congratulations!

We are at the final of our guide. Hope our Eight simple steps have helped you to know how to build an eCommerce website with Divi in just a few minutes.

So, what are you waiting for?

Unleash yourself and share your eCommerce website building experience with us. If you ever need a push, don’t hesitate to reach out. We’re here to support you every step of the way.