How to Create a Fantastic Online Shop with WooCommerce, Divi and Bluehost (September 2018)

Over 74 million sites depend on the WordPress platform to host their blogs, sell their products or just write their daily musings for the world to see. When you get started building your ecommerce website you certainly have lots of choices to make, and WordPress ties into this. Which of the standout ecommerce platforms will you choose? Are you planning on grabbing a theme to sell your products or is there someone you can pay to build the site from scratch? Heck, what do you even plan on selling through your ecommerce website? There are thousands to millions of WordPress themes to choose from when you look for the frontend and backend structure to start selling online. Almost the same with hosting (but we prefer Bluehost).

The best themes include quick and easy ecommerce management tools so you can upload products and manage things like discounts, rewards, buttons and product pages. Your theme is also the first thing that people will see when they visit your site. It guides them through the process and really carries the difference between someone being satisfied with the experience or not.

In short, WordPress themes are crucial, and the Divi WordPress theme from Elegant Themes is a rather nice-looking option for you to consider. It can be used for a standard business website, but it also includes integrations for ecommerce selling and fast sales processes. Let’s learn how to create an online shop with the Divi WordPress theme.

Get Your Domain and Hosting First

The first step in any website creation process is grabbing a hosting account, domain name and installing WordPress on the site. Divi is no different. There are plenty of ways to get hosting and domain names, but I personally think Bluehost is one of the most secure and reliable options (for more details check out my Bluehost review).

What's really cool is that Bluehost offers a WordPress + WooCommerce integration plan that gives you everything you need to start selling online.

How do you get started?

Go to the Bluehost page that talks about the integration, then click on the Get Started Now button.

Keep in mind that this service starts at $11.95 per month, and it's very similar to how you would install a regular WordPress site on a Bluehost hosting account.

The main difference is that WooCommerce is already installed. In addition, you receive the following:

  • Positive SSL Ecommerce Security
  • A dedicated support line
  • At least 100 GB of website space
  • Unmetered bandwidth
  • 100 email accounts
  • Free domains
  • A dedicated IP

woocommerce_and_wordpress

Moving forward you can choose the plan you want to pay for and move onto the next page.

choose_your_plan

After that you can try out new domain names to figure out if what you want is still available. Once you find an available domain name that fits your brand move onto the next page.

BlueHost domain registration

After that, type in all your personal information, payment details and decide on which type of yearly or monthly hosting plan you want to use. It gets cheaper the more months you commit to from the start.

package_information

You can typically just skip all the extra add-on junk, unless you are really keen on paying to backup your site or pay for privacy protection. You generally don’t need this or can get it for free later on. After that you can create your login details for your Bluehost account, which then brings you to the CPanel. Once logged into the CPanel, navigate to the Website Builders area, click on WordPress and walk through the process for getting WordPress on your site.

BlueHost website builders

This usually only takes five minutes, since it’s all automated and you just have to make some login credentials to login to the backend of your site. After everything is setup it will give you the proper domain name to access if you want to change things on the backend of your site.

Creating Your Online Shop With Divi

Step 1

Start by going to the Elegant Themes product page for the Divi WordPress theme. This page offers the option for a theme demo and a quick download button. Elegant Themes sells its themes using a yearly or one-time payment structure which is nice for developers with multiple client sites or people who run numerous ecommerce websites. You can’t really buy just one theme, but the Personal Plan for $67 per year is similar to what you might pay for a regular theme, and you can stop the yearly payments if you don’t want the support anymore. Feel free to play around with the theme before you commit to the payment.

Divi WordPress theme

Step 2

Once you sign up, click the download button for the theme. This puts the theme as a zip file on your computer. Go to the Appearance tab on the backend of your WordPress site, and click on the Themes option.

Wordpress new theme

Step 3

Click on the Add New button.

Wordpress add new theme

Click on the Upload Theme button. Find and upload the theme zip file. Go through the process to completely activate the theme and then you should be able to see the theme on the frontend of your site.

Wordpress theme upload

Step 4

If you go to the Divi Theme documentation page you will find just about every tool and feature you can work with on the theme, but we are going to focus primarily on setting up an ecommerce website. The Divi theme is fully compatible with WooCommerce so you can display all your products from that.

What's awesome is that the initial Bluehost signup already installed WooCommerce on your WordPress website, so you don't have to worry about installing or setting it up. It should already be available in your dashboard.

Step 5

You technically already have the ecommerce site all setup, but we want to actually add some products to make it look like an ecommerce site on the frontend. Go to your WordPress dashboard, click on Products tab under WooCommerce and click on the Add Product item.

WooCommerce add new product

Step 6

This brings up a new product page for you to fill out. It looks very similar to any WordPress page editor, except you can add a product name, description and a featured image so people can see what the product looks like on your website.

Ecommerce add a new product fields

Step 7

If you scroll down below the description area you will find every possible WooCommerce feature to play around with. Feel free to modify things like SKU numbers, inventory, pricing, shipping and attributes. The features are far too vast for me to outline them all here, but you can go to the WooCommerce documentation page to understand everything you can set up on your ecommerce site.

WooCommerce features

Step 8

The whole point of this is to create a homepage or regular page that features all of your products when people show up to your site. Therefore, you should go to Pages > Add New on the left hand side of your WordPress dashboard.

Try-Shopify

Wordpress new page

Step 9

Create a title for your page. Click the Use Page Builder button at the top, and tap on the Insert Modules area to include a full width header. You don’t have to choose a full width header, but we are going to for this tutorial.

Page builder wordpress

Step 10

Click the Full Width Header button.

Add a header

Step 11

Fill in the details for your Site Title, Subheading text and Text Color. You can even change the Admin Label, which is mainly for your own reference. Hit the Save button when complete.

Header customization

Step 12

Tap on the three bars to the left of the Full Width header module to change more settings.

WordPress woocommerce setup

Step 13

Here you can give the header a nice background color and even include a video for your company.

Tweak these buttons around

Step 14

Now that the header is complete we can include the ecommerce module by clicking on the Insert Columns area.

Wordpress ecommerce setup

Step 15

Choose how many columns you want, then click on the Insert Modules option that appears. Select the Shop button near the bottom.

Wordpress ecommerce setup

Step 16

Feel free to modify how you want to display your products. So you might want to show your recent products, along with 12 items on the page, a few columns and how you want them to be ordered. Click the Save button.

Wordpress ecommerce setup

Step 17

Once this is complete you can hit the Preview or Publish button to view changes on the frontend. As you can see, the products show up nicely, and you can always go back in to change your products or storefront settings on the WordPress backend. Congratulations!

If you have any questions about setting up the Divi WordPress theme, please let us know in the comments section below.

Divi Rating: 5.0 - Review by

Catalin Zorzini

I'm a web design blogger and started this project after spending a few weeks struggling to find out which is the best ecommerce platform for myself. Check out my current top 10 ecommerce site builders.