Skip to content
How to Create an E-Commerce Website in WordPress With Simple Steps

How to Create an E-Commerce Website in WordPress With Simple Steps

E-commerce is a promising field to invest in at this time. According to professionals, it is estimated that the retail sales of the whole industry can reach $4.9 billion in 2021. Thus, catching up with the trend by having an e-commerce website to sell products online is very important. This article will show you how to create an eCommerce website in WordPress with WooCommerce plugin. Let's check it out!

Platforms for Creating E-commerce Websites

To create an e-commerce website, you will need a supporting platform (or plugin if you choose WordPress). These platforms provide you with features that help to create e-commerce websites quickly and conveniently. For example, you can add and customize products, add a cart, calculate total bills, and add delivery services or taxes, etc., by using these platforms. Every step in building the website can be done using intuitive UI without coding.

There are several platforms like that available, namely WooCommerce,  BigCommerce, Wix, free Shopify alternatives, etc. However, the WooCommerce plugin is still the most popular choice for WordPress websites, with more than 5 million active installations on wordpress.org as the concrete proof. Thus, we will use this plugin as an example.

WooCommerce lets you sell any product, from casual ones (clothes, foods) to bundles, software, courses, website membership, or even booking services. In general, no matter what and how you are going to sell, this plugin can meet your needs anyway.

Now we are going to see detailed steps to create an e-commerce website with WordPress.

Step 1: Choose a Domain & a Hosting Services

A domain is the address of a website on the Internet (gretathemes.com, for example). A good domain should be brief, easy to remember, and related to your brand. It's best to have a domain that matches your brand or product to help your customer look for your site with ease. For example, the domain of Meta Box plugin's website is metabox.io.

Next, you need to register a hosting service. Simply said, this is like hiring a piece of land on the Internet to place your website. Your website database is stored on the server of the hosting service.

I also wrote a detailed instruction on how to choose a hosting service; you can check it out here.

After getting a trusted hosting service and a domain as you wish, please connect the domain with the hosting. Check out how to do that here.

Step 2: Set Up WordPress & Appearance

Next, please install the latest version of WordPress.

After having successfully installed WordPress, you need a nice appearance for your website. Hiring a website design company can be a good solution, or you can go ahead with pre-made WordPress themes.

There are a lot of themes available for e-commerce websites. Some of these themes are especially WooCommerce-compatible. These themes not only work well with WooCommerce but also help you fully display your product.

In this guide, I will install eStar - a free multipurpose WordPress theme.

In case you need a full guide on how to install a WordPress theme, please click here.

Install a WordPress theme

Now you have got essential parts that are hosting, domain, and theme for your WordPress website. To make your site an online store, let’s move on to Step 3 and install WooCommerce plugin.

Step 3: Install WooCommerce Plugin

First, please install and activate the plugin. WooCommerce is available for free on wordpress.org.

Install WooCommerce Plugin

After successfully activate the plugin, you will instantly have a page for quick configuration of your store information as below:

configure the store information

In this entry, you need to enter information such as store address, industry, product types, etc.

WooCommerce will also recommend some nice themes for your online store. However, as we have installed a theme in Step 2, please click Continue with my active theme.

WooCommerce recommend some WordPress themes for the online store

After filling in all information needed, you can start adding your first products in the next step.

Step 4: Add Products Using WooCommerce Plugin

To start selling, of course, your need to have your product presented on your site with essential information.

Let's start adding products to your WordPress site. Go to Products > Add New, and then fill in product names, prices, descriptions, etc.

Add products to the WordPress website

I also have a detailed guide on how to add products using the WooCommerce plugin manually or automatically; please click here to read it.

For example, I will add my beanie with logos into my shop.

First, I will enter the product's name, description, tags, and categories.

Enter the product's name, description, tag, and category.

Next, I will enter other information like price, taxes, dimension, weight, etc., in the Product data section. You should fill in the Product image and Product short description section too. Click Publish when you finish.

Enter other information for the eCommerce website

My added product will display on the website as below:

The product show on the front end of WordPress website

Continuing with other products and the result is as below:

Products on the eCommerce website

Alright, now you have added all products to your site. Click View Product in your backend to see your product page.

However, to let your customers access your products with ease, you need to add a shortcut to that page in the menu. Learn how to do that here.

Here is the link to the product page I added to the menu:

the product page on the menu

Besides, you can set the product page as the homepage by using Customizer. In this way, your customer can instantly see your listed products upon visiting your site.

When you finish configuring your product page, you need to set up some features of WooCommerce to make it suit you and the customer's needs better (to be continued in Step 5).

Step 5: Set Up the Product Page Information

WooCommerce plugin offers many options to set up basic features required for an online shop, such as delivery, taxes, payments, etc. To set up those entries, go to WooCommerce > Settings and edit information in the following tabs as below:

Set Up the Product Page Information

Product, Tax, Shipping, Payment are often the most important because these sections are what customers are interested in.

Note:

  • You can leave some sections blank if you don’t need them.
  • Click the ? tooltip button beside each section to read the author's instructions.

Click the button to read WooCommerce instructions

Set Up Tax Information (Tax Tab)

WooCommerce can automatically calculate the tax included for your products. To enable this feature, go to General, tick Enable tax rates and calculations, and then click Save Changes to proceed.

Enable the Tax feature of WooCommerce plugin

Then, the Tax tab should appear in the Settings section as following:

The Tax tab appears in the Settings section of WooCommerce plugin

In the Tax tab, you can add, remove taxes, turn on/off prices with taxes included, choose how to calculate taxes, etc.

Because taxes might vary for each product or country/region, you need to set up these tax options on your own based on the products you are selling.

Besides the Standard taxes applied for all regions, you can add some tax calculations in Additional tax classes for each region/nation with higher or lower tax rates.

In my case, customers are only from Vietnam, so I don't have to care about tax rates for a random guy from the North Pole. Thus, I left this Additional tax classes section blank and only set the Standard (one tax calculation for all customers).

Set up the tax classes with WooCommerce plugin

Specifically, I will apply a general tax rate (taxes count for shipping cost, VAT, etc.) of 20% for customers from any country, so I tick both the Compound and Shipping box.

Apply a general tax rate of 20% for customers from any country

If you create a website for international customers, your tax setup will be much more complicating. As each country has its different tax rates (especially shipping tax), please read this guide from WooCommerce carefully.

Set Up Shipping Information (Shipping Tab)

In the Shipping tab, you can add some shipping zones, choose your shipping method, classes to categorize products and default shipping zones, etc.

In Shipping zones, please click Add shipping zones to create your desired ones.

Add a shipping zone with WooCommerce plugin

Then, enter the zone and click Add shipping method.

Add shipping methods for the online store

Three default shipping methods here are Flat rate (fixed price), Free shipping, and Local pickup (customers get their items by themselves). Besides, you can also add your other shipping method by clicking Add shipping method.

Add custom shipping methods for the online store

As my online store only deals with domestic shipping, I only add Vietnam as the only shipping zone. Free shipping and Local pickup are the two shipping methods.

Choose the Free shipping and Local pickup shipping methods for the online store

In the Shipping Classes section, you can categorize products and apply different shipping methods (Lightweight, bulky, etc., for example).

Categorize products and apply different shipping methods

Set Up Payment Methods

WooCommerce plugin provides you five payment methods. You can choose among these methods based on your need and also your customer's habit.

For my shop, I choose Direct bank transfer and Cash on delivery.

Set Up Payment Methods for the shop

NOTE: If you want to integrate your domestic payment gates or banks, please use additional plugins or hire a developer to make your own payment gate.

Set Up Email Notification

In this Emails section, you can edit notifications to customers or staff when orders are finished, canceled, etc., by clicking Manage on the right of each section.

To make your shop work smoothly, you should enter the right emails of curators in every step. For example, technical staff should receive an email when there's an issue with the order, or customer caring staff should receive an email when an order is successfully placed.

Choose staff who receive emails

Besides, you can add some messages to your email to advertise your brand. Kill two birds with one stone!

Add some messages to emails

After this step, your website can be in service, but to make your website more professional, choosing a theme and setting up WooCommerce might not be enough. You might need some additional features to truly fly your business. Let’s check them out in Step 6!

Step 6: Add Other Essential Features for Your Website

To make your shop work effectively and have a high conversion rate, you will need:

These features will help you establish a better connection with your customers. They will also help them to easily decide to buy your product or stimulate them to buy more. Thus, don't forget to add some.

To add these additional features to your site, you can use plugins or code. There will be an upcoming post about essential plugins for e-commerce websites, so remember to stay tuned!

In some cases, your products have some special information that WooCommerce doesn’t support. You can create and add some custom fields to display that information with Meta Box plugins. Click here for the detailed guide.

Verdict

Having an eCommerce website will help your business/shop approach more customers, reduce shopping time, and provide a better payment procedure (no queuing needed like in supermarkets). As a result, your sales will go up, and your team can save up a lot of time and effort.

You only need some basic WordPress knowledge to start setting up your site. Of course, this is only a simple e-commerce website with basic configurations. If you need a truly beautiful, quick, and effective website, you will need some help from coders.

If you don't have any knowledge about coding, just hire a professional website agency and let them handle everything. Hiring someone to design a website won't cost you a fortune, and the investment absolutely worth it!

Leave a Comment






Scroll To Top