How to Create an Ecommerce Website – Online Store 2018

We’re really excited for this newest 2018 tutorial on how to create an ecommerce website with The Hanger theme by Getbowtied.

The Hanger theme is a new ecommerce wordpress theme from Getbowtied and hopefully will become their flagship product. We’re really excited to create a tutorial on how to make an online store with it. You can check out the premium wordpress theme yourself through this link.

This tutorial on learning how to create and build an ecommerce website doesn’t take much. All you need are a few things…

Things You MUST Have

Hosting – needed to run your website (we recommend Inmotion because you get a free domain and save a lot of money through our affiliate link)

The Hanger Theme – the premium theme we will use to build our online store with

Time and Patience – learning something new like wordpress is easy but it takes time. Give yourself time to learn and enjoy every second of it.

The hosting company we will be recommending for this tutorial on how to create an ecommerce website with wordpress 2018 is Inmotion.

The reason why we LOVE Inmotion

We will walk you through everything you need to do, step by step, in just a bit. We just wanted to give you an idea of why we love Inmotion first.

If you want to build a professional and beautiful ecommerce website or online store using wordpress, then let’s jump right into it.

Step 1: Register a Domain and Get Hosting

Click on this link to go to Inmotion – Free Domain + 55% off hosting

As we mentioned above, we’re going to use Inmotion to get our domain and hosting.

Your domain is your website address. Every website needs a website address.

Your hosting stores your files and contents and runs your website. You need this (also known as a server) to run your website online.

Make sure to select Install WordPress when you go through the sign up options 🙂

Step 2: Get The Hanger Theme for Ecommerce

Click on this link to go to the Envato Themeforest Website to get The Hanger Theme

Themeforest is the #1 marketplace for WordPress themes and plugins so you’re in good hands. Plus, Getbowtied is one of the premiere WordPress developers creating beautiful wordpress themes focused on online stores and ecommerce websites

Step 3: Install WordPress Theme

Installing your ecommerce wordpress theme is easy.

  1. Just log into your WordPress dashboard.
  2. Hover over Appearance > Click on Themes
  3. Click on the button that says Add theme
  4. Click on Upload New Theme
  5. Click on Select file and find the zip file that you downloaded in the previous step. Make sure that it is a zip file. If you need to zip the file, right click the folder and click compress or zip

Step 4: Create Homepage and Blog Page

First we are going to create two pages so we can “set” them in our wordpress settings so when people go to the homepage, they go to the actual homepage we are building and then the same with the blog page we are making in wordpress.

  1. So what I want you to do is go to your dashboard and hover over pages
  2. Click on Add new
  3. You can also click on + New at the top of the page and click on Add New Page
  4. The first page we are making is the homepage for our ecommerce website
  5. Title the Page “Home”
  6. Then push publish
  7. Now create another page
  8. Title it “Blog” or “Latest News” or whatever you want 🙂
  9. And push publish

Now we have just made our first two pages for our ecommerce website with WordPress. What we need to do now is set the pages in our wordpress settings for the online store. So we’ll do that in the next step.

Step 5: Select WordPress Settings

  1. Go to your wordpress dashboard for the ecommerce website that you are building
  2. Hover over settings and click on General
  3. Type in www. in the address for your wordpress and site address and click save
  4. You will need to log back in for security reasons
  5. Now go back to settings and click on Reading
  6. Set the home page and the blog page to the front page and blog page respectively
  7. Click save
  8. Now hover over settings and click on permalinks
  9. Select the Post Name option
  10. Click save

Step 6: Download Demo Content

You can download the zip file with demo content to make your ecommerce website here

Please note that the images may not be the same as in the video on how to create an ecommerce website with wordpress 2018 because those images are copyrighted but you should use your own images to make your online store anyway.

I will also show you how to upload images as we go through making our ecommerce website in this video tutorial.

Step 7: Customize Theme Settings

Go to Apperance and click on Customize

We will go through all the tabs that we believe are important in the video tutorial on how to make an ecommerce website with wordpress 2018 – online store

Step 8: Customize Homepage

Go back to your homepage

WordPress Dashboard > Pages > All Pages > Click on Edit for homepage

