Learn How To Make A Website, No Skills Required. CLICK HERE

How to Make an eCommerce Website

If you’re not up to date with modern website creation methods, you may not realise quite how easy it is to set up a high quality online store.

Up until fairly recently, creating an effective eCommerce site required specialist skills and usually the help of a Web design firm. Often the costs involved would be enough to put off fledgling businesses. Now, thanks to open source solutions you can do all of it yourself, for very little money.

Shop

It’s hard to put an exact price on a self-built eCommerce site, but if you’re prepared to put in the necessary work yourself, you could get yourself up and running for as little as around $150. With the cost of entry being so low, there’s no reason not to build yourself an eCommerce store to complement a “bricks and mortar” shop.

The best news of all is that we’re going to take you through every step of the process right here in this article. You don’t even need an existing Web presence, as we will show you everything you need to do from the start.

For the purposes of this article we’re going to use WordPress as our website platform, with hosting and domain registration from HostGator, a Web hosting company we highly recommend. On top of WordPress, we will utilise a wonderful open source eCommerce plugin called WooCommerce, which takes all the hard work out of setting up your online store.

WooCommerce

Why use WooCommerce?

Before we get started with our step-by-step tutorial, let’s discuss a few of the reasons why we recommend WooCommerce:

1. Simple setup: Listing your products on a WooCommerce site is really easy – in fact no more difficult than finding your way around a word processor.

2. Low cost: As we mentioned earlier, WooCommerce is an open-source platform. This means it’s completely FREE to use. You may wish to add some third-party extensions to increase functionality, but for many people, WooCommerce will prove completely adequate will no additional spend whatsoever.

3. Great order handling: WooCommerce helps you manage the “back end” of your eCommerce business as well as the Web-based shop-front. The interface makes it easy to manage the order process and monitor stock levels.

4. Superb promotional support: WooCommerce makes it really easy to provide offers to your customers with things like voucher codes, and even special offers for people who promote your store via social networks.

5. Easy payment processing: WooCommerce integrates with dozens of different payment platforms, making it easy for you to achieve the most important thing of all: taking revenue from your customers!

As you can see, there are plenty of compelling reasons why you should use WooCommerce for your online shop. And you won’t be alone: an estimated 10% of existing eCommerce businesses already trust it.

How we will help you

The Make a Website team consists of a number of successful Web designers and Internet entrepreneurs. We frequently choose the WordPress and WooCommerce combination when building eCommerce sites.

This article is intended to give you all the knowledge you need to get your eCommerce site up and running – from registering your domain to uploading your first products and thinking about how to take payments.

Obviously we can’t make every decision for you; At some point you will want to branch off and play with the myriad options available within both WordPress and WooCommerce. What we hope to do is give you the confidence to go forward after completing the tutorial and make your online store your own.

For the purposes of the tutorial, we will be creating a site for a fictional shoe store. There’s no need to create a fictional shoe store website of your own – just replace our products with products of your own as you work through the instructions.

What You’ll Need

You don’t need that many things to get started, but the list here is longer than the one we provide in some of our other Web building tutorials. After all, you’re not just building a website, you are building a store, with the ability to upload new products and take payments.

Here’s a list of the basics you need to get started:

  • A Web hosting account with your own domain
  • A credit card or alternative payment method to pay for Web hosting
  • A Web browser of your choice (we prefer Google Chrome or Firefox)
  • A desire to learn and a little patience
  • Photographs and descriptions of all the products you want to sell
  • Enough time to upload all of your information
  • Bank and business details to set up accounts with payment providers

With all that in mind – let’s get started!

Getting a domain and hosting

Before you can do anything, you need an address for your website (a domain), and a place to host your website (Web hosting service).

We have produced a very detailed step by step guide to registering your domain and setting up your hosting. You should visit the page now via this link. (The links will open in a new window or tab, so you can easily return to this guide at any time – see you shortly!)

HostGator - Home

Installing WordPress

The next thing you need to do is install WordPress on your new domain. Luckily, we have another step by step guide telling you exactly how to do that.

Once again, click the link to move forward to the guide. The guide will open in a new window, so you can return to here when you are done.

Sample site

Getting the basics done

Now that WordPress has been installed onto your Web space, we can get down to business. Before proceeding to the next steps you should be sure of the following:

1. That you can get to your WordPress dashboard (www.yourdomainname.xx/wp-admin) and log on using your username and password.

2. That you can see your site when you type the domain name into your Web browser.

If your basic site isn’t yet live, you may need to wait a little longer for your domain information to propagate. Refer back to Step 7 in the step by step WordPress Guide for more info.

Wordpress - Dashboard

The WordPress dashboard is where you control all the content and functionality within your website. First of all, we are going to change the fundamental appearance of your site by installing a theme.

Choosing a Theme

To make WooCommerce work, you need to use a WooCommerce-ready shop theme for WordPress.

Obviously you will need to take some time to research suitable themes and find one that’s ideal for your individual business.

Here are a few places to begin your search for a suitable theme:

1. The WooThemes library: WooThemes (the organisation behind WooCommerce) offer a selection of themes of their own. Although WooThemes do offer some free themes, most of their WooCommerce-ready themes cost in the region of $99+.

WooThemes

2. ThemeForest: ThemeForest is one of the leading providers of themes for all kinds of content management platforms, and they sell numerous WooCommerce-ready WordPress themes.

A key benefit of ThemeForest themes is that they are cheaper than those offered by WooThemes, typically in the region of just $50.

Here are a couple of WooCommerce ready themes on ThemeForest that we would particularly recommend.

FlatsomeThis is a particularly well-designed, minimalist theme – particularly well-suited to fashion retail.

Flatsome

MayaShopThis is a very elegant theme suited to all kinds of online shops.

Maya

3. WPThemes: WPThemes is one of our sister sites, where we review a wide range of WordPress themes. If you find one you like, the site links directly across to ThemeForest so you can make a purchase.

You will find a great roundup on eCommerce themes on WPThemes here.

For the purposes of this tutorial, we are going to use one of the small selection of free WooCommerce themes offered by WooThemes, a theme called Wootique. It’s a clean and basic theme, but ideal for showing you the basics of WooCommerce.

Wootique

You can download the Wootique theme by clicking here. Although the theme is free, you will need to register with WooThemes before downloading the theme, and go through a checkout process to obtain your theme download.

Order

Once you’ve completed the process, keep the ZIP file for the theme somewhere safe on your computer. You will need it for the next stage of the tutorial.

NOTE: There’s nothing to say you must actually use the Wootique theme – it’s merely the theme we’ve chosen for the purposes of this tutorial. If you’d rather install a theme of your own choice, you should still be able to follow most of the other steps that follow.

Installing the theme

1. On the left of the dashboard, hover over “appearance” and click the “Themes” option:

Theme options

2. You will now see a screen showing all the themes available to you, complete with previews:

Themes

3. We want to upload the Wootique theme we downloaded previously, so click the large “Add New Theme” button.”

4. Click the “Upload” link, then click “Choose File” and browse to where you saved the Wootique theme on your computer. When you’re done, click “Install Now.”

Install Theme

 

5. Once the theme has finished uploading, click the “Activate” button.

Installing WooCommerce

Installing WooCommerce is no more difficult that installing a theme, but first you must download WooCommerce to your computer.

1. Visit the WooCommerce website using this link. Click the download link (as shown below) to start downloading the file to your computer.

Download

2. Now you need to upload the plugin to your WordPress installation. From the WordPress dashboard, click on “Plugins,” then “Add New.”

3. Click the “Upload” button, as shown below.

Upload

4. On the next screen, click “Choose file” and point to the WooCommerce ZIP file, then click the “Install Now” button. The plugin will take a short while to upload to your Web space.

Woo

5. Once the WooCommerce plugin is uploaded, click the “Activate Plugin” link.

6. Next, press the “Install WooCommerce Pages” button.

Button

7. If everything goes well, you should now be taken to a WooCommerce welcome screen, and notice that there are new WooCommerce menu options available on your WordPress dashboard (both shown below). You should also notice a new set of options for your Wootique theme.

Installed

Setting up your store

It’s now time to begin to upload some sample items and get your eCommerce store ready for launch.

As you follow these instructions, it makes sense to begin to upload your own products, rather than replicate the fictional shoe store we are building here.

First, let’s see what our site looks like after installing WooCommerce and our theme. Click your site name in the top-left of the dashboard and click “visit site.”

Hopefully you will see something that already resembles a shop site, as shown below:

Shop demo

Let’s return to the dashboard and add a couple of products:

1. From the dashboard, click “Products” then “Add Product” under the WooCommerce link.

Add product

3. The “Add product” screen looks just like the screen you use to add posts or pages to a WordPress site, but with a number of additions. Let’s have a quick tour.

Prod screen

The product name goes in the area depicted with the pink arrow. Information about the product, and product images, go in the main body shown with the blue arrow, and the product category goes in the section shown with the orange arrow.

Another thing worthy of note at this point is the small “Woo” icon at the top of the main editing area, which allows you to easily insert WooCommerce shortcodes to enhance your product listings.

 4. Going further down the page, you will notice a number of other options specific to WooCommerce.

Options

The options are mostly quite self-explanatory, and there’s no need to use all of them. However, it makes sense to track your inventory using the features available.

3. Go ahead and add a couple of products. For the sake of the demo, we are going to add two different pairs of shoes. In each case we will add a new category, a brief description, and an image of the shoes. Then, within the WooCommerce options, we will add an SKU and a regular price, and show both as being in stock with 100 units via the “Inventory” options.

The screenshot below shows one of our new product uploads in progress. As you will quickly realise, uploading new products doesn’t take much time at all.

Uploading

4. For each product you can add multiple images. For demo purposes, we’ve only added one, and also taken the time to select it under “Product Gallery” and “Product Image.”

