Best hosting for wordpress e-commerce tutorial

Home » Ecommerce Resources » 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?

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

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

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.

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.

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.

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

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.

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.

Click on the Add New button.

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.

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.

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.

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.

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.

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.

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.

Click the Full Width Header button.

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.

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

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

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

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

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.

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

23 Responses

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

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

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

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

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!

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

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

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?

Actually you can’t.

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

ok this totally helped, but the shop module still has a side bar. there is no shortcode in that module?

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.

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

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

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.

Hi, I was wondering how to add related products in each product page with Woocommerce and Divi. Thanks in advance!

Related articles

The Complete WordPress & 000webhost Guide (2017) WordPress definitely doesn’t require any formal introduction, since it's the most popular blogging platform that quickly made a place of its own...

There are a lot of website hosts that give you the tools to create websites on their platforms. They let you create pages, blog posts, and even online stores. Most have excellent tools and...

No more is a blog just a single page with a "what I did at the store today" kind of dialog. Blogs are the lifeblood of the Internet, bringing publishing to the masses. Gone are the days of...

Apr 22, 2014 16 minute read I love WordPress. I use it for nearly all the sites I build, I write plugins for it. I run this site on it. It s an awesome content management system and blogging...

How to Add Banners to WordPress Sites Nowadays advertisement is essential part of most of the websites on the Internet. In this tutorial we will show you how to add banners to different parts...