How to Create an Ecommerce Website with WordPress – 2019 (NEW!)
Articles,  Blog

How to Create an Ecommerce Website with WordPress – 2019 (NEW!)


If you want to learn how to create an
e-commerce website with WordPress, watch this video, and I’m gonna
show you how step-by-step. What’s up, everyone? It’s Jameson from NYC Tech Club. Today, I’m gonna show you how to build this beautiful and professional ecommerce
website with WordPress step-by-step. You don’t need to know any type of
coding or programming whatsoever. It’s just gonna be a bunch of drag-and-drop
and copy and paste. As you can see, this website is just beautiful.
It’s simple, it’s sleek, and it has everything that you need to have a
successful ecommerce website with WordPress. We’ve helped thousands of
people build super successful and beautiful ecommerce websites, and I
really think that this is our best one yet. So if you want to build a fully
functional ecommerce website with WordPress and you want to save thousands
of dollars building it out yourself, then keep watching this video because I’m
going to show you how step-by-step. But first, what I want to do is give you a
quick tour of exactly what we’re gonna build right now.
So this is the Homepage that we’re gonna learn how to make for our
ecommerce website, and you can customize these colors to be whatever color that
you want. And right at the top, what we’re gonna do is insert a custom full-width
image slider with as many different images as you want. And I’ll show you how
to add some buttons to link to different parts of your ecommerce website. And
below the slider, we’re gonna have a featured product section that can
showcase some of your products that you sell on your ecommerce website. Your
customer can hover over any of these products and they can just click on this
button to add the product to their Shopping cart or what they can do is do
a quick view of their product by clicking on this button right here. And
they’ll get this pop-up with a short description of your product, and they can
just click and add this to their Shopping Cart or they can go to the
Product page. I’ll show you that in just a little bit. So after we create the
Featured Product section, we’re gonna create a Footer section with some terms
and policies or whatever you want over here. And then we’ll have a search bar
and some links if you want right here and then a custom copyright with your
footer. So this is the Homepage and you’ll also notice right at the top, we
can have a custom header. So we can put in a top bar with some details. I’ll show
you how to add a custom logo just like this and we can have a button with all
of our product categories right here. I’ll also show you how to add
a header that looks like this. So you can see when you hover over some of these
items, you get this little pop-up. So I’m gonna show you how to create this
Homepage step-by-step. But first, let me show you some of the other pages that
we’re gonna learn how to make. This is the About page that we’re going to
learn how to create for our ecommerce website. By the end of this video, you’re
gonna be able to customize your pages however you want using the page builder
that we’re gonna use to customize all of our ecommerce pages. At the bottom
of all of our pages, you’re gonna see our footer just like this. So this is the
About page and what I want to do now is show you what the Shop page looks like.
So this is the Shop page that we’re going to learn how to make for our
ecommerce website. You can see on the left-hand side, we’re gonna have a
custom sidebar and you can customize the sidebar however you want. So I’ll show
you how to do that in this e-commerce tutorial. If we scroll through our
Shop page, you’ll notice that we have an infinite scroll for all of our different
products that we sell on our ecommerce website. So I’ll show you how to
customize your Shop page to look just like this and your customers can hover
over any of these products, and they can click on them and then go to the Product
pages. So what I want to do now is just show you some of the products that we’re
gonna create in this e-commerce tutorial. So the first type of product is called a
single product. So this is a single product page and what that means is
there aren’t any variables for this product, such as different sizes or
different colors. There’s only one option and you can see on this product page
that we have the featured image right here and then the title of this product
right here, the price and then a short description right here. You can add
as many of this product as you want to your shopping cart and you can always
customize the color of this button or any of the other colors that you see on
this ecommerce website, and I’ll show you how to do that in this tutorial. And then
at the bottom of this page over here, if you want, you can insert a long
description and if you have any reviews for this product, they would show up down
here. You can also insert some category names and product tags over here and you
can have as many alternative images as you want. And then at the bottom of this
page, we can insert a section called, “Related Products” also for this product
page. So this is one of the types of products that we’re gonna learn how to
create and this ecommerce tutorial. The other type of product that we’re
gonna learn how to make is called a variable product. So the
difference between a variable product and a single product is that you have
variables such as size and color for your variable products. You can
insert as many or as few variables as you want. So for this product, we have a
size variable and we also have a color variable. What I did for this product
was I changed the price based on the colors. So you can see right here that if
I select “Green,” I get $99.95. What I can do is change this to “Blue” and then
the price also changes. So this is an option and an additional feature that
you get with the WooCommerce plug-in that we’re going to use to create our
ecommerce website, but you can always just have different variables with the
same price also. So I’m going to show you how to create a few different variable
products and you can see that the rest of the page looks very similar to the
other product page that you saw just a little while earlier. If you want to
create some products such as digital products or affiliate products, you can
also do that with this e-commerce tutorial. So I’ll show you how to do that
also and we do have another video on how to use WooCommerce that goes into a lot
more detail on how to create a bunch of different types of products, okay? So now
what I want to do is show you the Blog Post page. So this is what the blog post
page is gonna look like. So if you write a bunch of different articles, they’re
gonna show up just like this. You can see that this page is just really
professional and just really beautiful. So I’m really excited to show you how to
create this on your ecommerce website. What I can do is just show you what
an individual blog post looks like really quickly. So you can see that we
have a blog title at the top and then our featured image right here and then
our content section right below. And then below this, what we can do is put in a
related article section and also insert a section for your visitors to leave you
a comment on any blog post, okay? One of the other pages that we’re going to
learn how to create in this ecommerce tutorial is the Contact Us page that you
see right here. So we can put in our contact details and we can link our
email. What’s really cool is we can insert a Mega Menu so when we hover over
our contact link right here, you can see that we can have a map pop up
and then some additional contact information right here. So I’ll show you
how to create this for your different headers also. And we’re going to create a
few other pages but these are the main pages that we’re going to learn how to create
for our ecommerce website. So what I want to do now is just really quickly
run through a transaction with you on our ecommerce website. So I’m gonna
click on this product to go to the Product page. Once I’m on the product
page, I can come over here and I can select the size that I want. I can
change the quantity and then I can just click” Add To Cart.” Once the product
is added to my cart, I should see a notification right here and also my
shopping cart should update right here. I get this pop-up if I hover over
this icon, and what I can do is click on “View Cart.” Once I’m on the shopping
cart page. I can come over here and I can check out my total. What I can do is
click on this button that says, “Proceed To Checkout. Once I’m on the Checkout
page, I can fill out my billing information right here.You can see
that the tax gets automatically calculated. And what I did for this demo
website was I integrated PayPal, but you can integrate any type of payment
processing system that you want. So I’ll show you how to do that in this
ecommerce tutorial. So what I want to do is just check this box to say that “I
agree to the terms” and then click on “Proceed to PayPal.” Once we come to
PayPal, we can just log right in. Once I come to this page, all I have to do is
come down here and click “Pay Now.” Now, I should get a confirmation that says my
transaction has been completed, and I can just come down to the bottom and click
on “Return to Merchant.” Now, I’m going to be brought back to the e-commerce
website to the Order received page and you can see the order details right here.
So you can see that our ecommerce website is fully functional. Before
we begin learning how to create this e-commerce website, I want to show you
some of the emails that you’re gonna get. So as a merchant, when you get a new
customer order, you’re gonna get this email right here. And then as a customer
when you place a new order, you’re gonna get this email right here. If you log
in to your WordPress dashboard and go to the Orders page, you can see a list of
all your orders right here. If you click on any of these, you can go to the
Details page for the order and you can see information such as the the billing,
the shipping and then the product that’s being ordered right here. So this is the
ecommerce website that we’re gonna learn how to make and you just saw a
transaction. So really quickly, I want to talk about the WordPress theme that
we’re gonna be using to create this ecommerce website. So this is the
ThemeForest website and this is the number one marketplace for WordPress themes and
plugins. The theme that we’re gonna use to create our ecommerce website
with WordPress is The Hanger theme. This theme was created by the GetBowtied
developers and they are one of the best ecommerce theme developers on the Internet. So I’m really excited to show you how to
use The Hanger theme. You can see right here this is a premium theme so
there is a small one-time charge but you’re gonna get so much more with this
theme than you would with a free theme that I really think that it’s worth the
investment. I’m gonna link you to this page so you can come and explore
The Hanger theme on your own and check out the custom options and the page
layouts and everything that you get with this theme. So really quickly, I do want
to note that this theme has about a five-star rating and it was just created
in 2018. So you’re gonna have one of the most modern ecommerce websites on the
internet if you’re using this theme and you followed this tutorial. Also with
this premium theme, you do get six months of support, so if you have any questions
or comments or need any help whatsoever, you can just contact the GetBowtied
developers and they’ll get right back to you and help you out. So if you like what
you see and you want to build a beautiful and professional ecommerce
website with WordPress and you want to save thousands of dollars building it
out yourself, then keep watching this video because what we’re gonna do now is
show you how to build this exact website step-by-step. So if you’re ready, I’m
ready. Let’s get started. The first thing that we have to do is register
a domain and your domain is your web address. You can see right here that my web
address is nyctechclub.com. So we’re gonna register a domain together and
then what we’re gonna do is go and get hosting service. What hosting does is
it runs your website and it stores all of your content. So you need to make sure
that you have a domain and you have hosting in order to run a WordPress
website. So what I want you to do is go to the video description and click on
the link to the text tutorial. You should come to this page right here on how to
create an ecommerce website with WordPress 2018. This is the text tutorial for this entire video so you
can always come here and reference any step that you need to. What I want
you to do once you come to this website is come down to step number one which
is registering a domain and getting hosting. What we’re gonna do is go to
a website called “InMotion” to get our domain and hosting. I want you to
click on this link right here on Step 1 because it’s gonna bring you
to a special page where you can register a domain for free and save 55%
off on hosting. So go ahead and come down here and click on this.
Once you come to the Inmotion website, this is where we’re going to go to
register our free domain and get our hosting service. I use Inmotion for
a lot of my different websites because they’re super fast, really reliable,
they’re cheap and they have great customer service. That’s why I’m
gonna recommend them to you. So once you click on the link to come to this
special page to get your free domain, what I want you to do is come down here
and you should see three different plans: the Launch plan, the Power plan and the
Pro plan. And we’re gonna focus on the Launch and the Power plan because the
Pro plan has a little too much and it’s a little too expensive for what we need.
So the Launch plan is going to give you a free domain and let you host up to two
different websites. So if you only want to build one or two websites, then you
want to choose the Launch plan. And the Power plan is also going to give you a
free domain and let you host up to six different websites. So if you want to
build a bunch of different websites, then you want to choose the Power plan. And
for this video tutorial, since we’re only building one website together, I’m
gonna choose the Launch plan but you can pick whatever plan that you want. And
once you’re ready, I want you to hover over the Order Now button and then click
on the “1 year” option. And now you should come to this page right here. And
before we go and register our free domain, we’re gonna configure our server.
So what I want you to do is come down to where it says, “Data Center” and what you
want to do is select the data center that’s closest to you. And since I live
in New York, I’m gonna select the “East Coast” option and then once you’re ready,
come down to “Dedicated IP” and make sure that the “No thanks” is selected because
this is an extra cost and a service that we don’t really need. And we can always
add this back later .And once you’re ready, come down
to the Content Management System Auto- Installer section. And what’s great about
InMotion is they can install WordPress for you, so you don’t have to do this
manually. All you have to do is select this option right here that says, “Install
WordPress” and then you’re good to go. So once you’re ready, let’s click on the “Continue” button. And now what we’re gonna… And now what we’re going to do is choose
our… And now what we’re going to do is register our domain. So again, make sure
that you click on the link in the text tutorial or the video description to
come… And now what we’re gonna… And now what we’re gonna
do is register our free domain. So again, make sure that you click on link to… And now what we’re
gonna do is register our free domain. So again make sure that you click on the
link in the text tutorial or the video description to come to the InMotion
website so that you can register a domain for free and save fifty-five
percent off on your hosting. And once you come to this page right here, if you
already own a domain and you want to use it for this video tutorial, you can
always select this option right here that says, “I already own this domain” and
then just type in your domain right here. If you want to register a new domain,
make sure that this option at the top is selected, and then come down to the
search box right here and then type in the domain that you want to register. So
for this example, I typed in “nyctechclub.” And once you’re ready, let’s click
on the “Search” button. And once the search results come back, if you see this
notification that says, “Great news your domain is available” then all you have to
do is click on this button right here that says, “Add to Cart.” And if your domain
isn’t available, then what you want to do is come back in here and type in a new
domain and search to see if that one’s available. And you can see once we add
the domain to our shopping cart, it shows up right here. And what we can do is
remove the domain privacy. So we don’t really need this and it’s an extra cost
but you can keep this if you want. So what I want to do is remove this by
clicking on the “X” right here. And now you can see that we have the domain that
we’re gonna register for free right here and then we have our web hosting right
here. And you should see a very large discount right here. And this is actually
the largest discount that you can get with InMotion using the affiliate link
in the text tutorial and the video description. So make sure that you use
that and you should see a 55% off discount right here, okay? So once you’re
ready, all you have to do is click on the “Continue” button right here. And again,
you’re gonna see this notification right here for the domain privacy, and if you
want you can add this. But again, it’s an extra cost that you don’t really need. So
I’m not gonna add this. So I’ll just make sure that this option is selected that
says, “No, thanks.” And once you’re ready, come down here and click on
the “Continue” button one more time. And now what we have to do is register our account.
So if you already have an account with InMotion, you can just type in your login information
right here but if you are a new customer… And now what we’re gonna do
is register our account. So if you’re a returning customer, you can just type in
your login information right here. If this is your first time using InMotion,
then what you want to do is type in your email address right here. And
once you’re ready, go ahead and click on “Continue.” And once you come to the next
page, all you have to do is come down to the bottom and click “I agree to the
terms” and then click on the “Checkout” button. And once you register your domain
and get hosting with InMotion, what I want you to do is go to your email inbox.
And you should see this email from InMotion titled, ‘Welcome to InMotion
Hosting!” And once you open it up, you’ll see some login details. So first in this
box, you should see the Account Management Panel Login details and what
you can do here is access your hosting account, your domain, and any other
services that you have with InMotion. So what you want to do is click on this
button right here to set your password for the account management panel, and you
can do this on your own. We don’t really need to log in to the account management
panel. So we’re not going to do this together. And once you’re done, what I
want you to do is come back to this email and then come down to the bottom
to the WordPress detail section. And this is where you’re going to find the details
to log into your WordPress website. What we want to do is come down here to
this log in section, and we want to use this URL to log in to the new WordPress
website that we’re making. So go ahead and click on this. And once you come to
this page, this is where you’re gonna put in your username and your password that
you’re gonna find in your InMotion email. So if I go back here, you can see
that we have the username and password right here. So go ahead and copy and
paste that into these two sections right here. And then once you’re ready,
all you have to do is click on the “Login” button. And
once you’re logged in, this is your WordPress Dashboard, and this is where
you’re gonna go to create all of your different pages and posts and all of
your different products for your ecommerce website. And before we get
started, I do want to note that I am using a different domain name for this
ecommerce tutorial. So the domain name is nycshopshop.com. And if you ever want
to check out the demo ecommerce website, go ahead and go to nycshopshop.com
and then you can check out the ecommerce website that we’re learning
how to make today, okay? So once you’re logged in, what we’re gonna do now is go
and get The Hanger theme that we’re going to use to build out our ecommerce
website. So what I want you to do is go back to the text tutorial. And once
you’re back on the text tutorial, and again there is a link to this page on
how to create an ecommerce website with WordPress 2018 in the video description.
What I want you to do is just scroll down to Step 2. And Step 2
is getting The Hanger theme for our ecommerce website. And once you come to
this step, all I want you to do is click on one of these links to bring you to
the ThemeForest website so that we can get The Hanger theme. And now, you should
be on the ThemeForest website. And again, the ThemeForest website is the number
one marketplace for WordPress themes and plugins. So if you ever need anything
for your WordPress website, make sure that you come and check out ThemeForest.
And you should be on The Hanger theme page. So it should say The Hanger
theme right at the top. And again, this is a WooCommerce theme. And if you do, then
we are good to go and all you have to do is come down here and click “Add to Cart.”
And once you get this popup, we can just go and click on “Go to Checkout.” And now
what you want to do is create an account. So if you need to, you can pause the
video and fill out all this information and then go through these other steps by
clicking on the “Next” button right here. I’m not going to do this with you
because I’ve already created my account and I already purchased The Hanger theme.
So if you need to, pause the video, fill out all the stuff and then checkout. And
then once you’re ready, push “Play” and then I’ll show you the next steps so that
we can install the WordPress theme. Once you created your account, you should
be logged in to the ThemeForest website. And right now, I’m on the Downloads tab
and if you need to get to this page, what you can do is hover over your ThemeForest
name on the upper right and then click on the “Downloads” link right here, and it
should bring you to this page right here. And you can see that we have The Hanger
theme right here, and what we want to do is download the files that we need so
that we can go and install the WordPress theme on to our ecommerce website. So
right here where it says, “Download,” what I want you to do is click on this button
and you’ll see this little pop-up right here. And what we want to do is just
download this one which is the “Installable WordPress file only.” So click
on that and it should automatically download a folder for you with all of
the WordPress files that we need. So now what we can do is go back to our
WordPress dashboard. And once you’re back on the WordPress dashboard, now what
we’re gonna do is install the WordPress theme so that we can start building out
and creating our online store. So what I want you to do on the WordPress
dashboard is come down on the left hand side and hover over Appearance and click
on “Themes.” And once you’re on the themes page, go ahead and click on the “Add New”
button. And now, you should be on the Add Themes page, and go ahead and click on
the “Upload Theme” button. And before we go and select the file that we want to
upload, what I want you to do is go to the folder that you downloaded the
WordPress files in for The Hanger theme. So if I go to my finder and my WP
Downloads folder right here, I have The Hanger folder right here. And
if I open this up, you can see I have a bunch of different files. And what we
want to do is compress this so that it’s a zip file so we can upload it onto our
WordPress website as the WordPress theme that we want. So if it’s not a zip file
right now, and it’s just a folder, what you want to do is right-click it and
then click on “Compress” so that it turns it into a zip file. And you can see right
here now that The Hanger theme is a “.zip” So this is what we’re gonna upload.
So once you zip it, what you can do is click on “Choose File.” And what I want you
to do is go to the folder where The Hanger zip file is. So again, I’m in my WP
downloads folder and the one that I want to select is “the-hanger.zip.” So once I
select that, I can just click “Choose” right here and then click on the “Install
Now” button. And once the theme is installed, you should see this
notification right here and all we have to do is click on this link
that says, “Activate.” And once the theme is activated, you should see
this page right here, and what we’re gonna do is go to the Themes Setup
Wizard. So let’s click on this button right here. And now, you should be on the
Plugin Installation page. And what we want to do is install all of these
required plugins so that we can create and customize our ecommerce website.
And a plugin is a tool that really just helps you build out and customize your
WordPress website, so it just makes your life a lot easier. So what we want to do
is just come down to the bottom, and we want to install all of these. So click on
this button right here. And once the plugins are installed, you should be on
the Demo Content Importer page, and we’re not gonna import the demo content
because we’re gonna create all of our different pages and products together. So
what I want you to do is come down to the bottom and just click on the “Skip”
button. And once everything is set up, what we can do is go and check out what
our WordPress website looks like right now. So let’s click on the “View Site” button.
And once your WordPress website loads, this is what it
should look like. And it should look pretty basic but it should look pretty
professional also because we’re using The Hanger theme. And what we’re gonna do
is go in here and customize it so it looks just like the demo ecommerce
website that you see right here, alright? So if you’re ready, let’s move on to the
next step. And now what we’re gonna do is create our first two pages. So we’re gonna
create the Homepage and the Blogpost page. So what you can do if you’re
on this page right here is hover over the “New” button and then click on “Page”
or what you can do is go back to your WordPress dashboard by hovering over
your website name on the upper left and clicking on “Dashboard.” And once you’re
back on the WordPress dashboard, you might see some additional tabs right
here now on the left hand side because we installed some plugins that we need to
create and customize our ecommerce website. And we’ll go through that stuff
a little bit later, but right now what we want to do is create our first two pages.
So on the left hand side of your WordPress dashboard to create a page,
what you can do is hover over Pages and then click on “Add New.” Once you’re on the
Add New page, the first page that we’re gonna make is the Homepage. So right
here, just type in the title of the page. So we’ll just type in “Home” and that’s
all we’re going to do right now. We’re going to come back to this page and
customize it in just a bit. So what I want you to do to
publish this page is click on the “Publish” button right here. And once the
page is published, now what I want to do is create a Blog Post page. So let’s
click on “Add New” right here to create a new page. And once you’re back on the Add
New page, again let’s type in a page title right here. So we’ll type in “Blog.”
And that’s all we’re gonna do right now so click on the “Publish” button. And once
the page is published, you should see this notification right here and that’s
all we’re going to do right now. So that’s how you create pages. And we’re
gonna come back and customize these pages a little bit later. But right now, I
just want to move on to the next step. And now what I want to do is go through
our WordPress settings to set the Homepage and the Blog Post page and a
few other things. And before we actually go to our WordPress settings, what I want
to do is show you how you can add some additional users. So if you recall,
InMotion created this user name for you when we set up our WordPress website. So
if you want to change this or change the password, let me show you how to do that.
On the left hand side of your WordPress Dashboard, you should see the tab “Users”
and if you hover over that, you’ll get this little pop-up and we can just click
on “All Users.” And once you come to the Users page, you should see the admin user
right here. And if you want to edit this, just click on the “Edit” link. And now
you’re on the profile page for the admin user and what you can do is add a first
and last name or change the nickname. So if you wanted to go in here and change
the nickname from whatever user name that you have to, something like your
first name. So I’ll just put in my name “Jameson” right here and then if I go into
this drop-down, I can select the name that I want to show up on my blog posts
or any other pages on my WordPress website. So if I change it right here,
this is the name that’s going to show up on my entire WordPress website. And you
can see that it changes up here and it’ll also change on the blog post pages
when we create them a little bit later, okay? So this is where you can go to edit
the profile for your admin user. And what you want to do is just make sure that
you come down to the bottom and click “Update Profile” if you do make any
changes. And once the profile is updated, that’s all you have to do. And if you
want to add some additional users, you can always hover over Users and click on
“Add New” and then give the users admin rights or whatever type of rights that
you want to login to your WordPress website, okay?
So that’s all you have to do to change your user names or add users. And
now what I want to do is go into our WordPress settings. So on the left hand
side, let’s go down to Settings and hover over that and let’s click on the “General”
tab. And once you’re in the General Settings page, you can change the site
title and tagline right here, but we’re gonna do this a little bit later in our
theme settings, so we can skip this section right now. What I want to do is
add the “www.” to my website address. So right here where it says WordPress
address and site address, all I want you to do is put in your mouse right in
front of your website name and just type in “www.” and then do that down here for
the site address also. And make sure that you don’t change anything else
or add anything else. Otherwise, you’ll be locked out of your
WordPress website and you’ll have to go through all the steps again
starting from step 1, okay? So just double and triple check that
this is correct. And then what you want to do is just come down to the bottom
and click on “Save Changes.” And for security purposes, you’re gonna have to
log back in. So all you have to do is just put in your username and your
password and then click on the “Log In” button. And once you’re logged back in,
now you should see the www. in front of your website name so it looks a little
bit more professional. And now, we are good to go and I want to go back to our
WordPress settings. So again, on the left hand side of our WordPress dashboard,
hover over Settings and this time around, we’re gonna go to the “Reading” tab so
click on that. And once you’re on the Reading Settings page, right here where
it says “Your homepage displays,” what we want to do is change this to “A static
page” and then we want to set our Homepage and the Blog post page. So for
the Home page, we’re going to this drop-down and select the Home page that
we just created and for the Blog Post page, go into this drop-down and select
the Blog page that we created. And once you’re ready, all we have to do is click
“Save Changes.” And once the settings are saved, now our Home page and Blog Post
page are set to the two pages that we created. And in just a little bit, we can
go into these and customize them however we want, okay? So again, down in the
Settings, now what I want to do is select the permalink structures. So hover
over Settings and come down here to “Permalinks” and click on that. And once
you’re on the Permalinks Settings page, what you want to do is select the
permalinks that you want to show up for all of your different pages and posts.
And the one that I recommend is this one right here which is “Post name.” So go
ahead and select that and then come down to the bottom and just click on the “Save
Changes” button. And once the permalink settings are saved, the last thing that
we’re gonna do is come back down to the Settings tab and hover over that and
click on the “Privacy” tab. And once you’re on the Privacy Policy page, what you can
do here is create a new page for your own privacy policy if you want or you
can use the one that the WordPress developers created for you. So if you want
to check out what it looks like, you can just click on this link and I’ll open up
a new tab. And you can see that this is what the Privacy Policy page looks like.
And if you want to edit any of this information, what you can do is just
click on the “Edit Page” link right here or if I close out of this and go back to
the Dashboard over here, I can click on the “Edit” link right here and that’s
going to bring me to the Edit page and then you can edit the Privacy Policy
that the WordPress developers have created for you. That one pretty much
covers everything. So that’s the one that we’re gonna use for this demo tutorial,
but you can always come back to this section or go to the Privacy Policy page
and update it on your own. So what I’m gonna do is just click on this button
right here that says, “Use This Page.” Now what we want to do is go and
download the demo content for our ecommerce website that we’re learning
how to create. So what I want you to do is go back to the Text Tutorial on How
to Make an Ecommerce Website with WordPress 2018, and come down to Step
6. And the step might change as I create this video but right now, it’s
Step 6 and it’s titled, “Download the Demo Content.” And you should see a
link right here. And what you can do is download the zip file with all the demo
images that we’re going to use for this ecommerce tutorial. So go ahead and click
on that and you should see it get downloaded, and then what we can do is go
back to our WordPress website. And what we want to do now is go and upload all
of that demo content. So what I want you to do is hover over Media on the left
hand side and click on “Add New.” And once you’re on the Upload New Media page,
I do want to note that you can use your own images instead of the demo content.
So it’s really up to you. And you can also upload your images one by one as we
go through creating our pages and posts and different products also. So you don’t
have to upload everything all at once. I just want to show you how to do that if
you do right now. So if you want to upload the demo content, all you have to
do is click on “Select Files” and then go to the folder where you stored all of
your images. So I’m in my downloads folder and the folder that I just
downloaded is called “Demo content.” So if you’re using the demo content, you should
see this folder right here and you can open it up. And you should see some
images in here. And the images might look a little different because these images
that I have right here are copy written, so you do have to pay to use them. But I
do have similar images for you to use in the ecommerce tutorial. And again, it
doesn’t really matter what images you use because you’re gonna be substituting
these with your own images for your online store after you’re done with this
tutorial. So what you can do is click on this stuff one by one and just upload
these or you can select all the images and upload them all at once.
So that’s what I’m gonna do. I’m just gonna highlight everything and just
scroll down to the bottom and select all these images. And once you’re ready, all
we have to do is click on the “Choose” button and you should see the images
start to download and upload right here. So we’ll just wait a little bit and let
everything upload, and then we can move on to the next step of this process. And
now all of our images are uploaded and you should see them in this list right
here. And if you want to edit any of these, you can click on the “Edit” link
right here or what you can do is go to your Media Library. So under Media, click
on “Library.” And once you’re on the Media Library page, you should see all of the
images that you just uploaded right here. And if you want, you can click on these
images and you’ll get this pop-up right here. And you have the option of deleting
these images if you want right here or what you can do is click on the “Edit
Image” button and you’ll get this pop-up right here. And what you can do is change
the dimensions of this image or you can crop this image if you highlight the
area that you want to crop, and then click on this button right here or you
can rotate the images however you want. If you do make any changes, what you want
to do is click on the “Save” button over here, okay? So we’re not gonna make any changes to our
images but I do want to note, that’s what you have to do. So let me close out
of this, and we are actually done uploading our demo content for our
e-commerce website. So now we can actually move on to the next step.
And now what we’re gonna do is go through our Theme Settings for the
ecommerce website that we’re learning how to create so that we can customize
the colors, the fonts and the layout for our ecommerce website. So what I want
you to do is come down on the left hand side of your WordPress dashboard to
Appearance and hover over that and click on “Customize.” And once you’re on the
Customize page, you should see a bunch of different tabs here. And what we can do
is go into each of these tabs and customize the ecommerce website that
we’re learning how to make. And what you can do here is change the font colors
and the font styles and the layouts for your different pages, posts and product
pages. So what I want to do is just show you what I would change for my
ecommerce website and also highlight some of these customized tabs so you can
go into them and play around with them on your own. And before we actually get
started, I do want to note that on the right-hand side over here, you do have a
preview screen of what the ecommerce website looks like whenever you make any
changes here with your options. And if you want to see what the website looks
like on different devices, you do have these icons down here. So you can check
it out on the tablet device and also the mobile device or the PC or laptop right
here, okay? So the first thing that I want to do is go to the “Site Identity” tab. So
click on that. And what you can do here is change the Site Title and the Tagline
for your ecommerce website. And this shows up on the tabs for your web
browser and also, it normally shows up on the upper left of your ecommerce
website that you’re learning how to build. But since we have a logo installed
by default by The Hanger theme, the Site Title and Tagline do not show up right
here. So it gets replaced by the logo.t But if you want to replace the Site Title
default name right here that says, “My Blog” or the Tagline, then what you can do
is just go in here and delete this and type in whatever you want. So I’ll just
type in “NYC Shop Shop” and you can see that the tab changes right
here now and then I want to delete the Tagline. So I’m just
gonna remove that. And then if you want to add a favicon or site icon, you
can do that right here by clicking on “Select Image” and then finding the image
that you want to use. And the favicon normally shows up on your web browsers
next to the web address and sometimes, on your tabs right here depending on the
web browser. So what we can do is just click on “Select Image” and you should get
this pop-up right here. And if you have your own favicon or logo, then all you
have to do is click on “Upload Files” or make sure that you’re on this tab right
here and then click on “Select Files” and find that logo or favicon and then you
can just upload it like that. If you want to use the demo content, what you want to
do is click on the “Media Library” tab and again, you should see all the images and
content that you uploaded in the previous step, and we can just select our
favicon. So we’re gonna use this one right here. So you can see the name right
here, it’s “style-icon-small.” And all I have to do is just click on it so it has
this check mark right here and then we can click on “Select.” And then if you need
to crop the favicon, you can do that but this is what it looks like right here. So
you can see that this is what it’s gonna look like on your web browser or certain
web browsers. So if you’re happy with it, then all you have to do is click “Skip
cropping” and that’s pretty much all you have to do. And now you’re gonna have a
favicon for your ecommerce website. And if you don’t have a logo, I will link you
to a video on the NYC Tech Club YouTube channel so you can check out how to make
a logo for free. Most of the viewers that we have have logos or they hire a
designer. So we’re not going to go through creating a logo. You can just use
the demo one for now and then you can always replace it a little bit later, okay?
So make sure that you check out the video description if you do need help on
learning how to create a free logo, alright? So once you’re ready, let’s click
“Back” right here. And now what I want to do is go to the Global tab. And what you
can do here is change some of the global options for the ecommerce website that
you’re learning how to make. And we don’t really make any changes to the default
settings, but you can see over here that you can change the site width if you drag
this little wheel around. And then if you wanted to change the content
layout from full-width to having spaces on the side, you can just select
this one right here and then you can check out what it would look like right
here. But since we don’t have any content on our Homepage or any other pages
right now, it’s kind of hard to see. So you can always come back to these
settings a little bit later and then just check out what the previous screens
look like when you select these different options. But what I do want to
note is down here at the bottom, you can change the main font color, the secondary
font color and then the accent color which is the gold color that you see up
here on the shopping cart and throughout the demo ecommerce website. So if you
ever wanted to change any of these colors, just click on “Select Color” and
you’ll get this pop-up right here. And then you can type in the color code if
you know it or you can drag this wheel to whatever color that you want or
select any of these colors down here. And then if you didn’t like any of these
colors, then what you can always do is just click on the “Default” button and
then go back to the default option, okay? And then once you’re ready, just click on
“Select Color” again and then that’s all you have to do. So again, you can change
the accent color if you don’t like the gold color. I actually like it for this
demo ecommerce website, so I’m gonna leave everything as is. But once you’re
ready, we can just click “Back” right here and now what we’re gonna do is come down
to the “Header” tab. And once you’re on the Header tab, there’s a bunch of different
tabs here and we’re just gonna go through a few of them. So if we go to this
Settings tab, you can change the Header Layout if you don’t like the full width
option and you want the one with padding. Just select the one that you want, and I
like to use the default one and then if you wanted to change the header
background color from this white color to something else, all you have to do is
click on “Select color” and then select the background color that you want, and
you can see that it updates over here on the preview screen. And if you like it,
then go ahead and use it. Otherwise, you can always select something else or go
back to the default color. And then down here for the header text, you can change
the color and also the accent color. So for the header accent color, this is
gonna be the gold color that you see here. And also whenever you hover over
any of these links, it’s gonna change the accent color also. So if you
wanted to change this to something else, just go in here and then just select the
color that you want and you should see an update right here. So you can see the
red now, and then when we hover over the Shopping cart link, it also turns to red.
So go ahead and come in here and customize these colors to whatever you
want for your online store, and really just play around with this stuff. And you
can always come back into your options and change this stuff later also. So you
don’t have to do everything right now but what I do want to note that is if
you do make any changes, you can click on the “Publish” button right here to save
your changes. So I’m gonna do that right now or you can do this at the end. It
really doesn’t matter when you do it. Just make sure that you click on the
“Publish” button to save your changes, okay? So once you’re ready, let’s click “Back”
right here. And now, let’s go to the Logo tab. And this is where you can go to
upload your own logo for the online store that you’re learning how to build.
So if you don’t have a logo right now, you can always make one and come back to
this section a little bit later. What I want to do right now is just show you
how you can upload a demo logo. So what we’re gonna do is click “Remove” right
here and then I can click on “Select Image” and I’ll come to the Media Library
right here. And if you want to upload your own logo, just click on “Upload Files”
and then click on “Select Files” and find the logo that you want to upload, and
then click on “Select.” And that’s all you have to do to upload your own logo. If
you want to use the demo content one, make sure that you’re on the Media
Library tab and then just find this logo right here. So it’s a little different. It
says, “the style.” And you can see the size over here if you need a recommended size.
So once I click on the logo that I want, you can see that we have the check mark
right here. Just click on “Select” and that should upload your logo right here. And
what I want to do is again just show you down here for the alternative logo that
pretty much shows up on the mobile and tablet devices. Whenever you need a
responsive WordPress website, you’re gonna show a smaller logo here for the
different screen sizes. So we’ll click “Remove” here and then click on “Select
Image” again and then find this image and click “Select.” Now, you don’t need to have
an alternative logo. You can always just use this one right here. But I like to
have an alternative one so it doesn’t show everything whenever
the screen is smaller so it doesn’t take up too much space. And
you can also change the logo width if you wanted to but we’ll leave that as
default. So let me just save everything really quickly and then click “Back” once
you’re ready. And again, you can always go in here and upload your logo whenever
you want. So if you don’t have one right now, you can make one watching our
YouTube video on How to Make a Logo for Free and then go back in there and add
the logo any time, whenever you have your ecommerce website. It doesn’t have to be
right now, okay? So let’s go to the icons tab and over here, for your different
pages, the Account page, Wishlist page and Cart page, there are some icons that
are included by default with the WooCommerce plugin. So we want to make
sure that all of these are on. And they’re all on right now. If you turn
them off, it would look like this with the gray color instead. And then for the
bottom mini cart text, you’re probably gonna want to update this. But we can
leave this as is right now, and I can remind you to update this later or you
can make a note of it. It might be safer if you just want to delete this but this
is some text that’s gonna show up on the Shopping Cart page. So I’ll leave this as
free shipping, but again you can always come and edit this whenever you want,
okay? So we’re not gonna make any changes right there right now, and what I want to
do is go to the Top Bar tab. And what I want to do here is I want to turn on the
Top Bar. So I’ll click to turn that on and you can see on the demo ecommerce
website that this is the top bar up here. And we have some social media buttons
with the gold accent color, some contact information, some shipping information
and then we can add a drop down menu here for different currencies and
different languages if you want to translate your ecommerce website. So if
you want a top bar that looks like this and you can customize the text to look
however you want, what you want to do is come over here and turn this on and then
you can customize the colors for your font or the accent colors right here. And
then down at the bottom, if you want these social media buttons to show up,
you want to make sure that this is turned on. And by default, it is. And I’ll
show you how to add whatever social media pages or buttons that you want in
just a little bit. And then over here, you can change the text
for the phone number to anything that you want and then same
with the shipping note right here. It doesn’t have to be about shipping or
have your phone number. You can really put in whatever you want. So you can
customize the online store to look however you want. And if you do make any
changes, let’s click on the “Publish” button to save everything. And then we
can just go back right here. And that’s pretty much all we have to do for the
Header section. We don’t need to go through these other tabs. You can explore
these ones on your own if you want. Otherwise, let’s go back right here, and
now let’s go to the Fonts tab. And now what we’re gonna do is go to the Fonts
tab. And this is where you can go to change the body font and the headings
font. So if you want to change the font style, just go into these drop-downs and
then select whatever font family that you want. And then if you want to change
the font to be bold or to be italicized, you can go in here and then just select
whatever type of font style that you want also, okay? So if you do make any
changes, make sure that you click on the “Publish” button to save your changes.
Otherwise, let’s just go back because I’m gonna leave everything as the default
and let’s go to the Shop tab. And what you can do on the Shop tab is if you go
to the Layout tab, you can customize the look and feel of the Shop page for the
online store that you’re building. And you can see on the demo ecommerce
website right here, this is the Shop page for the WordPress website that we’re
creating. And if you like what this looks like, then you actually don’t need to
make any changes. We have the infinity scroll on the bottom and we have a
sidebar right here and we have four products per row.
So if you like what this looks like, then on the Layout tab right here, we
don’t need to change anything. But you do have the option of getting rid of the
sidebar or moving the sidebar to the right hand side or having a different
scroll option instead of the Infinity option, okay? So I’m not gonna change
anything here because I do like the default layout options. So let me click
back right here. And I don’t think we have to do anything in the Catalog Mode
tab, and we shouldn’t have to do anything in the Custom Archives tab either.
But if you want to change some of the wording right here for the sales options
or when you create a new product, you can do that over here also. So it’s
really up to you. I’m gonna click “Back” right here. And if you do make any
changes, click on the “Publish” button right here. Otherwise, let’s go back to
the main tab section. And now let’s go down to the Blog tab. And if you want
your Blog Post page to look just like the demo ecommerce website, and you can
see the demo blog page right here, what you want to do is go back to the tabs
right here and click on the “Blog Archives” tab and then turn on the “Blog
Categories” and also turn on the “Highlight first three posts” and then
click on the “Infinite” button right here. And that’s pretty much all you have to
do. So once you’re ready, just click back right here to come back to the main page.
And we’re not gonna do anything with the Product page tab. I leave everything as
is but you can change the stuff if you want. So what I want you to do is just
come down to the Footer tab and click on that. And what you can do here is change
the Footer Layout if you want, but I like to use the Full-width option, and all I
really want to do is come down to the Copyright Text and I want to change this.
So if you want to change this, what you can do is just highlight this stuff and
then change it to whatever you want. So I can type in “The Style – NYC Tech Club
Designed. And you can see that it’s gonna update over here once it refreshes. And
if you want to change the payment option icons, you can do that also by selecting
whatever you want down here. And you’ll see that refresh right here also. And if
you want to change the footer text or color, you can do that right here, okay?
And then once you’re ready, you can always click on the “Publish” button to
save everything and then just click “Back” right here. And now what I want you to do
is come down to the Social Media tab. And what you’re going to do here is type in
the URLs for all of your different social media pages for the buttons that
you want to show up on your ecommerce website. And you can see there are a
bunch of different social media options for you, and you can see on the demo
ecommerce website that the buttons show up right at the top at the top bar. And
then if you wanted to put them on the bottom of the page, down here you can
also add some widgets for the social media buttons also. So I’ll show you how
to do that a little bit later in this ecommerce tutorial but if you need to, pause
the video, type in the URLs that you want for the social media buttons to show
up. And if you leave any of these blank, then the buttons will not show up, okay?
And then click on the “Publish” button once you’re ready. And then let’s go back
here and the last thing that we’re gonna do right now in our theme options is
just come down to the WooCommerce tab. So once you’re ready, go ahead and click on
that. And once you come to this tab right here, just go to the Product Catalog tab
and make sure that you have these options selected so that your pages look
just like the demo ecommerce website. And then go back and click on “Product Images”
and I just want to change the sizes for some of this stuff. So you can do this if
you want. You can always come back here a little bit later and play around with
this stuff once you have some content so you can see the images change. But what I
want to do right now is just type in “768” and then for the
Thumbnail width, I’m gonna type in “330” And then for the Thumbnail
cropping, I’m gonna click on “Custom” and I want to put in “8 by 10.” So I’ll just
type that in. And again, we can always change this stuff later, but this is what
I have for the demo ecommerce website so that’s what I’m gonna put in for this
ecommerce tutorial, okay? So once you’re ready, come back to the
main page. And again, we’re gonna come back into this section a little bit
later to finish up some of these other tabs that we didn’t go through, and we
can always go in here and change whatever we want, whenever we want. So if you ever
want to change anything, you can always come back here later also. So once you’re
ready, let’s click on the “Publish” button just to save everything one more time.
And then once you’re ready, let’s click on the “X” right here. And now, you should
be back on the WordPress dashboard. And now we are good to go and we can move on
to the next step. So now what we’re going to do is install our SSL certificate to
secure our ecommerce website. And if you’re on the WordPress dashboard right
now, you should see this notification and if you want to learn more about the SSL
certificate, you can click on this link right here. But pretty much what we’re
going to do is make our website have the HTTPS, and the S stands for “Secure.” And
that really helps when you’re transmitting private information
between two different computers over the Internet. So I’m gonna
show you how to install this for free. So what I want you to do is go back to your
email inbox and open up that email from InMotion that was titled, “Welcome to InMotion
Hosting!” And again, you’re going to come down here to the Account Management
Panel section and if you haven’t already, you’re going to create a password for
the Account Management Panel. So just click on this button right here and
it’ll log you into your “InMotion” account. So you should be on this
Dashboard page right here. And so if you need to, you can pause the video if I’ve
gone a little too fast but you want to come to the Account Management Panel. And
then down here in the domain section for your website that you’re creating,
you should see this button that says, “Manage Free Basic SSL.” Go ahead and click
on that. And now you should be on the “Manage Free SSL” page and what I want you
to do is come over here to where it says, “Eligible Domains” and check the website
address for your website, and then click on this button that says, “Check
Eligibility.” And you should see this check mark right here. And then what I
want you to do is come down here to where it says, “Enable free SSL” and click
this button to turn this on. And then click on this button right here if you
haven’t already that says, “Run check now.” And this might take up to 20 minutes but
what it’s going to do is process the enabling of the free SSL so that your
website is secure. So if you need to, you can take a break right now and just come
back in 10 or 20 minutes, and then we can move on to the next step. All right, and so in about
10 or 20 minutes, you should be able to come back to your WordPress
dashboard. And once you come back here now after everything is set up with the
SSL, what you can do is come down on the left hand side on your WordPress
dashboard to Settings and then click on “General.” And once you’re on the General
Settings tab, all you want to do is come to where it says “http” and then put in an
“s” after the “p” and then same with the site address right here. Make sure that
everything else is the same and you have your colon after the https. So double and
triple-check this that you have it in this spot and the spot so you don’t mess
up your WordPress website. And then come down to the bottom and just click on the
“Save Changes” button. And once everything is saved, you might
be logged out of your WordPress dashboard, and if you are, just log right
back in and you should be good to go. So now you have the SSL set up for your
ecommerce website, and now your website should be secure, okay? So once you do
that, we are good to go. And now we can move on to the next step. And now what
we’re going to do is go and customize our Homepage so that we have whatever
type of ecommerce website that we want for our WordPress website that we’re
creating. So what we’re going to do is go back to the Homepage that we created a
little earlier. So hover over “Pages” and then click on “All Pages.” And once you’re
on the Pages page, you should see a list of all the pages that you have created
or you have drafts of, and you should see a sample page right here that’s
installed when you installed WordPress. So let’s just delete this one really
quickly. So let’s click on the “Trash” link right here. And once that’s removed, it’s
going to be put into your trash can so you can delete that if you want. I’ll do
that a little bit later but what we want to do right now is just hover over the
Homepage, and we want to start editing this. So let’s click on the “Edit” link. And
once you’re on the Edit page, this is where we’re going to go to customize our
entire WordPress ecommerce Homepage. And what we have to do first is turn on
the Page Builder. So right up here, there are two options: the Frontend and the
Backend editor. I like to use the Backend Editor, so let’s click on that. And we
should get this pop-up right here, and this is our Page Builder. And what we’re
gonna do is create a bunch of different rows or different sections for our home
page and then we’re going to add content to each of those sections. So you can see
on the demo WordPress website right here that we have our slider image right here
and this is going to be a row. And then down here are our featured products, and
this is gonna be another section that we’re going to add to the Homepage. And
then we’ll have some footer sections down here, okay? So we’re gonna do this
for each of our pages that we’re creating. So the first thing that we’re
gonna do is add a row for our slider. So go ahead and click on the “+” button
right here and you should get a pop-up with all of these different elements
here. And these are elements that you can add to your different pages and that’s
how you’re going to customize each of your e-commerce page to look however you
want. You can add whatever you want. So what we want to do right now is just
add a row. So right at the top, go ahead and find the row element and click on
that, and you should see the row get added right here. And if you ever want to
change the number of columns or boxes for your row, you can hover over the icon
right here and then you can change the number of columns that you want. But
right now, we’re just gonna use the default option, and what I want to do is
go into the row settings and just change some of the spacing options. So to do
that, we’re gonna click on the pencil right here. And you should get this row
settings pop up. And in the row stretch for the slider row, I want to select the
“Stretch row and content (no paddings)” option. So go ahead and do that
and you can always play around with the other options if you want, and then go to
the Design Options tab. And for the slider row, what I want to do is add some
margin and some padding just to change the spacing. So you can always play
around this stuff on your own, but right now, you can just type in the same thing.
So I’ll type in “75px” for the top and the bottom margin. And then for the
padding right here, I want to type in “7%” on the left and the right hand side. And
if you want to look at this visually, the element that you’re gonna have is right
over here and then this stuff is just spacing for different parts of this row,
okay? And you can always change some colors
and add background colors and all that stuff over here if you wanted to but
we’re gonna leave that stuff as is right now for this row. So once you’re ready,
click on the “Save Changes” button. And now what we want to do is just add a slider
element inside this row. So click on the “+” button inside this row. And what I
want you to do once you get this pop-up is come down here and find this slider
element and click on that. And you should get this slider settings right here. And
we don’t need to change anything so let’s just click on “Save Changes.” And
this is how you’re gonna add some slider images to your slider, and you can do
this as many times as you want to add as many different images. So all you have to
do is click on the “+”s button inside the middle. And you should get this
pop-up and click on “Image Slide” right here and you’ll get this pop-up right
here. And what you want to do is put in your title, description and then
the button text and the URL for your button right here. And you can change the
colors and all that stuff, and then add the image for your slider down here. So
let me just show you on the demo ecommerce website that this is the title
and then this is the description and then this is your button text right here.
And if you hover over it, we have a URL. And then this is the background image so
that’s the slider image, okay? So let’s go back to our Page Builder. And you can see
what the power of video editing that I’ve already put in my title and my
description and my button text right here. And I do that just to save some
time because if I type out all this stuff, it just wastes a lot of time and
it doesn’t really matter what I type in because this is just a demo website. So
if you need to, you can pause the video and put in your title and description
and you can change the color of the description and title by clicking on
“Select Color” right here. And then once you’re ready for the button text, you can
type in something like “SHOP NOW” and then you’re gonna put in the button URL. And
you can always go and paste these in a little bit later because we really
haven’t created a bunch of different pages yet. But if you want to link the
button to the Shop page that we’re gonna make a little bit later for our online
store, then go ahead and type in “https://www.” your website name
so I put in “nycshopshop.com/shop”. And you can put in the “s” or if you
don’t have the SSL certificate,then you don’t need to put in the S. But again,
remember we made our website have the SSL Certificates so our ecommerce
website is super secure, okay? And you can also change the background color for the
slider if you want to use a background color instead of an image, but we’re
gonna use an image. So if you want to upload an image, just click on the “+”
button right here. And you should be in the Media Library and if you want to
upload your own slider image, just click on “Upload Files” and click on “Select
Files” and find your own slider image. If you want to use the demo content, make
sure that you’re on this page right here and then we can just find this image
which is gonna be our slider image. And again, this might look a little different
in the demo folder because again, these are copy written images but
find the image that is titled, “Slider Image” and then just click on “Set Image.”
And once the image gets added here, if you ever want to remove it, just click on the
“X” and then you can add another image, okay? So once you’re ready,
let’s click on “Save Changes.” And if you want to add some additional
slider images, all you have to do is click on the “+” button right here and
then go through the same steps, okay? But right now, what we’re gonna do
is just move on and create our next section for our featured products. So
what I want to do is add an element. So let’s click on the “+” button right
here, and what I want to do is add a row. So click on the “Row” element and you
should see the row get inserted right here. And we don’t need to go to the row
settings this time, but what I want to do is add another row inside this row. So
click on the “+” button inside the row and then click on the row element again.
And you should see a row get inserted in this row right here. And this is just a
little trick that I learned as I created a bunch of different ecommerce websites
with WordPress, and it just makes the featured product section look a little
bit better, so I’m gonna share this trick with you. So once you add these two rows,
inside this row, let’s click on the “+” button. And what we want to do is add
this “Featured products” element right here. So go ahead and click on this. And you
should get this pop-up right here. And what we can do is edit the number of
products that we want to show in this section on our Homepage. So on the demo
ecommerce website, down here in the Featured product section, you can see
that we have 8 different products and we have 4 per row. If you want this same
layout as the demo website, what you want to do is come in to this section where
it says per page, and change this to 8 products per page, and you can leave this
as 4. And you can always change these numbers to whatever you want and then
just click “Save Changes” once you’re ready. And pretty much ,that’s all we have
to do for our Homepage for the online store that we’re making. And you’ll
notice that this product section isn’t gonna populate right now because we
don’t have any products. But once we create those for our online store, then
that section is gonna show up. And then down here in the Footer section, we’re
gonna customize this section a little bit later with some widgets and
the footer menu. So don’t worry about this section right now. All we had to do
was add the featured products and the slider section. So I want to go back to
the ecommerce Homepage that we’re making. And up here in the Page options,
what I want to do is uncheck this box that says, “Show Page Title” because I
don’t want the page to have the home page title show up on the Homepage, okay?
So hopefully, that makes sense to you but if it doesn’t, then you can always check
out what this looks like if you do check this box. But what I want to do right now
is just save all of our changes. So let’s click on the “Update” button right here.
And once the page is updated, we can go and check it out. So let’s click on “View
Page.” And once your ecommerce homepage loads, this is what you should see right
now. You should have your slider image with a button that links to the Shop
page, and you can always update this URL to link to another page a little bit
later. And then down here is where your featured products section is going to
show up. But right now, we don’t have any products so this section doesn’t
populate. And then we haven’t added our widgets for the Footer section down here
yet. So we’ll do that a little bit later. But if this is what you see, then we are
good to go and now what we can do is move on to the next step. And now what
we’re gonna do is go and customize our WooCommerce Settings and then we’re
gonna go and create our product for our online store. So what I want you to do is
hover over your website name on the upper left and let’s go back to our
dashboard. And once you’re back on the WordPress dashboard, you should see this
notification to run the setup wizard for WooCommerce. So if you do, just click on
“Run The Setup Wizard.” And now, you should be on the WooCommerce Settings page and
you should be on the Store Setup tab. What you can do is pause the video to
fill out your address right here. So I already filled this out and then you can
come down here and choose the currency that you want to sell your products in
or get payment in. And then down here, you want to select the types of products that
you’re gonna sell. And then if you want WooCommerce to be able to track your
usage, you can check this box right here. Otherwise, just leave it unchecked. And
then once you’re ready, click on the button right here that says, “Let’s go!” And
now you should be on the Payments tab. And this is where you can go to enable
the payment options that you want for the WordPress online store
that you’re making. And by default, WooCommerce has the stripe and
PayPal options selected for you. So I want to turn off stripe and I just want
to use PayPal for the demo ecommerce website that we’re making but you can
use both of these. And if you want some additional payment options, what you want
to do is click on this link right here, and it’s going to bring you to the
WooCommerc Extensions page. And if you come to the
Payment Options tab, then you should see a bunch of different payment options
right here. And if you want to use these ones for your ecommerce website ,all you
have to do is click on whichever one that you want and then download the
plug-in. And then you can go to the Plugins tab right here and then click
“Add New” and then you can install the plugins on your own for whatever
payment options that you want, okay? So back on the settings right here, I
also want to check the box to “Accept payments without linking to a PayPal
account.” So go ahead and do that also and then type in an email address right here.
And if you want to accept cash payments or cash on delivery or something, you
have these options right here that you can also select, but we’ll leave those
ones unchecked. So I just want to select PayPal here but it’s really up to you
what you do. And then once you’re ready, go ahead and click on the “Continue”
button right here. And once you’re on the Shipping’s tab, what you can do here is
select the shipping method and the price that you want to charge for shipping. And
if you’re in the United States, then you should have the option of using the live
rates option. So if you select “Live Rates” right here, what that’s going to do is
pull the prices that the United States Postal Service would charge to ship
wherever you need to. So what we can do if you’re in the United States is just
leave this as live rates and make sure that these are enabled. If you’re based
outside of the United States, then what you can do is choose the flat rate or
the free shipping option. If you choose the flat rate option, you can put in the
price right here and then same with locations not covered in this zone right
here. And I’ll show you how to add other geographical regions that you can ship
to and then change the different rates for in just a little bit when we go back
to our WordPress dashboard. So right now, we can select whatever we want and I’ll
show you how to really put this all together in just a little bit. So I’m
gonna leave this as live rates right now, and it’s okay if you don’t have
lie rates. Just choose whichever one and we’ll go back to this. And then down here,
you can choose the weight unit and the dimensions for your products. If you want
to select something else, go ahead and do that. So in the U.S., we usually use pounds
and then for dimensions, I think inches is fine. So once you’re
ready, let’s click “Continue.” And now you should be on the Recommended tab and
what we can do is check this box right here so that WooCommerce automatically
calculates the taxes to charge. And I think this is a great option, so let’s
just leave that checked. And then if you want to integrate MailChimp with your
ecommerce website, then you want to leave this one selected. But we’re not gonna do
that in this tutorial but I will show you how to do that in another tutorial
on how to use WooCommerce, and I’ll put that YouTube video on the NYC Tech Club
YouTube channel. So make sure that you go and check that out. I’ll have a link to
it in the video description, okay? So if you want to charge taxes and you want them
to be automatically calculated, just check this box right here and then once
you’re ready, let’s click “Continue.” And the last thing that we have to do is
just connect to something called “Jetpack.” So what we can do is click on this
button right here and you’re going to come to a login page for wordpress.com.
And all you have to do is put in your login. So if you don’t have an account
with wordpress.com, you can always sign up over here. Otherwise,
type in your email address and then click on the “Continue” button right
here and then just type in your password and click “Log in.” And once you come to
this page right here, all you have to do is click on the “Approve” button. And now
you should be redirected back to your ecommerce website, and we don’t need to
do anything on this page. So what I want you to do is hover over WooCommerce on
the left hand side and we want to go into our Settings tab. And once you’re on
the WooCommerce settings page, this is where you can go to update your settings.
So you should see a bunch of different tabs up here, and we’ll go through them
together really quickly and I’ll point out a few different things and show you
how to integrate PayPal, change your tax rate and the shipping options. So just
really quickly, if you see this notification, go ahead and click on “Skip
Setup.” I think that notification just shows up by default and we already went
through the Setup Wizard, okay? So on the General tab right here, this is where you
can update your store address, you can update where you sell to and
then you have your currency options down here. And we don’t change anything
because we already set everything, but if you do make any changes, make sure that
you click on the “Save Changes” button on each of these tabs, okay? So let’s come
back up to the top, and let’s go to the Products tab. And once you’re on the
Products page, you might see some notifications right here. So right at the
top, if you have any products that need to be engraved or have personal messages
like flowers or cards, then you can enable some product add-ons. All you have
to do is click on this button, and you can do that on your own. We’re not going
to do that in this demo so I’m going to close that. And then down here, you should
see some other notifications such as Product Display options. So we went
through this in the Theme Settings a little earlier so we can dismiss this.
And now, you should be back on this page right here after a quick refresh. So the
shop page should be set up by default for you. If it’s not, we can always create
a page and then come back here and set the Shop page to whatever page that we
created. So you should already see that so we don’t need to change that. And then
down here, you can change the measurements and all that stuff.
So the one thing that I want to do is come down to where it says “Enable
reviews” and I want to select this box right here to allow reviews only to be
left by verified buyers. So once I check this box, I want to click on the “Save
Changes” button. And once everything is saved, you should see this notification
right here and you might notice that we do have some links right here to
inventory and downloadable products. We don’t cover these two links in this
video tutorial but I do cover them in my tutorial on How to Use WooCommerce.
So again, there will be a link in the video description and you can always go to the
NYC Tech Club YouTube channel and find that video, okay? So if you want, you can
play around with these links on your own. Otherwise, what I want you to do is click
on the Tax tab. And once you’re on the Tax tab, if you don’t want WooCommerce to
calculate the taxes for you, what you can do is go in here and just disable the
automated taxes. We’re gonna leave this enabled, but if you do change it just
come down to the bottom and click on “Save Changes” here, okay? So once you’re
ready, let’s go to the Shipping tab. And once you’re on the Shippings tab,
this is where you can go to select the shipping methods that you want to charge
to your customers whenever you send them a package. So you can see right here that
we have the Zone Name and I have a zone called the United States. And then I have
a locations not covered by my other zones. So right here, you can see that the
United States has the USPS live rate shipping method and then everywhere else
in the world, which is this zone right here, is also using the same method. What
you can do is add as many different zones as you want.
So if you’re in the United States and you want to add different shipping
prices to all the different states, you can actually add different shipping
zones and then select the shipping methods that you want for each of those
states. And the same goes with different countries or different cities in other
regions and all that stuff. So what I want to do right now is I just want to
enable these two. So the United States and these locations not covered by the
United States. And then I’ll show you how you can edit the shipping methods also.
So first what I want to do is just show you how to use the live rates option. And
the live rates option is only going to be if you live or have a business in the
United States and I think, Canada. So if you don’t have a business in the United
States, then don’t worry about the live rates option and I’ll show you how to
select the free shipping or the flat rate option after this. So right now, I’m
just gonna go and hover over the “Zone name” right here and then click on the
“Edit” link. And once you’re on the Edit Page for the first shipping zone, and you
can see right here this is the United States for me, what you can do is change
the name of the zone right here. And then if you want to add some additional
regions that have the same shipping method that you have down here, all you
have to do is go in here and then just add the new zones or regions. So if I
wanted to add Europe here I could just type in Europe and just select that. And
now whatever shipping method I have down here is gonna be used for the United
States and for Europe. So that’s just an idea for you but I’m gonna delete that
and just leave this as United States for now. And then if you are using the live
rates option, and again this is only if you live in the U.S. and maybe
Canada, then what you can do is just select the “USPS” option and make sure
that it’s enabled and then what you want to do is click on the Edit” button right
here. And once you’re on the Setup page, what you want to do is type in the
origin zip code for where you’re sending your packages from, and then you want to
select the type of shipping that you want to use. So we’re gonna use “Priority
Mail” and “Priority Mail international,” and whatever you select here is going to
dictate what type of shipping rates that you charge your customers. And then down
here, what you want to do in the Fallback Rate option is you want to put in a
default amount that you can charge your customers whenever the live
rates option doesn’t work. So what I want to charge my
customers is a flat rate of $15 if the live rates option doesn’t work and it
doesn’t pull any shipping rates, okay? So you want to make sure that you fill that
out with whatever you’re comfortable with. And then once you’re ready, just
come down to the bottom and click on the “Save Changes” button. And once your
settings are saved we are good to go and that’s how you set up your live rates
option for your Shipping Method, okay? So I want to go back to this Shipping zone
right here. So I’m going to click back on the United States. And once you’re back
on this page, I do want to note that if you are using the live rates option, then
whenever you create a product, you have to put in the dimensions and the weight.
So I’ll go over this again but when you create products for your e-commerce
website, you’re gonna come to this page right here. And there is a tab down here
called “Shipping” and what you have to do is put in the weight and the dimensions
if you’re using the live rates option in order to pull the right rates, okay?
So I will remind you again about that but I wanted to cover it since we are
going through the shipping methods right now. And what I want to do right now is
just show you how you can add a different shipping method instead of the
live rates option, which is what I’m gonna use for my demo ecommerce website.
So I’m gonna disable the live rates option and then I want to click on this
button right here that says “Add shipping method” and I’ll get this pop-up and I
can select the shipping method that I want to use. And I want to use the flat
rate option. So I’ll click “Add shipping method” and I should get this little
section right here and we have it enabled. And then we can
click on the “Edit” link right here and we’ll get this pop up. And all we have to
do is type in the amount that we want to charge our customers whenever they have
an order and we have to ship something out to them. So I’ll put in “$15” and click
“Save Changes.” And that should save everything and update the shipping
method for this zone right here. So that’s how you change the shipping
method to whatever you want. And again, if you’re in the United States, I do
recommend the live rates option if you want to put in the weight and the
dimensions for your product, and you can see that right here. Otherwise, you
probably want to use a flat rate or free shipping. It’s really up to you, okay? So
let’s go back to the main Shipping Zones page. And once you’re back on this page
right here, what you can do is click on this button right here to add some
additional zones, or if you just want to have one zone and then a default option
that cover all your other zones right here, then you can just use this one right
here that says, “Locations not covered by other zones.” So that’s what
we’re gonna do. This is gonna be the rest of the world and we’re gonna select how
much we’re gonna charge for everyone else not in the United States. So what I
want to do is just click on this. And once I come to this page right here, I’m
gonna turn off the live rates option and again I’m gonna select the “Flat rate”
option. So I’ll just go in here and select this. And then what I’ll do is
just put in the $15 dollars right in here and then click on “Save Changes.” And you
should see that it’s enabled right here and this one is disabled. So that should
save everything and we can go back just to check. And once you’re back on this
page right here, you should see the shipping methods right here. So you can
see that this one’s crossed out. So that’s how you add the shipping zones
and select your shipping methods, okay? And I do want to note that I do have
some links to some additional resources on a plugin for shipping right over here
and then on the setting up the Shipping Zones page with WooCommerce over here. So
these are gonna be links in the video description, so go ahead and check those
out. I will link them in the description below and then you can go and learn more
about shipping, okay? So what I want to do now is just
move on to the next step. So let’s click on “Payments.” And once you’re on the
Payments tab, what we’re going to do is integrate PayPal with our ecommerce
website but don’t forget that you can always click on the extensions link down
here, and you’ll go to the WooCommerce website. And if you click on the “Payments”
tab, you have all these other options for payment options that you can integrate
into your ecommerce website, okay? So what we’re going to do is just set up
our PayPal account. So there should be two PayPal options here: the Express
Checkout and then the PayPal option which allows people
to log in to their PayPal account. So we want to enable both of these. So go
ahead and click on this so that it turns purple and then click on the “Save
Changes” button right here. And once everything is saved, what we can do is go
and manage both of these to set them up. So let’s click on the first “Manage”
button right here. And once you’re on the PayPal page, just make sure that this box
is selected and then you have your email address for your PayPal account right
here. And then come down here and you can always update the receiver email address.
So if you want to put in another email address, you can do that right here. And
if you don’t know what this stuff is, you can always hover over these question
marks and you’ll get this little pop-up right here that explains what this
section is for. We’re gonna leave this as is and all I really want to do is come
down here to the API credentials. And I want to put in a username, password and
signature so that I can process refunds via PayPal. So if you want to be able to
do that, what you can do is click on this link to get directions on how to get
your API credentials or you can just keep watching this video because I’m
gonna walk you through it. So what you want to do is go to your PayPal account
and I have a tab open right here, and I’m on my Profile page. And once you log in,
what you can do to come to this page is just click on the “Profile” button up here
and then click on “Profile and settings” and you’ll come to this page right here.
And what you want to do is click on this button that says, “My selling tools.” So
once you’re on this page, just click on this and you’re going to come to this
page right here. And just come down to where it says “API Access” and what you
want to do is click on the link right here. So it might say “Manage” or “Update.”
And once you’re on the API Credentials page, all you’re going to do is
come down to the bottom and you’re gonna request an API credential.
So if you have this link or something similar, go ahead and click on that. And
once you’re on the API Signature page, what you’re gonna do is come over here
and generate a username, password and signature and all you have to do is
click on the “Show links” right here and then copy that information back into
your WooCommerce settings into these different sections right here. And then
once you’re ready, click on the “Save Changes” button. And I’m not gonna do this
with you because all of these API username, passwords and signatures are
unique. So I have to keep them secure but I will paste them in. And then once
you’re ready, go ahead and click on “Save Changes.” And once everything is saved,
let’s go back to the Payments tab. And once you’re back on the main page right
here, we’re gonna do the same thing with the PayPal Express Checkout. So we can
click on the “Manage” button right here. And once you’re on this page right here,
just make sure that you have this box selected and then you have your PayPal
email address right here. And if you want to change your website name for your
Checkout page, you can do that right here and you also have the option of doing
that on the other page, I believe. And then if you do make any changes, just
come down to the bottom and click on the “Save Changes” button, okay? So we’re not
gonna make any changes here. So I’m just going to come back up to the top. And
pretty much, unless you’re going to integrate any other payment options, we
are good to go. So what I want to do is just move on to the next tab called,
“Accounts & Privacy.” And once you’re on this tab right here, we’re not gonna
change anything but you can see what the options are that I selected right here,
and you can always go in here and update this stuff on your own. And then once
you’re ready, I want you to go to the Emails tab. And once you come to this
page, this is where you can go to update your email address for whenever you get
a new order, a cancelled order or a failed order. And for all of these other
options, you’re gonna send an email to your customer. So if you want, you can
update this and then what you can do is come down to where it says, “Email sender
options.” And by default, right here where it says from, it’s gonna say, “My Blog.” And
you probably want to change this to your ecommerce business name. So I’m just
going to change this to studio designs and then what you want to do is just
come down here and click “Save Changes.” And once your settings are saved, we
can just go to the Advanced tab. And once you come to this page, WooCommerce
should already set up a Cart page, Checkout and My Account page and
they should be selected right here for you. If not, we can go over the stuff at
the end of this video tutorial just to make sure that we have everything. The
one page that we don’t have is the Terms and Conditions page. So we can actually
go and create that right now and just select that page, and then we can go and
edit that page a little bit later. So let’s go and do that. Let’s hover over
Pages and click on “Add New.” And once you’re on the Add New page, all we’re
gonna do right now is just create a Terms and Conditions page. So I’ll just
paste in the title right here and then once you’re ready, all we have to do is
click on the “Publish” button. And once the page is published, let’s go back to our
WooCommerce Settings and set that page. So we’ll just click on “Settings.” And once
you’re back here, let’s click on the “Advanced” tab. And now, all I’m going to do
is come down to Terms and conditions and go into this drop-down and select the
page that I just created. And then we can come down to the bottom and click on
“Save Changes.” And once the settings are saved we are good to go and we are done
with our WooCommerce settings. So we can move on to the next step. And now what we’re going to do
is go and make sure that we have a Shop page. So
hover over Pages on the left hand side and click on “All Pages.” And by default,
you should see a Shop page already created for you and it should be set to
the Shop page right here. And if it isn’t, we can go over this. All you have to do
is create a new page and then go into your WooCommerce Settings and set the
Shop page. But you should see this and if you do, then we are good to go and we can
move on to the next step. And now what we’re gonna do is go and customize our
Shop page to look just like the demo ecommerce website. So what we’re gonna do
is customize our sidebar over here, and you can put in whatever you want. I just
have some filters and the category names right here. So if you want to do that
right now, what we’re gonna do is go back to our WordPress dashboard right here.
And on the left hand side, I want you to hover over Appearance and then click on
“Widgets.” And once you’re on the Widgets page, what we’re gonna do is drag some of
these widgets on the left hand side into our shop sidebar over here. And whatever
we put in here is gonna show up on the sidebar on the Shopping page. And we’ll
go over these other ones a little bit later, but right now, we’re just gonna
focus on this one. So widgets are pretty much tools that
you can put into the sidebar and different areas of your WordPress pages.
And what I want to do is just show you how to add some of these. And you can
click and add whichever ones that you want but the ones that I want to put in
are this one right here called “Filter products by rating.” So what you can do if
you want to add it is just click and drag it into the Shop Sidebar right here.
And sometimes, you have to click on the Save button but this one looks like it
just saves automatically for you. And you can always change the title of these
widgets if you want right here. And if you do that, just make sure that you
click on the “Save” button. So I’m gonna come back down here, and I
want to choose another filter. I want to choose the one by price. So once I find
this, I can click and drag it up again or what you can do is just click on the
widget and you’ll get this little pop-up right here, and then you can just select
where you want to place this widget. So I’ll select the “Shop Sidebar” and then
click “Add Widget” and you’ll see that it gets added right here.
And the last thing that I want to do is choose something called the “WooCommerce
Categories” widget. So I want this one down here. So again, I’m gonna select the
“Shop Sidebar” and click “Add Widget” and it should get added down here, and I want
to choose some options over here. So I want to hide the empty categories, and I
think that’s it. So I’m gonna click “Save” since I checked this box right here. And
once everything is saved, we are good to go. And now, we have the
widgets for our sidebar. And you can always pause this
video and add whatever type of widgets that you want into your sidebar or you
can always come back here and do this a little bit later. Our Shop page really
isn’t gonna look that good right now because we don’t have any products, but
the good thing is in the next step, we’re gonna start creating our products. So
we’ll go and check out our Shop page a little bit later, but if you need to you
can pause the video and add some widgets right now. Otherwise, we’re just going to
move on to the next step. And now what we’re gonna do is learn how to create
some single products for our ecommerce website. So right now, since we’re on the
WordPress dashboard, what I want you to do to create a new product is just hover
over Products and then click on “Add New.” And once you’re on the Add New Product
page, this is where we’re going to go to create all of our different products for
our ecommerce website. And the first type of product that I want to show you
how to make is a simple product, and that’s what you see right here where we
don’t have any different variables such as colors or sizes. We only have one
option here. So let me show you how to make this simple product and then you
can go and create as many different simple products as you want. So the first
thing that we’re gonna do is put in our product name right here. So I’ll type in
“Maroon Red Dress” just like the demo product and then what we want to do is
come down here. And this is where you can put in your long description. So let me
show you what I mean. On the demo ecommerce website right here, this is the
short description. And then if you come down here and you expand this section
that says, “Description,” this is your long description. So you can type in some
additional details right here. I have the same thing for both of these but you can
always put in more details right here. So what I’m going to do is just copy that
and paste that in right here, and then once you’re ready, let’s come down to the
Product Data section. And since we’re creating a simple product in this
drop-down, we want to select “Simple product.” And if you’re creating a virtual
product, you can check this box or you can check this box if you have a
downloadable product. We don’t really cover these two in this tutorial but I
do have a tutorial on how to use WooCommerce that covers all these
different types of products, so make sure that you go and check out that video, okay?
So once you’re ready, make sure that you’re on the General tab right here and
all we have to do is put in our price. So I’ll type in $99.95, and then if you
wanted to put this product on sale, you can do that right here
or you can click on this link and schedule your sale time if you wanted to
also so that the sale automatically pops up on your ecommerce website. So I’ll
leave that up to you and we’ll go through these other tabs together. We’re
not gonna actually put in stuff on all of them but we’ll go through them really
quickly. So first is the Inventory tab. And if you want to put in an SKU number,
you can. And if you want to manage your stock, just check this box and then you
can do that right here. We’re gonna leave this blank and what I want to do is just
go to the Shipping tab. And if you remember that if you’re using
the live rates option, you want to put in the weight and the dimensions for this.
If you’re using free shipping or the flat rate option, you don’t have to put
in this information, but you can if you want. But it’s mandatory if you want to
use the live rates option. So just remember that, and we’ll leave this blank.
And we’re not going to cover the Link Product section on this tutorial, but you
can always hover over these question marks to see what this stuff is, and you
can learn more about this stuff in the WooCommerce tutorial or their own
website. And then for Attributes, we don’t have to do anything here. This is really
for variable products, so we’re gonna skip this for now. And on the Advanced
tab right here, I just want to make sure that this box is selected to enable
reviews, but if you don’t want reviews for your products, then go ahead and
uncheck this box, okay? And then once you’re ready, just come down to the
Product short description and this is where you’re gonna put in the short
description for your product. And again, I’m just going to paste in the same text
that I have on my demo website. And then once you’re ready, come to the Product
image section and this is where we can add the featured image for our product.
So let’s click on “Set product image” and you should get this pop up. And if you
want to use the demo content, then just make sure that you’re on the Media
Library tab. If you want to upload your own product images, click on “Upload Files”
and then click on “Select Files” and then find the image that you want to use. So
we’re going to use the demo content that we uploaded a little earlier. So make
sure that you’re on this tab right here and then just find the image that you
want to use. So I want to use this one right here. So once I select it, I should
see this checkmark and then I can just click on “Set Product Image.” And the image
should show up right here. And then what we can do to add some additional images
is come down to where it says, “Product gallery” and then click on this link
right here. And you should get this pop-up again. And if you want to upload
your own images, just go to “Upload Files” and then find the image that you want to
use. I just want to select one of these demo images right here, and you can
actually add as many different images as you want but for this demo, we’re just
going to add one additional image. So once I select it, I can just click “Add to
gallery.” And now, the image should be inserted right here. And then we
can just come up here and what we can do is add some product
category names so that we can sort our product by different category names. So
if you want to do that, we can just click on “Add new category” and we can type in
the category name right here. So I’ll type in “Dresses” and I’m gonna make this
a parent category, so I don’t need to change anything there and then I’ll just
click “Add new category.” And you should see the category get added right here
and you should see this checkmark next to it which means it’s gonna be put into
this category. And we can add one more so I’ll just type in “Womens” and push “Enter.”
And you can add as many different product categories as you want but I’ll
just add these two for this product, and then I can come down to the Product tags
section and put in some tags also. So I’ll type in a few different ones here,
and I’ll just click “Add” and you can see them inserted right here. And the
product tags and the product categories actually help with the related products
that show up on your demo pages o the product pages at the bottom. So you can
see that we have some related products down here and these show up based on the
product categories and the product tags, okay? So you can put in whatever you want
for these two sections and then what you can do if you want to make this a
featured product which is gonna show up on the home page is come over here to
where it says “Catalog visibility.” Click on the “Edit” button right here and you’ll
get this little section that comes up. And if you check this box that say, “This is
a featured product,” then this product will show up on the Homepage in the
featured product section. If you leave this unchecked, it’s just gonna show up
on your Homepage, okay? So that’s how you make products show up on the Homepage
as a featured product. So we’re gonna check this box and click, “OK” right here.
And that’s pretty much all we have to do to create a simple product. So now, we can
just click on the “Publish” button once you’re ready. And once the product is
published, let’s go and check it out. So let’s click on this link. And once the
Product page loads, this is what you should see. So you should see the new tag
right here, and then we have our short description right here and then our long
description down here. And our review should be enabled, and then we have our
category and product tags right here. And if we click on this little icon right
here, we should get a pop-up and we can go through our image
gallery right here for this product and you can always zoom in on
this product also. So that’s how you create a simple product. And if you want
you can pause the video and create some additional simple products for your
ecommerce website. Otherwise, what we’re gonna do is just move on to the next
step. So if you want, go ahead and pause the video and create some additional
simple products by following these steps that I just showed you. Otherwise, just
keep watching because what we’re gonna do now is learn how to create some
variable products. So you can see on this page right here, this is a variable
product. And the difference between a variable product and a simple product is
that you have these dropdowns right here with different variables or different
options for your products. So what I’ll do is I’ll show you how to create two
different variable products: one with just one variable and then we’ll do
another one with a combination of variables. So if you want to learn how to
create some variable products for your ecommerce website with WordPress, let’s
go and create a new product. So we can just hover over New right here and click
on “Product.” And once you’re on the “Add New Product” page, you can see that I
already filled out a lot of this information just to save some time since
the steps are the same as creating a simple product. So I already have the
product title right here and then I have my long description right here, and at
the bottom, I have my short description and I put in some product tags right
here. And I also inserted my featured image and another image for the product
gallery. So if you want, you can pause the video and fill out all this information.
And then once you’re ready, push “Play.” And really, what I want to do is come down to
the Product data section and show you what you have to do to create a variable
product. If you don’t want to pause the video, you can just keep watching and
I’ll just continue right now. So once you have everything filled out, you want to
come to the Product data section and in this drop-down, you want to select the
“Variable product” option. And what you’ll notice is that the General tab changes
just like this and we can go through these other tabs just for fun. So we have
the Inventory tab here and you can play around with this on your own. And then as
a reminder, if you’re going to be using the live rates, you want to put in the
weight and the dimensions for your products right here in the
Shipping tab. And we’re not going to cover the Linked Products tab but you
can always read up on the stuff on your own. And really, what you want to do if
you’re creating a variable product is come down to the Attributes tab. And what
you’re going to do is create your variable right here. So in this drop-down,
you should see that it says, “Custom product attributes.” So make sure that you
select that and just click on the” Add” button right here. And once you get this
section right here, what you’re going to do is name your variables. So what we’re
going to do for this product is create a variable called “Size” and then what you
want to do is put in the values over here. So we’re gonna put in “Small, Medium
and Large. ” And what you want to do is separate each of these with this line
right here. So it’s “Ctrl line” and the button is on the right hand side above
the Return button. So let me just show you. If i type in “Small” and then click on
“Shift “and then the button. So I think I said “Control” just a moment ago but it’s
Shift and then that button. You’ll see that this line gets inserted right here.
And then I can type in “Medium” and type “Shift” and hold that down and click this
“line” button right here. It’s the same button as the slash right here, but if
you click on the “Shift” button, it should give you that line. And then I’ll just
type in “Large” right here. So you can see that we have the line right here to
separate each of these variable options. And then once you’re ready, just click on
this box right here that says, “Used for variations” and then click on the “Save
attributes” button. And once everything is saved, if you ever want to come back in
here, you can always edit this stuff. And if you don’t see this, what you have to
do is just click and expand this. So once you’re ready, let’s go to the variations
tab. And you should see this section right here. And if you go into this drop
down, you’ll have all of these options and we just want to make sure that we
have the “Add variation” selected, and this should be selected by default.
So we can just click “Go” right here. And now, you should see this section right
here with all of your variable options in this drop-down. We want to leave this
as any size and then we can just come over here and click on this “Down” arrow
to open this up. And what we can do here is just type in our price. So I’ll type
in $14.95 and I’m gonna put this one on sale for $12.95.
And if you want, you can add any additional details here. Otherwise, all
you have to do is just click this to collapse it and then click on “Save
Changes.” And once that’s saved, you can come down to the “Advanced” tab and I want
to make sure that the “Enabled reviews” is checked. And you can fill out all this
other stuff if you haven’t already, and you can also add category names or just
check the boxes next to the categories that you already created. And then you
can come up here, and as a reminder, if you want to make this a featured product
that shows up on your Homepage, just come to Catalog Visibility and click on
the “Edit” link and then check this box to make this a featured product and click
“OK.” And once you’re ready, all you have to do to publish this product is click on
this button right here. And once the product is published, we can go and check
it out. And once you’re on the product page, you can see that this product is on
sale because we put in a regular price and also a sale price. And then down here
is our size variable and we can add whatever size that we want. And then down
here, we have our long description and also a tab for the additional
information which is gonna have the size information. And at the bottom of this
Product page, you can see that we have a Related product section that’s starting
to populate because of the product categories and the product tags that
we’re using. So as we create additional products with similar categories and
product tags, this section will fill up, okay? So that’s how you create a variable
product with one variable and what I want to do now is go back to the demo
ecommerce website, and I want to show you how to create a variable product with
two variables. So you can see on this demo page that we have a size variable
and then based on the color that we choose, we’re gonna have two different
prices. We have $99.95 for the green color and then for the blue color, we
have a different price right here. So I’ll show you how to create a variable
product with different variables and then also different prices based on the
variable options, okay? So let’s go back to the ecommerce website that we’re
making and let’s go and create another variable product together.
So let’s hover over “New” and click on “Product.” And once you’re
back on the “Add New Product” page, you can see that I already filled out a lot of
this information. So we have our product title, our long description and our short
description down here. I have some product categories and some tags right
here and then our featured image and an image for our image gallery. So again, if
you need to, you can pause the video and fill out all that information or you can
do that later. Really, what I want to do is just show you how to create a
variable product by coming to the product data section. And again, remember
that you’re going to go into this drop-down and select the variable
product option if that’s what you’re gonna create. And you can see that the
General tab changes and then you can go through these other tabs such as the
Inventory tab and you can manage your stock if you wanted to. And if you do the
live rate shipping, you want to make sure that you go to the shipping tab and
put in your weight and your dimensions. Otherwise, it doesn’t really matter. This
is just additional information. And for Linked Products, you can read up on this on
your own or you can check out our video on how to use WooCommerce. And again, that
link is going to be in the video description. And what I want you to do
for a variable product is come to the Attributes tab and we want to add some
custom attributes. And for this product, we’re gonna create a size and a color
variable. So we’re gonna add two product attributes. So first, let’s click on the
“Add” button right here. And once we get this section right here, we can just type
in our first variable. So we’ll type in “Size” right here. And remember, for the
values, you want to separate this with this line. So you want to type or hold
down “Shift” and the “line” button in order to get this line to show up. So we’ll
type in “Small” and put in that line, and then type in “Medium” and then “Large.” And
again, you want to click on this button right here that says, “Used for variations”
and click “Save attributes.” And once that’s saved, now what we want to do is
add another product attribute for the color variable. So once you get this
section right here, we can just type in color and then come over here to the
values. And you can type in whatever colors that you want. So we’ll type in
“Green” and we’ll type in “Blue.” And we’ll just use those two and then we’ll click
“Save attribute.” And once everything is saved, now what I want
you to do is go to the Variations tab. And now, you should see
this section right here. And again, in this drop-down, you have all these
different options but we want to leave it as “Add variation” and I want to click
“Go” right here. And you should see the variation get added right here. And I
want to add another one. So I’m gonna click “Go” one more time. And now you
should see two variations and what we’re gonna do is leave this as any size so
your customer can select any size that they want, but based on the color, we’re
gonna change the prices. So I want to select “Green” for this first one, and then
I want to select “Blue” for the second one and then we’re gonna go into each of
these and put in different prices. So whenever your customer selects any size
and “Green,” they’re gonna get a certain price and then whenever they select any
size and “Blue” they’re gonna get another price. So first, for the green I’ll click
and expand this, and I’ll just come down here and type in a price. So we’ll put in
$79.95. And then I’ll close this. And now, I’ll go to the second variation, and I’ll
open up this one and I’ll type in $100.95. or $109.95. So we’ll close
this up. And now, we have two different prices based on our
variables. And you don’t need to have two variables. You can actually just have one
so if you just have different sizes or different colors and you want to have
different prices, then you can just create a variable for whatever variable
that you want. And then just select them in the variation section and then go and
change the different prices. And that’s gonna set your prices, okay? So once
you’re ready, just click “Save Changes.” And once everything is saved, just make sure
that you fill out all this other stuff if you want to put your product in a
certain category or have them show up as related products. And then just as a
reminder, if you want to make this product a featured product that shows up
on your Homepage, come to this section where it says “Catalog visibility,” click
on the “Edit” button and check this box right here to make this a featured
product and then click “OK,” all right? Once you’re ready, the last thing that
you have to do is click on the “Publish” button. And once everything is published,
let’s go and check out our new variable product. And once the Product Page loads,
you can see that we have a price range right here since we have two different
Isis for our variables. And we can go in here and select whatever size that we
want. And then if we select the “Green” color, we get this price right here. And
if I go in here and change it to the “Blue” color, we get another price right
here, okay? And if you come down here, you can see that we have an additional
related product. And again, these are based on the product categories and the
product tags that we use. So make sure that you put those in if you want the
related product section to show up, all right? So this is how you create
variable products with different prices. And now, you know how to create variable
products and simple products. So if you want, you can pause the video and create
as many different types of products as you want or you can do that later. I’ll
probably just do that on my own but right now, if you’re ready we can just
move on to the next step or you can pause the video to create some
additional products. So if you’re ready to move onto the next step, what we’re
gonna do now is go and customize our category names. So if I hover over Browse
Categories over here, you can see that I have a bunch of different category names
from when I created different products, and what we can do is add a custom icon
next to these category names if you want. So I’m gonna show you how to do that, but
first let me just show you what a category page looks like. So this is the
On Sale Category page and it looks very similar to the Shop page. And I like this
look so we’re not gonna change this. All we’re gonna do is go in and add some
custom icons to our category names. So if you want to do that, let’s go back to our
ecommerce website and let’s go back to our WordPress dashboard. And once you’re
back on the WordPress dashboard, we’re gonna go to our categories page. So hover
over Products and click on “Categories.” And once you’re on the product
categories page, you should see a list of all the categories that you’ve already
created and you can create some additional categories by typing in the
category name right here and then the same name right here, and then you can
select whether or not this category is gonna be the parent or if it wants to be
a subcategory of another existing category. So what we’re gonna do is just
show you how to add an icon to an existing category name. So right here
where it says, “Accessories,” if I want to go and add an icon, I can just click on
the “Edit” link. And once you’re on the Edit Category page, all you have to do is
come down to this icon section and click on this button and you’ll
get this pop-up and you should see some icons right here and you can
search for an icon if you want also. And then just click on the one that you want
and then just click on the “Update” button right here. And once the category is
updated, then you can just click “Back” right here. And once you’re back on this
page, what you can do is just go in and select the icons that you want for all
of your different categories. So if you want, you can pause the video and do that
right now. Otherwise, what we’re gonna do is just move on to the next step. And now
what we’re gonna do is learn how to create the About page for our e-commerce
website with WordPress. So we’re gonna make a page that looks just like this. So
if you want to create this for your online store, let’s go back and let’s
create a new page. So hover over “New” and click on “Page.” And once you’re on the Add
New page, all we’re gonna do is type in our page title. So I’ll type in “About.” And
I’m gonna leave the page title as checked right here so that’s gonna show
up on the page. And I just want to turn on the Backend Editor. And what we’re
gonna do is create two different rows for these two different sections over
here. So let’s go and do that by clicking on the “+” button right here and then
find the “Row” element and click on that. And once you see the first rows show up
right here, I want to split this in half. So I’m going to go into this icon right
here and just hover over the second one that says, “1/2 + 1/2” and click on that.
And now you should see two boxes right here. And what we’re gonna do is add a
single image on the left hand side and then a Text Block on the right hand side.
So let’s add our image first by clicking on the “+” button right here. And then
find the single image element and click on that. And once this shows up right
here, what I’m gonna do to add an image is just come over here and click on this
“+” button. And once you get this Media Library pop up, if you want to upload
your own images, just go to “Upload Files” and click on “Select Files.” If you want to
use the demo content, we have some images over here. So the first one that I’m
gonna select is this one right here. And you can see right now that it’s in a
color and you have this thing called “Image Filter” on the upper right over
here. If I go in here, you can actually filter the image by different options. So
I’m gonna select “Black & white” right here. And you’ll notice that the
image turns black and white. And once you get that if
you want to upload this with the filter, all you have to do is click on “Set image.”
And you should see the image show up right here, and if you ever want to
remove this image, just click on the “X” and then click on the “+” button to
change the image. And what I want to do is come down to where it says, “Image size”
and you can read on how to format the image size right here. What I want to do
is just delete where it says, “Thumbnail” and I want to put in certain dimensions.
So I want to type in 550 by 300 and that’s just going to change the size of
this image to fit on this page. But you can always play around with this to find
the right size for you. It really depends on how much text you put in because you
can see on the demo website right here that this image pretty much lines up
with the length of text over here. So if you type more or type less, then you
probably want to change the dimensions, okay? So once you’re ready, you do have
the option of changing the alignment for this image and then you can also put a
border or change how this image looks if you want. But we’re going to leave this as is.
So once you’re ready, click on “Save Changes.” And now what we’re gonna do is
come over here and we’re gonna put in a text block, but before we do that we’re
gonna format this part of the row. So what I want to do is click on the small
pencil right here. And once you get this pop-up over here, what I want to do is
just go into “Design” options, and I just want to format the padding for this
section just to make it look a little bit better. So on the left hand side over
here underneath padding, I’m gonna type in “10px” and then on the right hand side,
I’m gonna type in “50 px.” And again, you can always play around with this stuff
and you don’t actually have to do this. It’s really up to you. I think it looks
better if I put this in so I will do that, and then I’ll click on “Save Changes”
right here. And now, we can add a text block. So click on the “+” button right
here and then find the “Text Block” and click on that. And once you get this
pop-up right here, you should see some default text, and we can delete that. And
let me just go to the demo ecommerce website and just copy this text right
here just to save some time, and I’m gonna paste that in right here. So if you
need to, you can pause the video to type in your About section or whatever story
that you want. You can always format this text with any of these
buttons right here, and you also have the option of clicking on this
button to get some additional buttons to style your text, okay? So once you’re
ready, go ahead and click on “Save Changes.” And now we have our first row of
content for our About page. And what I want to do now is add some space over
here just to give it a little bit more room before we add our next row. So I’m
gonna click on the “+” button right here and then what I want you to do is
find the “Empty Space” element. So that’s this one right here. So once you find it,
go ahead and click on that. And once you get this pop-up right here for the empty
space settings, you can customize the amount of space that you want. So I just
want to put in “25 px” right here but you can type in whatever you want. And now
what we’re gonna do is add another row for the image and the text on the bottom
over here. So I’m gonna click on the “+” button, and I want to go back up and find
the row element and click on that. And once it shows up right here, we’re gonna
split this row in half again. So over here, just click on “1/2 + 1/2” and
you’ll see two columns. And let’s go and format the column on the left hand side
where we’re gonna put in the text blocks. So click on the small “+” button right
here. And once you get this pop-up, we’ll go into the Design Options tab, and I
just want to put in some padding on the right-hand side over here. So I’m gonna
type in “25 px” and then click “Save Changes.” And if you wonder how I come up
with these padding numbers, I really just test them out and see what they look
like. So you can always play around with them on your own. And once you’re ready,
we’re gonna click on the “+” button right here and then find the “Text Block”
and click on that. And once you get this pop-up right here, we’re just going to
delete this again and paste in our dummy text. So again, I just got this from the
demo ecommerce website. So if you need to and if I go too fast, go ahead and pause
the video. Otherwise, just type something in and click “Save Changes.” And now, we’re
just gonna add our single image widget right here. So let’s click on the “+”
button and then find the “Single Image” element and click on that. And once you
get this pop-up right here, we’re just gonna click on the “+” button right in
the middle to find the image that we want. And I’m gonna use this one but
again, I’m gonna go into the image filter and click on “Black & white” and
just let this change. And once you’re ready, click on “Set Image.” And now, you should
see the image show up right here, and all I want to do is come down to image size.
And again, I want to put in some dimensions so I’ll put in “550 by 300.” And
once you’re ready, go ahead and click on “Save Changes.” And now, that’s pretty much
all we have to do for our ecommerce About page that we just built with
WordPress. So unless you want to add anything else, all you have to do is
click on the “Publish” button right here. And once the page is published, let’s go
and check it out to make sure that it looks right. And once the about page
loads, this is what it should look like. So the ecommerce website should be
looking pretty good right now. And if you’re ready, we can
move on to the next step. And now what we’re going
to do is learn how to create some blog posts for the
ecommerce website that you’re learning how to make with WordPress.
So we’ll have a blog title at the top, we’ll insert a featured image and then we’ll
have our content section right here. And if I scroll all the way down, you’ll
notice that we’ll have a related article section over here. So this will populate
once you create enough articles and then we’ll also enable a comment section for
your visitors to leave the comments. So I’ll show you how to create one or two
different blog posts, and if you create enough, then you will have a blog post
page that looks as beautiful as this. So if you want to learn how to create some
blog posts, let’s go back to our WordPress website that we’re making. And
you can always go to your WordPress Dashboard if you want or you can just
hover over New right here and click on “Posts.” And once you’re on the Add New
Post page, just remember that you can always hover over Post and click on “Add
New” and you’ll come right to this page also. So the first thing that we’re gonna
do is type in the blog title right here. So I’m gonna go to the demo ecommerce
website and just copy this title, and that’s just gonna save some time. So I’ll
paste that in right here and then what we want to do is come down here and this
is where we’re gonna type our content. So you can type in whatever you want. I’m
gonna go to the demo site and just come down here and highlight and copy all of
this text just to save some time. So I’ll copy this and then go back and paste
that in right here. And what I want to do after you have
your text right here is I want to show you how you can format some of your text
with these buttons. So if you don’t see the second row of
buttons, you want to click on this button right here that’s titled “Toolbar Toggle”
and that’s gonna unhide the second row and you can hover over these buttons and
see what they do. So there’s a bunch of different buttons. The one that I really
want to show you how to use is the “Insert Edit Link” button. So if you want
to link your text to another page, what you want to do is highlight that text
and then click on this button right here. And you’ll get this little pop-up and
you can type in the URL that you want to link this text to and then click on this
arrow right here to apply or you can click on this wheel right here and
you’ll get this pop-up. And again, you can type in the URL right here and you can
check this box to open up the link in a new tab or what you can do is just come
down in this drop-down and then select the page or product or whatever you
created. And if you click on it, it’s gonna put the link right here and then
you can just click “Add Link.” And now, this text is gonna link to whatever page that
I just selected. And if you want to remove any of this, you can just click on
the text and then you can go and edit this or you can click on this button
that says, “Remove link” and that’s gonna remove it, okay? So again, if you need to
pause the video, go ahead and do that. Play around with any of these buttons or
this drop down and format your text however you want. And then once you’re
ready, what I want you to do is come down to the bottom and this is where we’re
gonna put in our featured image for this blog post. So once you’re ready, click on
this link right here. And you should get this pop-up right here and again, if you
want to upload your own images just click on “Upload Files” and click on
“Select Files.” If you want to use the demo content, stay on the Media Library tab
and find the image that you want to use. So I’m gonna select this one right here
and all I have to do is click on “Set Featured Image.” And once it shows up
right here, we can put in some tags if you want or you can add category names
for your different blog posts. So that’s all I’m gonna do here. I’ll just type in
“Fashion” and I’ll leave this as the Parent category and then I’ll type in
“Culture” also. So you can always go and edit the category names on the left hand
side over here, but once you’re ready all we have to do to publish our blog posts
is click on the “Publish” button right here And once the WordPress
blog post is published, we can go and check it out. And once your blog post is
published, you should see the categories at the top and then your title right
here and the featured image and then your content right here. And if I come
down to the bottom, you should see a link to another blog post called “Hello
world!” and this is installed by WordPress by default. So let me just show you how
to delete that and then you can go and pause the video and create some
additional blog posts. So I’m gonna go back to my WordPress Dashboard. And once
I’m back on this page, I’m gonna go and hover over Post and click on “All Posts.”
And once you come to this page, all I want to do is just hover over this blog
post and click on “Trash” and that’s gonna delete the blog posts. So now what you
can do is pause the video and create some additional blog posts on your own.
And as you create additional blog posts, your blog page is gonna look just like this. So I’m also gonna pause this video and
create some additional blog posts, and once you’re ready push “Play” and we’ll
move on to the next step. So just as a reminder you can click on the “Add New”
button right here or hover over New and click on “Posts” to create some additional
blog posts. So go ahead and pause the video and I’ll see you in just a little
bit after you create some additional blog posts on your own. All right, and welcome back!
So I paused this video and I created 20 different blog posts with
different featured images and category names. So now when I go to the blog page
on my ecommerce website with WordPress, this is what you should see. So if you
created a bunch of different blog posts, then you probably have a blog page that
looks just like this. And if you created more, then it will look like this also. So
if you’re ready, we can move on to the next step. And now what I want to do is
just quickly show you how to add some widgets to your sidebar on your blog
post page. And I think the sidebar only shows up over here so we’re just gonna
do this really quickly and add a few different widgets. So if you go to your
WordPress dashboard and I’m on the Widgets page already. So if you want to
come to this page, just hover over Appearance and click on “Widgets” and
you’ll come over here. And what we’re editing right now or adding widgets to
is the Blog Sidebar. So I’ve already added my widgets. I just added a search
bar widget. So you can just click and drag these into the sidebar and then I
also added a text widget right here with just some description and a little
signature at the bottom. And what you want to do is make sure that you click
“Save” on both of these so they show up on the sidebar for your blog post page, okay?
So if you want, you can pause the video and find the widgets that you want to
add to your blog sidebar, and then go ahead and add those. And then once you’re
ready, push “Play” and we’ll move on to the next step. Otherwise, we’ll just move on
right now. And what we’re gonna do now is learn how to create the Frequently Asked
Questions page for our online store with WordPress. And you can see right here
we’re just adding a few different sections with some questions and answers.
So if you want to do that right now, let’s go back to our WordPress dashboard
and let’s add a new page. So hover over New and click on “Page.” And once you’re on
the “Add New Page,” all you’re gonna do is type in your page title right here.
So I typed in Frequently Asked Questions and once it saves, you should see the
permalink right here and I’m gonna edit this. So I’m just going to change it to
FAQ. And once I save that, what we can do is turn on the Backend Editor. And now,
let’s add a row for our questions and answers. So click on the “+” button and
click on “Add row.” And I’m gonna split this row in half. So I’ll hover over this
and click on “1/2 + 1/2.” And we’re just going to add some text blocks here to
put in our questions and answers. So I’ll click on the “+” button right here and
find the “Text Block.” Click on that. And once you get this pop-up, we can just
delete this text and I’ll go to the demo ecommerce website and just copy this
text right here just to save some time. And then I’m gonna paste that in right
here. And if you need to, you can always edit the text. So my first line for the
questions is bold and then I just have normal text down here. And then once
you’re ready, just click “Save Changes.” And f you want, you can add another text
block right here or you can hover over this. And if you click on this icon right
here, it’s gonna duplicate this and then I can just click and drag this over here.
So I can go in here and edit these questions a little bit later, but since
we’re just making a demo page here, I want to go a little quicker
to save some time. So at the bottom over here, what I’m going to do is add an
“Empty Space” widget so I’ll go in here and just click on this. And once the
settings pop up, I’ll just change this to “16px” and click “Save Changes.” And then we
can add a new row at the bottom over here. And let’s split this in half again,
and then we can add some more text blocks right here. So I’ll just go in
here and click on this, and again I’ll just paste in the dummy text right here.
And then again, we can go in here and just duplicate this and drag this over
just to save some time. And then you can do this over and over again to add as
many different questions and answers as you want, and just make sure that you add
the empty space each time that you separate a row. But if you’re at the
bottom over here and you don’t have any more questions, you don’t need to add
another empty space. There should be enough padding before your footer, okay?
So creating the Frequently Asked Questions page is pretty quick and easy.
So if you want, you can pause the video and fill all of these sections out. And
then once you’re ready, all you have to do is click on the “Publish” button. And
once the WordPress page loads, this is what you should see for your FAQ page.
And we’ll add the footer a little bit later and also our header menu. So there
are some things that we haven’t done yet but if you’re ready, we can just move on
to the next step. And now, what we’re going to do is just really quickly show
you how to create a really nice Contact Us page with your address and your
contact information right here. So if you want to create this Contact Us page for
your online store, come back to your WordPress website and hover over New
and click on “Page.” And once you’re on the Add New Page, all we’re gonna do is type
in our page title right here. And then once you’re ready, let’s turn on the
Backend Editor and let’s go and add a new row. And once the row gets inserted
right here, I want to go in here and I want to change the row to “1/4 + 1/2
+ 1/4.” And you’ll see that the row gets split up like this and all we’re
going to do is add a text block right in the middle. And once you get this pop-up
right here, this is where you can add your address and contact information. So
I’ll just paste in what I have from the demo ecommerce website
and what I can do after I paste this in is I can highlight everything
and just align it to the center. and if you’ put in your email address and
you want to link this, so when someone clicks on it it’ll open up the email
that they can type, all you have to do is just highlight the email address and
then click on this “Insert Edit Link” right here and you should see that it
says, “Mail to:” and then your email address. All you have to do is click
“Apply.” And now your email address is linked, okay?
So once you’re ready, just click “Save Changes” right here and that’s pretty
much all we have to do. So once you’re ready, let’s click on the “Publish” button.
And once the page is published, we can go and check it out. And once the WordPress
page loads, you should see your contact page right here. And if you hover over
your email address, it should be linked to your email. So before we move on, I do
want to remind you that you can always leave a comment or question if you have
one in the Comment section of any YouTube video that you’re watching and
also if you can give this video a big thumbs up if this tutorial has been
super easy for you, and make sure to subscribe to the YouTube channel because
we’re always coming out with new videos just like this. So what we’re gonna do is
move on to the next step which is just gonna be creating our Terms & Conditions
and Privacy Policy page which are gonna be very easy. So I want you to go back to
your WordPress dashboard really quickly. And once you’re back on the WordPress
dashboard, as I said, we’re gonna create the Privacy Policy page and the Terms
and Conditions page right now. And you should have these pages already set up
for you. So if you want, you can just go and check it out. So hover over Pages and
click on “All Pages.” And once you’re on this page right here, if you come down
here, you should see a draft of your Privacy Policy page and also, you should
have the Terms and Conditions page right here. We’ll go over the Privacy Policy
page first. So if you don’t see this right here, what you can do is hover over
your settings and click on “Privacy.” And once you come to this page, what you can
do is use the default privacy policy page that WordPress creates for you or
you can add a new page and just title it “Privacy Policy.” We’re gonna use the
default page for this demo. So what we can do is just go and click on this “Edit”
link right here. And once you’re on the Privacy Policy page, WordPress puts in
some text for you so you can read this over and update it with your own business
name and your own privacy policy. If you have any questions or need
recommendations, you can click on this “Guide” right here and WordPress put
together a recommendations guide for your Privacy Policy page. And then once
you’re ready, all you have to do is click on the “Publish” button. So I’m not going
to edit this with you because this is just a demo website but you do have all
the resources that you need here. And then once you’re ready, just click on the
“Publish” button. And once the Privacy Policy page is published, you can go and
check it out if you want. We’re just going to move on and go to the Terms and
Conditions page. So again, I’m gonna click on “All Pages” over here. And back on the
Pages page, you should see the Terms and Conditions page that we created a little
earlier in the WooCommerce settings section, and it should be set to the
Terms and Conditions page already. So what you can do is just click on “Edit.”
And once you’re on the Terms and Conditions page, this is very much like
the Privacy Policy page where all you have to do is just type in your text
right here. And again, we’re not going to type anything in because this is a demo
website, and I don’t really need to think about the terms and conditions. But since
you’re creating an online store with WordPress, you probably want to have a
pretty good Terms and Conditions page. So go ahead and do that, and if you need to
you can always pause the video or come back to this page later. And then once
you’re ready, just click on the “Update” or “Publish” button. And once the page is
published, we have just created all the pages that we need for our ecommerce
website with WordPress, and we can go and double check to make sure that we have
all the WooCommerce pages in just a little bit. But right now, what I want to
do is just move on to the next step. And now what we’re gonna do is show you how
to create the header menu that you see up here. And also at the bottom over here
on this page, I can show you how to create the Footer menu. And this is going
to show up on all of your different pages on your ecommerce website and you
can add whatever links that you want. So if you want to create a header and
footer menu, let’s go back to our WordPress website and
what I want you to do is come down on the left-hand side to Appearance.
Hover over that and click on “Menus.” And once you’re on the Menus page, we’re
gonna create a few different menus together. So I’ll walk you through
everything, and the first thing that you want to do is create a new menu. And
we’re gonna create the header menu first. So what you can do is right here,
type in whatever you want to name the menu. So I’ll type in “Header” and just
click “Create Menu.” And once the menu is created, you can come over here to where
it says “Menu Settings” and check the box next to “Main Navigation” to set this as
the header menu so it’s going to show up on all of your different pages right at
the top. And then what you can do is come to the Pages tab here and check the
pages that you want to add links to for your Header menu. So you can see I added
the Home page, Blog page, Shop page and the About and Contact Us page. You also
can add blog posts or create custom links if you want, but these are the
pages that I want to add. So once you check the boxes, you can click on “Add to
Menu” and you should see everything get added over here. And if you want, you can
rearrange these by just clicking and dragging these around. And you can also
click and expand these to change the navigation labels. So instead of Shop, I
can type in “The Shop” and then if I wanted to change these other ones, I can
do that also. And so once you rearrange everything, and let me just note that if
you did want to have navigation labels that are part of a family, you can just
indent them and then when you hover over something, it’s gonna have a sub-menu item
like this. So that’s also an option but we’re not gonna do that here. So once
you’re ready, all you have to do is click on “Save Menu.” And once the Header menu is
saved, let me show you what the ecommerce website should look like
right now. So you should have your Header menu right here, and what I want to do is
show you how to create a mega menu like this with all of your different category
names, some links down here, and a call to action, and a little section for all of
your featured products on the Header menu over here. And also on the blog link,
if I hover over this, we can also enable a Mega Menu here. And then even on your
Contact Us page, we can insert something like this. And I think this just makes
your website look a lot more professional and this is something that
you won’t find on any other video tutorial. So make sure that you give this
video a big thumbs up if you haven’t already, just for showing you how to do
this because it’s just gonna bring your website light years ahead of any other
website that you’ll be able to make. So what we’re gonna do is first go and talk
about how to add all of our different category names, and then
show you how to create these mega menus. And then we’ll talk about how to add
this little thing over here, okay? So let’s jump back to our
ecommerce website. And I know I just threw a lot at you guys, but we’re gonna
walk you through this all one by one, step-by-step. So first, let’s go and make
sure that we have all the category names that we want. So let’s hover over
Products and click on “Categories.” And once you’re on the Product categories
page, what I want to do is show you how you can create category names. So when
you hover over this, you have a parent category called “Accessories” and then
subcategories right below. So if you want something like this, what you want to do
is go to this page right here, and then you just want to set some categories as
children of whatever parent category. So you can see I have accessories right
here and then I have some subcategories right here. And if you want to create a
new one, just type in the name of the category here. Put in the slug name which
is going to be the same and then go into this drop-down and select the parent
category. So if I select “Accessories” right here, then this category is gonna
fall underneath Accessories. If you want to create a new parent, just select “None”‘
right here, okay? And then what you want to do is just come down to the bottom
and you can update the icon, which should work when you get this theme. And then
just click Save or “Add New” and then that’s going to add the category to this
list right here, and then it’s gonna show up on the Mega Menu. So if you need, you
can pause the video and you can see that I have a bunch of different
subcategories all defined by these lines right here, and I’ll just scroll through
this really quickly. So you can see I have a bunch of different categories. And
once you sort all that out, then we can go and set our Mega menus up. And to set
our Mega menu, what we want to do is go to our Customize page. So we’re gonna
hover over “Appearance” and click on “Customize.” And once you’re on the
Customize page, just open up the Header tab and then go to the Mega Menu tab and
you should see your Header Menu items here, and if we click on “The Shop” tab
right here, what you want to do is enable the Mega Menu and then select this one
called “Shop Mega Menu” and you should see your product categories right here.
You can click and rearrange these and you can always hide these product
categories by clicking on the “eyeball” like this and it should turn to a light
gray color. And if you just scroll down, you should have these links down here
where you can turn on the Featured Product section and also these links for
the new products and sale products. And then if you want to show the call to
action with some text, just turn this on and then just update the text right here,
okay? So that’s how you create the Mega Menu for the Shop page. And what I want
to do is just show you how to turn on the Mega Menu for the Blog and Contact
Us page or links. So let’s click on the Blog tab. So let’s click on the Blog tab.
And again all you want to do is just enable the Mega Menu and click on the
“Blog” tab right here. And then if you want to hide any of these categories, you can
just do that by clicking on the eyeball, okay? And that’s all you have to do and
then if we go to the Contact tab, you can enable the Mega Menu here and select the
Contact option and then you can take a screenshot or image of your map right
here and upload it. And then you can update your phone number and all the
details down here. And you can see what I did, I added some HTML. So if you need to,
you can pause the video to add the HTML to add different lines for your address.
And once you’re ready, what you want to do is click on the “Save” button right
here, okay? And then the last thing that I want to do is just really quickly talk
about how to add this section right here where it says “Browse Categories.” And you
should see all of your different categories right here. So if you want to
enable that, we can just go back to the Customize page right here and we want to
go to the Mega Button and open that up. And then in your Settings, you just want
to enable that and then you have all your categories right here. And that’s
pretty much all you have to do. If you want to show your icons, you can do that
and you don’t have to do anything with this tab right here. So pretty much,
that’s all you have to do for the Header menu and just make sure that you click
on the “Save” or “Publish” button once you’re ready, okay? So if you have any
questions, leave a comment and yeah, that’s it. So let’s close out of this. And
once you’re back on the WordPress Dashboard, now what we’re going to do is
go and create our Footer menu and we’re gonna make a few of them so that we have
something like this and the links over here. So let’s go back to the Menu page
by hovering over Appearance and then click on “Menus” again. And once you’re
back on the Menu page, if you want to create a new menu, just click on this
link right here. And once you’re on the Create Menu page, before we create our
Footer menus, I want to create two additional Header menus. So you might not
need this one at the top bar but I’ll show you how to add this and then also,
the secondary menu right here. So let’s go back to this page right here and I’m
gonna create the top bar first. So I’m just gonna type in “Top Bar” and click on
“Create Menu.” And once the top bar is created, just come over here and check
the box for the Top Bar and then you can add whatever links that you want for the
Top Bar Menu. And what I’m gonna do is just add a custom link right here. So I
don’t have any different pages for different languages or currencies, so I’m
gonna put in a pound sign and that’s just a placeholder, and then I can put in
the dollar sign in U.S.. right here and click “Add to Menu.” And then what I’ll do
is I’ll just add “English” right here. So again, I don’t have a different language
so I’m not gonna put in a real link there. And then I’ll just put in “English”
right here and click “Add to Menu.” And I can show you on the demo ecommerce
website if you want that this is the structure for the top bar on the demo
website that you see. So we have our indented items right here. So when you
hover over it. And then again, I don’t have real links here, okay? So again, you
can add whatever you want to your Top Bar Menu. it doesn’t have to be
currencies or languages but whatever you add, once you’re done just click on “Save
Menu.” And once the menu is saved, let’s go and create that secondary menu. So click
on “Create A New Menu.” And once the secondary menu is created, all I did was
I check this box down here and then I added some custom links. And I put these
in already just to save some time. So you can see I put in the website name and
then this is the end of the URL. So if you want the same product category page,
just type this in. And then my navigation label says, “Explore” right here. And then
for the Help Center, this just goes to the Contact Us page, okay?
And what you want to do once you check this box and all that stuff is
click on “Save Menu.” And once this secondary menu is saved, now what I want
to do is show you how to create these different footer menus. So I’m just gonna
show you what I make for each of these. So let’s start with this one down here.
So I’m gonna go back to my WordPress Dashboard, and I want to create a new
menu. And I already created the Footer menu just to save some time so I put in
some random links. And the most important thing that you have to do is check this
box for the “Footer Menu.” So if you want, you can pause the video and create your
own Footer Menu and then what you want to do is create three additional menus
if you want some links like this. And I can just show you the other menus that I
created really quickly. So I have one called “Our Company.” And then again, I put
in some random links. And for this menu, you don’t need to check any boxes and
same goes with these other two menus. So I have one called “Customer Support” and
you don’t check any boxes. And then I have another one called “Shop Highlights.”
So you don’t need to check any boxes here either. So if you want,
you can pause the video and create these four different menus.
And you can see in this drop-down all of the menus that I have created. So we have
the footer and then three additional ones. And so pause the video, create the
menus that you need to. And then what we’re gonna do is show you how to insert
these menus and this section right here. So if you want, we can just move on to
the next step. Otherwise, pause the video and once you’re ready, push “Play.” So what
we’re gonna do is just show you how to insert the footer section. So what I want
you to do is hover over Appearance and then click on the “Widgets” link. And once
you’re on the Widgets page, all I want to do is just show you the widgets that I
used for the Footer section. So first, let’s talk about the Pre-Footer Widgets
and that’s gonna be this section on the ecommerce website right here. So if you
want some icons and some text, what you want to do is drag in some of these
“eCommerce Info Widgets” into the Pre-Footer Widget section. And you’ll get
this little section right here and what you can do is choose the icon that you
want and then just put in your text and your subtitle. And just make sure to
click “Save” on each one of these. So I have four of these and then right below
that is the Footer Widget Section and that’s going to be this
section right here with a search bar and then these other links right here. So if
you want to create this section, all you want to do is put in a Product Search
widget and then drag in some Navigation Menu widgets. And I have three of them
right here because we created three different menus and if we go into each
one of these, you can see that all you have to do is go into this drop-down and
select the menu that you want to show up. So we have our Shop Highlights, Our
Company, and Customer Support and these are the ones that I selected for these
navigation menus. And just remember to click “Save” on all these and then pretty
much, you are done creating the Footer section for your ecommerce website. So
once you’re ready, what we can do is go and check out our ecommerce website
that you’re pretty much done building now. So let’s go and just check out the
final product. And once your website loads, you should see the Header menu
right at the top, and then if you scroll down to the bottom, you should see the
Footer section. So you should see the Pre-Footer widget right here and then your
Footer section right down here. So if this is what you see, then you are good
to go and you have just created your own e-commerce website with WordPress.
And I do want to note that on the Text Tutorial, we do have a section to go over
all the WooCommerce pages. So if you’re missing any of these pages, you can come
over here and follow these directions to get some of these pages for WooCommerce
but you should have all the pages already set up. So I don’t think you’re
gonna have to worry about that but that is there, just in case. And the last thing
that I want to do in this video tutorial is just show you again that this
ecommerce website does work. So we’re gonna run through a transaction. I’m
gonna hover over this product right here and I’m gonna click this to go to the
Product page. And once you come to the Product page, we can just come down here
and select the size and change the quantity, and then click “Add to Cart.” And
once the item is added, we can just go and checkout. So let’s click on “View
Cart.” And once you’re on the Shopping Cart page, you can see that we have our
product right here and we’re just gonna come down here and click on “Proceed to
Checkout.” And once I’m on the Checkout page, I already filled out
my details right here. So you can see how much I have to pay
right here. So I’m gonna come down over here and click, “I have agreed to the
terms” and then just click on the “Proceed to PayPal button.” And once you come to
PayPal, we can just log in. And once you’re logged in, all you have to do is
just come down here and click “Pay Now.” And once your payment processes, you
should see this notification right here and you can just come down to the bottom
and click on “Return to Merchant.” And once you’re back on the ecommerce
website, this is what your customer’s gonna see. And if you ever want to see
all of your orders, just log in to your ecommerce website with WordPress and
hover over WooCommerce and click on “Orders” and you’ll see all of your orders
over here. And if you click on your order, you’ll go to the Orders page that looks
just like this where you can get the billing information,
the shipping information for your customer and you can change the status
of your order right here, and you can see the items that your customer ordered
down here. And if you do update these status, just make sure that you click on
the “Update” button right here. And then the email that your customer is going to
get after they place an order is gonna look just like this, and you’ll also get
an email in your own inbox whenever a new order is placed, okay? So you can see
that our ecommerce website that we made with WordPress is fully functional, and
I’m really excited that you were able to create this ecommerce website with
WordPress watching this NYC Tech Club Video Tutorial. If you enjoyed this video
tutorial, make sure that you give it a big thumbs up, and if you have any
comments or questions, please leave a comment in the comment section. Make sure
to subscribe and make sure to keep watching our videos because we’re always
gonna be coming out with new videos just like this. So congrats again, and I’ll see
you later. [Music] And there you have it .Congrats on creating your own ecommerce website with WordPress ! if you have any comments or questions, leave a comment in the comment section below And make sure to give this video a big
thumbs up and make sure to subscribe to the NYC Tech Club YouTube Channel
because we’re always coming out with new videos just like this.
Congrats again and I’ll see you later. [Music]