Prod Gall

5. Once you’re done with each product, click “Publish.” In the image below, we have flicked back to the live view of our site after uploading the two sample products.

Demo site

The image below shows the individual product page for the sneakers.

Sneakers

Store Customisation

You now know how to upload products to your store and keep a note of your stock levels.

As you continue to use WooCommerce you will keep noticing various options to further enhance your store. Don’t be afraid to try things out as you can always switch them back again.

Obviously, we would need to write tens of thousands of words to take you through every single WooCommerce option, but here are a couple of things you will probably want to do next to customise the visual appearance of your online store.

1. Upload a logo for your shop. (Using the Wootique theme, go to “Wootique,” then “Theme Options,” then “Custom Logo.”)

2. Change your theme colours and fonts (options for this are all found under “Wootique,” then “Styling Options” and “Typography.”)

In the image below, you will see we have made some quite drastic colour and font changes, and added a logo. There’s no need for you to do exactly the same, but you’ll probably want to experiment a little.

New look

Preparing for launch

As you will now know, getting the front end of your eCommerce site ready is surprisingly straightforward. However, you’re not quite ready to launch yet.

Here are a few simple things you should get out of the way at this point, before we move on to the rather more important topics of shipping and payment processing:

1. Delete the “Hello World” demo post.

2. Delete the “Sample Page” demo page.

3. Add some additional content to your site: perhaps an “About us” page and some details about your company ethos. Adding content is as simple as adding products (just look for the “Posts” and “Pages” options on the WordPress dashboard). If you want to read about adding content in detail, visit the “Adding some content” section of this WordPress tutorial. (It will open in a new tab or window so you can return here.)

4. Add all the other products you need (yes, this will take some time). Be careful to categorise all of your products to make browsing your site more enjoyable for visitors.

5. Create a “Privacy Policy” page according to the laws of your country.

6. Make sure you provide a way for readers or customers to get in touch with you. You may choose to use a contact form plugin for this, such as Contact Form 7.

7. From the dashboard, go to Settings > Permalinks, and change the Permalink setting to “Postname (/%postname%/).” This makes it easier for the search engines to index your new posts.

8. Unless you plan to regularly blog on your eCommerce site, go to “Wootique,” then “Theme Options,” then “Homepage settings” and untick the option shown below. (We would recommend blogging to your store on a regular basis as a sensible means of traffic generation).

HP Content

Taking Payments

Let’s explore your options for taking payments:

From the dashboard, click on “WooCommerce,” and then “Settings.”

Now, click onto the “Checkout” tab. If you look down the page, you’ll see that there are a number of different payment options preinstalled with WooCommerce, known as “payment gateways.”

Gateways

From this page you can go into the settings and enable or disable each payment method. However, there are also dozens more available, some free of charge and others at cost. Have a look at this page for details.

GW Addons

Once a payment method is installed, it’s easy to adapt the settings to your needs. As you can see from the below screenshot of the PayPal settings, all you need to do is fill in the relevant options. If you already have a PayPal account, you can quickly get up and running with PayPal payments by simply entering the relevant address in this page.

PP Settings

Many people start off with PayPal as it’s easy to use and integrated from the start. However, if you plan to take large sums of money through your online store, you will probably want to switch to a service with lower fees. The beauty of WooCommerce is that you can add one or more new payment gateways whenever you are ready.

Arranging Shipping

Exactly how you handle shipping your products is down to your business, but WooCommerce does include plenty of functionality to help you.

Your WooCommerce store can even handle virtual products and downloads – you just need to tick the relevant box when adding your products.

Let’s explore the WooCommerce shipping options:

From the dashboard, click on “WooCommerce,” and then “Settings.”

Click the “Shipping” tab. Here you will find a host of different options. You can control which countries you ship to, and enable and disable various different shipping methods.

Shown below are some of the options for the “flat rate” shipping method. You can set a cost per order and even add simple equation calculations for added extras. If you don’t understand any of the options, hovering over the small question mark icons gives further information.

Flat Rate

A Final Word

We hope that, by now, you feel pretty confident with WooCommerce – the learning curve is pleasingly gentle.

Once you feel ready to launch your store, enlist the help of some friends and relatives to place some fictional orders. Ensure the payments work and that the orders show up properly in the WooCommerce “Orders” screen (shown below).

Orders

This testing phase is extremely important. If there’s a problem with any part of the process it’s better to discover it during testing than risk annoying paying customers.

Once you’re happy with your store it’s time to start promoting it. Don’t forget how useful social media can be in doing this. Perhaps consider some introductory offers to get things moving too.

Order

We wish you every success with your eCommerce project and hope you see lots of full shopping carts in the near future.

IMAGE CREDITS: Wikipedia / Wikimedia Commons.

 

Previous post:

Next post:

Author Picture Written by Pete Zaborszky
Pete runs Make a website and wants to get detailed information to the readers. He is dedicated to being the best and providing the highest quality at anything he does. You can also find him on Twitter or Google+