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


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.

, , , , , , , , ,

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *