How to Make an Ecommerce Website with WordPress Godaddy Domain 2018

This tutorial is going to teach you how to create an ecommerce website with WordPress.

By the end of the video you will have an online store and you will have learned how to make your own website with woocommerce, wordpress and the Shopkeeper theme!

Step 1: Register a Domain & Get Hosting

We need a domain and we need hosting in order to create an ecommerce website with WordPress.

First we’re going to register a domain. If you’re watching the Godaddy tutorial then you need to follow these steps.

  1. Go to Godaddy using this link to register a domain for only 99 cents (affilliate link)
  2. Once you do that…we need to get hosting. We’ll go to Hostgator for this.

There are a few different sources I recommend for domains and hosting but the best one has to be Hostgator because they’re –

I recommend Hostgator to all of my clients and they’re great at helping you build and make your ecommerce wordpress website.

So click on this link to go to Hostgator and then choose between the Hatchling and the Baby plan

Make sure to use the discount code ‘NYCTECH30‘ for 60%+ percent off.

The highest possible discount available by Hostgator.

Please note that the links to Hostgator are affiliate links and the coupon code is an affiliate coupon code. 

Step 2: Install WordPress

Now you want to go to your email inbox and click and open the email from Hostgator.

  1. Login to your cpanel
  2. Click on quick install or one click wordpress install
  3. Select the domain that you just registered and click continue
  4. Type in your website information
  5. Click install
  6. And once everything is installed, you should have your login details for your new wordpress website that you’re going to learn how to make.

Congrats!

Step 3: Log Into WordPress

Click to login to your WordPress website

Or go to your email and you will have your login information there

This is our WordPress Dashboard and where we will go to customize and create your ecommerce website.

Step 4: Get The ShopKeeper WordPress Theme

This is a premium wordpress theme. But it’s worth it because Shopkeeper is probably the fastest growing ecommerce wordpress theme there is. Don’t buy into the hype of other themes with more sales. They’ve been around a lot longer but it doesn’t make them better.

So for this how to create an ecommerce website tutorial we want to get the Shopkeeper theme.

So you can click on this link to go to Themeforest to get the Shopkeeper theme. 

Shopkeeper, shopkeeper, shopkeeper…I wrote it a bunch of times here just for fun and also so you see the link to click on.

Follow the video to download all the installable wordpress files. You can also activate the theme if you want!

Once you download the theme, I want you to make sure you compress it or that it is a zip file otherwise you can’t upload the wordpress theme to start making your online store.

Step 5: Install Shopkeeper WordPress Ecommerce Theme

Alright, now you should have downloaded the shopkeeper theme!  So now what we want to do is go back to our wordpress website and install the shopkeeper wordpress theme so we can start building our ecommerce website.

Step 6: Download Required Plugins

Now that the ecommerce wordpress theme is activated, you should see a notification to install some required plugins.

Click on begin installing/activating plugins

Those are the three must haves!

Then update them if you need to and then we can move on tho the nexst step and get one step closer to learning how to create our online store with wordpress. P.S. what type of ecommerce website are you learning how to make with wordpress?

Step 7: Download and Install 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 8: Create Pages

Normally, I only create one page at a time in my tutorials. But I want to make all the pages we’re going to make in this tutorial right now so we have everything for our setting options and we can come back and edit these pages later.

  1. Homepage
  2. Blog Page
  3. About Page
  4. Shop Page
  5. Wishlist Page – paste this in
  6. Contact Page
  7. Cart Page – paste this in
  8. Checkout Page – paste this in
  9. FAQ Page
  10. My Account Page – paste this in
  11. Privacy Policy Page
  12. Terms and Conditions Page

We are just going to make two pages really quickly so we can go through our settings and select the right pages for the ecommerce wordpress website we are making.

We’ll come back to these pages later when we make our ecommerce online store.

  1. Hover over pages
  2. Click on Add New
  3. Title
  4. Select layout if you want right now
  5. Publish

Step 9: Select Ecommerce Settings

Now let’s select our ecommerce settings for the wordpress theme that we are using (shopkeeper).

You can customize your settings to be whatever you want but I will show you what we select for the online store that we are building.

  1. Go to your wordpress dashboard
  2. Hover over Shopkeeper
  3. Click on Customize

Below are each of the sections and what we select. We’ll go through this quickly in the video tutorial so if you need to, you can see what we select here and go at your own pace.

Here you will see a bunch of setting tabs. We’ll go through them together.

Header (UPDATE WIDTH AND HEIGHT)

  1. Choose what layout you want for your logo and menu
  2. Choose your header font color and size
  3. If you want to make your header transparent on all your pages, you can do that here by clicking enable for Header Transparency (global)
  4. There are a few options here. So if you have a transparent header, when you scroll down it will change colors if you choose a color (just a tip)
  5. Change dark transparency color to black #000000
  6. Select your header background color

Header Elements

  1. I leave everything as the default here (includes having a wish list, shopping cart, and search icon in the header)
  2. Feel free to enable and disable whatever you want or upload your own icons for the wish list, shopping cart, and search icon

Logo (UPDATE WIDTH AND HEIGHT)

Top Bar

