create an eCommerce website using Wordpress

How to Create Amazing eCommerce Website (Online Store) Using Wordpress: Step By Step

The is a step by step tutorial to create an eCommerce website Using Wordpress. This post may contain affiliate links. Please read my disclaimer for more info.

Are you looking for a way to create your own functional eCommerce website to sell your stuff online and possibly make a decent income from your store? Then this Wordpress eCommerce store creation tutorial is simply for you.

create an eCommerce website using Wordpress

Why I Finally switched to Wordpress eCommerce Website(Woocommerce)

  • I want an online store that I can have total control to sell what I want(with no restrictions on what to sell).
  • It was the perfect time to stop paying monthly maintenance fees to Shopify while I have all the essential resources and tools needed to make up a nice looking store.
  • There is need to save so as to put more money in scaling up my dropshipping business.
  • There is nothing Shopify store will do that Woocommerce wouldn't do(with the help of plugins).

Maybe one of the above was your reason too?

Wordpress has proven itself beyond doubt to be a leading website platform on the internet today that can be used to create any form of website online tailored to fit any need. No wonder why 75% of website owners use Wordpress.

This method is the easiest way for anyone to create an amazing eCommerce website with Wordpress irrespective of your zero coding skills.

As long as you can follow this simple tutorial. You are good to go.

You will learn how to create from scratch your own Woocommerce website to sell your stuff online having all the essentials like a catalog, categories, product and shop page, add to cart, checkout, credit card/Paypal payment incorporation, complete order, track orders, and others… just like those decent eCommerce stores you see online.

 

Side Note:

#1: Please follow all the steps here. It is very important. Once you can follow simple guidelines, you are good to set up your own online store in minutes.

#2: Every plugins(tools) listed in the post are very essential for your ecommere website functionality. Try as much as possible to download and install all of them as instructed. Don't skip any.

#3: Possibly with all the steps given but still find it confusing, hooked up somehwere or overwhelmed. Feel free to send me a message immediately through the contact page for further assistance.

#4:  You might as well request our expertise to build up your eCommerce store for you. Contact us here.

 

How To Create An eCommerce Website Using Wordpress (The Step-By-Step Guide)

There are seven major steps to take in order to create an eCommerce website using Wordpress. Each step will be properly explained in the best possible way you can comprehend.

Steps listed below

  1. Website Hosting and Domain
  2. Wordpress Installation
  3. Install WP & eCom Themes.
  4. Install Plugin
  5. Configure Website
  6. Payment Integration
  7. Add Products

 

Important Notice: The first two steps above have been fully explained in some former posts on the blog here. We might direct you to those articles in the process. Please do not be angry. We want this post to be short, precise and up to the point as possible as it can be. We want to avoid long boring post here.

 

Step #1:  Hosting And Free Domain

This is the first step to be taken in setting up your eCommerce website. You need a host and a domain for your website to come alive and be reachable online.

There are many web hosting companies online but for the sake of this tutorial, I will be focusing and recommending the most reliable Wordpress hosting company to you which is Bluehost.com

Why I recommended Bluehost:

  • Quality customer support via phone or live chat 24/7.
  • Website speed is extremely fast and reliable.
  • They are SUPER cheap without diminishing in quality or service.
  • Highly recommended by 85% of  Web designers & Developers.
  • FREE domain(website name) given along hosting.
  • Complete guarantee given on all hosting packages, so no risk at all.
  • Providing Free SSL certificates for maximum security and much more…

This is also the same hosting company we've been using for all Wordpress works( both for myself and clients) and no shaking.

Honestly, they are just the best but don't fret if you already have a good host (but make sure they have all the qualities above if not, Click here to get your 60% off when you sign up with Bluehost right AWAY!!! 

To Host Your Website with Bluehost:

Here are the main steps to follow:

  1. Click here to open up the website in a new tab and click get started now.
  2. Select any plan of your choice but I recommend you select the plus plan.
  3. Enter your website name(store domain name). Make it simple and sweet.
  4. At this point, fill in your account information.
  5. Select 36 months plan package(this will save you more money).
  6. Remember to tick the primary domain registration option to keep your contact details private.
  7. Enter your payment information or select more options if you prefer Paypal payment.
  8. Upon successful payment, BOOM! You have successfully hosted your new website.

You can as well check out the actual post which contains the step by step guide including screenshots guides where needed to host a website with Bluehost.

When you are done with the process, come back to complete next step.

 

Step #2:  Wordpress Installation

