This is firstdevlab where you learn how to develop a website by yourself. This is a crash course on how to design a professional e-commerce website using WordPress without writing any code. We know how difficult it could be to develop an e-commerce website from scratch using any programming language. Well, after this tutorial you will be able to do the following:
- You Will Have Understanding about WordPress engine
- You will be able to host and set up an online store
- You will be able to install WordPress
- You will be able to design your e-commerce website using free and premium themes
- You will be able to optimize your store for SEO
Table of Contents:
Table of contents
1.0 Webhosting For E-commerce.
1.0.1 How To Purchase Hostinger Hosting Account and Domain.
1.1 How To Set up Your Database And Upload Your WordPress.
1.2 How To Install Your WordPress.
1.3 Top 5 premium Woocommerce themes.
1.4 Top 5 free Woocommerce themes.
1.5 Installation of premium or free themes.
1.6 How To Customize Your Store to your taste.
1.7 How To Secure Your E-commerce website against an attacker.
1.8 SEO guide for your e-commerce website.
1.9 Adding Your First Product On WordPress.
We have done so well to teach all that you will need to know for you to design a professional e-commerce website. However, the main purpose we are teaching web designing and web programming for free is to help those that have no or low budget to set up their business online, with our crash course they can easily do it by themselves. Perhaps, you can hire our developer to do for you if you want to skip the stress.
HIRE OUR DEVELOPER STARTING FROM $50
Let us go into the tutorial, feel free to read the entire content without mincing words.
Web hosting For E-commerce Website
It is obvious that we have numerous hosting websites on the internet and most time you are confused about which can serve you well. Truth be told, many of these hosting platforms are genuine and they offer good services. But we have chosen one particular web hosting that will serve you well as a far robust e-commerce website is a concern. For firstdevlab to conclude recommending this particular web hosting, we absolutely put some measures into check which include:
- Reliability: It is wise enough to ask yourself how reliable is a web platform before you pay money for their service. We consider a web hosting to be reliable based on the quality of what they claim to offer, the year of their establishment, and customer review on their web hosting services. Take, for instance, a web hosting with 14years of experience can’t be compared with a new existing web hosting with just one year of experience. Nobody can tell if they will survive the market in years to come. However, I am not disputing the fact that some new web hosting is reliable but few of them are genuine and ready to compete in the market with a quality web server that will convince people to choose them as their preference. More also, I have paid for a web hosting claiming to be a cloud server, it is so disappointing that this so-called cloud server is nothing but junk. So, we can’t say that the web hosting company is reliable. We ensure that the web hosting we are recommending for your e-commerce project is reliable.
- Speed And Uptime: Nothing can be compared to the super blazing website that is always available regardless of the number of people visiting the site. It can be so annoying to visit an e-commerce website having almost 100 products and the website was loading as a snail. This can make the website owner lose his potential customer. We consider speed and uptime to be necessary for an e-commerce website and that is the reason we recommend web hosting that will serve you well.
- Money-Back Guarantee: It is not all web hosting that can boast to return your money within 30 days if you don’t like their service. We intentionally bought a VPS server from them of $65 and we requested for money back. Could you believe that we didn’t write any request or submit any form? Everything was done by their support agent. Surprisingly, we receive our money after 7days of request. It was amazing! So, they really worth a trial. You can easily request for money back if you don’t like their services.
Click To Register On Hostinger To Purchase At Discount Price.
How To Purchase Hostinger web hosting plus domain For Your Online Store
You may skip this aspect only if you already know how to pay successfully with your MasterCard, Visacard, PayPal, Bitpay, e.t.c. Before you start using web hosting with the domain name you will have to pay using any of their payment methods. Hostinger offers a different hosting package which includes Shared Hosting, VPS, Cloud Hosting, WordPress hosting, E-commerce hosting, e.t.c. Depending on your budget, if you have a low budget then you can start with the Single shared hosting which costs $0.99 per month if you register through us and their premium shared hosting is $2.89 per month at a discounted price. You can choose any of the shared hosting plan to kick start your e-commerce website using WordPress. Follow the simple steps to signup and purchase your single shared hosting on Hostinger.
Hostinger configuration order list 
Hosginger DNS nameserver 
Hostinger hosting + domain set up page
- Visit this our hosting partnership link to enjoy the discount offer.
- Select your preferred hosting plan. For a low budget, you can choose single shared hosting but for business purposes, you will have to choose the premium or business hosting plan and add to cart.
- Scroll down gently as you read the offer available for you. Below there is a box that is available for free domain offer. If you are buying a single hosting plan then you have a free .xyz domain for a year. E.g “yourname.xyz” and if you are not interested in the free domain offer, you can click on the checkout button.
- After you checkout, you will be taken to a registration page. Fill the registration form and use a valid email address.
- Choose a payment method to complete your order. You can pay easily with your debit card(Mastercard/Visacard/Discover/America Express) or PayPal.
- Make Your Payment and you will receive a confirmation message that your transaction is successful.
- Log in to your home screen where you can complete your hosting setup, on the home screen click on setup and add your domain name. If you don’t have the domain name ready, you can order for your domain on hostinger or buy from Godaddy. The beauty of using hosting is their friendly support agent. They are always available to help and guide you to complete your setup.
Note: If you have your domain on Godaddy or any other domain registrar, you will have to point your domain to hostinger before or after connecting the domain with the shared hosting you bought from hostinger.
You can use any of the DNS records to point to your hostinger hosting. We are using a nameserver. Navigate to your domain editor and change the nameserver from default to customize. In the provided boxes, input the following hostinger nameserver details:
ns1.hostinger.com
ns2.hostinger.com
ns3.hostinger.com
ns4.hostinger.com
Then finally click save and wait for it to propagate.
How To Set up Your Database and Upload WordPress
To set up your database there is a need to log in to your account and navigate to your hPanel. Then, go to MySQL Databases, you will see the section for Databases. Fill all the required fields(name, username, and password), and finally click the Create button. You have successfully created a database for your e-commerce website. Kindly copy out the MySQL details e.g (database name: u123456789_dev1, username: u123456789_dev1, password: XXXXXXXXX) you will need the credentials during WordPress installation. Download the WordPress software and Open the hpanel file manager. Open the public_html, and upload the WordPress zip file. Extract the WordPress file by selecting the zip file to extract, and click on the extract button. You will have a created folder “WordPress” in your public_html, click and open the folder. Select all the files inside the WordPress folder and move them to the /public_html. You have successfully uploaded your WordPress and it is ready for installation.
Are you confused about this manual WordPress setup? You can use the Auto Installer located in the website section in your hpanel. You will see the WordPress icon, click on it and fill the provided fields. Then finally click the install button. WordPress will be automatically be installed on your site without going through the manual process. However, if you are not using the auto-installer, after uploading the WordPress you will proceed to the installation process.
How To Install Your WordPress Manually
Visit your website domain e.g yourstore.com– you will need to select your preferred language. Select and press the Continue button.
In the next step, you will have to fill the MySQL details that will connect your WordPress site to the database. You have already saved the MYSQL credentials, only fill the MySQL database name, MYSQL username, and password field. Make sure it is the same with details of the MySQL database you created. Your database host remains to be localhost, and the table prefix “wp_” can be renamed to “dev1_” as you wish. Press Submit!
Then, WordPress will check if your provided MYSQL details are the same as the one that you created on your server. If it is correct then click on the run installation button. Your installation is completed within one minute and proceeds to the next step.
This is the final step to complete the WordPress installation. Fill the information for your e-commerce website and admin information which will be your login details. Click the install button, you have finally installed WordPress manually.
Top 5 premium Woocommerce themes For Your ecommerce
After you have installed your WordPress, the next thing is to log in to your admin dashboard. Then you begin to think of what next to do, don’t be confused with the WordPress robust dashboard. We will focus on the Themes section under this tutorial headings. Well, themes are what determine the look of your website and there are free and premium themes that are meant for an e-commerce website. Premium themes have more features that can make your WordPress site looks more professional. It is highly recommended to use premium Woocommerce themes. Below are the top 10 premium themes for your WordPress Ecommerce (Woocommerce).
Fitshop
Fitshop is a modern and elegant WooCommerce theme that can be installed to design your E-commerce website. It has beautiful animations with a simple white background. The theme is sold for $59.
Frost
Frost has eight demos which include both dark and white background. You can choose from the available 8 demos. With this theme, your online shop looks fancier and you can customize it easily as you want your store to be. You will get the theme on ThemeForest for $59.
eStore
eStore is a professional Woocommerce theme for an e-commerce site. Are you looking for an attractive fashion or tech shop? Then eStore WordPress theme is right for you. You will get this at $69.
Airi
Well, this is a multipurpose WordPress theme. Regardless of that, you can still use setup a clean online store with the Airi Woocommerce demo. You only need to import the Woocommerce demo site and start to customize your site as you wish. It costs $59 on ThemeForest.
Neto
We included this theme on our list because of people with a low budget. It is a powerful WordPress theme for your small e-commerce shop. It has a simple and clean design that will beautify your online shop. It costs $34 on ThemeForest.
Top 5 Free WooCommerce Themes
If you can’t afford to purchase the premium theme it doesn’t stop you not to establish your online store. There are numerous free themes that you can use to set up your store. Though there are limitations to using free themes, it can still help to have your online store running. Below are Top 5 Free WordPress Themes for your online store.
Neve Shop.
This is one of the top 5 free WordPress themes. It is flexible and easy to customize using the drag and drop builders.
Zakra
Zakra is another classical and clean eCommerce theme. Even though it is free, it has a shop section, photo galleries, call-to-action banners, a module for the blog section.
OceanWP
This is a multipurpose WordPress theme having both premium and free version. With the free version, you can set up your online store easily.
Hestia Ecommerce
Hestia is a clean multi-purpose theme that you can use to design your online store. It is easy to customize your online shop using Hestia and it is available for free.
Shopper
The shopper is a minimalist and clean free WooCommerce theme for your online stores, it has a grid-style homepage with a modern look.
You can get any of these themes for free on their official website or you can get it from WordPress repository.
Installation Of Free Or Premium Themes
Download your preferred themes either free or premium. Let us assume you downloaded the Shopper theme. Cool, now we have to upload and install the theme so that we can start customizing our online store. Below are the procedures on how to install your WordPress themes.
Log In to your WordPress Admin Dashboard
Navigate to the Appearance section in the left side menu
You will see the Themes under the Appearance section, click on themes.
There is a button named Add Themes, click on it.
Move your cursor on the Upload themes button and click on it to upload your theme zip file.
Click on Choose file box where you will enter your PC or phone, file manager.
Find the shopper.zip file (it must be a zip file)
Click on Upload, when it has been uploaded successfully you will be asked to activate. Click on the activate button and install all the required plugins. Also, make sure that the Woocommerce plugin is installed.
Run and setup your woocommerce
Set up the Woocommerce and choose your country’s currency and payment method. You can select Bank transfer and Cash delivery for now. If you will accept online card payment, then you will have to create a business account with any payment gateway such as paystack. Get your public key and secret key for live mode. Come back to your WordPress admin dashboard and hover on the plugin>>Add a new plugin. Search Paystack or any payment gateway plugin, if available kindly install and activate it. Go to the WooCommerce settings, payment section and you should see where to input your paystack secret and public key.
How To Customize Your Store to your taste
If you are using the Shopper free version, there are limitations to what you can customize but with the premium version, there is documentation that will guide you on how to customize your theme. However, to customize your Shopper Theme, navigate to Appearance and click on customize. You will see the elements of things that you can customize like the homepage, header, footer, e.t.c. Edit each of the elements to your taste. You can also edit the widgets, the sidebar, and footer can be found in the widget.
Creating Pages
We will create the following pages for our online store:
- FAQ
- Homepage having the latest products.
- Contact Us page.
- About Us page.
- Terms and Condition.
- Shop page.
- My Account page.
- Check out the page.
- Cart page and Wishlist page.
The pages we are going to create manually are the FAQ, Contact Us, About Us, Home page, and Terms & Conditions pages. The other pages like shop, cart, check out, my account is automatically created after you set up your WooCommerce plugin.
On the admin dashboard, navigate to the “Page” on the left menu bar and click add a new page titled Homepage. The homepage will display the latest products, featured products, and best selling products. We will use WooCommerce shortcodes inside the homepage to display those products.
WooCommerce Shortcodes And Uses
[woocommerce_checkout] – If you insert this shortcode inside the content block of a page, it will show the checkout function.
[woocommerce_cart]– This shortcode will show the cart page if the code is placed in the content block.
[woocommerce_my_account] – Put the shortcode in the content block of a page to show the user account page.
[woocommerce_order_tracking] – Do you want to show the order tracking form? If yes, this shortcode will display a tracking form for your customers to track their orders.
[products] – Insert this shortcode on your home page to show all the products.
[featured_products] – This shortcode will display the list of featured products.
[sale_products] – This shortcode will display the list of selling products.
[best_selling_products] – This shortcode will display the list of best selling products.
[recent_products] – This will show the recent products on your homepage.
[product_attribute] – It will show the product attribute.
[top_rated_products] – If you want to show the top-rated products on your homepage, insert this shortcode into the homepage.
[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"] – This will show four newest products according to their ID.
[products columns="3" attribute="season" terms="warm" orderby="date"] – This will give attribute to the product listing. For example, if you want to create a product listing with title block “Season” this shortcode can be used.
[product_category] – It will show products in a particular product category.
[product_categories] – This will show all the product categories.
[products limit="8" columns="4" category="phones, computers" cat_operator="AND"] – This will show 8 products in two categories “phones and computers”.
All these shortcodes can only be used in your page block editor where you can place content. You may not need to use shortcodes to build your page if you are using the premium theme, there is a visual composer, page builder which allows you to use drag and drop instead of using shortcodes in the page block editor.
Permalink Settings and Frontpage settings
By default, WordPress front page is the blog post page where the latest blog posts are shown and the permalink is not SEO friendly. We have to set our front page to display the homepage having our latest products, featured products, and best selling product shortcodes. Hover on the setting that is in the left side menu, click on readings under the settings. You will see the front page and click inside the select box below it to select the home page as our front page. You can select for post page as well if you wish. Then scroll down to save the changes. Now your front page has been set to display your home page.
Under the settings, you will also see permalink. Click on it, and scroll down to tick a cleaner permalink ” yoursite.com/sample-post”. Click save! We have successfully set our permalink to be SEO friendly.
Note: You can also click general under settings to set your site title and other things that you want to change.
How To Secure Your E-commerce Website Against An Attacker
It is needed to secure your WordPress e-commerce website against brute-force or any forms of attack. The first thing you must consider is SSL. You will have to purchase this if you are using the hostinger single hosting plan. Though, it is free for those using the premium and business hosting plan. The SSL will make your online store to be safe for your customers. Not only that, but there is also a powerful plugin that you will need to install. Jetpack, is powerful enough to prevent all forms of attack and makes your store to be secured. Alternatively, you can install Wordfence instead of Jetpack as you wish. We strongly recommend Jetpack because it can serve many purposes aside from the security aspect.
SEO guide for your e-commerce website.
You will like to see your online shop on search engines such as Google, Bing, and Yandex? If yes, then SEO for your e-commerce website is necessary. Well, we are going to outline the procedures on how to optimize your store for better SEO ranking.
- Install the Yoast SEO plugin.
- Edit all your pages and navigate to the Yoast SEO tab to assign keywords and meta descriptions to all your pages.
- Visit the Google webmaster console, you can search it on google and click it.
- Add new property [with prefix in which you input your website URL like https://yourstore.com].
- Verify Your property using the methods of your choice.
- Add your sitemap [ https://yourstore.com/sitemap_index.xml]
- You can also add your site to other search engines (Bing and Yandex).
You have successfully added your WordPress e-commerce website to Google!
Adding Your First Product On WordPress
It will be nice to add your first product and see it appearing on the front page. WordPress allows you to create either a single product or a variable product. If your product is having multiple colours or sizes then you will have to create a variable product but if the product is the same you will have to create a single product. Below are procedures to add your first product:
- Navigate to the products on the left menu bar of the admin dashboard. Click on add new product.
- Add the title which is the name of your product.
- You can add a description of what your product entails.
- There is a drop-down box where you can select a single product or variable product. You can leave it to be a single product by default.
- Add images and select a category for your product.
- Set your price and also fill the fields that are necessary for your product.
- Click publish. Congratulations! You have added your first product.
Will you need us to design your WordPress E-Commerce website or develop your online shop without using WordPress? Click here or use our live chat.
