How to Create an Ecommerce Website with WordPress – ONLINE STORE 2019!
Articles Blog

How to Create an Ecommerce Website with WordPress – ONLINE STORE 2019!

August 24, 2019


If you wanna learn how to create an
Ecommerce website with the WordPress, watch this video and I’ll show you how. What’s up everyone?
Its Jameson from NYC Tech Club. And today, I’m gonna show you how
to create this ecommerce website with WordPress step-by-step. And 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. And as you can see, this website is
just beautiful. It’s sexy, its sleek, and it has everything that you need to run a
successful online store. What I wanted to do when I created this website was
create something that you can be proud of, something that incorporates a lot of
the design aspects of leading ecommerce websites such as Amazon, Alibaba and Nike,
all of which are multi-billion dollar businesses that have spent millions of
dollars on web design research. I tried to stay away from website designs like
this that are just ugly, cluttered and make no sense whatsoever.
What I wanted to make was something that you can be proud of, something that’s
easy to navigate and something that works, something that will make your
customers wanna come back to over and over again and buy more and more of your
products. And I really think that we were able to achieve that with this website
and I’m really excited to show you how to create this ecommerce website with
WordPress. So if you wanna save thousands of dollars building out this
Ecommerce WordPress website yourself, then keep watching this video because
i’m about to give you a tour of exactly what we’re gonna build right now. So this is the ecommerce Home page
that we’re gonna learn how to make. And what we’re gonna do is learn
how to create a custom slider just like this. So we’ll insert a
few different images and add whatever text that you want and we can also
include these buttons right here to redirect your visitors to different
parts of your ecommerce website. And I’ll also show you how to insert a
transparent header menu just like this and also include a top bar at the top of
your website if you want. And you can customize the colors of your entire
ecommerce website and the layout of all your different pages. I’ll show you how
to do that in this video tutorial. So below the custom slider, what we’re gonna
do is insert some buttons down here to redirect your visitors to different
parts of your ecommerce website, and then we’ll have a featured product
section just like this. And what we can do here is showcase some of the products
that you sell on your ecommerce website right here and your visitors can also
just click and add these to their shopping cart or their wish list if they want.
And then below this, what we’re gonna do is insert a call-to-action so that your
visitors can click and go to your shopping page. And then we’ll have a
custom footer at the bottom with some social media buttons and then some
footer links down here. And now what I wanna do is show you what the About
page is gonna look like that we’re gonna make. So this is the About page that
we’re gonna learn how to make and on all of our pages, we’re gonna have custom
page titles at the top and on this page, we’ll have a little section that talks
about your business. And then if you want, you can insert an Employee section just
like this. And then we can have a Products and Services section down here
with custom icons. So I’ll show you how to create this but you can always go in here and
customize the layout of your About page to look however you want. And then what
we’re gonna do is have a call to action at the bottom that’s gonna link to the Contact Us page. And then we’ll have our custom footer down here, okay? So now what I wanna do is show
you what the Shop page is gonna look like. So this is the Shop page that we’re gonna learn how to make. And you can see right here that we have custom category links and we can have a custom sidebar just like this. So I’ll show you how to customize this. And what we’re gonna do on the Shop page. is just show all of your different products right here. So this is the Shop page and what I wanna
do now is just show you some of the products that we’re gonna learn how to make in this ecommerce tutorial. So the first type of product that we’re gonna learn how to make is called a “Simple Product” and that’s because there isn’t any variables like different sizes or different colors. There’s only one product that you can purchase. And what you can do is add as many as you want. So this is a simple product page and you
can see that we have our main image right here that you can zoom in on and
you can also click on another image or add as many different images as you want
for this product. And then down here, you can see that you can add this to your
wish list and you have a long description down here and you can check
out reviews. And then below this, we’re gonna have a Related Products section for
products that are similar to this. And then below this, we’ll have our custom
footer, okay? So now what I wanna do is show you the other type of product that
we’re gonna create. So this is a variable product. And the difference
between a variable product and a simple product is that you have these drop-downs
right here with different variables and different options for your products. So
I’ll show you how to add different variables to your products if
you have variable products. And pretty much the rest of this page is pretty
much the same. So if you wanna create any other type of products like
downloadable products or virtual products or affiliate link products, I’ll
also show you how to do that. But the main products that we’re gonna focus on
are these simple products and the variable products, okay?
So now what I wanna do is just show you what the Blog page is gonna look like. So this is the main Blog Post page and if you’re gonna write some blog posts to keep your visitors updated, then they would come to this page right here.
And they can just scroll down and find the article that they wanna read. And
they can hover over it and just click on that article and you can customize these
hover colors to be whatever you want. And now what I wanna do is just really
quickly show you what an individual blog post looks like. So this is an individual
blog post and you can have a featured image show up just like this or you can
leave it blank and just have a white background. And below this is gonna be
your content section, so you can add whatever you want. And then we’ll have a
section for your visitors to leave comments if you want also, okay? So that’s
what your blog posts are gonna look like. And now what I wanna do is show you
what the Contact Us page looks like. So this is the Contact Us page, and we’re
gonna have a custom title at the top and then some contact information right here.
And I’ll show you how to link your email address if you want also. And if you have
a physical location, we can insert a map just like this. And now what I wanna do
is show you the other pages that we’re gonna create for our footer down here. So the first is gonna be the Frequently Asked Questions page. So this is the FAQ page,
and we’ll have a custom title and then we can have different sections right
here for different questions and answers. And you can add as many different
sections as you want and then we can also add a call to action at the bottom
to let your visitors get in touch with you if they have some additional
questions. And on all of your pages, you will have a back to top button, just like
this, that brings you right back up to the top of the page. So let me show you
the last two pages. The first is gonna be the Privacy Policy page. And this is the
Privacy Policy page. It’s pretty basic but you can always add some additional
information or format the layout however you want. And then we’re going to have a
Terms and Conditions page just like this. And this is the Terms and Conditions
page that we’re gonna make and you can add whatever sections that you want
right here. And I’ll show you how to add a separator line just like
this. And by the end of this video tutorial, you’re gonna be able to
customize the layouts for all of your different pages to look however you want.
And on each of your pages, we’ll have a custom footer with a custom background
color just like this. And you can add whatever links that you want down here
and you can have a custom copy right down here also. So this is a responsive
WordPress website. So this website is goinna look good on any PC, laptop, iPad,
iPhone or Android device. It’s gonna resize automatically. And you
can see that we have all the different devices right here. So this is what it
would look like on a mobile device and then on an iPad device right here, and
then on the PC or laptop right here. So this is the ecommerce website that
we’re gonna learn how to make in this video tutorial. And what I wanna do
before I talk about the theme that we’re gonna use is run through a transaction
with you really quickly. So I’m on the Home page and what I wanna do is just
come down to the Featured Product section, and I wanna add one of these
to my shopping carts. So I’ll hover over this product right here and just click “Add to Cart.” And once the item is added to my cart, I should see that notification right there. And what I can do now is just hover over my shopping
cart and click on that. And let’s go and click on “View Cart.” And once I’m on the
Shopping Cart page, you can see that I have my product right here and if I wanna remove this, I can click on the “X” right here or I can add a coupon code if
I have one. And over here, I have the subtotal and I can see the shipping cost.
And also we can calculate the taxes because we’re using a plug-in called
WooCommerce which allows you to calculate the taxes
and the shipping for your customers whenever they put in an order. So the tax
will show up after I include my billing information. And for my ecommerce
website, I integrated PayPal but you can always use whatever payment options that
you want. And I’ll show you how to integrate those a little bit later in
this video tutorial. So down here, I can click on “Proceed to checkout” or “Check
out with PayPal.” So I’ll just click on “Proceed to checkout.” And once you’re on
the Checkout page, if you have an account with this ecommerce website, then your
customer can click here to log back in. This is my first time buying a product
on this ecommerce website so what I did was I filled out the billing information
right here and I put in my address. And what that does is it calculates the text
for me automatically over here. And then at the bottom over here, I
decided to check this box to create an account with my ecommerce website .So I
put in my email address and a new password. And now all I have to do is
come to the right-hand side over here and then just select the payment option
that I wanna use, and then click on “Proceed to PayPal.” And once I’m on the
PayPal page, all I have to do is choose how I wanna pay for this and then
click on continue right here. And then I can just click on “Pay Now.” And once the
payment goes through, I should get this notification. And now, I can just click on
this link to go back to the ecommerce website. And once I’m back on the
ecommerce website, I should see this notification right here that says, “My
order has been received.” And if I want, I can go to my account page by clicking on
this icon right up here. And once I’m on My accounts page and I’m logged in, I
should see some links right here. And I can click on the orders link, and I’ll
come to this page right here. And I should see the order that I just made
right here, and I can see the status of the order right here. And what I wanna
do really quickly is just show you the emails that you would get as the customer and the
business owner of the ecommerce website. So first, as a customer, I would get this email that says, “I made a payment to the ecommerce website.” And then as a business owner, if you get a new customer order, you’ll get this email with the new customer order and then you’ll get all the details down here. And since we’re using the WooCommerce plugin for WordPress which
is the best ecommerce plugin there is, if you log in to your WordPress website
you can also track the order and get all the details here. And I’ll cover all of
this in the video tutorial, okay? So that’s just a quick rundown of a transaction on
the ecommerce website that we’re building. And what I wanna do really
quickly is just talk about the theme that we’re gonna be using to build out
our ecommerce website. So what I wanna do is go to the Theme Forest website. So this is the Theme Forest website and this is where we’re gonna go to get the theme that we’re gonna use to create our ecommerce website with WordPress. Now this is a premium theme so there is a small fee. But again, remember, you’re gonna be saving
hundreds, if not thousands of dollars building out this super professional
ecommerce website yourself. And this theme literally has everything that you need. You can customize the layouts, the pages, the colors, and even the payment options. This is one of the most popular ecommerce themes in the world, and it’s created by a company called, “Get Bowtied” which is an elite WordPress developer with a great track record. They offer great customer
support. So if you have any questions whatsoever, they’ll help you out and get
back to you right away. And I’m gonna have a link to this page in the video
description so that you can come and check out this theme yourself. But I
promise you, this is the best ecommerce theme available and we’ve been
recommending ecommerce theme for years. The Shopkeeper Theme is completely worth
it and if you want an amazing ecommerce website using WordPress and the
WooCommerce plug-in, this is the theme that you want. You can see up here that
there are thousands of people that have used this theme to create their own
e-commerce website. It has a five-star review, and it’s always being updated
with the latest premium features that you can use for your own ecommerce
website. So again, this is the Shopkeeper Theme and this is the theme that we’re
gonna use to create our ecommerce website together. So without further ado,
what I wanna do now is just get started on this video tutorial. 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 get hosting service. So a domain is your web address and
for my website, it’s nyctechclub.com. And so what we’re gonna do is
show you how you can register a domain for the ecommerce website that
you’re gonna be making with WordPress. And then what we have to do is
get hosting service which lets you run your website and store all of your
content. So what we’re gonna do for both of these is go to a website called,
“hostgator.com.” So what I want you to do is come to the NYC Tech Club website to
this text tutorial on “How to Create an Ecommerce Website with WordPress 2018.”
And we have a link to this page in the video description that you can click on
or you can just type in the URL. And once you come to this page, you can see that
we have every step that we’re gonna go through in this video. So if I go a
little too fast or if you need some more information, you can always come to the
text tutorial and just check out what we did and I typed out everything for you
over here. And also if I go too fast, you can always just pause the video and you
can always rewind. So go at your own pace and if you have any questions, you can
always just leave a comment in the comment section and I’ll get back
to you. So once you come to the text tutorial on “How to Create an Ecommerce
Website with WordPress,” I want you to come down to step number one which is
register a domain and get hosting. And you’re gonna see a few different links
here to HostGator. And this is where we’re gonna go to get our domain and our
hosting. And these are affiliate links. So once you come down here, go ahead and
click on either one of these or we have this button right here that brings you
to HostGator. So go ahead and click on this. And now ,you should be redirected to
the HostGator website. And I use Hostgator for all of my different websites and
I recommend them to all of my clients because they’re super fast, really reliable,
they’re cheap, and they have great customer service. And that’s why I’m gonna recommend them to you and I also recommend them in all of my WordPress Tutorials. So once you come to the Hostgator page, what we’re gonna do is go and register our domain and get hosting. So go ahead and click on this button right at the top that says, “Web Hosting.” And once you come to this page,
you’re gonna notice that there are three different plans down here: The Hatchling,
Baby and Business Plan. And the business plan is a little too expensive and more
than what we need. So we’re just gonna focus on the Hatchling and the Baby Plan
for this ecommerce tutorial. So the Hatchling Plan is if you wanna just
make one website and one website only, then all you need is the Hatchling Plan.
But if you wanna make more than one website and you wanna host them on the
same account, then what you wanna get is the Baby Plan. And I have a lot of
different websites that I run on Hostgator so I have the Baby Plan. But
for this video tutorial, since we’re just making one ecommerce website, what I’ll
do is sign up for the Hatchling Plan. So you can just select whichever one that
you want. And then once you’re ready, go ahead and click on the button that says,
“Buy Now.” And you should be redirected to this page right here. And this is where
we’re gonna go to register our new domain and then select the hosting plan
that we want. And we’ll go through all of these steps together just to make sure
that you fill everything out correctly. So let’s go to step number one and make
sure that you’re on this tab right here. And what you’re gonna do is type in
the web address that you wanna register. So I’ll type in “shopkeepertheme.com”
and just push enter once you’re ready. And you should see your search results right here and if you see this green checkmark and it says, “Added” then we’re good to go and we can move on. If this is red right here, what that means is the web address that you entered is already registered
and you need to search for another one to see if it’s available. So if you see
this green check mark and it says, “Added” then we’re good to go. And what I want
you to do is scroll down to the bottom over here and I want you to uncheck this.
This is an extra cost and an extra service that we don’t really need and we
can always add this back a little bit later. So if you uncheck this, then we’re
good to go. And now what we can do is move on to step number two. So step
number two is choosing a hosting plan and this is where we’re gonna go to
select the plan that we want and then the billing cycle that we want. So in
this first drop-down, this is where you can select the Hatchling, Baby or
Business Plan. And just as a reminder, the Hatchling Plan is if you wanna make
one website and one website only, and the Baby Plan is if you plan on making more
than one website and you wanna host them on the same account, then you wanna
select the Baby Plan. And for this video tutorial, since we’re only making
I’ll just select the Hatchling Plan. And then what you can do
is go into the Billing Cycle right here and select how long do you want to have
your hosting service for. And you can always update this stuff later. So what I
usually recommend for my clients is either 3 or 6 months just so that you
give yourself enough time to know whether or not you want to run a website
or not. And so I’ll select “3 months” right here. And then what you’re gonna do is
type in a username and a security pin. And I’m not gonna do this section
because I already created my account, but if you need to, you can pause the video
and type in a unique username and a security pin. And then once you’re ready,
let’s go down to Step Number 3. So Step Number 3 is entering your billing
information. And again, I’m not gonna fill this stuff out because I already have an
account, but if you need to you can pause the video and fill everything out. And
once you’re ready, push “Play” and then we’ll move on to Step Number 4. So Step Number 4 is adding additional services and by default, HostGator selects some of these for you. And these are just extra costs, and we don’t really
need the stuff, and we can always add this back a little bit later. So I want
you to uncheck all of these boxes and you can see right here that I can also
link you to a video on “How To Get An Email Address Using Your Domain For Free”
so you don’t need to pay for this stuff. I’ll link you to the video tutorial that
I made in the video description. So make sure that you uncheck all of these and
once you’re ready, let’s go down to Step Number 5. So Step Number 5 is
probably the most important step in the sign up because this is where you can
enter a coupon code to save some money. And by default, HostGator puts in a
coupon code for you, and you can see down here that you save a couple dollars. But
what I want you to do is actually delete this coupon code and type in “nyctech30” and then click “Validate.” And what nyctech30 is is a special coupon code that HostGator has provided to me to give to you and it’s actually the largest coupon code available on HostGator. So once you type in “nyctech30” and click “Validate” you can see that you save a bunch of money down here. So
make sure that you type in “nyctech30” and click “Validate.” And then once you’re
ready, come down to the bottom and just check this box that says, “You have read
and agreed to the terms.” And once you’re ready, go ahead and click on the “Checkout
Now!” button. And once you register your domain and get hosting from HostGator,
what I want you to do is go to your email inbox. And you should have an email
from Hostgator titled “Your Account Info” and if you open that up, you should see
some details right here. And what we’re gonna do right now is move on to the
next step which is logging into our control panel. And then we’re going to
install WordPress so that we can start making our ecommerce website. So right
here where it says, “Your Control Panel,” I want you to click on this link. And once
you come to this page, what we’re gonna do now is go and login to the cPanel
and install WordPress. So if you need your username and your password, go ahead
and go back to your email from HostGator. And your username and your password are
right here, and then you can just copy and paste those into these two sections.
And then once you’re ready, click on the login button. And once you’re logged in, this is your control panel. And this is where we’re gonna go to install WordPress so that we can start creating our online store. And
the control panel might look a little different when you log in because I’ve
been told that it’s gonna get redesigned in a few weeks. So if it does, don’t worry.
All you have to do is find this button over here that says, “Build a New
WordPress Site” and go ahead and click on that. And once you come to this page
right here, all you have to do is go into this drop-down and select the web address
that you wanna install WordPress on. So I selected “shopkeepertheme.com
and we’re gonna leave this blank. And all we have to do is click on
the next button right here. And now, you should be brought to this page right
here and what you wanna do is put in the title of your WordPress website
right here. And you can always update this later after we install WordPress. So
it doesn’t really matter what you type in and then put in a user name. So create
whatever username that you want and then your first and last name, and then the
email address that you want to have associated with this WordPress
e-commerce website. And then once you’re ready, check these boxes right here and then
click on the orange button that says, “Install.” And once WordPress is installed, you should see this notification and you should have your login details right here to login to your WordPress website. So you can write this stuff down and save it or you can go to your email inbox and you should have an email from HostGator titled “Install Complete.” And if you open this up, you should have
all of your login details right here. So just make sure that you save this email and you should have your username and password. And what we wanna do is go to the admin URL. So it’s gonna be your web domain/wp-admin. And this is the website that we’re gonna go to to login to our WordPress website so we can start creating our ecommerce website. So what we wanna do is just click on this link and you should be redirected to this page right here. And now what we’re gonna do is log in to our WordPress website. So what I want you to do is put your
username and password in these two boxes. And if you need them, you can go to your email from HostGator and just copy and paste the username and password. And once you’re
ready, go ahead and click on the login button. And once you’re logged in, this is your
WordPress dashboard. And this is going to become very familiar to you as you go
through this video tutorial because this is where we go to create all of our
different pages and posts, and upload all of our images and also, where we’re going
to go to create all of our different products for our ecommerce website. So
right at the top, you should see a notification that says, “Your site is
currently displaying a “Coming Soon” page. So unless a visitor is logged into your
WordPress website right now, they’re not gonna be able to see the WordPress
website that you’re making. So unless we click on this link to publish our
WordPress website, whenever someone comes to your website, they’re just gonna see a
Coming Soon page. And we’re gonna click on this link at the end of this video. So
we’re gonna create and customize our entire ecommerce website first, and then
once we’re ready, we’ll launch our website at the end for the world to go
to and then buy a bunch of stuff and make you lots and lots of money, okay? So
what I wanna do before we go and install the Shopkeeper Theme, so that we can
start creating our online store, is I wanna go and show you what the website looks
like now that you installed WordPress. So if you want, you can just type in your
web address and go to your Home page or you can hover over your website name on
the upper left and click on “Visit Site.” And once your WordPress website loads,
this is what it should look like right now. So there should be some demo content
and it should look pretty basic. But don’t worry about what it looks like right now
because remember, we’re gonna go and get the Shopkeeper Theme, and we’re gonna build out our ecommerce website to look just like this. So what I wanna do now is go back to my WordPress dashboard so that we can install the Shopkeeper Theme. And then we can start creating the ecommerce website with WordPress. So if you’re on this page, what I want you to do is hover over your website name on the upper left and then click on the dashboard link to
bring you back to your WordPress dashboard. And once you’re back on the WordPress
dashboard, what I want you to do now is go to the text tutorial on “How to Create an
Ecommerce Website with WordPress 2018” and we’re gonna go down to Step Number 4. And Step Number 4 is getting the Shopkeeper WordPress Theme. So again, we’re gonna be using Shopkeeper to create our ecommerce website and there’s a few links here that you can click on to bring you to the Shopkeeper page, and
I’ll also put the link in this text over here somewhere so you can see the URL if you just want to type it in. So once you come to Step Number 4, go ahead and click on one of these links to bring you to the ThemeForest website. And now you should be on the ThemeForest
website, and this is where we’re gonna go to get the Shopkeeper Theme. So make sure that
you’re on the Shopkeeper Theme page right here. And all we have to do to get
this premium theme is come down here and click on this “Buy Theme” button. And you
should get this popup and all we’re gonna do is click on “Go To Checkout.” And
now what you wanna do is create your account. So if you need to you can type
in your name and your email address and then click on the “Next” button right here
and then create a username and a password. And then check these boxes
right here and then click on the button that says, “Create an account & continue.”
And then you’re gonna fill out your billing information and then you can get
the Shopkeeper Theme. And I’m not gonna do this with you because I’ve already
created my ThemeForest account, and I’ve already got the theme. So go ahead and
pause the video and fill out all this information. And then push “Play” once you’re ready and
I’ll show you how to download the Shopkeeper Theme and how to install it so that we can start creating
our ecommerce website with WordPress, okay? So I’ll see you in just a few minutes. Alright, and welcome back! So if you
paused this video to get the Shopkeeper Theme, Now you should be logged into your ThemeForest account and I’m on the downloads page right here. And you can see that I have the Shopkeeper Theme
right here and if you need to come to this page, what you can do is hover over your username and click on the “Downloads” link and it’ll bring you right to this page. And what we’re gonna do is download the files that we need so that we can install the Shopkeeper Theme onto our
WordPress website. So what I want you to do is click on the download button right
here, and click on this link right here that says, “Installable WordPress File Only.”
And what that’s gonna do is download a zip file with all of the files that we need to install to get the
Shopkeeper Theme. And what you can also do is click and download one of these license certificate and purchase codes. And I’m not gonna click on this because it’s gonna pop up and show you my
activation code. But what’s gonna be in here is the certificate code that you can input onto your WordPress website. So whenever Shopkeeper gets updated, your WordPress website and your WordPress
theme that you’re using is also gonna get updated automatically. So again, download the
installable WordPress file only and then click on one of these links to download the certificate so that you have the code that we can input into our WordPress website, okay? And once you’re ready,
let’s go back to our WordPress dashboard. And what we wanna do is install the Shopkeeper
Theme. So on the WordPress dashboard, come down to appearance on the
left hand side and hover over that, and click on the “Themes” link. And once you’re on the
Add Themes page, just click on “Upload Theme” and then click on “Choose File” and go to the folder
where you downloaded the Shopkeeper Theme. And you wanna make sure that you’re installing
a zip file. So if you only see the folder right here, what you wanna do is go to your folder. So let me go to my Finder. And I’m in my Downloads Folder right here. And if all you see is the folder,
what you wanna do is right click it and then click on “Compress.” And what
that’s gonna do is make this into a zip file. And this is what we need to install
onto our WordPress website in order to get the theme to work. So make sure that
you right-click that and turn it into a zip file if you don’t see the zip file already, okay?
And once you do, you should see the zip file right here and just select
that one and then click on “Choose” and then click on “Install Now.” And once
the theme is installed, just come down here and click on the “Activate” link. And
once the theme is activated, you should see this screen right here and all we
have to do is go and install the plug-in tools for this theme. So let’s click on
this button right here that says, “Install Now.” And once the Get Bowtied tools are installed,
you should see this notification right here, and it should say, “All the plugins
are installed and activated.” And there’s a few more that we
have to install. So let’s click on this link right here that says, “Return to
Plugins” or what you can do is hover over “Plugins” on the left hand side and then
click on “Install Plugins.” And once you’re on the Plugins page, let me take a step
back and explain what plugins are. So plugins are tools that help you create
and customize your WordPress website that you’re making. And we’re going to be
using plugins to create the ecommerce website and we’re going to install a few
more that we need to. You can see there’s a notification right here. But before we
do that, you can see there’s a list of a bunch of different plugins that are installed.
And if you ever wanna deactivate these, you can just click on the links right here.
And then once they’re deactivated, you can delete them if you want to.
So you can see that we have the Get Bowtied tools plug-in right here and we just install this, and we need it for our ecommerce website. But what we also need are these two plugins right here: the WPBakery Visual Composer and then the WooCommerce plugin. And this is the page builder that’s gonna help us create our page layouts, and then WooCommerce is what we’re gonna use to run our ecommerce website. And it’s one of the most popular plugins for ecommerce websites on WordPress. So what we wanna do is install both of these. So let’s click on the “Begin
installing plugins” button right here. And once you come to this page right here
just come down here and click on “Install Now” and then click on “Install Now” for
WooCommerce also. And you can see that they’re both installing. And once they’re both installed, what we wanna do is go back to the plugins page just to make sure that both of these are activated
so that we can use them. So hover over “Plugins” and click on “Install Plugins.” And
once you’re back on the Plugins page, you can see right here that it says, “The
following plugin is currently inactive.” So what we wanna do is just come down
to the WP Page Builder right here and click on the “Activate” link right here.
And once the plugin is activated what I wanna do now, before we move on to the
next step, is download some additional plugins so that we can create a wish list
for our online store, and also a plugin that’s gonna help make your website run a little
faster. So if you’re on the Plugins page still, what I want you to do is click on the “Add New Button.” And once you’re on the Add Plugins page, right now
I’m on the featured tab and the first plugin that I want is this one called
“WP Super Cache.” So if you don’t see this, you can just type in “WP Super Cache”
right here and this plugin should show up. And what this one’s gonna do is store your files
on your server. So it’s gonna make your website load a little faster. So we want to install this just to make our website load faster. So let’s click on the “Install Now” button and once it’s
installed, let’s click on the “Activate” button right here. And once that plugin is activated,
let’s go back and add one more plugin. So click on “Add New.” And once
you’re back on the Add Plugins page, this time I wanna search for the plugins. So
type in “YITH WooCommerce Wishlist, And once you do, you should see these search
results right here and this is the one that we want. So once you find it, go ahead and click on “Install Now”
and then just click on the “Activate” button. And once you’re back on the Plugins page,
I just wanna make sure that you have the plugins that we need to make our online store. So you should have Get Bowtied Tools and the MOJO Marketplace helps you show your Coming Soon page but if you don’t have this one, that’s okay. And we wanna make sure that you have the
WooCommerce plugin, the WP Super Cache to make your website faster, the Page
Builder and then this Wishlist plugin. So if you have all of these and they’re
activated, then we’re good to go. And now what I wanna do is show you how you can link the Shopkeeper Theme to the ThemeForest website so whenever Shopkeeper gets updated,
your website’s also gonna get updated. So on the left hand side, let’s hover over
Shopkeeper, and let’s just click on this welcome link. And once you’re on the Welcome page right here, you should see this little notification right here to run the setup wizard. And we don’t really need
to do that because we’re gonna go through these settings together and we’re gonna select everything that we need step-by-step. So all I wanna do right
now is go to the “Updates” tab right here. And once you come to this page, you can
see down here it has this button right here that says, “Connect your Envato account”
to this theme and what that’s gonna do is enable the theme updates for your
WordPress website. So we wanna do that just so that you get automatic
updates. So click on this button right here. And once you see this popup right here,
just come down to the bottom and click on the “Approve” button and you should be
brought back to this page right here. And now, your ThemeForest account
should be connected to your WordPress website. So you should have access to updates to the
Shopkeeper Theme whenever they get updated. So we’re good to go and you don’t actually need to do this step. So if you didn’t do this step, that’s okay. You don’t need to connect your ThemeForest
account to your WordPress website, but if you do, it just makes your life a lot
easier. So before we move on to the next step, which is gonna be downloading and uploading
all of the demo content, I wanna show you how you can get all of the different layouts
that you saw on the preview website from the Shopkeeper Theme. So all you have to do
is click on the “Demo “tab right here. And once you’re on the Demo tab, if you wanna
install all the different pages with their layouts from the Shopkeeper Theme demo website, and I’m talking about the demo website that the developers created right here. And if I hover over these
menu items you can see there’s all these different layouts and all these
different pages, then all you have to do is click on the button right here that
says, “Import Demo Content” and that’s gonna upload all the different pages and
products that are on that demo website. And then you can go into the Pages and replace
the content or learn how to make the pages by looking at the Page Builder. But we’re not
gonna do that for this video tutorial. But I did wanna show you how
you can get those layouts if you want them. Instead, what we’re gonna do is go and download the demo content that we’re gonna use for this video tutorial and then we’re gonna go and
create all of the pages on our own using the page builder. So what I’ll do right here is just close out of the demo. And then what we wanna do is go to the text tutorial to download the demo
product images and everything like that. So let’s go back to the text tutorial and
remember, we do have a link to this page on “How to Create an Ecommerce
Website with WordPress” in the video description. So once you come to this page, I want you
to scroll down to Step Number 7. And on Step Number 7, you can download
a zip file with some demo images to use to create your ecommerce website. If you have your own images, you can use those instead. But if you do need some demo content,
go ahead and click and download the zip file with a bunch of different images that
you can use to follow this ecommerce tutorial. So once you click and download this,
let’s go back to our WordPress dashboard And we wanna upload the images
that we just downloaded. So on the left hand side of the WordPress dashboard,
hover over “Media” and then click on “Add New.” And once you’re on the Upload New Media page,
what you can do is upload all of your images all at once or you can do this one-by-one as we go through making all of our different page. So if you do have a bunch of images right now that you wanna upload, what you can do is click on “Select Files” and then go to the folder
that you have all of your images in. So right here, I have the Demo Content folder and
if I open this up, I have all my images right here. And I’ll just change this to a list and what you can
do is select these on-by-one and upload them. Or you can just click on, I think, “Ctrl Shift” and it will select everything. And you can just upload them all at once. So once you select them all, go ahead and
click on “Choose.” And you should see all of the images getting uploaded one by
one right now. So we’ll just wait for these to all upload and then we’ll move on to the next step right after. And once everything is uploaded, you should see all of your images right here
and if you wanna edit any of these, you can just click on the “Edit” link right here or what you can do is go to your “Media Library.” So hover over “Media” and click on “Library.” And once you’re on the
Media Library page, you should see all the images that you uploaded onto your ecommerce website right here. And if you wanna edit any of these images, just hover over the one that you wanna edit and then click on that, and you’ll get this popup right here and you can delete the image right here. Or if you
wanna edit the image, just click on the button right here. And you’ll get this
pop-up right here and you can resize the image over here. And if you wanna crop
this image, all you have to do is highlight the area that you wanna crop
and then click on this button right here. And you can also rotate the image with
these buttons right here. So if you do make any changes to any images, what you wanna do
is click on the “Save” button down here, okay? So we’re not gonna edit this image.
So all I wanna do is click the “X” right here to exit and we
should be back on the Media Library page and I do wanna note that you can
upload some additional images here by clicking on the “Add New” button and then
finding the images that you wanna upload. And I can also show you how to upload
images as we create our pages and posts. So we’ll do that as we go through
this video tutorial, okay? So what I wanna do before we move on to
the next step is actually go to our ecommerce website now that we installed
the Shopkeeper Theme, because I just realized we haven’t gone to see what the website
looks like now that we have the theme installed. So what we can do is just hover over
our website name on the upper left and click on “Visit Site.” And
once the ecommerce website loads, if this is what you see, then we are good to
go. And it should look a little different than what we saw a little earlier because
now we’re using the Shopkeeper Theme. So again, if this is what you see then we are good
to go and now we can move on to the next step. And now what I wanna do is create the first two pages for the ecommerce website that we’re making. So we’re gonna make the Home page and then the Blog Post page and then we’re gonna go into our theme options and select these settings that we want
for the online store that we’re making. So if you’re on your Home page right now, what I
want you to do is go and create a new page. So you can hover over “New” and
click on “Page.” And if you’re still on your WordPress dashboard, let me show you
what you have to do. So let me go back to the dashboard. And once I’m back on the
WordPress dashboard to create a new page, again you can hover over “New” and click
on “Page” or on the left-hand side, you can hover over “Pages” and then click on “Add
New.” And once you’re on the “Add New” page, if you want to make a new page, all you
have to do is type in a page title right here. So we’re creating the Home page so
I just typed in “Home” right there. And then down here is where you can put in
your content or create the custom layout. And we’re gonna do this in a little bit.
So we’ll come back here and create the whole layout for this page a little bit
later. So right now what we can do is uncheck this box next to “Show Page Title”
because we’re gonna have a custom slider with a page title when we make this page.
And then down here in the Page Attributes, I can go into the template
drop-down and select “Full Width Page” because that’s the template that we’re
gonna use for our Home page. And you can always select whatever you want,
and we can always do this later also. So once you’re ready, let’s just publish this page
so that we have the Home page ready to go. So click on the blue button right here that
says, “Publish.” And once the page is published, if you want to go and check it out,
you can click on “View Page” right here. But we’re not gonna do that
because this page has nothing on it, but what I do wanna do is create a
Blog Post page. So right at the top, let’s click on “Add New” again to create a new page.
And once you’re back on the “Add New Page,” again all we’re gonna do is just type in a
page title right here and this time around , we’re creating the Blog Post page.
So just type in “Blog” right there, and we’re gonna select the layout
for the blog page a little bit later or actually in the next step. So what we
wanna do is leave this checked because we do wanna show the page title this
time. And then down here, we’re gonna leave this as is also. So you don’t need
to change anything this time. So once you’re ready, go ahead and click on the
“Publish” button. And once the Blog Post page is published, we have the first two
pages for the online store that we’re making. So now we can move on to the next step.
And now, what we’re gonna do is go to our theme settings and select the
colors that we want, the font styles and some of the page layouts for some of our
pages. So if you wanna do that, what I want you to do is hover over “Shopkeeper” on the
left hand side and click on the “Customize” link. And once you’re on the Customize page,
you can see there are some tabs over here. And we’re gonna go through these
and I’ll show you what I selected for the demo ecommerce website
and you can follow along or you can select whatever settings that you
want for the online store that you’re making. And on the right hand side over
here, this is a preview screen. So this is what your website looks like to your
visitors. And whenever you make changes over here, this is gonna update so you
can see what the changes would look like. And whenever you do make changes, click
on the blue button up here to save your changes. And if I go too fast, remember
there’s always the text tutorial on “How to Create an Ecommerce Website with
WordPress” and on step number 9, I have all the settings that I selected for the
demo ecommerce website here, okay? So let’s go back to the Customize page
right here. And the first thing that I wanna do is set the Home page and the
Blog page that we made. So on the left-hand side, over here, come down to the
Homepage Settings and click on this tab. And you’ll see this popup over here and
what I want you to do is click on “A static page” and then go into the “Posts
Pages” drop-down and select the “Blog” page to set the Blog page to the Posts page
and then go into the “Homepage” drop-down and select the “Home” page that you made.
And what this is gonna do is set these two pages to the Home page and the Post
page. And once we do that, you can see now this is what the Home page looks like right now.
So let’s click the “Save” button really quickly. And once everything is saved, now we can go back to the main customize page and what I wanna do now is just go through these in order. So first is
the Header tab and when we go to this you can see there are a bunch of
different options here and the header is this section on the demo WordPress
website. So up here is the top bar and then this is the header right here. And
if we scroll down, you can see that the header changes to a black background
color. So by default, what I selected was a transparent header. So if you want this,
then what you wanna do is just follow along with these settings that I select.
So let me go back to the Customize page right here. And the first thing that we’re
gonna do is go into the Header Styles tab. And you can see here there are a
bunch of different options, so let me just show you what I selected over here.
So for the header layout, I selected this one. And this has the menu on the left
hand side and then the header menu items on the right hand side. So you can select
whichever option that you want. And then down here, I have the navigation size as
13 but if you wanna increase or decrease this, you can drag this wheel around and
I kept the font color as black, but if you wanna change this, all
you have to do is click on “Select Color.” And you can type in the color code if
you know it right here or you can drag this wheel to change the color to
whatever you want and you can also click on these buttons down here. If you wanna
have the default color, all you have to do is click on the “Default” button and
that’s gonna change it back to the default settings. And then once you’re ready, just
click on “Select Color” to close that. And again for my header on the demo
ecommerce website, we have a transparent header. So I wanna turn this on. And for the
default transparency color scheme, I selected dark and then I selected
same as above up here. And then I’m just gonna skip down to the dark transparency color
scheme and I change the text color to black. So again, you can go in here and change the
color to whatever you want. And we always have the color codes and all that stuff in the text tutorial on “How to Create an Ecommerce Website” and then I’ll just click on “Select Color” to
close that. And then down here where it says, “Header background color,” I went in
here and I changed this to black also. And again, you can do whatever you want. You
don’t need to follow exactly what I select. And then down here, I already changed
some stuff just to save some time. So for the spacing above the logo, I dragged
this to 22, and then for below the logo, I have this as 21. And then for the header
width, I selected the custom option and changed this to 1173. So if
you wanna do that, go ahead. And also on the bottom down here, you can see
there are a few different icons. And what these are are different devices. So if you click on these,
you can see what your website looks like. So right now, we’re on the laptop and PC. So again, you can always just click on these just to see what the website website looks like for these
different settings that you select, okay? So once you’re ready, let’s go back up to the top and if you want you can click on the “Publish” button right here to save your changes
or you can do that right at the end. So let’s just click “Back” right here,
and let’s go to the next tab. And for the the Header elements, we should already have all of these turned on except for the Off Canvas Drawer. And I don’t wanna
make any changes here but all of these are for the icons on the upper right over here.
So if you wanna make any of these disappear, what you can do is just click and turn these
off. And you can see that the heart disappears now for the
Wishlist since I turned this off. And if you have custom icons that you wanna
have instead of these default ones, you can also upload them here. So we’re not gonna
make any changes here and we’re gonna leave this one off. So all
we have to do is just go back right here. And now let’s go to the “Logo”
tab. And on the logo tab, this is where you can go to upload your own custom
logo for your ecommerce website. And if you don’t have a logo, I’ll show you how
to create one for free in the next step. So what I wanna do now is just show
you how you can upload your own logo. So first, we wanna remove the default logo.
And then what you can see is that once you remove the logo, the name of your website
just shows up right here. So if you want this, then that’s fine and
if you wanna change the name of your website, I’ll show you how to do that in
just a little bit. But if you do have a logo that you wanna upload, what you
wanna do is click on “Select File” and if you wanna upload your own image, all
you have to do is make sure that you’re on the “Upload Files’ tab right here and
then click on “Select Files” and go to wherever you saved your image or logo. Select that
and then click on this button down here. And that’s how you’re gonna upload your
logo or images to your ecommerce website. If you wanna use the demo content,
what you’re gonna do is go to the “Media Library” tab and you can see we have
all the demo images already uploaded and we just wanna find the
logo that we wanna use. So this is the demo logo that I have for
this ecommerce website. So once I select this and the name of this is “dark logo.png.”
All I have to do is click “Select” right here. And now you should see the
logo show up right here and also right here. And if you want you can have an
alternative logo for the “Sticky Header” menu. So let me show you what I mean. On
the demo ecommerce website, we have our transparent header menu up here, and you
can see that the logo has the black text. And then if I scroll down, you can see
that the transparent header menu now has a sticky header menu that stays at the
top of the page as I scroll down. And the logo changes also to the alternative
menu with the white text. So if you want something like this, what you wanna do
is create a second logo with whatever color text or logo colors that you want,
and then you can upload it over here for the sticky header menu whenever
someone scrolls down your page. So let me just remove this and upload
that logo. So again, I’ll click on “Select Files” and I’ll just go to my demo
content and just click on this one. So this is the light-logo.png and just
click “Select” right here. And now I have my alternative logo right here for the sticky
header menu. And I believe that’s all we do. We don’t change anything else here.
So this is gonna be 50 and this is gonna be 40. And once you’re ready, you can click the
“Save” button or just click “Back” right here. And let’s go to the “Top Bar” tab. And really
quickly, let me show you what a top bar is. So on the demo ecommerce website,
this is my top bar, and you can see I have a message up here and I have
my social media buttons right here. And you can customize this section to look however you want. So if you do want a top bar, what you wanna do is turn this on right here and you’ll get this little section. And you can change the background color for the top bar if you
click on “Select Color.” And I selected “Black” right here and then you can also
change the text color over here. And then you can add whatever message that
you want right here. So you can delete this and type in whatever you want. And then
if you want these social media buttons to show up, you want to turn this on. And
there’s another tab in the customize options to add whatever social media icons that
you want. So I’ll show you how to do that in just a little bit. But if you do want these social
media buttons, make sure that you turn this on. And once you’re ready, let’s go back
and finish off the header section. So let’s go to the Sticky Header tab really quick
and what I wanna do for my website is change the background color for the Sticky Header to black. So I wanna go in here and just select “Black.” and then I wanna change the sticky header color
to white. So go in here and just change this. And again, you can do whatever you
want. And once you’re ready, let’s click on the “Save” button up here. And once
everything is saved, let’s click “Back” right here and go back one more time. And
now let’s go to the footer tab. And on the footer tab, I wanna change some of
the colors over here. So you can see on the demo ecommerce website, this whole
section is my footer and I have some social media buttons, and then a section
down here for a footer menu and then our copyright down here. And you can customize
this to be whatever color that you want and also the text and the font hover
colors can be whatever you want also. So what you wanna do is go back to the
customize page here. And the first thing that I’m gonna do is change the
Footer Background Color. So I’ll click on “Select Color.” And if you want that navy
blue color, you can go to the text tutorial. And right here in the footer
section on Step Number 9, I have the color code right here. So I can just copy
this and then paste it in right here. So the color code, if you wanna type in,
that navy blue color is “#042368” And you can see that the color shows up
right here, and you can also see it right here in the preview section right now.
And I wanna change the font text to white. And again you don’t have to follow along.
You can change these to whatever you want. And then the footer links when someone hovers over them. I want them to be white too, but you can change that to whatever you want.
And then down here, I wanna turn on the social network icons. So you’re
gonna show the social media buttons. And then if you wanna change the copyright
footnote, what you can do is just type in something right here but if you want it
to look like the demo ecommerce website where we have the copyright and then
your website name and it’s gonna link to your Home page. What you can do is go to
the text tutorial and I have this HTML here. You can just highlight and copy it
and then just paste it in right here. So delete this and paste it in. And then
all you have to do, you can put in the date in the front if you want. But if you
want the text right here to link to your Home page or any other page, just type in
the URL right here and make sure that you keep the apostrophes over there. And
then if you wanna change the text from “NYC Tech Club” to your own website name,
you can change that right here. And that’s all you have to do. And then if
you wanna turn on the “Back to Top Button” you can just click that right here and you can see that
we have that on the demo ecommerce website. It’s a little hard to see
but you can see it right here. So if I click that, it just
brings me back up to the top. So if you want that, make sure that
you turn that on right here, okay? So that’s how you customize the footer and once you’re ready, we can click “Back” right here. And now let’s go to the “Blog” tab. And on
this tab, you can select the blog layout that you want for your ecommerce website. So
I use this one, but you can play around with these other ones and see what they
look like. And if you want to turn on your sidebar for your blog post pages, you can turn
that on here but I’m gonna leave that off. So that’s all we have to do. Once you
choose your layout, let’s go back right here. And now we’re gonna come
down to the “Shop” tab and this is where you can go to customize the layout for
the store page. And the only thing that I change here is where it says, “Sidebar
Style,” I want to select “On Page” and that’s gonna give me a sidebar. You can
see on the demo ecommerce website on the Store page, we have the sidebar right
here. So I’ll show you how to customize this when we build the online store. So
let’s go back to the “Customize” page and make sure that you turn this on. And then
come back up to the top and let’s go to the Product page now.
And for this page, I don’t make any changes to the layout for the product
page but you can play around with these on your own and you can see the other
default settings right here. And if you want to see what the option that I
selected looks like, you can always go to the demo ecommerce website and check
it out right here, okay? So let’s go back and if you do make any changes go ahead and click on the “Save” button up here. Otherwise, click “Back.” And now, let’s go to the “Styling” tab.
And once you’re on the Styling tab, this is where you can go to change some of
the font colors for your ecommerce website. And I left the default
color codes for the body text and also for the headings which are
going to be the page titles and larger fonts. But if you want to change this
stuff, just click on “Select Color” and drag this wheel to whatever color that
you want or you can change the color code right here. The one that I did
change was the accent color. So if I go in here, you can see the color code is “ef6700”
and it’s just a brighter orange color. So if you want this orange color
then just type in this color code. And let me show you the accent color
on the demo ecommerce website. So if I hover over a product, you
can see the accent colors show up over here and also on these other pages like
the Shopping page, you can see that the accent color shows up over here and then
on the Product page, it shows up in different spots over here. So whatever
color that you want for the accent color, what you want to do is go to this
Customize page right here and then type in the color code or drag these wheels
to whatever color that you want. And that’s all I changed for this tab so I’m
not going to do anything else here. And if you do make any changes, go ahead and
click on the “Save” button up here. And then we can go back and we can go to the
next tab which is the Fonts tab. And if you want the same font style as the demo
ecommerce website, select “Poppins” for the main font and then check the box next to
“Bold 700 “and unselect any other box. And then for the heading font size, change
this to “21” and then for the secondary font, type in “Yan” and find this font name
right here. And I can’t pronounce it so just type in “Yan” and you’ll find it. And then
for the variant, I selected “Semi-Bold 600.” So check this box and then uncheck any other
box down here. And just make sure that the font style for the body is “16.” And once you do that, we can just come back up to the top and click “Back” and then go to the “Social Media” tab. And what you want to do here is type in the URLs for the social media buttons that you want
to show up on your ecommerce website. So you can see, I have Facebook, Twitter,
Instagram and YouTube. And I left all these other ones blank. So only those
buttons show up on my ecommerce website wherever I wanted to put them. So if you
want, you can pause the video and type in the URLs for your own social media pages.
And once you’re ready, push “Play” and then click “Back” right here. And then we can
move on to the next tab. So we’re gonna skip the Custom Code tab because we
don’t have any custom code. So once you’re ready, just click on “Site Identity.”
And on this tab, you can update the website title and the tagline. And you
probably want to do that because it does show up on your web browser right here.
So for my tagline, I typed in “Fashion Has Never Been Better” and if you have a
favicon or site icon, we can upload that. And that usually shows up next to the site title
or sometimes next to the URL over here. So let me show you how to
upload that if you do have one and if you don’t, we can create one when you
make a logo in the next step. So click on “Select Image” and if you have
your own favicon and you want to upload it, click on “Upload Files” and then click
on “Select Files” and find that image. And then just click on “Select.” If you want to
upload the demo1, go to the Media Library. And let’s just scroll down a little bit.
And I have the favicon down here so I’ll just select this and then click on “Select.”
And we shouldn’t have to crop this, but if you do you can just drag these corners.
You can see a preview right here, so it looks like it fits perfectly.
So we’ll just click on “Skip Cropping.” And the favicon should show up right here now
and depending on your web browser, it should also show up over here
or over here, okay? So once you’re ready, go ahead and click on “Save” if you want
or just click “Back” right here. And now what I want you to do is just come down
to the WooCommerce tab and click on that and then go to the Product Catalog tab
and click on that. And these are the options that I have for the demo ecommerce website.
So Shop page display is “Show Products” and then Category display is
“Show subcategories & products.” And you can go in here and select whichever one
that you want. And then I “Sort by most recent.” And I have five products per row
and then five rows per page. And once you’re ready, click “Back” right here and
then go to the “Product Images” tab and click on that. And I have 600 for the
main image width and then 300 for the thumbnail width. And I selected the
custom option here and changed this to 3 by 4. So make sure that you type that in
and then we can click “Back” and we can click “Back” again. And now we are done
setting up the theme options or theme settings for the ecommerce website that
we’re making. So what I want you to do just to be safe is click on the “Save” button
at the top. And once everything is saved, we are good to go. So we can just
click on the “X” right here. And now, you should be back on the WordPress dashboard. And we’re going to move on to the next step which is gonna be modifying the permalinks
for the WordPress website that we’re making. So what I want you to do is come down
on the left hand side to “Settings” and hover over that and then click on “General.”
And once you’re on the General Settings page, this is also where you can go to update your site title and tagline, but we just did this so you shouldn’t have to do it again. So just come down to where it says, “WordPress Address and Site Address.” And what I want to do is add the “www.” in front of my website address. So right here where it says, “http://”
put your mouse in before your website name and just type in “www.” And
then same with the site address. Just be very careful and just put the mouse
right before your website name and just type in “www.” and just double check to
make sure that everything else is correct. And then once you’re ready, come down
to the bottom and click on “Save Changes.” And for security purposes, you’ll
be logged out. So all you have to do is just type in your username and password
and then you can log back in. And now, you should be back on your WordPress
dashboard. And now, if you go up to your web browser, you should see the “www.”
in front of your website name. So if you see that, then we’re good to go.
And now, what I want to do is just change the permalink structure.
So again, hover over settings and then click on permalinks. And once you’re on
the Permalinks Settings page, all I want to do is select the permalink structure
that I want for all of my pages and posts so I like to use the “Post Name”
option, so I’ll select this one. And you can select whichever one that you want.
And once you’re ready come down to the bottom and just click on “Save Changes.”
And once the permalinks are updated, we are good to go and we can move on to the
next step. And now what I want to do is show you how to create a free logo for
your WordPress website. So if you already have a logo, then you can skip this
section and move on to the next step. But if you want to learn how to create a
free logo, what I want you to do is go to the text tutorial on “How to Create an
Ecommerce Website with WordPress” and on step number 10, we have a link right here
to a website called “LogoMakr.” And we can just click on this. Aand once you’re
on the Logomakr page, you can come over here and click on the “X” right here.
Then click “Next” “Next” and “Done.” And what I want to do is just give you an overview
of how to use the Logomakr website. So you can create whatever type of logo
that you want for your online store, and then you can pause the video and do it
yourself. So the first thing that you want to do is find an icon or shape for
your logo. So you can click on the button up here that says, “Browse all logos”
or you can type in a keyword. So if I type in something like “Shopping Cart” and push
“Enter” twice, I’m gonna get a bunch of different shopping carts to choose from.
And I can select one of these to use as my logo. So if I click on it, it shows up right here
and if I want to change the color, I can just drag this wheel around
to find whatever color I want, and I can resize this by clicking on the corner
over here. And I can also move this stuff around if I have more shapes or some
text. So if I want to add some text like my site title name or e-commerce
business, I can click on the “T” right here, and then I can just double click here
and just type in the name of my website. So it’s “ShopShop.” And I can format this
by clicking out of it and then drag it to wherever I want. And then
if you want to change the font style, hover over the layer right here
and just click on this. And you’ll see that you get this little pop up here. And we can
go in here and just change the font style. So let me just click on this one just for fun
and if I want, I can change the font color. And I can resize the logo
so everything looks proportional. And what I recommend that
you do is make the height around 70 for whatever layers that you have. So you can
see when you drag these corners, you get these numbers. For the H, you probably
want it around 70 so that it fits within the header area so it looks pretty good.
And you can just move this around to wherever you want. And then once you’re
happy with it, what you’re going to do to download the logo is click on the disk over here.
And we’re gonna go with “Option 2” here. So all you have to do is click on
this “Download” button and that’s going to download your logo right here. And
remember that I have an alternative logo with white text. So if I go to the demo
ecommerce website really quickly, you can see that we have the header menu with
the logo and then if I scroll down, the header menu changes to the white color
because we have this black color right here. So what you can do is go back to
the Logomakr website and after you download your first logo, you can just
click on the “X” right here and go back to the main screen. And then you can click
on these layers and then change the text to white or whatever color that you want.
And if you change it to white, you won’t be able to see it but the logo does show
up right here. And then again, you can click on “Save” logo and then go back to
Option 2 and just click “Download” right here. And you’re gonna download your second
logo, okay? And then the last thing, let me just talk about really quickly is if you
want to have your favicon, I would come in here and probably delete my text. So I
would delete this layer. I can just go in here and click on this and then just
click “Delete.” And then I have my icon right here, and I can change it to
whatever color that I want. And I just want to make this about 50 by 50. So I
would drag this in to about this size right here. It doesn’t have to be perfect.
And then I would again go to save my logo, and click on “Option 2” and that’s
going to download the site icon or favicon. So now I have all three things: the favicon and my two logos (the alternative logo and then the normal logo). And then we can go and upload it. So if you want, I
know I covered a lot right here and you might have to watch this section again,
but go ahead pause the video, create your logo, resize it to whatever size you want.
And I have some notes I’m gonna put in the video for the right sizes that you
need for the logo and the favicon . And then once you download everything, push
“Play” and we’re gonna go back to our WordPress dashboard and upload everything,
okay? So I’ll see you in just a little bit. Alright, so welcome back if
you paused the video to create your logo and if you have any questions, you can
leave a comment in the comment section and I’ll get back to you on how to make
your free logo for your ecommerce website. But right now, what I want to do
is just remind you how to upload the logo that you just created. So if you’re
on the WordPress dashboard, all you have to do is hover over “Shopkeeper” and then
click on “Customize.” And once you’re on the customize page to upload your logo,
just click on “Header” and then click on “Logo.” And then you can click on “Select
File” right here for both the logo and the alternative logo, and you can upload
them. And then you can see how it looks right here. And if you’re happy with it,
just click on the “Save” button up here. And then for the site icon or favicon,
you would come back to the main section over here and click on “Site Identity” and
then you can click to upload the favicon over here. And if you’re happy with how it looks, then
again just click on the “Save” button right here. And once everything is saved, just click on the “X”
right here and we can move on to the next step. Alright ,so welcome back if you paused this video to create your logo for your online store. And if you have any questions ,you can leave a comment in the
comment section and I’ll get back to you. Alright, so welcome back if you
paused the video to create your logo for your ecommerce website with WordPress.
And if you have any questions on how to do that, you can always leave a comment
in the comment section and I’ll get back to you. But really quickly, what I want to
do now is just remind you how you can upload your logo. So if you’re on the
WordPress dashboard like I am, what you want to do is just hover over “Shopkeeper”
and click on “Customize.” And once you’re on the Customize
page to upload your logo, just click on “Header” and then click on “Logo” and then click on
“Select File” for your logo and the alternative logo. And you can upload your
logos right here and then you can see what it looks like. And if you’re happy
with it, click on the Save button right here. And if you want to upload a favicon,
just click “Back” to go back to the main section and click on “Site Identity” and
you can upload your favicon over here, okay? So that’s all you have to do.
So go ahead and do that if you haven’t already. And make sure that you click on the
“Save” button once you upload everything. And once you do, we can click on the “X” right here.
And now we can move on to the next step. And now you should be back on the WordPress dashboard and now what we’re gonna do is learn how to customize the Home page for our ecommerce website. And this is the beautiful Home page that we’re gonna learn how to make. So what
we’re gonna do is go back to the Home page page that we created a little earlier. So
if you’re on the WordPress dashboard, come down to “Pages” on the left hand side
and hover over that and click on “All Pages.” And once you’re on the Pages page,
you should see a list of pages right here. And if you want to delete the
sample page which is created for you when you installed WordPress, just hover
over it and click on the “Trash” link right here. And I’ll delete this on my own
a little bit later just to save some time. And you want to keep the Wishlist page, and this was
created when we installed the Wishlist plugin, okay? So what we want to do now is just hover
over the home page right here and we want to edit this so that we can
customize it. So click on the “Edit” link. And once you’re on the Edit Homepage,
the first thing that I want to do is make sure that you uncheck this box next
to “Show Page Title.” So we don’t show the page title on the Homepage. And then down
here in the Page Attributes, I want to make sure that you select the “Full Width
Page” option over here. And there are a few different options but the one that
we want is the “Full Width Page” option and then come back up to the top. And we
want to turn on the page builder so that we can customize the layout for the
ecommerce home page. And there’s two options here: the Frontend Editor or the
Backend Editor. And I like to use the “Backend Editor” so let’s click on this.
And you should see the Page Builder show up right here. And what we’re gonna do is
add a bunch of different sections to this page and then insert our content to create
the Home page. So let me show you on the demo ecommerce website what
I’m talking about. So this is the slider. So this is going to be the first section on the
Home page. And then if we scroll down, this section is going to be another section
and then we’ll have another section down here and so forth. So what we’re gonna do on the Edit Home page right here is add a bunch of different rows in all of our content. So what
we’re gonna do first is add a row for our slider. So to do that, let’s click on the “+” button right here. And you should see a bunch of different elements and you can add whatever you want to any
of your different pages. And right now, what we want to do is add a new row. So
right at the top, click on “Row.” And you should see the row get inserted right
here, and you can change the number of columns for the row over here. And right now we just want,
one column. And then on the upper right, you have this pencil right here so that
you can edit the row settings. And you can also make a copy of this row
or you can delete it. So right now, what we want to do is go and edit the row settings.
So click on the “Pencil” right here. And once the row settings popup, just go into the “Row Stretch” and select “Stretch row and contents with no paddings.” And then down at the bottom, you should have the Row Type and it should be “Full Width.” And that’s all we have to do for
this section. So click on “Save Changes.” And now we want to add a slider element
so that we can add the images for our slider. So click on the “+” button in
the middle of this row and then go down to the bottom and find the “Slider”
element and click on that. And once you get this popup, all I want to do is
check this box to hide the navigation arrows. And I want to change the number
of seconds that I stay on each slider image to “8” seconds. And once you’re
ready, click “Save Changes.” And now what we can do is add the slider images
that we want for the Home page. So click on this big “+” button right here.
And once you get this popup, all you have to do is click on “Image Slide” and you should get
this popup right here. And just to save some time, I already filled everything
out. And you’ll see as we go through this video, I fill out a lot of stuff before
you see it just to save some time so that we don’t make this video super long,
but I will walk you through exactly what we did. So once you come to the Image Slide Settings, what I want you to do is click on “Advanced Settings” right here and you’ll pop up this section right here. And the first thing that you want to do with your first slider image is put in your
title right here. So you can see on the demo ecommerce website that this is the
title and then this is the description. And then we have a button right here
that’s gonna link to another page. So back over here, what you can do is just
type in your title and then put in the font size. I have 66px but you can put
in whatever size that you want and you can always go and check it out
to see if it’s too large or too small. And then what you’re gonna do is just
come down here and put in your description. And for the font size, I have 16px and then
the line height is 24px. And then down here, you can change the color for the font if you want
and then for the button text, it’s a “Shop Now.” And then I put in a URL for the shopping page on the
demo ecommerce website. And I actually have to change the URL right here. So let me just
change this to “shopkeepertheme.com/shop.” So if you want to link the button to your Shop page,
what you’re gonna do is just type in “http://yourwebaddress.com/shop” and
that’s gonna link to the Shopping page that we’re gonna make a little bit later.
And if you want to link the entire slider to that page, what you can do is
click “Yes” right here. But I just want to link the button and then if you want to
change the button background color or the text color, you can do that right
here. And the only thing that I do have to do is add a background image. And if
you don’t add a background image, what you’re gonna see is the background color
that you have right here. So we can just go in here and click on “Background Image”
and if you want to upload your own image, click on “Upload Files” and then click on
“Select Files” and find the slider image that you want to upload. If you
want to use the demo slider image, find this image right here that’s titled
“slider-image.jpeg.” And it might look a little different than this one because
this one is copy written, but I will add something very similar to this for you
to use. So once you click it, you should see this check mark right here. And all
we have to do is click “Set Image.” And now, you should see the background image
inserted right here and what you can also do is align the text that you have
for your title and your description and the button to whichever side that you
want. So we’re gonna leave it on the left side . And once you’re ready, all you have
to do is click “Save Changes.” And now we have just inserted our first slider
image and if you want to edit this, all you have to do is click on the “Pencil”
right here and then you can go back in here and change whatever you want. So if
you want to add additional images, what you’re gonna do is click on the small
“+” button right here. And then again, you’re gonna click on “Image Slide.” And
once you see this popup, again all you have to do is click “Yes” for Advanced
Options. And you’ll get this popup over here. And you can put in your title for
the second slider and this time around, I put in 68px for the font size just for
spacing issues. So I’ll show you how to preview your slider in just a little bit
so you can play around with the font sizes if you want. And then down here, you
want to type in your description. And if you want to use the same description
that I have on the demo ecommerce website, you can just come over here and
copy that. And then what I did was I put in font size 16 for the description and
then the line height is 24px. And then down here, you can change the color of
the text if you want, and if you don’t want a button to show up on your slider,
then you want to leave this blank right here. If you type something in, then a
button will show up and then you can type in a URL to whatever page that you
want to link the button to. And what we’re doing is linking the button to the
Shop page for both of these sliders. So if you want to do that, you can just type
in the URL, “http://www.yourwebsitename.com/shop.” And if you create any other pages, you can just copy and paste the URL in here a little bit later also. You can always update this and then down here,
you can change the button colors if you want. And the only thing that we have to
do is add a background image. So I’ll click on this. And once you come to the
Media Library, I’ll just select the second slider image right here and click
on “Set Image.” And you can align the text to whichever side that you want. And
again, you can always customize the colors for your text depending on what
type of images that you have over here, okay? So once you’re ready, go ahead and
click on “Save Changes.” And if I went a little too fast, you can always pause the video and
go through these sections and edit everything. And what I want to do is just show you how you can preview whatever you add it to your Home page. So all you have to do is click on this button right here that says, “Preview Changes” and that’s gonna open up a new tab. And if we go to it, and
you should see a preview of the section that you just added. So you should see
the slider images right here with our title descriptions and the buttons right
below. And what you can do is evaluate the font sizes and the font colors and
where everything is aligned. And if you want to make any adjustments, all you
have to do is go back to the Edit page and just hover over the element that you
want to edit and then click on the “Pencil.” And then you can go back in and change
whatever that you want to change, okay? So I’m gonna close out of the
previous screen but if you ever want to preview what your website looks like or
the web page that you’re working on, just click on the “Preview Changes” button
right here. So what I want to do before we add the next section on the Home page
is just save everything. So what you can do to save everything is just click on
this button right here that says, “Update.” And once the page is updated, if you want
to go and check it out you can click on “View Page” right here. But we’re not going
to do that so I’m just gonna close out of this. And what we’re gonna do is continue on
making the rest of the Home page. So we’re gonna make this next
section right here and then we’re just going to go down the Home page and make
all these other sections down here. So back on the Edit page, what we want to do
now that we have our slider is we want to create a new row for the new sections.
So click on this big “+” button right here and then find the row element and
click on that. And the row should get inserted right here. And this time around, we don’t need to make any changes to the Row Settings So we can just start adding
our elements to this row. So let’s click on on the “+” button in the middle. And the
first thing that I want to do is add an empty space element and that’s just
gonna give me some space between the slider and this section right here. So
find this element and click on that. And once you get the empty space settings,
want to change the height to 50px. And once you’re ready, click on “Save Changes.”
And now we can add the text for this row. So you can see on the demo ecommerce
website if I scroll back up, we’re gonna create this section right here where it
says, “Style is something we take seriously.” So let me just copy this and
then go back to the Edit page. And we want to click on this small “+” button right here to add an element right below the empty space. So find the “Text Block” element and click on that.
And you should see this popup right here. And there should be some dummy content. So we can delete this and just type in our title for this section. So I have “Style is something we take
seriously” and I can format this by highlighting it and then going in here
and changing it to “Heading 3” to make the font larger and then I can “Center” this
right here. So there are a bunch of different buttons here for you to style
your text. And if you want to see additional buttons, click on this button right here
and you’ll see a second row, okay? So all we have to do is just “Center”
this and change it to “Heading 3” and type in whatever you want. And if you want to
change the font color, you can highlight this also. And then go into this button
down here and change the text color. But we’re gonna leave that black. So once
you’re ready, click “Save Changes.” And now what we want to do is add a row
for the banners or the buttons. So let’s click on the “+” button right here and
click on the “Row” button. And once the row gets inserted, I want to go
to the row settings for this one. So click on the “Pencil.” And once you get the row settings popup, come down to the bottom to the Row Type and go in here and select the
box option and then click “Save.” And we want to have a row inside this row and
that just makes the spacing look really good for this section. So again click on
the “+” button inside here and then find the Row Element again. And you can
see that a row gets inserted inside this row. And now ,what we want to do is change
the number of columns here to 3 so that we can have 3 banners. So hover over this
button right here and then click on the one that says, “1/3 + 1/3 + 1/3” and you’ll see
that you get three different boxes here. And what we’re gonna do is add a
banner element into each one of these, and then link it to a different
page on our ecommerce website. So on the left hand side, let’s click on the “+”
button right here and the element that we want to find is the Banner element. So
that’s this one right here. So go ahead and click on that. And once the banner
settings popup, you can add a title and subtitle to this banner. So you can see
on the demo ecommerce website that this banner that we’re working on says,
“Accessories” and “SHOP NOW.” And we’re gonna add a background image also. And these other ones have different text. So you can add whatever you want for the title and subtitle.
And you can see I’ve already filled this out just to save some time. And I want to link this button to the Accessories Category page. So I’ll just paste in a URL right now and you can
always update your URLs for any links that we make on this ecommerce website a
little bit later since we haven’t made a bunch of pages right now. And I’ll also
show you how you can find all your different URLs. But if you want to have a category page labeled
“Accessories” and you want to link to that page, what you can do is just type in this URL “http://www.yourwebsitename.” So I have shopkeepertheme.com/product-category/accessories. And again, you can always update these a little bit later. So I’ll remind you
this at the end of this video, okay? So once you’re ready, let’s go down to the bottom
and what you can do for this banner is add a background color if you just want
to make it a solid background color. But if you want to add a background image,
click on the “+” button right here, and you’re going to be in the Media Library
with all of the demo content. But if you want to upload your own banner image,
click on “Upload Files” and then click on “Select Files” and find the image that you want
to upload. If you want to use the demo content, what I want you to do is
just find this image right here which is “button-image.jpeg.” And what’s really good
about the demo content is if you click on it, you can also see the recommended
size that I have over here. And that’s gonna be for all of these different
images. So if you don’t know what size to make your images, you can just look at
the demo content also, okay? So that’s just a pro tip for you. So once you find
the banner image right here, go ahead and click on that and then click on “Set
Image.” And you should see the image get inserted right here. And if you want to
change the separator line between the headline and the sub headline, you can do
that right here but we’re not gonna make any changes. So once you’re ready, go
ahead and click on “Save Changes.” And then what you can do is add your other two
banners right here. So you can click on the “+” button right here. And again, all
you want to do is find the “Banner” button and click on that. And once you get this popup,
again you’re gonna add a title and subtitle. And I already filled everything out
just to save some time. So for this banner, it says “MEET THE TEAM”
and the subtitle says, “ABOUT US.” I want to link this to the About page
that I’m gonna create a little bit later. So if you want to do that too, just type in the
URL “http://yourwebsitename.com/about.” And you can always update the URLs
a little bit later after we create all of our pages and posts and product category pages
and I’ll show you how to get those URLs. And you can always come back to any page or button and update your links whenever you want, okay? So if you need to, you can pause the video and fill out
this stuff. And then once you’re ready, push “Play” and come down to the bottom.
And you can add a solid background color for this banner or you can add a
background image. And if you want to add a background image, all you have to do is
click on the “+” button. And you want to find the demo image right here if you want to
use the demo content. And if you want to upload your own image, go to
“Upload Files” and click on “Select Files.” And then find your image and then just
click on “Set Image” after you select it. So I’ll close out of this since we already
have the background image over here. And that’s all we have to do. So if
you want to change the separator line color, you can do that for the subtitle
and title. But we’re not going to do that so I’ll just click “Save Change”s right here.
And to save some time, I already added the third banner right here
because these steps are exactly the same as the first two banners that I just
showed you how to make. So if you need to, you can pause the video, add your third
banner and customize it however you want and then push “Play” once you’re ready.
Otherwise, we’re just going to move on to continuing to make this Home page. So what
I want to do after I add the banners is I want to add a separator line. And you
can see on the demo ecommerce website, we have this little border line right here
and this is a separator line. So on the Home page that we’re making down here,
I’ll just click on the small “+” button and I want to find the separator element.
So it’s right at the top and you can just click on that. And once you get this
popup right here, this is where you can customize the separator lines. So if you
want to change the color or add a custom color code, you can do that right here
but we’ll leave this as gray. And I’m going to leave this stuff unchanged.
The only thing that I want to change is the border width to make it thicker.
So I want to change this to 4px. And then all I have to do is click
“Save Changes.” And now we are done creating the
Banner section for our Home page. And now what I want to do is add the Featured Product section. So the first thing that we’re gonna do is click on the “+”s button right here. And I just
want to add some empty space to separate the two sections that we have. So let’s
click on the empty space element right here. And once we get this popup, let’s just put in “20px”
for the empty space and then click “Save.” And now let’s add a row
for the Featured Product section. So click on the big “+” button right here
and then come up to the upper left and click on the “Row Element.” And once the
row gets inserted, let’s go to the “Row Settings.” So click on the “Pencil” and we
can leave the Row Stretch as the default, but I want you to come down to the
bottom to the “Row Type” and change it to the “Boxed” option and then click “Save
Changes.” And now we can add the headline and sub headline for this section. So
click on the “+”button right here and find the “Text Block” and click on that.
And once you get this popup, we can just delete the text in here and type in our
headline and sub-headline. So my headline says, “Shop These Looks” and
the sub headline says, “You probably don’t have anything to wear anyways.”
And I want to edit this text. So for the headline, I’m gonna highlight this and go
into this drop-down and select “Heading 1.” And then for the second line of text,
I’ll just highlight this and I want to change the color. So if you don’t see the
second row right here, what you want to do is click on this button that says,
“Toolbar Toggle.” And you’ll see the second row pop-up. And I’ll just go into the
text color drop-down and select this gray color right here. So you can see it
turns into a light gray and then I want to align all this to the center. So I’ll
highlight everything and click on the “Align Center” button right here and
that’s all I have to do. So once you’re ready, go ahead and click on “Save Changes.” And now what we can do is add our Featured Products element so that we can
show some products on our Home page. So click on the small “+” button right
here and what I want you to do is find this Featured Products element and click
on that. And once you get this popup for the Featured Product settings, what you
can do right here is type in the number of products that you want to show on the
Home page. So I want to type in “15.” And then I want five products
per row. So you can see on the demo ecommerce website that I have five
products per row. And since I have 15 products showing, I have three different
rows. And what we can do when we create our products is we can set these to the
featured products. So we can actually control what products show up in this
section, okay? So go ahead and type in whatever you want right here. And once
you’re ready, go ahead and click “Save.” And now what we’re going to do is add a
row for the Call to Action section. So again on the demo ecommerce website, now what
we’re gonna add is this section on our Home page. And then we are done creating
the Home page. So let’s go back to the Edit Home page right here and click on
the big “+” button and then find the “Row” element at the top and click on that.
And once you see the row get inserted, let’s go to the Row Settings. And once
you get this popup, we’re not gonna change anything for the row type or the
row stretch. But go to the Design Options tab and what I want to do is add a
background color for this call-to-action row. So right here where it says,
“Background,” I want to click on “Select Color.” And you can see that we get this
color pad right here and you can drag around this wheel to
select whatever color that you want for the background color of this row or you
can just click on one of these colors. So I’ll click on black right here because
that’s the color I want for this background color. And once you’re ready,
click on “Save Changes.” And now what we’re gonna do is add another row inside this. So click on the “+” button right here and then find the row element and click
on that. And once you get this pop up for the inner row settings, come down to the
bottom to the row type and let’s select “Boxed” for the inner row and then click
“Save Changes.” And now all we have to do is add the text for the call-to-action.
So you can see on the demo ecommerce website it’s gonna say, “Want to see more of
what we have?” And then we’ll have a link in your website colors that’s gonna link
to the Shopping page. So back on the ecommerce website that we’re making,
let’s click on the “+” button right in the middle right here and then find the
“Text Block” element and click on that. And once you get this pop-up, all we have to
do is delete this text and type in our call to action. So mine says, “Want to see
more of what we have? SHOP NOW!” and I want to link the “SHOP NOW!” text to my
Shopping page on the ecommerce website. So if you want to link any text to
another page, all you have to do is highlight the text and
then click on this button right here that says, “Insert Edit Link” and you’ll
get this little popup and you can type in the URL right here for the page that
you want to link to or you can click on this button that says, “Link Options” and
you’ll get this popup right here. And if you created a bunch of different pages
and posts already, you’ll see them in this list right here. And you can just
find the page that you want to link to and click on that. But since we haven’t
created the Shopping page yet, I want to type in the URL for that page that we’re
gonna make a little bit later. So if you want to link your text to the Shopping
page on your online store, just type in this URL right here: “http://www.your website name.”
So I’ll type in “shopkeepertheme.com/shop.” And again make sure that you put in
your own website name right here. And then if you want, you can
open up the link in a new tab when someone clicks on it but we’re
gonna leave this unchecked. So once you’re ready, go ahead and click on “Add
Link.” And now you should see the text link to the shopping page right here. And
now what I want to do is just highlight all of this text and I want to make the
font size larger. So I’ll go into this drop-down right here and change it to
“Heading 2.” And then for the first sentence right here, what I want to do is
change the font to white. So I’ll highlight the text and then go into this
drop-down where it says, “Text Color” and just select “White” right here. And now you
can’t see the text but it is white, okay? so that’s all I want to do for the call
to action. And oh actually, I want to center this. So let me do one more thing.
I’ll highlight everything and just click “Align Center.” And now I am done. So if
you’re ready, click on “Save Changes.” And now we have the call to action right
here and we’re actually done creating the Home page for our e-commerce website.
And now we can actually save everything. So let’s click on the “Update” button. Once
you’re ready and once the page is updated, let’s go and check it out. So
let’s click on “View Page.” And once your ecommerce website loads,
this is what you should see. So we should have the slider images at the top and if we wait
just a little bit, we should see the second slider image. And then below this,
we have our banner row with links to different parts of our ecommerce
website. And we can always go in here and update these URLs a little bit later. And
then we should have the Featured Product section. And it should be blank right now
because we don’t have any products. But once we create some products and set
them as featured products, this section is gonna get populated. And below that, we
have our call to action with a link to the Shopping page and then our custom
footer down here. So if this is what you see, then we are good to go. And now we
can move on to the next step. And now what we’re gonna do is learn how to
create the Shopping page for our ecommerce website. So first we’re gonna
create a new page and then go into our WooCommerce settings and set the
Shopping page for our WordPress website and then I’ll show you how to customize
the sidebar over here to have whatever widgets that you want. So if you want to
learn how to create the Shopping page for your online store, go back to your
WordPress website that you’re making and the first thing that we want to do is
create a new page. So hover over “New” and click on “Page.” And once you’re on the “Add
New Page” all you have to do is type in the page title right here. So I’ll just
type in “Shop.” And we’re not gonna change anything else for the Shop page. So just
click on the “Publish” button. Once you’re ready and once the page is published, now
what we want to do is set the Shopping page in our ecommerce website. So what I
want you to do is come down to the WooCommerce tab and hover over that and
click on the “Settings” link. And once you’re on the Settings page, we’re gonna
go through all of this stuff a little bit later for our WooCommerce settings
but right now, all I want you to do is go to the Products tab and once you’re on
the Products tab, come down to where it says, “Shop pages” and in this drop-down
right here, what you want to do is select the “Shop” page that you just made and
that’s gonna set the Shopping page on the ecommerce website. And then just
come down to the bottom and let’s click on “Save Changes.” And once the settings
are saved, we are good to go. And now what I want to do is show you how you can
customize the sidebar on your shopping page. So if you want to do that, let’s go
back to our ecommerce website and we want to hover over “Appearance” on the
left hand side and then click on “Widgets.” And once you’re on the Widgets page, what
you’re going to do is drag some of these widgets on the left hand side into the
Shop Sidebar. And that’s how you’re gonna customize
the sidebar for the Shopping page. And don’t worry about this one that’s called,
“Sidebar.” This is for the Blog Post pages. And we didn’t turn on the sidebar for
our Blog Posts in the theme settings. So unless you did that on your own, you
don’t need to customize this section but you can always do that if you want. So let’s focus
on the Shopping page sidebar right here. And let me show you what I
would add to my ecommerce website. The first widget that I would add is “Filter
Products by Price.” So I can click and drag this in over here. And if you modify
the title right here, then you want to make sure that you click on the “Save”
button right here. And if you want to delete this widget, just click on the
“Delete” link right here, okay? So I’m gonna close this and I want to add two more
widgets to my ecommerce website. I want to add the “Product Categories” widget so
I can click and drag this up there, or I can just click on the widget and I’ll
get this popup right here and then I can select where I want to add this
widget. So I want to click on “Shop Sidebar” and then I can click on “Add
Widget” and you can see that it gets added right here. And if you want to
customize this, you can. So I’ll check some of these boxes right here and just
make sure that you click “Save” if you do modify this at all. And I’ll just close
this and I want to add one more widget which is going to be the “Product Tag
Cloud.” So again, I’ll just click on this and make sure that the “Shop Sidebar” is
selected and then click on “Add Widget.” And you should see the widget get added
right here and I’m not gonna make any changes. So what you can do is take some
time and customize your sidebar to look however you want for the Shopping page.
And then once you’re ready, we can go and check out what the Shopping page looks
like right now. So if you want, I’m just gonna show you how to do that. So I’ll just hover over my website
name right here and then click on “Visit Store.” And once the shopping page loads
for the online store that you’re making, it should look just like this right now. So we have our
page title and we don’t have any products right now because we haven’t created them yet. And then our sidebar looks a little basic right now, but this is gonna get filled up after we
make our products. So if this is what you see right now, then we are good to go. And
now we can move on to the next step. And now what we’re gonna do is learn how to
create a simple product for your ecommerce website. So if you have any products that don’t have
different sizes or different variables, what you’re going to be making are simple products. And what we’re going to do is insert a few different images of your simple product and then we’ll put
in a title, a price, a small description and your visitors can buy as many of this
product as they want. And then down here, we’ll have a longer description and
will enable the reviews right here. And we’ll also have some related products
that show up over here as we create some additional products, okay? So now what I
want to do is go back to the ecommerce website that we’re making and I’m on the
dashboard right now. And what we’re going to do is go and create some simple
products. So what you want to do is come down on the left hand side to “Products,”
hover over that and click on “Add New.” And once you’re on the Add New Product page,
creating a simple product is really easy. So I’ll show you how to do this a few
times. And then you should be able to make a simple product for your e-commerce
website on your own. So the first thing that you’re gonna do is put in a product
name. So let me go to the demo ecommerce website and just take this product name
right here and copy that just to save some time. And I’ll paste it in right here. So it says,
“Maroon Red Dress” and down here, this is where you can type in your long description.
So on the Product page over here, you can see this is the short description and down at the bottom,
this is the long description. So what you can do is just type in whatever you want and I’m just going to copy this and paste that in right here. So type in your long
description and then come down to the Product data section and in this
drop-down, you can select the product type that you’re creating. So right now
we’re creating a simple product but if you wanted to, you can create a group
product and affiliate product or a variable product. And I’ll show you how
to create a variable product in the next step. But right now, make sure that you
select the “Simple product” and if you want to make this a virtual product, you
can check this box and you’ll notice that the “Shipping” tab disappears. And if
you want to make this a downloadable product, you would check this box and
then you get this section right here where you can upload the file that your
customers would download if they purchase your product. But since we’re
making a physical product, I will uncheck this and all you have to do is go to the
General tab and you want to type in the price right here.
So I’ll type in $199.95 and then if you wanted to, you can put in a sale price
right here and if you wanted to schedule the sale you can type in the price and
then click on the schedule right here. And then you can just put in the dates
that you want for the sale and your website will update automatically to
show the sale price. But we’re not going to do that so I’ll close out of that. And
don’t worry about the currency that you see right here. We’re gonna update the
currency in the WooCommerce settings a little bit later. So we’ll go through how
to change this and how to add a few other things for your ecommerce website.
But right now, what I’ll do is just go through these other tabs really quickly.
So if you click on the “Inventory” tab you can add an SKU number and you can manage
your inventory if you check this box right here. We’re not gonna do this so
we’ll leave this blank and then if you go to the Shipping tab, we’re gonna go
over the shipping classes a little bit later in the WooCommerce settings but
over here if you wanted to you can type in the weight or the dimensions of this
product. And we’re not going to go over the linked products or the attributes
for these simple products so we can skip these two. But I want to go to the
Advanced tab and if you want to enable reviews, you want to make sure that this
box is checked right here. And then what you can do is add your short description
right here. And my short description is the same as my long description, so I can
just paste in the same description that I have from the product website. So go
ahead and type in the short description and again, the short description shows up
at the top over here, okay? So once you’re ready, what we want to do is add a main
product image. So we can come over here and click on “Set Product Image” and
you’ll get this pop-up right here and if you want to upload your own images, just
make sure that you’re on the “Upload Files” tab and then click on “Select Files”
and find the product image that you want to upload. If you want to use the demo
content, go to the Media Library and you should see all the demo content here. And
we can just scroll down and find the image that we want. So I want this one
and then I can click on “Set Product Image.” And you should see the products
show up here and if you want, you can add some additional images. So you can see on
the demo ecommerce website that we have another image right here. So if I click
on this, it’s gonna change to this image right here. And you
can add a bunch of different images if you want. I just add two. So if I go back
to the Product page, what you can do to add some additional images is click on
this link right here that says, “Add product gallery images.” And again, I’m on
the Media Library tab. So all I’ll do is just come down and find the image that I
want. So I’ll select this one and then click “Add to gallery.” And now you should
see the image right here. So this is the alternative image for my product. And now
we can just come up here and if you want, you can type in a
product category name. So we can go over here and let’s type in “1. So let’s
click on “Add new category” and you should see this pop-up right here. And we can
just type in a category name. So I’ll type in “Womens” and push “Enter.” And if I
want to add something else like a subcategory name, I can type in “Dresses”
and then I would go into this drop-down right here and select”Womens” so that
dresses becomes a subcategory of womens. So I’ll click on “Add new category” and
what you’ll notice is that dresses falls underneath the womens category. So
that’s how you create a subcategory and we can come down here and create product
tags. And both the categories and the product tags help populate the related
products on your Product page. So we can just type some in right here and we can
add “Womens, dresses and tops” and push “Enter.” And you’ll see that the product
tags get added right here. And if you create some additional products with
similar tags and similar categories, again what you’re going to notice is on
your Product pages at the bottom, you’ll have related products that are very
similar to those categories or the product tag,s okay?
So once you’re ready, come up to the top and if you want to make this product
show up on the Home page in the Featured Product section, what you want to do is
come right here to where it says, “Catalog visibility” and click on the “Edit” link
right here. And you’ll see this little pop-up right here and what you want to
do is check this box right here that says, “This is a featured product” and once
you do that, that’s gonna make this product show up on the Home page in the
featured product section. So all you have to do is click “OK” right here and now you
should see it says, “Featured” right here. And you can
always edit this and remove that featured product option if you want.
So now we are done creating our first simple products. So all we have to do is
click on this “Publish” button right here once you’re ready. And once the Product
is published, let’s go and check it out. And once the Product page loads, this is
what you should see. So don’t worry about the currency because we can change this
in the WooCommerce settings when we go over that a little bit later. Everything
else should look exactly like this and at the bottom of the page, you should see
the long description and the related product section below this will start
showing up once you start creating more products. So what I want to do before I
show you how to create another simple product is I want to go to the website
really quickly and I have a tab open for it. And I just want to come down to the
Featured Product section. And what you’ll notice now is the product that we just
made shows up over here because we set this to be a featured product. So as you
create more products and you set them as a featured product, they’re gonna show up
on the Home page over here, okay? So I’m gonna close out of this. And what we want
to do is create one more simple product together. So if you’re on this page right
here, all you have to do is hover over “New” and click on “Product.” And once you’re
on the Add New Product page, the first thing that you’re gonna do is put in the
product name. So let me go to the demo ecommerce website and just copy this. And
I’ll paste it in just to save some time and then we can type in our long
description right here. So if you want, you can pause the video and type in
whatever you want. I’ll just come down here and copy this description over here
and then I’ll paste that in right here. And once you’re ready, let’s come down to
the Product data section. And since we’re making a simple product in this
drop-down, you just want to select the “Simple product” option and then you have
the virtual and downloadable options right here. We’ll leave those unchecked
and what I want to do is just put in a price right here. So I’ll type in $79.95
and I’ll put this one on sale for $39.95. And if you want to manage your inventory,
you can go to the Inventory tab and type in an SKU number and also you can manage
the stock by clicking on this button right here. We’ll leave this unchecked
and we can just come down to the shipping tab. And you can put in the
weight and dimensions if you want and this will show up as
additional information on the product page. We’re gonna leave those blank. And
right here where it says, “Shipping Class” we haven’t added any shipping classes
yet and we’re gonna do that in the WooCommerce settings. So there’s nothing
to select here but if you have different shipping classes or shipping rates for
different products, you can come in here after you set everything in the
WooCommerce settings and you can select what shipping class you have. So you can
always come back here and edit this later. So we’ll leave this as is for now
and we can just come down to the Advanced tab and I want to make sure
that this box is checked to enable reviews. And once you’re ready, we can
come down to the product short description and just type in our little
description. So again, I’ll just paste in some information and once you’re ready,
we can add our product image over here. So click on this link. And once you get
this pop-up, if you want to add your own images, just click on upload files and
click on select files and find the product image that you want to upload. If
you want to use the demo content, go to the Media Library
and just scroll down and find the image that you want. So I want this one so I’ll
just select this. And you can see that we have the check mark right here and then
I can click on “Set Product Image” and you should see the image get inserted right
here. And then we can add some additional images to the product gallery by
clicking on this link down here. And again, I’ll just stay on the Media
Library and I’ll scroll down and find the next image that I want to use. So I
want to select this one. So click on “Add to gallery.” And you can add as many
images as you want to the product gallery but I’m just gonna add one over
here. And once you’re ready, let’s come up to the Product Category section and I
want to select “Womens” for this product category. And then down here for Product
tags, I’ll just type in “Womens” also. And remember, the categories and the tags
that you use help for the related products that show up on the Product
page. So if you want this product to show up on some other pages for dresses or
anything like that, you want to have the same categories and product tags, okay?
And if you want, you can turn on the option to make this a featured product
by clicking on the “Edit” link right here and then just checking this box right
here and then click “OK.” And now, that’s gonna make this products show up on the
Home page in the Featured Product section. But you don’t have to do this
for every product, only the ones that you want to show up
on the Home page, okay? So now we are done creating this product and all we have to
do is click on the “Publish” button right here. And once the product is published,
what I want to do is go and check it out. So click on “View Page.” And once you’re on
the Product page, what you’ll notice is that this product is on sale because we
have a sale price over here. And if we scroll down, you should also see the
Related Products section now because we have more than one product and they’re
all in the same product category or have similar product tags. So if this is what
you see, then we are good to go. And before we move on to the next step, I
want you to give this video a thumbs up. So click that thumbs up button if you
just learned how to create a simple product. And if you only have simple
products on your e-commerce website, go ahead and pause the video and create
these simple products for your ecommerce website or you can do that
later and you can just watch the rest of this video tutorial and add the products
to your online store as you go. Otherwise, we’re just going to move on to the next
step which is going to be learning how to create variable products. So if you
want, you can pause the video and make some more simple products. Otherwise, keep
watching because we’re going to move on to the next step. And now what we’re
gonna do is learn how to create a variable product for our online store.
And a variable product is very similar to a simple product except a variable
product has different variables like different sizes or different colors and
you can also have a range of different prices based on your variables.
Everything else for a variable product is the same as a simple product. So if
you want to learn how to create a variable product, let’s go back to our
e-commerce website. And if you’re on this page right here, all you have to do is
hover over “New” and click on product. And once you’re on the Add New Product page,
just remember that you can always just hover over “Products” and click on “Add New”
and you’ll come to this page also. So what we’re gonna do is create two
variable products. The first is gonna have one variable and one price and then
we’re gonna create another variable product with more than one variable and
a different price range. So the first thing that we’re gonna do is add our
product name right here. So let me go to the demo website and just copy this, and
I’ll paste it in just to save some time. And then we can type in our long
description right here. So again, if you need to you can pause
the video and type in whatever you want. I’ll just copy this
and then paste that in right here. And then once you’re ready, let’s go down to
the Product Data section. And what you have to do for a variable product is you
have to go into this drop-down and select “Variable product” and you’ll see
that these tabs change. And we can go through these. So if you’re on the
Inventory tab and you want to add an SKU number, you can and if you want to manage
the inventory, you can do that right here. And then if you click on the “Shipping”
tab, you can type in a weight or the dimensions for this product. And this
again shows up in the Additional Information tab on the Product page and
if you have different shipping classes, you can go in here and select the
shipping class for this product. And we’re gonna go over this in the
WooCommerce settings. So if you want to have different shipping rates for your
products, you can come back here a little bit later and edit this section. And we
can go to the Linked Products tab and if you want to read up on this stuff, you can
hover over these question marks right here. We’re not gonna cover this section
in this video tutorial but I will have a video on how to use WooCommerce and
we’ll cover all of this stuff over there, okay? So what we want to do for a
variable product is we want to go to the Attributes tab and you should see this
section right here. And what we’re gonna do is type in the name of the variable
right here and then the values right here. So for this example, we’ll type in
size and the values will be small, medium, and large and you want to separate the
values with this line right here. So to get the line, you’re gonna hold down the
“Shift” button and then push the “/” button. So let me just show you. We’ll type in
“small” and then I’ll hold down the “Shift” button and push the”/” button and
I’ll get that separator line and then I’ll type in “medium” and again I’ll hold
down “Shift” and the separator line to get large. And that’s all we have to do
to create our variables. So now, we can just click on this box right here that
says, “Used for variations.” And once you’re ready, click on “Save attributes.” And once
that’s saved, now what you want to do is go to the Variations tab. And once you’re
on this tab, you can see in this drop-down there are a bunch of different
options but for this example, all we have to do is make sure that it says, “Add
variation” at the top and then click on the “Go” button right here. And now you
should see this section right here and in this drop-down over here, it has all
of your different variables and what you want to do is just click on
this “Arrow” to expand this section and then you can type in the details for
this variable product right here. So all we want to do is just type in a price
right here. So I’ll type in “$89.95. And don’t worry about the currency, again
we’re going to cover that a little bit later. So we have our price for our
variable right here and you can put in a sale price if you want also, but we’ll
just put that in right here. And now, all you have to do is click “Save Changes.” And
once everything is saved, now we have our variable and we also have the price
listed for this product. And you can go down to the Advanced tab here and just
make sure that the box is checked to enable your reviews and then you can
type in your short description right here. And then pretty much, everything
else is the same as creating a simple product. We’ll add a product image right
here. And once you get this pop-up, if you want you can upload a new product image
over here or use the demo content in the Media Library. So I’ll just select this
image right here and click “Set Product Image.” And once this image shows up right
here, I’ll add some images to the product gallery by clicking on this link right
here. And once I’m back in the Media Library, I’ll just select this image
right here and click “Add to gallery.” And once you see this image right here, we
can just come up and change the product categories or add a product category. So
we’ll go with Women’s and Dresses right here but if you want to add an
additional category, you can always just click on “Add New Category” and type that
in right here and just click on this button right here. And then for the
Product Tags, we’ll go with dresses. So I’ll just type that in and push “Enter”
and you should see it get added right here. And then if you want to make this a
featured product, again just go and click on the” Edit” link right here and then
check this box next to “This is a featured product” and then click “OK.” And
once you do that, we are done creating our variable product and we just have to
publish it. So click on the “Publish” button right here. And once the product
is published, we can go and check it out by clicking on “View Product.” And once the
product page loads, if we come down here we should see the variable and we have
our values in this drop down. So this is how you create a variable product with
one price. And now, what I want to do is show you how to create a variable
product with more than one variable and different prices based on the variables
that you select. So in here, I can select a size and then I can select the color.
And you can see that this is $109 and then if I select
another color, then the price change is $299. So this is good
for if you’re selling something that costs a different amount based on the
size or something like that. So let me show you how you can create variable
products with more than one variable and different prices. Let’s go back to the
ecommerce website that we’re making and let’s go and make a new product. Let’s
hover over “New” and click on “Product.” And once you’re on the “Add New” product page,
the first thing that you’re gonna do is put in the product name right here. So
I’ll just copy this and paste this in and then we’ll put in our long
description right here. So again, I’ll go to the demo ecommerce website and copy
this and then just paste that in right here. And once you’re ready, let’s come
down to the Product Data section and remember, we’re making a variable product.
So select “Variable Product” right here and if you want, you can go through these
other tabs so the Inventory tab, the Shipping tab and the Linked Products tab.
I just want to go to the attributes tab because this is where we can add the
variables. So right here where it says, “Custom product attribute,” we want to
click “Add” right here to put in our first variable. And once you get this section
right here, you can just type in the variable name. So we’ll type in “Size” and
the values, we’ll have our “Small/Medium/Large” And remember that you want
this separator line. So if you want that line, hit the “Shift” button and hold
it down with the “/” button. And once you put in the values, go ahead and check
this box next to “Used for variations.” And before we click the “Save” button, what I
want to do is add another variable. So up here where it says, “Custom product
attribute,” go ahead and click on the “Add button” again and that’s gonna add a
second variable option over here. So all we have to do is just type in the name.
So we’ll do color this time and I’ll add “Black” and “White” right here. And again, you
want to separate it with that line. And then check this box right here that says,
“Used for variations.” And if you wanted to add some more variables, you can.
Otherwise, let’s just click on “Save Attributes” right here. And once that’s
saved, let’s go to the Variations tab. And once you’re on this tab
you want to make sure that it says, “Add variation” and click on the “Go” button
and you’ll see your variables right here in this drop down. So you have
size and color. And we want to leave this as the default where it says, “Any size.”
But what I want to do is come into this tab and select the “Black” color. And what
we’re gonna do is expand this section and you can fill out whatever you want. And
when you fill out details here, it’s only gonna be for any size and the black
color. So what we want to do here is put in a specific price for when someone
selects the black color. So we’ll put in $99.95 right here and then we can just
collapse this if you don’t want to fill anything else out. And then what I want
to do is add another variation with any size and then the white color, so that
when someone selects the white color, they’re gonna get a different price. So
to do that, just come back up here to where it says, “Add variation” and click “Go”
again. And once you get this section right here, we’re gonna select the white
color and then we can go and edit the options or everything in here. So this
time around, instead of putting that same price for the black color, we’ll put in a
different price. So maybe, we’ll put $299.95 just for fun. And you can fill
out any of this other stuff if you want. Otherwise, you can collapse this and then
we can just click “Save Changes.” And once that’s saved, now we have two
different prices based on our different colors. And you can do this with just one
variable with a bunch of different values. So if you had sizem and you had
small medium and large, if you wanted a different price for each of those values
you would just create three different variations and then expand each of these
sections, and then add different prices for each of them, okay? So that’s how you
add different prices for your different variables and if you have any questions,
leave a comment and I’ll try to explain it in better detail, all right. So let’s
round out this Product page with a short description and then let’s just add our
images right here. And you’ll come to the Media Library and we can just select
this image right here and then click on “Set Product Image” and
the image should show up right here. And then we can add another image to our Image
Gallery. So click on “Add product gallery images.” And once you see the
Media Library, I’ll just select this demo image right here
and click “Add to gallery” and you should see the image right here. And then we can
come up to the Product categories and I’ll just check “Womens” right here and
I’ll also add a new category called, “Tops” and push “Enter.” And then I’ll add some
product tags right here. So we’ll do “Tops, Dresses and Womens.” And again, the
product tags and the product categories help with the related products. And if
you want, you can make this a featured product by clicking on the “Edit” link
right here and then checking this box. But remember when you do this, you’re
gonna make this product show up on the Home page. So only make the products that
you want to show up on the Home page the Featured Products. And so once you’re
ready, click “OK” and then all you have to do is click on the “Publish” button. And
once the page is published, let’s go and check it out by clicking on “View Product.”
And once the Product page loads, you can see that we have a price range right
here and then down here, we have our variables. And if we just select these
variables, you can see that we have one price and then if we change the color to
the other color, we have another price. So this is how you create a variable
product with more than one variable and how you can add different prices for
your different values for your variable. So what I want to do now is show you how
you can save the different values for your variables so you don’t have to type
these in each time you make a variable product. And that just saves a little
time. And then what you can do is pause the video and create all the different types
of products that you want for your online store. So if you want to learn how
to save your variables and the values so you don’t have to type it in each time
for your variable products, what I want you to do is go back to your WordPress
dashboard. So hover over your website name and click on “Dashboard.” And once
you’re back on the WordPress website, if you want to learn how to save variables
on your ecommerce website so you don’t have to type in all that information
each time that you create a variable product, what I want you to do is come
down to “Products” and hover over that and click on “Attributes.” And once you come to
this page, this is where you can add the values for your variable. So for the
size variable, we would add “Small, Medium and Large.” So I’ll type in “Small” right
here and I’ll type in “Small” for the Slug too and just click “Add new size.” And you
should see the value get added right here. And then we can type in
our second one. So we’ll type in “Medium” and then we’ll click on
the button one more time. And now what we want to do is add one more value. So
we’ll type in “Large” right here and just click the button one more time. And you
should see all the values right here. And if you want to rearrange the order what
you want to do is come back to the Attributes page. And once you’re on the
Attributes page, just click back on the variable. And once you come back to this
page, now you should see these bars over here and what you can do is just drag
these variables into the right order. So the top one is gonna show up on the left
hand side and then the last one is gonna show up on the right hand side. So for
your drop down, this is the order that you want for the sizes. You want small
at the top and large at the bottom. And you don’t have to do this for all of
them. So like if you have colors or anything, you can just add them but for
something where order matters, you want to come back in here and drag these to
the right order, okay? So now what I want to do is just quickly show you how you
can access this variable when you create a variable product. So what I’ll do is go
to the Add New Product page by clicking on this link right here. And once you’re
back on the Add New Product page, I’m gonna skip this section and just come
down to the Product Data section so that I can show you how you can access the
variable that you just saved. So I’ll go in here and select “Variable Product.” And
to add a variable, remember we have to go to the Attributes tab so click on that.
And before, what we did was we selected Custom Product Attribute in this
drop-down. But now that you saved the variable on your ecommerce website, if
you go in here you should see the name of the variable right here. So we can
select that and then just click on the “Add” button right here. And you’ll see
that the variable gets added right here and what you can do is click on this box
and select the values that you want to add to this variable or what you can do
to save a lot of time is just click on this button right here that says, “Select
all” and that’s going to populate all the values right here. and then all you have
to do is check this box next to “Used for variations” and click the “Save attributes”
button and then go into the Variations tab and just add your prices and all
that stuff. So this is just a quick way to save a lot of time if you create a
bunch of variable products. So if you do, what you want to probably do is add the
variables into your ecommerce website so you can access them
very quickly just like this, okay? So before I let you go and pause the video
to create a bunch of different variable and simple products, what I want to do is
just go through the WooCommerce settings and set everything up so that you have
your shipping and your taxes and all that stuff set up. So what we’re gonna do
is go back to the Product page. So at the top over here, let’s click on “Products” on
the left hand side. And now what we’re gonna do is go and set up our
WooCommerce settings. So if you’re on the Product page right here, what I want you
to do is go to the upper right and you should see this Help button right here.
Click and expand that and then come to the left hand side over here and then
click on the link that says, “Setup wizard” and then click on this button that says,
“Setup wizard.” And now you should be on the WooCommerce Settings page and we’re
going to go through these settings together to setup our ecommerce website.
So on the store setup, what you want to do is come into this drop-down and
select where your store is based and then you can type in your address right
here. And then down below that, this is where you can select the currency that
you want for your ecommerce website. And I selected the US dollar and then down
here is where you can select the type of products that you want to sell. So I just
selected that I’m gonna “sell both physical and digital products.” And once
you’re ready, let’s click on the button right here that says, “Let’s go.” And now
you should be on the Payments tab. And what you can do is turn on or off these
two options right here for your ecommerce website. So I’ll turn off
“strip”e for this demo website but if you want some additional payment options,
what you can do is click on this link right here. And it’ll bring you to the
WooCommerce website and you should be able to download some additional plugins
for different payment options. So what I want to do for this demo ecommerce
website is I want to leave the PayPal option on and I want to show you how to
link your PayPal account to your ecommerce website. But if you want to
have PayPal and you don’t want to link to a PayPal account, then you want to
check this box right here. And also you can have offline payments if you open up
this box and you’ll expand this section right here. And you can check any of
these options to turn them on also, okay? So once you’re ready, go ahead and click
on the “Continue” button right here. And once you’re on the Shippings tab, you
have a few options in here: Live Rates, Flat Rate and Free Shipping. And Live
Rates is a WooCommerce plug-in that gets you
updated pricing from US postal to ship to wherever you need to. So that’s the
one that I recommend but if you want to charge a flat rate, you can go in here
and select “Flat Rate” and then put in the price right here. And you also have the
“Free Shipping” option. So I’ll use live rates and I want to ship to everywhere
in the United States, and I want to use live rates for locations not in the
United States also. And if you want to turn any of these shipping zones off, you
can just click on these buttons right here to do that. So I’ll show you how to
update the shipping method also in your WooCommerce settings if you’re not too
sure about what to use here, but right now go ahead and select whatever you
want and we can always update this later. And then down at the bottom, you can
change the weight unit or the dimension unit to whatever you use in your own
country. And then once you’re ready, click on the “Continue” button. And now you
should be on the Extras tab and what you can do here is turn on the automated
taxes. So if you turn this on, then WooCommerce will calculate your
taxes for your customers when they go to checkout. So this makes your life a lot
easier if you turn this on, but you can always go into the WooCommerce settings
and set the tax rates for different states or different regions on your own.
So I’ll show you how to do that also, but what I’m gonna do to make my life easier
is turn this on. So I’ll turn this on and again, I’ll show you how to add your own
tax rates in the WooCommerce settings after we go through these other tabs. So
once you’re ready, go ahead and click on the “Continue” button. And now you should
be on this Activate tab. And what you want to do is connect your store to a
plug-in called “Jetpack” so you can get services like the automated taxes and
the live rates and everything like that. So I recommend that you do this and if
you want to, all you have to do is click on this button right here that says,
“Continue with Jetpack.” And once you come to this page, what you want to do is log
into your wordpress.com account. And if you don’t have one, go ahead and click on
“Sign up now” and create a username and password. And then you can log in and
connect your ecommerce website with the jetpack plugin. So I already have a
wordpress.com account so I’ll just type in my username right here and then click
the continue button right here and type in my password. And once you’re ready, go
ahead and click on the “Log in” button. And you should see this pop-up right here. So
we’re just going to wait for Jetpack to connect to our ecommerce
website. And once you see this notification, that means that your
ecommerce website is set up with the Jetpack plugin. And now you have access
to the live rates for shipping and the automated taxes. And pretty much, our
WooCommerce settings are set up and all we have to do is connect our payment
options to our e-commerce website. And I also want to show you how you can update
your WooCommerce settings on your own through the dashboard. So if you wanted
to change the shipping or the tax rates, I’ll show you how to do that. So what I
want you to do is come down to the bottom and all we have to do is click on
this link to bring us back to the dashboard. And once you’re back on the
WordPress dashboard, what I want you to do is come down to the WooCommerce tab
and hover over that and click on the settings link. And once you’re on the
settings page, this is where you can go to update your WooCommerce settings and
also where we have to go to connect our payment option to our ecommerce website.
So for this video tutorial, I’m gonna show you how to connect PayPal
to your e-commerce website, but if you want to use any other payment options, I
can show you how you can connect those also. So let’s just go through these tabs
together even though we shouldn’t have to change anything because we should
have already set everything up. But just in case, let’s go to the general tab. And
on this tab, this is where you can update your address right here and then you can
update the selling location or shipping locations if you want over here. And then
down at the bottom, this is where you can select the currency that you want for
your ecommerce website. And if you do make any changes, make sure that you
click on the “Save Changes” button down here. Otherwise, come back up to the top
and let’s click on the Products tab. And once you’re on this tab, there’s really
not much that we have to do but if you want to change the weight or dimension
units, you can do that in this drop down right here. All I really want
to do on this tab is come down to where it says, “Reviews.” And
over here, I want to check this box that says, r”Reviews can only be left by
verified owners.” And what that’s going to do is only allow reviews from people
that have purchased your product. So if you do check this box, what I want you to
do is click on the “Save Changes” button right here. And once the settings are
saved, you can see right at the top there are some additional links right here and
you can click on these and play around with them on your own. We don’t go into
either one of these but in my video tutorial on “How to Use WooCommerce”
we do cover the inventory and downloadable products link. So you can
check out that video and I’ll have a link to it in the video description, okay?
So once you’re ready, let’s click on the “Tax” tab. And once you’re on the Tax tab,
you should have already enabled the automated taxes and this lets
WooCommerce calculate the taxes for you when your customers checkout. And it
saves you a lot of time but if you want to disable this, you can click “Disable”
right here and then you can input all the different tax rates on your own
using the standard rates link right here. And I’ll show you how to do that in just
a little bit but first what I want to do is go through these other links or these
other options with you. So right here, where it says, Prices entered with tax,” if
you want to show the product price with the tax included, you want to select “Yes”
right here. I like to select “No” because I like to show the prices without the tax
but again this is personal preference. And then come down to where it says,
‘Calculate tax based o”n and what you can do is go in here and select how you want
the taxes to be calculated. So is it going to be by the customer shipping
address or their billing address or by your own business address. And you need
to select the one that you need for wherever your business is located. So
I’ll let you look into this on your own and down here in the “Shipping tax class”
what you want to do is probably leave this as standard if you’re not gonna
change the tax class in the product section when you create products but if
you do have some additional tax classes like a reduced rate or a zero rate, then
what you can do is go into this drop-down and select “Shipping tax class
based on cart items.” And what that’s going to do is calculate your taxes
based on the different products and the different tax classes that they’re
assigned to, okay? So it doesn’t really matter if you’re not changing the tax
class and you’re leaving it as standard. You can just use this but if you want to
be safe, then you can just select this one right here. And then we can just come
down to the bottom and I don’t change anything down here, but if you want to go
ahead and do that.aAd then once you’re ready, let’s click on “Save Changes” really
quickly. And once the tax settings are saved, let me show you a website that I
have a link to in the video description and this is the WooCommerce
documentation website. And this is a page on setting up taxes
in WooCommerce and if you scroll down, there’s an entire tutorial on how to set
up your taxes in WooCommerce and there’s also this video right here that’s about
three minutes long that walks you through how to set up your taxes a lot
better than what I just did in my two minutes or so going through that tab. So
what you should do is click on that link in the video description and come to
this page and just spend three minutes watching this video and you’ll get a
better understanding of how to set up taxes and WooCommerce, okay? So this is
just a helpful hint for you. And what I want to do now is go back to the
e-commerce website right here, and I want to show you how you can input your own
tax rates if you select the “Disable automated taxes” right here. So assume
that you select the “Disable automated taxes” and you clicked “Save” and you wanted
to input your own tax rates for all the different states that you’re selling
from or different countries. What you would do is go to this link right here
called “Standard rates.” So let’s click on this. And once you’re on the standard
rates page, what you want to do if you want to insert the tax rates on your own
is you want to create rows for every country or state that you want to create
a tax rate for. So just really quickly, I’ll show you how to add the tax rate
for the entire state of New York. So what you want to do is click on “Insert Row.”
And right here where it says country code, we can type in “US” and select United
States, and then put in the state code right here: “NY” for New York and I
can leave the zip code and the city blank. And so what that’s gonna do is
when a customer puts in their shipping address and they have the state code “NY”
for New York, they’re gonna get this tax rate right here. So I’ll type in 8.5%
and I’m not sure if that’s right or not but you can always go to Google and find
the tax rates for all the countries and states that you’re creating tax rates
for. And if you want to name this tax, you can. I can also leave this blank and you
can check these boxes if you want. You can hover over these question marks to
read what you’re checking the box for. And then what you have to do after you
insert all the rows for your different states or countries and their tax rates
is just click on the “Save Changes” button right here. And if you ever want to
remove one of these tax rates, just double click on it so that it’s yellow
and then click on the “Remove” button right here, okay?
So that’s all you have to do to add your own tax rates on your own but again,
we’re using the automated taxes in the WooCommerce settings. So unless you
disable that, you really don’t need to do anything here, alright? So if you want, you
can pause the video and insert all the tax rates that you want. If you enabled
the automated taxes, then don’t worry about this section whatsoever. And let’s
just move on to the next tab called “Shipping.” And once you’re on the shipping
tab, you’ll notice that you have some zones right here. So I think this depends
on where you’re located. So I’m in New York. So the first shipping zone that I
have right here is for the United States and then I have another one down here
for locations not covered by the other zones listed. So this one is going to
cover the rest of the world and this one covers the United States. So I have
shipping methods for both of these and they’re both using the live rates right
now. And I just found out and I think this is true that the live rates is only
available for people in Canada and the U.S. So if you’re not based in the U.S. or
Canada, then you might have to use a flat rate in order to charge shipping to your
customers or you can offer free shipping. So you can try it out and I’ll show you
how to set up the live rates and everything like that but just make sure
that you can use it wherever you’re located, okay? So what we want to do is edit
these zones. So if you wanted to add some additional zones with different shipping
methods or different shipping rates, what you can do is click on this button right
here and then you can add some zones and some regions and then the shipping
methods. So let me show you how to do that by editing the shipping method in
this first zone right here for the United States. So what I’m gonna do is
just click on the Edit link right here. And once you’re on the Edit zone page, if
you want to change the name of the zone you can do that right here and if you
want to add some additional regions, you can do that right here also. And you
might want to do this if they’re using the same shipping method or price that
you’re charging some customers in this zone. So just as an example, I can put in
“Europe” right here and what that’s going to do is if I send a package to anyone
in the US or Europe, they’re gonna be charged using
the live rates method that I have selected right here, okay? And you can
always just create some additional shipping zones on the Shipping Zones page
so I’ll show you how to do that in just a little bit. So what I want to do on
this page is just show you how you can add a different shipping method if you
don’t want to use the live rates. And I don’t really recommend the live rates
anymore now that I know that it’s only available in the U.S. or Canada. If you are
based in the US or Canada, then it’s great. You should use it because it’s
really awesome and it’s really easy to use, but if your base somewhere else and
you can’t use the live rates option, then probably what you want to do is disable
this and then click on the “Add shipping method” button right here and you’re
gonna get this pop up. And if you go into this drop-down, you can select the
shipping method that you want to use for this zone. So you probably want to charge
a flat rate unless you want to be really nice and charge free shipping. So let’s
select “Flat rate” right here and click on the “Add shipping method” button. And now
you should have the flat rate all saved and ready to go right here. So if you
want to use that then that’s awesome and you can just go back to the shipping
zones and change the shipping method for the other zone which is gonna be for the
rest of the world. And we’ll go back to that page in a little bit and I’ll
remind you, but I want to cover the live rates option for everyone in the U.S. and
Canada. So if I turn this one off and turn the live rates one back on, this is
really for only the people that can use the live rates option. What you want to
do first after you turn this back on is click on the “Save” button right here and
that’s just gonna save your settings so that this is enabled. And then what you
have to do is click on this edit link right here to set up the live rates. So
click on this. And again you only need to set this up if you can use the live
rates. And I’m gonna say this one more time. I think this is only for the U.S. and
Canada. So if you’re based anywhere else, you probably want to use a flat rate
shipping amount, okay? So if you do come here and you want to set up the live
rates, what you want to do is just put in the Origin Zip Code of where you’re
shipping your package from right here. And then come down to the Rates section
and you want to select the shipping method so you can get the right rates to
charge your customers. So I selected “Priority Mail” for domestic and “Priority
International” for international shipping. And then
there is something called a fallback rate which is a flat rate that you can
charge if the live rates don’t work or don’t update. So I just put in $20 here
so that’s how much I would charge my customers if I can’t pull the live rates
to charge them, okay? And then down here if you want to select the packaging
method you can. Otherwise, all you have to do to turn on the live rates to work on
the checkout page is click on the “Save Changes” button right here. And once
everything is saved, you should see this notification right here and we can just
come back up to the top. And now you have just set up the live rates option for
this zone right here. And again, this only works for the U.S. and Canada I believe
but if you are using the live rates option, that means that the post office
needs to calculate your shipping rates for your customers. So they need to know
the products weight and dimensions. So if you’re using the live rates option, that
means that you have to go to your Products pages. And if you created any
products already, what you have to do is come down to the product data section
and go to the shipping tab and you need to put in a weight and the dimension so
that the live rates can actually calculate the shipping cost. So if you
created some old products, what you want to do is go back to the All Products
page and go to the “Edit Page” for all of your products and then go to the
Shipping tab and put in the weight and dimensions. And if you’re creating new
products and you’re using the live rates option, you want to make sure that you
fill out this section also, okay? So there is a few additional steps if you’re
using the live rates option but once you set up all your products, then you’re
good to go so again this only works in the U.S. and Canada and I said that more
than enough times. So we’re gonna go back to the United States zone and I’m just
gonna select the “Flat rate” just to make things a little easier for everyone. And
once you’re back on the Zone page. If you want to change the shipping method,then
just disable this and enable the flat rate. So I’m just gonna charge $20 to
everyone that I have to ship something to no matter where in the world they are.
And it’s really up to you what you want to use but once you’re ready, go ahead
and click on “Save Changes” if you do make any changes. And once that’s saved, let’s
go back to the main shipping Zones page. So click on this. And once you’re
back on the Shipping zones page, if you want to add some additional zones then
you can just click on this button right here and you can add the name, the region
and the shipping method. So we’re not going to do that because we have the
United States and then we have the rest of the world right here. And right now,
this one has the live rates option selected. So if you want to activate that,
what you want to do is come down to “Manage Shipping Methods” and click on
this. And once you come to this page, if you want to set up the live rates for
the rest of the world, you can just hover over this and click on the “Edit” link and
you’ll go back to that setup page and select the shipping methods that you
want to use. But if you want to select a different shipping method, what you want
to do is disable this and then click on “Add shipping method” and select the
shipping method that you want to choose. So we’ll go with the “Flat rate” option
and I’ll click “Add shipping method.” And once it gets added right here, I can just
hover over it and click on the “Edit” link and we’ll get this pop-up and I’ll just
put in the amount that I want to charge for shipping right here and then click
“Save Changes.” And now everything is saved and now I have the flat rate chosen for
everyone in the U.S. and abroad. So back on the shipping page right here, you can see
that the shipping method that I selected is the flat rate option. And again, you
can choose whatever you want but if you are using the live rates option, just
remember that it’s not going to calculate the live rates unless you have
the weight and the dimensions and put it into the products that someone’s buying.
So you have to make sure that you put in all of these weights and dimensions for
each of your products if you’re using the live rates method, okay? So now we are
done with the Shipping tab and we don’t have to go through these other links. I
do cover them in my tutorial on “How to Use WooCommerce” but for this ecommerce
tutorial, we don’t actually need to go through these. So once you’re ready, let’s
just move on to the next tab so let’s go to the Checkout tab. And once you’re on
the checkout page, this is where you can go to set up these settings for the
checkout process. So if you want to allow coupons on your ecommerce website, make
sure that you check this box right here. And if you want to create some coupon
codes underneath the WooCommerce tab, you can just click on coupons and that’s
where you would go to create your coupon codes. And then down here for the
checkout process, if you want to let visitors check out
without creating an account, you want to make sure that this box is
selected right here to “Enable guest checkout.” And then down here for the
checkout pages by default, you should have a Cart page and Checkout page
already created and they should already be set right here. But as we go through
this video tutorial, we will make sure that we have these pages created and
we’ll come back here and select these pages a little bit later. And same with
the Terms and Conditions page. We’re going to create this page a little bit
later. So we’ll come in here and select that page that we create so that we have
these pages selected in these settings. And once you’re ready, we can just come
down to the bottom to the “Gateway display order” or the “Payment gateway” and
you can see that we have a few different payment options here. And what you want
to do with your payment options is you want to go into each of them and you
want to enable the ones that you want to use. And if you want to add some
additional payment options, what you can do is click on the “Extensions” button
right here and you’ll go to this page. And this is an extensions page with a
bunch of different plugins from WooCommerce. And right now, I’m on the
Payments tab right here and you can see there’s a bunch of different payment
options here. And what you can do is select the payment option that you want
to have on your ecommerce website and then you would just click on that option
and download the plug-in that you need and then you can go back to the Settings
page over here. And then you’ll see them in the list and then you can click on
each one and enable them and then activate them so they’re connected to
your ecommerce website. So I’m gonna do that with you for the PayPal options, but
first what I want to do is click on the “Save Changes” button in case you made any
changes to the Checkout tab. So let’s click on this really quickly. And once
the settings are saved, you should be brought back to the top of the checkout
page and up here you can see all the different payment options that we have
available to us right now. And what we’re gonna do is enable the PayPal and PayPal
Express option. But again if you do want to add some additional payment options,
all you have to do is come underneath WooCommerce and click on the “Extensions”
link and it’ll bring you to this page right here
and then just click on the “Payments” tab and you’ll come over here and you’ll see
a bunch of different payment options that you can select from.
And just click on them and add them to your ecommerce website. And once you
come back to the Checkout page, you should see them up here and you can just
enable them to use on your ecommerce website, okay? So what we’re going to do
right now is just enable PayPal and PayPal Express. So you should see these
two at the top and what we can do is just click on “PayPal.” And once you’re on
the PayPal page, all you have to do to enable PayPal is check this box right
here next to “Enable PayPal” and then put in your paypal email right here. So
whatever email address is associated with your PayPal account, type that in
right here and then down here in receiver email, you can type in the same
address. And then at the bottom over here, if you want to be able to issue refunds
via PayPal, then what you want to do is go to PayPal and get some API
information that you can paste in right here. And I do have a link in the video
description to this WooCommerce page on how to set up PayPal and it walks you
through everything but I’ll also show you how to do it right now.
So back on the ecommerce website, what we want to do is get this API
information. So open up a new tab and go to your PayPal account and login. And
once you’re logged in, you should be on the Summary page just like this. So what
you’re going to do is hover over your “Profile” up here and then you’re gonna
click on it and then go to “Profile and Settings.” And once you’re on the Settings
page, what I want you to do is come down here and click on this link that says, “My
selling tools” and you’ll see this section right here. And you’re gonna go
to this one where it says, “API access” and then click “Update” right here. And once
you’re on the API credentials page, come down to the bottom to this section right
here where it says “NVP/SOAP API integratio”n and then click on this link
right here that says, “Manage API credentials.” And you should come to this
page right here for a security check. So if you want you can have PayPal just
text you a code so that’s what I’ll do. So I’ll just click “Next” right here. And
once you get your code, go ahead and type it in and click “Next” right here. And once
you come to this page, all you have to do is click on these links right here to
show your API username, password and signature. And what I want you to do is
copy and paste those into these sections right here. And then you’re all set up
with the API credentials. So go ahead and do that on your own. I’m not gonna show
you my API username, password and signature because
we all have unique ones. But once you’re ready, go ahead and click on “Save Changes”
right here and then we’ll move on to the next tab. And once your settings are
saved, we have just enabled PayPal on our ecommerce website. And now what we can
do is set up PayPal Express Checkout. And this is just a one-click checkout. So I
do recommend it just to make it easier for your visitors to buy stuff. So let’s
click on this link right here. And once you come to the PayPal Express checkout
page, all we have to do is link our PayPal account.
It should already be enabled but if it’s not, go ahead and check this box right
here and all you’re gonna do is come down to API Credentials and click on
this button right here that says, “Setup or link an existing PayPal account.” And
once you’re brought to this page, go ahead and log in. And once you come to
this page right here, go ahead and click on the button right at the bottom. And
once you get this notification, then our ecommerce website is linked up with
PayPal Express and we are good to go. So now we can click on this link right here
to go back to our WooCommerce website. And there’s one more link to click on so
just come to this pink button right here and click “REDIRECT ME.” And now you should be redirected to the ecommerce website and we have just set up our PayPal
accounts. And if you want to add some additional payment options, just remember
that you can come down to the WooCommerce tab and click on “Extensions”
and then add whatever plugins that you need for the other payment options. So
you can do that on your own and we’re actually done with the checkout page now.
So what I want you to do is go to the Accounts tab. And once you’re on the
Accounts page, all we have to do is come down to where it says, “Customer
registration” and we want to check these two boxes right here so that a customer
can register an account on the Checkout page and the My Account page. And once
you’re ready, come down to the bottom and click “Save Changes.” And once your
settings are saved, let’s go to the Emails tab. And once you’re on the Email
page, all I want you to do is check to make sure that these email addresses are
correct so that you can get notifications whenever you get a new
order, a cancel order or a failed order. And if you need to change the email
addresses right here, just click on these buttons right here and then you can
update the email address. And then if you scroll down a little bit, what you can do
over here is change the name of your website and the email address that you
want to send emails to your customers from if you want. I’ll
just leave this as is. So if you do make any changes, make sure that you click on
the “Save Changes” button. And once your settings are saved, we are done going
through the WooCommerce settings and before I let you go pause the video and
create all of your products for your ecommerce website, what I want to do is
go through a transaction with you just to show you that your ecommerce website
does work. So what I’m gonna do is go to My Shop page. So I’ll hover over my
website name and click on “Visit Store.” And once you’re on the Shop page, even
though we’re not done with our ecommerce website yet, we can still
create a transaction because we’re logged in to our WordPress website. So if
this is the first time that you’re looking at the Shop page, then on the
left hand side you should see the custom sidebar that you created. And right now,
we have four different products on our ecommerce website. And after this
section, I’ll have you pause the video and create whatever type of products
that you want for your online store. So right now, we’re just going to do a quick
transaction. So I’ll just hover over this product right here and I’ll click “Add to
Cart” to add this item to my Shopping cart. And you should see this pop up
right here that says, “This product has been added to your cart.” And right up
here, you can see that I have the shopping cart and it has a 1 next to it.
so if I click on this, you can see that we have this popup right here and we
can just click on “Checkout.” And once you’re on the Checkout page, I already
filled out the billing information right here. So you can see I have my product
price and the shipping rate is the flat rate option and I have my text right
here. So we have our total and all we have to do to pay for this product is
click on this button right here that says, “Proceed to PayPal.” And once you come
to the PayPal page, all you have to do is just log into your PayPal account. And
once I come to this page right here, I can just select whatever type of payment
option that I want to use and then click “Pay Now.” And then you’ll get this
notification right here that says, “The payment is processed” and I can click on
this button down here to return to the website. And you should be redirected to
this page right here and it should say that “Your order has been received.” So as
a buyer, you are good to go and you can just wait for your product to come in
the mail. And if you’re the seller or the owner of the ecommerce
website on your dashboard over here, when you get a new order it should show up in
the WooCommerce section. So if I hover over WooCommerce, you can see that I have
a “1” next to the orders and if I click on this, and I’ll come to the Orders page
right here. And I can see all of my orders and you can see that we have this
order right here so we can click on this. And you should come to this Order page
right here. And there’s a bunch of details, so you have the billing
information, the shipping address and the item that was purchased down here. And
you also have a status update right here. So if you want to go in here and change
it to “Completed,” you can and then you can add some order notes down here and just
click on the “Update” button if you want to save your changes. And you can always
reference this order and any other orders if you click on the Orders page
right over here, okay? So let me show you the email that your customer gets once
they place an order. So once your customer places an order, they’ll get
this email from PayPal that says, “A payment was sent.” And if you go to your
PayPal now, you will see a payment from your customer over here. And this is the
email that you would get as an ecommerce owner. You would get an email
from your website that says, “New customer order”and then it has some details about
what got ordered and who ordered it. And if you don’t get this email in your
inbox and it goes to your spam box, what you want to do is go back to your
WooCommerce settings and remember we have this emails tab right here. What we
can do is create some free email addresses using our website domain and
we can just put those in right here and also down here. And when you send an
email from your web domain, it’s going to go to your inbox, instead of using
something like Gmail which sometimes go to your spam inbox. So I’ll link you to
that video on how to do that. I created a video on how to make an email using your
web domain for free and that’ll be in the video description. So check that out
and then create an email address. And then come back to this section and then
just click on these buttons right here and update your email addresses right
here and also right here. And make sure to click “Save” when you’re done, okay? So
what I want you to do now that we have shown you how to make a transaction work
on your ecommerce website is I want you to pause the video. And this is only if
you want to but you can pause the video and create as many different products as you
want for your ecommerce website and then push “Play” once you’re ready. And
then we’ll move on to creating the other pages for our online store. And remember,
if you’re using the live rates option for shipping, you want to put in the
weight and the dimensions for all of your products in order to get the live
rates to work, okay? So if you want, pause the video, create some products and then
push “Play” once you’re ready and we’ll move on to creating the rest of our
ecommerce website with WordPress. Alright, I’ll see you soon. Alright. And welcome back!
So if you paused this video to create some products, then on the
product page right here, you should see a list of all the different types of
products that you just created for your ecommerce website. And if you ever want
to edit any of these, you can just hover over them and click on the “Edit” link
right here. And now if I go to my ecommerce Home page and I scroll down to
the Featured Product section, I should see some featured products down here
because I selected that option when I created these products. And if I go to
the Shop page now, I should see my custom sidebar and then all of my products
right here. So if this is what you seem then we are good to go and now we can
move on to the next step. And let me just give you a quick teaser of what we’re
gonna cover. So what I want to do is show you how to add the category links
underneath the Shop title like this and then I’ll show you how to customize your
Category pages like this or like this. So if you want to learn how to do this and
add these custom category links, keep watching because in the next step, we’re
gonna cover all of this. And now what we’re gonna do is learn how to customize
the Category pages and add the category links to our Shop pages. So if you want
the category links to look like this on your Shop page or your Category pages,
what I want you to do is go to your WordPress dashboard and we’re going to
go back to our Theme options. So once you’re over here, hover over”Shopkeeper”
and click on “Customize.” And once you’re back on the Customize page, all I want
you to do is come down to the WooCommerce tab and click on that, and
then go to the Product Catalog and click on that. And then right here where it
says, “Shop page display,” go into this first drop-down and if you want the
category links to show up underneath the Shop title,
select “Shop categories & products.” And what you’ll notice over here is that the
category links show up right here. So let’s click on the “Publish” button to
save all of this. And what you’ll also notice is that you have this “Uncatecorized”
option right here. And you probably don’t want this, but if you do then that’s fine.
But if you want to learn how to get rid of this, let me show you how to do that.
So once this is saved, let’s close out of this. And once you’re back on the
WordPress dashboard, if you want to get rid of that uncategorized link, what I
want you to do is come down to “Products” and hover over that and then click on
the “Categories” link right here. And once you’re on the Product categories page,
you can see up here that you have all of your different categories and you have
the uncategorized option right here. And what I want you to do is just hover over
another one, so maybe the one right below it and then click on this link that says,
“Make default.” And once you make another category name the default option, if you
hover over “Uncategorized” you should see this link right here to delete this. So
go ahead and click on that and then click “OK” right here. And you should see
the Uncategorized category get deleted. And now if we go to our shop page really
quickly, you should see all of these custom category links now. And once your
Shop page loads, now you should see the category names right underneath your
Shop title and if you click on any of these links, then they’ll go to that
Category page. So now what I want to do is show you how you can customize your
Category pages. So if you want to leave your Category pages looking just like
this, then you actually don’t need to do anything because by default this is how
they look. And if you like this, then you’re good to go and you can just skip
on to the next step. But if you want to learn how to customize your Category
pages like this with a full width image and then the description right here, what
I want you to do is go back to your WordPress website and I want you to go
back to that Categories page. So what we’re gonna do is hover over our website
name and click on “Dashboard.” And once you’re back on the WordPress dashboard,
again we’re going to go back to the Categories page. So hover over “Products”
and then click on “Categories.” And once you’re back on the Product Categories
page, if you want to customize a category page, what you want to do is just go and
find the category page that you want to customize and then hover over that, and
then click on the “Edit” link. And once you’re on the Edit Category page, you can
see that this is for the Men’s Category page, and all I want to do is type in my
description right here. So you can see on the demo ecommerce website, this is the
description that I put in. So let me just copy this and you can always pause this
video to type in whatever you need to. So I’ll just paste that in right here and
then if you want to have that background image, you want to come to the Header
section and then upload or add your header image right here. So I’ll just
click on this link. And once you get this popup, if you want to upload your own
background image just make sure that you’re on the Upload Files tab and then
click on “Select Files” and find the image that you want to upload. If you want to
use the demo content, go to the media library and just scroll down and try to
find this image right here called “Category-headerimage. jpeg. And once you
do, go ahead and click on it and then click “Use image.” And now you should see
the image get added right here and that’s pretty much all you have to do. So
once you’re ready, go ahead and click on the “Update” button. And once the page is
updated, now we can go and check it out or you can go and customize your other
category pages. And if you want to do that, you can just click on the “Back” link
right here or you can always just click on “Categories” down here. What I want to
do is just go to the Shop page and show you that you can click on the Men’s
Category” link and you’ll go to the Custom page. So I’ll hover over my
website name and click on “Visit Store.” And once I’m back on the ecommerce
website, what I want to do is click on the Men’s link right here. And once the
Category Page load, you can see that we have the background image inserted right
here and then our description right here and our subcategory links right here for
this category. And if we scroll down, we should see the products inside this
category right over here. So this is how you can customize your category page if
you want or you can just leave it as is and it’ll look just like this. And I
actually prefer this but I did want to give you the option. So if you do want to
customize your Category pages like this, you want to go back to the Categories
page and again all you have to do is hover over “Products” and click on
“Categories” and you’ll come to this page and then hover over the category names
and click on the “Edit” button then you can customize them however you
want. And you can always go in here and delete the category names also if you
don’t want them on your ecommerce website. And the same goes with the
Product tags, okay? So if you want, you can pause the video and customize your
category pages if you want. Otherwise, what we’re gonna do is move on to the
next step which is going to be creating the About page. And now what we’re gonna
do is learn how to make an About page for the ecommerce website. So you can
see right here on the demo WordPress website, this is the About page that
we’re gonna learn how to make and we have a custom page title at the top and
then a small description right here. And we’ll add a Team section right here and
then another section that you can describe your business over here. And we
can show you how to add these icons and you can customize the colors to be
whatever you want. And then down at the bottom, we’ll have a call to action with
a button to link to the Contact Us page and then we’ll have our footer down here.
So if you want to learn how to create this About page for your ecommerce
website, let’s go back to the WordPress website that we’re making. And right now,
I’m on the dashboard but it doesn’t really matter what page you’re on. You
can hover over “New” and click on “Page” to create a new page or you can go on the
left hand side and hover over “Pages” and then click on “Add New.” Once you’re on the
Add New page, the first thing that we’re gonna do is type in our page title right
here. So I’ll type in “About” and then I’ll come to the Page Options and I want to
uncheck this box that says, “Show page title” because we’re gonna put in a
custom page title and then come down to the Page Attributes section and in the
template drop-down, I want to select the “Full Width” template. And once we do that,
we can come back up to the top. And if you remember what we’re gonna do, we’re
gonna turn on the Page Builder so we can start building out this ecommerce page.
So click only “Backend Editor.” And now you should see the Page Builder right
here. So let’s start adding our different rows for the layout for this page. So
let’s click on the “+” button right here, and find the row elements. So we’ll
click on that. And you should see the row get inserted right here and this is
gonna be for the Page title. So what I want to do first is go to the pencil and
click on this. And once the row settings pop up, we’re gonna leave the row stretch
as default and the width as full width. So I want to just go into the
Design Options tab, and I want to add some top padding over
here, So I want to type in “200 px” and what that’s going to do is just give me
some spacing between the header menu and the page title that we’re going to
insert. So once you type in “200px” go ahead and click on “Save Changes.” And now
what I want to do is add the text block for the page title. So right in the
middle, click on the “+” button. And then find the “Text Block” element and click on
that. And once we get this popup right here, we can just go in here and delete
this and type in our page title. So I’ll type in “Our Story.” And then I want to
highlight this and go into the drop-down and change this to “Heading 1” to make
the font larger and then I’ll just click on the “Align Center” button to Center
this. And if you want to change the color, you can do that or edit the text with
whatever buttons that you want. And once you’re ready, all we have to do is click
on “Save Changes.” And now I just want to add an underline underneath the page
title. So let’s click on this small “+” button right here and find the “Separator”
element and click on that. And once you get this pop-up, we can just go into the
Color tab and select whatever color that we want. And then we want to leave this
as “Align Center” and the style as “Border.” And then down here for the border width,
I want to change this to “3px” but you can make your line as thick as you want.
And then for the element width, I just want to make this “10%.” So it’s gonna make
it a pretty short line or at least not too wide but that’s really up to you so
you can select whatever you want. And then once you’re ready, let’s click on
“Save Changes.” And now we should have the page title row right here. So now what I
want to do is just add some extra space. So right over here, let’s click on the
big “+” button and find the extra space element. So I think that’s gonna be down
over here. I always have a hard time finding some of these elements that I
use all the time. So anyways, once you find the “Empty Space” element, go ahead
and click on that. And once it pops up, we’re gonna leave the empty space as
“32px” but if you want to make the empty space longer or wider, you can always
increase this amount or you can make it shorter by decreasing the number, okay? So
once you’re ready, let’s click on “Save Changes.” And now what I want to do is
come down here and add a row for the text section for the About page. So click
on the “+” button and then find the row element and click
on that. And we don’t need to change the row settings for this row but what I
want to do is add a row inside this row. So click on the “+” button in the
middle and then find the row element again and click on that. And you’ll see a
row get inserted inside this row. And what I want to do with this inner row
is I want to change the row type to the boxed option so that my text is boxed
inside this box. It doesn’t really make sense and it sounds a little funny but
the formatting for this looks a lot better. So let’s click on the pencil
right here. And once we get the inner row settings right here, I want you to come
down to the bottom over here to the row type and go in here and select the “Boxed”
option and then just click “Save Changes.” And now what we’re gonna do is add our
text block inside this inner row. So click on the “+” button in here and
then find the “Text Block and click on that. And once you get this popup, we can
just delete the text right here. And you can type in your About section or your
story or whatever you want. So if you want to pause the video and take some
time to write your About section, go ahead and do that. I’m gonna go to the
demo ecommerce website and just copy and paste this text right here just to save
some time. So let me go back to the WordPress website that we’re making and
paste that in right here. And you also have the option of formatting this text.
So I can just walk you through really quickly. So if you want to highlight any
text, you can click the bold button and you can italicize it. You have all these
other options here also. And I think I already walked you through how to link
your text to another page but again if you highlight whatever you want to link
to, just click on the link button up here and you’ll get this little popup and
you can type in the URL or you can click on the link options tab. And you’ll get
this little popup and you can link that text to any of these pages that you
created down here or you can type in the URL right here, okay? So I will cancel this.
So I have my text for my About section right here. And once you’re ready, go
ahead and click on “Save Changes.” And now you should have the text for the About
section right here. So we can just come down to the bottom and now we want to
add a new row for our Employee section. So click on the “+” button right here.
And I want you to find the row element and click on that. And we don’t
need to change the settings for this row so we can
just add a small separator line. And you can see on the demo ecommerce website,
I have this little border line right here. So that’s what I want to add. So I’ll
click on the “+” button right here and find the separator element and click on
that. And once you get this popup right here, if you want to change the color you
can or the thickness. I just want to come down to the element width, and I want to
select “80%” so that it doesn’t go across the entire page. And once
you’re ready, click “Save Changes.” And now what I want to do is add a
little title for this section. So you can see on the demo ecommerce website, it’s
gonna say, “Our Team” right there and then we’re gonna insert these images for our
employees afterwards. So let’s click on the small “+” button right down here
and find the Text Block and click on that. And once you get this popup, we can
just go in here and delete this and type in the title for the section. So I’ll
type in “Our Team” and then I’ll highlight it and go into this drop-down and select
“Heading 2” to make the font larger and then I’ll click on “Align Center” to
center this and then we can just click on “Save Changes.” And now we have the
title for this section right here. And what I want to do now is add a row
inside this row for the Employees section. So let’s click on the small
“+” button and then find the “Row” element and click on that. And what I want to do
is change the number of columns here to “3.” So I’ll hover over this and click on
the one that says, “1/3 +1/3 +1/3” and you’ll get three boxes
here. And then let’s go into the Row Settings to change the row type
to the boxed option. So click on the “pencil.” And once you get the inner row
settings right here, I want you to scroll down to the “Row Type” and go in here and
select the “Boxed” option and then click “Save.” And now, what we want to do is go
into each one of these little boxes and add a single image and a text block for
the employee and then their name and their job title. So let’s click on the
“+” button on the left hand side and find the single image element and click
on that. And once you get this popup, if you want to add an employee image, just
click on the “+” button right here. And if you want to upload your own files,
click on “Upload Files” and then click on “Select Files” and find the image that you
want to upload. If you want to use the demo content, make sure
that you’re on the Media Library tab. And then just scroll down
and find this image right here. And this is actually me. So if you
don’t know what I look like, this is Jameson from NYC Tech Club. Hello
and nice to meet you. So if you want to use this image, just select it. And then it’s
the employee.jpeg, and what you want to do is just click on “Set image.” And once
the image shows up right here, you want to come down to this image size section
and you want to make sure that it says, “Thumbnail” because that’s gonna resize
this image to be the perfect size for our About page. And if you want to come
down here where it says, “Image Alignment” we want to center this. And then for the
image style, I think we’re gonna keep this as “Default” but if you want to
change it to something else, you can. And I think that’s all we’re gonna do. But if
you also want to link the image to another page, you can go down into this
drop-down and then you can link to a custom link. So if you create another
page, you can just click on this and then you can add the URL right here to that
page if someone clicks on the image, okay? So I’m gonna select “None” right here. And
once you’re ready, let’s click on “Save Changes.” And now, what we want to do is
add a text block so that we can insert the name and the job description or job
title for this employee. So let’s click on the small “+” button right here and
find the “Text Block” and click on that. And once you get this popup, I’m gonna
go in here and delete this. And then I’ll type in the name for the employee right
here. So I’ll type in “James King.” And then what I want to do is push “Enter” but I
don’t want a lot of space in between the name and the job title. So I’m gonna
click “Shift” and “Enter” and then I’ll just type in “Developer” right here. And then I
can center this if I highlight everything and click “Align Center.” And
that’s pretty much all you have to do. So let’s click on “Save Changes” right here.
And now we have our first employee right here. And if you want, you can go through
the same steps of adding another single image element and a text block for your
other employees right here. Or what you can do is just copy these elements or
make a copy of them and then you can edit them. So that’s what I’ll do. I’ll
hover over the single image element and I’ll click on this button right here
that says, “Clone single image.” And I’ll do it twice so that I make
copies of this image and then I can just click and drag it
into the second box right here. And then I’ll do the same with this other one. And
it goes a little crazy. I don’t know why but yeah, it does that. So don’t worry. As
long as you drop them into the right spot, you’re good to go and you can
always move them around if they don’t go into the right spot and
I’ll do the same with these text blocks. So I’ll make a copy of these and then
just drag them into these other boxes and it’s going a little smoother. So I’ll
just add it right there. And so if you do make copies of your elements, what you
can do is just click on the pencil for each of these and then you can change
the image and the text for these other employees. And then if
you want to add some additional rows of employees, what you can also do is clone
this row. So you can make a copy of the row if you click on this button right
here, okay? So I’m just going to add these three employees. And now what I want to
do is add some empty space below this. So if you need to pause the video to add
your other employees, go ahead and do that. And then push “Play” once you’re
ready and we’ll just move on to creating the rest of the About page. So right now,
what I want to do is add some empty space. So I’ll click on the small “+”
button right here and I’ll find the empty space element and click on that.
And once this shows up right here, we’re not going to change the height. So all we
have to do is click on “Save Changes.” And now what we want to do is add another
row for our icon. So you can see on the demo ecommerce website that we’re gonna
create this section now. So let’s go back to the ecommerce website that we’re
making. Click on the big “+” button right here and find the row element, and
click on that. And we’re not gonna do anything with the row settings. So all I
want to do is just add another separator line just like this. So let’s click on
the “+” button right here and find the separator element and click on that. And
once you get this pop up, I just want to come down to the element width and
change this to 80% and then click “Save Changes.” And now what I want to do is add
the title for this section. So let’s click on the “+” button right here and
then find the text block and click on that. And once you get this pop up, we’ll
just go in here and delete this text. And we can put in our title for this section.
So I’ll go to the demo online store and just copy this.
So it says, “WE EMPOWER WOPRDPRESS DEVELOPERS AND ENTREPRENEURS” and
you probably want to type in something different but you can type in whatever
you want. and if you want to eliminate the gap in between these two lines, just
push “Shift” and “Enter” after your first sentence right here. And everything is
already formatted to Heading 2 but if you need to, you can highlight this and
go into your drop-down and select “Heading 2” and then we want to center
this. So let’s click on “Align Center.” And then once you’re ready, let’s click on
“Save Changes.” And now we have our text right here and what I want to do now is
add an empty space. So let’s click on the “+” button right here and find the
empty space element. So click on this and we want to leave the height as “32px” so
all we have to do is click “Save Changes.” And now we have our section right here.
And what I want to do is add another row inside this row for the branding icons
or the little services section. So let’s click on this small “+” button right
here and find the row element and click on that. And now we should have a row
inside this row, and I want to change it to three columns. So I’ll hover over this
button right here and click on the one that says, “1/3 +1/3 + 1/3”
and just like the Employee section, we’re gonna change the row type
to the boxed option. So click on the pencil right here. And once you get the
inner row settings, let’s scroll down to the row type and just go in here and
select the “Boxed” option and then click “Save Changes.” And now what we’re gonna do
is add Our Services section or little descriptions into these boxes right here.
So you can see on the demo WordPress website that we’re gonna add Branding,
Marketing and Strategy with custom icons. So let me show you how to build this
section. Back on the ecommerce website that we’re making, let’s start on the
left hand side. So click on the big “+” button right here and we want to add a
Heading element. So click on the “Text Block.” And once you get this popup, just
delete this and then type in the title for this first service or whatever you
want to call this. So I’ll type in “Branding” right here. And I want to
highlight this and go into the drop down and select “Heading 3” to increase the
size of the font and then I’m gonna center this. So click on Align Center
and then just click on “Save Changes.” And now what I want to do is add my icon. So
I’m gonna click on the “+” button right down here and find the icon element and
click on that. And once you get this popup, what you’re gonna do is come to
the icon section and you want to click on the down arrow right here. And what
you’ll see is a popup with all these different icons. And you can select
whichever icon that you want and if you need to, you can go into this drop down
and filter by categories or you can type in a keyword right here. So I’ll just
type in “dot” and select this one because it doesn’t really matter what I use for
my demo ecommerce website. But you probably want to pause the video and
spend some time to find the perfect icon for your online store that you’re making.
And then once you’re ready, what I want you to do is come down to the icon color
section and go into this drop down and select the color that you want. And what
I want to do is put in a custom color code. So I’ll select the custom color
option and I’ll get this popup right here and all I have to do is click on
“Select color.” And then I can go in here and type in a color code. So the
color code is “#b39964” And if you want, you can type in
the same color code to get this gold color. And again, these color codes are
always going to be on the text tutorial on the NYC Tech Club website on “How to
Create an Ecommerce Website with WordPress 2018.” So if you need to, you can
always go and check that out, okay? So once you’re ready, let’s click on
“Select Color.” And then I don’t need to change the background shape but you can
if you want. And then for the size, I want to select extra-large. And for the icon
alignment I want to go with “Center. And then if you want to make this icon a
link to another page, what you want to do is add the URL right here. So all you’re
gonna do is click on “Select URL” and then you can type in the URL to the page that
you want to link to or if you want to link to a WordPress page that you made,
you can go into this list right here and then find the page that you want to link
to, okay? So we’re not gonna link the icon to anything so I’ll leave that blank. And
I believe that’s all we have to do. So once you’re ready, go ahead and click on
“Save Changes.” And now we have the title, the icon and all we need now is the
description or little text section below this. So let’s click on
the “+” button again and find the “Text Block” and click on that.
And once you get this popup right here, I’m just gonna delete this text and I’ll
go to the demo online store and just copy this text right here and paste it
in just to save some time. So if you need to, you can always pause the video and
type in whatever you need to. And then once you’re read,y let’s click on “Save
Changes.” And now you should see the Services
section right here and through the power of video editing, I’ve already added the
other two sections right here. And this just saves a lot of time because these
steps are very repetitive, but if you want you can pause the video and then
create these other two sections following the same steps that we did
right here. Or what you can do is hover over each element and click on this
button right here to make a copy of these elements and then just drag them
in like we did for the Employees section and then you can hover over the pencil
and you can edit each element. So go ahead and pause the video and create
these other two sections. And then once you’re ready, go ahead and push “Play” and
then we’ll move on to the next step. Otherwise, we’re just gonna move on right
now. So if you want to just move on right now, what I want to do after the Services
section over here is I want to come down here and I want to add an empty space
element. So click on the “+” button and find the “Empty Space” element. So click on
this. And once you get this popup, we’re not going to change the height. So we’ll
leave that as is and just click on “Save Changes.” And now you should see the empty
space element right here. And now we’re gonna add a row for our last section. So
let me go to the online store demo,and we’re gonna create this call to action
right here with a background color and then a little call to action and our
button right here. So back on the ecommerce website that we’re making,
let’s add a new row. So click on the big “+” button and then find the “Row”
element and click on that. And once you see the row get inserted, let’s go and
edit the settings. So click on the pencil. And once you get this popup, we’re gonna
leave the stretch as “default” and the row type as “full width” but I want to add a
background color for this row. So I want to click on the “Design Options” tab and
come down to where it says, “Background” and just click on “Select Color.” And you
can go in here and drag the wheel to whatever color that you
or click on any of these other colors. But what I want to do is put in a custom
color code. So I’ll type in #dd4040″ and it’s going to be this
red color. So if you want the same color, type that in and then just click on
select color and then click on “Save Changes.”
And now what I want to do is add a text block for the call to action. So
click on the “+” button right here and then find the “Text Block” and click on
that. And once you get this popup, what you want to do is type in your call to
action right here. So I’ll type in “Interested In Working Together.” aAnd I
want to edit this font so I’ll highlight that and go in here and select “Heading 2.”
And then I’ll click on the “Align Center” button and I want to change the font
color to “White.” So I’ll hover over the “Text Color” button
and click on this and then just select the “White Color.” And now if I click out
of this, you can’t see the font but it is white. So I’ll click on “Save Changes”
right here. And now what we want to do is add our call-to-action button. So let’s
click on the small “+” button right here. And once you come to this pop-up,
what I want you to find is the button element. So that’s this one right here
and go ahead and click on that, and you’ll get this Button Settings popup.
And I already filled everything out but let me walk you through what I did. So
for the text, my button’s gonna say, “Get In Touch.” And then down here for the URL, I
want to link the button to the Contact page. So what you want to do is click on
“Select URL.” And right now, I don’t think we have a Contact page made. So
it’s not gonna be in this list but you can type in the URL right here. So you can see
that it’s “http://www.yourwebsitename.” So mine says,
“shopkeepertheme.com/contact.” And what you want to do is
type that in and then click on “Set link” and you should see the URL right here.
And then for the style for the button for our ecommerce website, we want to
use the “Flat” option and then the shape, it’s going to be the “Square” option. So go
into these drop-downs and select these options. And then you want to go and
select the color that you want. So I’m using the “Classic Orange” option and then
for the size, we want to select “Large” and then the alignment is gonna be centered.
And that’s all we have to do. So once you’re ready,
go ahead and click on “Save Changes.” And the last thing that we’re going to do is
add another empty space element below this. So let’s click on the “+” button
right here. And we’re not going to change the height. We’re going to leave it as
“32px.” So all we have to do is click “Save Changes” And you should see the empty
space get inserted right here. And now, we are actually done creating the About
page for our ecommerce website with WordPress. So you can always come back
here and edit this page if you need to. So let’s make this official and let’s
click on the “Publish” button down here to publish this page. And once the page is
published, let’s go and check it out to make sure that it looks correct. So let’s
click on View page. And once your WordPress page loads, this is what you
should see. So this is the ecommerce About page that you just made. And we
have our custom title at the top, our we’re small description and then our
Employees section right here, and then a Services section and our call-to-action
at the bottom. So if this is what you see, then we are good to go and now
we can move on to the next step. And now what we’re going to do is learn
how to create the Contact Us page for the ecommerce website that we’re building.
So we’ll put in a custom title at the top And then some contact information right here.
And if you have a physical location, we can insert this google maps right here. So if
you want to learn how to create this page for your ecommerce website, let’s
go back to the online store that we’re making and we want to make a new page.
So hover over “New” right here and click on “Page.” And once you’re on the “Add New” page,
let’s type in our page title right here. So let’s type in “Contact” and let’s
uncheck this box next to “Show Page Title” and then come down to the Page
Attributes and in the template drop-down let’s select the “Full Width” page option
and then let’s come back up to the top and let’s turn on our page builder. So
let’s click on the “Backend Editor” and let’s add a row for our page title and
our contact information. So click on the “+” button right here and then find the
“Row Element” and click on that. And once you see the row get inserted right here,
let’s go into our row settings. So click on the pencil. And all I want to do here
is go into the design options tab and I want to put in 200 px for the top
padding. And this just gives me some spacing between
the page title and the header menu. And you can type in whatever number that you
want here. So you can always play around with this. And once you’re ready, click on
“Save Changes.” And now what we’re gonna do is add our text block for the Page title.
So click on the “+” button right here and then click on the “Text Block” element.
And once you get this popup, we can just go in here and type in our custom page
title. So I’ll type in “Get In Touch!” with an exclamation mark and then I want to
format this. So I’ll highlight the text and go in here and select “Heading 1” so
that my font is larger. And then I’ll click on the “Align Center” button. And
then once you’re ready, click on “Save Changes.” And now what I want to do is add
a little underline or separator line for the page title. So let’s click on the
small “+” button right here and then click on the separator element. And once
you get this popup, let’s just change the color right here. So I’ll select
“Orange” and I’ll leave this as “Align Center” and the style as “Border.” For the
border width, I’ll change this to “3px” and then for the element width for the
page title, I’ll select “10%.” And once you’re ready, go ahead and click on “Save
Changes.” And now we’re gonna add our contact information below this. So click
on the “+” button right here and then let’s add another text block. So click on
this. And once you get this pop up, this, is where we can type in our contact
information. So I’ll just paste in my address, phone number and email address.
And if you want to learn how to format this the same way, you can see that I
have three lines here and I didn’t just push “Enter” because if you just push
“Enter” you’ll get a big space in between these two lines. So what I did was I
pushed “Shift” and “Enter” at the same time so it eliminates that space, okay? So over
here, you can see that I have this line that also separates the phone number and
the email address. And this is just that separator line that we created when we
made our variable products. So all you have to do is click “Shift” and the “/”
sign at the same time. So what I want to do is I want to change the font color to
a light grey for most of this, except for the email address. So I’m gonna highlight
all of this and then go in here and select the light gray color. And then I
want to center all of this. So I’ll highlight everything and click on “Align
Center” and then I just want to link my email address. So if I click on my email address and
then I click on the “insert edit” link button, I’ll get this popup that says,
“mailto:” and then my email address. And all I have to do to make this a link is
click the “Apply” button right there. And I can click out of this and now my email
address is a link, okay? So once you’re ready and you’re done typing in your
contact information, let’s click on “Save Changes.” And the last thing that we’re
gonna do is come down here and you only have to do this if you have a physical
location or if you want to insert a map. And if you do want to insert a map, what
I want you to do is click on the “+” button right here and let’s add a new
row element. And once you see the row inserted right here, all I want to do is
click on the middle “+” button and I want to find the Google Maps element. So
click on that. And you should see this popup right here. And what we’re gonna
do is come in here and remove this code and we’re going to replace it with the
code for your location. So what I want you to do is click on “Google Maps” and
it’ll open up a new tab just like this and what you’re gonna do is type in your
address right here. And then you should see the pin over here for your address.
And then we’re gonna click on this button right here that says “Share” and
you should get this pop up. And if you’re on the share link right now, I want you
to click on the “Embed Map” tab and you’ll see this page right here. And all you’re
gonna do is put your mouse in here and copy all of this text and then go back
to the ecommerce website that you’re making and paste in that code right here.
And that’s all you have to do to insert your map on the Contact Us page. So once
you’re ready, go ahead and click on “Save Changes.” And now we are done making be
Contact Us page for the online store that we’re building.
So again, just make sure that you deselect this option right here to show
the page title. And once you’re ready, let’s click on “Publish.” And once the page
is published, let’s go and check it out by clicking on “View Page.” And once the
Contact Us page loads, this is what you should see. So we should have a custom
title, our contact information and then the map that we inserted right here. So
if this is what you see, then we are good to go and now 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 e-commerce WordPress website. And this is the blog page right
here and this is what its gonna look like after you write your blog post. So
we’ll have a bunch of different blog post right here. So what I want to do
right now is just show you how to create some individual blog post. And you can
write something very basic like this where it just has a title, your
information right here and then your blog posts and then a comment section
below. Or you can have something a little bit more fancy where you create a
featured image at the top and then below this, you have your content section and
then you have a comment section down here. So I’ll show you how to create both
of these. So what you want to do is go back to the ecommerce website that
we’re making. And now we’re gonna create some blog posts. So if you’re on this
page, hover over “New and click on “Post.” And once you’re on the Add New Post page,
the first thing that we’re gonna do is type in our title right here. So let me
go to the demo online store that we’re making and just copy this and it says,
“All Roads Lead to Shopping” and I’ll paste that in and then we’re gonna come
down here. And I’m on the visual tab right now and this is what we’re gonna
type in the content for our blog post. So I’ll go back to the ecommerce
website and just copy this text right here just to save some time and then
come back to the WordPress website and paste that in right here. And if you want
to add some HTML, you want to click on the text tab and that’s where you can
add the HTML. And let me show you a few things. If you want to insert an image,
you want to put the mouse wherever you want to insert that image and then click
on the “Add Media” button. And you’ll get this popup and if you want to upload
your own images, click on “Upload Files” and then click on “Select Files” and find
the image that you want to upload. If you want to use the content in the Media
Library, you want to select this tab right here and then find the image that
you want to insert and click on it. And then down here at the bottom, there are
some display settings. So you can align the image to the right, left or center of
your text and you can link it to another page or you can change the size of the
image over here, okay? So I’m not gonna insert an image but I did want to show
you how to do that. And what you can also do is link your text to another page. So
I’ll just go over that again really quickly. All you have to do is highlight
the text that you want to link and then click on the “insert/edit”
link button right here. And you’ll get this popup and you can type in the URL
right here and click on the arrow or you can click on this button that says “Link
Options.” And you’ll get this popup and you can type in the URL right here or
you can select the page that you created down here to link the text too. And you
also have the option of opening up this link in a new tab,
okay? And you also can change the font size if you hover over the text and then go
into this drop-down right here and select the heading size that you want. So
what I want to do really quickly is show you how you can select the excerpt
that you want to show on the Blog Post page. So you can see on the demo
ecommerce website that we have our featured images right here for the blog
post. And then we have a small little excerpt right here and then it says,
“Continue reading below that.” And what we want to do on the blog page is select
what we want to show up as the excerpt. So to do that, what you want to do is put
your mouse where you want to end the excerpt and then you just want to click
on this button right here that says, “Insert Read More Tag” and you’ll see this
little dotted line show up. So on your blog page, all that’s gonna show up for
the text is gonna be this section right here and then it’s going to have the
“Continue reading link” right below this. Otherwise, the entire blog post is going
to show up on the blog page, okay? So once you’re ready, let’s click out of this and
what I want to do is come down to the bottom to the Featured Image section and
what we want to do is select the featured image that’s gonna show up on
the blog page and then we can go up to the top over here. And if we check this
box, the featured image is going to show up on the individual blog post also. So
down here, let’s set our featured image by clicking on this link. And I’ll just
stay on the Media Library tab and I’m gonna select this image right here.
So this is blogpost.jpeg and then I’ll just click on “Set Featured Image. And the
featured image should show up right here and this image is gonna show up on your
blog post page just like this. And if you want it to show up on the individual
blog post like this, what you want to do is go back to the blog post that you’re
making and you want to make sure that you check this box up here in the “Post
Options” section where it says, “Show Featured Image.” If you uncheck this,
then the blog post is going to look like this page up here where you don’t have a
background image, okay? So it’s really up to you what you want to do for this blog
post. I’m gonna show the featured image so I’ll check this box. And then one of
the last things that we have to do is come down to the Category Section and if
you want to categorize this blog post, you can add a new category name right
here by clicking on this link. And I’ll just type in “In Style” right here and
push “Enter.” And you should see the category get added to this list right
here. And that’s pretty much all we have to do So once you’re ready, go ahead and
click on the publish button right here. And once the post is published, let’s go
and check it out. So click on “View Post.” And once the post page loads, this is
what you should see and if we scroll down, we should see a Content section
right here and then our comment section for our visitors right here. So what you
can do right now is pause the video and create some additional blog posts and
then once you’re ready, push “Play” and we’ll move on to the next step. So I’ll
see you in just a few minutes. Alright and welcome back. So if you paused this
video to create some blog posts, then you should see all of the blog posts that you
created right here. And if you need to come to this page, just hover over “Posts”
and click on “All Posts.” And in this list, you should see a blog post called “Hello
World.” And this is created by default when we installed WordPress and we
probably don’t want to keep this on the ecommerce website that we’re making. So
we can just hover over this and delete it by clicking on the trash link right
here. So go ahead and do that. And once the blog post is deleted, now let’s go to
the blog page just to check it out to make sure that it looks correct. So I’ll
type in the URL right here. So it’s gonna be shopkeepertheme.com/blog.
So just type in your own web address and then “/blog” at the end
and push “Enter” once you’re ready. And once the blog page loads, you should see
some category names at the top and you should see some featured images if you
inserted them, and then some small excerpts for each of your blog posts and
then a link to continue reading below. So if this is what you see, then we are good
to go and now we can move on to the next step. And now what we’re gonna do is
learn how to create the Frequently Asked Questions page for the ecommerce
website that we’re building. So on the WordPress website, we’ll have
different sections with a bunch of different questions and answers. And you
can have as many different sections as you want and then we’ll insert a call to
action at the bottom and have our footer down here. So if you want to learn how to
create the frequently asked questions page for your online store, let’s go back
to our ecommerce website and we want to create a new page. So hover over “New” and
click on “Page.” And once you’re on the Add New page, the first thing that we’re
gonna do is type in the page title right here. So I’ll type in FAQ. And then once
you’re ready, come to the Page Options section and uncheck this box to show the
page title. And then come down to the template section and in this drop-down,
select the “Full Width” page option. And once you’re ready, come back up to the
top and let’s turn on the “Page Builder” right here and let’s add a row for our
page title. So let’s click on the “+” button right here and then click on the
row element. And once the row shows up right here, I want to add some top
padding. So click on the pencil. And once you get this popup, let’s just go to the
design options tab and all I want to do is add “200px” for the top padding. And
again, this is just for spacing between the header menu and the page title that
we’re creating. So once you’re ready, click on “Save Changes.” And now let’s add
a text block for the custom page title. So let’s find the “Text Block” element and
click on that. And once you get this popup right here, all I want you to do
is delete this text and type in your page title. So I’ll type in “Frequently
Asked Questions and we’re going to highlight this and go into this
drop-down and select “Heading 1” and then we’re just going to center this. So click
on “Align Center” and then click on “Save Changes.” And now what I want to do is add
a small separator line. So click on the “+”plus button right here and find the
“Separator” element and click on that. And once you get this pop-up, all you have to
do is change the color if you want. So I’ll select “Orange” and then I’ll just
come down to the border width and change this to “3px.” And for the element width, I’m
gonna select “20%” because this is a long page title. So once you’re ready go ahead
and click on “Save Changes.” And now what I want to do is just add some empty space
below this. So click on the”+” button right here and just find the empty space
element. So click on that. And once you get this popup, we’ll leave the
height as “32px” so we can just click on “Save Changes” right here. And now, what I
want to do is add the first row for the Frequently Asked Questions. So you can
see on the demo website we’re gonna add this Shipping Information section right
now. So what I want to do is go back to the ecommerce website that we’re making
and I want to click on the big “+” button right here and add a new row. So
click on the “Row Element.” And once you get this row inserted, I want to go into
the row settings really quickly. So click on the pencil. And once you get this
popup for the row settings, just come down to the row type at the bottom and
select the “Boxed” option and you want to make sure that you do this for each of
the rows that you create for different frequently asked questions sections. So
once you’re ready, click “Save Changes.” And now what we’re going to do is add the
title for this section. So click on the “+” plus button right here and then add a
text element. And once you get this popup, we’ll just go in here and delete this
and type in our title. So I’ll type in “Shipping Information” and you can type in
whatever you want. And I want to format this. So I’ll highlight this text and
I’ll click on the “Bold” button right here and then go into this drop-down and
select “Heading 4” to make the font a little larger. And then I want to change
the color of this text to orange. So I’ll click on “Text Color” and select the
“Orange” color right here and you can do whatever you want. And once you’re ready,
go ahead and click on the “Save Changes” button. And now what we want to do is add
an inner row for our first two questions. So click on the “+” button right here
and then find the row element and click on that. And we don’t need to change the
settings but I want to hover over this button right here and then select the
“1/2 + 1/2” button. And you can see that we get two boxes right here and what
we’re going to do is add a text block into each one so that we can add a
question and answer. So on the left hand side, let’s click on the “+” button
right here. And I want you to find the text block element and click on that. And
once you get this popup right here, this is where you can type in the question
and your answer. So let me go to the demo website really quickly and just copy the
text right here. And I’ll show you the formatting in just a little bit. So let
me paste it in. And for the question, all I did was I
bolded this. So I highlighted it and then clicked on the B right here. And then for
the answer, what I want to do is highlight this and I want to change the
text color to light gray. So if you want to do the same, go ahead. And if you need
to pause the video to type out your question and answer, you can do that. And
once you’re ready, go ahead and click on “Save Changes.” And then we’re gonna do the
same to the right hand side over here. So again, click on the”+” button and find
the text block and click on that. And again, once we get this popup right here,
I’ll delete this and go and get my second question and answer right here. So
again, I’ll copy this just to save some time and paste that in. And just as a
reminder, the question is gonna be bolded and then the answer for the demo website
is going to be a light gray text color. So I’ll go in here and just select light
gray and then click “Save Changes.” So once you type in your first two questions and
answers right here, if you want to have another row of questions and answers,
what you want to do first is add some empty space. So click on the small “+”
button right here and then find the “Empty Space” element and click on that.
And once you get this popup, all we have to do is come in to where it says, “Height”
and change this to “16px” and then click “Save Changes.” And that’s just gonna give
me a little spacing in between this row of questions and the next row that I’m
gonna create. So if you want to add another row of questions, just click on
the “+” button right here and then click on the row element and all you
have to do is hover over this button and change the number of columns to
“1/2 + 1/2″and then we can add a text block right here and also one right
here for some more questions and answers. So what I can do is click on the “+”
button right here and click on the “Text Block.” And once I get this popup, I can
add my new question and answer. So I’m just gonna go to the demo website one
more time and just copy this. And I’ll paste that in right here. And if you need
to format this, you can do that. So I’ll just change the text color right here to
light gray and then click on the “Save Changes” button. And what you can also do
to save some time is you can just hover over this element and you can make a
copy of it. And then you can just click and drag this into the right spot. And
you can always go in here and just click on the pencil and edit this
element. So that just saves a little time. It’s probably not what you really want
to do because you want to create unique questions and answers. But because I’m
making a demo website, it doesn’t really matter if I repeat questions and answers.
And what you want to do to round out this section is add another empty space
at the bottom. So click on the”+” button right here. And then find the
“Empty Space” element and click on that. And once you get this popup, let’s just
change the height to “16px” and click on the “Save Changes” button. And now all we
want to do is add our last row for the call to action. So let’s click on the
“+” button right here and then click on the “Row” element. And what I want to do is
change the background color for this row. So let’s click on the pencil right here
to go to the row settings. And once you get this popup all I want to do is go
to the Design Options tab. And right here where it says, “Background,” I want to click
on “Select Color” and you can drag this wheel to change the color to whatever
color that you want or if you want to type in a background color code, which is
what I want to do, just type in this one: “dd4040” and it’s gonna be a
reddish color. And once you’re ready, all we have to do is click on “Save Changes.”
And now we can add a text block for our call to action. So I’ll click on the “+”=
button right here. And then find the text block and click on that. And once you get
this popup, I’m gonna go in here and delete this and type in “Have more
questions” and put a question mark. And I want to format this. So I’ll highlight
this and I’ll change this to “Heading 2” and then I want to align this to the
center. And I want to change the font to white because I think it looks better
with the red background color. So I’ll go in here and just select “White.” And then
once you’re ready, let’s click on “Save Changes.” And now what we want to do is
add our button for the call to action. So click on the “+” button right here
and then find the “Button” element and just click on that. And once you get this
popup, we’re gonna change the text for the button right here. So I’ll just type
in “Get In Touch.” And then what we want to do is link this button to the Contact
page. So click on “Select URL” and you can type in the URL right here if you want.
But we already created the Contact page. So in this list right here, I can just
find that page and just click on it and you’ll see that
the URL gets populated right here. And once you’re ready, click on “Set Link.” And
now, you should see the URL right here. And what I want to do is change the
button style to the “Flat” option and then for the shape I’ll go with square and
the color, I’ll go with “Classic Orange.” And then for the size, I’m gonna select
“Large” and then for the alignment, I’ll go with centered. So if you want to
customize the button the same way, just follow those options. And once you’re
ready, go ahead and click on “Save Changes.” And the last thing that we have to do is
just add some empty space at the bottom. So click on the small “+” button right
here and then find the “Empty Space” element. So that’s this one right here
and click on that. And once you get this popup, we’re gonna leave the height as
“32px” so we can just click on “Save Changes.” And pretty much, that’s all we’re
gonna do to create our Frequently Asked Questions page for our ecommerce
website using WordPress. And we can always come back here and edit this page
or if you need to, you can always pause video and rewatch any section that you
need to. So let’s make this page official by clicking on the “Publish” button right
here once you’re ready.Aand once the page is published, let’s go and check it out
by clicking on “View Page.” And once the WordPress page loads, this is what you
should see. So we have our custom title at the top and then we have our
different sections right here for our frequently asked questions. And you can
see what the power of video editing that all of these sections are now updated
and unique. And then at the bottom over here, I have my call to action that’s
going to go to the Contact Us page. So if this is what you see, then we are good to
go and we’re really, really close to being done with this video tutorial. So
if you’re ready, let’s move on to the next step. And now what we’re going to do
is learn how to create the Privacy Policy page. And you probably want one of
these for your ecommerce website and that’s why I put it in this video
tutorial. So if you want to learn how to create a simple page like this, let’s go
back to the online store that we’re making. And on the WordPress page, let’s
hover over “New” right here and click on “Page.” And once you’re on the Add New page,
the first thing that we’re gonna do is type in the title. So I’ll just type in
Privacy Policy, and I’ll uncheck the “Show page title”
over here. And then we’ll come down to the Page Attributes and we’ll select the
“Full Width Page” option down here in the template drop-down. And then I’ll come
back up here and turn on the Page Builder. And let’s add a row for the
custom page title. So let’s click on this “+” button right here and then click on
the “Row” element. And once you see the row get inserted here, let’s go into the “Row
Settings.” So click on the pencil and all I want to do is go to the Design Options
tab and add “200px” right here for spacing and then click on “Save Changes.” And now we can add our text title for the title. So let’s click on the “+”
button and find the text block and click on that. And once we get this popup, we
can just go in here and delete this and type in “Privacy Policy.” And if you want
to format this just like the demo website, just highlight this and then go
in here and select “Heading 1” and then click on “Align Center.” And we’re
good to go so we can click on “Save Changes.” And now, I want to add the
“Underline” or the “Separator” element. So click on this and then go to the
“Separator” element and click on that. And once you get this popup, if you want to
change the color you can. So I’ll select “Orange” and then I’ll come down here and
select “3px.” And for the element width, I can select “10%” or “20%.” I think I use 20%
in the demo ecommerce website but I’m going to use 10% right here. And once
you’re ready, go ahead and click on “Save Changes.” And now what I want to do is add
an inner row so that I can add the text blocks. So let’s click on the “+” button
and find the “Row” element and click on that. And now let’s change the row type
to the “Boxed” option. So click on the pencil right here. And once you get the
inner row settings right here, let’s just scroll down to the row type and select
the “Boxed” option and click “Save Changes” right here. And now, let’s add a text
block in here. So click on the pencil in the middle and then find the text block
and click on that. And once you get this popup right here, we can delete this
text and you can type out your Privacy Policy here. So if you need to pause the
video to do that, go ahead and do that. I’m gonna go to the demo ecommerce
website that we’re making and just copy this text and then paste that in right
here. And if you want to create a link to your email address, again what
you want to do is just highlight that text and then click on the “insert/edit”
link right here and then just click on the arrow that says, “Apply.” So you can see
that we get this popup and it should say, “mailto:” with the colon and then your
email address and all you have to do is click this button right here. And that’s
gonna link to the email address, okay? So once you’re ready, go ahead and click on
“Save Changes.” And the last thing that we have to do for this page on the online
store that we’re making is add some empty space. So click on the small “+”
button right here and then find the “Empty Space” element. So that one is right
here and just click on that. And we’re gonna leave the height as “32px” so we can
just click on “Save Changes” right here. And now we have just created our Privacy
Policy page for the ecommerce website that we’re making in WordPress. So this
is really easy. And once you’re ready, let’s make it official by clicking on
the “Publish” button right here. And once the page is published, let’s go and check
it out so let’s click on “View Page.” And once the WordPress page loads on the
ecommerce website that you’re building, if this is what you see for the Privacy
Policy page, then we are good to go. And I think we’re just gonna build one more
page for this ecommerce tutorial. So if you’re ready, let’s move on to the next
step. And now what we’re gonna do is learn how to make the Terms and
Conditions page for the ecommerce website that we’re making. So we’ll have
a custom title at the top and then we’ll have different sections right here for
your Terms and Conditions. So if you want to learn how to make this page for the
online store that you’re building, let’s go back to our WordPress website and we
want to make a new page. So hover over “New”l and click on “Page.” And once you’re
on the Add New page, the first thing that we’re gonna do is type in our page title
right here. So I’ll type in “Terms and Conditions.” And once you’re ready, let’s
go to the Page Options section and I want to uncheck this box to show the
page title. And then let’s come down to the bottom over here to the template
drop-down and let’s select the “Full Width Page option. And once you’re ready,
come up to the top and let’s turn on the “Page Builder.” So let’s click on the
“Backend Editor.” And we want to add a row for our custom page title. So let’s click
on the “+” button right here and then find the “Row” element
and click on that. And we want to add some top padding to this so let’s click
on the pencil. And once you get this popup, just go to the Design Options tab and
right up here in the top padding, let’s type in “200px.” And once you’re ready,
click on “Save Changes.” And now let’s add a text block for our page title. So click
on the “+” button right here and then find the “Text Block” element and click on
that. And once you get this popup right here, we can just delete this text and
type in our page title. So again, I’ll type in “Terms and Conditions. And if you
want to format this text, just highlight it and go into this drop down and select
“Heading 1” and then click on “Align Center.” And once you’re ready, click on “Save
Changes.” And now, we’re gonna add a separator underline for the page title.
So let’s click on the small “+” button right here and then find the separator
element and click on that. And once you get this popup, you can change the color
of the separator line right here. So I’ll select “Orange” and then I’ll just come
down to the border width and change this to “3px.” And for the element width, I’ll
select “10%” here. And once you’re ready, click on “Save Changes.” And now, what I
want to do is add a row inside this row for my Terms and Conditions. So let’s
click on the “+” button right here and then find the “Row” element and click on
that. And once you get this popup right here, what we’re gonna do is change the
row type to the “Boxed” option. So let’s click on the “pencil” right here. And once
you get this popup right here, just scroll down to the “Row Type” options and
go into this drop-down and select the “Boxed” option. And once you’re ready, click
“Save Changes.” And now what we want to do is add some text blocks and separator
lines to create our terms and conditions lists. So the first thing that we’re
gonna do is come in here and click on this “+” button and we’re gonna add a
“Text Block.” So find this element and click on that. And once you get this
popup, what we’re gonna do is delete the text right here and then we can put in a
title and our terms and conditions for this section. So you can see on the demo
ecommerce website, the first terms or conditions is gonna be for this title
called “Product.” So let me just copy and paste this in and then I’ll show you the
formatting. So once I copy that and paste it in right here, the title for
this section is going to be “Heading 4.” So if you want the same formatting, just
highlight this and go into this drop-down and select “Heading 4.” And
then the text right here, you can leave this as black if you want or you can go
and change the color in here. So I’ll just leave this as black just because
this is a demo, but again you can always customize the ecommerce website however
you want. So once you have your first terms and conditions, what you want to do
is click “Save Changes.” And if you want to add another terms and conditions, what I
want to do is I want to format this with a separator line. So that’s gonna
separate everything. So I’ll click on the small “+” button right here and find
the “Separator” element and click on that. And once you get this popup, you really
don’t need to change anything here. And we don’t need to change the element width
because the row type for this section is the “Boxed” option. So you can see on the
demo ecommerce website that the width of the row over here starts over here and
ends over here. So it doesn’t go all the way from one side to the other. There is
a gap and spacing over here. So on the ecommerce website that we’re making, we
can leave the element width for the separator line as a “100%.” So
once you’re ready, go ahead and click on “Save Changes.” And then we can add some
additional terms and conditions and some more separator lines. So let me just do
this one more time with you and then you can do more on your own. So let’s click
on the “+” button right here and add a text block. And once you
get this popup, we can just go into this text block and delete this
and then type in our second terms and conditions. So again, the title is going
to be “Heading 4” and then you have your text down here. And if you want to
link an email address right here, you can just highlight the email address and
then click on the “Insert/Edit” link and you’ll get this po-up that says, “mailto:” and then the email address. And all you have to do is click on the “Apply”
button right here and then you’ll have the email address linked to your email.
And once you’re ready, go ahead and click on “Save Changes.” So if I’m going a little
too fast, you can always pause this section to write out your terms and
conditions. And once you’re ready and you want to create another
terms and conditions, what I want to do is add another separator
line. So you can click on the “+” button right here to add that separator line or
you can just make a copy of it by clicking on the “Clone Separator.” And
you’ll see that a second line shows up right here and we can just drag this
underneath the terms and conditions that we just created right here. So if you
want, you can pause the video and create some additional terms and conditions and
then just add these separator lines underneath each one until you create the
last one. And then you don’t want to add the separator line because it doesn’t
really make sense. And so pretty much, that’s all you need to do. And then at
the bottom of the page, what you want to do is add an empty space. So let me just
show you really quickly if I added one more terms and conditions. So I’ll just
make a copy of it and then just drag it underneath. So let’s assume that I have
three different terms and conditions. After this last one, I don’t want to
create a separator line. All I want to do is come down here and click the “+”
button and I want to add an Empty Space” element. So I’ll click on that. And once
this pops up, I’ll leave the height as “32px” and I’ll just click “Save Changes.” And
pretty much, that’s all I have to do to create my terms and conditions page. So
if you want, you can pause the video and create some additional terms and
conditions and just make sure that you add the empty space at the bottom. And
then once you’re ready, we are good to go and we can just click on the “Publish”
button. And once the page is published, we can go and check it out to make sure
that it looks correct. So click on “View Page.” And once the WordPress page loads,
this is what you should see for the terms and conditions page for the
ecommerce website that you’re building with WordPress. And you can see down here
I added a few different sections. And through the power of video editing, I did
update these sections so they look a little different. So if this is what you
see on the Terms and Conditions page, then we are good to go. And now we can
move on to the last few steps. And now what I want to do is show you how to
create the header menu for your ecommerce website. And you can see up
here that we have a few different links to different parts of your ecommerce
website. So if you want to learn how to create the header menu, what I want to do
is go back to our ecommerce website. And if we hover over our
website name right here, you’ll see this pop up. And what we can
do is click on “Menus.” And once you’re on the Menus page, what we want to do is
create a new menu. So we’re gonna come in here and type in the name for the menu.
So we’ll type in header. And what you want to do is click on this button that
says, “Create Menu.” And once your menu is created, you should see this section
right here and what you can do to add some header menu links is come over here
to where it says, “Pages.” And you should see a list of all your different pages
that you created right here. And what you can do is check these boxes for the
pages that you want to have a link to on the header menu. So what I’ll do is I’ll
check the Home page, the Blog page, the Shop page and then the About page,
Contact page and the Frequently Asked Questions page. And if you want to add
these items to your header menu, just check these boxes and then click on the
“Add to Menu” button. And you should see the items show up right here. And what
you can do is you can edit the name for these menu items if you click and expand
any of these. So if I click on the “Blog” tab right here, you can see that it says,
“Navigation Label.” And right now, it says “Blog” but if I want to change this to
something like fashion’s latest, I can just change the text right here. And now
the header menu is gonna have a link that’s called “fashion’s latest that’s
going to go to the Blog page instead, okay? So what you can also do once you
have all your items right here is you can click and drag these around to
rearrange these. So let me just do that really quickly and there’s really
nothing for me to talk about when I do that. So there was some awkward silence
right there. But now that I have this order right here, if you want you can
also come over here and you can add some blog posts or if you want to create some
custom links, you can always just go in here. And then you can type in the URL
for the link and then just type in the navigation label right here and then
click the “Add to menu” button right here and it’ll get added to your header menu
also, okay? And the last thing that I want to note for the menus is if you want to
have a submenu item, you can just indent this. And now the About page or this
about link is gonna be a sub-menu item of the Home menu item, okay?
So we don’t want any sub-menu items though on the demo ecommerce website.
So I’ll have everything lined up right here and this is the Header menu. So what you
want to do is come down to the menu settings and down here where it says,
“Display Location,” I want to make this the main navigation. So check this box. So the
header menu’s gonna show up on all of your different pages and posts. And once
you’re ready, go ahead and click on the button that says, “Save menu.” And once the
header menu is updated, if you want you can go and check out the ecommerce
website but I want to wait until we finish the next step. So what I want to
do right now is I want to show you how to create the footer menu for your
ecommerce website also. And you can have any links that you want down here. So if
you want to create a footer menu, let’s go back to our ecommerce website and we
should be on the Menus page right here. if you’re not, you can just hover over
“Appearance” and click on “Menus.” And you’ll come to this page. And what we want to do
is create a new menu. So right here you should see a link that says, “Create a new
menu.” Go ahead and click on that. And once you’re on the New Menus page, what you
want to do is type in a new menu name. So we’ll type in “Footer” right here and then
click on the “Create menu” button. And once the menu is created, again you should see
this section right here and what you want to do is come in to this tab and
select the pages that you want to add to your footer menu. So I’ll select the ” FAQ,
Privacy Policy, and the Terms and Conditions page. And I’ll just click on
this button that says, “Add to menu.” And once the items are added over here, if
you want you can click and drag these around to rearrange the order. And then
once you’re ready, come down to where it says, “Menu Settings.” And in the display
location section, what you want to do is check this box next to “Footer navigation.”
So this footer menu shows up on all of your pages in the footer. And then once
you’re ready, just click on the “Save menu” button. And once the footer menu is
updated, now let’s go and check out our ecommerce website to see what the
header and the footer menus look like. So what we can do is hover over our website
name and click on “Visit site.” And once your WordPress website loads, you should
see the header menu at the top and if we scroll down a little bit, the header menu
should turn to a background color. And you should still see the header menu be
we have a sticky header menu. And if we scroll down to the bottom, you should
also see a footer menu down here now. So if this is what you see, then we are good
to go and we can move on to one of the last steps which is making sure that we
have all the WooCommerce pages that we need in order to run transactions on our
e-commerce website. So what I want you to do is hover over your website name on
the upper left and click on “Dashboard.” And now what we’re going to do is make
sure that we have all the pages that we need for our WooCommerce website. So what
I want you to do if you’re on the WordPress dashboard is come down and
hover over”Pages” and then click on “All Pages.” And once you’re on the Pages page,
what I want you to do is check to see if you have thirteen published pages. And if
you do, then you’re on the right track and if you don’t, don’t worry about that
because I’ll show you the additional WooCommerce pages that you have to make
in just a few seconds. But first what I want you to do if you’re on the Pages
page is come down to this page right here called “Sample Page” and this was
created by WordPress when we installed WordPress in the beginning of our video
tutorial. So you probably don’t want this page. So what we can do is just click on
the “Trash” link to delete this. So go ahead and do that. And once the page is
deleted, now you should see 12 published pages and if you need to, you can pause
the video and check this list to make sure that you have all these different
pages. And if you’re missing some of these WooCommerce pages, what you can do
is go to the text tutorial on “How to Create an Ecommerce Website with
WordPress 2018” and on Step Number 26 right here, I do walk you through how to
create the additional WooCommerce pages but they should have already been made
for you automatically. But just in case, I do have the instructions right here, okay?
So let’s go back to the Pages page and one of the last things that we have to
do is set the terms and conditions page in our WooCommerce settings. So what I
want to do is just go back to our settings and make sure that all the
pages are set correctly, and then we’ll also set the Terms and Conditions page.
So let’s hover over WooCommerce and click on the “Settings” link right here.
And once you’re on the WooCommerce Settings page, what I want to do is just
make sure that all the WooCommerce pages are set correctly. So first let’s go to
the “Products” tab and click on that. And once you’re on this tab, just come down
to Shop page and make sure that the “Shop” page is selected here. And if you need to
make any changes, make sure that you come to the bottom and click “Save Changes.” And
once you’re ready, let’s go to the Checkout tab. And once you come to this
tab, come down to the Checkout pages and if you need, you can create the Cart page
and the Checkout page using the text tutorial but these pages should already
be selected for you. And all we have to do is come down to where it says, “Terms
and Conditions” and we want to come into this drop-down and find the “Terms and
Conditions” page and select that. And then we’re going to come down to the bottom
and click “Save Changes.” And once the settings are saved, now let’s go to the
Accounts page. And once you come to this tab, all I want you to do is come to the
My Account page and make sure that the My Account page is selected right here.
And if you have to make any changes,just make sure that you come to the bottom
and click “Save Changes,” okay? So that’s all we have to do to set our WooCommerce
pages. And now we can move on to the last step. So what I want you to do is go back
to your WordPress dashboard. So let’s click on this link right here. And once
you’re back on the WordPress dashboard, we’re actually done creating our
e-commerce website. So the last thing that we have to do is just publish our
ecommerce website with WordPress. So if you see this notification up here, what I
want you to do is just click on this link to publish your website for the
rest of the world to see. And once your website is published, you should see this
notification right here that says, “Congratulations. Your site is live.” And we
can go and check it out one last time together. So you can click on this link
right here or you can hover over your website name and click on “Visit Site.” And
once your website loads, let me be the first to say, “Congratulations on learning
how to create your own ecommerce website with WordPress!” And if you have
any questions or comments, leave them in the comment section below. And make sure
to give this video a big thumbs up and also make sure to subscribe to the NYC
Tech Club YouTube channel because we’re always coming out with new videos just
like this. So again, I want to say congratulations on learning how to
create your own ecommerce website with WordPress. And make sure to give this
video a big thumbs up, like, comment and subscribe, and I’ll see you
in the next video. And there you have it! Congrats again on creating
your own ecommerce website with WordPress. Make sure that you check out
those video links below and there’s also going to be a link to the NYC tech club
website. And that’s going to bring you to a page with some tips and
recommendations on how to make your ecommerce website even better. So make
sure you check that out and make sure to give this video a big thumbs up. Click
that “Subscribe” button wherever it is. Congrats again, and I’ll see you later! [Music]