This is where we will customize and create our entire homepage for the online store that we are building.

  1. Click to turn on the pagebuilder (I like to use the backend builder)
  2. First we are going to add a new row
  3. Click on the pencil on the row to go to the row settings
  4. In the row stretch drop down select -> Stretch Row and Contents (no padding)
  5. Go to the Design Options tab
  6. Add 75px to the top and bottom margin
  7. Add 7% to the left and right padding
  8. Click save
  9. Now click on the + button inside the row to add a Slider element
  10. Go into the slider settings
  11. Change the dimesions to 786px by 586px
  12. Change the slide number colors if you’d like
  13. Click Save
  14. Now click the + to add as many images as you want and change the text colors. I suggest a slider image size around 1200×800 but its really up to you
  15. Click save for each image you add
  16. Now we will add a new row for our featured products
  17. Click the pencil to edit the row
  18. Add 75px to the bottom margin
  19. Click save
  20. Now add a Featured Products widget
  21. Change the number of products you want to show and the number of rows
  22. Click save

Don’t worry that a lot of the product section or the footer section is blank. We are going to add footer widgets in the next section for the online store that we are learning how to make towards the end of this video tutorial on how to create an ecommerce website with wordpress 2018.

Step 8: Customize WooCommerce Settings

We’re going to go through our ecommerce settings right now so we have everything in order before we start making our products. You can always come back to this section later though so if you don’t want to do this right now…then just revisit this woocommerce settings section later.

Go to the products tab > click on all products

Click on the Help link on upper right

Once you see the pop up > click on the set up wizard on the left side

Add your address and the type of products you will sell

We will only integrate Paypal with this video tutorial but you can click on the link to integrate other payment options

Live rates works with USPS. If you live outside the US, you may want to use a different shipping option

We use flat rate for this tutorial

Remember to change the weight and dimension units to your preference

We enable automated taxes

Connect to Jetpack

And that’s all you have to do! No need to pay for anything. This is all for free.

Now just go back to your site and let’s keep making our wordpress website

If you ever want to go back to your Woocommerce settings

Just go to your WordPress dashboard

Hover over Woocommerce > Click on Settings

We have to go connect Paypal now and any other payment options you have

Step 9: Create Shop Page

Just make sure you have a shop page. If not, go to your wordpress dashboard and create a new shop page for your online store

You don’t need to do anything special to the shop page. Just make sure the page is created.

Step 10: Customize Shop Sidebar

  1. Go to your wordpress dashboard
  2. Hover over appearance
  3. Click on widgets
  4. Add widgets to the shop sidebar
  5. Click save on each widget

Step 11: Create Single Products

Creating products for your ecommerce website is really easy. First we’ll show you how to make single products. Then some variable products and then talk briefly about downloadable products.

If you want to make a product for your online store, just hover over products on the left hand side of the wordpress dashboard and click add new

If your online store has products with only one type of product that doesn’t have sizes or anything, then that is called a single product.

  1. Go to your wordpress dashboard > hover over products
  2. Click add new
  3. Now you will be on the product page
  4. Go ahead and title your product
  5. Add a long description (that will show up on the bottom of your product page)
  6. By default it should have single product selelcted
  7. Type in the price and whatever else you want in the tabs
  8. Add your short description that shows up next to the image of the product you’re selling
  9. Add your images
  10. Add your categories
  11. Add your tags
  12. If you want this product to show up as a featured product on the homepage, go to the tab nexst to the publish button and open that up and click the featured button
  13. Publish the product

Step 12: Create Variable Products

Creating a variable product for your online store is pretty much the same as a single product except this time you’re going to go into the drop down that says single product and select variable product

Then what you want to do is going to the attributes tab and click on that and add attributes

  1. Click on add custom attributes and title the variable (like size or color)…then type in the colors and separate them with a | …not a comma but a line like Small|Medium|Large
  2. Then check the box that says use for variations
  3. And click save
  4. Now go to the variation tab and click add attributes or add custom attributes
  5. Then click and expand and add your prices
  6. Click save when done
  7. The rest is the same as a single product -> images, category names, tags
  8. Click publish when you’re done