Sticky Header

Footer

© <a href='https://nyctechclub.com/'>NYC TECH CLUB</a>

You can copy and paste the above text. All you need to do is change the website name and the text between the > and < and the year (if you want)

Blog

Shop

Product Page

Styling

This is where you’ll choose your wordpress website colors – so this is one of the more important tabs. For the demo ecommerce website we use the following color codes:

Typography

In this tab, we can choose which font we want for our online store. See below for the fonts chosen for the demo ecommerce website (all you need to do is paste in this info into the right sections) –

Social Media

Custom Code

Import/Export

Site Identity

Menus

Widgets

Homepage Settings

Woocommerce

Step 9: Modify Permalink Structure

Step 10: Create custom website logo

Now we’re going to create a custom logo – how cool is that?

  1. The first thing you need to do is go to this website: Logomakr
  2. On the upper left corner, there is a search bar.
  3. Type in whatever type of image you want your logo to be
  4. Then find an image that you like
  5. Then go to the right upper corner and change the size
  6. Make sure your logo fits within that white space
  7. Click on the T on the left hand side if you want to add text to your logo
  8. Make sure all the text also fits within the white space
  9. You can change the colors of your logo by highlighting the image or the text and clicking in the color chart on the lower right corner
  10. Once you’re happy with your logo, go to the upper right corner and click on the disk
  11. A new page will pop up. Right click and download the logo
  12. Then go to your download folder. Double click the logo and export it to PNG.
  13. The logo should now be saved as a PNG image

Step 11: Customize Homepage

Now we’re going to go back and start customizing the pages we created earlier in this tuorial on how to make a wordpress website 2018 for free.

  1. Go back to your wordpress Dashboard and hover over Pages and click on All pages
  2. Find the homepage you created and click on it to edit it