WordPress.org is the best content management system and an open source software which can be used to create all kind of websites(be it a blog, eCommerce site, membership site, business, etc…) or apps.

It gives you the total freedom to build anything you want on it with no restrictions, unlimited customization, beautiful designs with no coding or HTML required.

To Install Wordpress:

With Bluehost, WordPress can be installed with a single click to set up your website.

Here are the main steps to follow:

  1. login to your Cpanel Dashboard.
  2. Scroll down until you see the section labeled “website”.
  3. Click on the WordPress icon – Install WordPress.
  4. On the next screen, Click on the Get Started button to start the process.
  5. Select the domain (your website address) to install Wordpress on.
  6. Leave the directory empty and click Next
  7. On the next page, enter your website name, admin username, email, and password.
  8. Remember to check all the 3 boxes and click Next.

Alternatively, you can also check out the full tutorial including screenshots of all the 8 steps above via this link in a new tab. Scroll down to the headline titled “WordPress Installation” and follow the steps.

Once you are done, come back to continue the next step.

Deleting all the Default Plugins

Plugins are the essential tools and software needed to expand the functionality and smooth running of your WordPress website.

But there is need to clear off all the pre-installed plugins that comes with the Wordpress installation by default first because they are irrelevant for this exercise.

And to do this,

  • Log into your WP Admin dashboard
  • Goto the Plugins » Installed Plugins

  • Mark all the installed plugins
  • Deactivate them all
  • Delete all and Apply

 

Step #3:  Theme Installation

To customize your new Wordpress website to become a full-fledged eCommerce website, you'll need to install

  • An eCommerce Wordpress Theme.
  • An eCommerce Store Demo File.

More on the demo files in step #4

To Install eCommerce Wordpress Theme

  1. Log into your Wordpress admin dashboard
  2. Goto Appearance » Themes » Add New
  3. Search for OceanWP theme and Install
  4. Upon successful installation, activate the theme.

 

Step #4:  Plugin Installations

To completely enhance your eCommerce Wordpress website, some essential plugins(check them below) must be installed and activated on your new Wordpress site to function properly.

The FREE Plugins (Very Essential)

To download and install them,

  • Goto Plugins » Add New
  • Search for each plugin below in the plugins search bar.
  • Click Install and Activate

Namely:

  1. WooCommerce – This is a must-installed plugin which allows you to sell anything on your website. It was specifically built for WordPress. Immediately you install and activate this plugin, Skip setup. This is very important so as to avoid page duplications.
  2. WooCommerce Stripe  This plugin makes it possible to take payments directly on your store. More on this at step #6 below.
  3. Ocean Extra – It adds great features to the theme like OceanWP Settings metabox in your pages and posts that will serve you to modify some options per page/post like changing the layout, title, adding shortcodes, select a different menu and/or sidebar and much more.
  4. Elementor Page Builder  – It is a page builder plugin with no limits of design that delivers high-end page designs and advanced capabilities on E-commerce WordPress Site.
  5. Ocean Custom Sidebar  – It generates an unlimited number of sidebars and places them on any page you wish.
  6. Ocean Product Sharing – It helps to add social share buttons to your product page
  7. Ocean Social Sharing – It helps to add social share buttons to your posts.
  8. Contact Form 7 – It helps create customize and manage multiple contact forms
  9. Regenerate Thumbnails – This plugin makes it possible to regenerate all thumbnails after changing the thumbnail size.

The Premium Plugins

These premium plugins are needed to make your eCommerce website outstanding and elegant though optional.

You'll get them from OceanWP for a one-time fee of $39(the complete bundle package for a single site). That's all you'll spend to get all the plugins and the demos inclusive but below plugins are the essentials to be installed:

  1. Ocean Sticky Header – This extension is to attach your header at the top of your screen with an animation. Ideal if you always want to show your logo and menu to your users.
  2. Ocean Elementor Widgets  – It helps add some awesome new widgets to the popular free page builder Elementor.
  3. Ocean Woo Popup – It helps to display a popup when you click on the Add To Cart button of your archive products.

PS: Don't forget to install and activate all the plugins(both the free and premium). This is very important for smooth running of your ecommerce website

To manually install plugin

  • Goto the Plugins » Add New

  • Click on Upload Plugin
  • Browse the downloaded plugin(in zip format)
  • Click Install Now
  • Activate

The manual installation is a way to install plugins that are downloaded outside the Wordpress plugin directory.

To activate plugins

  • Goto the Plugins » Installed plugins
  • Mark all the installed plugins
  • From the bulk actions, select Activate
  • Then Apply

 

