In this tutorial, we will demonstrate how you can easily set up a WooCommerce and WordPress online store that is functional to sell products.
WooCommerce plugin is easy and straightforward. WooCommerce can be coined as the platform ha has the potential to convert your website into a full fledge e-commerce store.
- It’s open source hence free- similar to WordPress
- It is a popular e-commerce plugin used for WordPress globally
- You can easily set it up and configure it individually
- Setting it up can be done in less than an hour
- It is compatible to any theme /design currently present in your WordPress website. It does not require you to ditch your available WordPress design.
The list of the amazing features offered by WooCommerce is endless. In simple terms, WooCommerce gives you all the resources you would require to set up the best e-commerce store using WordPress.
What can You Sell with WordPress + WooCommerce?
- Physical products
- Digital products (e.g. downloads,ebooks, software),
- Bookings (for example , appointments or any other service subject to booking),
- Online services subscription ,
- You can become an affiliate seller (Selling other people products ),
- Customizatios (e.g additional customization rather than what is only available on your product listings) among others .
In simple terms , you can generate an income with your website .
We can also conclude that WooCommerce gives you an opportunity you any product that has value assigned to it . In addition it can be used by anyone (if you have a functional WordPress website , you will be in a better position to work with WooCommerce).
How to Build an Online Store with WordPress and WooCommerce
Note: The main aim for this section of the guide is to demonstrate to you the easiest way if building an e-commerce store that is functional on WordPress for you to get your store online in the quickest way possible . This is the reason we will dwell on the most important aspects and leave out the advanced part of it .
STEP 1. Get Domain Name and Web Hosting
For you to create an online store or any other website, you will be required to have two things :
- Domain name – This is your store unique web address . For example , YOURSTORE.com
- Web Hosting – This is simply a remote computer that stores your website data and avails it to anyone who would like to visit (Check more detailed explanation)
Full disclosure : We get a commission everytime you purchase Bluehost . This enables our website to be a business. Thank you for your continued support .
There exisit hundreds of different domain/hosting providers , we use the services of Blue host for both domain and hosting . This is because hier web hosing charges are affordable (the package provides for one year free domain ) .It is also reliable and among the few hosting services recommended officially as the best hosing service providers by websites by companies such as WordPress.ORG. The charges start from as low as $2.75/month.
To start , you only require to visit go to Bluehost.com, then click on the “get started” button.
This will lead you to a page where you will be required to choose a hosting plan for the store . You can choose the cheapest option labeled “Basic” to get started .
Step 4:The next step will require you to choose a suitable domain name for your new online store .
For this process , you will be required to do some brainstorming . In general , you would want a domain name that is easy to remember , easy and catchy . If you have a business entity for your store , you may choose it as the domain name for your store .
After choosing your domain . You can complete the set up process and make payments associated with hosting charges .
Great! You now have a hosting plan and a domain name to start with .
Step 2. Install WordPress (Free)
This step will initiate your adventure with WordPress – You will install WordPress on your hosting account .
The process may sound difficult but it is easy . You will have to go to Bluehost usr panel (You will get a lik from bluehost in the confirmation email)- this is mostly available at my.bluehost.com.
After accessing the page , scroll down until you see an Icon written “Install WordPress”:
Click on it and go through with the on-screen instructions. You will be guided on every step of the way, so you should not worry about encountering difficulties.
If you need further assistance on how to pick a domain , and install wordpress , please check this guide (Scroll to step 2).
At this stage , you should have a blank WordPress website successfully installed .
- You can view it by going to the main domain name (for example , YOURSTORE.COM)
- You can access the admin panel by going to (YOURSTORE.com/wp-admin)
Now, you can make the blank WordPress website into a full-fledge functional e-commerce store by using WooCommerce plugin.
Step 3. Install WooCommerce Plugin (Free)
Just as with all WordPress plugins , the fun stuff starts when you begin navigating your WordPress Dashboard/Plugins/Add New . Once at this point , type the word “WooCommerce” in the search box . WooCommerce will be the first result to appear as your fist result .
Simply click on the “Install Now ” button which is next to the plugin.
After a few seconds , the text button will change to read “Activate” Click on it .
At this point , WooCommerce launch /setup wizard will be displayed on the screen . The entire process will be simple and you will be guided accordingly . To start , click on “Let’s Go!”
Create the Essential Store Pages
Online stores are simply types of websites, and they require pages for them to be functional. The very first step in setting up WooCommerce is generating this pages for you:
- “Shop”- This is the place where products will be displayed.
- “Cart”- It is simply the shopping cart used by your customers for order adjustment before they can proceed to Checkout .
- “Checkout”- This is the point where customers will be required to choose delivery/shipping method and pay for what was purchased.
- “My Account” – This is a profile page where users register (from here, they can view their past order and be able to manage account details).
All you are supposed to do at this point of the WooCommerce wizard is to click on the button labeled “Continue” . WooCommerce will automatically set up this pages.
Set up a Locale
The locale is an important part in setting up your store. Few parameters such as origin , preferred units , currency will define your business.
Once completed , proceed and click “Continue”.
Understand Sales Tax
Tax matters are among the least aspects when operating an e-commerce store , you should also understand that it is an area that cannot be disregarded .
You will be happy to note that WooCommerce will help you with this section .
The first step will be to choose the nature of goods , you can select whether to ship physical goods or not . By selecting the box, WooCommerce will pre-set the settings remaining on shipping- related information .
Next step is tax! WooCommerce has a good tax module, it is amazing as it enables you to ascertain the tax rates associated with the locality of your store (You did set it in the previous step).
If you intend to make charges to sales tax (This is the situation in most cases). Just view the main tax box. Immediately after doing this , there will be new set of boxes that will appear and guide you on the next step .
Image 11,a and b.
Note: Knowing that WooCommerce will set default tax setting for your website , it isimportant to countercheck and make sure it adhere with your local authority regulations to ensure they meet the existing taxation rules . This is a necessary step for those not in US. To get more insights on how WooCommerce handles Sales taxes , go ahead and read this You will be able to change the details later, so you should not worry if you do not have all the information presently .
Pick a payment method (Paypal is Recommended)
It is crucial for an e-commerce store to be in position to process online payments ,WooCommerce provides multiple payment options available .
Below is what you can choose from
Two of the most used payment options are PayPal and Stripe. It is advantages to install both on your site. To do this, click on their corresponding checkboxes.
You can also choose different payment platforms that work for you. You will need to sign-up with both PayPal and Stripe separately. The set up instructions on your WooCommerce is only to be used to integrate an existing Stripe and PayPal account to your new e-commerce website.
Again, click on “continue “after finishing
The following step will involve confirming on the screen that the process was a success. At this point , your basic website setup is complete- You have successfully completed building a blank e-commerce store using WooCommerce !
Step 4: Add Your First Product
For your store to be operational ,you will be required to have some products or services in the database or downloads . It can be anything you wish to sell.
To start adding products , simply go to dashboard , then choose Products /Add product .
You will see a classic WordPress content editing screen
- Product name
- The main product description . This is a large area allows you to insert more information relating to the product as you like . Because this is wordpress , you will also be able to insert , columns , images , headings , videos , and other forms of media . Whatever you think suits .
- The central product data search area . In this section , you will see the nature of product you need to add .You will also be able to check if it can be downloaded , it is physical or virtual product (Services are considered as virtual products). As a part of th central section . You will have different parameters for different products .
- General – This is the section where you get to set pricing and taxes.
- Inventory-WooCommerce makes you able to do management of stock levels
- Shipping – Set dimensions on weight and shipping cost
- Linked Products. This is good for setting cross-sales, etc. (Think, the customers who purchased this bought that.)
- Make changes to product attributes .E.g., if you sale shirts , you can choose different colors .
- Additional settings are not necessary.
- Short Description. This is the text that will be displayed on the product page under the name. It will serve best as a short product summary of what a product is about .
- Product Catergories. It catergorizes same products together . E.g., It works similar to standard WordPress catergories .
- Product Tags. This is an additional way to assist you to organize your product database . It works similar o standard WordPress tags.
- Product image . This is central image of the product.
- Product Gallery- This are additional product images to show the amaizing aspects of the website .
The first time to visit the panel , WooCommerce will show some useful tips to demonstrate the purpose of each field .
After setting the above , click on the large publish button – You will see your first product being added .
After adding some goods to the database , the product section in the dashboard should appear as shown below:
STEP 5: Choose a Theme for Your Online Store (Free)
We had a good reason to first start with demonstrations on how to add products to the store before moving to aspects such as visual appearance of the entire thing.
Quite honestly, lack of products in the database would make it impossible for you to see individual pages of the store in any representative form . You will not be able to know if everything is good.
Now that most of your products have been added, we can ensure that perfect from a visual perspective.
WooCommerce Vs. Your Current Theme
WooCommerce works will work on any WordPress them by default mode. This is good news if you have selected your design and you would like to proceed with it.
Alternatively, you can select specialized WooCommerce-themes that have been optimized. These themes are tied up with pre-set styles that make WooCommerce elements to look desirable.
Below is our recommendation.
Storefront is the official WooCommerce theme – It is also the one that has high chance of good performance . You can access the default version for free to get started .
Another option is that you can visit e-commerce section at ThemeForest which ranks as the largest premium WordPress themes on the web
Regardless of your decision on whether to stick with your current theme or choose a different theme that is WooCommerce optimized , Your next step to ensure each page of the store looks amaizing . below are steps for this :
The Rules of E-Commerce Store Design
We will discuss a number of important consideration before we get to the details .
Mainly- What factors make the design of an e-commerce site good and profitable . Below is a list of the most important parameters.
- The design. It needs to be clear to avoid confusion among buyers .
- The center content block. It needs to capture the attention of a visitor immediately they visit the website . That center block section is where products will be posted .
- Adjustable sidebars. You should be able choose how many sidesbars you will need and also be able to disable sidbars for some pages (Check here for more on this).
- Responsive and mobile-optimized . Research shows that upto 80% of internet users have a smartphone . Another research shows that about 61% of your competitors are likely to lave your site and check your competitors products if they have an awful expirence on your site .- With this in mind , it is important to ensure your website has been optimized to accodate mobile .
- Good navigation structure. Ensure to have clear menus that are easy to understand – This is crucial for visitors to find what they are shopping for .
Having put the above information into consideration , below is how you can tailor individual pages of the store.
Your Shop Page
This is the section that will have your product listing . If you have browsed through your WooCommerce setup wizard , you will find this page at YOURDOMAIN.COM/shop
This is the standard WordPress page – You can make edits on I using WordPress dashboard/pages
Things that are worth doing :
- Add copies aimed at encouraging visitors to shop at your store
- Make a decision as to whether you will include a sidebar on the page . This is done via your theme’s own page templates . For instance , Storefront makes it possible for me to go full-width which we will implement:
The page main trait is right below the standard content , it has a custom part for displaying products that you have listed . The image below shows how it will look on the Storefront theme:
As seen on the image above , it is evident that have wonderful product image is important . It is the first aspect that should be perfect ! in other words- You should focus on your product images as the primary goal .
WooCommerce makes it possible to display your products differently on this page . By going to WordPress dashboard/WooCommerce/Settings/products and then the display section:
You can decide whether you wished to display products or the product catergories on the shop page . Choose what is more reasonable , then save the settings .
Individual Product Pages
For you to see all those , go ahead and click on any product listed on the page .
If you choose to use a quality theme , you will not encounter difficulties on the page . Basically , what you can only do is to make adjustments to the amount of text you will use for each product description . This is to ensure that there exist no blank spots that would lead buyers to get confused .
Here’s our example with Storefront theme (Without having additional customization):
This is another important page that is subject to adjustments through Dashboard/pages.
What we would recommend is to choose a full-width layout . On this page , you will not want to give the buyer many options apart from moving to the checkout area.
Checkout is a very important page compared to the others , here is where buyers will conclude their orders and make payments .
We do not recommend you to make adjustments to that page apart from one :
The checkout page should be full-width . The only way acceptable to opt out of the page for buyers should be to finalize their orders , there should not be any aspect of distraction by things that are available in the sidebar .
This can be done using Dashboard /pages (Just make repetitions on the process followed with the shop page ).
Apart from that , the default look of the checkout page should be great :
At this point you are through with making adjustments to the design of your store . Now , let us delve into increasing the store functionality .
Step 6: Extending WooCommerce- How ?
One factor that makes WooCommerce the best e-commerce solution is that it offers hundreds of plugin extensions available .
Below are some of the most useful ones :
Let us begin with extensions –The WooCommerce has approved the official add-ons.
To check what is offered , you can check this page .
The catalog above is vast and impressive . We would not want to have a scenario where you feel intimidated by it . You certainly do not require all this extensions . Treat the list as buffet and pick only what you like .
Some of the more worthy mentions :
- Payment gateways. This extensions make it possible for you to accept more payment methods apart from the standard one which is PayPal . In general , having more modes of payment for your clients the better .
- Shipping extensions . This will be important if you wish to automatically link your store with shipping rates from companies such as FedEx or UPS.
- Accounting extensions . This allows your WooCommerce store to have the accounting tools that you have chosen .
- WooCommerce Bookings. Make it possible for customers to make appointments for services without having to leave the site.
- WooCommerce subscriptions. Allows for customers to make subscriptions to services and products and pay a monthly , weekly or annual fee.
- EU VAT Number. This is applicable for those operating within EU.
- TaxJar . This puts sales tax on autopilot mode
Plugins that Supercharge Your E-Commerce Store
By setting the extensions aside , you can engage other WordPress plugins to ensure your store is supercharged . Below is what you should be able to benefit from .
- Yoast SEO .It makes your website SEO good
- Yoast WooCommerce SEO plugin . Make improvements to your SEO plugin as well as other areas of your e-commerce store
- WooCommerce multilingual . Enables you to have a fully multilingual WooCommerce site
- Contact form 7 . This allows visitors on your site to contact you directly
- Updraft plus. Make it possible to back up all the content on the site such as products and other data within the website
- Social share buttons by GetSocial . Allows for buyers to share the products you are selling with their friends, family by use of social media .
- Integrates your website with Google Analytics.
- iThemes security . set security to your website
- W3 Total Cache .Makes your website fast through caching .
Creating an online store in a Nutshell
As you have seen , it is not that hard to create your own e-commerce store by using WordPress. Despite this , It will take you sometime to complete all the steps . It can be completed in a half a day.
This speed id incredible , about five years ago , you would hire a web developer and pay them up to a tune of $5,000 to get a similar site created . Now , it is possible for you to do everything by yourself!.
Anyway , for you to have an easy time completing the required tasks , here’s a cut-and –keep checklist .
Before you Begin
- Secure a domain name and get a web hosting platform , look for a functional WordPress install running
- Ensure that your new blank WordPress website work as it should (there should be no obvious errors coming forth etc.).
- Start by the installation and activation of the main WooCommerce plugin.
- Browse through WooCommerce setup wizard and pay attention to :
- Have the required four pages setup My account , Shop , Cart and Checkout)
- Set the store locale .
- Add all or most of the products categories to the store .
Chose the recommended WordPress theme for your e-commerce store . You can continue with your preset theme or browse for new ones . Check the rules of e-commerce store design thought this process.
- Make adjustments to your shop page
- Individual product page should be adjusted
- Cart page is also subject to adjustment
- Lastly , adjust the Checkout page.
- Choose and install the payment gateways of choice
- Make consideration to the shipping extensions
- An accounting extension should be considerd
- Browe free catergory and any other extensions
Ensure to install all the plugins that will make your e-commerce store function flawlessly .
- Yoast SEO
- Yoast WooCommerce SEO
- WooCommerce Multilingual
- Contact form 7
- Social Share Buttons by GetSocial
- iThemes Security
- W3 Total Cache .