How to Create a Fantastic Online Shop with WooCommerce, Divi and Bluehost (March 2017)

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.

Try-Shopify

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.

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 - 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.

23 Responses

  1. Hi there, thank you for this article…
    I am looking to setup a new online store though… but what is the difference between doing it this way (above: Bluehost+Wordpress+wooCommerce) vs. just Shopify?

    Appreciate your help!

  2. Thank you for this detailed post:) Do you know how i set a fixed image/thumbnail size for the products on display. I have tried to change it under the wocommerce settings and regenerate thumbnails, but it didnt work.

    1. Hi Karen,

      It’s definitely possible, you might need to contact a developer and see exactly how to implement Viabill on your website.

      Best of luck,

      Bogdan – Editor at Ecommerce-Platforms.com

  3. Hello,
    I am working in the Shop feature and having two issues.
    1. I am trying to show ALL products and am having to always select a category? Do I have to create a category of ALL or is there another way?

    2. I have noticed that with the display to shop items it displays all items on one page (30 items) rather than spreading them across pages and allowing a user to move to page 2, page 3 etc? Is there a way to change this so default page is 12 items and then the remaining goes to the next page ?

  4. Hi

    I would like some guidance as it is the first time using Divi and Woocommerce together.

    My requirements;
    I would like to know which option or direction to go in for customer registration for the site, to be used for marketing communications and to purchase products online.
    – Customers should be able to register even if they are not purchasing anything
    – How will i achieve the most flexibility in gaining these details leke exporting them and having a spreadsheet record for tracking and manipulation like sending out mass mails or SMS’s etc as there would be times where I will need to backup information somewhere just in case, and the need to then use the same database (MySQL) for just users in another part of the site or say within the store as it is for a pharmacy and we may setup patient histories with blood pressure, glucose readings and many others for instance and then perhaps add custom pages where their profile information will be used.
    Data is also needed to then import/add customers into our local pharmacy program in our physical store to process prescription medications, delivery addresses and most importantly medical aid information as this is not a standard form field or structure item etc to be in accordance to lay and so it would mean csv/other file exports from online membership database to then import into SQL databases on our in store server.
    – Ideally I need to be able to move data around conveniently or more smoothly and thus i need to cater for this properly on the site before just using any registration or form for sign-up. Could i setup a separate database for the users that will be its own, independent database that is not within the WordPress/Divi/Woocommerce tables or databases that are created by default ?
    – Another element is safety for online payments, is this enforced through the theme itself or woocommerce or the wordpress backend or perhaps in all 3 ?
    Thank you and hope to hear from you soon.

  5. Any recommendations on using Divi Pricing tables and WooCommerce. Rather than a shop it’s a packaged consulting led offering that clients buy?

  6. i am trying to add this shortcode there in code module [product_categories parent=”0?] for displaying product categories but it is not displaying anything on inspecting there is only blank div showing with class=”woocommerce column -4″ so please help me regarding this if someone know what is problem

  7. I’m having an issue getting my products page to look like my other pages. everything looks good until you click “create your perfect print” and choose “white Birch” or “Brushed Aluminum” then all the products are jumbled and the back ground is white. Im absolutely helpless when it comes to this stuff, i basically learned this all today. We are using “Fancy product designer” for our custom product and Im trying to pick up where someone else left off without any previous experience or information. Any help would be appreciated.

  8. I have chosen to show my ‘featured items’.. but nothing is showing. How do I chose what products are ‘featured’ ?

  9. What if you want to display your shop by Categories?
    The Divi modules dont give that option, only Featured, Best-Selling and so on…
    🙁

      1. Hi Craig you can display the products category using the Divi Shop module. In the module’s general setting under the Type option drop-down,select Product Category . Now you should already have some items for each product category you created in your woo-commerce,with that done, you will see an option Include Category; go ahead an select the category you want to display. I hope this help you. Remember have items in each category of your products before you activate this option

        1. Thank you for the detail ‘luashoro’. I have two categories with products in both and the ‘Product Category’ is still not showing for me. Any clues please?

  10. Hi, I’ve done all the above, except I have a custom page, using a blank page template with Divi throughout my site. The shop, cart, checkout can all be built using shortcodes and the page builder…however, the products using woocommerce cannot…or not as much as I can find. I’m new to all this, but surely there must be a way to make the products pages look the same as the rest of the site?? I don’t want there to be the Divi header and all that showing?? got any ideas? It looks unprofessional at the moment.
    Thanks

    1. yes you can remove it from some of the pages using blank page option but for some reason it wont on others kind of messes it up.
      probally best way is to make child theme and edit some of the code
      or search for predone divi-commerce themes pay few $ and customise

      however here is simple way of doing for the pages you can

      open the wp admin , > dashboard> all Pages >

      use the following to edit (look at the pages woocommerce automatically adds ie cart. etc)

      example: eidt and make a custom cart page

      important to do this bit to make things easy before you use ET page page builder all you will see is the woocommerce short code

      cart page = [woocommerce_cart]

      copy the short code to a new notepad, text pad, or simillar with a little description if you want

      step 1

      remove divi header , go to page attributes change it from default to blank, click update to save the page, preview , divi header is gone 🙂

      step 2

      I want to use ET page builder for new beautiful design ( yes please)

      first delete (cut saves it ready to paste) the woocommerce short code [woocommerce_cart] so now you have an empty page, update changes again

      you can now start to edit the page using the ET page builder, start by adding a text module somewhere paste your woocommerce shortcode, [woocommerce_cart] for a quick test update and preview changes

      step3

      rinse and repat for the other pages 🙂

      Dont forget you can switch side bar on/off or edit the widgets

      happy days and endless beautiful designs, yipee!

      woocommerce shortcodes > http://docs.woothemes.com/document/woocommerce-shortcodes/

      paste them on a notepad/text doc ready to cut n paste

      John

Leave a Reply

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

Rating *