Only registered users can comment.

  1. Thanks a lot sir. With your guide I made my website www.shaanunitex.com.. Now UNABLE TO UPLOAD IMAGE – – HTTP ERROR IS SHOWING. PLZ HELP ME OUT

  2. How do you adjust the pages so its fits perfectly with mobile view? Right now it's a little messy =) and thanks for the great tutorial btw! =)

  3. When I got an order, there is an "order number" previously used with this theme, How can I re-count orders for my new web to start from number 1 instead of 3459 ??? and THANK YOU, you are GENIUS.

  4. @nyctechclub I built my first site with your original shop shop tutorial and it was amazing. Thank you for putting these out, much love and appreciation from Canada. I went to make a new site with shopkeeper v.2.6 should i load they're demo content ?

  5. Thanks for this tut, can we make footer like flatsome theme? this theme footer is almost nothing.

  6. Hi, can we intigrade aliexpress woo plugin also? How about tracking code or number for customers? Thanks

  7. The plugins required for this tutorial to work crashes my entire site… Can someone please tell me how to resolve this issue? I already paid for the theme and all.

  8. Hello I'm trying to access permalinks in setting but I get a fatal error about memory allocating…not sure were to go from here

  9. Hey, my name is Gus, I follow and subscribe to your YouTube Chanel and even follow your work. I recently built an ecom website using the CLAUE Theme. However the site is not converting like I want it to: godsfamilyfashion.com could you assist or provide some insight on changes I could do to not only make it pop but to convert as well? I am willing to pay. Thank you for any advice or help you could provide.

  10. Straight up this is the best tutorial on youtube. You deserve way more subs. Keep up the incredible work and the easy to follow tutorials and I can guarantee your youtube will blow up eventually!

  11. So, time for an update on my website. I have been online for 4 months, and was coming to the sad conclusion that I just had a bad idea because absolutely nothing happened. But then I got a message from someone saying that PayPal was blocking all efforts at making the transaction. So maybe I missed a step during the setup… Pay Pal says I first need to get API credentials, either an API Certificate or an API signature, depending on the requirements of the shopping cart. So, can you tell me which of these is required by the shopping cart in the Shopkeeper theme? The man from PayPal outlines a number of subsequent steps to take, but this is what I need to start, apparently…

  12. Jameson, great tutorial! Excellent job, man! I was a bit critical of this video at first because things were not showing where they should; names of buttons were different, etc. But all it required was a bit of patience and perseverance on my par – and everything worked fine! One week later, I am with a brand new, gorgeous website. It is very important for me to make clear that without your directions, I would not have been able to go even half the way! For example, I would've spent weeks just researching how to input Variable Products. Great, great – very satisfied!!!

  13. Please help me! I want to start an Ecommerce website in Denmark, which means it would be ".dk" instead of ".com". Can I still make that work with hostgator? Awesome video btw, extremely helpful!

  14. Excellent video!! Following this video is allowing me to create a website for my wife's new business. There are, however, some updates that need to be done. For example; The "Get Bowtied Tools" plugin has been discontinued. Woocommerce no longer offers "Live Rates" as a shipping option. But don't let these things deter you. I was able to figure them out pretty easily.

  15. Good video, but so much has changed since you created the video a year ago (2018). It would be great if you really did a 2019 video and described in your headline. The plugins are not the same, the Shopkeeper doesn't appear in the dashboard navigation, you can't access certain things as described in the video. I'm a newbie, and I can't "figure things out" so for me a new true 2019 video will be helpful to follow. Thanks for understanding, hope you will publish a new video soon seeing how I now have a $70 theme I paid for and currently can't use.

  16. Hey Jameson. I have created a really awesome website thanks to your detailed tutorial! I do have one question however. I created the website on my laptop, and when i got it looking just how i wanted it, i went ahead and published it. the website looks, and works awesome on a laptop or desktop, but if you look at it on your phone, it shows a bunch of code and all the content is s scattered around out of place. If you could please take a look and tell me how to fix it or what to try that would be much appreciated!

  17. You've focused on creating new pages but how do you use the layout variations that are provided with the theme? Do you edit the variation you want and delete the others? If you do that can you save a copy of the original in case you want to go back to it later? I think I'm missing the point of having variations and I can't find anything in the theme documentation that explains how to use them. This isn't to say that your video hasn't helped a lot—it has 🙂

  18. Hi There, After I installed the wordpress i received an Email with the Login info for WordPress, however when i click on the Admin URL link, it take me to a page where it says server not found,

    anyone can help guys!
    please…

  19. I dont understand something, should i have a wordpress active premium or business plan? or is not neccesary if im paying the shopkeeper theme at 69$ ?

  20. how to make the product gallery below the main product image? Currently, the product gallery is next to product image, not below it

Leave a Reply

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