Storefront: How To Make An Ecommerce WordPress Website – On A Budget 2016
Articles,  Blog

Storefront: How To Make An Ecommerce WordPress Website – On A Budget 2016


Hi, everyone. I’m Katrinah and in this video,
I’m going to go over how to create a beautiful ecommerce WordPress website using the free
Storefront theme by WooThemes. So, I received quite a few requests specifically
related to the Storefront theme so thank you all for the great suggestion. If you requested
a tutorial related to the Storefront theme specifically, this video is for you. So, let’s
go ahead and take a quick tour around ecommerce WordPress website we’ll be creating in this
video. So here we are on the homepage of the ecommerce
WordPress website we’ll be creating in this video using Storefront theme. At the top we’ll
be adding an email opt-in form so you can start capturing leads directly from within
your website and homepage. And then underneath the email opt-in forum, we’ll have our header
section which includes the standard header details like the title or the logo, menu navigation
items, and the search box. And in this particular theme, we’ll also be
adding some ecommerce feature such as the shopping cart and items in the cart. Underneath
the header section, then we’ll have our tagline and this will give your visitors a really
quick and easy way to understand exactly what your website is about when they land on the
homepage of your site. And then underneath the tagline, we’ll have
the various home page sections including product categories, featured products, and on sale
items. Now, it’s important to know that this particular theme is fully customizable on
the homepage so you can add other sections if you like and I’ll show you in this video
tutorial how to add other sections as well. At the bottom, we’ll have our footer section
and this also has customizable content. In this particular demo, I’ll be including a
variety of links, some social network icons so anyone can easily connect with me on the
social web and the search box so that my visitors can easily find whatever they’re looking for
on my website. Okay, now let’s take a look at some of the
internal pages of the site, starting with the About page. The About page, across the
board, is one of the most trafficked and visited sites on any website so it’s important to
spend a little time creating a good About page. Here I’ll show you how to add some text
and an image on the About page. And that’s pretty much all I’ve added here
but I do want to just point out this is a really important page because again, this
particular page, data shows, is the most frequently looked at page on pretty much every website.
Moving on, we have our Blog page. This is a standard blog archive page with all the
blog post showing up one by one on top of one another. And when we click on the blog
post, the single blog post, here we’ll see at the top the published date, the author,
the title, followed by an image, if you include an image on your blog post.
On left-hand side we have some links related to comments and then, we’ll have the actual
blog post itself. Followed by, at the bottom, we’re going to add an email opt-in form because
most likely, if someone has made it to the bottom of your blog post, they are interested
in other information you have to share and this is a really good opportunity to capture
their email so you can start communicating with your visitors directly via email.
Underneath the email opt-in forum, here we have our social sharing feature so anyone
could easily share your wonderful content across the social web either to Facebook,
Twitter, Pinterest, or some other social network. Then, last but not least, we’ll have our comment
section so anyone can leave a comment on your blog post.
Note that on the right-hand side, this is also customizable content here. We have our
sidebar. I’m going to be keeping it really simple, this demo, and I’m just going to be
adding a search box. Once again, that awesome email opt-in form and then I’ll also be adding
some social network icons. This is customizable, I’ll show you how to add other content if
you choose to add other content as well. Last but not least, we have to more pages
to go, we’re going to be creating a Free Recipes page. Of course, you can create any page you
like. But this one, I’ve added a sort of pseudo landing page. It’s not really a landing page
because a real landing page, we don’t have any of these header section stuff.
But I have the call to action here which is: Get your free recipes. Followed by an image,
this rather large. You should probably reduce the size of this giant image. But I do want
to point out, most importantly, we have the three reasons why someone should sign up for
my email opt-in form. And then, here we go, voila, we have the email opt-in form down
below so you can, once again, capture leads directly from within the website.
Last but not the least, our Contact form. This will give your visitors an easy way to
contact you directly from within your website. It’s a form, so you have your name, your email,
subject, and message, and then they click on this button. It says Send and then you
receive your email message. Going back to the homepage, I want to point
out that this is a responsive, mobile-friendly website which is really important these days
because we’re all looking at websites on our mobile devices, our phones, and tablets, and
all other kinds, maybe even watches now these days.
So good news, this is a fully responsive theme which means that it will resize depending
on what kind of screen size someone who’s viewing your website on. So as a quick demo,
the responsiveness of this particular theme when I take the bottom right-hand corner and
I reduce it by moving it to the left-hand side, now we can see everything stacks up
really nicely. The menu, now a drop-down menu, so it’s really easy to view.
All the other content is also stacking really nicely on the page right on top of the other.
So that’s what we’re for to as a responsive website. It responds to the size of your screen.
So you’re good to go in terms of mobile-friendliness with the Storefront theme by WooThemes.
So this is where we’re headed toward in this video, we’re going to be creating an ecommerce
WordPress website using the Storefront theme by WooThemes. Let’s get started.
So before we get started: How much is this website going to cost? Well, we need several
things. Number one, we need a domain name and we need web hosting. In this video tutorial,
I’m going to be using HostGator.com for both the domain name as well as the web hosting.
And I’m also going to be using a special coupon to get an extra amount off of my order at
HostGator. That web hosting coupon is WPCOUPON25 when I sign up for six months or more of blog
posting or you can use the other coupon code 1monthbonus if you simply want to sign up
for month to month web posting at HostGator.com. So if you decide to go at HostGator and you’d
like to get some extra discount off your order, be sure to use either wpcoupn25 or the 1monthbonus
coupon to get an extra amount off of your order. I do admit, I do receive a small referral
from HostGator when you use either of my coupons, so thank you in advance for your support and
helping me to continue to create these free WordPress training videos.
Once you have your web hosting as well as the domain name, the next thing we’ll need
is a theme. And in this video tutorial I’m going to be using the Storefront WooThemes
free WordPress website theme. And last but not least, once we have the domain name, web
hosting, and the theme, the other thing that we’re going to need to create this beautiful
WordPress website is some time. So I’m estimating it should take roughly about two hours to
go through the video so please set aside about two hours to watch the video and to go through
the steps to build out your website. So, end sum: The total to get started to build
this beautiful ecommerce WordPress website is less than $25. Again, using either coupon
code WPCOUPON25 when you sign up for six months or more of web hosting at HostGator.com or
using the 1monthbonus coupon code when you sign up for month-to-month web hosting at
HostGator.com. So what are the steps to build out this website?
Well, there’s three steps. Number one, we need to get our domain name as well as web
hosting at HostGator. Number two, we want to install WordPress. And then number three,
we want to build out the website. So let’s go ahead and take care of step number one,
which is getting a domain name and a web hosting by heading over to HostGator.com.
Here on HostGator.com, the first step is to get started now by clicking on this button
that says Get Started Now! And that would bring us to the variety of different web hosting
plans we can choose from. There’s three different plans: the Hatching Plan, Baby Plan, and the
Business Plan. If you’re just getting started with your website,
most likely, either the Hatching Plan or the Baby plan would be a good fit for you. The
main difference between these two is that with the hatching plan, you can only host
one single website domain whereas with the Baby Plan, you can host an unlimited number
of domains. I prefer the Baby Plan so I’m just going to
go with that. But if you know you only have one website domain, supposed, then you can
save some money by going with the Hatchling Plan. So I’m going to click on Sign Up Now!
under the Baby Plan. And then I’m going to add my new domain right here. If you already
own a domain, you can click on this tag right here.
I’m going to register a new domain. And for the purpose of this demo, I’m going to put
something super random in there just so that it’s available. And then, of course, it’s
available because it’s such a random name here, so I’m just going to go with that. I’m
going to scroll down, here you can choose your hosting plan. As noted, I chose the Baby
Plan and there’s a number of different billing cycles you can choose from.
The more months you sign up for, the more of the discount you will receive. So I’m going
to sign up for six months to get started and then you want to add your username and the
security PIN. Scroll down, you want to enter your billing info. And then here by default,
a number of additional services are usually added here on the screen.
I’m going to uncheck these and come back to these in just a moment. I usually don’t use
any of these but I do want to make a special mention about the domain privacy protection
because I really like that feature. Then I’m just going to scroll down. Here we have the
coupon code by default. You will receive the 20% off but I have a better coupon to share
with you. So if you like more off your order, then you
can use the exclusive coupon I have called WPCOUPON25 and here we can see it’s originally
$60. And when we use this coupon, WPCOUPON25, and validate it, we can see now we’ve saved
a little bit extra of the discount of the order. Now it’s $54.
Of course, this is getting started with a six-month plan. If you want to go month-to-month
instead, you can use a different coupon code. So I’m just going to scroll up here and show
you that you can really start this website for pretty much less than $15 if you want
to just get started. So when I go with one month at a time with
Baby Plan, then I scroll down right here and then I use a different coupon code. The coupon
code is 1monthbonus and then I click on Validate. Here we can see that we can get our website
up and running for less than $13, which is pretty amazing.
So whether you use WPCOUPON25 when you’re signing up for six months or more or you use
the 1monthbonus when you’re signing up for web hosting month by month. Either one will
give you an extra discount off of your order. Now going back to the domain privacy protection
here, I always do like to get this because here’s the thing: If you don’t get this, then
all of your details that you put up here, like your email, your name, your address,
your phone number, some of this info is going to be included in a public database. It’s
available to pretty much anyone on the Web. And I prefer to keep all of this information
private so that my phone number and my address and things like that are not on the internet.
So for that reason, I always invest in the domain privacy protection for $10, just under
$10 a year. So I’m going to add that right here. And that’s going to make our order go
up just a little bit but it’s still under $25 which is pretty awesome.
So you just want to review the details of your order right here, then you want to scroll
down, click on this box right here that says you have read and agreed to the terms of service.
Then you want to click on this button to checkout now.
So once you click on create your account, you get this page which will thank you for
your order and will tell you to go check your email for information related to logging in
to your web hosting account. So I’m going to go check out my email.
And here, we see my email account. Here’s the email from HostGator with my account info.
So I’m going to click this email to open it. I want to point out two things. Number one,
the first thing that they’ll share with you in the email is the billing system link. So
if you want to check out any info related to your billing, you can go ahead and click
on this link and use the password that they give you.
And then right below that, you’ll see that there’s a link for your control panel with
your username and a temporary password. So I’m going to copy this password here. And
to log in to your control panel, you’re going to use this link. So this is a really good
email to keep in a safe place for future reference because you will be needing this information
as well as the link to the control panel to log in to your HostGator web hosting account.
So I’m going to click on this link here. And then here is my username. You want to type
in your username here that was found in the email and then you want to add your password
right here as well. Once you have that set up, you want to click on log in to log in
to the control panel of your web hosting account. So here we are on the HostGator control panel.
The next step that we want to do is step number two. We want to install WordPress and thankfully,
with HostGator there’s a really easy way to install WordPress using their simple wizard
script. So I am going to scroll down to where that is located. You want to scroll down to
where it says Software and Services. And you’re going to find this icon that says
Quick Install, so this is what we’re going to use to install WordPress really easily
in HostGator. We’re going to use this Quick Installing so I’m going to click on that.
And once I click on that, you’ll note that there’s all these different kinds of software
listed here on the left-hand sidebar. So right at the top it says Blog Software and there’s
a link here for WordPress. This is what we want to install so I’m going to click on that.
Now we arrive on this page and we can see at the time that this is recording, the most
recent version of WordPress is version 4.0.1. So I’m just going to continue by clicking
on this button here that says Continue. And here you’ll get a panel where you can decide
which domain to install WordPress to. So I’m going to add the domain name where
I want to install WordPress and then I’m going to fill out this information below, starting
with the Admin Email. So I’m going to add my admin email right there.
Next, you want to give your new website a title, so I’ll just call this a name of my
domain. And then also, you want to add an Admin Username. Now, note that this is an
important step for website security. You want to make sure that you do not use an admin
that is something like admin, support, or administration.
These three names; admin, support, and administration, those are really the first names that hackers
will try when they’re attempting to break in to your WordPress website. So it’s important
that you use an admin username that is more unique than admin. So for this instance, I’m
just going to add my name right here. You can also add your first name and last name.
I’m going to leave that empty and instead I’m just going to click on Install to install
WordPress. Congratulations, your installation is ready.
So, you can access the installation of your website by clicking on this link here. And
also note that here is the admin area login URL that you would use in the future to access
the login panel to access your website in the future. You want to make a note on this
link here. It’s usually your domain name followed by wp-admin. So that’s an important link to
remember as well so that going forward you can easily log in to your WordPress website.
Also, make a note of your username and password. This is what you will also need, of course,
to log in to your website when you click on this link. So I’m just going to highlight
this temporary password here and copy it. And then, I’m going to click on this link
here to log in to my new WordPress website. So here we are on the login screen of our
WordPress website. To log in, you want to enter your username in the username field
and the password in the password field. And then you want to click on this button, it
says Remember Me, so that the next time you come to WordPress, your username and password
will be remembered. In the event that you forget your password
in the future or perhaps even now, you want to click on this link here that says “Lost
your password?” And WordPress will send you a password reset to the email that you used
when you were creating your WordPress website. So for the moment, here I have my username
and password. I’m going to go ahead and click on the login button to log in to the website.
So in your first login to your WordPress website, you’ll see the Dashboard. This is your at-a-glance
view of what’s happening on your website. You can see all of the different stats for
your website so far. So we see when we install WordPress we have one post, one comment, and
one page that comes with our WordPress installation. Also note that if you just installed WordPress
you also see this message right here that says “Welcome to WordPress!” with a number
of links to get you started. I’m going to be covering each of these links later on in
the video so I’m not going to be looking at these right now. Instead, I’m just going to
turn this section off altogether by going up to the top right-hand corner here and clicking
on Dismiss. You can easily see that view. Again, if you
see that welcome message once you’ve dismissed it, you can see it by clicking on Screen Options.
Then, you’ll see here it is right here, Welcome. And when you click on that box, it reappears.
So these particular boxes at the top will determine what sections are viewable on your
Dashboard. So I’m just going to collapse the Screen Options by clicking on Screen Options
one more time. And I just want to note that you can customize your Dashboard if you like
by simply moving these sections around. So if you prefer to see the drafts here on
the top left-hand side, just drag it to the left. So once we take a look at the Dashboard,
let’s take a look at what our WordPress website looks like right out of the box when you first
install WordPress. So to view your site, you want to go to the
top, hover over the website name, the top left-hand corner, and then click on Visit
Site. So here we are on the homepage of our WordPress website using WordPress version
4.1 and the [00:18:42] and theme that comes with your WordPress installation called 2015.
This is a beautiful blogging style for theme. In another video, I showed you step-by-step,
from scratch, how to completely customize and set up this beautiful blogging style called
2015. So if you like to check out the other video, I’ll be sure to drop a link down below
so you can check it out. In this video however, we’re going to be creating
an ecommerce WordPress website using the beautiful Storefront theme by WooThemes. So this is
a look of where we’re headed in this video. By the time we’re finished with this video,
we’re going to have a complete ecommerce WordPress website set up using the beautiful WooThemes
theme called Storefront. And this is what it looks like.
So the first thing we need to do, going back to our website, is we need to install the
Storefront theme. So going back to the Dashboard, I’m going to hover over the website name in
the top left-hand corner and click on Dashboard. Then, I’m going to scroll down to where it
says Appearance. Hover over Appearance and click on Themes.
Here, we’ll see the theme that is currently active, it’s the 2015 theme and when we installed
WordPress it also came with the 2014 theme as well. I also have another video on this
particular theme. If you like to see how this one is set up for 2014.
To move forward with Storefront however, we need to install a new theme. So I’m going
to click Add New here at the top. And then, I’m going to do a search for Storefront by
coming over here to the search box and typing in Storefront.
Here we can see it’s the first one on the left-hand side that pops up. You can view
the details by clicking on Details & Preview. And you can see here in the left-hand side,
it says Storefront by WooThemes. And there’s a preview here on the right-hand side. Of
course, it won’t look anything like this. This is not really set up. It’s kind of a
preview but not really. What it really looks like is this thumbnail
version right here on the left-hand side. So this is the theme we want to install. I’m
going to click on Install at the top to install the Storefront theme.
Once the theme has been installed, I’m going to activate it by clicking on Activate. Once
the Storefront theme has been activated, you’ll have a message here that says “New theme is
activated,” and you’ll see it right here where it says “Active: Storefront.” And you’ll also
see a message at the top that says “Thanks for choosing Storefront. You can read hints
and tips on how to get the most out of your new theme on the welcome screen.”
So you can either click on this link here that says “welcome screen” or you can click
on this link here that says “Get started with Storefront.” I’m going to click on this button
here that says “Get started with Storefront.” And here, you can read a little bit more about
Storefront at the top and then I’m just going to scroll down and can see here’s a number
of different plugins that we need to install in order to make this work, starting with
WooCommerce. So we can see the first step is we need to
install WooCommerce, so I’m going to click on this link right here that says Install
WooCommerce. Once WooCommerce has been successfully installed, we can activate it by click on
Activate Plugin. And then once WooCommerce has been installed and activated, we’ll have
another button here that says Install the WooCommerce Pages.
So I’m going to click on this button right here that says Install WooCommerce Pages.
Once you click on Install WooCommerce Pages, you arrive on this page that says “Welcome
to WooCommerce 2.2.” You can read more about WooCommerce about this page.
Instead, I’m going to go straight to the settings by clicking on this link here that says Settings.
You can also find WooCommerce settings by going to the lefthand side bar, hovering over
WooCommerce and clicking on Settings in the menu right here. I’m going to click on Settings
right here to go to settings. And here we see at the top, we have our General
Options with the Base Location. So the first thing you want to do is you want to set your
base location. I’m going to set mine as the US so I’m going to scroll down here. I’m in
California so I’ll use California. I want to sell to all countries so I’ll leave it
set at this. I want to note that it’s really cool with
WooCommerce because if you have any questions about what each of these are about, you can
simply click on the question mark here. When you hover over the question mark, you get
a little tool tip and it will say exactly what it does.
So for example with base location, when I hover over the question mark, it says “This
is the base location for your business. Tax rates will be based on this country.” So go
ahead and click on these question marks to find out what each of these different items
refer to. I’m scrolling down here. The other thing I
want to change is my currency option. The default currency is set to Pounds Sterling
but I want to change that to US Dollars, so I’m just going to scroll down here and click
on US Dollars. And then, everything else looks good. I’m just going to come to the bottom
and click on Save Changes to save my changes. Once we [00:23:15] you see that there’s a
number of other tabs related to WooCommerce that we also need to configure and I’ll be
doing that later on in this video. There’s also a great resource related to everything
WooCommerce directly on the WooThemes site and I’ll be sure to drop the link down below
so you can check out all of the WooThemes documentation at WooThemes.com.
Coming back to our Storefront website, the next step is I want to start adding the different
sections on our homepage so that we can start creating our homepage that will look something
like this. So we can see here at the top, we have our logo or our title and tagline,
and we have our menu items as well as some pages.
So Next up, let’s add our logo as well as add some pages so we can set up this header
section with the menu navigation items. To set up the logo, we want to go back to our
website. We want to go to the dashboard so make sure that you’re on the dashboard by
clicking on Dashboard. And then, we want to scroll down to where it says Appearance. Hover
over and Appearance and click on Customize. Here on the customize panel, there’s a number
of options on the left-hand side that you can adjust and change in order to change the
appearance of your WordPress website. On the righthand side, you’ll see a preview panel
of what those changes are looking like in real time.
So starting at the top, we have our site title and the tagline. I’m going to click on this
[00:24:34] right here and here we can see, as it says. You can add your Site Title or
your Tagline. I’m going to drop in the tagline right there by just posting a tagline right
here. Now, not all changes are going to be completely showing up here because we see
that I’ve added the tagline and it’s not showing up. But rest assured that on the front website,
when we take a look at it in a moment, it will be appearing.
So next, we can just click on Save & Publish to save that change. Then, I’m going to move
on to the background, so I’ll just close this box right here and open up the next box. This
Background Image refers to the overall website. So if you like to add an image on top of the
website here, you can do so. I’m going to keep mine simple so I’m just
going to create a white background so that it makes me fun and the text really easy to
read. Sometimes with background images, it just makes it hard to read the text. So that
is something to keep in mind when you are thinking about whether or not to use a background
image. The Background Color, I’m going to click on
Select Color right here. We can see by default there is a kind of off-white color right here.
So I want to keep this really clean, very clean and light look. So I’m going to use
totally white right here by clicking on this white box. And here, we can see the color
code changes in this box right here. If you’d like to add a different color for
the background, you can just slide this little cursor around right here. And you can see
as I do so in real time, the background is changing. Once again, just keep in mind that
you want to make sure that the words are easy to read. And for most websites, that means
pretty much a white background or something close to a white background.
So I have my background set. Once again, I’m going to click on Save & Publish to save that
change. And then, moving on to the header section right here, this is where you can
drop a header image or background color to the top section of your website. So everything
here that we currently see in this kind of gray-black color, you can add either a background
image or a color. So for example, if you do decide to use a
header image, you want to make sure that the dimensions are 1950 pixels wide and 250 pixels
tall, as it says right here in this note. I’m not going to add an image across the entire
front section. Instead, in one moment, I’m going to be adding a logo. But right now,
I want to change this background color to be simply white.
So to make the background color white, I’m just going to click on this button here that
says Select Color. Go to the bottom right here, click on the white color. And then we
can see the entire top section has now turned to white. Then, I’m just going to scroll down.
I’m going to keep the text color as it is right here. We can change that later if we
want to. And for the link color, because now we can
see I cannot see the links, white on white does not work very well, I’m just going to
change the link color by clicking on Select Color and then you can change it to anything
you like. So for the moment, I’ll just put it in this kind of gray color right here.
You can change it to any color you like, once again, by just clicking in this area right
here to find the link color that you’d like to have displayed on your site. So I may come
back to this later but for the moment I’m just going to make it this gray on white color.
And then, I’m going to click on Save & Publish up above to save that change.
Next, moving on to the footer, I’m going to click on the footer right here. We can see
by default, there is this gray and this purple color. When I scroll to the bottom, we can
see how that is lining up. So you see, the link color is purple, the text color is gray,
and then it’s kind of like this background color of another shade of gray.
So jumping over to our finished site here, when I scroll to the bottom, this is where
we’re headed toward. I’m going to be creating this kind of like teal green background with
white print. And then the actual link color is kind of just like a grayish white color
as well. So to make the changes so that it looks like this, you can just go ahead, go
back to your panel right here for the footer. You want to change the heading color so I’m
just going to click on Select Color. Choose whatever color that you’d like. I’m going
to choose white. Then, I’m going to scroll down for the text color. I want this text
color to also be white, so I’m going to click on white. Once again, if you want to change
it to another color, go ahead and do so by clicking on these buttons right here. I’ll
just leave it as white. For the link color, I’m going to click on
Select Color once again and I’ll think I’ll just choose a shade of gray right here. So
I’ll just pop in the color here to add a kind of a gray color. And the for the background
color, I’m going to click on Select Color and once again I’m going to choose the green
color that I’d like to have displayed down below.
So now you can see when I pop that color in, it turns into this kind of teal green color
which matches the color that I’m going for on the finished site right here. So once you
add all the different footer colors and heading colors and all these different elements here
within the footer, you just want to click on Save & Publish to save the changes for
the footer. Next step, we have the typography. If you’d
like to change the colors of your typography, the link color, text color, or heading color,
you can do so here. So starting with the link color, I’m going to click on Select Color.
I’m going to choose the color that I’d like to have displayed instead. And then once again,
we can see in the preview panel immediately how that change looks like in real time.
Then, I’m going to scroll down and change the text color and the heading color. And
once you have those changes set, go ahead and click on Save & Publish once again.
And then we move on to the buttons. Once again, by clicking on this [00:30:08] right here.
In this screen, you can customize the look and feel of your website buttons. So for background
color, I’m going to make it an orange color that would go well with my teal color right
here. Then for text color, I’ll keep it as white. That looks good.
The alternate button color, you can add an alternate button color if you like as well.
I’m just going to keep mine the same though to keep it consistent, so keep it as orange.
And then once again, if you want to add an alternate button color, you can do so right
here. I’ll leave it as white. Finally, I’m going to click on Save & Publish
to save those changes. I like to save my changes as I go so that in the event anything happens,
I’ve at least saved my most recent change that I made so I don’t have to do it all over
again. The layout, I’m going to click on this. Here,
if you want to have a left sidebar, you can click on this one right here. I’m going to
keep it with a right sidebar, so I’ll just leave it as it is.
And then, going to widgets, this will open up your widget panel. I’m going to come back
to this a little bit later in the video so I’m not going to touch on that right now.
Instead, I’m just going to move forward and click on Static Front Page.
Here on the panel of the Static Front Page, we can see that our latest posts are being
displayed on the home page. In this particular website however, we want a static page. So
I’m going to click on Static Page. The only catch is that we have not yet created any
pages. So when I click on Front Page, for example,
we see we have a really limited selection of pages and definitely not the page we need
or want. So we’ll have to come back to this particular section later after we’ve created
the pages that we need for our website. So for now, I’m just going to click on Save
& Publish to save all of the changes we’ve made to this customizer panel right here and
we’ll follow up, once again, a little bit later on the video with some of the other
options that we will set and configure a little bit later.
So for now, let’s just close this by clicking on the X. And then, I’m going to go back on
the homepage by clicking on my name right here to visit the site. And here we can see
we’ve got some of the changes implemented, so that’s looking a little bit better. We
see we have our title and our tagline. Now, note that if you’d like to include a
logo instead of a title and a tagline, you can do so by activating the Jetpack plugin.
So, I would like to do that because when I go to my finished site over here, we can see
that I have a logo instead of a title and a tagline.
So to add a custom logo to your Storefront WordPress website, we want to go back to the
dashboard by clicking on Dashboard. Then, I want to go down to plugins. Hover over Plugins
and click on Install Plugins. You should already have your Jetpack plugin installed when you
installed WordPress. This is a plugin that comes with your WordPress installation.
But in the event that you don’t see it here in the line-up, if you don’t see “Jetpack
by WordPress.com,” then you want to add it. So to add it, you just want to go to Add New
underneath the Plugins. So I’m going to click on Add New. Then, you want to do a search
for Jetpack over here on the right-hand side. You’re just going to click on Jetpack and
then here you’ll see it. It’ll say “Jetpack by WordPress.com.” You
want to install and activate this plugin. Here, we can see I’ve already installed it
so I’m good to go. So I’m just going to go back to my plugins over here where it says
Installed Plugins. And we can see at the top that it says “Your Jetpack is almost ready!”
But in order to actually make this work and connect it, I need to connect it to WordPress.com.
So here, we see when you click on Connect with WordPress.com, it will send you to WordPress.com
where you can create a website. However, of course we don’t need to create a website because
we are already creating our self-hosted WordPress website, so we don’t want to do that. All
we need here is a WordPress.com account, a username, and a password.
So to get to that page, I’m going to click on Log In right here at the top to log in.
And I already have a username and account. However if you don’t have one at the bottom,
you’ll see there’s this link here that says Register. So I’m going to click on Register
right here which brings us to the signup page of WordPress.com.
Now, note that this particular section here is to once again create a free WordPress.com
website which we do not really need or want. So here in the fine print at the bottom, it
says “If you don’t want a blog, you can sign up for just a username.” So this is the actual
link that we need. So I’m going to click on this fine print link at the bottom, sign up
for just a username. And here, you can create a username simply
by filling in your email address, creating a username, creating a password, and then
clicking on this button that says Sign Up. Once you’ve had that all set up and ready
to go, once again, this is a free WordPress.com account, then you can go back to the Jetpack
plugin. So I’m going to go back to my WordPress website
once I’ve created my WordPress.com account. And then back on our website, when you click
on this button once again, Connect to WordPress.com, it will bring you to this page where you can
connect your website with Jetpack and with WordPress.com. So fill in your username and
password here and then you want to click on this button that says Authorize Jetpack.
You’re fuelled up and ready to go, Jetpack is now active. Now, you can browse through
each of the Jetpack features below to activate or deactivate those and to check them out.
So there’s lots of different features that are included within the Jetpack plugin. I’m
going to show you some of the top ones that I usually install on every website.
So when I go over to the left-hand side, I’m going to click on Settings. And here, I often
use Jetpack comments and Jetpack sharing features. So to find those, I’m just going to scroll
down here and I’m going to look for Jetpack Comments which are right here. I’m just going
to click on Activate to activate Jetpack Comments. Once Jetpack Comments are activated, the other
feature that I like to use are the Jetpack sharing features. So here it says Sharing.
I’m going to click on Configure to configure the sharing features. This particular feature
within Jetpack is really great because what this will do is it will give your visitors
an easy way to share your content across the social web, either to Facebook, Twitter, or
some other social network. In order to activate this, I’m just going
to drag the particular social networks that I want to have displayed here. So I want to
enable anyone, for example, to be able to share to Facebook and to be able to share
to Twitter, be able to share it to Google+. And then you just want to choose any other
social networks you like. If you like to add any more button over here,
you can do so. If I want to add Reddit, I’ll add Reddit and Tumblr and perhaps Pinterest.
I’ll add those here. And then here, we can see the live preview. We’ll have three buttons
right here; Facebook, Twitter, and Google+. And then the More tab. And when anyone hovers
on top of this, it will give a dropdown box where these other three social networks will
be displayed. Then I just want to scroll down. I’ll keep
the button style as Icon & Text. It will look exactly like this right here. And I want to
show these buttons on my posts. I don’t like to put these sharing buttons on my pages because
those are static pages. I prefer simply to keep my sharing features on my blog post,
so I’ll leave it as that. You can add your Twitter site tag if you’d like right in here.
And then, I’m just going to click on Save Changes to save the changes.
Once the settings have been saved, Next up, let’s add our custom logo to our WordPress
website by going down to Appearance. Hovering over Appearance and once again click on Customize.
Now once we add the Jetpack plugin to our WordPress website and activate it, we can
see that by default, the logo is now showing up right here, which is really great.
So I’m just going to open up this panel and here we can see we have a new feature that
we can add, which is to add our custom logo. So I’m going to click on Add Logo right here.
Then, I’m going to choose Upload Files and Select Files. And I’m going to choose the
logo file image that I would like for my logo. So I’m just going to click on logo right there
and click on open. And once the image has been uploaded to my WordPress website, it’s
always a good idea to give your image a title and an alternative text. So I’m going to add
in logo title and a logo alternative text. And then, I’m going to click on this button
here that says Set as Logo. Once the logo shows up here, you can click
on Save & Publish to save this particular change. So once the change has been set, we
can close this box by clicking on the X box right here. And then, I’m going to go check
out the site by clicking on Visit Site in the top lefthand corner.
Now we can see, here we have our logo as well as our website, our homepage right here. It’s
looking okay slowly, step-by-step. So the next step is I want to change the menu items
right here. We need to add some pages and also, I want to set these so that they’re
higher up on the page, in the other menu navigation area right here.
Because when we look at the end result over here, we can see here, I have my logo and
my menu items lined up on the same line. So to set the menu navigation area, the first
step is we need to create some new pages for our WordPress website, starting with the About
page. So to create a new page, you’re going to go
back to your dashboard by clicking on Dashboard. Then here on the Dashboard, the next step
is to create a new page by either going to the top, hovering over + New and clicking
on Page. Or, on the left-hand sidebar, you can hover over Pages and click on Add New.
I’m going to click on Add New here to create a new page.
And then here on the Add New page screen, we can see that WordPress gives us a tool
tip. If we’d like to have distraction-free writing, we can go ahead and we can click
on this button right here to have distraction-free writing mode. When I click on that, we can
see that everything else disappears and I can just concentrate exactly on the content
that I’m creating. I prefer to see everything however, so I’m
going to click on Dismiss and I’m going to go back to my regular screen right here. And
at the top, we want to give our new page a title. So because this is the About page,
just going to call it About. And then here in the Visual view, you could just start typing
in any of the content that you’d like for this page.
Now, note that there’s both a visual tab and a text tab. The difference between these two
is that the Visual tab is the what-you-see-is-what-you-get mode whereas the Text view will show you all
of the behind-the-scenes code that WordPress is creating when you add your content.
So for example, when I add some content right here, I’m just going to add some demo text
right there, here I am in the Text view. When I go to Visual view and then, for example,
say I want to bold this, just like I would bold in a word processing document or an email,
I’m just going to highlight it and click on the B here for Bold. And here we can see visually,
it bolds these two words. Now I’m going to go to the Text tab, we can
see something a little bit different. Here we see the HTML code that WordPress is generating
behind the scenes to generate the bold formatting. So the great thing about WordPress is that
you don’t need to know any code, you can simply type in the Visual view and WordPress will
take care of all the code for you. If you’d like to learn some HTML though, this
is a good way to learn it just by toggling back and forth, creating some content, formatting
it, and then you can go to the Text view and you can see what the HTML code is that corresponds
with that particular formatting code. So going back to the Text view right here,
here I have my text. Note that it actually should be two rows. There’s just one row right
here. But here, when I hover over this particular icon, the toolbar toggle, I click on that.
Now I get a second row of formatting icons. So the great thing also with WordPress is
you don’t need to memorize all of these different icons. When you hover over them one by one,
you get a tool tip that tells you exactly what each of these particular items do. A
very popular one that I use all the time is this one, Insert/Edit Link.
So as a quick demo of that, if I wanted to create a link to Google, I would just create
Google right here. Then, I would simply highlight the word, just like I would in an email or
a word processing document. Then I click on this link here and then I would add where
I want this to link to, Google.com. You can also give it a title if you like.
And because I’m going to be linking outside, to an outer page outside of my website, I
always click on this button right here to open the link in a new window or a tab. Then,
you just want to click on this button here that says Add Link. So that would basically
give you a link that will link to Google. And you can do this for any other link, of
course, as well. The other thing I want to add here on the
About page is I want to add an image. So I want to place the cursor where I want the
image to show up, click on Add Media, then Upload Files. Select Files, then I want to
select the file that I like and then click on Open to open this new image and upload
this image to my WordPress website. Keeping in mind that, once again, because
we’re uploading an image, it’s always a good idea to add a title as well as an alternative
text. Once you’ve got a title and alternative text, you can scroll down and check out the
Attachment Display Settings. And here we can see you can align this particular image either
to the left, center, or the right. I’m going to align it to the right and also,
I’m going to link it to nothing. Here we see, by default, it’s linking to the media file.
I really don’t want that so I’m just going to click on None. And then finally, at the
bottom you can choose the size of the image that you’d like to have displayed.
So I’m just going to choose the Full Size here. It’s a rather small one, 300 by 300.
We’ll see how that looks. Then I’m going to click on Insert in the Page to insert the
image into the page. Then on the right-hand side, you can choose
the Page Attributes. I’m going to keep this as the Parent page because I don’t want this,
this will be the top-level page so that’s a Parent page. And for the template, I’m going
to choose the Full Width template so there’s no sidebar. Then, I’m just going to scroll
down to the bottom here and everything else looks good, then I’m just going to click on
Publish to publish my new page. Once the page has been published, you can
check it out by clicking this link, it says View Page. But before we do that, I want to
call to attention the permalinks right here. This is the actual URL. We can see right now,
by default, it is just a page ID number which is not really helpful for people or for search
engines like Google. So I want to change the permalinks by clicking
Change Permalinks. And here in the Permalink Settings page, we see we have a number of
permalink settings options. So the one that I like to choose is the post name, so I’m
going to click on Post name. This gives it a really simple descriptive name which gives
everyone who’s reading it an idea of what the page is about, including the search engines.
So I’ll just click on Post name, scroll to the bottom here. Leaving everything else as
it is and then I’m going to click on Save Changes to save my changes. Once the permalink
settings have been changed, I want to note one other thing. We scroll down to the bottom
here, we can see the product permalink base. Now, this is related to permalinks for the
WooCommerce pages and here we can see the default is set to ?product=sample-product
which is okay. It’s descriptive but I prefer the more simplified view which is simply product/sample-product.
So I’m going to choose this one right here. There’s some other options. If you’d like
to choose shop base instead, you can do that right here. I’m just going to leave it as
product and click on Save Changes to save my changes and set the permalinks. So once
the permalinks have been set, we have a number of other pages that we need to create, so
let’s go about creating those pages now. The next that I want to create is a landing
page for my Free Recipes since this is a website that deals with healthy juices and ecommerce
for all of this stuff. So I’m going to create a Free Recipes page, a Blog page, and a Contact
page. So Next up, let’s create this Free Recipes page.
Once again, I’m going to go back to my website, hover at the top over + New and click on Page
to create a new page. Next, as we did in the previous example, I’m going to give my new
page a title so I’ll just pop in the title right there. And then I’ll add some content
here within the Visual view. Once you’ve added the content within the Visual
view, the next step is to add an image. And as we did in the previous example, I’m going
to place the cursor where I want the image to be displayed. Go up to the top and click
on Add Media to add new media. Then I’m going to choose the image that I’d like. Here, I
have it right here. If you’d like to upload a file, you can click
on Upload Files, select your files, and then upload your file to the media library. I already
have an image that I like so I’m just going to go with this one right here. You want to
make sure on the righthand side that you’ve added a title and alternative text. Those
are two important fields within the attachment details.
Then, I’m going to scroll to the bottom, check out the Attachment Display Settings. Here
I want to align this in the center so I’ll leave it as Center. To Link To, I want this
to link to nothing so I’ll just click on None. And then you want to choose a size of the
image that you’d like to have displayed. So I’m going to go with the large image. I’ll
just leave it as Large. And then I’m going to click on Insert into
Page to insert my image into the page. Once the image has been inserted, we can scroll
down to the bottom and check that out. Everything else looks good to go. Here on the right-hand
side, we have our Page Attributes. So for this particular page, I want this to
be the top level page so I’m going to keep it as no parent. So this will be the parent
page so just leave it as (no parent). Then for the template, we have a few different
options. We have the default template which includes the right-hand sidebar, but for this
particular page, I really don’t want there to be a sidebar so I’m just going to go with
Full Width to remove the sidebar. Once you’ve set the template as you like to
see it, then go to the right-hand side and click on Publish to publish your new page.
Once the page has been published, the next step is to add our email opt-in form to the
bottom of the page. So checking it our finished site over here,
when I hop on over to the finished site, we see we have the title, our image, and our
content which includes three reasons why someone should sign up for my email list. So at the
bottom, of course, I need to add an email opt-in forum so anyone could sign up for my
list. Now in another video on my YouTube channel,
I have walked you step by step, from scratch, showing you how to set up the Magic Action
Box plugin which provides a really beautiful customized email opt-in form for your WordPress
website. So I’ll be sure to drop the link down below to that video. Be sure to check
that out in order to set up your email opt-in form as well.
Right now, behind the scenes, I’m going to be creating the email opt-in form following
the steps in my previous video. So I just finished adding the email opt-in form to this
page using the Magic Action Box plugin for WordPress following the video that I posted
on my YouTube channel that walked you step by step, from scratch, showing you all the
things you need to do to set up, configure, and customize the Magic Action Box plugin.
So now, let’s take a look at what this email opt-in form looks like on our page. So here
I’m going to click on View Page to view my page. And here we see at the top, there’s
a lot of work here we need to do to clean all of this up. But when I scroll down a little
bit, we see here is the beginning of my page with the page title, the image, and then my
content, including the three reasons why someone should sign up for my email opt-in form.
And then at the bottom, I have my email opt-in form which looks really, really nice. So note
the next step is, here we have a comment that’s popping up on our page. And I prefer to keep
my comments and all the conversation on the blogs, not on my pages. So Next up, let’s
remove this comment here from our page. To remove this, I’m going to go up to the
top, click on Edit Page. Then, I’m going to scroll down to the bottom of the page and
we can see that there’s no option here to remove the comments. So in order to find that,
we need to go up to the top, here where it says Screen Options.
I’m going to click on Screen Options and then click on Discussion. And now when I go to
the bottom of the page, here we can see the options that we can deselect to turn off the
comments. So I’m going to uncheck both of this box to turn off comments and trackbacks
on this page. Then I’m going to click on Update to update
my page. Once the page has been updated, now we can check it out by clicking on View Page
so I’m going to click on View Page. And now we scroll to the bottom of the page, we see
the email opt-in form but now the comments have been removed, which is exactly how I
want it to be on my page. So Next up, note that there is all of this
stuff going on here. We have a couple other pages to add. Specifically, when I jump over
to the finished site here, we see this is the finished site. I have a Blog page and
a Contact page to add, so let’s add those two pages and then we will continue with cleaning
up all of this top section here. So Next up, let’s add our Blog page. To do
that, I’m going to go back to the dashboard by clicking on Dashboard. Then once again,
in WordPress you can create a page in a number ways; either going up to the top, hovering
over + New and clicking on Page, or on the left-hand sidebar you can hover over Pages
and click on Add New. I’m going to click on Add New here. And then
for this page, once again, we need to give our page a title so I’m going to give this
a title of Blog since this will be the Blog page. I’m going to leave everything else as
it is. And then, looking at the template here, we have a number of templates to choose from
but for the Blog page, we simply need to leave it as Default Template and then you click
on Publish. So creating the Blog archive page is really
simple. You just give it a title and then you click on the Publish button. Once the
Blog archive page has been created, Next up, we need to create our contact page because
when I come over here, we see we have our Blog page, our Contact page.
Our Contact page will look like this. It will be simply a form that anyone can fill out
so they can contact you directly from within your website. So Next up, let’s add our Contact
page. To create a Contact page, going back to our
dashboard, once again we can go up to the top, hover over + New and click on Page. So
I’m going to do that now. And then we want to give our new page a title. So this is the
Contact page, I’m going to call this Contact. And if you’re using the Jetpack plugin which
we installed and activated earlier in this video, a really easy way to add a Contact
form is simply to click on this button here that says Add Contact Form. Then you’ll see
a number of standard fields including name, email, website, and comment. And you can just
add this to your website by clicking on this button here that says Add this Form to my
Poster page. Once the Contact form has been added to the
page, you’ll see the short code related to the contact form. Now, I like to add a censor
to before the form that invites my visitors to fill out the form. So I’m just going to
add a short sentence here. You can add whatever sentence you’d like but to keep it simple
right now, I’m just going to say, “Please contact us via the form below.”
Once you’ve added this to your page, you can go ahead and Publish it by clicking on Publish.
Once the contact form has been published, we can check it out by clicking on Visit Page.
And here we see when we scroll down, we have our sentence, “Please contact us via the form
below,” and then we have the form. Also note, once again, we have these comments
popping up which I do not want so I’m going to remove that once again by going to the
top, clicking on Edit Page. Then on the top right-hand corner, I’m going to click o Screen
Options, make sure Discussion is checked. And then at the bottom, I’m going to turn
comments off by unchecking these two boxes. Once again, if someone’s leaving me a comment,
then really, there’s no need for discussion on this page to begin with. So now I’m just
come up to the top and click on Update to update my Contact page.
Once the Contact page has been updated, we have one more page to add to our site and
that is the homepage. To create a homepage, once again I’m going to the top and I’m going
to click on Add New. And then for the title, we need to give our homepage a title.
Now in this particular instance, we’ll see when I jump over to the finished site, here
is the title right here. So instead of using a title like “Home” page, I am going to actually
use a tagline for my website. So I’m just going to take this particular tagline and
then over here on my homepage, I’m going to give the homepage a title with the tagline
which gives everyone an idea what the website is about.
Then on the right-hand side, I’m going to choose a template. In this particular case,
we want to choose the homepage template. And then I’m going to scroll to the bottom and
I want to turn off discussion and comments on this particular homepage so I’m just going
to uncheck those. Scroll up to the top and click Publish to publish my new homepage.
Now we’re not exactly done with setting up the homepage. The next step is we need to
create a static site. And the static site will be the homepage. So Next up, let’s customize
our site by going to the left-hand site, hovering over Appearance and click on Customize. This
is also where we can set up the header section so that it looks something like this over
here, with our finished site, with our header here at the top, and then of course we’ll
have our title of our homepage. So going back to our site, I just clicked
on Appearance, Customize which brings us to the customize panel. And when I scroll down
or go over here on the left-hand side bar, I can find the part that says Static Front
Page here at the bottom. We had talked about this earlier in the video. I mentioned that
I would come back to this. So here we are at the next stage of this particular
setup for this website which, instead of having our latest post, we want to create a static
page so you want to make sure you click on static page. And this time for the front page,
we want to select the homepage that we created which is this one with the tagline.
In my particular example, it’s “We cold-press healthy juices & deliver them to you daily,”
so I’m going to click on that for the front page. And the post page, of course, is the
Blog page that we created in the previous step. So I’m going to click on these two and
then I’m going to click on Save & Publish to save those changes.
Now the other thing that we need to is we need to change the navigation because right
now, the navigation’s kind of all over the board. So I’m going to click on the navigation.
Let’s see, I don’t see it right here. So let’s go to the dashboard to set up the navigation.
I’m going to click on the X here. And then on the left-hand side, under Appearance, I’m
going to hover over Appearance and click on Menus. Here on the Edit Menus screen, we can
create a new menu by clicking on this link here that says “Create a new menu” or right
here in the field where it says “Enter the menu name here.”
We can give our new menu a name and then we can click on this button here that says Create
Menu. Once the menu has been created, the next step is we need to add pages to our menu.
And here on the left-hand side, you can see all of the recent pages that have been added
to your site. And here in the middle where it says View All, we can view all of the pages
on your website. So the pages that I like to add for this menu
include the About page, the Blog page, the Contact page. I’d also like to add the page
with my email opt-in form so I’ll select that, and finally, the Shop page. Once you’ve selected
all the pages that you like to display within the menu, go ahead and click on Add to Menu
to add those pages to the menu. Next, you can reorganize the items here by
dragging them where you’d like to have them be displayed. So for example, the Shop page
I want to display first so I’ll just drag it to the top. And then, any other pages,
you can just simply move them around how you like to see them.
Also, if you like to change the title of these menu items, you can do so by clicking on the
character to the right-hand side. And then in the navigation label, you can simply change
the title of the menu item. Once you’ve adjusted all of the items within the menu, go to the
top and click on Save Menu to save your menu. Now note that when we scroll down to the bottom
we see the Menu Settings. In this particular theme, the Storefront theme, this theme comes
with three different menus: a primary menu, secondary menu, and a handheld menu which
is for the display of the menu on a mobile device.
So Next up, we need to set the locations of our menu. So I’m going to create this as the
primary menu so I’m going to click on Primary Menu and then I’m going to click on Save Menu.
You can also set the menu locations at the top by going to the top, clicking on Manage
Locations. And you can also set the location here where
it says Theme Location and you can assign a menu. Now, note that here it says “Your
theme supports 3 menus. Select which menu appears in each location.” A quick behind-the-scenes
note, when we hop on over to my finished website over here, we see that the menu is displaying
here. This particular location is the secondary
menu location, so if you’d like to display the menu here, you can just go back to our
locations and you can set the secondary menu by selecting your menu. And then you can click
on Save Changes here. Now the reason that I’m not doing this, once
again, a behind-the-scenes little hint is that when I recorded pretty much this entire
video, I was using the secondary menu. And then when I finished it, I discovered that
when you reduce this into a mobile device view, so note that when I return and I create
this mobile device view, now note that when I’m clicking on this navigation, nothing is
happening and the menu is not displaying. So the secondary menu does not display in
a mobile device view, which is not good, right? We need to have everyone be able to easily
look at the menu and navigate around the website. So I am re-recording this menu tutorial part
right here and I’m going to insert it into the video to show you how to set up the menu
properly so that it displays on all devices. So that’s a little glitch that I am fixing
by re-recording this particular section of the video. So going forward in the video,
you’re going to continue to see this secondary menu displaying here because I’m not going
to record the whole entire video all over again. So this is just one little piece but
I am going to show you right now how to adjust this so that the menu will display on all
devices. So instead of using a secondary menu like
I’ve been doing throughout the whole video, throughout this particular tutorial, I’m going
to use a primary menu location instead. That’s why when we come here, I’m just going to set
this to nothing. For the handheld menu, I am going to set that to the menu that we’ve
just created. So I’m going to have two menus set; a primary
menu and a handheld menu. And then I’m going to click on Save Changes to save my changes.
So now when we go to our site to visit our site, I’m going to go up to the top and click
on Visit Site. And here we can see we have our primary menu. And our menu is actually
going to be displayed below our logo. So note that on this particular version of
the Storefront theme, when I reduce the screen size so that it is a mobile device view right
here, when I click on this, now you can see the menu display within the mobile-responsive
view which is exactly what we want. Once again, we’re using a handheld menu location as well
as a primary menu location. So once we have the header navigation set
up, the next step is we need to remove all of this stuff right here that is showing up
on the homepage; recent posts, comments, archives. We really don’t need all of that. All we really
want is we want to have the header navigation area and then we want to go directly into
the homepage title, and then the actual products. So to remove all of this stuff, I’m going
to go back to the dashboard by clicking on Dashboard. Then, I’m going to go down to Appearance,
hover over Appearance, and click on Widgets. Now when you first install WordPress and this
theme, you get all of these different widgets that show up in the header area and that explains
why all of those things are still showing up on the homepage.
So to remove all of this, you can simply drag them over to the left one by one to deactivate
them or you can click on this [01:01:58] on the right-hand side and then click on the
Delete button to delete each widget. So I’m just going to delete these one by one to get
rid of all of them so that we have a really clean header area.
And now, with nothing on the header section, when I go back to the site by clicking on
Visit Site, now we see it’s looking so much better. I have a really nice header navigation
area and then I move directly into the actual homepage. So here we have our homepage title,
we’re going to be customizing that and centering it in a little bit.
But right now, what I want to do is move on with our website, starting to create some
products, and add product categories and featured products and all of this stuff to the homepage.
So to create a new product, we’re going to go back to our dashboard by clicking on Dashboard.
Here on the Dashboard, to add a new product, you can go to the top, hover over + New and
click on Product or on the left-hand sidebar, you can scroll down to where it says Products,
hover over Products, and click on Add Product. Once you click on Add Product, you get the
new product screen where you can give your new product a title, a description, and fill
in all the rest of the info related to this product.
So starting at the top, I’m going to give my new product a name. And then here in this
white Visual view, I’m going to add a description. Now this is the longer description, so however
long you want to make it. You can just add the description in here.
On the right-hand side, it’ll say Product Category so I want to add a new product category
by clicking on this link, it says Add New Product Category, and then I’ll call this
Supershots. And once you add in the new category name,
go ahead and once again click on this button that says Add New Product Category. Once a
product category has been created, it’ll now have a check box next to it. Then, we can
just scroll down. If you like to add some product tag, you can do so right here.
Making sure that if you have more than one tag, you want to separate them with a comma.
Once you’ve added your tags, separate it by commas, go ahead and click on Add to create
the new tags. Now on the left-hand side, we’ll see that
there’s a Product Data section and this is where we set up the WooCommerce section related
to the price and the SKU and attributes, like that. So starting with the product data, this
is going to be simple product which means it’s just one price and one product. There’s
no variation or anything like that. But we see here that there are a number of
other types of products that you can choose depending on the product that you are adding
to your site. You have a simple product, a group product, an external/affiliate product,
or a variable product. So this product, once again, is very simple. It’s one price and
one product, there’s no variation so I’ll just leave it like that.
Then, moving on to General, if you’d like to create a SKU, you can do that. Now, a SKU,
when you click on this question mark here, hover over it, a little tool tip will pop
up telling you exactly what this is about. Here it says, “SKU refers to a stock-keeping
unit, a unique identifier for each distinct product and service that can be purchased.”
So if you’d like to create a SKU, go ahead and do so. I’m not going to do that here.
Instead, I’m going to move on to Regular Price. I’ll make this $9 and I’m going to make a
Sale Price here of $5 so you can see what that looks like when we create a sale.
Next up, here we have the Inventory section and if you’d like to manage stock, if you
weren’t creating those SKUs in the previous example, you can do so here. Once again, note
that there’s this question mark which when you hover on top of it, it will tell you exactly
what the stock status is all about. Also if you want to sell things individually,
you can click on this box. I’m not selling this particular product that I’m uploading
right now individually so I’m going to leave all of these unchecked. I’m not going to touch
those. Then moving on to Shipping, you can set up
the shipping weights and dimensions and classes right here. Again, noting that there are these
question marks here that will tell you exactly each of all these do. There’s also really
great documentation within the WooThemes website and I’ll be sure to drop the link down below
so you can check it out and learn more about shipping.
Here, if you’d like to link your products, whether you want to up-sell or cross-sell
products, this is a great way to sell more products on your website. You can do so here.
And again, here you want to check out this question mark to read more about it.
Now, I can’t create any up-sells or cross-sells right now because I haven’t created any products
to up-sell to so we have to come back to this a little bit later. And again, I will leave
some links down below so that you can check this out.
Moving on to Attributes, this really relates to when we have a very well product. And right
now we’re dealing with a simple product so we don’t need this right here. And then finally,
for the Advanced tab, if you like to leave a note when your customer has bought the item,
here it says “Enter an optional note to send the customer after purchase.”
You can do so here and if you’d like to set the menu order, you can set the position of
this particular product right here. Finally, if you’d like to enable or disable reviews,
you can do so by clicking on this check box here.
So we have everything that we want here. This is really simple. Again, that’s the beauty
of a simple product, you just simply have mainly a regular price and a sale price if
you’re not dealing with SKUs or inventory. Then I’m just going to scroll down to the
bottom and here where it says Product Short Description, you can add a short description
of your product. We’ll see in a moment where the product short description and the full
description are located on the product page. For now, let’s just leave it like that with
adding the short product description. Then, I’m going to come up to the top and
click on Publish to publish my first product on my WordPress website. Once our simple product
has been created, let’s create a variable product. A variable product is a product which
has several different variations, each of which may have a different SKU, a different
price, and different options within a product. For example, if we have a tee shirt or a smoothie
bundle available in different color, sizes, or flavors, that would be a variable product.
So to create a variable product, once again, we want to go up to the top, hover over +
New and click on Product. Then we want to give our new product a name.
So in this case, since this is a variable product, I’m going to call it a smoothie ingredients
bundle which will include a number of different options that someone can select to receive
a variety of different kinds of ingredients to make smoothies.
So I’m going to give this product name. Then once you’ve given your product a title, you
can add the product description here within the white box of the Visual view. Next up
is the Product Category and here we can add a new product category once again by clicking
on the link Add New Product Category. Naming our category, I’ll call this Smoothies.
And then once again, you want to add the new product category by clicking on this link
right here. Once a category has been created, you’ll see a check box next to the new category.
Then scrolling down, we can add some product tags if we’d like. Once again, separating
tags with commas if you have any. And then on the left-hand side here, we need
to change the Product Data section from Simple Product to a Variable Product. Then we have
our SKU. Once again, if you’d like to give your product a SKU, you like to add Inventory,
you can do so here, and manage stock, any shipping weight, dimensions, or classes, you
like to up-sell or cross-sell your products. And then here we have the most important thing
for a variable product, is our Attributes section. So here I want to just click on Attributes
and then I want to click on Add to create a new attribute. Here within Attributes, you
can create an attribute name and then add the values of the attribute.
So for example, I’m going to give this name of Smoothies. And then for the Values, I’m
going to add the different flavors that this will come in for the smoothie bundle. Making
sure that I separate each one of the different values with this pipe symbol which you can
find on the righthand side of your keyboard, just above the return key.
Once I’ve added all the different values, separate it by the pipe symbols, on the left-hand
side, I want this to be visible on the Product page so you need to make sure you check this
box. And I want to use this for variations. Once both boxes are checked, go ahead and
click on this button that says Save Attributes to save the attributes. Once the attributes
have been saved, then we can move on to variations. So I’m going to click on this button right
here to go to the variations panel. And first stop, we want to click on this link
that says Add Variations. Once we click on Add Variations, then we’ll have this dropdown
menu where we can choose each variation one by one so I’ll start with the first one, Carob
Banana. On the right-hand side, I’m going to give it a regular price of $10, once again
with the sale price of $7. And then scrolling down, everything else looks
good. I’m just going to click on Add Variation to move on to my next variation. Just as we
did with the first variation, I’m going to click on this dropdown box, choose my second
variation and once again, I’m going to give it a regular price and a sale price.
If you don’t want to give it a sale price, no worries, just leave it as it is with just
the regular price. I have two more variations to go so I’m going to click on Add Variation
once again. This time I’ll choose the third variation. This one I’m not going to put on
sale so I’ll just make it $10, regular price. And then lastly, the last variation down below,
I’m going to click on the last one right there and once again give it a regular price of
$10. And then scrolling down here where it says Defaults, we need to choose a default
variation to be displayed. So I will select the first one here, make sure that you have
a default. And once again, you can see when you hover
over the question mark it says, “These are the attributes that will be pre-selected on
the frontend.” So I have my default variation set up, now I’m just going to scroll to the
top. We can see that there’s an Advanced tab here
once again, as we saw on the previous example, but I’m not going to fill any of this out.
If you want to leave a purchase note or change the menu order, or enable or disable reviews,
you can do that here. Once I have my variations ready to go, I’m going to go up to the top
and click on Publish to publish my new product. The product has been published. Now keep in
mind, we have not yet added any images to we need to add some images here. So I’m going
to scroll down to the bottom. Here we can either add a product gallery or a featured
image. At minimum, you want to make sure that you do have a featured image.
So I want to set that by clicking on this link here that says Set Featured Image and
I’m going to use this particular one right here, the smoothie one right here. Again,
you want to make sure that you have a title and an alternative text. And once you have
both the title and alternative text, go ahead and click on this link that says Set Product
Image to set the product image. Now also note on the left-hand side, we have
our Product Short Description which we have not yet filled out. This is optional but I
do prefer to add a short description so I’ll just add one sentence right here to the short
product description field. Add that right there, and then coming up to the top, I’m
going to update this by clicking on Update. So once our product has been updated, let’s
check it out by clicking on View Product. And here we see we have our product image,
our product title, and the price. We should see the Sale Price is now $7 or $10, depending
on which version or variation is chosen. We have our short description right here and
then here are all of our different variations. So here we see this particular one is $7.
This is the one that I put on sale, Carob Banana. But the Mango Coconut one we see is
not on sale, that one is $10 right here. Then when we scroll down, we see here’s the full
product description. If there’s any additional information, it will show up right here, notably,
the different variations of this product. And because we’re just getting started, there
are no reviews but if there were any, those could be left right here.
So this is how you add a variable product to your WooCommerce website. Now let’s take
a look on the homepage by clicking on the site title or logo on the top left-hand corner,
then we scroll down. We can see that we have product categories here but there are no images
and also, these images are really small so we need to change that.
And then below, we have our recent products. Now note that we do have a thumbnail image
for the last product that we just created, the variable product, the Smoothie Ingredients
Bundle, however I forgot to add the image for the Green Algae Shot so let’s fix that
now. I’m going to click on this one right here,
then we see that there’s no image so I’m going to go up to the top, click on Edit Product.
Then I’m going to scroll down to the bottom where it says Featured Image and I’m going
to click on Set Featured Image. To set this image, I’m going to click on Upload Files
and Select Files. Then I’m going to select the image that I
want and click on Open. And once this image is uploaded, then I want to give it a title
and an alternative text. Once you have the title and alternative text, go ahead and click
on Set Product Image to set the product image. That should look a lot better. Let’s click
on Update. And once this product has been updated, then we can check it out by clicking
on View Product. That looks so much better. There it is right
there. Now we do once again need to adjust the size of the image by going back to the
homepage by clicking on the site title right here. Now when we scroll down, at least we
have two images within the recent products section right here. And we scroll down even
further, here we also see these two different products on sale.
So the next step is I want to change the sizes of these image thumbnails here on the homepage.
To do that, I’m going to go back to the site by clicking on Dashboard. And here on the
product dashboard, the first thing I need to do is add a new plugin called Regenerate
Thumbnail so we can regenerate the thumbnail image sizes within our site.
So going down to plugins, I’m going to hover over Plugins and click on Add New. Then here
on the search field, I’m going to do a search for the Regenerate Thumbnails plugin. Here
it is on the left-hand side, Regenerate Thumbnails. You can read more about it by clicking on
More Details or you can install now by clicking on Install Now.
I’m going to click on Install Now. “Are you sure you want to install this?” Yes, okay.
And then once the plugin has been successfully installed I’m going to activate it by clicking
on Activate Plugin. Once the plugin has been activated, now we can change the dimensions
within our thumbnails of our product images. We do that by going down to WooCommerce or
over to WooCommerce, hovering over WooCommerce and clicking on Settings. Next here at the
top, we have the product tab so I’m going to click on Products. Then I want to scroll
down and here where it says Product Image Sizes, we want to change this to 300 by 400
for the single product image, so I want to change that. It’s 300 by 300 so I’ll make
it 400. And also, the catalogue images, I want to
make those 300 by 400 as well. Once the image sizes have been changed, then I’m going to
scroll down and click on Save Changes to save the changes.
Next I need to actually regenerate the thumbnail so we do that by going to our media library.
And here within the media library, we can see all of the different images in our library
or if you want to see them in list form, you can click on this icon on the left-hand side
and that will give you a list of all the different images on our site.
So the main ones that I want to regenerate are these different product images that I’ve
added, so I’m going to click on the two so far. I’ve only added two products and here’s
each of the images for those, so I’m just going to select those specifically. And here
where it says Bulk Actions, I’m going to click on that then choose Regenerate Thumbnails
and click on Apply to regenerate the thumbnails of these two product images.
Once those have been successfully resized, we can check them out on the site by clicking
on Visit Site. And now when I scroll down, we can see that these images look a little
bit different. They’re taller and a little bit wider. We could see them a lot easier.
Now going forward, we really just need to add more products, a lot of new products,
to our site. So I’m going to be adding more products to
this site behind the scenes, following the exact steps that we just completed in the
previous two examples. I’m going to be adding simple products and variable products to this
website. When I come back, we’re going to continue by adding the product thumbnail images
right here so we can replace these placeholders with actual images. So I’ll see you on the
other side once I’ve added some more products to this site.
So here, we’re back on the homepage of our Storefront ecommerce WordPress website and
we can see that I’ve added quite a few additional products to our site, so it’s looking a lot
better. Next up, let’s change these placeholder images to actual images for the product categories.
To do that, I’m going to up to the top, hover over the website name and click on Dashboard.
Then on the left-hand sidebar, I’m going to scroll down to Products, hover over Products
and click on Categories. Here on the right-hand side, we can see all the categories that I’ve
added to my ecommerce WordPress website, starting with Breakfast, the first category.
So here we see that there’s a number of different images that need to be set. So I’m going to
click on Edit to edit the thumbnail image. Then at the bottom, I’m going to scroll down
and here where it says Thumbnail, I’m going to click on this button that says Upload/Add
Image. Then I’m going to select the image that I’d
like for this particular product category, making note that there is a title and alternative
text, then I’ll click on this button here to use the image. Then I’m simply going to
click on Update to update the product category. So we have our first thumbnail image done.
I’m going to do that with each of these other images simply by clicking on Edit, then scrolling
to the bottom where it says Thumbnail, clicking on Upload/Add Image, selecting an image and
then clicking on, once again, Use Image. Once image is displaced, I’m going to click
on Update to update the product category. So behind the scenes, I’m going to repeat
these steps, adding a thumbnail image for each of the additional categories.
So here we’re back on the homepage of our Storefront website and we can see when I scroll
down, I now have the thumbnail images for the categories, so that looks a lot better.
And we see that I have all of these other sections on the homepage.
So the next thing that I want to do here is I want to streamline all of these products.
I prefer having fewer products so it’s not so busy, so I want to remove the Top Rated
Products section. And actually, I want to remove altogether the Recent Products section.
Instead of Recent Products, I’m simply going to include the Featured Products for the site.
So to change the layout of which sections are being displayed on the homepage, we need
to go back to the dashboard by clicking on Dashboard. Then I’m going to down to Appearance,
hover over Appearance and click on Storefront. This is the welcome screen that we saw when
we first installed the Storefront WooCommerce theme.
On the right-hand side, it says “Configure homepage template” and there’s a small note
here that says, “Once the homepage has been set up,” which we’ve already set up the homepage,
it says, “You can toggle and reorder the different sections of the homepage by using the Homepage
Control plugin.” So we need to install this plugin to our website.
So when I click on this link right here, you will see that it will bring us to the plugin
directory within WordPress.org. And here is the Homepage Control plugin that we need.
So I’m just going to go back to my website right here, I’m going to go down to Plugins,
hover over Plugins and click on Add New. Then here in the Search Plugins box, I’m going
to do a search for Homepage Control. Here it is on the left-hand side, Homepage Control
by WooThemes, so we know we’re in the right spot. Then I’m going to click on this button,
Install Now, to install this plugin on my site.
“Are you sure you want to do this?” Yes, okay. And once the plugin has been successfully
installed, we can activate by clicking on Activate Plugin. So once the plugin has been
activated, now when we go to Appearance, hover over Appearance, now we have a new item here
in the list called Homepage which when I click on this, this will give us a way to easily
remove or add different sections to the homepage of the Storefront WooCommerce ecommerce theme
for WordPress. So the sections that I do want to include
the homepage content, I’ll add product categories. I want to remove the recent products so I’m
going to check that. I want to include the featured products and I want to remove the
Storefront popular products. So I’m just selecting the ones that I actually want to have displayed.
Then to save my changes I’m going to click on this button that says Save Changes.
Once the different components are set up, now I can check out the site by going up to
the top and clicking on Visit Site. Here we now see the Product Categories, which looks
great. Our Featured Products and our On Sale products, and everything looks good, the only
catch is that we don’t have any Featured Products being displayed.
So let’s set our items so that we will start displaying some Featured Products. To feature
items on a page, you want to go up to the top, click on Dashboard once again, then go
down to Products. So I’m just going to scroll down here, over Products and click on the
Products tab. Here we see a list of all the products that
have been added to our site. So to feature a specific product, you want to click on this
link here that says Quick Edit. Then you want to scroll down and here, you’ll see there’s
a small box that says Featured. You just want to check it and then click on Update to update
this product. So I’m going to do that four times. Once again,
I’ll feature these Organic Yellow Lemons so I’ll click on Quick Edit, scroll down, click
on Featured, and click on Update. It’s really fast and so easy with WooCommerce. Two more
to go, I’ll add the Quick Edit on the Raw Organic Cacao, click on Featured and Update.
And last but not least, I will also update the Organic Rainbow Chart by clicking on Quick
Edit, Featured, and then Update once again. In just a matter of 20 seconds, we’ve created
four featured products, which is awesome. So now going back to the site by clicking
on Visit Site, now we see that it looks really, really good. We have our tagline at the top
which, in a moment, will be centering so it’s a little bit more centered.
Then we have our Product Categories, our Featured Products are now being displayed, and we have
our On Sale products as well. Looking great. Also, at the bottom, I want to add some footer
widgets, footer sections here so we can add custom content to the bottom of our footer.
So Next up, before actually customizing any specific parts of the website, I’m going to
come to the bottom and I’m going to start adding the footer widgets in the footer section.
So to add footer widget, you want to go up to the top, click on Dashboard. Then here
on dashboard, you want to go down to Appearance, hover over Appearance and click on Widgets.
Here within the Widgets panel, you’ll see there’s four different widgets that come built-in
with the Storefront theme, starting with Footer 1. So I’m just going to open it by clicking
on this particular button right here, this little [01:24:25]. And for this particular
one, taking a look at our finished site over here, I want to add a menu item with the same
four or five items that we’ve added to our secondary menu up above.
So basically, I want to replicate this menu down below, here on the left-hand side. To
do that, I’m going to scroll down to where it says Custom Menu and drag Custom Menu to
Footer 1. Here at the title, I’ll just call it Company. And then for Select Menu, I want
to select Menu and then I’m going to click on Save. This will add the menu to the left-hand
side of the footer. Then I’ll close it by once again clicking
on this [01:25:03]. Next up, I want to add another menu to my footer section. Here on
the finished site, we see I have some fine print, some FAQ, an FAQ page, Terms & Conditions
page, and a Privacy Policy page. Of course, we haven’t added these pages yet
to the site so I’m going to add them really quickly by going back to my dashboard right
here. Going up to the top, hovering over + New and clicking on Page. Here at the top,
I’ll just add Frequently Asked Questions, the title.
Then of course as we did in the previous examples, here in the white box, you want to add your
content. And then on the right-hand side, I’m going to keep it as a Default Template
right there. Just leave it as Default Template. Scroll to the bottom, I’m going to uncheck
comments and trackbacks to disable that. And then I’ll just come up to the top and click
on Publish to publish my new Frequently Asked Questions page.
I’m going to do this for two more pages because as we see on our finished site, we have Terms
page and a Privacy Policy page. So once again, I’ll just click on Add New, add my new Privacy
Policy here. Along with some content, scroll to the bottom, disable comments and trackbacks,
and then I’ll click on Publish to publish this page.
Last but not least, I have one more page to add, which is my Terms & Conditions page so
I’ll click on Add New to add one new page. Add the title as well as the content and then
scroll over the bottom, disable comments and trackbacks and then scroll to the top and
click on Publish. Now I have three additional pages added to my site.
Next up, I want to create a custom menu by going to Appearance, hovering over to Appearance,
and clicking Menu. Then I want to create a new menu by clicking on Create a New Menu.
Here, I’ll just call this Footer since this will be the footer menu. And then I’ll click
on the Create Menu button to create a new menu.
Once the footer menu has been created, now we can start adding pages to the footer menu.
So I’m going to add the Terms & Conditions, Privacy Policy, and FAQs. Click on those boxes
right here, next to each of those pages and then click on this button that says Add to
Menu to add these to the menu. Then to reorder them, I can simply drag them
around to reorder them. If I want to change the actual name of this particular menu item,
I can do so by clicking on this [01:27:12] on the right-hand side and then changing the
Navigation Label right here. Once you have everything set the way you like, go ahead
and click on Save Menu to save the menu. Once the menu has been updated, now we can
go back to our widgets section by clicking on Widgets underneath Appearance. So I go
to Appearance, Widgets, and then on the right-hand side, under Footer 2, now I can add my Custom
Menu. So I’m going to grab this widget right here on the left-hand side, Custom Menu, and
drag that to Footer 2 section area. And here where it says Select Menu, this time
I can choose the Footer Menu. At the top, I’m going to give it a title. I’ll just call
it The Fine Print. And then I’ll click on Save to save my changes.
So I’ve got Footer 1 and Footer 2 taken care of. Next up, we need to add Footer 3 and 4.
So the next one that I want to add is some social sharing, social icons right here under
Footer 3. So I’m going to be using the Simple Social Icons plugin. So to add this plugin,
I’m going to go to the left-hand side, hover over Plugins and click on Add New.
Then on the right-hand side, I’m going to do a search for the Simple Social Icons. There
it is right there. Search for it and then on the top left-hand side, here we see it
is Simple Social Icons. I’m going to install it by clicking on Install Now. “Are you sure
you want to install this?” Yes, okay. And then once it has been successfully installed,
we can activate it by clicking on Activate Plugin. Once this plugin has been activated,
now when we go to widgets by hovering over Appearance and clicking on Widgets, now when
we scroll down to the bottom, now we’ll see the Simple Social Icons widget being displayed
on the left-hand side. So here for Footer 3, I’m going to open up
Footer 3 by clicking on this [01:28:59]. Then, I’ll scroll down to the widget for Simple
Social Icons and I’m going to drag it to Footer 3 area right here. Next, here within the plugin
settings, first stop is a title. So I’m going to call this Connect by just
typing in Connect right there in the title field. For the icon text, I’ll leave it as
36 pixels. For the border radius, I’m going to make this 100 because I want this to be
a rounded icon. Then I’ll leave the alignment as align at
left. Then scrolling down for the background color, I want this to be orange to compliment
the colors of the site. So I’m going to overwrite the default number there and just add my orange
color in for both the background color and the background hover color.
And then, scrolling down we want to add whatever social networks that you want to have displayed
with an icon in the footer section of your website. Once you’ve added the URL, it’s all
the different social networks that you’d like to have displayed, go ahead and click on Save
to save your changes. So we’re done with Footer 3. The last one
we need to complete is Footer 4. And this one’s going to be easy because for Footer
4, I simply want to display a search box so anyone who visits my site can easily find
content throughout the site. So on the left-hand side, I’m just going to
scroll down to where it says Search, add a search form for your site. I’m just going
to drag that up to Footer 4 section. And then here, for the title, I’ll just call it Search
this Site. Once you have the title set, go ahead and click on Save to save your settings.
Now when we go back to the homepage by going up to the top and clicking on Visit Site,
now when we scroll down to the bottom, now we see our footer section looking really nice
with all of the different customized content within our footer section.
So we can see in our homepage that our ecommerce website using the Storefront theme is starting
to come together really nicely. We have our tagline at the top as well as our products
on our homepage, followed by our customized content here in the footer section.
There’s a number of other things we still need to do to complete this website however,
starting with number one: I want to make some customizations to our site; the styles and
appearance of the site. For example, I want this tagline to be centered, I want to remove
some of this empty space right here and some other minor style changes for the website.
Also we need to continue finishing, setting up the WooCommerce plugin. Finally, we need
to add some custom content to the blog sidebar on the blog archive page.
So starting with the customizations, we’re going to move into that now. I’m going to
be making some customizations to our site and whenever we’re making customizations,
it’s always a good idea to have a child theme. So first, we’re going to create a child theme
by going up to the dashboard and clicking on Dashboard.
Note that when you’re using the Jetpack plugin, when you scroll down, here under Appearance,
when you hover over Appearance, there’s this other option right here called Edit CSS. And
of course, if you’d like to just add your CSS styles right here, you can do so and you
can skip creating a child theme. Personally, I prefer to create a child theme
because it creates a completely outer file where all of the files that we’re going to
add will be protected and you don’t have to worry about accidentally having this be erased.
So I prefer to create a child theme so we’re going to do that by adding a plugin called
Child Themify. This is the fastest way and easiest way to create a child theme.
So going down to Plugins, I’m going to hover over Plugins and click on Add New. Then here
in the search field, I’m going to do a search for Child Themify. Then on the top left-hand
corner here where it says Child Themify, I’m going to click on Install Now to install this
plugin. “Are you sure you want to install this plugin?”Yes,
okay. And once the plugin has been successfully installed, I’m going to click on Activate
Plugin to activate the plugin. Once the plugin has been activated, now we can create the
child theme by going to Appearance, hovering over Appearance and clicking on Themes.
Here on the themes page, we’ll see our active theme that’s being used right now. It’s the
Storefront parent theme, and when I click on theme details, now on the bottom right-hand
corner, we’ll see a button that says Create a Child Theme. So I’m going to click on this
button that says Create a Child Theme. Then at the top we need to give our child
theme a name so I’ll just call this Storefront Child. And then I’m going to click on this
button that says “Let’s go!” to create the child theme. Once the child theme has been
successfully created, we can go back to themes by going to Appearance and Themes, and now
we’ll see that we have two similar-looking thumbnails here for different themes.
Right here, the active theme right now is the parent theme and on the right-hand side,
we see we have the child theme. So before I actually activate this, I want to make a
note that some things on the website are going to be a little bit off so we’re going to need
to adjust those. Mainly, when we activate the child theme right
here, we’re going to have a different color here on the header section as well as a different
color in the footer section. So some of the styles are going to be off so you’re just
going to make a note of those by going to Customize right here on the left-hand side.
Then, we’ll see that there’s the header colors right here. You see we have the background
color, text color, and link color. You want to make a note of those colors. And then also
for the footer, same thing, you just want to make a note of the different heading colors,
text colors, link and background colors. These are the main things that are going to change
within our theme when we activate the child theme.
The good news is that if you ever forget what the color codes are from the parent theme,
you can simply find them by reactivating the parent theme. So I’m going to close this out
right here and I’m going to go back to the theme section right here. I found this page
by going to Appearance and Themes. And then here on the right-hand side, I’m
going to activate the child theme by clicking on Activate. Now we see that the active theme
is the child theme right here. And when I check it out by going up to the top and clicking
on Visit Site, we will see a little bit different page right here but no worries, we’re going
to take care of this in just a few seconds. This is pretty simple to fix actually.
So I’m just going to go back to the menu. First of all, we need to just change the menu
location. So I’m going to go back to the menu by clicking on menu. And here on the menus
page, I’m just going to go up to Manage Locations and then I’m going to reset the menu.
So as we did previously, the primary menu, I’m going to select Menu. I’m going to leave
the secondary menu as it is. And for the handheld menu, I’m going to click on Menu. Then I’m
going to click on Save Changes to save my changes.
Once again, keeping in mind that this is a re-recording of this particular menu section,
earlier in this video tutorial I explained why I had to re-record how to set up the menu
and I explained why I wasn’t using a secondary menu anymore. Namely, it’s because there was
an update to the Storefront theme so I wanted to accommodate that update to give you the
latest info, but I didn’t record the entire video. I only recorded just this section.
So we’re going to see, going forward in this video tutorial, we’re going to see the secondary
menu being displayed. However, we’re actually creating simply a primary menu. Again, please
refer to the previous section in this video tutorial if you have any questions related
to why the secondary menu was showing up in this video and why the primary menu is not
showing up. I explained it, more detail, earlier in this video tutorial.
With that said, I’m going to go to visit the site by going up to the top and clicking on
Visit Site. The other thing that we want to do is just change the color, which is what
I referred to just a few moments ago so I’m going to do that by going up to the top, going
directly to Customize. So you can either go directly to Customize
here or you can click on Dashboard, then do down to Appearance and Customize, and find
the Customize panel this way. Now, this is where we just want to change the color. So
once again, the header color, I want the background color to be white, so I’m just going to click
on white right there. We can see that immediately adjusted itself
which is great. And then for the text color and the link color, I’m going to leave the
text color as it is but the link color, we can see we can’t see it right now because
it’s white on white. So I’m just going to change that by clicking on Select Color and
adding a darker color code there so we can see it a little bit better. Then I’m going
to click on Save & Publish to save and publish this change.
Next up is the footer. When I scroll down to the bottom here, we can see that our footer
looks a little bit different. So I need to just change that back to that teal color.
So I’m going to open this up and then for the heading color, I’m going to make the heading
color so I’ll just pop in white right there. Then for the text color, I’m also going to
make the text color white as well so I’ll just click on the white box right there. Then
for the background color I’m going to select the color and this will be that dark teal
color, so I’ll just add that in. And finally, last but not least, the link color. I’ll make
this kind of off gray color. Then I’m just going to click on Save & Publish
to save these changes. So this looks just the way it did before we had added the child
theme. The great news now however is that now we have a child theme and we can safely
make additional customizations to our site and not worry that those changes will be overwritten
when WooThemes decides to update the parent theme.
To make those changes, I’m going to click on this X here to close this particular window.
I’m going to go back to the homepage by clicking on Visit Site. Now we see we have still a
really nice menu right here underneath the site logo. We have a blank secondary menu
right here. And now when I turn it into a responsive view, note that now we have this
great menu right here which when I click on this, here we have a dropdown list.
So that’s what you’re going to have to do with the Storefront theme. You’re going to
have to create a primary menu so that you have a menu being displayed within the responsive
size, which is the size that anyone on a smartphone will be using.
So now we have that fixed, the next thing up is obviously, I want to change the color
of this bar right here to match the kind of teal color of my footer down below. So to
change that, I’m going to go up to the top here. Then here at the top, I’m going to open
my window once again so I can see the full website view.
And I’m going back to the dashboard by clicking on Dashboard. Then I’m going to go down to
Appearance and Customize. And on the left-hand sidebar, we can change the color of the button
by clicking on this link here that says Buttons. Here we see that the background color is this
gray color right here but when I click on select color, here I can add my new color.
So I’ll just make it that teal color right there, then I’m going to click on Save & Publish
to save that change. Note that when I did that, in real time, the view over here now
shows it in a teal color. Now there’s also this alternate button background color which
is purple and I just want that to be teal as well. So once again, I’ll click on Select
Color, I’ll drop in my teal color code, and then I’ll click on Save & Publish to save
and publish that change. Okay, that looks good. So closing this, I’m
going to go back to the homepage to see what other customizations we may want to make.
So clicking on Visit Site, here we see at the top, we have the title, the logo, the
menu items, and here we have our tagline for the homepage.
So this is the next thing that I like to change. I want to center this. So to center the title,
once again we’re going to be using Google Inspect Elements. However this time, instead
of going up to the top right-hand corner and clicking on these three lines, I’m going to
go the fast route and simply hold down the control key on my Mac. You can also right-click
with your mouse if you’re using a PC. I’m going to hold down the control key and
click on my mouse. And now, we’ll open up this other box right here and we can go directly
to inspect elements. So there’s two different ways you can find the Developer Tools and
specifically inspect elements within the Google Chrome browser.
This way will bring us directly to the code we need right here and then here we see it
on the right-hand side. So I can just drop in the new code that I want, which is text-align
and then I’m going to center it. And here we see, now it’s centered which looks really
nice. So then to capture that, I need to actually highlight and copy all of this code right
there then I’m going to close the Developer Tools, go back to my dashboard by clicking
on Dashboard. Then, I’ll go down to Appearance and Editor.
And in the Stylesheet right here, I’m going to paste the code that I just copied in the
previous step, making sure that I close it off with a closing bracket, also noting that
I do not change the margin bottom, the padding, or the border bottom. I didn’t change any
of that, so I’m going to delete all of that and simply add the code that I added to make
that change. So there’s this one code here and no worries,
if you can’t see it I’ll be sure to drop it in the video. Once you have it here, go ahead
and click on Update File to update your file. Next up, let’s go back to the site by clicking
on Visit Site. And now we see that the title is now centered, exactly how I want it.
Now I’m not sure if you really could see it in the video but there’s some sort of background
here. There’s a white header and then when we move into the content section of the homepage,
there’s this off-white color that starts right about here. So I want to turn that completely
white so it matches the header above. To do that, I’m going to go back to the customize
panel right here by clicking on Customize. Then on the left-hand side, we’re going to
go to Background. Then we can scroll down and here we see there’s the Background Color.
When I click on Select Color, we can see that there’s an off-white color right here.
So to make it completely white, I’m just going to click on this white box down below. We
can see it changes the color code to 6 F’s. So now we have a completely white background.
Then I’m just going to come up to the top and click on Save & Publish to save and publish
this particular change. Now closing that out, going back to the website
to check it out, and here we see on the homepage that the background is now white, which is
great. So next up, let’s remove some of this white space between the title and the beginning
of the product categories. To do that, once again I’m going to hold down
the control key on my Mac and click the mouse. If you’re on a PC, you can right-click your
mouse to bring up this panel and then I’m going to go directly to Inspect Elements and
click on that to open up Inspect Elements. Here we can see it goes directly to the section
right over here that we need to adjust. This is .hentry and notice that when I scroll to
the bottom here, it says the margin bottom is 63 pixels and the padding is 54 pixels.
So these are some of the items that we want to adjust.
Just going up to the top, here where it says margin, I’m just going to click in here and
I’m going to change it zero to reduce that and we can see right away, it moves up a little
bit. Also note that there’s this border now that goes on top of product categories so
I want to remove that as well. So here it says border-bottom and six pixels,
I’m going to make that zero pixels to remove that altogether. And finally, we still have
the padding-bottom happening right here, three em’s. And we see when I scroll down, that’s
about 54 pixels. So if I removed that, it’s going to remove a little bit more space in
between the title and the product category. So I’m going to come up to the top. And right
here where it says padding-bottom, I’m going to type in there and I’m just going to change
that from about three to zero. That looks so much better. Now we can see that’s what
it’s going to look like. So we just kind of tightened up all the areas in between the
title and the Product Categories. So now we need to actually copy this. I’m
going to highlight and copy this code right here. Then I’m going to close the Developer
Tools, go back to my dashboard by clicking on Dashboard. Then, I’ll go down to Appearance
and Editor. And here within my Stylesheet, once again
I’m going to paste the code that I just copied in the previous step, making sure that you
also have these closing brackets right here. Then, I’m going to click on Update File to
update the file. Once the file has been updated, we can go check it out by going up to the
top and clicking on Visit Site. And now we see that there’s a lot less space
in between the title and the Product Categories so it’s a little bit tighter there. It looks
a lot better. And so we are good to go. So just a few more customizations to make
to the website. Here on the homepage, our homepage is looking really good so far. We’ve
got our title, our product categories, all the different images, and then we have our
footer section down below, so that looks good. But there’s one section here that I want to
change. Specifically, I want to get rid off all of these numbers next to the product category
and just keep it really clean and kind of just a real clean minimal look. So to remove
these numbers, I am going to once again use Inspect Elements on my Mac. I’m going to hold
down the control key and click on the mouse. Again, if you’re on a PC, right-click your
mouse. And then, this little box will pop up. I’m
going to click on Inspect Elements to go directly to this code. And here we can see on the right-hand
side, here we see this mark code right here with this background color of yellow decoration
and padding. So to remove the number altogether, I’m going to use this display none code.
I’m just adding display then none. And we can see when I do so it completely removes
all those numbers, which is really great. Then I’m just going to highlight and copy
this code right here, then I’m going to close Developer Tools. Go back to the dashboard
by clicking on Dashboard. Then I’m going to go down to Appearance, click
on Editor. And here within my child theme Stylesheet, at the bottom I’m going to paste
the code that I just copied in the previous step, making sure that I close it off with
a closing bracket and keeping in mind that I didn’t really change any of this other code
here. I only added display none. So I’m going to get rid of all the code I
didn’t touch and we simply are going to have the mark, ins { and display: none; that’s
it. I’ll be sure to drop the code down below so you can read it more clearly in this video.
Then just click on Update File to update your file.
Now when we go back to the website by clicking on Visit Site, now we can see on the homepage,
those numbers are no longer there which is really great. Now there’s one other thing
here that I noticed. Here we have our Top Rated Products still showing up and I really
don’t want that there, I really just want to keep it simple with three sections.
Actually, it looks like some other things changed, right? Like we have our Product Categories,
that looks good. I do not want Recent Products, I do want Featured Products, and I don’t want
Top Rated. So probably when we created the child theme, some of these settings just got
reverted back to the default, so let’s go ahead and take care of removing Top Rated
Products and we will also remove Recent Products. To do that, I’m going to go back up to the
top, click on Dashboard. Then here on the dashboard, I’m going down to Appearance, hover
over Appearance, and click on Homepage. Here on the homepage panel, we can select which
sections we want to have displayed on the homepage.
So I want all of them to be displayed with the exception of Recent Products, I’m going
to remove that. And I’m also going to remove Popular Products. So in essence, we’re going
to have the homepage content, product categories, featured products, and on sale products. Then
I’m going to click on Save Changes to save my changes.
Now I’m going to go back to the homepage by going up to the top and clicking on Visit
Site. Now we can see we only have three different sections, which is exactly how I want it to
be displayed. So we’re looking really good so far. Next
up, let’s take a look at the Blog page because I know there are some changes that need to
be happening there, so I’m going to click on Blog. And here we can see at the top, first
of all, this title is in purple and I want that to be this teal color.
To change the color of the links, including the titles right here, I’m going to go back
up to the top, over over the website name and go directly to the Customize panel. Here
on the Customize panel, on the left-hand side, you’ll see there’s a note here that says Typography.
When I open that up, here we can see the Link/Accent Color and that’s what we need to change. So
I’m going to click on Select Color, then instead of purple, I’m going to drop my teal color
right in there. And then I’m going to click on Save & Publish to save and publish those
changes. We can see on the right-hand side, in real
time, it’s already changed to this teal color which is great. Then to close it out once
again, I’m going to click on the X to close the panel.
So we’re done making customizations to our website. Next up, let’s add a sidebar with
custom content to our blog archive page as well as our blog post. To add custom content
to the sidebar, we want to go up to our widgets panel by either going up to the website name
and then clicking on Widgets or you can click on Dashboard, then go down to Appearance,
however over Appearance, and click on Widgets. Here on the widgets panel, you’ll see that
there’s a sidebar section and this is where you can add any kind of custom content that
you’d like. So in this particular example, I want to add my social icons. I’m going to
scroll to the bottom here, find those Simple Social Icons and drag them up to the top right
here, in the sidebar section. Then as we did for the footer, I want to configure
all of the different settings within the Simple Social Icons. So once you’ve added your settings
within Simple Social Icons, scroll to the bottom, then you just want to click on Save
to save the settings. So once the settings have been saved, I can
close this box by going up to the top here and clicking on this [01:50:34] to collapse
this box. The other thing that I want to add in sidebar is my email opt-in form, so I’m
going to be using the Magic Action Box. Once again, I’m going to drag that up to the right
here, place it underneath the Simple Social Icons.
And then here, you could just add whichever box that you’ve already created. You can just
add that right there and then click on Save. Earlier in this video, I went over the Magic
Action Box and I referred you specifically to another video on my YouTube channel where
I show step-by-step, from scratch, how to set up the Magic Action Box. I’ll be sure
to drop a link to that video down below so you can check it out.
Once you have the Simple Social Icons as well as the email opt-in form set up within the
sidebar, Next up, we need to configure our settings within WooCommerce. So to set up
those settings, I’m going to go to the left-hand sidebar, hover over WooCommerce and then click
on Settings. And here we’ll see at the top, you’ll have
a number of different options to set up the WooCommerce settings. The first tab are the
General Options and here we can see at the top that the first thing you need to choose,
of course, is your base location. So I’m in California so I’m going to leave it as US-
California. Note that when you click on this, you got
a dropdown box and you can choose wherever you are located. Also note that there’s going
to be this question mark next to many of these different settings. And when I hover on top
of that, it will tell you exactly what this particular setting does. So for example, for
this one it says, “This is the base location for your business. Tax rates will be based
on this country.” Once you have your base location, then you
need to choose the selling location. I’m going to be selling to every country but if you’d
like to limit the countries where you’re selling to, you can just click on here and then click
on “Sell to specific countries only,” and then choose those countries.
Next up, you have some store notices and APIs. I’m not going to be changing anything here.
I’m going to leave those as they are. Then I’m going to scroll down in here where it
says Currency Options. It says, “The following options affect how prices are displayed on
the Frontend.” So these are the currencies that will be displaying
within your website. For currency, I’m going to leave it as US Dollars since I’m in California.
But once again, when you click on this, just go ahead and choose whichever currency that
you’d like to have featured on your website. Here we have the currency position, I’m going
to leave all of these as they are. Most of the time within WooCommerce, the default settings
are set up just as I need them to be so I don’t make too many changes here. But of course
if you have a different currency and you’d like to have it formatted in a different way,
be sure and go ahead and adjust that here. Keeping in mind once again that when you hover
over each of these question marks, you get a tool tip that tells you exactly what this
particular setting does. Then, I’m just going to scroll to the bottom and click on Save
Changes to save my changes. Next up, once we have our general settings
set up, we want to move on to the Products tab here so I’m going to click on that. And
here you’ll see that you have two different options; both the Product Options as well
as Inventory options. So at the top, starting with Product Options, we have our Product
Listings. And these are the various pages and how you
want the pages to be displayed. So once again, hovering over the question mark, this particular
one for the product archive/ shop page, this sets the base page of your shop. This is where
your product archive will be. So when you first installed WooCommerce and
generated WooCommerce pages, this particular page, the shop page, was created by WooCommerce.
So you should see that right here. If there’s another page you’d like to have featured,
you can go ahead and click on this box and choose that page down below.
I’m going to keep it as the Shop page because this is the product archive/ shop page so
that makes sense. And then moving down the list, you can decide how you want that Shop
page to be displayed; if you want to show products and subcategories or both or one
or the other. You can do so right here. So once again, I really like all the different
default so I’m not going to change any of these but you can go through each of these
different question marks, check out the tool tip, and if you like to make changes, go ahead
and do so here. Scrolling down, then we’ll have our Product
Data. So if you are shipping anything and you want to specify the weight or the dimensions,
then you can do so here and choose the type of weight unit that you’d like to have displayed.
So instead of kilograms, I’m going to use pounds. And instead of centimeters, I’m going
to choose inches. And then, that’s all of how that’s set up.
Product ratings, I want to leave all of these defaults as they are. Then, I’m going to move
down here, product image sizes, if you want to change the size of the thumbnails, you
can do so by changing those dimensions in here. And then keeping in mind, after you
change these settings, you need to regenerate your thumbnails.
You can do that by clicking on this link right here. I don’t need to regenerate anything
right now. Everything we’ve already kind of gone over earlier in the video so I’m going
to leave that all as it is right here. Scroll to the bottom and click on Save Changes to
save my changes. Now, if you’re managing inventory, you’ll
want to click on this link here that says Inventory. And here you’ll see a number of
different inventory options that you can set up within your WooCommerce site. So I’m not
going to be dealing with inventory so I’m going to leave everything as it is.
I’m going to move forward into taxes right here, the third tab at the top right here.
And here, you can configure all of your different text options. So for taxes, WooCommerce, WooThemes
actually has a really great video on their website that goes in much detail about tax
options. So I’m going to refer you to that wonderful video on the WooThemes site.
The page is called Configuring WooCommerce Settings. And you can see here on the left-hand
side, they go over taxes, checkout, shipping, accounts, emails, and all kinds of really
great things here to help you to set up your WooCommerce plugin settings.
So for example when I click on taxes here, you’ll scroll down and they’ve got this awesome
video that goes over the details related to tax settings. So this is definitely worth
checking out. You can also read and see the examples here of the screenshots of what it
looks like within their demo. So in lieu of doing that, because everyone has a different
tax situation, I’m just going to refer you to this particular link here in the WooThemes
site. Back on our WordPress website, next up we
have our checkout settings. So when I click on Checkout at the top, this will bring us
to our checkout options, starting with, at the top, the Checkout Process. And if you’d
like to add coupons and enable coupons, you can just leave the default set as it is with
a check next to “Enable the use of coupons.” If you’d like to create a coupon, you can
go to the left-hand side here, hover over WooCommerce, click on Coupons. And on this
page, it will guide you through the steps to create a coupon.
Moving forward on the Checkout Process page, then you can also enable the guest checkout
if you like, which as it notes down below, allows customers to check out without creating
an account. So by default, this is enabled so I’m going to leave the default enabled
as it is. And then moving down, we have our checkout
pages. Once again, when you installed WooCommerce and created those pages for WooCommerce, these
pages were automatically created; the Cart Page and the Checkout Page. So I’m just going
to leave them as they are right there because that is exactly how I want them.
Also, note that there’s a Terms and Conditions page and if you’d like to create terms and
conditions, you can do so by going up to the top, clicking on + New and Page. Creating
your terms and conditons page and once you create your page and add terms and conditions,
then when you come back to this page right here, you’ll be able to select the page.
Obviously, I haven’t created a Terms and Conditions page so I do not have one here. Actually,
I take that back. It looks like I did, I forgot. So I do have a Terms and Conditions page so
I can just click on that right there and that will set the Terms and Conditions page. Awesome.
Next up, we have our Checkout Endpoints. I’m going to leave all of these as they are. I’m
not going to touch those. And then moving down the line, we have our Payment Gateways.
Now by default, when you install WooCommerce, these three payment gateways will be active
and enabled; Direct Bank Transfer, Cheque Payment, and Paypal.
You can see on the right-hand side, here with the purple check mark, the status when I hover
on top of it says Enabled. So if you want to disable this, then you will just need to
go to the settings for each one of these. You can either do that by clicking on settings
here or you can come to the top and you can click on them one by one.
Now since I have made this change right here for Terms and Conditions, before I move forward
I’m just going to click on Save Changes to save my changes. Once the changes have been
saved, then one by one I’m going to click on these link and I’m going to deactivate
the payment methods I don’t want and make sure that PayPal is activated since that’s
the one I want. And of course, this is a personal decision
related to your online store so however you’d like to set up your store or whatever payment
method you’d prefer, you can select them and configure those options within these pages.
So I’m going to turn this off, scroll to the bottom and save the changes.
Then I’m going to go to the next one, the cheque one, and make sure that one is turned
off. It looks like it’s on so I’m going to uncheck it there and click on Save Changes.
Then I don’t believe this one is active but I’ll check it anyway. Cash On Delivery, that
is not active so that’s good. Then I’m going to click on PayPal and that
one is enabled so that is great. Here you can set the title and description for your
PayPal page. Once again, hovering over this, it says, “This controls the title which the
user sees during the checkout.” Then, you want to make sure that you add your PayPal
email. This is really important. As we see here, it says, “Please enter your
PayPal email address. This is needed in order to take payment.” So you want to make sure
that whatever you’re PayPal email is, you want to make sure that you add it here. Then
scrolling down, you have both the shipping options as well as the advanced options within
Paypal. Now going back to the WooThemes site, back
to that configuring WooCommerce Settings page, here on the left-hand side, when I click on
checkout, since we’re on the checkout tab within our WordPress website, here we see
there is a really great video on the checkout settings that you can check out.
And when I scroll down to the bottom of this section here where it says Payment Gateways,
here we can see there’s a link that says, “Learn more about the core payment options
included in WooCommerce for free.” That includes PayPal standard. So I’m going to click on
this link and no worries, I’ll be sure to drop the link down below so it’s really easy
for you to find it. And here we see the core payment options that
come included with WooCommerce. So here we see PayPal Standard. I’m going to click on
this link and then we’ll see all of the various settings within PayPal Standard in WooCommerce,
starting with this awesome video right here that you can check out.
On the left-hand side, you see all the various sections within the PayPal section of WooCommerce,
including shipping options, advanced options, and the API credentials. So just click on
each of these as you go and you’ll see exactly a lot more detail about shipping options and
advanced options. Then scrolling down to the bottom of the page,
we’ll see here we have our API Credentials. This is an important if you’d like to process
refunds via Paypal. So as it notes here, “Enter your PayPal API Credentials to process refunds
via PayPal.” Here, we need to add the API username, password, and signature. And it
says, “Learn how to access your PayPal API Credentials here.”
So I’m going to go ahead and click on this link that says “here,” which will bring us
to the Developer PayPal page with the step by step instructions to create your API Credentials.
Starting with, you want to log in to PayPal.com. Then you want to navigate to the API Access
page and depending on what kind of interface you’re using, either the classic PayPal user
interface or the other one, there’s two different interfaces, you can either click Tools and
then go to Manage your Business and API Access. Or in my case, since I’m using the classic
PayPal user interface, I’m going to go to my account, profile, and my selling tools.
So to do that, I’m going to click on this link here to go to PayPal.com. Keep in mind
that you do need to have a business account, as it notes here, “You must have a PayPal
Business account t make calls to the live PayPal servers.” So you want to log in to
your Business account on this page, PayPal.com, so I’m going to click on this link.
I have a PayPal Business account. So once I log in, then I’m going to go to the top
corner, hover over the account icon right here, click on that. And then I’m going to
click on Profile and Settings. When I click on Profile and Settings, then I’ll see on
the left-hand side, my profile. Then here into my Selling Tools page, you’ll
see the API access link. As it notes, “Manage API credentials to integrate my PayPal account
with my online store or shopping cart.” And there’s a link here that says Update. I’m
going to click on Update, which will bring us to the API Permissions and Credentials
page. There’s two options, Option 1 and 2. I’m going
to choose Option 2 which says, “Request API credentials to create your own API username
and password.” Keep in mind that when we refer to the developer documentation on PayPal.com,
I’m simply following the steps that they’ve outlined here, where it says Creating Classic
API credentials. So I went to PayPal.com, I navigated to the
API access page. And now, here we are to generate the certificate set and to request the API
credentials. As it notes, we want to choose Option 2 and I want to click on this link
that says “Request API credentials.” So going back to my page here, I’m just going
to click on this link. Now, I’ve already requested them so because I’ve already requested them,
I have this link that says View API Signature. However, if you’re doing this for the first
time, most likely you see the link that says “Request API credentials.”
So whichever one you see, request API credentials or view API signature, this is the link that
you want. You’re going to click on that and then you’re going to grab the API username,
password, and signature by clicking on Show. And then, clicking on Done.
Then once you copy the API credentials, you want to go back to your WordPress website,
go to the PayPal page, scroll to the bottom and you want to add the API username, password,
and signature in these fields here and click on Save Changes to save your changes.
So those are the main settings to set up PayPal Standard for your checkout options. If you’d
like to learn more about PayPal Standard, once again, be sure to check out the documentation
on WooThemes.com and I’ll be sure to drop the link down below so you can easily get
to this page. Next up, let’s change our settings for the
shipping options. So going back to our website, at the top I’m going to click on Shipping.
And here on the Shipping Options page, we can see we have a number of different shipping
options we can include. We have flat rate shipping, international delivery, free shipping,
local delivery, and local pickup. So depending on what kind of shipping you
want to set up, you can do that right here. Now for the sake of this video, I’m going
to be creating a ecommerce website with free shipping. So I’m just going to scroll to the
bottom here. And here under Shipping Methods, we can see
that here, free shipping has been enabled. When I hover over the question mark, it says
enabled. Now to make it a little bit easier to see, I’m just going to drag this to the
top here so that free shipping is the first one, since that’s what I want. Then, I’m going
to click on Save Changes. This just makes it easier to see.
Now to go directly to the Free Shipping page, you can either click on this link here, Free
Shipping, or coming down to the bottom here, you can go to Free Shipping and click on Settings.
I’m going to click on Settings right here and then we can see all the different settings
within the Free Shipping page. So everything looks good, I’m going to sell
to all countries. Method availability, so I’ll leave it like that. Everything is set
up so I am ready to go. Now if you have some specific shipping requirements, I know many
questions I received from a lot of you, you have really specific shipping needs, so you
can read more about shipping and find the shipping that works best for you by going
to, once again, the documentation at WooThemes.com. This is really awesome info here. You just
want to go to the Configuring WooCommerce Settings page, go to the Shipping on number
five. I’m going to click on that. It’ll bring you right to the section related to shipping.
You can read all about this and I also want to point out one more thing. When you scroll
down, here it says WooCommerce Shipping Documentation. And this is more detail about shipping. So
I’m going to click on this just to show you really quick. You can see, here you can read
about the Core Shipping Options that come included with the WooCommerce plugin.
One other thing that I want to mention because I get questions about this all the time, there’s
an extension here for specific shipping needs, if you have specific dimensions or weight
that you need or different currencies or all that stuff. If you have specific advanced
shipping needs, you can check out the extension called Table Rate Shipping.
So just want to go to the top, WooCommerce, click on Extensions. And then here on the
search box for WooCommerce extensions, you want to do a search for Table Rate Shipping.
This is a premium extension but it will really help you out if you have advanced shipping
requirements. As we see here, when I click on this Table
Rate Shipping, we can see that it makes it possible for you to create complex rules for
shipping your products all over the world. You can define multiple rates based on the
product’s destination, you can have multiple rates per zone, you can add rules based on
product weight, number of items, shipping class, and price.
So this was a really helpful extension for some of you who have advanced shipping needs.
If you have simple shipping needs though and you can stay within the confines of these
shipping options that come built-in within WooCommerce, then you’re good to go.
In this particular instance, for example, I’m just going to leave it as Free Shipping.
Leave it like that and then I’m going to move on to accounts by clicking on Accounts.
Here in the Accounts page, as it notes at the top, “These pages need to be set up so
WooCommerce knows where to send your users to access account-related functionality.”
Now when you installed WooCommerce and created those pages for WooCommerce at the very beginning
of this video, all of these pages are already created.
So if you followed along, then you won’t need to, hopefully, make any changes on this page.
Here where it says My Account Page, you should just have this link, this page right here
that says My Account. You can see when I click on it, there’s all these other pages to choose
from but by default, I’m just going to leave it set up as a default which says My Account.
All the other account [02:09:29] default so I’m going to leave those set up as they are.
I’m not going to change anything. Here, you can see there’s Registration Options. I get
a lot of questions about how to enable registration of users, so you can select which works best
for you. I’m going to leave all of the defaults here and just click on Save Changes to save
my changes. Finally, last but not the least, when I click
on the Emails tab, here we can find the email settings and email templates to edit within
our WooCommerce website. Once again, one of the great things about the WooCommerce plugin
is that the default settings are set up so that you really don’t need to make any changes.
But if you would like to customize them, this is where you can do it.
Here for example, if you want to add a header image of your logo or something related to
your brand, you can upload an image right here by clicking on the media uploader. Then,
down below, you can change the email footer text by just adjusting that right here. And
if you’d like to change the colors of the email templates to match your brand, you can
do so right here. Once you made your changes, go ahead and click on this button that says
Save Changes. To review the different templates and see
what’s going to be going out to your customers, you can click on each of these different links
and you can see the message that’s going to be sent. Once again, I prefer just leaving
the default so I’m not going to change anything. I just wanted to point it out in the event
you want to customize your message. So that covers the settings within the WooCommerce
plugin. Once you have all the settings set up within WooCommerce, you are ready to go.
So if you’ve made it this far, in the video, thank you so much for following along and
congratulations because looking at our homepage, your website should look something like this.
Here at the top, you’ll have your logo or your title. Then you should have your menu
navigation area, and then your tagline, followed by, on the homepage, a various array of sections.
In this video, we added our Product Categories, then we added our Featured Products, our On
Sale Products. And then at the very bottom we have our footer section with customizable
content. Now behind the scenes, I just checked out
this homepage and I was like, “Wait a minute, we don’t have our actual prices here. We have
our original price and it’s crossed out because it’s on sale.” So that’s good, but the new
price is not showing up. So I’m just going to cut to the chase and
show you how to fix that because of course, we want to make sure that we have our sale
price being displayed. So let’s just fix that really quick by going up to the top, clicking
on Dashboard. We need to make a change to the custom code we added earlier in this video.
So I’m going to go down to Appearance, hover over Appearance, and click on Editor. Then,
here we see on our child theme Stylesheet, we created a child theme earlier in this video,
I’m just going to scroll to the very bottom. And here you see this code right here: mark,
ins. When we, earlier in this video, removed the
number next to the product category, we inadvertently, accidentally also removed the sale price.
So we want to restore the sale price. It’s a very simple fix. All we need to do is remove
this section: the comma, the space, and ins. Just delete that so that it simply just says:
mark and a bracket, display: none and a closing bracket. Just like that.
And then we want to click on Update File to update the file. Now when we go back to the
homepage by going up to the top and clicking on Visit Site, now we’ll see that we have
our Product Categories. The number here is still not displayed because if you recall
earlier in the video, I wanted to keep a very clean look and not have a number next to each
of these different categories. I just wanted the title so we have that, that’s good.
Then, now scrolling down, now we can see our sale price, which is perfect. We have the
original price, it’s struck through and we have the new sale price. So let’s take a look
at one of these different products. When I go to the Product Category here, I’m
going to click on this one. For smoothies, this will bring us to the smoothie product
category. And then I can check it out by just clicking on this thumbnail I mentioned right
here. And now, we see we have the product page.
So we have our beautiful product image, which when I click on it, it opens up into a really
cool light box display. Then we have our product title. We see it’s on sale, we see the original
price and then the sale price. And then also, because we had created variations for this
product, we can see when I click on this box here, there’s all this different variations
I can choose. So then, just below that, we have the product
description and any additional information about this. And then, if anyone wants to leave
a review related to this product, they can do so by adding a review right here.
So let’s go through the process of actually adding a product to our cart and checking
out. If I want to order this, for example, I’m going to come down here. I’m going to
click on Add to Cart. Then, we’ll get a message: this product was successfully added to your
cart. You can view cart by clicking on this link here or at the top here, you can see
when I hover over this, you have a really cool dropdown box with the thumbnail image
that also gives me a way to view the cart or directly to checkout.
So I’m going to click on this link here that says View Cart to go to the cart page. And
on the cart page, you’ll have your title, your description, the price, the quantity,
and then the final price right here. If you have a coupon, you can add that in right here.
And then here, we can see, when I scroll down, you have the Cart Totals.
Review the different contents, details of the order. Then we can check out by clicking
on Proceed to Checkout. Once you click on Proceed to Checkout, it’ll bring you to the
checkout page. And here on the left-hand side, you can add your billing details. On the right-hand
side, you can review the details of your order. Now scrolling down, if the Ship To address
is different from the billing address, then you can just fill out this information as
well. I’m going to keep the two addresses the same so I’m going to unselect that by
just unselecting it. And now, the billing address and the shipping address will be the
same. On the right-hand side, you just want to scroll
down, review the details of the order. If there’s a terms and conditions box, then you
just want to read the terms and conditions. And then once you’ve read and accept them,
you can click on this box right here. Then you also need to check this radio button
here for PayPal. As it notes, when you click on the button, it says, “Pay via PayPal; you
can pay with your credit card if you don’t have a PayPal account.” So once you click
that, then just go ahead and click on this button. It says Proceed to Paypal to proceed
to PayPal. From there, your customer can pay for the
product by logging into PayPal and paying via PayPal or as mentioned, they can simply
pay with their credit card. So back on the homepage, we have one last
thing I forgot that we haven’t done and that is to create some blog post. So when I go
to the homepage and I click on Blog, here we have our blog archive page and we have
the default blog post that comes with our WordPress installation which we need to delete
and we need to create a blog post. So to create a blog post, as we created a
page, you just want to go up to the top, hover over + New and click on Post or you can go
to dashboard, click on Dashboard. Go down on the left-hand side to Posts, hover over
Posts and click on Add New. Here on the Add New Post page, the first thing
we need to do is give our new post a title so I’m going to pop in the title right there.
And then here in this white box, we can add the content a blog post. There’s two tabs;
the Visual tab and Text tab. The Text tab, once again, as mentioned previously in this
video, is the visual view. This is a much easier, what-you-see-is-what-you-get view
for your blog post. And the Text tab will give you the behind-the-scenes code that WordPress
is generating to format the content for the blog post.
I prefer the Visual tab so I’m going to leave it like that. Here I’m going to add an image
as well as some text. Starting with the text, so I’m just going to drop some text right
here in this white box. And I also want to add an image, so I want to place the cursor
before where I want the image to be displayed. So here I have the image I wanted to be displayed
to the left of these words right here. So just place the cursor there, then click on
Add Media. You can either upload a new file or you can use an existing image from your
media library. So I’m just going to use an existing image so I’m just going to scroll
down here and choose this particular image right here.
On the right-hand side, we see the attachment details. That all looks good. Here where it
says Attachment Display Settings, I want this to be aligned to the right-hand side. We’ll
do right-hand side. I want it to link to nothing so I’ll just click on None. And then here
for the size, you can choose whatever size you would like. I’ll choose the Medium size.
And then I’m just going to click on this button here to insert this into the post. Once the
image and text have been added, then on the right-hand side, I’m going to choose a category.
And here I’m just going to add a new category by clicking on Add New Category.
Then I’ll just call this Recipes. And Recipes’ in there and then once again, to create the
category, I’m going to click on the button one more time that says Add New Category.
If you’d like to give your post some tags, you can do so right here.
So I’ll just add some tags, keeping in mind that each tag needs to be separated by a comma.
Once you have your tags added, then you can click on this button here to add the tags
to the post. Then scrolling down, here we have the Magic Action Box. I want this to
be displayed underneath the blog post. So here, I’m going to select the one I want.
I’ll choose this one, the Sign Up one. Then everything else looks good. So we are good
to go on our blog post. Last stop, we need to publish the post by
clicking on this Publish button here on the right-hand side. Once the blog post has been
published, we can check it out by clicking on this link here that says View Post or we
can click on this button in the middle that says View Post.
I’m going to click on View Post. Let’s go ahead and check it out. And here we have our
single post for our blog. So it looks good, we have our title, the published date, the
author, then we have the text of the post, our smaller image. And then scrolling down,
we have our email opt-in form, sharing features, and the comments where anyone can drop a comment
related to this post. So that is how you create blog post for your ecommerce WordPress website
using the Storefront theme. Back on the homepage of our ecommerce WordPress
website, you’ll notice that we still have to also add the email opt-in form to the top
of our page. At the beginning of this video tutorial, I have shown you that by the end
of this video, we are also going to add this email opt-in form bar so that we can capture
leads directly from our website. So this is the last step to complete our ecommerce
WordPress website using the Storefront theme. The good news is that I’ve already created
a video showing how to set this up. So I’m going to refer you to my YouTube channel,
specifically to this video called Gain Sales & Subscribers with Hello Bar WordPress Plugin.
And in this video, I’ll show you step-by-step, from scratch, how to completely install and
set up the Hello Bar WordPress plugin so that once you’re done watching this video, you’ll
have an email opt-in form at the top of your website that looks just like this. So I’m
going to go ahead and add this Hello Bar plugin to my website behind the scenes and I’ll meet
you on the other side. So here, we are back on the homepage of my
ecommerce WordPress website and I just finished adding the Hello Bar plugin to my website,
following steps in my previous video on my YouTube channel. Here, we can see the Hello
Bar plugin displaying at the top of our website which gives us a really easy way to start
capturing leads directly from our site, front and center, on our homepage.
So that wraps up the last feature that I wanted to add to my ecommerce website. If you followed
along this far, thank you so much for joining me and staying with me. And congratulations
because you should have an ecommerce WordPress website that looks something like this.
Before we go, I want to give a quick shoutout of thanks to the team at WooThemes for making
this beautiful minimalist ecommerce website theme available to all of us in the WordPress
community for free. This is a really lovely and free ecommerce theme.
Thank you so much for watching, everyone. I’ll come out with another video very soon
so please feel free to leave a comment below, like and share this video with your friends,
and of course, please subscribe to my YouTube channel to get updates on upcoming videos.
Thank you so much. I hope you enjoy your new ecommerce WordPress website using the Storefront
theme and I’ll see you in the next video. Until next time, I hope you have a great week
and continue learning new skills that help you to build your business on the Web. www.facebook.com/DBTranscriptionServices

7 Comments

  • Mohd Shad

    Hi thanks for helping..
    There some questions ..?
    I installed plugin in woocommerce but the product category are not showing .
    Please help

  • Robin Williamlove

    hello katrinah at 1:23:49 ur products images looks sized in standart i couldnt do it for my website, i dont have much coding skills i use storefront too and also if i can size them all standartly in my site one of them longer layout other ones short i want all of it to look same size and in order, if you can help me with that i will be appritiate, hypergroceries.com is my site

  • Eric Hepperle

    20:00 – Install Storefront Theme
    26:00 – Header image dimensions (1950 x 250)
    30:30 – Static front page
    34:00 – Register for JetPack –> lets you add a logo if theme doesn't support.
    47:45 – Actionbox plugin for email subscription list

  • Eric Wamburu

    Thank you so much for the video. You are a true teacher and gifted one at that. It truly helped in the development of the ecommerce site i have done. However i need help in creating
    1. QR Code generator for the invoice. This will facilitate in the payments after scanning.
    2. Customer statement for the total items purchased
    3. How can i add other payment platforms like Mpesa. (Please check https://developer.safaricom.co.ke/docs#m-pesa-result-codes for more.

    Thank you for your response

  • Peg Wolf

    I love and understand your videos but I was trying to follow this storefront video and it not working out the same way as you are showing on the video and now I am really confused. I was working on the About page and it won't allow any information to show under it. I just want to stop and start all over…but I don't know how to do that either.

Leave a Reply

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