Importing the Demo Files

The creative demo is an already made eCommerce files which can be imported into your fresh website and turn it into a full-fledged eCommerce site with just a click.

The demo made it possible to easily edit any existing product, pages and replace it with your own information with zero stress.

To import, you need an extension to do this.

  • Goto Plugins » Add New
  • Search for Ocean Demo Import 
  • Install and Activate

To import the file

From your Wordpress admin dashboard,

  • Goto Theme Panel » Install Demos
  • Click on the eCommerce section tab
  • Select your preferred demo store and install

In my own case, I selected Lingerie as my preferred demo but my exact steps are also applicable to all other e-commerce demos. So feel free to select any demo of your choice

 

Step #5:  Website Configurations

1. SSL Certificate Installation

SSL provides maximum security on your website. It ensures proper protection of users details(personal info, credit card details, etc…) and buyers will trust your brand the more when they see the green security lock sign.

To install SSL certificate

  • Log into your Cpanel dashboard.
  • Click on Wordpress tools from the head tab.
  • Click on Security.
  • Select your website from the drop-down.
  • Slide to switch on the Free SSL Certificate green button.
  • Once the SSL has been turned on, it can take some hours to install and activate on your site.

Take Note:

  • In some cases, you may need to take some actions to complete the process. If need be, you'll receive an email with the instructions for validation.
  • If you are not using Bluehost, you might have to buy the SSL certificate for your website.

2. Website Customization

This is the aspect where you design your site to taste. And one nice thing about it is that you see what you are editing live on the go(WYSIWYG). So edit to your own satisfaction but don't overdo it. Simplicity matters most.

#1: Editing Website Homepage

  • Goto Appearance » Pages
  • Find Home(the front page)
  • Edit page with Elementor(edit to taste)
  • Once done! Save & Publish

#2. Adding a Favicon/Tagline to your site

When creating your site favicon/logo. Make sure they are in the .png format(image/text with no background).

  • Use this free tool called Logo Maker
  • Set dimension to 512 * 512
  • Goto Appearance » Customize
  • Click on Site Identity 
  • Edit site tagline
  • Upload site icon
  • Save & Publish

#3: Adding a logo to your site

  • Goto Appearance » Customize
  • Click on Header » Logo
  • Upload your site logo
  • Upload your site retina logo as well (double the logo size)
  • Save & Publish

To create a Logo

You might hire someone on Fiverr or Upwork or make use of free resources online like www.logomakr.com

 #4: Changing Website Theme Color

Don't limit yourself to my color codes, play around them but use elegant and popping colors to make your eCommerce website stand out.

  • Goto Appearance » Customize
  • Goto General Options » General Styling
  • Set primary color code #de165a
  • Hover primary color code #de166a
  • Done! Save & Publish

Link Color

  • Main Color #de165a
  • Hover Color #13aff0
  • Save & Publish

#5: Top Bar Settings

Top Bar Colors

  • Goto Appearance » Customize
  • Goto Top Bar » General
  • Background Color #de165a
  • Border Color #7e3baf
  • Text & Link Color #ffffff
  • Link Hover Color #0c1100

Socials

  • Goto Appearance » Customize
  • Goto Top Bar » General » Social
  • Enter your relevant social links.
  • Save and Publish

#6: Website Font Settings

  • Goto Appearance » Customize » Typography

#7: Footer Settings

To change, edit or add Footer

  • Goto Appearance » Customize
  • Goto Widgets
  • Edit Footer 1, Footer 2, Footer 3
  • Also, customize the Woocommerce Sidebar
  • Save & Publish

Quick Editing Tip: A faster way to easily customize is to click on the edit button of each website/page section. And always remember to save your work.

3. Adding of Pages, Posts & Menu

#1: Important Website Pages

Your eCommerce store must have pages like the “About us”, “Terms”, “Privacy Policy”, “FAQ”, “Track Order”, “Returns and Refunds”, “Contact us”, “Blog”, and other essential pages you can think of.

To Add a New Page on Website

  • Goto Pages » Add New
  • Write your post(page text) & Publish

Remember you must be logged into your Wordpress Admin dashboard to perform all of these settings.

To Add a New Post

  • Goto Post » Add New
  • Write your post & Publish

#2: To Create / Edit Menu

  • Goto Appearance » Menus
  • Select a menu to edit(main menu, top bar, footer) or create a new one. 
  • Add pages or post you want to add to your menu tab
  • Arrange/drag each item in the order you want them
  • Save Menu

 

 Step #6  Payment Integration

