Hey guys, happy new year! I'm going to
show you how to make an eCommerce Website, otherwise known as an Online Store, in 2019. It looks fantastic, it's seamless, we can
accept payments and it's a beautiful user experience. Just follow me step by
step and you'll be able to make this online store within a couple of hours
using WordPress, WooCommerce and the Storefront Theme, which is the main
theme. Let me do a demonstration here. This looks fantastic! I can add this to
cart, I can view the cart and then checkout. Pay by paypal or use my credit
card which I'll do right now and show you a live transaction. I can make this
payment using my PayPal account as a customer - or like most customers will do,
with a credit or debit card. I'm going to enter all this information. I'm
going to blow my screen and then hit the Continue button. That's done. I've
made the payment and this is my own PayPal account from a seller's point of
view and here's the transaction that I can see from the payment I've
just made through my store. We're going to show you how to set all of this
up. Here's something else that's pretty cool: your eCommerce store will be able
to change images based on the options selected just like that, and it's going
to be easy to set up, and it looks fantastic. Here it is on a mobile phone
as well, you can do everything you did on a desktop, your customers will be able to
shop on their mobiles, add things to cart, view cart and continue on the checkout
journey without leaving the couch. They can apply coupons and proceed to
checkout as they normally would. The mobile function works perfectly as well,
it's 100% responsive and you don't need to do anything additional. Everything to
build this ecommerce website is contained in this one tutorial. So guys
get ready, this is going to be amazing! Let me know in the comments below if you
have any questions and we'll be more than happy to help you out. Watch this
through to the end because we're going to show you cool things such as adding
coupons, configuring inspiration page with images and stuff
like that and it's going to be really cool. Here is a list of notable WordPress
users. WordPress is a content management system used by more than 70% of
worldwide websites and there's some huge names here: Forbes, eBay, Jay-z, Reuters...
massive names that use WordPress. We're going to be combining WordPress
with something called WooCommerce, both of them go hand-in-hand to work on the
WordPress platform. WooCommerce as it says here, is an e-commerce platform for
WordPress and it's a really easy way to set up and start selling your products
online, so you can start selling in your country or you can go global. If you go
to the Storefront framework, you'll see a theme called "Storefront" and this is the
theme that's built with WooCommerce and it's the standard theme. You'll see
WooCommerce Storefront going hand-in-hand and that's the theme we're
going to use to set up your website, and when I say theme, I mean design. Let's get
started! The first thing we're going to do is get you online.
Once you're online I'm going to show you how to install WordPress, once you've
installed WordPress, we're going to install WooCommerce and then, we're going
to add products and configure payments. A very simple
process. If you have any questions along the way please do ask in the comments
below. Folks, the first thing we're going to do is get online because for
any ecommerce website, of course, you need to get online first. In the
description of this video is a link that will take you to our eMediaCoach website.
This is a page for our old demo but I'm going to create a new one and link to
that in the description below. What it will serve as, is a one-page checklist
for everything you need, quick links that you need, any downloads... I'm also
going to add a Frequently Asked Questions section, so it's easy for you
to see things that other people have asked and all of that stuff. Anyway, go
down to that page, and click on the Hosting-Get 60% Off, link there and it
will take you to a page on the Hostgator website
and I'll explain what that is in a second. Either will take you to this
page here or it will take you to the main Hostgator landing page. Either one
is fine, but just make sure you first go to our checklist and then start there.
Once you're on this page, just click on Web Hosting. Hostgator is one of the world's most
well-known hosting companies. Hosting is where your website's files are stored,
it's what allows a website to be viewed 24/7, it's where all the images, text
and design will be stored. Whereas the domain name -which is your business.com
name, is actually just the address, not the contents behind it. I'll show you
how to get both very easily right now with Hostgator.
They've got 24/7 support and I personally have been using them all the
way back since about 2004. There are a couple of different plans here. We don't
need the Business Plan, the Baby Plan will give you unlimited domains, the
Hatchling Plan will give you a single domain. The domain is your websites
Address, that is your .com domain name or .net, whatever you choose to register.
I recommend the Hatchling, simply because if it's your first time making a website
you'll only need to register a single domain and you can always upgrade later
on if you would like to. If you went through the link that I provided, that
link gives you a 60% off discount, so go ahead and select one of the plans.
I recommend the Hatchling, is the cheapest as well. What you need to do
here is enter your requested domain name. I've already purchased mine through
Hostgator and it's called "thestoredemo. com." If the domain that you want is
already taken, it will appear like this. If that's the case, you'll just have
to enter another store name, whatever your eCommerce store is going to be called. Once you've done that, it'll be added to
your cart. For you to know, a .com /.net are both very common and professional
extensions, either one is fine. Select the one you want, go down, you can
subscribe for a package that's up to three years.
The longer you subscribe for, the cheaper it is of course, and I'll show you how to
get a discount on any one of these packages even more than what's shown on
the screen right now. What we'll do now, is just go down to the end, go to
Coupon Code and type in the coupon ONLINESTORE and hit Validate. If you've
done that right, you'll notice the price is actually cheaper than what it was
just now and you'll get a whole range of discounts depending on which package you
want to choose. Please do use that discount code.
That discount code gives you a discount off your total
Total package, but there's another one: 1DIRTYCENT
that gives you a discount off just the first month but then you'll be rebuild
at the regular rate after the first month. I'll just give you your first
month for free but the rest will be at the regular rate. I really recommend
that you take advantage of the biggest discount possible which is this one here:
ONLINESTORE. After you've selected the package you want - I normally go for a
12 or 24 month period because it's very reasonable and you can also cancel at
any time and get a refund off the remainder of your term. Just keep that in
mind as well, a little tip there. Enter a username, enter your four-digit pin, then enter your billing info. I'm just
going to blow my screen while I do this. You'll need to enter your first name,
last name, address, country and then credit card details. I'll just enter my credit card
details. I'm obviously going to blur my screen. Or you can use PayPal. Once you've
done that, just scroll down. There are a few additional services offered here and
I'm going to be really honest, you don't need them. So I'm going to deselect this
Protect Your Site From Hackers thing, the SSL is included free, that's great.
You don't need to add this, you can set up your email once you've got your
hosting account ready. There's no need to pay for Google Cloud email, your new
email will be whatever you want at whatever domain that you're registering.
For example, yourstore.com There's another way to backup
your site that doesn't involve the fee. I've got that in one of my other
tutorials and we don't need this one here. We don't need any of these
upsells, what we need is the hosting package because that's what we need to
get our site online. Just check everything's in order and once you're
happy with that, go down, accept the terms and conditions and click Checkout Now.
When you use one of our links on our website - just for full disclosure, we
receive a small referral credit from Hostgator. This doesn't cost you a cent,
if anything, you're getting a big discount of your hosting package, but
this credit does help us pay for these tutorials and the costs associated with
running this YouTube channel. We sincerely appreciate your support behind
that. Hit Checkout when you're ready. After you create your account, you'll
receive an email that looks like this from Hostgator and it will contain your
account details, such as your control panel URL - which I'll show you what to do
in a second, your username, the domain you registered, your password,
as well as name servers. If you bought a domain from somewhere else and you need
to connect it to your Hostgator hosting, you'll have to update that with these
nameservers, but if you've done everything like I have from Hostgator to
get your online store, you won't have to do anything else.
If you don't receive this email, just check your junk folder as well, because
the next step is to log into your Control Panel using this link here and
then install WordPress. I'll show you how to do that now. Let's click on
this Control Panel link. Then, all you need to do is copy and paste the
username and password found in this email. That username and password
make sure don't have any spaces at the beginning or the end, or it
won't match up exactly and you won't be able to log in. Just copy and paste
those and log in to your account. Log in. There you go. This is known as a
cPanel - your hosting account. You really won't need to access this too often but
for now, we just needed to install WordPress and then continue on with this
process. The next thing you need to do is install and log in to WordPress. WordPress
is the content management system, it is the platform that we're going to use to
manage the content on your entire ecommerce website and it's a really
easy-to-use platform. Your online store will be really easy to manage. The way
to do that is, if you see something like this, build a new WordPress site link in
your cPanel once you log in, click on that. Alternatively if you don't, go down
and find something called Quick Install. Then, once you click on that, you will
find that same link that takes you to WordPress. Either way, get on to the
WordPress installation page. There are options to install it for you and we are
not going to be needing that at all. We want to install it for free, it will be
absolutely for free and there's no need to pay anybody for that. What we need to do
here is select your domain, in your drop down here, you'll have just one domain
because you'll only have just created your account. But I'll have
multiple. I'll just need to click on that and select my domain. For our online
store, of course we're using a domain called the "storedemo.com"
There it is. Leave this directory field in blank. The
reason is we want to install WordPress on this domain, not on a subfolder of the
domain, leave that blank, then click Next. Give your eCommerce website a
title, this can all be changed later. Let's dress put in an admin username,
your first name, last name and also an admin email, that is your
email address. That's important because if you ever lose the password or
you need to reset your password, it'll be sent to this email address over here, so
make sure that's correct. All of this other stuff is changeable later on but
you do need to add it for now. You will need to keep this enabled or don't
automatically create a new database for this installation and yes, accept the
terms and service agreement. This is free, it's not costing anything, all it's doing
is installing the WordPress platform onto your hosting account so you can
manage your entire online store. Click Install when that's all done. A couple of
pop up screens may appear, ignore them. All we're concerned with here is the
progress of this installation and when that's done, you'll see something like
this to let you know that the installation of WordPress is complete.
It will give you your username that you added on the previous screen,
and also your password which will change later. For now, you will need to copy this
and just paste it in a notepad on your computer. Just paste that somewhere so
it's easy to find your login details because as soon as you click on this
Log In button you're going to lose that information. Alternatively, right click
in Log In and go to a New Tab, so you don't lose this information. Click on the
Log In button when you're done. You're going to see this screen here and
in this screen you'll need to add your username and password, this is the login
to your WordPress dashboard. It is the login to the management of your entire
online store, it's very important this one here. A lot of you watching this will
not see this screen as soon as you click Log In, and
the reason is you've only just purchased your hosting account and it takes
sometimes 24 to 48 hours for your hosting account to be enabled and for
your domain - that is your website domain .com and your hosting to be
linked up. Most of you will actually not see the screen straight away. What I
recommend is either one get in touch with me if you're confused about what to
do, -you'll probably see a blank screen, or secondly, go to Hostgator.com and this is
the preferred option. Go to Hostgator.com click on the Live Chat and then enter
your details. If you don't know any of this, don't worry, just say New Customer.
Let them know that you've purchased, give them the details of your purchase that
you'll see in your email here and they will let you know what the status of
your account is. Once that account is activated and your hosting is linked up
to your domain, don't forget your domain and your address is separate from where the
files are stored. Once they're linked up, they will advise you or expedite that
process. Once that's all done, then go to your website.com
forward slash, WP, dash, admin - that's the thing you need to remember: your website,
forward slash, WP, dash, admin. Once you go to that URL and everything is activated,
that is when you will see this screen here. It's just a little bit of a hurdle
to get to this screen but trust me, it'll be all worth it. I recommend writing
that down as well. Your website - whatever it is
.com / .net - whatever it may be, forward slash, WP, dash, admin. That's your login page. If
you're confused about that, please do send me an email, a hello, at
eMediacoach.com and I'll let you know what to do next. If that page is
appearing for you, just enter the username and password and log in. Then you have folks! This is your
WordPress dashboard. This is the engine behind your entire eCommerce website and
everything you'll do to set up, manage and maintain your online store. I'll show
you exactly how to use this platform step-by-step. When you first access your
WordPress dashboard, I tell all of my students to do some basic website
configuration, just some basic setup and I'll take you through exactly what you
need to do. Firstly, if you go down to the settings area and hover over that and go
to General, you'll see the Site Title. You can change this to anything you want and
this is your website title, whatever your online store is called. You can also
add a tagline and then at the bottom, you'll see a button called
Save Changes. What I recommend to all my students in this WordPress Address
URL and this Site Address URL, to add a WWW. It's just a personal preference of mine
and it's definitely not mandatory. All that means that in the browser it
will appear as www.website.com rather than what you're seeing here. But this is
something you've got to be very careful with. Make sure you're entering it
after the two slashes and before your domain name. If you do that incorrectly,
it will screw up and you'll have to delete your entire installation and
start again. Just be very very careful with this step. After the two slashes, WWW.
then your domain name. Make sure you also do it in this field here.
Double-check, triple-check that to make sure it's right. The email address here
is the email address that will be used as it says here, for admin purposes. For
example, if you lose your password, that's where a notification will be sent so
make sure that's correct. When you do that step, click Save Changes and it will
actually log you out automatically and it will ask you to log in again, only
because the URL has now changed. Let me just get that again. Perfect. The next thing I tell all
of my students to do is go down to Plugins. A plugin is an additional
feature or piece of functionality that is added or bolted on
to your base WordPress installation. In all of the notifications you're seeing here,
there's a lot of clutter and a lot of that is
because of plugins. We really want to start with a clean installation.
What I need you to do is go to Plugins, hover over that, go to Installed Plugins.
Some plugins are great, some are very useful. For example, there's a
plugin for image galleries, for changing the URL of things,
for all sorts of things... and they're very useful but I just want
you to remove all of the clutter for now. What I need you to do is click on the
box here that will select everything. Bulk Actions, Deactivates, Apply. Or you
can go through individually and deactivate each one individually. Then go
back. Bulk Actions and Delete. Apply. Or again you can delete each one
individually. The reason I'm doing this is because we don't need most of this
stuff and it's just adding clutter and I like to start with a clean installation.
Perfect. All the plugins have been deactivated then deleted. Next, I need you
to go and hover over Posts and click on Old Posts. By default when WordPress is
installed, you'll get a couple of posts and also a page that is created by
default. That'll look something like this. - By the way your
website is live to the public. What you need to do is just go and
click on the Trash button and then in the Trash Can. You'll be able to hover
over that and delete permanently. The same thing for pages. If you hover over
Pages and go to All Pages, you'll notice that there's a couple of things
installed by default. Just move all of that to Trash and then delete them
permanently. Very simple. The next thing is very important. Hover over Settings
and go to Permalinks. The Permalink is basically the link structure of a page
or a post on your website. What I need you to do is delete everything.
First click on Custom Structure, then delete everything in Custom Structure.
Then the way I want you to structure your permalinks -and I'll explain why in
a second, is first click on Category and then click on Post Name and Save.
Whenever you create a post, for example, a blog post, your URL structure will be
your website, forward slash, the category that purses in, forward slash, the name of
the post. It's very clean, very clear. It's good for users who are looking at
your website but it's also good for search engines to read what your page is
about. As opposed to something messy like this: your website, forward slash, date,
forward slash, the name of the post. It's not a very nice way to
structure your links. So this is best practice and it's something I've highly
recommend. When you've done that, Save Changes
and that is all we need to do in terms of a basic configuration and site setup.
Now what you've got is a clean installation of your website. Your
website is live to the public, this is what it looks like. You can go to your
domain right now and this is what it will look like. We will show you
step-by-step how to set it all up. One more thing actually, you'll need to
go to Reading. Actually I think it's in privacy...
no, definitely Reading. Make sure Discourage Search Engines is not enabled.
We want to encourage search engines to find our website. It's okay if you're
building it and you still haven't finished, but you want to get that
process started while search engines are able to
find and index your eCommerce website. The next thing we need to do is install
and activate WooCommerce. It is going to be the engine behind your eCommerce
website and it will allow you to do everything from setup products to
configuring customization options, and of course, getting payments from your sales.
It's pretty simple. WooCommerce actually have a setup wizard, but the
first thing you need to do to install and activate WooCommerce is go to
Plugins. Hover over that and then click on Add New. Then search for WooCommerce. It should be this one here that's got
more than a million installations and more than 3,000 reviews, so click on the
Install Now button. Like I said, a Plugin is something that adds extra
functionality to a basic WordPress installation, this is a great example.
Click on Install Now and then click Activate. Perfect. So automatically you
should see this WooCommerce setup wizard to set up your online store. What
it will do is take you through the various steps to set that up for you, so
this contains the Store setup and the Payment setup, Shipping and other
things to get your basic store settings configured and ready. Let's just
follow it through. Where is your store based? Mine will be in the US, obviously
just pick from that list based on where your store is. Enter your store
address or your address in here. You can use a dummy address if you would like to
for now. I'm just putting some dummy
information there for myself, for this demonstration. Select the currency
you want to accept payments in. What kind of products do you expect to sell? You
can select Physical or Digital or both. A Digital Product is one that, for example,
somebody pays for and then downloads a document or PDF or something like that.
It's a digital online product such as an e-book. Or as a Physical Product. Of
course physical goods that you will ship. Let's just say we're planning on
selling both for now, and then you've got the option of letting WooCommerce
improve Usage Tracking, that's optional. Let's go... The Payment screen. You've got a
couple of different options for accepting payments. If you've got
Stripe, set up. You can actually accept payments via Stripe, accept
payments via PayPal and if you haven't got a PayPal address already, I recommend
you sign up for one and sign up for a business PayPal account. For now, I'm
going to demonstrate this tutorial using PayPal, so I'm going to disable Stripe,
leave PayPal enabled and then in this field here, you'll need to enter your
PayPal URL. -Sorry, your paypal email address. That is the email
address associated with your PayPal account, so that when somebody makes a
payment for a product, you receive that into your PayPal account. It's very
simple to use PayPal. If you haven't got that, you can skip that for now. Let's
continue. - I'll show you how to configure the details of that later by the way, so
don't stress at the moment. Shipping. We've created two shipping
zones for the US and for the rest of the world. Below, you can set a flat rate,
you can change all of this later as well. Shipping Zone US, you
can offer a flat rate or free shipping. Let's say we want to offer a flat rate,
set a fixed price to cover shipping costs, yes, that's enabled. Let's say I'll
charge 12 US dollars for that. Locations Not Covered by your Other Zones set a
fixed price to cover shipping costs. Perhaps it's more expensive for you to
ship to those areas, so maybe it's 15. Now 12 in your own country is probably
depending on what the product is. It may be high or low. Just work out what
your shipping costs will be approximately, but we can also amend this
later on. Nothing we're doing here is set in stone. If you want to offer live
rates for a specific carrier, for example UPS, you can also activate an extension
for WooCommerce. I recommend you do that a bit later or right click and open
that in a new tab to explore that option. We'll print shipping labels at home,
we'll use what have you normally used, pounds for weight and inches
for dimensions. - You know what, I'm gonna use kilograms, this doesn't
make sense because we're in the US but this is just an example. This is all the recommended
plugins or additional items that they recommend for WooCommerce stores.
The first one is the Storefront Theme. In other words, the
design that we're going to be using, that you saw in the demo at the very
beginning of this video for your online store. We want to be using the
Storefront Theme, keep that ticked. The Automated Taxes allows you to save time
by adding tax rates for your particular location. I'm not a tax
advisor, I don't know how much tax you should charge but that's all
configurable within WooCommerce. Also MailChimp. MailChimp is a great
way for you to add customers to your email address book and you can therefore,
follow them up with other marketing offers and promotions. It's basically a
marketing campaign tool. I won't be covering that in this video but in a
future video. What I'm going to do is just Deselect MailChimp for now
because I just want to take you through the basic setup, so let's continue. Connect your store to Jetpack. What
you need to do here is install the Jetpack service and it's free, you just
need to click on Continue with Jetpack. Next it'll ask you to create an account
for Jetpack. You can enter your username, email username and password. Or you
can connect it up with your Google account.
That's a quicker option but for now I'm just going to enter a username and
password. "The password is not strong enough." Let's
try that. That will just process as it's
completing the setup. There we go... we're nearly ready! Here
you can subscribe to some tips and all that kind of thing if you would
like to. You can start creating a product but I'm not going to show you how to do
that from here. I'm going to show you how to do that from your Wordpress dashboard.
Let's go and visit our dashboard by clicking here or you can go to your
website, forward slash, WP, dash, admin, to get there. I'll show you now how to start
adding products to your online store. During the WooCommerce setup, we
installed something called StoreFront. StoreFront is the theme, otherwise known
as the design of your e-Commerce website - it may not be clear, so I just want
to reiterate something to you so it's super clear. If you go to
Appearance and click on Themes, you'll notice that you've now got your active
theme that is Storefront. If you by any chance, don't have that, all you need to
do is go to Add New Theme, search for Storefront and activate that, but you
should have this if you follow the steps. The other ones you see here are the
default themes that WordPress installs. Now that this new theme has been
installed, if you visit your web page, you'll see that it already starts to
look different. What we need to do now is start installing or configuring the
homepage for your online store. What you need to do is go to Appearance and go
down to Storefront. Click on that. In Design Your Store we've come
and set up. Let's start customizing it. We want to enable Apply Storefront
Homepage Template and we want to Add Example Products. That's perfect because
we will now see a sample of what our real products will look like on our
homepage, so let's go. That'll just take a few seconds to load. Perfect!
Now this customized area over here allows you to control what you want laid
out on your website, we don't need the tour. I'll show you that later. This is
your current Home page. It's set up the Home page and it's also added some
sample items so you can see what it will look like when you create your
products. If I click the Publish button now, and then go to my website... There you go.
You'll see that it's already taking shape and now obviously when you start
adding in your categories over here or your products over here, this page will
update. You can also configure what you want it to show, you don't have to
show all of this stuff. You don't have to show New In, Recommended or On Sale,
but this is a great example of your Home page layout. As you can see, we're
making some fantastic progress here. The next thing we need to do is add our logo
because it's not showing up at the moment. So back to Customize and Site
Identity. Let's Select the Logo, Upload Files, select your logo file from your
computer. I'm going to assume here that you've already got a logo that you
want to upload. If not, in the description what I'll
do is help you out and point you to a resource that I recommend for getting a
logo, made quickly and effectively for your online store. For now, I'm just
going to go to my computer and drag-and-drop the logo on the page here
and that will upload to what's called the Media Library. Then click Select.
You can crop that if you like and then Publish. If I reload the website, you'll see
the logo in its place, it's starting to really take shape. Again, if you don't
have a logo ready to go, please check the description. I'll put in a bit of a
detail around where you can get one made pretty effectively and I recommend
that stuff to all of my students and my clients. I'll put that detail in the
description below. Something else you should just check if your homepage is
not appearing yet, is in your Customized area. Go down to Homepage Settings and
just make sure that your Home page is displaying a Static Page and you've
selected Home as your Home page. Save that. That's just in case your home
page isn't displaying. Now I'd like to take you through how to customize your
Home page. At the moment this is what it looks like, this is all the demo
default content when you installed a Storefront. If you click on one of
those things, you can actually see what your pages will look like in detail and
it looks absolutely fantastic at the moment to be honest. When making an
eCommerce website it's a cool idea to have a slider on your Home page. I'm
going to show you how to do that. Back into your dashboard, what you need to do
to add a slider is go into Plugins and click Add New. We're going to be
installing a new plugin. We're going to be adding on this functionality so that
we can have a nice-looking slider on your online store Home page.
What you need to do is search for a plugin called
Storefront Add Slider. This is the one here, install that
one and activate. Once you've done that, you should be able to go into Appearance
and Customize. Then, if you scroll down to the Homepage Settings, you
should see this box here where it says you can insert your Meta Slider,
Smart slider or any other slider shortcode here. What we need to do now
is install a slider, the images and then we'll add the shortcode. To do
that, just close this little box here, what we need to do is add another plugin.
Add New and Search for a plugin called Slider Ultimate. This is the one here by these guys.
Install Now and then Activate that one. What you'll see after you activate
the plugin is a thing called Ultimate Slider in the sidebar. Let's click on
that and Add New. Now, we're going to add some new slides and then we're going to
put them on our Home page. Enter a title for your slide and keep in mind
this title will appear on your slide itself. Then go down and click on the Featured
Image and select the image from your computer that you want to display as the
slider. When you click here, it'll ask you to select the file from your
computer or alternatively, you can go to your file on your computer and drag and
drop over here, that's what I'll do. I've just got another screen here, so
I'll just drag and drop my first slider image and then set as Featured Image. You
can also add a Button and some button text, and you can link that somewhere as
well. In this part here, it's saying to use
the featured image over here. Let's click Publish when that's done. I'm
just going to add a couple of more slides as well, just very quickly. Next what we need to do is
set a category for each of the slides you've created, so let's Add a New
Category and let's call it Home, and add that category. Then just update again.
I'm going to go to the other slides I created and select that same category
because we want them all associated with the Home page.
There we go. Now that we've all assigned the
sliders to the Home page Category, what we need to do is go to the Slider
Categories tab over here on the left, and it will give us a thing called a
Shortcode for those three sliders. What we need to do is copy that entire
shortcode (including the brackets), and once you've copied it, go to Appearance,
then Customize and then down to Home Page Settings. We'll need to paste
that shortcode in here and you should see that load on to the page. There
you go... there is a lovely-looking home page slider. Click Publish when you're
done. This the reason that first one was blank, because we didn't assign the
image correctly. If that happens to you, all you need to do is go back in to that
particular slider and ensure you've set a featured image. I'll set that and
then update. Give it a couple of seconds to
load and then let's check out our online store to see what that it looks like.
Absolutely perfect! That's starting to really look good now.
Here's what our website looks like with the slider in place. - Just a quick note, as
you can see, there's this timer bar that's loading and we can actually
customize or get rid of that if you want to. By going into Ultimate Slider in
Settings and in the Basic Settings tab, you've got a few settings here. You can
auto play the slideshow which it's currently doing.
The slides are changing every six seconds, the Aspect Ratio is something
you can change as well and you can get rid of this timer bar
completely if you don't like that, and I don't, so I'm gonna get rid of that. You
can also change the dots down here but I think they're quite good so I'll leave
that and I'll just put in here to link the buttons to the same window and save
that. When I refreshed, you should be able to see that. The
timer bar is gone too easy. Last but not least: if you'd like the slider to be
full width and take up the entire width of the page, what you need to do is go
into your Appearance and Customize. Scroll down to your Homepage Settings
and check this button here Show Front-page Slider on All Pages. That
will then make it a full width and it'll also show that slider on all pages of
your online store. Hit Publish and when that saves, let's
just refresh so I can show you what that looks like. Perfect! That looks pretty cool. What will
happen then, is that you'll get this module under it as well over the slider. So you'll get
two sliders. You need to remove this bit here and the way to do that is
go back and going to Homepage Control and deselect this thing here. Once you deselect and publish, that
thing underneath will disappear. There you go... you have easily created
a beautiful-looking slider for your online store. Of course if you don't want that
slider to appear on all pages you'll obviously have to go back and remove
that setting over here. That's absolutely your choice, it's completely
up to you. The next step to building your online
store is - I want to show you how to control all of the modules that appear
over here on the home page. As you can see, by default we've got a category for
New Things, We Recommend, Fan Favorites, On Sale, Bestsellers, and we can
manage that on our Home page. A way to do that is to install a plugin called a
Home Page Control. Go to Plugins and Add New and search for Homepage Control. That's the one here by WooThemes.
Install that one and activate. Once that's activated you can go to
Appearance and then Customize. You should see a new section here called Homepage
Control. Click on that and you'll notice that everything is enabled. As
an example, if I disabled product categories - this is our category
section over here - if I disable that, you will see that particular module is gone
from the Home page similarly. I want to keep that, that's pretty good.
Similarly, if I choose that and I don't really want something like Fan Favorites,
then I can find and disable the appropriate tab and Fan Favorites. I
believe should be Popular Products. There you have a way to easily
enable or disable what kind of not just categories but
subcategories you want to show. These items are generated automatically and
you'll see that later on. For example, when I set up a product that has a sale
associated with it, it will automatically come up in the On Sale section.
There's how to customize the homepage sections.
Thirdly, we can also customize this section over here. If I just click on
the cross there, I won't save any changes for now. I go to Pages and All Pages, you should see a few pages that have
been automatically set up by WooCommerce. Let's click on the Home page and this title and text correlates to
this stuff over here. I can change that or I can get rid of the title
all together and press Update. When that finishes
loading, you should be able to refresh your website and see that take effect. Perfect!
The next step in learning how to make an eCommerce website is of course,
adding all of your various products to it. You've already seen that there are
a few categories that are set up by default and also some products that are
set up by default, but now I'm going to show you how you can actually add this
stuff so you can load up your eCommerce website with products and start making
sales quickly. To do that, back into your dashboard, if you hover over
Products and go to Categories, what we're going to do first is configure these
higher level categories first before we start setting up products that fit into
each category. A good way to do this is brainstorm. What categories your
products belong in? For example, is a clothing? Is an accessory? is a
gadget? We can see by default there's some stuff set up here by
WooCommerce but we're going to ignore that for now
and what we're going to do is create new categories. Go down here and actually
first, you'll have to put in some details about your new categories. I'm going
to set mine up in three categories. One will be called Travel Slug. That's a URL
friendly or search engine friendly version of your category, so that's
pretty clear. Can be Travel as well. A Parent category is if it's a subcategory
of one of these already created. Parent categories which it's not its own
category at the moment, you don't need to put in a description. I'm just going to
double check how WooCommerce set up these other ones just to double confirm. Accessories, accessories, no parent.
Display Type is default and it's got a thumbnail.
Okay. Display a type default and thumbnail.
The thumbnail is the image that appears on the home page over here, that's the
image over there. So let's upload an image for that
particular category for our category called Travel. If you've got one on your
computer, just upload a file and select it from your computer, or you can drag
and drop which I'm going to do now. I've got a file on my other screen here that
will upload and then click on Use Image, and click Add New Category. That's
done. It didn't really give me a notification that it was done but it was
done as you can see there. If I refresh the site -let's see if that's
done anything to the Home page. Not yet, so that's another setting and it
probably hasn't appeared because there's no products assigned to that particular
one yet. So let's put in our other categories... Gadgets and the last one we want to add is
Clothing. There we go. Just as a note, if you've
got products that are already assigned to a category, as it says here "deleting a
category does not delete the products in that category." Instead, products that were
only assigned to the deleted category are set to Uncategorized, so they won't
delete the products. Once you add all of your categories to your online store and
you refresh your page you might notice that the categories are not reflected on
the front tend, we can't see them yet and the reason for that is -this is the
final step. Firstly, make sure that each of your
categories have products assigned to them. We haven't shown you how to
add products yet, but we will in the next step of this tutorial. This
is something you'll need to come back to but firstly, you'll have to make sure
their products are signed to them - which you'll learn the next ten minutes, and
then once you do that, just come back to Products and the Categories section and
then see these little three lines here, so you'll just have to
click on them and drag and drop them to the top of the order in front of the
ones that are already displaying. Alternatively, just delete these ones
that I just set up as a demo and then these will become the obvious priority
when you do that. Once you rearrange that and then it'll automatically saved,
you need to just press Ctrl + F5 if you're using your Windows or do a hard
refresh of your browser and that will update. If you want to change the
order in which they appear, you simply just change that order over here.
That's updating... done. There we are. Once again you'll have to make sure
products are signed to that category before that works - I'm going to get
into that next. How do we add products? The next step to creating your
eCommerce website is to add your products to your store. One is called a
Simple Product and that is a product that doesn't have any variations. For
example, if it's a camera. It's a particular model of a camera
but it doesn't have any variation, it doesn't come in different colors or
sizes as opposed to, perhaps, a t-shirt. A t-shirt can come in different colors and
also different sizes that's called variations and that's
called a Variable Product. There's two types of products: Simple Products that
don't have variations and Variable Products that have different
permutations and combinations. I'm going to show you how to set up both. For
simple products... let's start with that. Hover over Products and click on Add New. Give your product a name. Let's start
with a camera. There are two areas where you can put a description. In this
section here and also in the product short description, and I'll show you the
difference. I've got some random text here. what I'm going to do is just add
some random text in both, but at the beginning of this I'm going to call this
the description "Long Description Example," and in front of this I'll add
"Short Description Example," and you'll see how where they both appear when I save
this product. Back to the Product Details. Give your product a price. Note
that you've got to use the price without the monetary symbol, you will have set
that in your Woocommerce settings. You can also add a sale price if you like
and you can schedule that sale to begin as well. It's pretty cool. By
the way, ensure for Simple Products that you've actually got that selected. Then
in the next tab, you can put in SKU if you've got a SKU for managing stock.
You can also manage stock and say how many pieces you've got the remaining. You
can now allow back orders, you can show a low stock, threshold... In shipping
you can put the weight of the product, the dimensions,
the shipping class... You can link to other products on your
online store that you've set up already as an Upsell or a Crosssell. Check out
my channel - I've actually made a different video on this, it's pretty cool.
An Attribute it's not something you'll need for a simple product. This purchased
note is an additional note to send to the customer after purchase. There's a
quite a few options here that are available at your disposal really. You've
got to choose what's best for you and your store. Go to Product Image, you need
to add an image for a product and set product image. When you go to an eCommerce website,
you'll probably see a image that is the featured image for a product and you'll
also see other images from the product from different angles and all of that
stuff. You add all of those different angles in the product gallery and you'll
be able to switch through them. I haven't got different images for this
particular one but I'll add some random images just to show you. It as an example
- it's a really bad example, I'm sorry, but it will have to do for now. Let me
just add a few random things in, obviously not the same product but you
get the point. Add to Gallery. Last but not least, select the category that
your product belongs in. In this case, it's a camera and it will fall within
our Gadgets category. When you're done, click Publish. Let's check out that product page.
That's what our product page looks like, it looks sensational! Here is the
short description example, that is the description down here and this is
the long description. We've got our price, our
discounted price, in stock. Now a customer can add that to cart and
continue on to make payment. You can remove this sidebar but I'll show you
how to remove that later. Like I said, if you click on
one of the variations it will show you that variation like that. It's pretty
good, it's really really clean and I hope that made sense to you. When you
build your eCommerce website you'll more than likely have some variable
products, so I'm going to show you what that is and how you set them up. Like I
said before, a Variable Product is one where there are multiple variations, for
example, a t-shirt can be available in multiple sizes and multiple colors. Let
me now show you how to set that up. Give your product a nice title. I'm going to
be boring and just put t-shirt. I'll get some dummy text and this is the long
description example. Down here is a short description example. Now to the part
that makes this a Variable Product: the product description. Make sure you
select a Variable Product from the drop-down. You'll see that there are a
bunch of different options available, it's a bit different to creating a
simple product but it's not complicated. Just follow along.
You can select the Text Status and the Text Class, which is all configurable
within your WooCommerce settings. The inventory, you can set a SKU, manage stock
like I mentioned before, if you want to. Low Stock Threshold... you can even set your
weight, dimensions, your shipping class, link it to other products for
upsells and cross-sells. Here's the part that makes it a variable product.
What we need to do is add a new custom product attribute. Click on the Add
button, give this attribute a name. Let's do Color first. Enter some text or
attributes by "|" separating values with the pipe icon. What we need to do is
enter our various colors. W've got a red t-shirt, we've got to separate these
with the pipe. You'll have to find that on your keyboard, it's just
a vertical line. We've got a blue t-shirt and we've got a black t-shirt. We want
these variations to be visible on the product page and we want them to be used
for variation, so I'm going to save these particular attributes. We've got color and we can see the
details of them. We want to add another variable or attribute. Click Add again.
I want to add a Size, so we've got Small, Medium and Large.
Again, Visible on the product page, Used for Variations, Save Attributes.
We've got in this example three colors and three sizes. Obviously for
your products all of this stuff will be different depending on what it is you're
selling. Now we should have six different variations in total. Why is
that? We're going to have a small red blue, black - sorry we'll have nine. We'll
have a small red, blue, black. That's three. A medium red, blue, black. That's six. A
large red, blue and black, so that's nine. We'll have nine
different variations. Why is that important? Come down here to the
Variations tab. What we want to do is create variations from all attributes.
It's going to create all of those different combinations from everything
we've entered in the attribute section and click Go and hit OK, give that a
few seconds to load. As I mentioned, we've got nine variations
added and we can now have a look at those variations. We've got a
red in three different sizes, blue and black. That makes a total of nine
variations. The interesting thing here is, if we click the drop down button
over here, we can set a SKU for each item. We can select a product image, and I'll
do that right now. There's our red shirt in small, keep in mind this is a red
small. In this case it doesn't matter size, we can't display it on
the website, but we will need to add an image for each one of these.
I'll add an image for the three red ones, then
I'll go in and add an image for the three blue ones. What I'm trying to
tell you here is, whenever somebody selects on your product page a
particular size or color - sorry I should say in this instance a particular color,
the image on the product page will change to represent that. It's very modern,
it's very slick. And the black t-shirt. We've set all the images. I'm
going to save just in case something happens, I don't want to lose that. Update. Going back into the drop
downs, we can set an individual SKU, a price, a sale price if you wish.
You can select Stock Status if it's in stock or out of stock. The weight,
shipping class, tax class, description... Let me put a sample. Red
t-shirt description and some text. As you've noticed, all of this stuff is
customizable based on each variation that you have of that particular product.
You can then add a product image, this is the image that will first appear before
anybody selects a variation. And the product gallery - these are other images. Let's select our category Clothing and
Publish. Once I've done that, I can have a look at
the product page to see how that's been laid out. You can see our short
description example. The shopper has an option to select color and size. Why the
other variations are not coming up? - I need to research and figure out
now because it really should have a drop-down with all the different
variations. I figured it out. I haven't put a price for all the other
things here, let me just go ahead and do that. Let's say the Reds are 29 dollars,
the Blues t-shirts are 25 - let's say the Blues
were 25 and on sale for 20. Then let's say the black t-shirts
are 35 dollars. Just as a pure example, so we can see the variations on the product page.
Let me see if that actually brings up everything we need or if we need to
enter a description as well. Perfect! Now we can see our
t-shirt page, has a price range depending on the various options. I can choose a
red t-shirt in a particular size and it will tell me the cost of that
particular option. I can select a blue t-shirt, which I can see now it's on sale
like we put in. More importantly, when I switch that
from red to blue, the image changes because I set that image over here.
Then the black ones change image, it's 35 dollars. As you can see, that is how
to add a variable product to your online store. It's very very slick and the way
it functions over here on this page is extremely user-friendly. This is as slick
as it really gets. If you're having an issue with that, let me know and I'll try
and help you out. I've gone ahead and added all the
products to my eCommerce website, and when you'll do the same, you'll probably
scroll down your home page and wonder how do all the products actually get
there, because we've got a few different sections as you can see here. I'm
going to take you through exactly what they mean. If you want to customize or
remove any of these sections, you can go to Appearance and Customize, then
Homepage Control and deselect any of these boxes. For example,
we want to get rid of Fan Favorites that is the Popular Products. So that
disappears. It's really up to you what you want to display, but for now what do
all these other sections mean and how do they get there? The Category Images
are the ones that you set up when you set up your product categories earlier.
That's controlled by you. New In is generated automatically. These are the
newest products that you add to your eCommerce website. We Recommend
are products where if you go back to your dashboard and then to your
Products, All products, you'll see a star over here featured. If you click that
star, that is actually going to become a featured product and appear in the We
Recommend section. That's how you manage what appears in that section
there. On Sale, these are the items that are generated automatically based on what
you've placed on sale as a discount. So for anything that you place on a
discount, it will appear on this section here. That's automated logic. Best
Sellers is also automated logic, so your eCommerce site will automatically
display the items that have sold the most, so
you don't have to change anything there. That's a brief explanation of what
appears on the home page and why it appears and ways that you can manage
that. As you can see when you're creating your online store with
WooCommerce and WordPress, a lot of the stuff that appears on the Home page does
so with some automated logic. It's really quite intuitive and functional. At
the moment if you go to one of your product pages, you'll notice that there
is a sidebar - you're looking at it over here. If you want to get rid of that I'll
show you how you can do that. It's up to you if you want to
keep that sidebar and put some information about your online store,
your address or contact info on that sidebar, but I'll show you how to remove
that, and secondly, add that information to the footer area, so it's
out of the way but still accessible. First thing is go to Appearance and then
go to Widgets. At the moment everything in this sidebar section is
being reflected over here, you can see the About this Site area, two Find Us
areas and a Search area. There's the About this Site, Find Us and Search.
Simply you can click on the arrow and update the text or you can click Delete
and that will delete that item from the sidebar or alternatively, you can
rearrange this item - how it appears, in the sidebar or if you want it to appear
in the footer. There's a footer column - one, two, three and four over here,
and what you can do is drag and drop just like this and just drag it into the
Footer Column and that will automatically save. If you update
or refresh your page, you should see that take effect. There you go. It's up
to you how you want to customize that. I'll show you a couple of options. What
I'll do is delete this one, I want the sidebar empty. I'll delete the Search
and the About this Site. Perhaps I'll put in the first column Find Us, I'll put
in the second column some information about your online store. You can save
that information. There are some other things that you can utilize here,
in the left hand side the Available Widget section. You can see that you can
add the Cart to your footer, you will actually display the customers shopping
cart if you would like to. You can display the categories of your product,
you can display Contact Info and a Map, if you want to configure that.
You can also display products by ratings, it'll display a list of star ratings
to filter products in your store. You can also display a
list of your store's products or products search, or products
with recent reviews and I like this one: Display a list of customers recently
viewed products. If someone goes to a particular product, for example, a watch
and then browsers around your e-Commerce store and and they take scroll around, at
the bottom they'll see their recently visited products so I will add that in. And of course you can
also add in products based on rating. You can also add some social icons
if you'd like to do that and I'll show you how to set that up later.
Pretty Easy. There's a whole range of things that you can add. One of the most
flexible pieces of content or widgets is a Text Widget,
that one there, and you'll be able to put any text or embed in a YouTube video or
anything like that. You can also embed a video using this widget here.
Essentially decide if you want something in your sidebar, if not, delete or
move it. Add things in your Footer Column, maybe I'll put my categories in there as
well, in the fourth. You'll just have to use a bit of trial and error to decide
what actually looks good on your website. At the moment that looks okay, the
structure looks okay. We're missing something there and that is Recently
Viewed Products, so let me just see if I can go to a couple of different products. I'll keep browsing around... there you
go. The Recently Viewed Products has now been populated. That's pretty cool.
You can obviously update any of the information here by going to that
particular widget and clicking on the down arrow to update it as you need to.
Hopefully, that makes a lot of sense and adds a bit more space on your product
pages. If I go to a product page, you can see now that it takes up the
full width and it's no longer got the sidebar. For your
eCommerce websites, I recommend having a full width page and no distractions
because people can always find additional information if they scroll
around, but it takes their attention away from distractions and increases
conversions. I highly recommend minimizing distractions because high
conversions on an online store is part of that equation. The next step to making
an eCommerce website is for me to show you how to make a Contact Page that
your customers can contact you via phone or email. What we're going to do is
create a Contact Form. WooCommerce and WordPress makes it really easy to
set up a Contact Form on your online store. I'm going to show you how to
make that now. If you hover over Pages and click on Add New, you'll be able to
Add a New Page. You'll get this blank template, so let's
put Contact Us in the title. Let's make this a full-width template if we don't
want to sidebar, but if you do want a sidebar leave it as default template.
Let me just check something... Just click Publish for now. When you open
up that page, it will be a new page with that particular URL, which you can edit
as well. For example, we can just make it Contact, that already existed. That's
why it became contact-2, but you get the point.
That's now a blank page. I'm going to show you how to create a Form for
your eCommerce website. Go back in here and go to Plugins and go to Add New.
We're going to add a plugin that lets us set up a Form on our website. Search
for a plugin called WPForms. It's the one over here by WPForms,
got more than a million active installations. What you'll need to do
is click on Install and then Activate that. Once you do that and it's
activated, you'll see WPForms in the left hand sidebar. Just go to Add New. You've got a couple of different choices,
you can start with a blank form or you can start with a simple contact form and
then manipulate that, so we'll do that because it's a bit easier. We'll
create a Simple Contact Form. You can see it's already pre-built with first
name and last name, email and a comment or a message. If you click on any of the
fields, you'll see the Field Options tab, open up and you'll be able to configure
the label and also if it's a mandatory field or not. To add new fields we can
add these new fields in. These fields here are a premium feature that you need
to pay for - which you don't need to pay for actually, if you want to
pay for them, you can but for example, that it's got Phone as a premium
feature so you can't drag it in, but what you can do is just use a Single Line
Text area, click on that, change that label to Phone and let's say that's a
required field. Advanced Options... you can see some options if you need that
but it's not essential. Field Options... Required. We can
also rearrange the order in which the fields appear by dragging and dropping
like that, and then once you've got the fields in there, go to Settings, the
General Settings that Form Name. Let's just say that's called our Contact
Form. You don't have to put in a description, that's just for your
information. The Submit Button Text... let's say Send a Message. Then let's go to Notifications, we
want to leave notifications on. Notifications are the emails that you'll
receive when someone fills out the form. Send to Email Adress. You wanted to
send to your email address, this is picking up from your WordPress admin
email address - and to be super clear what that is. If you go down to Settings and
General, that's that email address over here. You can leave that
in there or you can simply just put in your own email address and
you can also separate multiple email addresses with a comma if you wanted to
send to multiple people. Email Subject, this is the subject line of the email
that you'll receive when someone fills it out. From Name is the name of the
person that fills out the form and it's already pre-configured to attach to that
field. If you want to check, just click on that there and you can click on
the name field and you'll see that's the same one so we'll just get rid of that.
From Email currently it's the admin email. But you don't want
the From Email to be your email address, you want the From Email to be
the field that's captured for the person filling in the details. Let's
click on this Hide Smart Tags over here and the Available Fields of email, we
want that. Let's get rid of Admin Email. You'll see all this work in a second.
Reply To... we want to reply to the person's email address and the
message that you'll receive is all the fields in the message. Then go to
Confirmation, you can show a Confirmation Message or you can redirect them to a
Confirmation Page if you would like, but let's keep it simple for now. Let's send
a Confirmation Message. For example, "thank you for contacting us! We'll get back in
with you shortly or within one to two working days". When you've done
all that click Save. After you've saved your form, we've set up all of the config,
we've set up the field, it's all saved. Next what you need to do is click the
Embed button. You need to copy everything in this field over here, everything
including the brackets. Right click, copy that. Now go back into your
dashboard - your WordPress dashboard, find the Contact page that you set up at the
beginning of this section. Now you can just paste that code in
there. It doesn't matter if you paste it in the visual tab or the text tab, in
this instance just paste it in there. Perfect! Let's click Update. I'll show
you what that looks like. Not sure why has a featured image, I'm
going to remove that. Perfect, there you go. There's your
Contact Form. In addition to that, you can also put in your details. For example,
just go to the area or give yourself some space above that code and say phone,
email address. You can put in your own details and then when you save that, it all reflects on the
front-end. Let's try that out from a customer's point of view.
Click the Send Message button and they will see that message.
"Thanks for contacting us! We'll be back in touch with you... - which we all
configured. And from your point of view, importantly, you'll get this email in
your inbox which I've just opened up, with all the details in it and then when
you click Reply, it will reply directly to that person's email address.
a really easy way to create a Contact Form on your online store and
WordPress, made it really easy to build that. But if you have any questions about
that let me know. The next step in creating your eCommerce website is - I
want to show you how you can create an awesome photo gallery to display all
your products in a nice-looking image gallery for your customers to view.
I'll show you how to build that very easily. Go to Pages and let's Add a
New Page. Let's call it something interesting like
Product Inspiration. I'm assuming here that you've got some of your images
already and I'm just going to show you how to actually set up the image gallery.
What you need to do is click on Add Media - actually, first make the template a
Full Width Template and then click Add Media. Make sure that Create Gallery is
checked. Then you can click here to select files from your computer and you
can upload them to your Media Library or you can select files or images that are
already sitting in your Media Library. I've got my gallery files ready on my
computer and here they are. All I'm gonna do is just select all of them and
drag them across, so they all get uploaded into my Media Library. This
should take a few minutes potentially based on how large your image files are. Once all the images are uploaded, you
need to click on the Create a New Gallery button down here, Link To... change
that to the Media File. Now what you can do on this page here, is caption
the image or you can leave that blank. You can also drag and drop the
images like this, to rearrange the order in which the image gallery is presented.
Click Insert - actually before you do that, columns at the moment are
set to three columns. I think four columns will look nice because we've got
12 images. It'll be four times three. Let's do that... it's completely up to you
by the way, and then click on Insert Gallery. Now hit Publish and we'll see
what that page looks like. We're not done yet but I'll show you what it looks like
now. There we go, we've got our page called
Product Inspiration. When somebody clicks on an image, right now it's popping up
into this other page and that's not a great experience because people can't
click anywhere, they'll have to go back and go to another image. So what I'm
going to show you next is how to have it, so that when people click on an new image, it
pops up into this awesome looking image slider and people can browse left and
right just like an image gallery. To do that, go back into your dashboard, go to
your Plugins area and Add a New Plugin. We're going to add a plugin called
Simple Lightbox. This is the one here. Just Install and Activate and
that's all you need to do. You don't need to configure anything with this
particular plugin, it'll just work directly out of the box.
Now let's refresh this page and let's click on one of the images,
and you'll see it's loading up and we have this nice gallery effect
where a user can browse through your product images without actually being
thrown off your store site and they can close this. It's perfect! Maybe this
doesn't look right, maybe you want five columns by two. It eally depends on what
your needs are. Maybe you want to add some captions or change the order. All
you need to do is go back to Edit Page. Let that thing load, then click there
on the pencil icon and that will allow you to make those customizations. Let me just show you what this looks
like. Perfect! I hope that all makes sense.
If you have any questions, please do ask. Now we need to customize your eCommerce
site menu over here. All we want to do is customize that. Perhaps you
can add your product categories and also your contact area but basically, I'll
show you how to customize it in any way you want.
We can also add your photo gallery to this menu here. To do that,
just go back into your dashboard, go to Appearance and then click on Menus. Make
sure from the drop down over here that Top Menu (Primary Menu) is selected.
What you're looking at here is the drag-and-drop interface. If you drag and
drop these items here and then click Save,
will reflect on the front end of your store when you refresh. Basically,
the way to do this is to add new menu items and you can do that in a number of
ways. You'll see a section over here, which has pages you can check. A couple
of pages, for example My Account or Checkout or Cart, and you can click Add to
Menu. Similarly, you can also add posts if you've created any and you can add some
custom links if you've created any. These categories are not the product
categories so they won't end up there, but what I want to do is add some
product category custom links. What I'm going to do is go to Products and
open the Categories in a new tab, so I've got this here. Each category - if you
click on View in a New Tab for each one of your product
categories, you'll see the products asigned into that category and each one will
have a different URL. This one is for Clothing. Let's copy the clothing product
category link, go back to the Menu and paste it in the URL of the custom link
and call it Clothing. Add to Menu. Let's do the same for
Gadgets and Travel. All I'm doing is adding a
new menu item for each one of our categories. If you save it just like
that. What's going to happen is those items will appear in a straight line. It
won't look very nice. But what we want to do is add a Drop-down menu.
Let's say we want to add an item called Product. So custom
links are a lot of custom linked with outer URL. I'm just going to put a
hashtag there and call it Products. Add that to menu. Watch this next part
closely, it's very cool and intuitive. I'm going to drag Products up second
place. After products I'm going to drag the clothing but not
directly, do it so that it's indented just like. That makes it a
sub item of the Parent item above it. Similarly, Gadgets inline with Clothing
and Travel. We've got the Parent level item and we've got sub items now. If we
indent these even further, this will become a sub item of that item there, so
we don't want to do that, but now what this is going to do is create a menu
structure. Perhaps we want to get rid of About. Perhaps we want a Contact Page.
Link in there, it's already there but I'm just showing you how to do that and we
can also rename that to Contact. Check this out so we've got our Home,
we've got Products with the nice-looking drop-down menu. Now people can go to
your products section and now narrow down to any one of the categories of
products that your offer. You can actually structure this in any way you
want. You can actually put individual products under this menu if you want, you
just need to add the individual links to those product pages as a custom
link in the menu. Anything you don't want remove. Cart is
already over here so you probably don't want Cart, you probably do want My
Account. My suggestion if you don't have a blog, get rid of that.
I'm just gonna clean that up now, I'll get rid of the second Contact, I'll get
rid of Cart because we've got that. My Account will keep because people will
need that. Will update it. One more thing I'll add is a Product Inspiration Page,
that's our photo gallery. I'll add that to the menu. Let's just call
that Inspiration. Save. There you go. There's a cool way to
adjust or customize your eCommerce websites menu in any way you want.
Beautiful-looking drop down there and your users can link to the relevant
sections quite easily. If you have any questions about that, let me know but
it's quite intuitive, so I think you should find that quite easy to use. I
think it'll be helpful to walk you through the WooCommerce settings because
your e-Commerce store can be configured in a few different ways. If you go to
WooCommerce settings, you'll get to this screen here. You can update your
address, your selling locations and shipping locations to
restrict those options to your customers. You can enable tax rates, the use
of coupons which I showed you a second earlier, and also set your base currency
in which you're selling in. In he Products tab you've got your shop page,
URL... that's automatically set up. We won't change that. You can enable or
disable reviews and ratings. In the Text Tab, you can set your tax rates based on
where you're living and what your tax rates are in your country or your state. In the shipping tab, you can configure
what locations you will ship to and also what rates you will charge for those
countries. Payments in this section I
won't go through. Accounts and Privacy. You can allow customers to check
out without creating an account on your eCommerce store. I actually recommend that you
disable that because it makes people create an account where they can see
what they've purchased and then track the status of that. Account Creation.
You've got some options around that. People will be able to
create an account and log into their In My Account Page, so people in this case I
want them to be able to create an account on the My Account Page. It's good
user experience and I also want to allow people to create an account during
checkout. Whenever you save something just click Save Changes. There's also
some personal data retention rules here, which is really good because it helps
with rules pertaining to data privacy. Especially if you live in the EU, that
can come in handy so definitely consider that there. The Emails tab. This basically lists
every email that your customer will receive. This is the email upon
creating a "new order" and you can manage that email by clicking on the button
here. You can create an email for a canceled order or a failed order and all
of these other things. And if you want to disable any of those, just uncheck or
deselect by going into the manage area and disabling it by clicking that
checkbox there. It's really up to you how you want to set the rules around
that for your customers. Every customer is different and you need to do what's best
for yours and what works for your customers. You don't want to spam them
but you do want to keep them updated and also enable them to come back to your
site, if they for example, added products to the Cart but cancel at Check Out.
The Advanced tab is things to do with the page setup. All of this is standard,
we won't change any of that because it's all pre-configured and it all looks good.
But if you do have a bit of an advanced knowledge and you go through this and
want to make some tweaks and edits, this is where you'll refer to change the
engine behind WooCommerce and its settings. One of the core pieces of
functionality to add to your online store is the use of a coupon. You can
make and advertise various promotions, by going to
WooCommerce, clicking on Coupons, Create your First Coupon. You can enter any coupon code you
want, for example, 10OFF. This description is for you to know: 10% ofF
particular items and you can go down here and choose what you want that
coupon to do. Discount type, you can have a fixed cart discount so that's a
fixed dollar amount, you can have a percentage discount and a fixed product
discount. In this case I'm going to say a percentage discount. The coupon
amount is the value of that particular discount, so it's 10 in this instance.
That is not related to this - just to be clear, I'm going to put in here "Discounted."
Coupon amount is 10, what it's going to do is give 10% off. You can
enter an expiry date if you would like. Usage restrictions... you can have your
customers make a minimum spend. A popular thing in retail stores is to
have a minimum spend, only if they achieve that minimum spend, for example
50 dollars is that coupon then available. You can exclude sale items if items are
already on sale. Then you can add which products you want to be eligible for
this particular coupon and you can exclude products from being eligible for
this coupon. You can add entire product categories, for example, everything in the
Travel category. Or you can exclude certain categories. As you can see all
of this logic is actually in-built into Woocommerce and it makes running your
online store so efficient and easy for you. Ycan also apply usage limits.
How many times can a person use the coupon? It can be unlimited or you can
make it once, twice for example. You can limit usage to a number of items and you
can limit usage per user. - Sorry. That one is a limit per coupon
For example, this coupon can only be used once. Most coupons should be unlimited
because you want everyone to be able to use them but you might place a limit on
each person only being able to use it once. After you've done all that, just
click the Update button and I'll show you how that works for your customers.
If I just open my store in a new window so I'm not logged in, and I'll go to the
Travel section - because I applied that coupon to the Travel category. I'll add
this bag to Cart, View my Cart and then here I can enter the coupon code.
The coupon code was "discounted", so this is the coupon code that you would give
to your customers, for example in your promotions. Let's apply that coupon.
As it says here, the minimum spend for the coupon is 50 dollars, and that's perfect
because we did set that to a minimum spend of 50, so that works perfectly. Now
let's just update that quantity to two, so we can demonstrate. Apply that
coupon again. It's applied successfully. I can see
here that the subtitle is 90, which is minus 10% and your customer now can
proceed to checkout and do what they need to do. That coupon is working
perfectly and you can customize the logic behind the coupon using these
usage limits, using the usage restriction and the products or the categories that
it applies to. I hope that's useful and think outside the box for this. Maybe you
want to do a Christmas promotion or a Valentine's Day promotion and you can
give your customers a coupon for use between particular dates and give them a
percentage of or a dollar amount of above a minimum spend. That's what I
suggest, use it to your advantage. If you have any questions about that, please
do ask in the comments of this video. One of the easiest ways to maximize the
money-making ability of your eCommerce store is to take advantage of upselling
and crossselling of products. If you go to stores like amazon.com you'll see
that they upsell and crosssell very effectively. For example, let me
show you something. If I click on this thing here, it also shows me this area
here. Frequently Bought Together. This is known as a crosssell. If I'm buying a
coffee machine, they'll often try and cross sell me the actual capsules with
that machine. It's a way to increase the revenue from your existing customer
base. You can do that easily in your eCommerce store as well, using
WooCommerce. If you go into Products and All Products - let's find an example.
Let's say this traveler bag over here. a customer is looking at that
product there. An example of an upsell could be a more expensive
traveler bag if you have one, or a leather bag for lack of a better example.
An example of a cross sell is what do travelers use often when they're
traveling and perhaps, that is a set of headphones. If we go into the traveler
bag area, if you scroll down and go to the section
called Linked Products, you've got a section here to add products that you
want to Upsell and Crossell. What you need to do, is search for a product.
If you look at your product listing here, when you hover over your products,
you'll see a product ID. If I want to have a leather bag as an upsell, I can
start typing in "leather bag" and just to make sure I can check that the ID of the
product is 71. Let's type that in. Leather Bag. WooCommerce will search
through your store and that's the one item number 71. Perhaps
people that are traveling also use headphones and they make a good combo
together. Perhaps people that are buying a traveling bag will also
purchase the headphones on their checkout. Let's put "Headphones," item number 72. That's correct
You don't have to stick to one product, you can add multiple products to
each one of these things here. Let's update that and I'll show you what that
looks like. I'm going to open that product in a
new window. Say I'm a customer, I'm looking at this traveller bag, I'm
reading about it... I come down here and You May Also Like - that's perfect. By
adding it as a crossell, this is now showing up in a new section
called You May Also Like. If you add further products they'll show up right
here. It's a perfect way to get people to buy more stuff. If I say let's add
to Cart and then I'll go to my Cart. Check this out, "you may also be
interested in a pair of headphones" - how good is that!
On the way to the checkout, the customer will be presented with an option to
crossell them with another accessory that is related to the one they're
buying. That's perfect. You should really use these features to your
advantage to generate more revenue wherever possible. It's one of my
favorite features to use. Please don't underestimate the power of this.
One of the most important parts of your eCommerce website is accepting
payments. To configure your payments, just go to WooCommerce
and then Settings. When we initially set up WooCommerce, we did add a payment
method but I'm going to show you how to configure or change what we've done
there. Go to the Payments tab, there's a couple of different ways that
I recommend. The first one is PayPal checkout, that's probably the easiest way
to integrate payments to your online store. If you click on Manage there,
- I'm just going to open up my store in a new window so I can show you a couple
of things. Enable PayPal Checkout. You can
change the title if you want, it's the live environment. This is the email that
is associated with your PayPal account. If you don't have PayPal just go to
PayPal account, sign up. The way PayPal works is there's no numbers or anything like
that. You get paid based on the email address associated with that account.
That gets entered in there, you can enter your brand name in here, some logos and
stuff like that but the important part is down here. At the moment if I go to a
particular product, I can see there's two options PayPal and PayPal Credit. To be
honest, we don't want these PayPal Credit. It's a bit of a distraction, so you can
actually get rid of it by disabling it here. You can also say you want to unhide
the credit card payment method because not everyone has PayPal to pay with, but
the beauty of PayPal is people can use their credit cards to make payments. I
can get rid of that and then there's a few more options here that you can look
at in your own time. That's in a nutshell PayPal Checkout. It's very
simple, the way to connects to PayPal is your email address. That's enabled. If
I go back to the Payment section, there's another PayPal in here. It's called
PayPal Standard. The difference here is that PayPal Standard does a few more
things. Firstly, it does allow credit card payments as well, it also links to
your PayPal via your email address. We'll enable that for now. You can do a
Sandbox Environment, which is a test environment to test your payments and
your payment processes before actually going live with it.
The advantage to PayPal Standard is this thing here - API Credentials. You can
also process refunds via PayPal and if you process for refunds via PayPal or if
you process them via your e-Commerce website, they will both be in sync. The way
to do that is go into your PayPal account, click on the Settings icon here
in the top right, then go to Selling Tools. You then go to API Access and
click Update. Scroll down and go to the NVP/SOAP API Integration. Click
Manage. There are three bits of information here, the API username,
password and signature. If I click one of these, it will show the actual
information. I won't do that because this information is private, same for you.
Don't share that information with anyone but what you need to do is click on each
one and copy and paste each one of those in these fields here. I'm
just blurring my screen. I won't paste it in because, to be honest I shouldn't be
showing this to anyone. It's all private information, but what you do then
is press Done. Save the changes here and that will actually connect your PayPal
with your eCommerce store, so that you can process refunds. It's quite a
versatile method of payment. You'll notice that because I updated
the previous screen and remove PayPal Credit when I updated that. That's now
gone. There's a PayPal by now, I'll click on that. Your customers will have the option of
paying via PayPal or like most people, paying via a credit or debit card.
They'll click on that button there, they'll enter all of their details,
they'll hit Coinue and ou'll receive a notification that your product
has been sold and you'll be able to ship to them and that money will then be
received in your PayPal account like I showed you at the very beginning of this
video. That's how to set up Paypal and other payments. Other options you have
- things like Stripe, but we haven't integrated that at the moment - Direct
Bank Transfer and Cash On Delivery if that's something you want to accept.
That's how you set up payments using WooCommerce. If you have any questions
around that, please let me know, but a lot of the questions around this may
actually be with PayPal so you might want to check with them. But once it's
integrated, it's pretty streamlined and efficient. You'll find it very easy
to manage and receive payments through PayPal which you'll then transfer into
your own bank account. Simple as that. Congratulations if you've made it this
far! You've saved yourself about ten thousand dollars with agencies when
you're making an eCommerce website, otherwise known as an online store. We've
helped you to make this one in about a couple of hours. Of course it'll take you
some time to add your products and all of that stuff, but it works seamlessly
and it's a beautiful experience for your customers. If you have any questions
please do ask in the comments below and we'll be happy to help you out. But
please we ask you to try and share this video on YouTube and on social
media by clicking the share button and hitting the thumbs up button because
that's the only way that this will get out there. If we can help you with
anything, we'll be more than happy to do so, so please get in touch. Until then,
we'll catch you in the next video.