Now let’s learn how to build our homepage for the WordPress website. The steps below will guide you on how to create your entire homepage. Don’t worry if not everything shows up right now. We haven’t created our entire website yet so there will be some missing parts.

  1. Make sure the page is set on Full Width Page
  2. Make sure hide the page title is selected
  3. Click on the back end editor to turn it on
  4. Add a new row
  5. Select Stretch row and content (no paddings)
  6. Make sure the row is full width
  7. Click the + to add a Slider Element (full height, high navigation arrows, 8 seconds)
  8. Add an Image Slide (66px, 16px, 24px)
  9. Add another Image Slide (68px, 16px, 24px)
  10. Add a new row (default, full width)
  11. Add an Empty space element (50px)
  12. Add a text block (H3)
  13. Add a new row (default, boxed)
  14. Add a row inside the row (default, full width)
  15. Change the columns in the row to 3
  16. Add banners in each row
  17. Add a separator line (grey, center, border, 4px, 100%)
  18. Add a new row with an empty space element (20px)
  19. Add a new row (default, full width)
  20. Add a text block (H1, paragraph)
  21. Add a Featured Product element (15, 5)
  22. Add a new row for the call to action (default, full width, #000000 background color)
  23. Add a row inside the row and select boxed option
  24. Add a text box and change the font to white
  25. Click the update button for the page

And that’s it! Now you have just made your homepage for your wordpress website. How was it? Congrats on learning how to make your first wp wordpress 2018 webpage. Let’s keep it going!

Step 13: Create Shop Page

We’re going to take a detour and create or customize the shopping page for our woocommerce wordpress website now.

Woocommece creates a few default pages for you and the shopping page might be one of them. If so, we don’t need to recreate the page but if not, then we need to make a new page and set the page in our woocommerce settings.

Let’s go and check to see if we have to make a new page for our wp wordpress website.

  1. Go to your wordpress dashboard > hover over pages > click on all pages
  2. Check to see if there is a Shop page
  3. If not, go and create a page and title it Shop
  4. Now go to your woocommerce settings and click on the products tab
  5. Set the shop page there

That’s all we have to do! Now we are done with the shopping page and all that and we can start adding products ?

Step 14: Add Widgets to Shopping Page

Now you should have a bunch of products for sale on your ecommerce website. So if we go to the shopping page, it should look pretty good.

Step 15: Create Single Products

Let me show you how to create products with no variables for your woocommerce ecommerce website using wordpress.

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 16: 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 17: Learn How to Make Custom Category Pages (headers)

If you do not want to create featured images or small category descriptions for your category pages, you can skip this section for your ecommerce website for wordpress.

Go to your wordpress dashboard > hover over products > click on categories

  1. Here you can create a new category or if you have one already created, you can hover over it and click edit
  2. Go ahead and name your category
  3. Put the slug as the same name as the category (with all lowercase letters)
  4. Just add a description
  5. Upload a header image
  6. Push add new category or update category

Step 18: Make About Page

Now we’re going to learn how to create the wordpress about page

  1. Click to add a new page
  2. Click to hide the page title
  3. Change the page to full width
  4. Turn on the page builder
  5. Add a new row (default, boxed + add 200px top padding)
  6. Add a text block for the page title (H1)
  7. Add a separator (orange, center, border, 3px, 10%)
  8. Add an empty space (32px)
  9. Add a new row (default, full width)
  10. Add a row inside the row (default, boxed)
  11. Add a text block for the about section that you’re making
  12. Add a new row (default, full width)
  13. Add a separator (grey, center, border, 1px, 80%)
  14. Add empty space element (50px)
  15. Add a tex block (h2)
  16. Add new inner row (boxed)
  17. Change the row to 3 columns
  18. Add a single image for each column (thumbnail, center)
  19. Add a text block for each column box
  20. Add an empty space element (32px)
  21. Add a new row (default, full width)
  22. Add a separator (grey, border, center, 1px, 80%)
  23. Add a text block (h2)
  24. Add an empty space element (32px)
  25. Add an inner row and select 3 columns (default, boxed)
  26. Add a text block for title
  27. Add some icon boxes to each of the columns (#b39964)
  28. Add a text box below
  29. Do this two other times for the other columns
  30. Add an empty space element (32px)
  31. Add a new row (default, full width, #dd4040)
  32. Add a text block (h2)
  33. Add a button (flat, square, large, center, classic orange)
  34. Add empty space
  35. Click update button

Now you’re done learning how to make your about page for the wp wordpress website 2018 😀 Let’s keep going on learning how to build a wordpress website for free!

Step 19: Create Contact Us Page

We created a new page on our wordpress ecommerce website earlier but if you need to make a new page just hover over pages and click on add new in the wordpress dashboard

  1. Make sure the page is the Full Width template and hide page title
  2. Add a new row (default, full width, 200px for top padding)
  3. Add a text block to add your page title (H1, center)
  4. Add a separator element (3px, 10%)
  5. Add a text block for your store and contact information
  6. Add a new row (default, full width)
  7. Add a google maps element

Step 20-A: Create Blog Posts

You don’t have to do this section right now if you don’t have any articles you want to publish. But since I want to show you what your website will look like after you do publish some blog posts, I will show you how to create a few blog posts.

  1. Go to your DASHBOARD > POSTS > Click Add New
  2. Title your blog post whatever you want
  3. Type in whatever content you want and change the text formatting if you would like
  4. Once you’re done you can add in a category for the blog post if you would like
  5. Add a image in the Featured Image section on the lower right if you want a thumbnail to show up on the homepage and blog post page

This is how you create blog posts

Step 20-B: Format Single Blog Post Page with Widgets

This section is NOT covered in the video tutorial on how to create an ecommerce website with wordpress

First let’s make sure our blog page formatting is correct.

If you want to have a sidebar you will need to add widgets to your blog posts. Do the following:

  1. Go to your wordpress Dashboard > Appearance > Widgets
  2. Drag whatever widgets you want into the sidebar area
  3. Make sure you click save on each widget you drag in

Step 21: Create FAQ Page

Not everyone needs a FAQ page but I think it’s a good idea for any online store and woocommerce and wordpress make it very easy. Let me show you how to make this.

When you create a new page make sure that the page is full width template option and uncheck the page title option

  1. Turn on the back end editor (default, full width, 200px top padding)
  2. Add a text block for your title
  3. Add a text block for the page title (H1)
  4. Add a separator (orange, center, border, 3px, 10%)
  5. Add an empty space (32px)
  6. Now create a new row (row settings: default, boxed)
  7. Add a text block for the section title
  8. Add a new row inside the row and select two columns
  9. Add a text block for each section for a question and answer
  10. Add an empty space element 16px
  11. Now add another row if you want and select two columns
  12. Add a text block for each section for a question and answer
  13. And add another empty space 16px and repeat
  14. Addd an extra empty space at the botom before the call to action for more space 16px
  15. Add a new row(full width, background color: #dd4040)
  16. Add a text block for the call to action
  17. Add a button (classic, square, classic orange, large, center)

Step 22: Create Privacy Policy Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

  1. Title the page Privacy Policy make sure page is full width
  2. Remove the show title check mark
  3. To add a custom title > push + and add a new row
  4. Click the pencil to edit the row -> we want to add 200px to the top padding so the title falls below the header menu
  5. Now we want to add a text box > push the + button and add text box. We want to add our custom title here. For the demo site we will put “Privacy Policy”
  6. Add a separator underneath the text box > + button > separator. Change the color and make the border width 3px and the element width 20%
  7. As a friendly reminder, always remember to click save
  8. Add a row inside your row and change it to boxed width
  9. Add a text block for your privacy policy
  10. Add an empty space element (32px)
  11. Push publish/update when you’re done!

Step 23: Create Terms and Conditions Page

The terms and conditions page I will show you how to make is very similar to the privacy policy page excetpt you will add additional text blocks for all your terms.

  1. Once you create a new page, make sure you uncheck the show page title
  2. Change the page template to full width
  3. Add a new row
  4. Add 200px for the top padding
  5. Add a text block for your page title
  6. Add a separator line with 3px and 20% width (orange)
  7. Add a new row inside the row and change it to boxed with
  8. Add a text block with your first term
  9. Add a separator line (1px, 100% grey)
  10. Continue to do this until you have all your terms
  11. Add an empty space element with 32px at the bottom
  12. Push publish

Create Header and Footer Menus

Set Woocommerce Settings