How to Make an eCommerce Website with WordPress (Storefront Theme) - 2020

I am going to show you how to make an eCommerce website step-by-step using the Storefront WordPress Theme. In the time it takes you to watch this 2 hour tutorial, you will be an expert, and there is nothing technical involved. I know people who have paid up to about $10,000 for this kind of thing, but you will be able to create it all by yourself by following this tutorial. You will be able to do everything from setting up your eCommerce website design, adding your products and importantly accepting payments. I am doing this because I have had plenty of requests to demonstrate how to make an eCommerce website using an eCommerce store management system called WooCommerce, and a design called Storefront. You may have heard of these before. The great thing about this is that you do not need to know anything technical to set all of this up. This tutorial has been created with the beginner in mind. So here is a quick demo of what I will set up during this tutorial. As you can see, it looks modern and professional. You would normally pay up to about $10,000 for a web developer to produce this. I will show you everything from creating this image slider you see here, adding product categories, sell products to your home page. By the way, all of this is flexible. You can choose what you want to show or not show. Here is what a product page will look like. I will teach you how to add product variations. For example, your customers can choose color, size, etcetera, etcetera. You can put in your product information. The customer will eventually add your products to Cart. They will view their shopping cart. Here is what the shopping cart page looks like. They will be able to choose their shipping. You will be able to configure the shipping methods available to your customers. They will proceed to the check out. This is where they can sign in if they are an existing customer, or they can sign up for a new account on your eCommerce store. They will then check out via credit card or PayPal. Both you and your customers will receive confirmation e-mails. To do all of this, I will be using WordPress to manage content. Here are some notable WordPress users. You have got people like CNN, New York Times, eBay, Sony, Samsung. Now, all of these companies use WordPress to manage some part of their business, and the reason is it is a free platform, and it is extremely easy to use. So if you have any questions during this tutorial, please do ask in the comments below. And don’t forget, give it a thumbs up and subscribe for updates. Let’s begin. Here is our To-Do list. The first thing we will get our dot com domain and hosting. It takes about 10 minutes. Then, we will install the website store design – about 5 minutes, and then I will take you through step-by-step the full eCommerce set up that you will need to add products, accept payments and do everything else that other eCommerce sites can do and more. So to give you a little bit more information, we will be getting a domain. You can select your own and you will have full ownership of that domain, and webhosting – a server where all of the website files are stored. So everything from the text to images to every other file that makes up your website, and you need a webhosting service for that. These are the only two essentials that cost money, and I will show you where you can easily acquire them in about 10 minutes. And then once we get you online, number 3 and 4, we will start setting up your store. So I will show you how to install the store design, and I will show you how to step-by-step go through the full eComm set up. And look, both of these can cost between $6,000 to $10,000 initially for the store design, and then ongoing payments for eCommerce management. But, you won’t need to do that because I will be teaching you how to use WordPress and the WooCommerce platform to manage everything yourself. Feel free to go out and get quotes from web developers, and you will be astonished to how much this stuff costs, but I will be showing you how to get this professional setup for literally nothing. So the first thing, let’s get you online. Let’s set the base, build a foundation before we can start setting up your store. And the best place to do that is hostgator.com. For acquiring your domain and hosting I would like to introduce to you a company called HostGator. I have been using HostGator for nearly 10 years myself for all of my eCommerce stores and other websites. You will see that they have won plenty of awards. If you scroll down, you will see all their awards. You will see that they have excellent phone support, and money-back guarantee and excellent availability. I have been using them for about 10 years. If you want to use another web host of your choosing, you are absolutely welcome to do so. Just keep in mind that the rest of the steps in this tutorial may not work exactly like I demonstrate them to you because I will be demonstrating this tutorial using my HostGator account. So if you want to follow along with me exactly in the same steps, I do recommend HostGator. So the first thing you will notice is that there are two different types of hosting – Web Hosting and WordPress Hosting. Now although we are building a WordPress site, it does not mean that you need WordPress hosting. All you need is basic web hosting. Now WordPress hosting is more expensive, and you can read about that in your own time if you want to, but personally I just use the ordinary web hosting and I set up my WordPress sites using normal web hosting. So click on that. Also the normal web hosting is a lot cheaper than the WordPress hosting, and to be honest It is more than enough to run your eCommerce website. So go down. You will see three different plans. The Business Plan has stuff you don’t need, so ignore that. The Baby Plan is very similar to the Hatchling in the way that all the features are very similar except the Baby Plan allows you to host more than one domain, whereas the Hatchling Plan only allows you to host one single domain. That means one single eCommerce website. Now I assume this is the first eCommerce site for most of you, so I would recommend the Hatchling Plan, which is also the cheapest. Down the track if you do have other websites, you can always upgrade to the Baby Plan, so that is not a problem. So just click on the Sign-up button. Next you will need to either register a new domain if you haven’t already got one, or click this tab here if you already own a domain elsewhere, and then enter it in this field here. Now for most of you, you will need to register a new domain. So for the purposes of this tutorial, I will register a domain called myecommstore. Now a dot com is my personal preference. You can choose a dot net, org, dot info. It does not make any difference when it comes to setting up your WordPress website. It is just a personal preference of mine to select dot com. So I will be doing that. Now make sure that you have selected the domain that you want to register. You can choose a billing cycle. You will notice that the longer you subscribe for upfront, the cheaper it will be. Now it says 20% off here, but I’ll show you in a second how to get a much bigger discount than this 20% off. So I generally subscribe for 12 months or two years at a time. So let’s select 24 months. It’s completely up to you. Enter a username, and a security PIN. Now let’s just skip over the billing info for a second. Go to Additional Services. I want you to uncheck or deselect anything in this area here because, to be honest, it’s not absolutely necessary, and I don’t use any of these myself. So if any of these are enabled, they are extra expenses, but you don’t need them. So feel free to deselect them. Now going down, the Coupon Code. Like I said, I can get you a better discount than the ordinary 20% off. Have a look at your amount due, and enter this Coupon Code instead - ONLINESTORE. Don’t forget to click validate, and you will notice that the discount is a bigger discount, and the amount due is lower now. This coupon will always give you a bigger discount than the standard HostGator coupon, so please do take advantage of that. Next, go back up and fill in your personal billing details. Of course, I will be blurring my screen here because I don’t want to disclose any of my personal billing details. And you have got two options to pay – credit card or PayPal. When you have done that, scroll down. Just double check that all of your details are correct, and then click on this “I have read and agree to the terms and conditions” checkbox. When you are ready, click Checkout, and you will have secured your domain and hosting and that is the only expense that you will have throughout this tutorial to set up your eCommerce website. Just so you know, I may receive small referral credits from HostGator and this helps me bring these videos to you free of charge because it helps me cover my costs. So thanks in advance for supporting me. Click “Checkout” and I will show you the next step to set up your eCommerce website. The next thing you will receive is a confirmation in e-mail from HostGator containing details of your order. It will have your domain, which you now own. You are now the sole owner of this domain name, and it will contain details such as your Control Panel link, Username and Password. And, I will show you what to do with that now. So locate your control panel link, click on that, and in the next step enter in your username and password. So I will just copy and paste into that section there, and then log in. This area here is known as your Hosting Control Panel. So the next thing we need to do is install the WordPress platform. The WordPress platform is what we will use to manage the content on our website. So go down, and locate the link called Quick Install. Click on that, then in the left hand side column, let’s click on WordPress. Continue. Your domain should automatically populate in this box here. If it doesn’t, then just select it from the drop down below. Leave this box empty. I’d like you to disable the Auto Upgrades, and in Admin E-mail, enter your own personal e-mail address that you check regularly. Leave Blog Title empty for now. As Admin user … for Admin user, just enter admin. You can leave first and last name empty, and then click install now, and this will install the WordPress platform onto your server. And that is done. WordPress is now installed. There are some important pieces of information just over here. Firstly, this URL. You’ll notice it will be yourdomain/wp-admin, and that is the URL you will have to access to enter the administration area for managing your website. So anytime you want to manage your website, go to that URL there. So open that in a new tab, if you can. Just keep in mind that sometimes this does take around 15 to 20 minutes to activate after you install WordPress. So if this loads a blank page, just come back in about 15 or 20 minutes and try again. Eventually this is the screen you will see. It is the WordPress Administration log in, and we can use the password and username provided here. This password is really long, and we won’t be able to remember that. So the first thing we will do when we log in is change that password. Cool. So this is your WordPress Admin Dashboard. This is the back end where you will control your entire eCommerce website. So I will show you during the length of this tutorial how to use all the different things here to set up your online store. First thing though, let’s change our log in password. If you hover over an area called Users, and just click on All Users, then click on Admin. That is the user we just set up when we installed WordPress. You can change any details that you want, but what we want to do now is enter a new password in this field. So enter your new password, and then come down and click Update profile. Cool. So if I just log out now … to summarize, I would like you to write down three important pieces of information. One is URL – yourwebsite.com/wp-admin; your username, which is probably admin if you followed what I did; and your new password. Write that down somewhere, and keep it handy because anytime you want to make changes to your online store, you will have to come down to this page and enter your username and password. Then, you will be able to log in and manage your website. It is pretty cool because your website is already up and running. Your domain works, and it is fully functional. Now we will get on to installing our eCommerce design, and also the eCommerce platform that we will be using to manage all of our products, pricing and all the fun stuff. Now let’s install the awesome eCommerce store design that I demonstrated to you at the beginning of the video. So I want you to open up a new browser, and go to a website called woothemes.com. Just sign up for a free account with Woo Themes. I’ve already got one, so I will log in. After you have done that, go to Themes and just select All Themes. Then go down, and select Free. We will be installing a spectacular eCommerce theme otherwise known as a design, which does not cost you anything. So if you go down, you will see a design called Storefront, so click on that one. That is the one we are going to be using. You can view a demo if you want, and read some more information about this particular design, how many times it’s been downloaded so far, and some of its features, etcetera, etcetera. Then, I want you to download Storefront, and save it onto your computer somewhere you can easily access, ideally the desktop. Then, click Save. Once that is done downloading, you can close that window now. We don’t need this anymore. We have downloaded the theme file to our computer. Now back in your WordPress Administration Dashboard, hover over the Appearance tab, and then click on the Themes link. We want to be adding a new theme to our site, so click on this Add New link, and then click the browse button. It should open up your computer browser. So then go to wherever you saved that file, and look for the Storefront theme. It is a zip file, and click the Open button, and then click Install Now. This could take a few minutes, so be patient. Cool. Once that is done, all you need to do is click on the Activate link, and it will activate this design for your website. So let’s have a look at what the site looks like now. Cool. So we are one step closer. We will be setting this up a little bit later. For now, that is all you need to do to install your new design. If you want to read about this particular design, just click on the Get Started with Storefront link, and it will take you through to this page where it will give you some information. It tells you that the best way to use Storefront is to install WooCommerce, and that is actually what we are going to be doing in the next step. WooCommerce will be your eCommerce platform. I will tell you a bit about that later, and then other items such as configuring menus, creating a color scheme, adding logos, etcetera, etcetera. So you can read a little bit about that if you like. But for now, that is all we need to do. Now the next thing we need to do is install what is known as WooCommerce. WooCommerce is going to be our eCommerce platform. So we will need this to control everything from adding products, setting prices managing shipping, creating coupons and everything else that an e-commerce website needs to function. The way we will do this install a plugin so just find Plugins in you left hand-side navigation, and click on the Add New link. Essentially what a plug in is it is an Add On for your WordPress website. It is like an extension of the basic site. So now, we will be adding a plugin called WooCommerce, and it is this one we want here, WooCommerce excelling in eCommerce by Woo Themes. As it says here, WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. We want to install that, and then click the Activate Plugin link. And, there we go. WooCommerce is installed. Stay on this page here. If you hover over Products, you will now see that there are additional options available to you to set up your store, so you can add products etcetera, etcetera. You can manage all these items here, but anyway that’s what the WooCommerce plugin has done. It has now enabled our website to have eCommerce functionality, and I will get into that a little bit later. For now, if I just open all of my pages in a different screen, you will see that there is only one page there called the Sample page, which is the default. Here WooCommerce asks you to install WooCommerce Pages. So I would like you to click that button there. And if I just refresh this, you will see what that has done. You see it has added a page for our cart, for our checkout, for account and the shop page, and that has all been done automatically. So this is really, really good. We are making really good progress. If you have any questions along the way, please feel free to get in touch with me via the comments, and I will be more than happy to help you. So for now that is all. We have installed WordPress, and we have installed our eCommerce platform to manage our store. The next thing we will need to do is adjust some basic settings on our website, just basic general settings, so some housekeeping. Follow along with what I do here. If you go to Settings, and click on General, delete the site title and enter your store name. Delete the tagline, and go down and click on the Save button. Now you will notice that if you go to your website, the www does not show in front of it. So the way that you can make that appear is just go to this field here, and after the two slashes, just enter www, and the same thing in the following field. This is not an essential. It is just a personal preference of mine, and that step will actually prompt you to log back into your WordPress Dashboard. There you go. Okay. The third thing we need to do is if you go to Posts, and click on All Posts. You will notice that WordPress installs a default post called ‘Hello world!’ We want to delete that, so click the Trash button, then click on the Trash link and you can delete that permanently. And, the same thing happens when you go to Pages. You will notice you have all of your pages that WooCommerce set up, plus one called Sample page, and that is the one we want to delete. Cool. Now, we need to go into the Plugins area, and click on Installed Plugins. There are a few here that are installed by default, and we do not need. So I recommend deactivating and deleting them. Those ones are Jet Pack. So if that is activated on yours, just click the checkbox. The MOJO Marketplace, and the WP Cache. So then, go to this drop down, and click on Deactivate and Apply. Then once it is deactivated, tick them again, and this time we want to delete all of them. And, Yes. Cool. Now go and hover over WooCommerce, and click on the Settings link. In the General tab, there is an option to select your base location, so select whatever your base location is. You have an option here to determine which countries you want to sell to. So you can select to sell to all countries, or you can select to sell to just specific countries. And if you choose that option, you will have the choice of selecting from a drop down which countries you want to be able to sell to. For the purposes of this demo, I will keep it to sell to all countries. Then go down, keep these items as default, and select your base currency and currency position if that changes. Obviously, this will stay to the left because it is in US dollars, and I leave the rest as default. Then, click save changes when you are done. Next, go to the Emails tab. The From name, change that to your business name or your eCommerce site name, and change the From email address to your business email address if you need to. And, these are the details that will be used when an email is sent to your customers after they’ve completed an order, and therefore it is a good idea to have them updated. And also the email footer text, I will change that to the business name as well. You can change it to yours … to whatever you like. And for now, I will leave the rest of the details the same. You can definitely customize these if you want. You can upload a header image for your email. You can change the base color, background color, text color, etcetera, etcetera. So you can do that in your own time if you like. For now, I will save those two changes and that is it. That is all we need to do for some basic groundwork before we start setting up our products. Now if you visit your eComm store and go to one of the pages, you will notice that there is this sidebar here that looks pretty messy. So I will show you how you can edit that very, very quickly before we start getting into things. So if you go back into your Dashboard, and hover over Appearance, go to Widgets, this area here corresponds to your sidebar. So we have got Recent Comments, Archives, Categories, Meta, Posts, Comments, Archives, Categories, Meta. So all you need to do is click on that drop down, and hit delete. And if I refresh, you will notice that the sidebar is gone. It has all been deleted. And one really cool thing you can actually add there in its place is something called the WooCommerce Cart. So if I drag and drop that into the sidebar, I can name that, “Your Cart”. You can hide it if the cart is empty, and it is really, really cool. It’s something I like to do on my eCommerce stores. There it is there. So when we have our products set up, when I add a couple of products to my shopping cart, you will see them appear in the sidebar here, and I can check out directly. It is actually really, really cool. It is really user friendly. It is a streamlined process from adding products to going to the checkout, so you can potentially increase your conversion rates. That is why I like to keep this in here, and you will see how that functions a little bit later. The next thing I am going to show you is a very important step, and that is adding products to your eCommerce website. So let’s go and hover over the Products tab, and click Add Product. The first product type I am going to show you how to set up will be a simple product, so we will not have different variables such as size or, color etcetera, etcetera. It will just be a simple product. Then I will show you how to set up a variable product where a single product can come in a number of different options, so like I said it could be sizes, colors, etcetera, etcetera. Essentially, they would be different variables. But for now, let’s set up a simple product. For the first one, I will use an example of an outdoor table set. In this area here, you can put a long description of your product. So what I am going to do is just copy and paste some text I have in another screen as an example. So this is where your main product description will go. And in this visual editor, you can use all of these different features, click on this toolbar for more and you will get even more features. So perhaps, I will put in some bullet points, and a subheading as an example. Then if you scroll all the way to the bottom, you will see there is the area for a short description. So there just keep it short and simple, and you will see where that all goes later when I save this product. The next thing to do is attach this product to a new category. So say this falls under our Tables category, and Add New product category. It is now assigned to a category called Tables. Now into this product data area, you can enter a SKU if you have one. If you are a small business, you probably don’t have one. But if you have a bigger business, you might have this SKU for each product, so that is optional. Here you can enter a price, and you can enter a Sale price, which if you do that, it comes up at a nice Sale icon and shows you the discounted price. But I will show you that in a second. First, I will set up a full-priced product. In the Inventory tab, you can enable stock management if you like and define how many products you have in stock, and that is all for now. I will show you these other settings later for other items. But for now, that is all we need in here. Now in the Featured image section, your Featured image for this product will be the main image that is displayed. So when you click on that, it will allow you to upload files from your computer. Once you do that, they will appear in what is known as your media library. So let’s select the image. Depending on the size of the images, it might take a couple of minutes to upload. When that is done, click on the Set Featured Image link there, and then you can add more images in your product gallery, so that users can scroll through see additional images of this product. So once again if you have got those images already uploaded, it will appear in your media library. Otherwise, just upload files form your computer. You can even drag and drop like that if you want, or you can just select them all and click open. Then, click Add to Gallery. Okay. That is all you need to do for now. Let’s click Publish, and see what that looks like. There you go. You have set up your first product. It is laid out very, very nicely, very clearly. It has got your breadcrumbs over here, so it is easy for users to navigate. When you click on your main featured image, it will come out in a nice pop-up window, and users will be able to scroll through all the other images you uploaded for that product as well. They can select quantity. This is where the short description goes, and here is our long description. When the user Adds to Cart, they will then see the shopping cart in the right hand-side column, which is what we set up earlier. So as you can see, it is a really, really good user experience. Now let me just change this to a sale price, and you’ll see how that changes. So if I just refresh this page and then come down in here, let’s give it a sale price, and then update. So now when I refresh this, you will see that it gives it a nice Sale icon and shows the original and the discounted price. I think that’s pretty good. It looks really, really nice. So that’s how easy it is to set up simple products. Next, let’s set up a product where there are different variables. So I am going to use this as an example. I am going to set up a product for cushions, but they come in four different colors. So I will just enter my product name. I will assign it to a new category. I will put in my long description. Okay. So here is where the key difference is for a variable product. Just select variable product from the dropdown. Now you can give it a SKU if you want. You can assign inventory if you want. Then, I want you to go down to Attributes. We want to add a new attribute, and the name of this attribute for us will be Color because I have four different colors, and then ensure that the Visible on the Product Page checkbox is ticked, and so is Used for Variations. Now in this area, we need to enter the different variations separated by this pipe symbol, and I will show you what I mean. So we have black, space, pipe, space, orange. There we go. That pipe symbol actually for me it’s on my keyboard under the backspace. So if I hit shift and hit that key, I will get that pipe symbol. It is just a vertical line. Once you do that, click on Save Attributes. Now go to the Variations tab. We want to link all variations. Now in this example, we only have four different variations. So what this will do is create four separate variations. There we go – Four variations added. Now here is the interesting part. You can assign a SKU for each variation. You can enter a different price for each different variation. So say black is 55, In Stock. You can upload an image, set variation image, and now here is a really cool part. For the next variation, you can actually upload a different image. And when a user clicks on that particular option, the image that they see will automatically change, and I will show you that in a second. Okay. Now let’s say as an example, let’s leave black and orange at 55, but let’s give red a sale price and teal as well. Just to see it as an example. And like I said, you can manage stock for each different variation as well. If you just click on that check box, you will see that you can adjust the stock quantity. Okay. Now the next thing you need to do is set a featured image. So because we already have these uploaded to my media library, we can select one of them as a featured image, and then we can enter more images. Just hold down Ctrl, and select as many images as you want, and click Add to Gallery. And, they can be your other product gallery images. Once you do that, click Publish, and let’s take a look. So here are our Scatter Cushions. The price ranges from 45 to 55, and you can see we have an area here for selecting our option. So if I choose black, guess what happens? That image changes to black because that is the image that we uploaded for black here. Similarly, if I choose teal, it changes to that corresponding color. There you go. It is really, really cool, isn’t it? And, really easy to set up, and there we go. In the Additional Information, we have a little bit of a description. It comes in four different colors, and for your piece of mind, it also has the stock quantity over here. So if anything is out of stock, it will not allow the user to add that particular variation to their shopping cart. And depending on which variation you choose, the price also changes because we made black and orange 55, and red and teal 45. So that is a really easy way to set up products that have different variations to them. Now I am going to show you one more product that have variables to them, but this time they will have two variables. They will have color. So take these cubes for example. They come in black, and they come in white and also size. They come in six cubes, and they come in nine cubes. So let’s use that to set up our different variations – color and size. So I will just Add Product, just quickly enter some dummy text in there. Okay. Let’s assign a new category for this called Storage, and now in this area of course we will select a variable product, and in Attributes let’s add a new attribute. First one will be Color. Check Used for Variations, and it simply comes in two colors – white or black. Let’s Save, and add one more. This one will be Size. Okay. So the different values here will be a Six cube and a Nine cube. Okay. I will Save that. Just ensure both checkboxes are ticked. And now in the Variations section, let’s click Link All Variations. Now we should have a total of four because we have a white in a six cube and nine cube, and a black in a six and a nine cube, so that equals four variations. So, yes. All four have been added, and you can see them here. There we go. There is a white six, black six, white nine and black nine. Perfect. So what we can do now is the same as before. Let’s start adding the information for each particular variable. Let’s say the white ones are $95, and the black ones; let’s say that is $95 as well, and let’s say the nine cube ones are $145. Okay. I will come to all these other settings a little bit later. So don’t worry about shipping class. We will come to that a little later. Cool. For now, that is fine. Next, let’s select a featured image, and then let’s select some additional product images. Actually, I might upload some different images. I will deselect that one and that one. Perfect. Okay. Let’s publish that. There we go. We have our storage cube set up. They range depending on what option the customer chooses. They can choose their color, and they can choose their size. So depending on the variation they choose, the associated image will pop up, which is absolutely perfect. And, they can obviously view the image gallery. Cool. That is sensational. So there you go. That is how to set up products with different variations. And one thing you’ll notice is actually, I will show you one more trick I use. If I refresh that page, you will see that there is no color or size selected by default. If you just go back in here, click on the Variations tab, and in this defaults area, choose what you want to display as a default. So let’s say by default when the customer lands, it will show white six cube. Now when I refresh that, there you go. Automatically, white six cube is automatically selected. So there you go. Please do ask me any questions in the comments below if you have any trouble setting this up, and I will be more than happy to help. Now it is time show you something equally as important, and that is accepting payments through your online shop. I highly recommend you use PayPal. I am sure you have seen PayPal just about everywhere – from Amazon to eBay and all the big stores use PayPal. They all accept PayPal as a payment gateway. So for you to do the same, for you to accept PayPal as a payment gateway, all you need to do is sign up for a free account. I will let you do that in your own time. Once you sign up for PayPal, just go down to WooCommerce, and go into the Settings area. Then click on Checkout. Okay. So firstly, lets leave the Coupons checkbox enabled. I will show you how to apply coupons a bit later in this tutorial. It is actually really cool, so leave that enabled. Leave Guest Checkout enabled. I highly recommend you do that. Basically, guest check out means that customers do not have to sign up for an account on your eCommerce website. They can come along, add products to cart, and then check out and pay as a guest. They do not have to log in, and create an account to do that, so at the end of the day I think that increases conversion rates. So I highly recommend you leave guest checkout enabled. Then go down, and at the bottom you will see that there are three payment methods enabled – direct bank transfer, check payment and PayPal. We only want to accept PayPal. The PayPal gateway is able to accept credit card payments from people who do not actually have a PayPal account. So that is another advantage. So anyway, what we want to do is deactivate the direct bank transfer and the check payment. So you can click on Settings here, or you can go to the tabs at the top, and we want to disable that and the same for Check. We want to disable that one as well. Now just go back into the checkout options, and make sure that PayPal is the only payment method that is enabled, and then let’s click on Settings. Let’s set that up. Okay. Let’s leave all that stuff as it is. The important step here is your PayPal email address. So when you sign up for a PayPal Account, you will be signing up using your own email address, and that will become your PayPal email address. Mine is this one here. So enter your PayPal email address in this field here. That is a very, very important step. You will receive money in the PayPal account that is associated with this email. Leave everything else as default, then save changes. And believe it or not, that is all we need to do. There is nothing else to do to be able to receive payments through PayPal. You are now set up to accept payments into your PayPal account, and when that happens, you can then withdraw that money into your own personal bank account. It is very, very simple. Let me demonstrate this to you with a real live transaction. I am actually going to put in a real order now, and you will see the money flow into my PayPal account. So I am going to log out of WordPress. So let’s pretend now that I am the customer. Let’s say I want to buy a cushion and maybe a storage cube as well. Okay. So now I can view the cart. I can proceed. Don’t worry about shipping. We will go through that a little bit later, and I can now enter the details. The customer would put in their own email address, and here they have the option of creating an account. Of course, we have enabled the guest checkout, so the customer does not have to do that. They can put in some order notes, and they can also ship to a different address if it doesn’t match their billing address. Okay. So essentially, your customer will see this. They’ll see the summary of their order, and they will have this button here, Proceed to PayPal. Okay. They will be taken to this page here. If they have a PayPal account, they will enter their PayPal details. Otherwise, they will pay using a credit card or a debit card. So as you can see, it’s not essential that the customer has a PayPal account. They can use a credit card to complete their transaction. But since for the purposes of this demo, I do have a PayPal account that I can use as a customer. Let’s say this Hotmail account is the customer’s PayPal account. They’ll enter their email address and password, and then log into their own PayPal account to complete the payment, and Pay Now. There you go. This is what the customer will receive after completing their payment. They’ll receive their order confirmation details, a summary of what they have purchased, and just a confirmation of where they will receive their order. So this is everything a customer will see. Now let me log into my business email account, and show you what you will receive. Give me one second here. I’m just loading it up on another screen. There you go. You will see that you’ll receive a couple of different emails. One of them is the order email, which will be sent to you containing the details of the order. So it’s now your job to get those items and ship it out to the customer, and also an email here from PayPal just notifying you that you have received a payment. Okay. So now let me log into my business account. The one for which I entered my PayPal details in my online store, so that I could receive payments from customers. Here it is. If I just log in … there we go. There is the completed order. $140 received into my PayPal account minus any PayPal fees, which are approximately 2 to 3%. The beauty of this is that you do not need to use another payment gateway. All the payments happen via PayPal, therefore it is very, very secure, and very fast to setup, and very reliable. So what you can do now is withdraw that money directly into your bank account. If you have any other questions around PayPal, it would be best to contact them directly. But if you have any questions around setting up PayPal for your eCommerce store, definitely just let me know and I’ll be happy to help you out. There you go. There is a live transaction. There is proof that what we just did allows a customer to purchase your products and the money to be directly deposited into your PayPal account. Okay. So I decided to add a few more products to fill out the store a little more. But next, what I’ll be showing you is how to adjust the sidebar area, or how to customize this sidebar area, I should say, and add more items. And also, how to make some pages full width. So if you see this Cart page here, there’s a big blank space. And I don’t like that. I’m going to make this page full width, so it goes all the way across. So first, I’ll start with that. So if I go to Pages, and then select the Pages I want to make full width. So I definitely want to make this Cart page full width. In the Template dropdown, the default template means that it is a template with the sidebar. So instead of that, I’ll select full width, and then click Update. There you go. That looks much, much nicer. And also, I will probably … yes, I’ll make this Checkout page full width as well. Right now, it looks very squashed up, and very narrow, and there’s a lot of wasted space. So I will go into the Checkout page, and the same as before, select the full width template. Perfect. That is much, much better. Okay. Next, I will add things to this sidebar. So for whatever pages the sidebar is showing, the sidebar can be customized. So if you go to Appearance, and then go to Widgets, you will see here I already have my WooCommerce cart, and that is this here whenever I add a product. So say for example, I add this to cart, my cart will display here. I can also add other things. So if you go down, you will see there are some options here. We can have a price filter. We can add a product category filter. So I’ll add that for now, Product Categories. What else? We can actually add reviews down the track if there are some reviews, and we can also add top-rated products, various different things. So let me just save that for now. It actually saves automatically, and refresh that. There we go. There we can see our product categories. So it makes it much easier for users to come to your site and navigate. The user can select a particular category, and go to products that are assigned to that category. You may want to add things in the sidebar that are custom. To have that flexibility, I would like you to install a plugin called TinyMCE. So if you go to Plugins, and click Add New, search for a plugin called, TinyMCE, just as one word. This is the one you’re looking for, Black Studio TinyMCE Widget. Let’s install that one, and activate. Okay. Now if I go back into Appearance, and Widgets, the same area we were in before, you will notice there is a new item called, Visual Editor. So if I drag and drop that in, you will see that I get this Visual Text Editor to enter anything I want. So I can bold, italic. I can bullet point things. I can add images. I can also enter some code in the text tab if I need to. Keep in mind the text tab is for adding code, and the visual tab is for adding just normal text. You can align left, right, anything you can do with Microsoft Word, you can do in this editor over here. So, it makes it really, really handy for you if you want to add anything custom into your sidebar. Say for example, you wanted to add a Google Map. I will show you that later, but you can also add that via the text tab by copying and pasting the Google Map code in this section here. But I’ll show you that a little bit later. Anyway, this TinyMCE Visual Editor is a good tool if you want to add anything that is custom. As soon as you save that, that will appear in the sidebar. So go ahead and customize the sidebar in any way you want. Definitely, use some trial and error, muck around, and see what suits your eCommerce store the best. And I’ll show you how to setup a beautiful looking dropdown menu. So what you need to do is back into your WordPress Admin Dashboard, hover over Appearance, and click on Menus. Okay. In here, just enter a Menu Name. So let’s say Top Navigation, and let’s Create Menu. Then, any pages that are already setup, we can check, and then click the Add to Menu button, and they’ll be added. Also, assign this as the Primary Menu, and then click Save Menu. Okay. I’ll go step-by-step, so you’ll know exactly what we’re doing. So when I refresh that, now our page – my account, checkout, cart, shop – corresponds to this menu. We’re missing one thing. We’re missing Home. So if you go to Links, you can enter any URL you want. So here, I will copy and paste the Homepage, and just call it Home. Now if you want to rearrange the menu, all you need to do is drag and drop like that, and then Save. And, the menu will be rearranged accordingly. So as you can see, it’s really, really easy to do. Now for the cool part, I’m going to show you how to setup a dropdown menu. I’ll give you a quick example here before I do it properly. So say I drag and drop things, so that they are indented like that. You’ll see it creates a dropdown menu with two tiers because I have set things up because for this design, when you use this setting over here, anything you drag and indent under another item is considered a sub-item and will appear as a dropdown. So let me just put that back to normal. What I’m actually going to do is recommend to you the best way to setup your menu, and that is we have a number of product categories here. So we’re not really doing much with that right now. What we should be doing is having a menu item called, Products, and then when the user hovers over the Products menu item, all the product categories will appear. Therefore, customers will be able to navigate and go to any category they want. So let me show you now how to set that up. If you go to … hover over Products, click on the Categories link, I’ll actually open that in a new tab. Okay. You see, there will be categories that you have created initially, and as you go along, you’ll have more and more categories and you can keep adding them to your menu. So the way you can do that is if you go to … say for example, one of your categories, and click View, I will open that in a new tab as well. All I need from here is this URL. I will copy this URL. So this particular URL corresponds to the one for Accessories. Okay. So now if I got back to this menu setting, go to this links, let’s paste that URL in this field here, and let’s call it Accessories. Add to Menu. Okay. Let’s do that for all of our categories. There you go. We’ve added all the custom links to all of the categories on our eCommerce site. So if I save that and then refresh my site, you’ll see they are all added to the menu, but not yet as a dropdown. So now all you need to do is create a new one called … add any URL you want in here for now, and call it, Products. That will add it to the menu. So now drag and drop that somewhere. Click on the dropdown, and delete the URL. Okay. So now that should save an item called, Products, but will not link off anywhere. There you go. Now, get all the items that you want to include as a sub-item under Products, so all of your different categories, and simply indent them like I’m doing here. That is absolutely perfect. You’ll see now that all the categories appear under the dropdown, Products. So it’s really easy for your customers to navigate. If you want to rearrange the order in which these appear, once again, it’s as easy as dragging and dropping. After you save, it will immediately take effect. Perfect. So it’s easy as that to setup a custom dropdown menu to improve the user experience on your online store. So that customers can navigate and easily find their way around your store and be able to locate products very easily. Let me know if you have any questions about that. All right. Let’s go ahead now and setup a Contact Us page. We’ll put that page in the menu as well. So if you want to setup any pages that haven’t already been setup, all you need to do is go to Pages, and click Add New. Give it a title, and here you can enter anything you want. Keep in mind that the Visual tab is best for entering text because you can do all kinds of things with this Visual Editor. You can edit the text using any of these tools here like you would with an application like Microsoft Word. However, if you want to enter any code, you have to do that through the Text tab. I will show you how to do that because on this page, let’s enter some Contact information and let’s also import a Google Map. So what I’ll do for now, I’ll just copy and paste some other data that I have in another screen. Okay. Maybe you can put an email address as well. That’s what the page currently looks like. I want to remove the sidebar, so what I’ll do is make that a full width template. Cool. Okay. So the next thing I will do is add a Google Map, and so what you need to do to add a Google Map is just go to Google. Enter your exact business address in here. Obviously, I will use something as an example. Okay. After you have entered your exact business address in this field here, click on this icon here, and then it will give you the option to embed or share a map. Click on embed map, and select a custom size. Now you can use a bit of trial and error to get the right size. So let’s say for now, 800 by 400. Just copy this entire code that Google gives you, and go back into your Content Editor. Now if you paste that here in the Visual tab, it won’t work and I’ll show you. See, it just comes up as gibberish text. What you need to do is make your way to the Text tab and enter your code in there like so. Now if you go into the Visual tab, you’ll see there’s a placeholder for the map, and the code exists in the Text tab. So click Update. There you go. You’ve got your business location in a dynamic Google Map. So if you have a storefront or maybe you have a few storefronts, you can actually list them one-by-one and enter all their locations. If you want to change the size of this map, so say we want it to be a bit larger or wider, I should say, we can go back here. Let’s say give it 1200 by 450 or 500. Enter this new code into this field here. See, that’s way too wide. So just use a bit of trial and error until you get the right size. The correct size for this particular design, I believe, is 980 pixels wide. So if I go and put 980 in there, and then copy the updated code here, yes. That’s good. That’s perfect. So it’s as easy as that to enter some details into your Contact Us page. Now, the next thing we want to do is add Contact Us into our navigation. So all we need to do is copy that URL, go to Appearance, and Menus, and in the links, let’s input a custom link for Contact Us. You can rearrange that if you want, but let’s leave it at the end for now. There you go. There is your Contact Us page appearing in the navigation. Any questions, let me know and I’ll be happy to help. Now I’ll show you how you can add an awesome looking image gallery to your store. To do that, let’s setup a new page. I will add a new page called, Image Gallery. This will be an independent image gallery, nothing to do with your products. Select the full width template, and then click the Add Media button. Click on Create Gallery, and upload files. Here you can upload files that you want to make up your gallery with. So as an example, I’ve got some random images here. Obviously, you would have a gallery that has something to do with your store. I’m just going to use this as an example, so I’ll select these images. You’ll see they’ll upload on after the other. All right. That’s great. Now click on the Create New Gallery button, then select Link To Media File. Then, click on Insert Gallery. Okay. Now when I click Update, you should be able to view that page. However, when I click on an image, you see it takes us off the page and onto this other page that shows us the image. That doesn’t look very nice. So what I’m going to do is install another plugin, so that when I click on one of the images in this gallery, it comes up in a nice pop-up effect and a user or customer can scroll through each one of the pictures in that gallery. So let me show you how to do that. Let’s go to Plugins, and Add New. Search for a plugin called, Simple Lightbox. It’s this one here. Install now, and don’t forget to activate. That’s all you need to do. So if I refresh this page, and click on one of the images, you will see now that it doesn’t kick us off the site. It actually comes up … there you go. Pops up in a nice lightbox feature. Now I can scroll through every one of the images in that gallery. The cool thing is you can make as many galleries as you want. You only need to install that plugin once. Once you install, you don’t need to install anything else. So if you want to edit this particular gallery, just go back to that page, in the Visual tab, if you just click here, you will see a pencil icon, and you will be able to remove or add more images to this gallery. You can also reorder by just dragging and dropping. Very, very simple. If you want to create a new gallery, simply just start up a new page, and add media, create gallery, upload files, and use the same process I told you earlier except you will not have to install the plugin again. You can install as many galleries as you want on your eCommerce site. So there you go. Make use of that feature. It’s a really, really cool tool to have. It gives a nice touch to your website. Now I’ll show you how you can add social media sharing to your product pages, and take this site for example, Country Road. You’ll see here there is a share area where people can share on social media this particular product. It’s something that big brands such as Country Road here would pay thousands of dollars to implement, but I’ll show you how you can do that on your own eCommerce product pages in as little as 5 minutes. So if I go back into the Dashboard of WordPress, we want to install a new plugin. So go to Plugins, and Add New. The plugin that you’ll need to install for this … just search for something called, WooCommerce Social Media Share. So just search for that, and it should come up here. That’s this one here by Toasty Solutions, WooCommerce Social Media Share Buttons. That’s the right one. So install that, and then activate the plugin when the screen comes up. Yes. Now you’ll notice in the left hand side, there’ll be a Share Buttons area where you can click on and configure a few things. Now personal preference, I like to leave Facebook, Twitter. Remove Google Plus. I like to leave Pinterest, and remove everything else and leave email. So these are the four that I like to use for social media sharing on my eComm site product pages. It’s completely up to you which ones you want to use. You can also display them as just the button, a button with a counter, or a box with a counter. So it’s up to you how you want to display them. I personally like just the button. It’s a little bit cleaner, less messy, but it’s completely up to you. When you’re done, Save Settings, and that’s it. So now if I just go to one of the products on my eCommerce website … okay, and there you go. There is our social area. Anyone can come up and press, for example, the Facebook share button, they will be able to share this particular product on Facebook or Tweet about it, Pin it, or email somebody else. So that’s an easy way to implement social media sharing onto your eCommerce store. Okay, guys. Now I’ll show you how to add or insert your logo onto your eCommerce store just in this area here. So going back into the WordPress Dashboard, we’ll actually have to install a new plugin again for this part too. This plugin is called, Storefront Site Logo. So if you just search for that plugin, you should be able to see this one here by WooAssist, the Storefront Site Logo. Install that plugin, and then activate as usual. Okay. Now what you need to do is hover over Appearance, and click on the Customize link. Now just for your information, here in this section, you can customize quite a few things on this site. For example, the header area colors. So you can customize the background color of this area here, the color of these links here, etcetera, etcetera. So if you click on Header, actually, no. If you go and click on Branding, now this Branding area has appeared as a result of installing that Storefront Site Logo plugin. So this area should appear, the Branding area, just click on Logo image. Now go onto Select Image, Upload files. Now just upload the logo from your computer. Okay. My logo is just over here. So obviously you would need to have your logo ready before this. I’ll show you a good place to get a logo made in just a second if you don’t already have one. So obviously once your logo is uploaded, click on Choose Image. Then, your logo will be set, then Save, and Publish. Now if I just refresh this site. There we go. Our new logo is appearing on our store. Now if you don’t already have a logo, I’ll show you a good place to get a logo made. Try something called fiverr.com. It’s a market place … it’s a market place full of offerings from different merchants, and most of them cost about $5. So let’s search Logo Creation. You will be able to find a number of providers offering to make you a logo, a custom-made logo for $5. So go and browse through the various providers. Maybe look at their ratings like you see over here, and when you’re happy with one, you can make an order and give them your details. I’ve used this site … I’ve used providers on this site quite a few times to get different pieces of design work made including logos. So sometimes it can be trial and error. You may not be happy with the first provider, but for $5, you really, really can’t go wrong. So there you go. Let me know if you have any questions about that. Okay. Now for the fun part. We’re going to be setting up the homepage of our eCommerce website. As you can see right now, our homepage is blank and has nothing on it. So I will setup the homepage in a couple of different stages. So just follow along with what I do, and everything will make sense. The first thing I’d like you to do back into your WordPress Dashboard is go to Pages, and Add New. Add a new page called, Home. Click on Publish. Okay. So now we have a new page called, Home. Now go to Settings, and then the Reading tab. I need you to click this radio button here. We want the front page display to be a static page, and in the front page dropdown, go down and select the Home page, which we just created. So that’s basically telling WordPress, “Yes. Make this the homepage”, and then click Save Changes. Okay. So now if I refresh the site, you’ll see that there should be a page called, Home. There we go. Okay. That’s the first step done. Now what we need to do is install a plugin that lets us control what we want displayed on the homepage. So back into your WordPress Dashboard, go to Appearance … I mean go to Plugins, Add New. We want to add a new plugin. The plugin you need to install is called, Homepage Control. So just search for that, Homepage Control, and it’s this one here by WooThemes. Install that plugin, and then Activate. Okay. Now back into the Pages, we need to go back to the page we just created for Home. Click on that. We want to select, under template, we want to make that a full … sorry, a homepage template. So make this page the homepage template, and click on Update. Now this selection is available as a result of installing the homepage control plugin we just installed. Now that that’s done, go to Appearance, then Customize. As a result of installing that plugin, we now have an area called … here we go, Homepage Control. Now, WordPress or this plugin allows you to select what items you want displayed on the homepage. So this is what the homepage currently looks like. We’ve got product categories. Don’t worry about the images not showing. I’ll show you how to update that in a second. We’ve got recent products. We’ve got featured products, top-rated products, and on sale. Now, what I like to do is remove this homepage content area. So then, this home and the line over here will disappear. So let’s remove that. I like to leave product categories there because it’s easy for users to actually navigate when they land on the homepage. So I’ll leave that. I will also leave recent products. I will leave featured products. There’s currently nothing under there, but I’ll show you how to add featured products in a second. I will remove top-rated products, which is the popular products tab, and I’ll keep on sale. Okay. So this is generally what the homepage will look like. So let me save and publish for now, and refresh the site. So there you go. It’s starting to take form. Now, these product categories are missing images. I’ll show you how to easily update that. So now if I just close this … by the way, you can come back here and add or remove anything you want to, but for now, I’ll close that. So if I got to Products, and click on Categories, you will see that every category has a thumbnail image next to it. So if I click on Edit for one of the categories, I can over here upload an image. You can either upload from your computer or you can choose an existing image. So maybe I’ll take this one here, and Update. Okay. That should now appear. There we go. So you can start doing that for all of your other product categories if you want to show that section. What else? Okay, featured products. There are no featured product showing on the site at the moment. To show featured products, what you need to do is go into the Products section, now this star over here, these stars – they are for featured products. So if you select … so if you enable any of these, they will be considered featured products. So now, let’s go ahead and choose a few of them. Let’s say this floating shelf over here that can be featured, this chair over here, perhaps the storage cubes, and we’ll need one more. So let’s grab this laminated coffee table. Okay. Now let’s see what our eCommerce website homepage looks like now. There we go. We’ve got our featured products slotted into place. Good stuff. Okay. So feel free to play around with that. Feel free to add or remove any areas you like, and let me know if you have any questions about that so far in the comments below. One thing I forgot to add is that if you want to reorder any of these, so say for example you want the on sale to appear at the top, and you want product categories to appear under recent products, what you can do is you can actually drag and drop these tabs here. So if I drag and drop that up there, and I can make that product categories appear under recent products for example, or I want featured products to appear at the top as well. So you can completely customize the order in which these areas appear. Okay. Now that we’ve got the different segments of our homepage set up, I want to add a nice big image slider just after the menu area here. A nice full-width image slider, and there will be a little bit of coding involved, but don’t worry because I’ll show you exactly what you need to do. So if you go back into WordPress, go to Appearance, and Editor. Click on this link here, Theme Functions functions.php. You will see a bunch of code. Now click on the link in the description below that takes you through to my eMediaCoach website, the page on my website where I have information about this tutorial because I have put some … on my page, and I’ve got it here. So what you need to do is copy and paste that code. Okay. So copy, and then paste it just after all of the other code on that page in the themfunctions.php. So there we go. We’ve pasted that in. Now where those two Xs are over here, media slider Id. We’ll need to edit those in just a second. So for now, I’ll just click Update File. Okay. So now, what we need to do is install a media slider. So I’m going to go into Plugins, and I’m going to add a new plugin. Search for one called, Meta Slider. It’s this one here. Install that, and then Activate. Okay. Now you should see a Meta Slider area in this side column here. So click on that, and it will ask you to create your first image slideshow. So click on the plus icon. Let’s give this slideshow a name. Now click on the Add Slide button. Here what you can do is you can add image slides from images that are already in your media library, or you can upload new files from your computer. So for the purposes of this demonstration, I’ll just add some files from my media library. Now if you click on one image, hold down Control on your keyboard – of course, I’m using Windows here. So click on an image, hold down Control, and click on another image. You can multi-select. So let’s take those as an example. When you’re ready, click on Add to Slider. What this will do is it will add the images to your slider. If you want to reorder the order in which the images appear, just drag and drop like I’m doing here. Okay. Now on the right-hand side, change width to 1080. Our height, I recommend anything between 400 and 450. Okay. Advanced Settings, you can go through all of these settings in your own time. They’ve got different settings such as the transitions, the slide delay, and all of that stuff. The main thing you may want to change right away is the slide delay. You can see here, it’s in milliseconds. Actually, it’s in microseconds. So that is equal to 3 seconds. So if I just change that to 7,000, that will be 7 seconds in between each slide. So each slide will appear for 7 seconds, then transition to the next. Now you can have a look through the other settings if you want, but when you are ready, click Save. Now the next important thing is if you go all the way down, and you look under the shortcode area, you will see this tag over here. It’s called a shortcode. Meta Slider ID equals, and it gives you a number. So all you need to do is take that number, 117, in my case. So take that number, whatever you have in this area here, 117 for me. Now go back into editor, so under Appearance, Editor. Now go back into Theme Functions. Now where these two Xs are, delete those Xs, and enter that number, which is in your meta slider shortcode. Then, click on Update File. Now if you’ve done everything correctly, when I refresh this browser, I should see the full-width image slider appear. There it is. That looks absolutely fantastic. Now you’ll see after 7 seconds it will actually transition onto the next slide. There we go. So make sure the images that you use are high-quality images. As you can see this one’s a little bit blurry because the original image was not high quality. So therefore the original image that you use makes a big difference. But as you can see, that looks absolutely amazing. I’m really, really happy with that. Our homepage looks extremely professional and enticing. If you have any questions about the slider, please do let me know as well in the comments below. One more thing, if you ever want to delete a slide, you can always go back into your media slider, hover over the item you want to delete, and there’s a little delete icon in the top left. Just like that, you can delete a slide, or you can add new slides onto an existing slider. Now the third thing I’m going to do, and this is completely optional, I’m going to actually change the color scheme of the header area you see here. So as you can see, right now it’s a dark color scheme with white or light links. If you like that, that’s absolutely fine. That’s no issue. I actually like this as well, but what I’m going to actually show you is how to change the color scheme of this if you want to. So I’m going to change it to a lighter color scheme. Back into the dashboard, if you go to Appearance, and Customize, you will see an area called Header. So if you click on that, you’ll see that you’ve got some options over here – the background color, the text color, and the link color. So you can choose to implement any color you like. So if you click on this here, you can absolutely choose any color you want to match your theme, or your products, or your branding. It will look absolutely fantastic. So just have a much around with that if you like. Obviously, if you’re using a light background, use dark text, etcetera, etcetera. Okay. So in my case, maybe I’ll choose a very light background. So okay. I’ll choose a white background, and as a result, I will need to change my logo, which I’ll do in a second. Text color. Okay, and link color. We’ll make it the same. When you’re ready, save and publish. Obviously here, I need to change my logo because my logo was a very light color. Luckily, I’ve got a dark one ready to go. So this was before, and this is after – a much lighter color scheme. Now different people will have different preferences, so there’s no right or wrong answer. It’s completely dependent on you, what you like, and what suits your eCommerce website. Now I will demonstrate to you how you can setup the tax options on your eCommerce website. So just hover over WooCommerce and go to the settings area. Now click on the Tax tab, and this is the area we’ll need to configure. Now before I start, just keep in mind that I can’t tell you what you need to do, but I can show you how you can do it because tax obviously depends on the country or the state in which you live in. So just do some research on your local rules, and then come here to setup all of your tax options. Okay. So the first thing we need to do is check the checkbox up here, Enable Taxes and Tax Calculation. So that will enable this whole module here. Now in this area here, Prices entered with tax, click Yes if you want to enter final prices of your products that are inclusive of tax, or check No if you want to enter prices for your products without tax. For those products, tax will get added on automatically. I’ve noticed most eComm sites have prices inclusive of tax because they don’t want to give clients or customers any surprises when they get to the checkout. Now calculate tax based on … it is standard convention to have tax based on the shipping address because by doing that, tax will only be calculated based on where that person lives. Those tax rules will take effect. Now shipping tax class, you can apply one of the following tax classes. If unsure, just leave shipping tax class based on cart items. That is the smartest way of doing things. Here you can round tax at a subtotal level instead of per line. That results in a much cleaner checkout. So I choose to enable that. In tax classes, there are a couple of different types of tax classes there as default. You can choose to add any more tax classes if you like. Now display prices in the shop. I think it’s good convention to display prices inclusive of tax because again like I said, you don’t want your customers to be surprised when they get to checkout and they see that the prices increased due to tax. You want all the prices to be inclusive. Now since some eComm stores that do … that have prices inclusive of tax and some that exclude tax. So once again, there’s no right or wrong answer. It’s just what you think will work best, or maybe you can test each one of these two out and see what best works for your eCommerce store. Prices displayed during cart and checkout, I like to include during cart and checkout as well. Now the price display suffix, this will be the little note after the price. So for example, price inclusive of VAT. That’s just an example, or in Australia it would be inclusive of GST, etcetera, etcetera. Okay. Display tax totals, I like to keep them as a single total. Once again, it’s a little bit cleaner in the shopping cart rather than having the tax itemized at a per line level. Then, save changes when you’re done. Next, go up to the Standard Rates tab. Now that we’ve defined our settings, now we need to insert the actual tax rates. So if you go here to Insert Row, you’ll be able to enter a country code to which tax applies. You can enter a state code. Now if you do not enter a code for state, it will consider the tax applied to all states of this particular country. So if you leave any of these blank, that tax rate will apply to every single area in this country. You can see here, two-digit state code, for example, leave blank to apply to all. So say this tax only applies to California. The zip or postcode, once again, if you leave this blank, it will apply it for all zip codes in California, or you can specify certain zip codes save for city. Tax rate, enter any tax rate you want to apply. Tax name, call it whatever you need to call it. So I’ll give you a real example. Here in Australia, we have a countrywide tax. So I’ll leave everything else blank at 10% called GST, which is the goods and services tax. Now priority, if you have other taxes that you’re going to insert, you can set priority levels, so WooCommerce knows which tax rate to apply. Compound, you can choose whether or not it’s a compound rate. Compound tax rates are applied on top of all other taxes. Now again, this applies if you have added more rows or more taxes that apply. In my case, it doesn’t apply. Now shipping, do you want to add tax on top of the shipping as well, or do you want to tax the shipping? No. I’m pretty sure that the GST is exclusive of shipping. I’ll have to double check that though. When you’re ready, click save changes. Okay. Cool. Here you can see there’s additional tabs for reduced rates, reduced tax rates, zero tax rates, and the additional tax class rates, which remember I entered another tax class that was called additional tax class. So all of those options are there if you need them. I think most of you would stay in this tab here, and insert row and add taxes for any countries that you are selling in. If you have any questions about that, please do ask me in the comments below, or do some research on applying taxes in WooCommerce. Do a Google search, and you will get a ton of information. Once again, I could only show you how to do things, but I can’t tell you what to do because taxes differ in every single country. But if you do have any questions, please let me know. Okay. Now let’s discuss upsells and cross sells. I will show you how you can do this within WooCommerce itself. As an example, have a look at Amazon. If I go to this bedframe here, you will see that Amazon has a section here, Customers who bought this item also bought, and they have related products. This is an excellent example of cross selling. For our example, I will take this bedframe over here, and I will use the related products we have for the purposes of demonstrating how to upsell and cross sell products within your eCommerce website. Okay. To start with, what is upselling? For those of you who do not know, say for example, a customer has selected a bed frame, and you present the customer with the option to purchase a full-bed set. That means that the full-bed set will have a higher price, it has more products, and the key is that it will make you a bigger profit. So when should you upsell? The key here is to only suggest upsells when they will make you more money. Okay. Now let me show you how to setup upselling within WooCommerce. So say the base product is this queen bed frame. So if I just navigate to that product inside my WooCommerce Dashboard, here it is, the queen bed frame. So let’s say when somebody adds this queen bed frame to cart, I want them to be presented with the option of buying this full bed set, which includes absolutely everything – a mattress, bedside tables, etcetera, etcetera. It costs $2,500, whereas if they purchase our bed frame alone, it only costs $550. Okay. So to setup your upsell, go to the product that you want to setup the upsell for, then go to Linked Products. Now in this upsells area, just start entering the details or the name or the product that you want to upsell. And then, select the product from the list. So this is the one that I want to upsell to, the full-bed set. And then, I can click on the Update button. Okay. Now I’ll show you how that works. Say somebody comes across this bed frame. Okay. Cool. I’m interested, then I read a little bit about it. Okay, and then they’ll see this section here, you may also like. Then, they may think, “Hang on. I may as well purchase this full-bed set. Let me have a look at it.” They can click on that, read up on some details, and if they are tempted, they will end up adding this to cart rather than just the bed frame. So say for example, they add that to cart, and there you go. You’ve effectively upsold them onto a bigger product that makes you more money. Okay. So that’s how upselling works. Now cross selling, the subtle difference here, so say for example, say a customer selects the bed frame, under checkout, you offer the customer to also purchase a mattress and a headboard because they both go well with the bed frame that the customer has already added to cart. Like I showed you before, Amazon has a gray area called, customers who bought this item also bought. Now when should you implement this? The key here is that you should offer to cross sell products that complement each other. Now that’s very, very important. Why should you do that? Because you’ll get people purchasing things they didn’t originally come to the website for. Therefore, you sell more products per visitor, and that means you’ll make more revenue. So let me show you how to cross sell products in WooCommerce. So if I take the same example, the queen bed frame, so anyone who lands on the queen bed frame page, I want them to be presented with a cross sell. Okay. So same area as before - linked Products, cross sells, start entering the products, which you want to offer the cross sell for. So that’s one of them, the soft headboard, and there should be something in here for a mattress. There it is. Now I will update. Okay. Now going back to my store, let’s just go to the bedding area again. So say I’m a new visitor. I’ve landed on this page here, the queen bed frame. I’m considering purchasing this, and I’ve gone through all of this information, you may also like. Actually, no, I don’t want to purchase the full bed set. I do want to purchase this bed frame. So I’ll add that to cart. Eventually, they will view their shopping cart. Now when they land on this page, they will see Presented Options, you may also be interested in. Okay. So I’ve added this queen bed frame to cart, and now it’s giving me an offer to add a soft headboard and a queen mattress to cart. You know what, I do need a queen mattress to go with this bed. So maybe I’ll take a look at that. Eventually, the customer may end up adding one of your cross sells to cart like I just did. They may even add more than one. Okay. That looks good. I may add that to cart as well. So what’s happened here? Essentially, the customer has ended up purchasing things that they didn’t originally intend on purchasing when they came to your website. Now why do you think Amazon does this? Why do you think eBay does this? It is because customers end up paying more on every transaction. A lot of customers make purchases or decisions right on the spot when they don’t intend on purchasing something, but you tempt them with another product. They will get tempted, and they will end up purchasing. So I do urge you. Go in and setup your upselling and cross selling for anyone of your products that you see is a good option for doing that. Like I said, cross selling is great if products complement each other. Upselling is great if you can offer a product that is perhaps more luxurious, more expensive, and can make you more profit per sale. So please I do urge you to take a look at these settings. Finally, the grouping. Now, say for example, your products come in sets, so I’ll stick to the same examples. Say this bedroom set, say the bed frame, the mattress, the headboard, and the few side tables, they all come as a set. This full-bed set wasn’t available. What you can actually do is group items together. So similarly, you can just go in and search for your products, and you’ll be able to group them together. Okay. Now I’ll take you through setting up some of the shipping methods. So now back into your WordPress Dashboard, if you hover over WooCommerce and go to Settings, then to the Shipping tab. Okay. Firstly, just make sure these basic settings are configured the way you want. So shipping calculations, enable shipping, yes. Currently, the shipping calculator is enabled on the Cart page. I’ll show you what that is. Just over here, calculate shipping, but I like to remove that. Display shipping methods with radio buttons, yes. You will see what that does in a second, and shipping destination default to the billing address. That is the default. That’s common practice, so I will leave that as is. Now here in this dropdown, you can choose to ship to all the countries you sell to, or you can ship to specific countries only. So say I’d do that. I can choose to ship only to the United States. Alternatively, I can ship to all the countries I sell to. As a reminder, that setting is just in the General tab. So this is your base location, and this is your selling location. So you can ship to all of these countries. If you’ve got this configured, this will make more sense. So if you’ve got this configured to say for example, USA, UK, and Australia, then when you select ship to all countries you sell to, that will just be the countries you select in this area here. Once you’re happy with that, go down to the shipping methods. Now you will see that some shipping methods are enabled, and some are disabled. So at the moment, we have the flat rate shipping method enabled. The first thing you need to do if you want a flat shipping rate, just click on that, then click on this check box to enable or disable the flat rate shipping. Then, click Save changes. Now, you can change the title if you like. You can select availabilities, specific countries or all allowed countries, and you can make the shipping taxable or not taxable. Finally, enter a flat rate cost for your shipping. So say for example, it’s $10, and save changes. Now if I go back into my cart and refresh this page, you’ll see the changes that take effect. There we go. The flat rate is $10. That’s now available for your customers. Now going back into shipping options, you’ll see that there are other methods available. So free shipping, I will show you how to set that up in a few minutes. You could have a different flat rate for international delivery. You can have local delivery if you deliver to your customers. You can have local pickup if your customers are able to come to your store and pick up your products. Obviously, that’s another very popular one. So I’ll show you how to set that up quickly as well. So once again, let’s enable local pickup. You can change the title if you want. You can have allowed postcodes if you want. I would suggest leaving it open because it’s really up to your customers if they want to come and pick it up or not. Now method availability, all countries or specific countries. When you’re ready, click on save changes. Now if I refresh my cart, you should see two available – a flat rate or local pickup, which are our radio buttons to select shipping. That’s the setting that we selected over here, display shipping methods with radio buttons. Alternatively, you can have them as a dropdown, which would look something like this. So there you go. That’s how to setup your shipping options. Obviously, choose the options or shipping methods that make sense for your eCommerce store. If you have any questions about that, please feel free to ask me in the comments below. Now I’ll demonstrate to you how you can setup coupons on your eCommerce site, a great way to add promotional tactics to your eComm store actually. So back into WooCommerce, click on Coupons, and then click Add Coupon. Now give your coupon a name. So let’s call this one, say for example, 25OFFSOFAS. You can give a description if you want. Now the discount type, you can choose to have it as a percentage discount off your shopping cart, or a dollar value. So if I did this, Cart Discount, and I entered coupon amount, 15, that would be $15 off the total cart, shopping cart value. However for the percentage discount, that would be 15% off your total cart value. So this coupon I’m making it 25 off. Let’s make that 25%, so I’ll leave that cart percent value. If in doubt, you can just hover over the little tool tips any time you need to. This checkbox I for allowing free shipping, and I will cover that a little bit later. In this field here, you can select an expiry date for the coupon if you wish. WooCommerce will automatically expire the coupon after that date. So it’s really a good way to automate your promotions. Now in Usage Restriction, you can have a minimum spend and a maximum spend. You can check this checkbox if you want to … if you don’t want this coupon to be available in conjunction with other coupons. So say for example, there is a 10% storewide discount, and you’re also running 25% off sofas. You don’t want people to get 25% off sofas and the 10% storewide. It should only be on of the two offers. So check this box if the coupon cannot be used in conjunction with other coupons, and I tend to do that for my eCommerce websites. Here you can exclude sale items. So some people may … Some businesses may only allow a discount on the full-price items and not on sale items. So you can use this checkbox to configure that. Now you can apply this discount to particular products, or you can exclude certain products, which is really, really handy. Similarly, you can apply this to product categories, or exclude particular product categories. So now, let me just make sure that I have a category for sofas on my eComm store. So I’ll just go back into my site, and products, sofas. Yes. I’ve got a sofas category. So now, this discount will only be applied to products within this category. Obviously, I only have one product setup at the moment, but say you have five or 10 within this one particular category. Only products in those category … in that category will have this discount applied if you choose that particular category. So I’m going to choose sofas. Email restrictions, we’ll cover that a bit later in another tutorial. Usage Limits, okay. You can limit this coupon to a maximum number of users. So say you want this limited to the first 50 customers only. You can do that, or you can limit it per user. So say it’s only or each user is only allowed to use this coupon once. You can limit that per user or you can leave it unlimited. It’s absolutely up to you. So now I’m going to go ahead and publish this coupon. There we go. Now if I go back to my site, and I refresh the page, Add to Cart the leather sofa. Now I’ll just remove everything else. Okay. So at the moment, the Sale price is $2,200. Let’s apply the coupon, so 25OFFSOFAs. Coupon applied successfully, there we go. The coupon has been applied. The customer will receive this discount, and here is the final total. They will be able to proceed to the checkout and pay for their product. So there you go. There is a perfect demonstration of how to setup a coupon. Now say you wanted to setup a site wide discount, which is very popular. The way you would do that is just click add a coupon, and say you wanted to have a 10% storewide discount. So give your coupon a name. We can have that as a percentage discount. The coupon amount is 10%. Usage restrictions, now you can of course set minimum and maximum spends if you like. Individuals use only, and say it only applies to full price items. So I’ll click that. Now if I want a site wide discount, I would not enter anything in these fields here. I would leave that blank. However, there maybe certain products that you want to exclude such as if you have a gift card on your site, you don’t want people getting a discount of gift cards because that’s just like giving away free cash. So you can exclude some products if you need to. When you’re ready, click Publish. Of course, I’ve selected to exclude sale prices or sale products. So now if I go to my site, and I go to any product and say I add this dining chair to cart, and I’ll view my cart now. I will remove this previous coupon that I entered. Okay. So now if I entered this coupon code, 10% off, it says here this coupon is not valid for sale items because both the items in the cart are sale items. It will only apply to full price items. So there you go. If you have any questions about coupons and setting up a coupon to run a promotion for your eCommerce store, please do let me know and I’ll be happy to answer. Now I’ll demonstrate how you can configure a free shipping promotion. You may have seen on many eCommerce websites that they have promotions such as spend $50 or more, and you will receive free shipping, something along those lines. So I can do this via the Coupons section. So if I go back to coupons and add a new coupon, you will see there’s a box here to allow free shipping. So I’ll check that box. There’s a link here to … that takes you to the shipping methods, in particular the free shipping method. The reason I bring this up right now is because there’s a couple of different ways to do this. So the first thing you need to do is enable free shipping. Okay. Now there’s a number of different ways you can do this. You can have, for example, free shipping for customers who spend more than $50 on your store, and they do not require a coupon to do that. It’s just automatic. If you spend more than $50, you’ll get free shipping. That would be this selection over here, just here. Just a minimum order amount that do not require a coupon. Okay, then you’d enter a minimum order amount in there, and then you’d save your changes. That would enable any customer to receive free shipping as long as the value of the cart, the shopping cart is more than $50. It has nothing to do with coupons. However, you can also configure it at such that people can get free shipping with a coupon, or you can have a minimum amount or a coupon, or a minimum amount and a coupon. So say, this scenario will be great for people who have a free shipping coupon regardless of their spend. Okay. This scenario will be great for people who need a minimum order amount as well as a coupon. So say, I wanted to run a promotion, spend $50 and enter in a coupon and you will receive free shipping. So that’s what I will setup, enter a minimum order and a coupon. So I’ll save that. Now the coupon code, I’ll call it, 50FREESHIP. Of course, the same as before, you can actually restrict the usage if you need to. Now in this case, we do not need to set a minimum or maximum. All we need to do is setup that coupon, check this box, and the free shipping method will be enabled because we set that up in the other tab right here. So now, I’ll save all of that, and publish. Now I will go to my store, and choose a product. Let’s say this one here. Okay. So now our shipping is flat rate 10 or local pickup. Now if I apply that coupon, added successfully. There we go. The free shipping coupon is now available, and I can now progress … select that and the user can progress to the checkout. However, if the customer adds product that is under $50, they will not see or be able to use this coupon code. So they will be able to enter this coupon code, but it will not be added successfully. They will not get the option of free shipping. Of course, that’s because we set it up that way over here. So please I do encourage you to use free shipping on your eComm stores because it’s a great promotion to have to get customers to spend a little bit more, and trigger that free shipping. They will always add that extra product in cart just so they can get things shipped to them for free. So use that strategically in the best way you can. If you have any questions or would like my suggestion, please get in touch with me via the comments below. That is how to make an eCommerce website using the Storefront WordPress theme. As you can see, it looks absolutely sensational on a mobile device. It adjusts automatically to the mobile screen size. This is absolutely automatic. You don’t have to do anything. Please leave me a big thumbs up on this YouTube video, and subscribe to our channel for more awesome stuff in the future. If you have any questions, I would love to help you out. So please leave your question in the comments below, and I’ll be sure to help you as soon as I can. Thank you for watching, and see you next time.

Channel: eMediaCoach

Views: 348,797

Keywords: ecommerce website, how to make an ecommerce website, make an ecommerce website, storefront, emediacoach, online store, wordpress

Id: W73umJTCFDE

Length: 135min 31sec (8131 seconds)

Published: Wed Nov 25 2015