How to Make e-Commerce Website in WordPress: WordPress is the most popular and used platform for the eCommerce website. It is a good choice for running an online store to get your products in front of a large audience. So today in this article we will teach you that how to Make eCommerce Website in WordPress. The WordPress allows you to create any type of website and it’s easy to use. Also, it allows users to quickly set up e-commerce sites with features like shopping carts and shipping options. The WordPress offers many different ways to build an online store for all sorts of markets and types of products. But don’t worry about that we will help you build the best and most professional website possible.

The WordPress has thousands of themes and plugins that add extra functionality to your site. The most popular plugin is WooCommerce which is suitable for selling both digital, physical and affiliate products. WooCommerce plugin is developer friendly and offers product variations, shipping options, and different payment gateways. Also, it allows you to sync your orders with your accounting software, automatically send emails to customers who abandon their carts, print invoices, and shipping labels, offer extra shipping methods and much more.

The design is not the only thing you should focus but the attractive website can help you attract more visitors and turn them into customers. You must focus on this option also.

1. Do not ignore the Whitespace

2. Make sure your theme is easy to customize

3. Choose a theme with the right features

Get Started Make eCommerce Website in WordPress:

Step 1: Register a Domain & Get Hosting

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

First, we’re going to register a domain. The domain name allows your visitors to find you on the web. You can name your store according to the products you sell or pick a more generic name in case you want to expand your inventory in the future.

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

• Fast

• Reliable

• Cheap

• Great Customer Service

I recommend Hostgator to all of my clients and they’re great at helping you build and make your e-commerce WordPress website.

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

• Hatchling – if you plan to only build one website
• Baby – if you plan to build more than one website and host them on this account

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 In to WordPress

Click to log in 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 e-commerce 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 e-commerce 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 e-commerce 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 E-commerce 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 e-commerce website.

• Go to your WordPress Dashboard
• Hover over Appearance
• Click on Themes
• Click on Add Themes
• Click on Upload themes
• Click on Choose file
• Find the shopkeeper.zip file (must be a zip file!)
• Upload and Activate

Step 6: Download Required Plugins

Now that the e-commerce WordPress theme is activated, you should see a notification to install some required plugins.

Click on begin installing/activating plugins

• Getbowtied tools
• Woocommerce plugin
• Visual Composer Page builder
• YITH Woocommerce Wishlist
• WP Super Cache or W3 Total Cache

Those are the three must-haves!

Then update them if you need to and then we can move on to the next step and get one step closer to learning how to create our online store with WordPress. P.S. what type of e-commerce 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 e-commerce website here

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

• Download everything
• Go to your WordPress dashboard
• Hover over media
• Click on Add media
• Upload your demo content

I will also show you how to upload images as we go through making our e-commerce 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 e-commerce WordPress website we are making.

We’ll come back to these pages later when we make our e-commerce 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 e-commerce 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)

• Here is where you can upload your logo. If you don’t have one, we will create one together after we select our WordPress website settings

Top Bar

• If you want to have a top bar navigation and message then click enable
• Then you can choose the color for the top bar and the font colors
• Also, make sure you put in what text you want for your top bar text

Sticky Header

• If you want to have a sticky header, click Enable. This will make the header always show up at the top of your WordPress website even if you scroll down the page

Footer

• The footer tab lets you choose whether you want the footer to be transparent and if you want to have social media icons
• Footer color code of the demo WordPress website: #042368
• You can also include copyright text
• For the demo site we will use the copyright next below (you can modify it to your liking)
• Turn on back to top button

© <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

• Choose your blog page layout
• For layout 1 and 2 – If you want to have a sidebar for your blog post page, you can enable it here.
• We use infinite add for loading posts

Shop

• The shop tab allows you to choose a few options for the shopping pages 
• Enable quick view
• No real changes to default options

Product Page

• We keep the default options
• If you want to allow for zooming of the product images, show related products, have social share icons and product reviews on your product pages – leave everything as is
• You can make any modifications to the product page if you want (just click enable and disable on what you want to change)

Styling

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

• Body text color – #545454
• Heading color – #000000
• Main theme color – #ef6700
• Body background – #ffffff

Typography

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

• Main Font – Poppins
  • Select Semi bold 700
  • Font size 21
• Secondary Font – Yantramanav
  • Select Semi-Bold 600
  • Font size 16

Social Media

• For whatever social media icons you want to show up in your footer and your top bar navigation – all you need to do is enter the web address for the social media sites (your URL to your page)

Custom Code

• We can skip this section

Import/Export

• We can skip this section

Site Identity

• Add “Fashion Has Never Been Better” to the tagline

Menus

• Skip

Widgets

• Skip

Homepage Settings

• Set static pages for home and blog page

Woocommerce

• Product catalog –
• Show products
• Show both

Step 9: Modify Permalink Structure

• Go to your settings on your WordPress dashboard
• Click on general if you want to change the site title and tagline
• Then add www. to the site address and WordPress address
• Click save and log back in
• Now go to Settings > Permalinks
• Select the permalink structure you want
• Click save

Step 10: Create a 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: Logomark
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 tutorial 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 the 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 WordPress 2018 webpage. Let’s keep it going!

Step 13: Create Shop/Business 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 e-commerce website. So if we go to the shopping page, it should look pretty good.

• But there’s one more thing I want to do – add a sidebar with some cool options. So to do this, we need to do the following:
• Go to your WordPress Dashboard > hover over appearance > click on widgets
• We are going to drag some widgets (the boxes on the left) to the Shop Sidebar

Step 15: Create Single Products

Let me show you how to create products with no variables for your woocommerce e-commerce 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 selected
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 next 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 a 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: Select WooCommerce Settings

 

Step 18: 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 e-commerce 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 19: 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 text 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 20: Create Contact Us Page

We created a new page on our WordPress e-commerce 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 21-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 an 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 21-B: Format Single Blog Post Page with Widgets

This section is NOT covered in the video tutorial on how to create an e-commerce website with WordPress

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

• Go to DASHBOARD > Shopkeeper > Customize
• Click on Blog
• Choose whatever settings you want or you can use the following (which I use in the tutorial)
• I choose to disable the sidebar…but you can enable it if you want

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 22: Create FAQ Page

Not everyone needs an 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. Added an extra empty space at the bottom 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 23: 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 the 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 the 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 24: 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 except 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

Step 25: Create a Header and Footer Menus

1. Go to your WordPress Dashboard
2. Hover over Appearance > click on Menus
3. Create a new menu and title it Header
4. Click on Create Menu
5. Add your menu items
6. Click on the Main navigation
7. Save menu
8. Now create a new menu for the footer and title it Footer
9. Add menu items
10. Click footer menu
11. Save menu

Step 26: WooCommerce Pages

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. Check out tab – set Cart and Check out page
7. My Accounts tab – set My Accounts page
8. Click save for each tab

Step 27: Publish WordPress E-commerce Website

Hit the publish button on your WordPress dashboard

Step 28: Share this Post!

Congratulations on completing this step by step tutorial!!

Please make sure to COMMENT AND Like our FB Page! Also, we will publish more WordPress Tutorial for You!