This is where you set up your preferred currency, Shipping methods, Website payment processors for your eCommerce site.

All these settings and integrations will be done in the “Woocommerce” settings of your dashboard. Let's take the steps one after the other.

To get started,

From your dashboard, goto Woocommerce » Settings

You should see tab sections like General, Product, Shipping, Checkout, Account, Email and API.

1. General Settings

This is where you set up your business information like your business location, addresses, city, country, postcode and your preferred website currency then save changes when you are done.

2. Product Settings

There are four sub-sections here (General, Display, Inventory, Downloadable products). 

Let's check them out one after the other.

#1. General

This is where to set your product weight and dimension unit. I set by default (kg as weight and cm as the dimension) in my own case.

#2. Display

Set as default

#3. Inventory

Set accordingly to your choice but best left as default.

#4. Downloadable Products

Only perform settings here if you'd like to sell digital products like eBook, Videos, etc…

Remember to save changes on each setting you perform. Very important.

3. Shipping Settings

There are 3 sub-sections here (Shipping Zones, Shipping Options, and Shipping Classes)

#1: Shipping Zones

  • Click on Add Shipping Zone.
  • Enter Zone name & regions.
  • Add Shipping method to each option(Flat rate, Free Shipping, and Local Pickups).
  • Done! Save changes.

#2: Shipping Options

Set as default

#3: Shipping Classes

This is where you categorize some shippings based on buyer's action on your website.

4. Checkout Settings

There are 5 sub-sections here. (Checkout options, BACS, Check payments, Cash on delivery, PayPal)

#1: Checkout options

  • Under the Checkout process  Set as default
  • Under the Checkout pages  Select the corresponding pages.
  • Under the Checkout endpoints – Leave as default
  • Done! Save changes

#2: BACS

Enable this option if you would prefer bank payment/transfer on your e-commerce website. This is usually applicable to sellers who sell within their country/region.

#3: Check Payment

If you would prefer to accept payment through check on your store, enable this option. Make sure to give clear instructions to your buyers who might prefer check payment.

#4: Cash on Delivery

Enable this option if you want your customers to pay with cash (or by other means) upon delivery.

#5: Paypal

I recommend you enable this option on your online store if you sell or would sell to the international market.

#6: Stripe

Stripe Payment Integration

This integration is very important for your business as long as you want to be accepting credit card payment on your eCommerce store.

To successfully set up and integrate credit card payment option into your store, you need to Sign up for a Stripe account so as to obtain your Live Publishable & Secret keys on your settings page and paste them into the stripe checkout settings.

By the way, I have got you covered with this step by step guide here and with the video guide below too.

 

5. Account, Email and API tab Settings

Preferably you leave settings by default and save changes

 

Step #7:  Adding Product to Store

To add or list your product on your site

  • Goto Products » Add New.
  • Enter product name & description.
  • Change Catalog visibility to Shop and search results.
  • Select or type categories the product belongs to.
  • Add product tags.
  • Add product image (the main product image).
  • Add product gallery(other additional images of product).
  • Scroll down to Product data (select the product type and add prices).
  • Publish.

More on Product Data settings

Product is classified into Simple, Grouped, Affiliate or Variable which helps to set what type of product we are actually listing on our store.

#1: Simple products – Such product has no price variation.

#2: Grouped Products – As the name implies, this is used to categorize common products together.

#3: Affiliate Products – These are products listed in your store but actually when clicked, they are redirected to the third party website where buyers can get the actual product.

#4: Variable Products – These are products with price, size and color variations.

 

Usage Video Tutorial

How to set Product Data and list product on Store

The video covers everything from product data setup to listing of product on the website.

Congrats! Your WordPress ECommerce Website  Is Now Live!

If you have truly followed all my steps in this tutorial, by now you should be a proud owner of your own eCommerce store ready to sell your stuff.

I appreciate your time reading and following all the steps but if by any means you are still not getting some aspect cleared, just shoot me a message, am ready to help you out.

If you love this Wordpress eCommerce tutorial. Please consider sharing it and pin post. I really appreciate this.

And I hope this article has done justice to the easiest way to create an eCommerce Website using WordPress?

Once again, if you encounter any problem or need help on your website, feel free to message me or use the comment section below to ask your question. I will respond to your question as soon as I can.

All the best with your new eCommerce website.

create an eCommerce website using Wordpress

 

Recommended Reads For You

Similar Posts