If you want to add attributes and save them so you don’t have to keep typing them in each time…follow the directions below – 

  1. Go to your wordpress dashboard > hover over products > click on attributes
  2. Add new name for your variable (attribute)
  3. Make the slug the same name (all lowercase)
  4. Just select type TEXT in the drop down
  5. Click the Add Attribute button

Now what you want to do is click on the attribute if you are not redirected to that page and add the individual variables

  1. Just add a name and slug name
  2. And click add new

And now you know how to save time ?

Extra: You can also add different types of products – not just single and variable products. There are downloadable and affiliate products you can also create!

Step 13: Create Category Pages

We don’t really need to do much for the category pages for our ecommerce wordpress website. What we can do is add icons or edit the category pages though.

  1. Go to your wordpress dashboard
  2. Hover over products > click on categories
  3. Edit each category and add an icon if you want
  4. Click save

Step 14: Create About Page

Let’s create an about page for your ecommerce website with wordpress. To do this we need to add a new page.

For the About page for the wordpress ecommerce website that we are learning how to make, we are going to make it look professional and just have a little background story. In the past, I added team sections and everything but I personally think, if you want to be taken as a serious ecommerce online store, then you don’t need to have an about section with all your team members. But that’s just me 🙂

  1. Hover over pages > Click add new
  2. Title your page “About”
  3. Turn on the pagebuilder
  4. Add a row and split it 50/50
  5. Add a single image to one side
  6. Add a text block to the other side
  7. Add an empty space widget with about 50px
  8. Add another row and split it 50/50
  9. Add another image widget
  10. Add another text block
  11. Click publish when done

Step 12: Create Blog Posts

To create blog posts for your online store all you have to do is go to your wordpress dashboard

  1. Hover over Posts
  2. Click on Add new
  3. Add a title to your blog post
  4. Type out the content
  5. If you want to have a “Read more” section click the button you see in the video after the amount of text that you want to show up
  6. Add a featured image
  7. Click publish

Step 13: Customize Sidebar

We do not use a side bar for our blog posts but we have it activated for the archives. We can add some widgets by going back to the widget page for the blog side bar.

Just make sure to click save once you add anything.

This will only show up on the main blog post page

Step 14: Create FAQ page

Add a new page for your ecommerce wordpress website 2018

  1. Title the page
  2. Add a row
  3. Split the row into 2 halves
  4. Add two text blocks
  5. Add an empty space with 16px
  6. Add as many rows as want
  7. There is no need to add an empty space below your last row of questions and answers for your online store that you are building
  8. Click publish when you are done

Step 15: Create Contact Us Page

We create a beautiful and simple contact us page for our online store ecommerce website with wordpress.

  1. Just make a new page
  2. Title it
  3. Add a row that and modify the number of columns
  4. Add your information
  5. Click publish

Step x: Create Menus

Step 7: Add Footer Widgets

  1. Go to your online store wordpress dashboard
  2. Hover over appearance and click on widgets
  3. If you want sections on the bottom of your website pages like the demo ecommerce website then just do the following
  4. Go to the Pre-Footer Widgets section and add the following widgets
    1. Ecommerce Info widgets
    2. Change the icons to whatever you want
  5.  Now to go the footer widget and add the following
    1. Product search
    2. Navigation Menu – Shop Highlights
    3. Navigation Menu – Our Company
    4. Navigation Menu – Customer Support
  6. Click save for each

Step 16: Make Sure You Have All Woocommerce Pages

This should be easy. They should all be there. But if not. See below.

Please check to make sure you have the following pages

  1. Cart Page
  2. Checkout Page
  3. My Account Page
  4. Wishlist Page

If you do not have these extra pages. Create a new page and add the following text to each

  1. Cart Page – [woocommerce_cart]
  2. Checkout Page – [woocommerce_checkout]
  3. My Account – [woocommerce_my_account]
  4. Wishlist Page – [yith_wcwl_wishlist]
  5. Then go into the Woocommerce Settings
  6. Checkout tab – set Cart and Check out page
  7. My Accounts tab – set My Accounts page
  8. Click save for each tab

Step 17: Publish WordPress Website!

If you need to publish your website. go ahead and do that now!

And congrats!

Optional Step: Create Any Other Pages You want