45 Comments

  • Sites Themes Designs

    COMPLETE WORDPRESS DEVELOPMENT, INTEGRATION, CUSTOMIZATION AND RESPONSIVE DESIGN SERVICES:
    http://sitesthemesdesigns.com/

  • Sumit Choudhary

    Hi I am sumit please help me…. I am already purchase domain name and hosting I want best budget woocommerce theme for multi add products like electronic products fashion products and many more but my budget is lo because I am a starter for start a new business I want create eCommerce website like Amazon and Flipkart eBay so please help me to choose budget theme for my website thank you please help me…

  • Justin Connelly

    Thank you for these tutorials, I've found theme extremely helpful in setting up a website for my business.
    I have a couple questions:
    1. In the first (older) video I was watching you recommended hostgator as the hosting service. This video came out while I was watching the other (but after I had already paid for hostgator service – though I did get the business package), and I switched to following this video since it aligned better with my goal (a store). I'm curious why you now recommend inmotion hosting vs hostgator?
    2. Less of a question, more of a helpful tip for anyone who runs into the same thing I did: When it came time to run through the woocommerce set up I had two issues: I had a persistent error flag on the wordpress dashboard that my site wasn't SSL compliant (even though I had an active certificate, and had changed the wordpress URL and site address to "https"), and I wasn't getting the woocommerce setup wizard shown in your video. I found the solution to both problems on the last page of a support forum thread after hours of digging: deactivate the woocommerce plugin and then reactivate it. Maybe this will help someone in the future.
    3. Our primary product is custom made based on information provided by our customers, is there a way to trigger a popup or otherwise request information in a couple text fields as part of the checkout process? We've been selling on Etsy and people constantly neglect the information we need, I would like to make sure customers have to provide the information we need before they can pay.
    Thank you again for this (and the previous) tutorial!

  • Batoul Al Shinqit

    Thank you for your efforts and these amazing videos. I have a question and I wish you could help me.
    I sell products that can be customized with initials in my website and I was wondering if I can make it easy and clear for the customers and add what the want as an option
    In this link I saw an idea that I really like and I hope I can do the same,
    https://us.maisondesabre.com/collections/iphone-x/products/black-caviar
    I would really appreciate your help,
    Thank you and good luck!

  • Yoko Kinoshita

    Hi Jameson! Hope you'll see my comment! Do you have a plan to make a video about wordpress or woo for drop shipping with AliDropship? very appreciate. and I really in love with your practise tutorials!! Thanks!

  • NYC TECH CLUB

    Sorry for repeating myself during the hosting sign up…I messed up a few times and didn't edit it out. *150 Likes and I'm going to help build websites for people for free!*

  • IamSabhi

    Hi Jameson, Hope you are doing great. Loved your video on How to Build an ecommerce website. i am planning to set up one soon. My Question for you is how do i set up an ecommerce website where i can create an account for my clients and add in products. and when eventually a customer buys a product, the client receives an email on their gmail about the customers order. is this possible, Can you let me know or make a video on that, would appreciate it greatly. Thanks Very Much.😇🙏😃

  • Infinity Sync

    Good to see the various crucial steps to follow for make a e-commerce website. InfinitySync also provides you reliable Woocommerce to a quickbooks integration plugin that simple, and elegant plugin for your e-commerce account, save your time at work by using quickbooks online store integration.

  • Sash Galaxys8

    Hi , can you please make one for me? How much you take? Please let me know… I am in need of one ecommerce website but not having enough time and patience to make one very nicely as you did. Also I don't have much technical knowledge… thank a bunch

  • Tom Leung

    Thanks so much NYC TECH CLUB! I have just set up my e-commerce site with your help. Feel free to check it out 🙂 www.nipponhomeidea.com

  • Nick Angelus

    Hi Jamison, can you do a tutorial on how to solve the image upload issues slot of people have with wordpress. The error is HTTP error or exceed maximum time 30 . Thanks in advance.

  • Roni Hatuka

    hello jameson! thank you for the video can you tell me what am i going to do instead the demo content ? which file do I need to ask for in order it will be compatible .Thank you!

  • Codehan

    Hi & thanks for the tutorial. I would like to use the theme for a customer project and completely modify it for the customer. How does it work with the license? Can the customer then use it without restrictions for e-commerce purposes or does he have to pay attention to something else here? For the theme I do not ask for payment, of course, but only for the installation and configuration of WordPress as well as the modification of the theme with the content of the customer and the desired design of the customer. I ask for an explanation, because I would then like to buy and use the theme.

  • Sneh Kumar

    Bhai kisi ko bhi Abhi jaise DMCY, Dailypaissa, Helping Hand, Universal help jaise double krne wali website chal rhi hai.. Waise website banana hai tho contact kre whtsup number pe 7328003354

  • Will Cunningham

    Fantastic video! You may have covered this so sorry if I have missed it. We have an ebay online store at the moment and would like to create a full website as per your video. Our stock is new and used clothes, and we may only have one item and size for instance. Therefore can you limit the QTY to one so a customer does not select more than you have in stock for example?

    Further, is it possible to search by size? I.E. if you put size 14 in for example for an item then all size 14 dresses are listed etc?

  • Mariella Kennedy

    Hi Jameson! Thank you because following your video I built my website! I’m having trouble editing my homepage , when I click on edit it shows as I haven’t have anything on it, but I have already added my slider and two pictures that I need to edit- would you know why it happens? Thank you!!

  • Christy Diehl

    I have created several websites with your excellent tutorials, however, this theme is not working as described (no top bar, menu does not show in main etc. Still waiting for help from Theme Forest. Very frustrating

  • Pankaj Kaj Patel

    Thanks for the video. It will help me get started on my ecommerce site. I went ahed and got an account and domain with Inmotion. Have not got the hanger these yet. Now, I just noticed that you have another video similar to this using the flatsome theme. Is one better than the other? Which one do you recommend? I will have less than 10 categories each with less than products each.

  • Roisin Clerkin

    Hi, I already have a eCommerce web site and use the ' Shopkeeper Child' theme. Could I upload the 'Hanger' theme to my existing web page without losing all the info?

  • Frederik Lawson

    Hi Jameson… Any suggestion for WordPress+WooCommerce Multi Vendor Marketplace ? Or do you have any tutorial video related to the above matter ? Thank you

  • Thearen Nhem

    Hi sir how can we do about the seller want to sell or rigester their products to our website and how do we manage or update our website?

  • Ustadh Abdelwahed

    Hello.
    Thanks for the video. I watched your other video for the Flatsome theme and now I am a little confused of which one should consider buying. The Hanger or the Flatsome. Please give us some comparison of the 2 themes. Thanks

  • Nazeer Carpentry

    Hi , your videos are great for learning ,very simple but would be more good if you make websites in free themes

Leave a Reply

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