How to Create an Online Store (eCommerce Website) in 2019. WooCommerce & WordPress Storefront Theme

Hey guys, happy new year! I'm going to
show you how to make aneCommerce Website, otherwise known as an Online Store, in 2019.It looks fantastic, it's seamless, we can
accept payments and it's a beautifuluser experience. Just follow me step by
step and you'll be able to make thisonline store within a couple of hours
using WordPress, WooCommerce and theStorefront 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 thencheckout. Pay by paypal or use my credit
card which I'll do right now and showyou a live transaction. I can make this
payment using my PayPal account as acustomer – or like most customers will do,
with a credit or debit card. I'mgoing to enter all this information. I'm
going to blow my screen and then hit theContinue button. That's done. I've
made the payment and this is my ownPayPal account from a seller's point of
view and here's the transactionthat I can see from the payment I've
just made through my store. We'regoing to show you how to set all of this
up. Here's something else that's prettycool: your eCommerce store will be able
to change images based on the optionsselected just like that, and it's going
to be easy to set up, and it looksfantastic. Here it is on a mobile phone
as well, you can do everything you did ona 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. Theycan apply coupons and proceed to
checkout as they normally would. Themobile function works perfectly as well,
it's 100% responsive and you don't needto do anything additional. Everything to
build this ecommerce website iscontained 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 morethan happy to help you out. Watch this
through to the end because we're goingto show you cool things such as adding
coupons, configuringinspiration page with images and stuff
like that and it's going to be reallycool. Here is a list of notable WordPress
users. WordPress is a content managementsystem used by more than 70% of
worldwide websites and there's some hugenames here: Forbes, eBay, Jay-z, Reuters…
massive names that use WordPress.We're going to be combining WordPress
with something called WooCommerce, bothof them go hand-in-hand to work on the
WordPress platform. WooCommerce as itsays here, is an e-commerce platform for
WordPress and it's a really easy way toset up and start selling your products
online, so you can start selling in yourcountry or you can go global. If you go
to the Storefront framework, you'll see atheme called “Storefront” and this is the
theme that's built with WooCommerce andit's the standard theme. You'll see
WooCommerce Storefront goinghand-in-hand and that's the theme we're
going to use to set up your website, andwhen I say theme, I mean design. Let's get
started! The first thing we're going todo is get you online.
Once you're online I'm going to show youhow to install WordPress, once you've
installed WordPress, we're going toinstall WooCommerce and then, we're going
to add products andconfigure payments. A very simple
process. If you have any questions alongthe way please do ask in the comments
below. Folks, the first thing we'regoing to do is get online because for
any ecommerce website, of course, youneed to get online first. In the
description of this video is a link thatwill take you to our eMediaCoach website.
This is a page for our old demo but I'mgoing to create a new one and link to
that in the description below. Whatit will serve as, is a one-page checklist
for everything you need, quick links thatyou need, any downloads… I'm also
going to add a Frequently AskedQuestions section, so it's easy for you
to see things that other people haveasked and all of that stuff. Anyway, go
down to that page, and click on theHosting-Get 60% Off, link there and it
will take you to a page on the Hostgatorwebsite
and I'll explain what that is in asecond. Either will take you to this
page here or it will take you to themain Hostgator landing page. Either one
is fine, but just make sure you first goto our checklist and then start there.
Once you're on this page, just click onWeb Hosting.Hostgator is one of the world's most
well-known hosting companies. Hosting iswhere your website's files are stored,
it's what allows a website to be viewed24/7, it's where all the images, text
and design will be stored. Whereas thedomain name -which is your business.com
name, is actually just the address, notthe contents behind it. I'll show you
how to get both very easily right nowwith Hostgator.
They've got 24/7 support and Ipersonally have been using them all the
way back since about 2004. There are acouple of different plans here. We don't
need the Business Plan, the Baby Planwill give you unlimited domains, the
Hatchling Plan will give you a singledomain. The domain is your websites
Address, that is your .com domain name or.net, whatever you choose to register.
I recommend the Hatchling, simply becauseif it's your first time making a website
you'll only need to register a singledomain and you can always upgrade later
on if you would like to. If you wentthrough the link that I provided, that
link gives you a 60% off discount, so goahead and select one of the plans.
I recommend the Hatchling, is thecheapest 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, whateveryour 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 /.netare 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 tothree years.
The longer you subscribe for, the cheaperit is of course, and I'll show you how to
get a discount on any one of thesepackages even more than what's shown on
the screen right now. What we'll donow, is just go down to the end, go to
Coupon Code and type in the couponONLINESTORE and hit Validate. If you've
done that right, you'll notice the priceis actually cheaper than what it was
just now and you'll get a whole range ofdiscounts depending on which package you
want to choose. Please do use thatdiscount code.
That discount codegives you a discount off your total
Total package,but there's another one: 1DIRTYCENT
that gives you a discount off just thefirst month but then you'll be rebuild
at the regular rate after the firstmonth. I'll just give you your first
month for free but the rest will be atthe regular rate. I really recommend
that you take advantage of the biggestdiscount possible which is this one here:
ONLINESTORE. After you've selectedthe package you want – I normally go for a
12 or 24 month period because it's veryreasonable and you can also cancel at
any time and get a refund off theremainder of your term. Just keep that in
mind as well, a little tip there. Enter ausername, 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 thencredit card details.I'll just enter my credit card
details. I'm obviously going to blur myscreen. Or you can use PayPal. Once you've
done that, just scroll down. There are afew additional services offered here and
I'm going to be really honest, you don'tneed them. So I'm going to deselect this
Protect Your Site From Hackers thing, theSSL is included free, that's great.
You don't need to add this, you can setup your email once you've got your
hosting account ready. There's no need topay for Google Cloud email, your new
email will be whatever you want atwhatever domain that you're registering.
For example, yourstore.comThere'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 onehere. We don't need any of these
upsells, what we need is the hostingpackage because that's what we need to
get our site online. Just checkeverything's in order and once you're
happy with that, go down, accept the termsand conditions and click Checkout Now.
When you use one of our links on ourwebsite – just for full disclosure, we
receive a small referral credit fromHostgator. This doesn't cost you a cent,
if anything, you're getting a bigdiscount of your hosting package, but
this credit does help us pay for thesetutorials and the costs associated with
running this YouTube channel. Wesincerely appreciate your support behind
that. Hit Checkout when you're ready.After you create your account, you'll
receive an email that looks like thisfrom Hostgator and it will contain your
account details, such as your controlpanel URL – which I'll show you what to do
in a second, your username, thedomain you registered, your password,
as well as name servers. If you bought adomain 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 doneeverything like I have from Hostgator to
get your online store, you won'thave to do anything else.
If you don't receive this email, justcheck your junk folder as well, because
the next step is to log into yourControl Panel using this link here and
then install WordPress. I'll show youhow to do that now. Let's click on
this Control Panel link. Then, all youneed to do is copy and paste the
username and password found in thisemail. That username and password
make sure don't have anyspaces at the beginning or the end, or it
won't match up exactly and you won't beable 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 reallywon't need to access this too often but
for now, we just needed to installWordPress and then continue on with this
process. The next thing you need to do isinstall and log in to WordPress. WordPress
is the content management system, it isthe platform that we're going to use to
manage the content on your entireecommerce website and it's a really
easy-to-use platform. Your online storewill be really easy to manage. The way
to do that is, if you see something likethis, build a new WordPress site link in
your cPanel once you log in, click onthat. 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 toWordPress. Either way, get on to the
WordPress installation page. There areoptions to install it for you and we are
not going to be needing that at all. Wewant to install it for free, it will be
absolutely for free and there's no needto pay anybody for that. What we need to do
here is select your domain, in your dropdown here, you'll have just one domain
because you'll only have just createdyour account. But I'll have
multiple. I'll just need to click onthat and select my domain. For our online
store, of course we're using a domaincalled the “storedemo.com”
There it is.Leave this directory field in blank. The
reason is we want to install WordPresson this domain, not on a subfolder of the
domain, leave that blank, then clickNext. Give your eCommerce website a
title, this can all be changed later.Let's dress put in an admin username,
your first name, last nameand also an admin email, that is your
email address. That's importantbecause if you ever lose the password or
you need to reset your password, it'll besent to this email address over here, so
make sure that's correct. All of thisother stuff is changeable later on but
you do need to add it for now. You willneed to keep this enabled or don't
automatically create a new database forthis 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 platformonto your hosting account so you can
manage your entire online store. ClickInstall 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 whenthat's done, you'll see something like
this to let you know that theinstallation of WordPress is complete.
It will give you your usernamethat you added on the previous screen,
and also your password which will changelater. For now, you will need to copy this
and just paste it in a notepad on yourcomputer. Just paste that somewhere so
it's easy to find your login detailsbecause as soon as you click on this
Log In button you're going to lose thatinformation. Alternatively, right click
in Log In and go to a New Tab, so you don'tlose 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 yourusername and password, this is the login
to your WordPress dashboard. It is thelogin to the management of your entire
online store, it's very important thisone here. A lot of you watching this will
not see this screen as soon as youclick Log In, and
the reason is you've only just purchasedyour hosting account and it takes
sometimes 24 to 48 hours for yourhosting account to be enabled and for
your domain – that is your websitedomain .com and your hosting to be
linked up. Most of you will actuallynot see the screen straight away. What I
recommend is either one get in touchwith me if you're confused about what to
do, -you'll probably see a blank screen, orsecondly, go to Hostgator.com and this is
the preferred option. Go to Hostgator.comclick on the Live Chat and then enter
your details. If you don't know any ofthis, don't worry, just say New Customer.
Let them know that you've purchased, givethem the details of your purchase that
you'll see in your email here and theywill let you know what the status of
your account is. Once that account isactivated and your hosting is linked up
to your domain, don't forget your domainand your address is separate from where the
files are stored. Once they're linkedup, they will advise you or expedite that
process. Once that's all done, thengo to your website.com
forward slash, WP, dash, admin – that's the thingyou need to remember: your website,
forward slash, WP, dash, admin. Once you goto that URL and everything is activated,
that is when you will see this screenhere. It's just a little bit of a hurdle
to get to this screen but trust me, it'llbe all worth it. I recommend writing
that down as well. Your website – whateverit is
.com / .net – whatever it may be, forward slash,WP, dash, admin. That's your login page. If
you're confused about that, please dosend me an email, a hello, at
eMediacoach.com and I'll let you knowwhat to do next. If that page is
appearing for you, just enter theusername and password and log in.Then you have folks! This is your
WordPress dashboard. This is the enginebehind your entire eCommerce website and
everything you'll do to set up, manageand maintain your online store. I'll show
you exactly how to use this platformstep-by-step. When you first access your
WordPress dashboard, I tell all of mystudents to do some basic website
configuration, just some basic setup andI'll take you through exactly what you
need to do. Firstly, if you go down to thesettings area and hover over that and go
to General, you'll see the Site Title. Youcan change this to anything you want and
this is your website title, whateveryour online store is called. You can also
add a tagline and then atthe bottom, you'll see a button called
Save Changes. What I recommend to allmy 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. Allthat means that in the browser it
will appear as www.website.com ratherthan what you're seeing here. But this is
something you've got to be very carefulwith. Make sure you're entering it
after the two slashes and before yourdomain name. If you do that incorrectly,
it will screw up and you'll have todelete your entire installation and
start again. Just be very very carefulwith this step. After the two slashes, WWW.
then your domain name. Make sure you alsodo it in this field here.
Double-check, triple-check that to makesure it's right. The email address here
is the email address that will be usedas it says here, for admin purposes. For
example, if you lose your password, that'swhere a notification will be sent so
make sure that's correct. When you dothat step, click Save Changes and it will
actually log you out automatically andit will ask you to log in again, only
because the URL has now changed. Letme just get that again.Perfect. The next thing I tell all
of my students to do is go down toPlugins. A plugin is an additional
feature or piece offunctionality that is added or bolted on
to your base WordPress installation. In allof the notifications you're seeing here,
there's a lot ofclutter and a lot of that is
because of plugins. We really want tostart 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, someare 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 anddeactivate each one individually. Then go
back. Bulk Actions and Delete. Apply. Oragain you can delete each one
individually. The reason I'm doing thisis because we don't need most of this
stuff and it's just adding clutter and Ilike to start with a clean installation.
Perfect. All the plugins have beendeactivated then deleted. Next, I need you
to go and hover over Posts and click onOld Posts. By default when WordPress is
installed, you'll get a couple of postsand 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 inthe Trash Can. You'll be able to hover
over that and delete permanently. Thesame thing for pages. If you hover over
Pages and go to All Pages, you'll noticethat there's a couple of things
installed by default. Just move all ofthat to Trash and then delete them
permanently. Very simple. The next thingis very important. Hover over Settings
and go to Permalinks. The Permalink isbasically the link structure of a page
or a post on your website. What I needyou to do is delete everything.
First click on Custom Structure, thendelete everything in Custom Structure.
Then the way I want you to structureyour permalinks -and I'll explain why in
a second, is first click on Category andthen click on Post Name and Save.
Whenever you create a post, for example, ablog post, your URL structure will be
your website, forward slash, the categorythat 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 forsearch engines to read what your page is
about. As opposed to something messy likethis: your website, forward slash, date,
forward slash, the name of the post. It'snot a very nice way to
structure your links. So this is bestpractice and it's something I've highly
recommend. When you've done that,Save Changes
and that is all we need to do in termsof a basic configuration and site setup.
Now what you've got is a cleaninstallation of your website. Your
website is live to the public, this iswhat it looks like. You can go to your
domain right now and this is what itwill 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 inprivacy…
no, definitely Reading. Make sureDiscourage Search Engines is not enabled.
We want to encourage search engines tofind our website. It's okay if you're
building it and you still haven'tfinished, but you want to get that
process startedwhile 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 tobe the engine behind your eCommerce
website and it will allow you to doeverything from setup products to
configuring customization options, and ofcourse, getting payments from your sales.
It's pretty simple. WooCommerceactually have a setup wizard, but the
first thing you need to do to installand activate WooCommerce is go to
Plugins. Hover over that and then clickon Add New. Then search for WooCommerce.It should be this one here that's got
more than a million installations andmore than 3,000 reviews, so click on the
Install Now button. Like I said, a Pluginis something that adds extra
functionality to a basic WordPressinstallation, this is a great example.
Click on Install Now and then clickActivate. Perfect. So automatically you
should see this WooCommerce setupwizard to set up your online store. What
it will do is take you through thevarious steps to set that up for you, so
this contains the Store setup andthe Payment setup, Shipping and other
things to get your basic store settingsconfigured and ready. Let's just
follow it through. Where is your storebased? Mine will be in the US, obviously
just pick from that list based onwhere your store is. Enter your store
address or your address in here. You canuse a dummy address if you would like to
for now.I'm just putting some dummy
information there for myself, forthis demonstration. Select the currency
you want to accept payments in. What kindof products do you expect to sell? You
can select Physical or Digital or both. ADigital Product is one that, for example,
somebody pays for and then downloads adocument or PDF or something like that.
It's a digital online product such as ane-book. Or as a Physical Product. Of
course physical goods that you willship. Let's just say we're planning on
selling both for now, and then you've gotthe option of letting WooCommerce
improve Usage Tracking, that's optional.Let's go…The Payment screen. You've got a
couple of different options foraccepting payments. If you've got
Stripe, set up. You can actually acceptpayments via Stripe, accept
payments via PayPal and if you haven'tgot a PayPal address already, I recommend
you sign up for one and sign up for abusiness PayPal account. For now, I'm
going to demonstrate this tutorial usingPayPal, so I'm going to disable Stripe,
leave PayPal enabled and then in thisfield here, you'll need to enter your
PayPal URL. -Sorry, yourpaypal email address. That is the email
address associated with your PayPalaccount, so that when somebody makes a
payment for a product, you receive thatinto your PayPal account. It's very
simple to use PayPal. If you haven't gotthat, you can skip that for now. Let's
continue. – I'll show you how to configurethe 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 theworld. Below, you can set a flat rate,
you can change all of thislater 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 shippingcosts, yes, that's enabled. Let's say I'll
charge 12 US dollars for that. LocationsNot 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. Now12 in your own country is probably
depending on what the product is. It maybe high or low. Just work out what
your shipping costs will beapproximately, but we can also amend this
later on. Nothing we're doing here isset in stone. If you want to offer live
rates for a specific carrier, for exampleUPS, you can also activate an extension
for WooCommerce. I recommend you do thata 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 gonnause kilograms, this doesn't
make sense because we're in the US butthis is just an example.This is all the recommended
plugins or additional items thatthey recommend for WooCommerce stores.
The first one is the Storefront Theme.In other words, the
design that we're going to be using, thatyou saw in the demo at the very
beginning of this video for your onlinestore. 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 particularlocation. I'm not a tax
advisor, I don't know how much tax youshould charge but that's all
configurable within WooCommerce.Also MailChimp. MailChimp is a great
way for you to add customers to youremail address book and you can therefore,
follow them up with other marketingoffers and promotions. It's basically a
marketing campaign tool. I won't becovering that in this video but in a
future video. What I'm going to do isjust Deselect MailChimp for now
because I just want to take you throughthe basic setup, so let's continue.Connect your store to Jetpack. What
you need to do here is install theJetpack 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 Googleaccount.
That's a quicker option but for now I'mjust 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 tipsand all that kind of thing if you would
like to. You can start creating a productbut I'm not going to show you how to do
that from here. I'm going to show you howto do that from your WordPress dashboard.
Let's go and visit our dashboard byclicking here or you can go to your
website, forward slash, WP, dash, admin, to getthere. 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 soit's super clear. If you go to
Appearance and click on Themes, you'llnotice that you've now got your active
theme that is Storefront. If you by anychance, don't have that, all you need to
do is go to Add New Theme, search forStorefront 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 nowis start installing or configuring the
homepage for your online store. What youneed 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 AddExample Products. That's perfect because
we will now see a sample of what ourreal products will look like on our
homepage, so let's go. That'll just take afew seconds to load.Perfect!
Now this customized area over hereallows you to control what you want laid
out on your website, we don't need thetour. I'll show you that later. This is
your current Home page. It's set up theHome page and it's also added some
sample items so you can see what itwill look like when you create your
products. If I click the Publishbutton now, and then go to my website…There you go.
You'll see that it's already takingshape and now obviously when you start
adding in your categories over here oryour products over here, this page will
update. You can also configure whatyou want it to show, you don't have to
show all of this stuff. You don't have toshow New In, Recommended or On Sale,
but this is a great example of yourHome page layout. As you can see, we're
making some fantastic progress here. Thenext thing we need to do is add our logo
because it's not showing up at themoment. So back to Customize and Site
Identity. Let's Select the Logo, UploadFiles, select your logo file from your
computer. I'm going to assume herethat 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 aresource that I recommend for getting a
logo, made quickly and effectively foryour online store. For now, I'm just
going to go to my computer anddrag-and-drop the logo on the page here
and that will upload to what's calledthe Media Library. Then click Select.
You can crop that if you likeand then Publish.If I reload the website, you'll see
the logo in its place, it's starting toreally take shape. Again, if you don't
have a logo ready to go, please check thedescription. I'll put in a bit of a
detail around where you can get one madepretty effectively and I recommend
that stuff to all of my students and myclients. I'll put that detail in the
description below. Something else youshould just check if your homepage is
not appearing yet, is in your Customizedarea. Go down to Homepage Settings and
just make sure that your Home page isdisplaying a Static Page and you've
selected Home as your Home page. Savethat. That's just in case your home
page isn't displaying. Now I'd like totake you through how to customize your
Home page. At the moment this is whatit looks like, this is all the demo
default content when you installed aStorefront. If you click on one of
those things, you can actually see whatyour pages will look like in detail and
it looks absolutely fantastic at themoment to be honest. When making an
eCommerce website it's a cool idea tohave a slider on your Home page. I'm
going to show you how to do that. Backinto your dashboard, what you need to do
to add a slider is go into Plugins andclick Add New. We're going to be
installing a new plugin. We're going tobe adding on this functionality so that
we can have a nice-looking slider onyour online store Home page.
What you need to do is search for aplugin 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 scrolldown to the Homepage Settings, you
should see this box here where it saysyou can insert your Meta Slider,
Smart slider or any other slidershortcode here. What we need to do now
is install a slider, the images andthen 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 plugincalled 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 UltimateSlider in the sidebar. Let's click on
that and Add New. Now, we're going to addsome new slides and then we're going to
put them on our Home page. Entera title for your slide and keep in mind
this title will appear on your slideitself.Then go down and click on the Featured
Image and select the image from yourcomputer that you want to display as the
slider. When you click here, it'll askyou to select the file from your
computer or alternatively, you can go toyour 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 sliderimage and then set as Featured Image. You
can also add a Button and some buttontext, and you can link that somewhere as
well.In this part here, it's saying to use
the featured image over here. Let'sclick Publish when that's done. I'm
just going to add a couple of more slidesas well, just very quickly.Next what we need to do is
set a category for each of the slidesyou've created, so let's Add a New
Category and let's call it Home, and addthat category. Then just update again.
I'm going to go to the other slidesI created and select that same category
because we want them all associated withthe Home page.
There we go.Now that we've all assigned the
sliders to the Home page Category, what weneed to do is go to the Slider
Categories tab over here on the left, andit will give us a thing called a
Shortcode for those three sliders. Whatwe need to do is copy that entire
shortcode (including the brackets), andonce you've copied it, go to Appearance,
then Customize and then down to HomePage Settings. We'll need to paste
that shortcode in here and you shouldsee that load on to the page. There
you go… there is a lovely-looking homepage slider. Click Publish when you're
done. This the reason that first one wasblank, because we didn't assign the
image correctly. If that happens toyou, all you need to do is go back in to that
particular slider and ensure you've seta featured image. I'll set that and
then update.Give it a couple of seconds to
load and then let's check out our onlinestore to see what that it looks like.
Absolutely perfect! That's starting toreally look good now.
Here's what our website looks like withthe slider in place. – Just a quick note, as
you can see, there's this timer barthat's loading and we can actually
customize or get rid of that if you wantto. 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'scurrently doing.
The slides are changing every sixseconds, the Aspect Ratio is something
you can change as welland you can get rid of this timer bar
completely if you don't like that, and Idon't, so I'm gonna get rid of that. You
can also change the dots down here but Ithink they're quite good so I'll leave
that and I'll just put in here to linkthe buttons to the same window and save
that. When I refreshed, you shouldbe able to see that. The
timer bar is gone too easy. Last but notleast: if you'd like the slider to be
full width and take up the entire widthof 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 ShowFront-page Slider on All Pages. That
will then make it a full width and it'llalso 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 thatlooks like.Perfect! That looks pretty cool. What will
happen then, is that you'll get this module underit as well over the slider. So you'll get
two sliders. You need to remove thisbit here and the way to do that is
go back and going to HomepageControl 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 youronline store.Of course if you don't want that
slider to appear on all pages you'llobviously have to go back and remove
that setting over here. That'sabsolutely your choice, it's completely
up to you.The next step to building your online
store is – I want to show you how tocontrol all of the modules that appear
over here on the home page. As you cansee, by default we've got a category for
New Things, We Recommend, FanFavorites, On Sale, Bestsellers, and we can
manage that on our Home page. A way todo that is to install a plugin called a
Home Page Control. Go to Plugins andAdd New and search for Homepage Control.That's the one here by WooThemes.
Install that one and activate. Oncethat's activated you can go to
Appearance and then Customize. You shouldsee a new section here called Homepage
Control. Click on that and you'llnotice that everything is enabled. As
an example, if I disabled productcategories – this is our category
section over here – if I disable that, youwill see that particular module is gone
from the Home page similarly. I want tokeep that, that's pretty good.
Similarly, if I choose that and I don'treally want something like Fan Favorites,
then I can find and disable theappropriate tab and Fan Favorites. I
believe should be Popular Products.There you have a way to easily
enable or disable what kind of notjust categories but
subcategories you want to show. Theseitems 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 automaticallycome up in the On Sale section.
There's how to customize the homepagesections.
Thirdly, we can also customize thissection over here. If I just click on
the cross there, I won't save any changesfor 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 pageand this title and text correlates to
this stuff over here. I can changethat or I can get rid of the title
all togetherand press Update. When that finishes
loading, you should be able to refreshyour website and see that take effect.Perfect!
The next step in learning how tomake an eCommerce website is of course,
adding all of your various products toit. You've already seen that there are
a few categories that are set up bydefault and also some products that are
set up by default, but now I'm going toshow you how you can actually add this
stuff so you can load up your eCommercewebsite with products and start making
sales quickly. To do that, back intoyour dashboard, if you hover over
Products and go to Categories, what we'regoing to do first is configure these
higher level categories first before westart setting up products that fit into
each category. A good way to do thisis brainstorm. What categories your
products belong in? For example, is aclothing? Is an accessory? is a
gadget? We can see by defaultthere's some stuff set up here by
WooCommerce but we're going to ignorethat for now
and what we're going to do is create newcategories. Go down here and actually
first, you'll have to put in some detailsabout your new categories. I'm going
to set mine up in three categories. Onewill be called Travel Slug. That's a URL
friendly or search engine friendlyversion of your category, so that's
pretty clear. Can be Travel as well. AParent category is if it's a subcategory
of one of these already created. Parentcategories which it's not its own
category at the moment, you don't need toput in a description. I'm just going to
double check how WooCommerce set upthese other ones just to double confirm.Accessories, accessories, no parent.
Display Type is defaultand it's got a thumbnail.
Okay.Display a type default and thumbnail.
The thumbnail is the image that appearson the home page over here, that's the
image over there.So let's upload an image for that
particular category for our categorycalled Travel. If you've got one on your
computer, just upload a file and selectit from your computer, or you can drag
and drop which I'm going to do now. I'vegot 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 anotification that it was done but it was
done as you can see there. If Irefresh 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'sno products assigned to that particular
one yet. So let's put in our othercategories… Gadgetsand the last one we want to add is
Clothing.There we go. Just as a note, if you've
got products that are already assignedto a category, as it says here “deleting a
category does not delete the products inthat category.” Instead, products that were
only assigned to the deleted categoryare set to Uncategorized, so they won't
delete the products. Once you add all ofyour categories to your online store and
you refresh your page you might noticethat the categories are not reflected on
the front tend, we can't see them yet andthe reason for that is -this is the
final step.Firstly, make sure that each of your
categories have products assigned tothem. We haven't shown you how to
add products yet, but we will inthe next step of this tutorial. This
is something you'll need to come back tobut firstly, you'll have to make sure
their products are signed to them – whichyou'll learn the next ten minutes, and
then once you do that, just come back toProducts and the Categories section and
then see these little threelines here, so you'll just have to
click on them and drag and drop them tothe 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 thenthese will become the obvious priority
when you do that. Once you rearrangethat and then it'll automatically saved,
you need to just press Ctrl + F5 ifyou're using your Windows or do a hard
refresh of your browser and that willupdate. If you want to change the
order in which they appear, you simplyjust 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 categorybefore 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 yourproducts to your store. One is called a
Simple Product and that is a productthat doesn't have any variations. For
example, if it's a camera. It's aparticular model of a camera
but it doesn't have any variation, itdoesn't come in different colors or
sizes as opposed to, perhaps, a t-shirt. At-shirt can come in different colors and
also different sizesthat's called variations and that's
called a Variable Product. There's twotypes of products: Simple Products that
don't have variations and VariableProducts that have different
permutations and combinations. I'mgoing 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 whereyou can put a description. In this
section here and also in the productshort description, and I'll show you the
difference. I've got some random texthere. what I'm going to do is just add
some random text in both, but at thebeginning of this I'm going to call this
the description “Long DescriptionExample,” and in front of this I'll add
“Short Description Example,” and you'll seehow where they both appear when I save
this product. Back to the ProductDetails. Give your product a price. Note
that you've got to use the price withoutthe monetary symbol, you will have set
that in your Woocommerce settings. Youcan also add a sale price if you like
and you can schedule that sale to beginas well. It's pretty cool. By
the way, ensure for Simple Products thatyou've actually got that selected. Then
in the next tab, you can put in SKUif you've got a SKU for managing stock.
You can also manage stock and say howmany pieces you've got the remaining. You
can now allow back orders, you can show alow 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 alreadyas an Upsell or a Crosssell. Check out
my channel – I've actually made adifferent video on this, it's pretty cool.
An Attribute it's not something you'llneed for a simple product. This purchased
note is an additional note to send tothe customer after purchase. There's a
quite a few options here that areavailable at your disposal really. You've
got to choose what's best for you andyour store. Go to Product Image, you need
to add an image for a product and setproduct image.When you go to an eCommerce website,
you'll probably see a image that is thefeatured image for a product and you'll
also see other images from the productfrom different angles and all of that
stuff. You add all of those differentangles in the product gallery and you'll
be able to switch through them. Ihaven't got different images for this
particular one but I'll add some randomimages just to show you. It as an example
– it's a really bad example, I'm sorry, butit 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. Lastbut 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. Whenyou're done, click Publish.Let's check out that product page.
That's what our product page lookslike, it looks sensational! Here is the
short description example, that is thedescription 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 canremove 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 youthat variation like that. It's pretty
good, it's really really clean and I hopethat made sense to you. When you
build your eCommerce website you'llmore than likely have some variable
products, so I'm going to show you whatthat is and how you set them up. Like I
said before, a Variable Product is onewhere there are multiple variations, for
example, a t-shirt can be available inmultiple sizes and multiple colors. Let
me now show you how to set that up. Giveyour product a nice title. I'm going to
be boring and just put t-shirt. I'll getsome dummy text and this is the long
description example. Down here is a shortdescription example. Now to the part
that makes this a Variable Product:the product description. Make sure you
select a Variable Product from thedrop-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 theText Class, which is all configurable
within your WooCommerce settings. Theinventory, 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 shippingclass, link it to other products for
upsells and cross-sells. Here's thepart that makes it a variable product.
What we need to do is add a new customproduct 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 thepipe icon. What we need to do is
enter our various colors. W've got ared t-shirt, we've got to separate these
with the pipe. You'll haveto find that on your keyboard, it's just
a vertical line. We've got a blue t-shirtand we've got a black t-shirt. We want
these variations to be visible on theproduct page and we want them to be used
for variation, so I'm going to savethese particular attributes.We've got color and we can see the
details of them. We want to add anothervariable or attribute. Click Add again.
I want to add a Size, so we've gotSmall,Medium and Large.
Again, Visible on the productpage, Used for Variations, Save Attributes.
We've got in this example threecolors and three sizes. Obviously for
your products all of this stuff will bedifferent depending on what it is you're
selling. Now we should have sixdifferent variations in total. Why is
that? We're going to have a small redblue, 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 thatimportant? Come down here to the
Variations tab. What we want to do iscreate variations from all attributes.
It's going to create all of thosedifferent combinations from everything
we've entered in the attribute sectionand click Go and hit OK, give that a
few seconds to load. As Imentioned, we've got nine variations
added and we can now have a look atthose variations. We've got a
red in three different sizes, blue andblack. That makes a total of nine
variations. The interesting thinghere 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 redshirtin small, keep in mind this is a red
small. In this case it doesn't mattersize, we can't display it on
the website, but we will need toadd an image for each one of these.
I'll addan image for the three red ones, then
I'll go in and add an image for thethree blue ones. What I'm trying to
tell you here is, whenever somebodyselects on your product page a
particular size or color – sorry I shouldsay in this instance a particular color,
the image on the product page willchange 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 somethinghappens, 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'sin 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 variationthat you have of that particular product.
You can then add a product image, this isthe image that will first appear before
anybody selects a variation. And theproduct 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 beenlaid out. You can see our short
description example. The shopper has anoption to select color and size. Why the
other variations are not coming up? – Ineed to research and figure out
now because it really should have adrop-down with all the different
variations. I figured it out. Ihaven't put a price for all the other
things here, let me just go ahead anddo 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 cansee the variations on the product page.
Let me see if that actually bringsup 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 dependingon the various options. I can choose a
red t-shirt in a particular size and itwill tell me the cost of that
particular option. I can select a bluet-shirt, which I can see now it's on sale
like we put in. More importantly, whenI switch that
from red to blue, the image changesbecause I set that image over here.
Then the black ones change image, it's35 dollars. As you can see, that is how
to add a variable product to your onlinestore. It's very very slick and the way
it functions over here on this page isextremely user-friendly. This is as slick
as it really gets. If you're having anissue 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, andwhen you'll do the same, you'll probably
scroll down your home page and wonderhow do all the products actually get
there, because we've got a few differentsections as you can see here. I'm
going to take you through exactly whatthey mean. If you want to customize or
remove any of these sections, you can goto Appearance and Customize, then
Homepage Control and deselect any ofthese boxes. For example,
we want to get rid of Fan Favorites thatis the Popular Products. So that
disappears. It's really up to you whatyou want to display, but for now what do
all these other sections mean and how dothey get there? The Category Images
are the ones that you set up when youset up your product categories earlier.
That's controlled by you. New In isgenerated automatically. These are the
newest products that you add to youreCommerce website. We Recommend
are products where if you go back toyour dashboard and then to your
Products, All products, you'll see a starover here featured. If you click that
star, that is actually going to become afeatured product and appear in the We
Recommend section. That's how youmanage what appears in that section
there. On Sale, these are the items thatare generated automatically based on what
you've placed on sale as a discount. Sofor anything that you place on a
discount, it will appear on this sectionhere. That's automated logic. Best
Sellers is also automated logic, so youreCommerce site will automatically
display the items that have sold themost, so
you don't have to change anything there.That's a brief explanation of what
appears on the home page and why itappears and ways that you can manage
that. As you can see when you'recreating your online store with
WooCommerce and WordPress, a lot of thestuff that appears on the Home page does
so with some automated logic. It'sreally quite intuitive and functional. At
the moment if you go to one of yourproduct pages, you'll notice that there
is a sidebar – you're looking at it overhere. If you want to get rid of that I'll
show you how you can do that. It's upto you if you want to
keep that sidebar and put someinformation about your online store,
your address or contact info on thatsidebar, but I'll show you how to remove
that, and secondly, add thatinformation 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 everythingin this sidebar section is
being reflected over here, you can seethe About this Site area, two Find Us
areas and a Search area. There's theAbout this Site, Find Us and Search.
Simply you can click on the arrow andupdate the text or you can click Delete
and that will delete that item from thesidebar or alternatively, you can
rearrange this item – how it appears, inthe 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 dropjust like this and just drag it into the
Footer Column and that willautomatically save. If you update
or refresh your page, you should seethat 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 wantthe sidebar empty. I'll delete the Search
and the About this Site. Perhaps I'll putin the first column Find Us, I'll put
in the second column some information aboutyour online store. You can save
that information. There are someother things that you can utilize here,
in the left hand side the AvailableWidget section. You can see that you can
add the Cart to your footer, you willactually display the customers shopping
cart if you would like to. You candisplay the categories of your product,
you can display Contact Infoand 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 canalso display a
list of your store's productsor products search, or products
with recent reviews and I like this one:Display a list of customers recently
viewed products. If someone goes to aparticular product, for example, a watch
and then browsers around your e-Commercestore and and they take scroll around, at
the bottom they'll see their recentlyvisited 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 showyou how to set that up later.
Pretty Easy. There's a whole range ofthings that you can add. One of the most
flexible pieces of content orwidgets is a Text Widget,
that one there, and you'll be able to putany text or embed in a YouTube video or
anything like that. You can also embed avideo using this widget here.
Essentially decide if you want somethingin 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 touse 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 missingsomething there and that is Recently
Viewed Products, so let me just see if Ican go to a couple of different products.I'll keep browsing around… there you
go. The Recently Viewed Products has nowbeen populated. That's pretty cool.
You can obviously update any of theinformation here by going to that
particular widget and clicking on thedown arrow to update it as you need to.
Hopefully, that makes a lot of sense andadds 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 nolonger got the sidebar. For your
eCommerce websites, I recommend having afull width page and no distractions
because people can always findadditional information if they scroll
around, but it takes their attention awayfrom distractions and increases
conversions. I highly recommendminimizing distractions because high
conversions on an online store is partof that equation. The next step to making
an eCommerce website is for me to showyou how to make a Contact Page that
your customers can contact you via phoneor email. What we're going to do is
create a Contact Form. WooCommerceand WordPress makes it really easy to
set up a Contact Form on your onlinestore. I'm going to show you how to
make that now. If you hover over Pagesand 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 makethis a full-width template if we don't
want to sidebar, but if you do want asidebar 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 withthat particular URL, which you can edit
as well. For example, we can just make itContact, that already existed. That's
why it became contact-2, but you getthe point.
That's now a blank page. I'm goingto show you how to create a Form for
your eCommerce website. Go back inhere and go to Plugins and go to Add New.
We're going to add a plugin that letsus 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 activeinstallations. What you'll need to do
is click on Install and then Activatethat.Once you do that and it's
activated, you'll see WPForms in theleft hand sidebar. Just go to Add New.You've got a couple of different choices,
you can start with a blank form or youcan start with a simple contact form and
then manipulate that, so we'll do thatbecause it's a bit easier. We'll
create a Simple Contact Form. You can seeit's already pre-built with first
name and last name, email and a commentor 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 mandatoryfield or not. To add new fields we can
add these new fields in. These fieldshere are a premium feature that you need
to pay for – which you don'tneed 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 whatyou can do is just use a Single Line
Text area, click on that, change thatlabel to Phone and let's say that's a
required field. Advanced Options… you cansee some options if you need that
but it's not essential. FieldOptions… Required. We can
also rearrange the order in which thefields appear by dragging and dropping
like that, and then once you've got thefields 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 adescription, that's just for your
information. The Submit Button Text… let'ssay 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 ispicking up from your WordPress admin
email address – and to be super clear whatthat is. If you go down to Settings and
General, that's that email address overhere. You can leave that
in there or you can simplyjust put in your own email address and
you can also separate multiple emailaddresses 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 fillsit out. From Name is the name of the
person that fills out the form and it'salready pre-configured to attach to that
field. If you want to check, justclick on that there and you can click on
the name field and you'll see that's thesame one so we'll just get rid of that.
From Email currently it's the adminemail. But you don't want
the From Email to be your emailaddress, you want the From Email to be
the field that's captured for the personfilling in the details. Let's
click on this Hide Smart Tags over hereand 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 tothe person's email address and the
message that you'll receive is all thefields in the message. Then go to
Confirmation, you can show a ConfirmationMessage or you can redirect them to a
Confirmation Page if you would like, butlet's keep it simple for now. Let's send
a Confirmation Message. For example, “thankyou for contacting us! We'll get back in
with you shortly or within one to twoworking days”. When you've done
all that click Save. After you've savedyour 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 everythingin this field over here, everything
including the brackets. Right click,copy that. Now go back into your
dashboard – your WordPress dashboard, findthe 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 itin 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 canalso put in your details. For example,
just go to the area or give yourselfsome space above that code and say phone,
email address. You can put in your owndetails and then when you save that,it all reflects on the
front-end. Let's try that outfrom a customer's point of view.
Click the Send Messagebutton and they will see that message.
“Thanks for contacting us! We'll be backin 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 directlyto that person's email address.
a really easy way to create aContact Form on your online store and
WordPress, made it really easy to buildthat. But if you have any questions about
that let me know. The next step increating your eCommerce website is – I
want to show you how you can create anawesome photo gallery to display all
your products in a nice-looking imagegallery for your customers to view.
I'll show you how to build that veryeasily. Go to Pages and let's Add a
New Page.Let's call it something interesting like
Product Inspiration. I'm assuming herethat you've got some of your images
already and I'm just going to show youhow to actually set up the image gallery.
What you need to do is click on AddMedia – actually, first make the template a
Full Width Template and then click AddMedia. Make sure that Create Gallery is
checked. Then you can click here toselect files from your computer and you
can upload them to your Media Library oryou 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'mgonna do is just select all of them and
drag them across, so they all getuploaded into my Media Library. This
should take a few minutes potentiallybased on how large your image files are.Once all the images are uploaded, you
need to click on the Create a NewGallery button down here, Link To… change
that to the Media File. Now what you cando 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 orderin which the image gallery is presented.
Click Insert – actually beforeyou do that, columns at the moment are
set to three columns. I think fourcolumns 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 InsertGallery. Now hit Publish and we'll see
what that page looks like. We're not doneyet but I'll show you what it looks like
now.There we go, we've got our page called
Product Inspiration. When somebody clickson an image, right now it's popping up
into this other page and that's not agreat experience because people can't
click anywhere, they'll have to go backand 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 imageslider and people can browse left and
right just like an image gallery. To dothat, 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 needto configure anything with this
particular plugin, it'll just workdirectly out of the box.
Now let's refresh this pageand let's click on one of the images,
and you'll see it's loading up andwe have this nice gallery effect
where a user can browse through yourproduct images without actually being
thrown off your store site and they canclose this. It's perfect! Maybe this
doesn't look right, maybe you want fivecolumns by two. It eally depends on what
your needs are. Maybe you want to addsome 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 willallow 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 dois customize that. Perhaps you
can add your product categories and alsoyour contact area but basically, I'll
show you how to customize it in any wayyou want.
We can also add your photogallery to this menu here. To do that,
just go back into your dashboard, go toAppearance and then click on Menus. Make
sure from the drop down over here thatTop Menu (Primary Menu) is selected.
What you're looking at here is thedrag-and-drop interface. If you drag and
drop these items here and then clickSave,
will reflect on the front end ofyour store when you refresh. Basically,
the way to do this is to add new menuitems 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 orCheckout or Cart, and you can click Add to
Menu. Similarly, you can also add posts ifyou've created any and you can add some
custom links if you've created any. Thesecategories 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. WhatI'm going to do is go to Products and
open the Categories in a new tab, so I'vegot this here. Each category – if you
click on View in a NewTab for each one of your product
categories, you'll see the products asignedinto that category and each one will
have a different URL. This one is forClothing. Let's copy the clothing product
category link, go back to the Menu andpaste it in the URL of the custom link
and call it Clothing.Add to Menu. Let's do the same for
Gadgetsand Travel. All I'm doing is adding a
new menu item for each one of ourcategories. If you save it just like
that. What's going to happen is thoseitems will appear in a straight line. It
won't look very nice. But what we want todo is add a Drop-down menu.
Let's say we wantto add an item called Product. So custom
links are a lot of custom linked withouter URL. I'm just going to put a
hashtag there and call it Products. Addthat 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 todrag the clothing but not
directly, do it so that it'sindented 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 levelitem and we've got sub items now. If we
indent these even further, this willbecome a sub item of that item there, so
we don't want to do that, but now whatthis is going to do is create a menu
structure. Perhaps we want to get rid ofAbout. Perhaps we want a Contact Page.
Link in there, it's already there but I'mjust 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-lookingdrop-down menu. Now people can go to
your products section and now narrowdown to any one of the categories of
products that your offer. You canactually structure this in any way you
want. You can actually put individualproducts under this menu if you want, you
just need to add the individual links tothose product pages as a custom
link in the menu.Anything you don't want remove. Cart is
already over here so you probably don'twant Cart, you probably do want My
Account. My suggestion if youdon't have a blog, get rid of that.
I'm just gonna clean that up now, I'llget rid of the second Contact, I'll get
rid of Cart because we've got that. MyAccount will keep because people will
need that. Will update it. One more thingI'll add is a Product Inspiration Page,
that's our photo gallery. I'll addthat to the menu. Let's just call
that Inspiration. Save.There you go. There's a cool way to
adjust or customize your eCommercewebsites menu in any way you want.
Beautiful-looking drop down there andyour users can link to the relevant
sections quite easily. If you have anyquestions about that, let me know but
it's quite intuitive, so I think youshould find that quite easy to use. I
think it'll be helpful to walk youthrough the WooCommerce settings because
your e-Commerce store can be configured in afew different ways. If you go to
WooCommerce settings, you'll get tothis screen here. You can update your
address, your sellinglocations and shipping locations to
restrict those options to your customers.You can enable tax rates, the use
of coupons which I showed you a secondearlier, and also set your base currency
in which you're selling in. In heProducts tab you've got your shop page,
URL… that's automatically set up. Wewon't change that. You can enable or
disable reviews and ratings. In the TextTab, you can set your tax rates based on
where you're living and what your taxrates are in your country or your state.In the shipping tab, you can configure
what locations you will ship to and alsowhat rates you will charge for those
countries. Payments inthis section I
won't go through. Accounts andPrivacy. You can allow customers to check
out without creating an account on youreCommerce store. I actually recommend that you
disable that because it makes peoplecreate an account where they can see
what they've purchased and then trackthe status of that. Account Creation.
You've got some optionsaround that. People will be able to
create an account and log into their InMy Account Page, so people in this case I
want them to be able to create anaccount on the My Account Page. It's good
user experience and I also want to allowpeople to create an account during
checkout. Whenever you save somethingjust 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 considerthat there.The Emails tab. This basically lists
every email that your customer willreceive. This is the email upon
creating a “new order” and you can managethat email by clicking on the button
here. You can create an email for acanceled order or a failed order and all
of these other things. And if you want todisable any of those, just uncheck or
deselect by going into the manage areaand disabling it by clicking that
checkbox there. It's really up to youhow you want to set the rules around
that for your customers. Every customer isdifferent and you need to do what's best
for yours and what works for yourcustomers. You don't want to spam them
but you do want to keep them updated andalso enable them to come back to your
site, if they for example, added productsto the Cart but cancel at Check Out.
The Advanced tab is things to do withthe page setup. All of this is standard,
we won't change any of that because it'sall pre-configured and it all looks good.
But if you do have a bit of an advancedknowledge and you go through this and
want to make some tweaks and edits, thisis where you'll refer to change the
engine behind WooCommerce and itssettings. One of the core pieces of
functionality to add to your onlinestore is the use of a coupon. You can
make and advertise various promotions,by going to
WooCommerce, clicking on Coupons, Createyour First Coupon.You can enter any coupon code you
want, for example, 10OFF. Thisdescription is for you to know: 10% ofF
particular items and you can go downhere and choose what you want that
coupon to do. Discount type, you canhave a fixed cart discount so that's a
fixed dollar amount, you can have apercentage discount and a fixed product
discount. In this case I'm going tosay a percentage discount. The coupon
amount is the value of that particulardiscount, so it's 10 in this instance.
That is not related to this – just to beclear, I'm going to put in here “Discounted.”
Coupon amount is 10, whatit'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. Apopular thing in retail stores is to
have a minimum spend, only if theyachieve that minimum spend, for example
50 dollars is that coupon then available. Youcan exclude sale items if items are
already on sale. Then you can add whichproducts you want to be eligible for
this particular coupon and you canexclude products from being eligible for
this coupon. You can add entire productcategories, for example, everything in the
Travel category. Or you can excludecertain categories. As you can see all
of this logic is actually in-built intoWoocommerce and it makes running your
online store so efficient and easy foryou. Ycan also apply usage limits.
How many times can a person use thecoupon? It can be unlimited or you can
make it once, twice for example. You canlimit 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 usedonce. Most coupons should be unlimited
because you want everyone to be able touse them but you might place a limit on
each person only being able to use itonce. After you've done all that, just
click the Update button and I'll showyou how that works for your customers.
If I just open my store in a new windowso I'm not logged in, and I'll go to the
Travel section – because I applied thatcoupon to the Travel category. I'll add
this bag to Cart, View my Cart andthen here I can enter the coupon code.
The coupon code was “discounted”, so thisis the coupon code that you would give
to your customers, for example in yourpromotions. Let's apply that coupon.
As it says here, the minimum spend forthe coupon is 50 dollars, and that's perfect
because we did set that to a minimumspend 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 isminus 10% and your customer now can
proceed to checkout and do what theyneed to do. That coupon is working
perfectly and you can customize thelogic behind the coupon using these
usage limits, using the usage restrictionand the products or the categories that
it applies to. I hope that's useful andthink outside the box for this. Maybe you
want to do a Christmas promotion or aValentine's Day promotion and you can
give your customers a coupon for usebetween particular dates and give them a
percentage of or a dollar amount ofabove a minimum spend. That's what I
suggest, use it to your advantage. Ifyou have any questions about that, please
do ask in the comments of this video. Oneof the easiest ways to maximize the
money-making ability of your eCommercestore is to take advantage of upselling
and crossselling of products. If yougo to stores like amazon.com you'll see
that they upsell and crosssellvery effectively. For example, let me
show you something. If I click on thisthing here, it also shows me this area
here. Frequently Bought Together. This isknown as a crosssell. If I'm buying a
coffee machine, they'll often try andcross sell me the actual capsules with
that machine. It's a way to increasethe revenue from your existing customer
base. You can do that easily in youreCommerce store as well, using
WooCommerce. If you go into Products andAll 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 anupsell could be a more expensive
traveler bag if you have one, or aleather bag for lack of a better example.
An example of a cross sell is whatdo travelers use often when they're
traveling and perhaps, that is a set ofheadphones. If we go into the traveler
bag area,if you scroll down and go to the section
called Linked Products, you've got asection here to add products that you
want to Upsell and Crossell. Whatyou need to do, is search for a product.
If you look at your product listinghere, when you hover over your products,
you'll see a product ID. If I want tohave a leather bag as an upsell, I can
start typing in “leather bag” and just tomake 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 oneitem number 71. Perhaps
people that are traveling also useheadphones and they make a good combo
together. Perhaps people that arebuying a traveling bag will also
purchase the headphones on theircheckout. Let's put “Headphones,”item number 72. That's correct
You don't have to stick to oneproduct, you can add multiple products to
each one of these things here. Let'supdate 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'mlooking at this traveller bag, I'm
reading about it… I come down here andYou May Also Like – that's perfect. By
adding it as a crossell, this is nowshowing up in a new section
called You May Also Like. If you addfurther products they'll show up right
here. It's a perfect way to get peopleto 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” – howgood is that!
On the way to the checkout, the customerwill be presented with an option to
crossell them with another accessorythat is related to the one they're
buying. That's perfect. You shouldreally use these features to your
advantage to generate more revenuewherever possible. It's one of my
favorite features to use. Please don'tunderestimate the power of this.
One of the most important parts of youreCommerce website is accepting
payments. To configure your payments, justgo to WooCommerce
and then Settings. When we initially setup WooCommerce, we did add a payment
method but I'm going to show you how toconfigure 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 PayPalcheckout, that's probably the easiest way
to integrate payments to your onlinestore. If you click on Manage there,
– I'm just going to open up my storein 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 thelive 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 worksis there's no numbers or anything like
that. You get paid based on the emailaddress associated with that account.
That gets entered in there, you can enteryour brand name in here, some logos and
stuff like that but the important partis down here. At the moment if I go to a
particular product, I can see there's twooptions 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 ithere. You can also say you want to unhide
the credit card payment method becausenot everyone has PayPal to pay with, but
the beauty of PayPal is people can usetheir credit cards to make payments. I
can get rid of that and then there's afew more options here that you can look
at in your own time. That's in anutshell PayPal Checkout. It's very
simple, the way to connects to PayPal isyour email address. That's enabled. If
I go back to the Payment section, there'sanother PayPal in here. It's called
PayPal Standard. The difference here isthat PayPal Standard does a few more
things. Firstly, it does allow credit cardpayments 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 testenvironment to test your payments and
your payment processes before actuallygoing live with it.
The advantage to PayPal Standard isthis thing here – API Credentials. You can
also process refunds via PayPal and ifyou process for refunds via PayPal or if
you process them via your e-Commercewebsite, they will both be in sync. The way
to do that is go into your PayPalaccount, click on the Settings icon here
in the top right, then go to SellingTools. You then go to API Access and
click Update. Scroll down and go to theNVP/SOAP API Integration. Click
Manage. There are three bits ofinformation here, the API username,
password and signature. If I click one ofthese, it will show the actual
information. I won't do that because thisinformation is private, same for you.
Don't share that information with anyonebut what you need to do is click on each
one and copy and paste each one of thosein these fields here. I'm
just blurring my screen. I won't paste itin because, to be honest I shouldn't be
showing this to anyone. It's allprivate information, but what you do then
is press Done. Save the changes here andthat will actually connect your PayPal
with your eCommerce store, so that youcan process refunds. It's quite a
versatile method of payment. You'llnotice that because I updated
the previous screen and remove PayPalCredit when I updated that. That's now
gone. There's a PayPal by now, I'llclick 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'llreceive a notification that your product
has been sold and you'll be able to shipto them and that money will then be
received in your PayPal account like Ishowed you at the very beginning of this
video. That's how to set up Paypal andother payments. Other options you have
– things like Stripe, but we haven'tintegrated that at the moment – Direct
Bank Transfer and Cash On Delivery ifthat's something you want to accept.
That's how you set up payments usingWooCommerce. If you have any questions
around that, please let me know, but a lotof the questions around this may
actually be with PayPal so you mightwant to check with them. But once it's
integrated, it's pretty streamlined andefficient. You'll find it very easy
to manage and receive payments throughPayPal 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 tenthousand 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 acouple of hours. Of course it'll take you
some time to add your products and allof that stuff, but it works seamlessly
and it's a beautiful experience for yourcustomers. If you have any questions
please do ask in the comments below andwe'll be happy to help you out. But
please we ask you to try and sharethis video on YouTube and on social
media by clicking the share button andhitting the thumbs up button because
that's the only way that this will getout there. If we can help you with
anything, we'll be more than happy to doso, so please get in touch. Until then,
we'll catch you in the next video.

Source