Articles

How To Make A WordPress Website With E-Commerce (FOR BEGINNERS)

August 12, 2019


Hi everyone, I’m Katrina and in this video
let’s go over how to create a responsive e-commerce website using WordPress and the free WordPress
e-commerce theme by WooThemes called Mystile. In addition to creating a responsive e-commerce
website using the free Mystile theme, we’ll also be focused in this video on how to create
an eBook store that has similar functionality as Scribd.com. So, if you’re not familiar with Scribd.com,
Scribd is a digital library where people can publish, discover and read books of all kinds
on the web or on any mobile device. So in this video; we’ll be creating our own
version of Scribd.com using WordPress and a plugin called Google Doc Embedder and I’ll
show you in this video how to configure everything and how to set it up. So, I received this request to create a video
focused on creating an eBook store website from James. So, thank you James for this great suggestion. I’m sure there are many others out there who
are also looking to sell eBooks and other downloadable products on the web. So, this video is for all of you. So let’s take a quick look around the responsive
e-commerce website we’ll be building in this video. So here we are on the homepage of the responsive
e-commerce website we’ll be building in this video. We can see at the top, on the left we have
the website name and a short tagline. You can also include your logo if you’d like
in this area. Then, on the right-hand side, you have your
menu navigation area and just above that, you have some different online store e-commerce
features including the checkout button and a really cool box here where anyone can easily
search for products in your product catalogue. Now, I also want to note that we don’t see
it right up here but this particular theme also comes with an additional menu navigation
area right here so if you’d like to include that, you’ll have an additional area where
you can add more menu navigation items. So, I prefer having a really minimalist type
of website so the focus of attention is pretty much only on the products so I try and keep
my menu navigation items here really simple, one words and if at all possible I try not
to have two menu areas but of course if you want to include that, you will have another
option here to include more menu navigation items right here above the title or the logo. Okay, so just underneath this header area,
then you’ll have this full width image; so you can feature a full width image on your
homepage and along with that you can include a title which pretty much summarizes what
your website is about. So in this particular demo I am going to be
building a hypothetical e-commerce website for a digital library and eBook online store
focused on yoga and surfing eBooks. So here’s my title right here, “Welcome to
the best digital library of eBooks on yoga and surfing on the interwebs.” So of course you can include whatever title
you would like here as well. Just underneath this title section and the
image, you’ll have some product categories so you can add all of your different product
categories here. And the good news about this particular theme
is that if you prefer not to feature product categories on the home page, this whole section
can be removed and easily turned off, easily disabled. Okay so, just under the product categories,
then we have our featured products and now as we can see here, the featured products
for this hypothetical eBook store includes thumbnail images of all the different eBooks
that I’ll be offering in my product catalogues. So we see those are all right here. Then underneath the featured products, you’ll
have your Footer and in the Footer, you can add whatever kind of customizable content
you’d like. In this example we see that I’m including
some common pages that most people are interested in checking out including the About page,
The Blog, a Contact page, a Frequently Asked Questions page, Press Coverage page and then
of course, the Shop page. Then I’ll also include in this demo the social
icons so anyone can easily connect with you on the social web; either via Facebook or
Google+, Twitter, Youtube or some other social network. And then finally on the right hand side, it’s
always a good idea whenever you have a website whether it’s an e-commerce website or business
website or a personal website, it’s always a good idea to start capturing email addresses
of your visitors so that you can stay in touch with them on a more regular basis via email. So I’ll show you how you can setup this sign-up
form in this video. So let’s take a quick look at what one of
the product pages will look like when we’re done this particular e-commerce online store. So I’m going to scroll down here and here
we see, here’s one of my featured products the “Yoga Stretches for Beginners” eBook. So I’m going to click on this particular item. And now we’re on the product page of this
particular ebook. So you’ll note that on the left hand side
you have a large product image of your product and when I click on this image, it will open
up into a really nice light box display so anyone can more easily see the image of your
product. Just next to the product image, you have your
product title, the price, a short product description and then of course, the most important
thing on this page, the “add to cart” call to action button. Then just below this section, you have your
product description and your reviews. And note that here in the product description
box, this time we’re going to add this Google Doc Embedder plugin so that the display of
the pdf of your ebook can be displayed. So perhaps you may want to share with anyone
who’s checking out this particular product a section or a part of the ebook in order
to encourage them to buy the whole thing. So for example, if you just want to share
with them the first chapter, you can do so by embedding the pdf or the doc in this particular
plugin view right here so anyone can easily scroll around. They can also enlarge it by clicking on this
zoom-in button right here. You can see it gets larger or they can reduce
the zoom by just clicking on this button. If there’s more than one page, they’ll have
the left and right buttons here and then finally, they can click on this button here to open
the entire pdf or document in a new window. Just underneath the embedded document, then
you’ll also have a link here where anyone can download this particular section or this
particular document. So again note that we’re just including Chapter
One as a motivator for anyone to actually buy the entire ebook right here. So this particular feature will include an
embedded document in the product description and then a link here where anyone can download
the section of the pdf you’re including in this embedded document right here. Just underneath the product description, you’ll
also have some related products so you can cross–sell or up-sell other related products
with the product above and then finally below that, we’ll have the Footer once again with
all of the customizable content. So here we are on the product page. Let’s go through the actual shopping experience
that a potential customer would have when they want to buy an eBook on your site. So first they would come to the product page
and they would click on the “Add to Cart” to add the product to their shopping cart
and then here on their shopping cart, they’ll see a thumbnail image of the eBook that they’re
ordering, the eBook title, the price and quantity and the total and then down below they’ll
also see their cart total. So they’ll see their subtotals and keeping
in mind, this is an eBook so upon payment, they’ll have an automatic download so there
is no shipping attached to this so the shipping is free, and the order total is $10.00. Now if they wanted to order on top of the
e-book a physical product, let’s see how that would work. I’m going to go to the shop page, and click
on shop. And then I’m going to click on this t-shirt
to purchase this t-shirt. And we see here, just as we saw with the e-book
you’ll have a thumbnail image of the product, the physical product on the left hand side
which opens up into a really nice lightbox display. Then you’ll have the product title, the price,
a short excerpt, or description, and then here you’ll see here are the product attributes
and variations. So for example you’ll see when I click on
small, this particular t-shirt comes in a number of different sizes, small, medium,
and large so you can choose any size you want and I’ll show you in the video how to set
up the different attributes for a particular product. And then scrolling down you’ll see that instead
of having the embedded document, the PDF or other document right here, now I just have
a simple product description about the t-shirt, as well as additional information which refers
to the different sizes and attributes of this particular product comes in, and finally when
you do have reviews those will show up in the reviews tab right here. So I’m going to add this particular t-shirt
to the cart, by clicking on add to cart, and once again we see the message, okay this particular
t-shirt was successfully added to your cart. So you can click on this particular button
here to view the cart. So I’m going to click on view cart, and now
we see we have two products in the cart, both the e-book as well as the t-shirt. So the t-shirt is $40 and when I scroll down
now we see the cart sub-total is $50, $10 for the e-book, $40 for the t-shirt, and also
note I have a flat rate shipping here of free, so I have set the shipping for these two products
up, I’ve set the shipping for the e-book to be free because it’s a free download, there’s
no shipping. And I’ve also set the shipping for the t-shirt
to be free shipping as well. Now if you’d like the t-shirt or the physical
product to have an actual price, I’ll show you in this video how you can set one product
to have one shipping price and another product, especially the e-book to have no shipping
since it’s a downloadable product. Also note that there’s a coupon box here where
you can apply a coupon to your order or to a specific product so I’ll show you in the
video how to set up coupons. I have a really simple cart coupon here called
summerfun, so I”m going to apply the coupon by entering it in, and then clicking on apply
coupon. Okay great, so we see the coupon code was
applied successfully, so when I scroll down now we see the cart subtotal was $50, shipping
is free, and I have this new five dollar discount of $5, so the order total is $45. So the next step is a customer would click
on proceed to checkout to go to the checkout page, and here on the checkout page they can
simply fill in their billing address, and shipping address, and then scroll down, check
the details of their order, and then they can click on place order to check out and
pay for their order. Now note that here we see I have set up this
online e-commerce store with PayPal, just because PayPal is the easiest and fastest
payment method to set up in this website, but of course if you want to have some other
kind of payment method, you can set up some other kind of payment method and I’ll show
you how to do that as well in this video. Now note that if you do set the online store
to be with PayPal, then a potential customer would click on place order, they would be
sent to paypal where they could either log in to their paypal account, and pay via paypal
or if they don’t want to use paypal or they don’t have a paypal account they can simply
log in as a guest, they do not have to have a PayPal account, and they can simply pay
with their credit card or debit card for the products they want to buy in their store. So a potential customer does not need to have
a PayPal account to pay as a guest on PayPal. In addition to setting up the online store
in this video, I’ll also show you how to create the internal pages of your website. So for example, most likely you’re going to
want to include an about page about your business or about you or your team, so I’m going to
click on about right here. And here we are on the about page. So I’ll show you in this video how to create
a full-width about page which includes either an image or text or video or perhaps a combination
of all of the above, so you can share with the world what your business is all about. After we create the blog page we’ll also create
the blog index page and some blog posts. And having a blog is a really great way to
start ranking in the search engines because search engines like Google love fresh content,
and having a blog gives you a really easy way to add fresh content to your website on
a regular basis. So I’ll show you in this video how to set
up the blog, including for example here we see we’re on the blog index page which will
list all the different blog posts you may have or at least an excerpt of the post, but
when I click on this particular one for example, Top 10 Health Benefits of Yoga, you’ll see
here I have the image for the blog post, the title, there’ll be some additional information
about the blog including what category or tags it’s grouped in, as well as the actual
blog post itself. Then just under the blog post we’ll have some
additional social sharing features so anyone who visits can easily share the content to
Facebook, Google+, or Twitter or some other social network. And we’ll also include this email sign-up
form as well, underneath each blog post, so I’ll show you how to set up all of this in
the video. Finally, underneath the blog post section
you’ll see here is the comments section, and I’ll show you how to set up this comment box,
this is a special comment box. It’s not the default comment box that comes
with WordPress, it has some extra social sharing features within the actual comment box, so
I’ll show you how to set this up in the menu. Okay then in the right hand side we’ll have
our sidebar with our customizable content. And then we’ll have our contact page. So I’m going to click on contact right here. And here you’ll see you’ll have a really simple
form where anyone can easily contact you directly through your website without leaving your
website, by just sharing their name and their email, leaving you a message, and then they
can just click on submit to send you a message directly from your website. Finally you’ll note that here is the shop
page, so I’m going to click on that right here. And here on the shop page, all the different
products in your product catalog will be featured. So if you are creating an ebook online store
then all of the different thumbnail images of your ebooks will show up here. Note also in addition to the ebooks I’ve also
added some actual physical products, so I will show you in this video how to set up
some physical products with product variations and attributes as well. Now there’s two really important features
that I want to point about this specific free WordPress e-commerce theme called Mystile. Number one, with this theme, this is a responsive
theme which means that this website is going to look amazing, not just on laptops and desktops
as we see here, but it’s also going to look really really nice on mobile devices including
smart phones and tablets, so if you have an android or iPhone or some other kind of tablet,
this particular website is going to resize to fit the new size of the device. So let’s take a look at what that’s going
to look like. So here at the bottom and I’m just going to
take this side and reduce the size of the window and you see here as I reduce the size
of the window the entire website is changing to fit the size of the window. So here we see that the slider with the title
is now no longer featured in this view, this is like a smartphone version of the website. We see now the menu item has collapsed, so
when I click on these three buttons, these three lines right here, then my new drop down
box will be displayed so what we’re looking at now is the view that you can expect of
your website when you’re on a smartphone. So you’ll be able to navigate to any of the
internal pages by clicking on this orange button right here with the three lines. And then note that all of the different sections
of the website are now stacking up really nicely one on top of the other. Here’s our product categories, they’re really
easy to see. They’re not too small, all the featured products
are here. This is just a really beautiful theme for
any kind of e-commerce store, whether it’s an e-book or a product store, this is just
a really gorgeous, minimalist theme that is responsive, so it will look gorgeous on mobile
devices, as well as on laptops and desktops. In addition to being a responsive e-commerce
theme, this theme, the other feature I want to point out is that the colors of this particular
website can be changed with one click of the button. So we see that for example, when I hover over
the website title here it’s orange, and when I hover over each of the different menu navigation
items here they’re orange, and when I scroll down to the very bottom of the footer these
icons are orange as well. So this particular design here is the default. I actually really love the orange I think
the buttons really stand out but this theme also comes in other colors, I believe like
blue and yellow, and green perhaps, there’s quite a few colors you can choose from. Keep in mind that the background of this theme
will continue to stay white, so it’ll pretty much just look like this the only difference
is that when you change the color, these different links will change throughout the website to
the color you choose. But again, if you have a different color for
your brand or for your business or your online store, then it’s always a good idea to match
the colors to the look and feel of your log and your website, and you can easily do that
in this them by choosing one of the other colors that is provided within the settings
of the theme. One last house keeping issue before we jump
into building out this website, I just want to point out as your looking at the video
that there’s this player bar at the bottom of the video, and on the right hand side there’s
this gear, this circle with all of these little widgets in it, and when you click on this,
you’ll note that you have a number of other quality options to view this video in. So for the best quality of this particular
video, to see everything more sharply, I recommend you click on the 720 HD if you are able to,
If you’re not able to view this video in HD because of your internet connection or some
other issue then no worries, but if you can view this in HD then this is the best version
for you to choose in order to see this video in a much more crystal clear kind of way. So just a heads-up on the quality options
of the YouTube video. Okay, so back on the homepage of the website
we’ll be building in this video, this is where we are headed to right here, so 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
also need web hosting. In this video I’ll be using hostgator.com
and at hostgator you can get both the web hosting as well as the domain name. I’ll also be using a coupon to get an extra
discount off of my order at Hostgator. And that coupon is wpcoupon25. So if you decide to go with Hostgator be sure
to use wpcoupon25 as well to get an extra discount off of your order also. I do want to mention as well I do receive
a small referral from Hostgator so thank you in advance for your support of helping me
continue to make these free WordPress training videos. Once you have the web domain name and the
hosting the next thing you’ll need is the theme and as mentioned in this video we’ll
be building out the Buro theme. Buro is a premium WordPress theme by WooThemes. It’s a responsive mobile friendly theme and
you can get this theme at WooThemes for $70. Finally we’ll need some time to build out
this website. And I’m estimating it should take roughly
two hours, I’ll try to go fast to speed things up. But please set aside some time to get this
website up and running by watching the video. Okay, so in sum the total to get this website
up and running is less than $95, and again that’s using the coupon code wpcoupon25 at
Hostgator. So what are the three steps we need to take
to get this website set up? Well #1 we need to get the domain name and
the web hosting. Second we need to install WordPress and finally
number three we need to build the website. So let’s take care of step #1 by heading over
to Hostgator and getting the domain and the web hosting. So here we are on Hostgator.com. To view the web hosting plans go ahead and
click on the button in the middle that says “View Web Hosting Plans”. And here we see there are three different
plans to choose from We have the Hatchling Plan, the Baby Plan, and the Business Plan. If you are a small business owner, or if you
are just getting your website up and running for the first time, most likely the Hatchling
Plan or the Baby Plan would be a good fit for you. The difference between these two is that the
Hatchling Plan gives you a way to host one website domain, whereas the Baby Plan gives
you a way to host as many website domain names as you would like. So there’s definitely more of a value in the
Baby Plan since you can host as many websites as you would like under one account. But if you are just getting started as mentioned,
most likely you only have one domain at the moment, then you can give ahead and click
on the Hatchling Plan to sign up for that. So I’m going to click on the “Baby Plan” because
I want to order that one. And next we’ll see that the next step is we
need to choose a domain. If you already have a domain then you can
just enter that in this field and go ahead and click on “Continue to Step 2”. And, if you need to get a domain name for
your website then you can enter the domain name you would like here and you can click
on “Continue to Step #2”. Now just note that down below here it says,
“enter a coupon code”, and by default you’ll automatically get a coupon from Hostgator. But if you want to add even more of a reduced
rate on top of that, you can use this coupon which will give you an extra amount off of
your order. So I’m going to put “wpcoupon25”, that’s a
special coupon that you add to get more off the total when you go to check out of your
order. So I’m going to leave it at wpcoupon25 to
get a little more off of my order, and I’m just going to put in a random domain name
for the moment just to show you for the demo purpose what the next page looks like. So I’m going to click on continue to step
two which brings us to step two, the billing information page. Now on this page we see the first thing at
this page is the package type. I had signed up for the Baby plan so we see
that right here. And then we see the current billing cycle
that I am signing up for. Now I do not want to sign up for 36 months
of web hosting all at once. I want to keep my expenses much lower than
that. And I prefer to pay month-by-month. So I’m going to click on this here and I’m
just going to choose a billing cycle of one month at a time that way I’ll be paying one
month as I go for my web hosting. The next thing you want to do is you want
to choose a username and a security pin. Then you can fill in your different billing
information right here. Then when we come down here we’ll note that
there are hosting add-ons. By default, Hostgator has you signed up for
the domain privacy as well as the SiteLock. So you can choose whether you want to include
these add-ons or not. I’m going to uncheck the SiteLock because
I have some other ways that I intend on protecting my website when I start building it so I don’t
want to sign up for the SiteLock. And the privacy protection, this is really
optional as well. So it’s optional if you want to use it. I do recommend signing up for privacy however,
and this is why. When you create a web hosting account on any
kind of web hosting company, by default if you do not have privacy your account details
including your address, your email address, and your phone number may show up in the web
host database for anyone on the internet to be able to access. So I prefer keeping my address, my phone number,
and my email address private. So whenever I buy a new website domain name
I always sign up for privacy protection. If you don’t want privacy protection though,
you can save some money by un-checking this. I’m going to leave it on for the moment though. Then you can just come down here and here
you can see here are the details of your order. We note that with this coupon, wpcoupon25,
we’re getting almost $10 off so essentially the first month of web hosting is free with
this coupon. And we can see that here is our domain name,
and our hosting add-on of $9.95. So in total, we’re looking at under $25 to
get started. If you want to save some more money as mentioned,
you can uncheck the privacy protection and you’ll note that now the total is under $15. But once again, I like getting privacy, so
I’m going to leave that on. And the last thing that you want to do, is
that you want to make sure that you click on this little box here that says, “I have
read and agreed to the terms and conditions of use.” So, once you have your hosting order all ready
to go and when this looks good to you, you can go ahead and click on “create account”
to create your new web hosting account. So once you click on create 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 on my email account, here’s
the email from Hostgator with my account info. So I’m going to click this email to open this
and I want to point out two things. Number one, the first link 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 user name and the temporary password. So, I’m going to copy this password here,
the temporary password. And to log into your control panel, you’ll
use this link. So, this is a really good email to keep in
a safe place for future reference because you’ll be needing this information, as well
as the link to the control panel, to log into your Hostgator web hosting account. So, I’m going to click on this link here,
and then here is my user name. You want to type in your User Name here that
was found in the email and you want to add your password right here as well. Once you’ve have that set up, you want to
click on log in to log into 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’m going to scroll down to where that
is located. You want to scroll down to where it says “Software
and Services” and you want 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 Install link,
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 side bar. So, right at the top, you’ll note that 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 and then you’ll note that there’s a button here that says continue. Also note that we are installing version 3.5.1
of WordPress, which is the most current version available at the time of this recording. So, we are installing WordPress 3.5.1 and
then I’m going to click on continue to continue the process. And here you want to choose the domain name
that you want to install WordPress on. I’m going to install it on this domain name
here. The next thing that you want to do is you
want to create an Admin email, a Blog Title, an Admin User Name and you can also if you
like add a First Name and a Last Name. I’m just going to add an Admin email here,
so put in my email. Also you want to give it a title. So I’ll just call it the name of the domain. Now, the Admin User, this is an important
one to keep in mind, the default for WordPress websites is “admin”, the Admin User default
is “admin” and that’s not really the safest User Name to use so you want to create a User
Name that is anything other than admin. So, I’ll just use my name for the moment and
you can add first name, last name if you like. I’m not going to do that and I’m just going
to click on here, and click on Install Now. Ok, “Congratulations. Your installation is ready.” So, you can access the installation of your
new website by clicking on this link here. And also note that here is the Admin Area
log in URL that you will use in the future to access the log in panel, to access your
website in the future. You want to make a note of 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
into your WordPress website. Also make a note of your Username and Password. This is also what you will need to log into
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 on into
my new WordPress website. So here we are in the log on screen of our
WordPress website. To log in, you want to enter your username
in the Username field and your password in the Password field and then you want to click
on this button that 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 log
in button to log into the WordPress website. So here we are on the WordPress Dashboard,
this is the first thing you’ll see when you log into your WordPress website. And when you first install WordPress, you’ll
also see this message that says, “Welcome to WordPress”. Within this message box, there is a number
of links and each of these links represents some of the first things that most people
do when they install their WordPress website. For the moment though, I’m going to go ahead
and dismiss this message, by clicking on Dismiss in the top righthand hand corner here, so
that we can just see the Dashboard without that message. So here we are on the Dashboard, let’s take
a look what the website looks like, right out of the box when we first install WordPress. So, to see the site, I’m going to go to the
top left hand side and click on visit site right under the name of the website. So right here where it says “visit site”,
I’m going to click on that and here we see this is what the website looks like now, without
doing anything, so it’s pretty bare bones. This is the Twenty Twelve theme that comes
with your WordPress installation and we’ll be making quite a bit of changes so that it
will end up looking like this at the very end. So this is what we’re headed toward, but for
the moment, our website looks like this. So let’s go back to the dashboard and start
building out this theme. To do that you want to go to the top left
hand side, hover over the website name and the first link is Dashboard. We want to click on Dashboard, and here we
are on the dashboard of our WordPress website. So this is the first thing we’ll see when
you log in to your WordPress website. For the moment, the first step we want to
take is we want to change the theme of the website. So to do that on the left hand side the first
step is here you want to click on Appearance, and here we’re on the Manage Themes screen. So notice that the current theme is the Twenty
Twelve theme. This is the theme that comes with your WordPress
installation. So what we need to do now is we need to install
the new WordPress e-commerce theme from WooThemes. So first, I’m going to click on “install themes”
here at this tab at the top and then I’m going to click on this link here that says”upload.” And here we see it says “install a theme in
DotZip format.” So first we need to go over to WooThemes.com
and we need to download the free e-commerce WordPress theme called Mystile. So I’m going to head on over to WooThemes.com
right here and we see at the top there’s a themes link so I’m going to click on “themes”
and here on the themes page, I’m going to filter for Free, Responsive, WooCommerce themes. So I’m clicking these three checkboxes here. Free, Responsive and WooCommerce and then
I’m going to click on “search” to search for these themes. So here we see it, it’s right here, Mystile. So I’m going to click on “Mystile” and here
at the top there’s a green button that says “free downloads” so I’ll go ahead and click
on that. So you can read more about the Mystile theme
if you like. I however am just going to download it so
I’m going to click on this green “free download” button right here and then you’ll land on
either a log-in screen or a register screen. So in order to download this free WordPress
e-commerce theme, you actually need to have a WooThemes account and the good news is that
you can register for a free WooThemes account by simply filling in your username and email
and entering a password twice and then clicking “Register” to register for a free WooThemes
account. So we see here I already have an account so
I’m simply going to log-in to My Accounts and here we see I’m on the dashboard of my
account screen. So what you need to do is click on this link
here, this tab that says “downloads” and then you’ll see all the free downloads that you
can download directly from WooThemes. So these are all free WordPress themes that
you can use directly from WooThemes. So the one we want is the Responsive E-commerce
Theme called Mystile. So we see it’s right here. So I’m just going to click on this link on
the right, it says “Download Theme.” Once the file has been downloaded, I always
like to grab it and move it to my desktop so it’s a little bit easier to find. So I’m just going to grab it here and drag
it to my desktop and release it. And then we want to go back to our WordPress
website here, our WordPress dashboard and here where it says “Choose File”, you want
to click on “Choose File.” Then you want to find the DotZip file and
we see here, here it is Mystile.zip so I’ll just highlight that and click on “Open” to
open this file. And then you want to click on this button
here that says “Install Now” to install this new theme. Okay, so once the theme has been successfully
installed, then you can activate it by clicking on this middle link here that says “Activate.” And here we are on the theme options screen
for Mystile. Now notice on the top right hand side, I am
using Mystile 1.2.10 and I’m also using WooFramework 5.5.5. So this is the most current version of both
the Mystile theme and the WooFramework as of the time of this recording. So the first thing we see when we install
Mystile is we see a message at the top that says, “Enhance your theme with Woodojo” and
it says, “Woodojo is a powerful WooThemes feature suite for enhancing your website.” So we actually do need Woodojo so I’m going
to click on “Get WooDojo” right here and then you see we’re back on the WooThemes.com website
and here we are on the WooDojo plugin page. So what we need to do now is download Woodojo
for free. So I’m going to click on this green button
here and once WooDojo has been downloaded then like we did with the theme, I’m going
to drag it to my desktop so it’s a little bit easier to find and release it. And then I want to go back to my WordPress
dashboard here and on the left hand side where it says Plugins, I want to click on “Plugins.” So here we see the plugins that have already
been installed in the website. We need to add this new Woodojo plugin so
I’m going to click on the top where it says “Add New” and then I’m going to click on the
“Upload” link right here. And then once again, we need to choose the
file, so I’ll click on “Choose File” and then I will click on the “WooDojo.zip” file here
and click on “Open” and once we see WooDojo.zip here, then I’m going to click on “Install
Now.” Okay so the plugin has been installed successfully. The next step is we need to activate the plugin
by clicking “Activate Plugin.” Once the plugin has been activated, then on
the left hand side you’ll see a new link here that says WooDojo so I’m going to click on
“WooDojo” right here and here we are on the WooDojo plugins page. So you’ll notice at the top, once again it
says, “WooDojo is a powerful tool kit of features to enhance your website” and there’s all these
different features that you can choose. So the one that we want is listed at the bottom,
right here underneath WordPress plugins and it’s called WooCommerce. So the next step is we need to click on this
blue button that says “Download and Activate WooCommerce.” Okay, welcome to WooCommerce, you’re almost
ready to start selling. On the left hand side, you’ll see it will
say, Install WooCommerce Pages so I am going to click on “Install WooCommerce Pages” and
here we are on the Welcome to WooCommerce 2.0 page. So we can click on Settings just to double
check everything, so I’m going to click on “Settings” right here and then I’m going to
click on “Pages” and okay, here all the pages have been created so we are good to go with
WooCommerce. So now let’s take a look at what the website
looks like. I’m going to go up to the top, hover over
the website name and click on “Visit Site.” So here we are on the home page of our new
e-commerce website and we can see that this is pretty bare bones. We’re just getting started; we just installed
it so this is most likely what you are seeing but what we’re headed toward looks something
like this. So this is the demo site that I’ve already
created so this is where we’re headed right here. And you see here that we have the website
title and tagline and an image with a title here. So let’s take care of adding that first. We’re going to adjust the title in the tagline
and then we’ll add that wide screen full width image along with the title. So to take care of that part, I’m going to
go back to the dashboard and click on “Dashboard” and then I’m going to click on “Mystile Theme
options” and here on the theme options screen, you’ll notice that the first page we land
on are the General Settings. So here is the style sheet that we’re using,
we’re using the default style sheet and throughout the video, this is what I will keep. I’m not going to change anything. I like the default so I’ll leave it as that. But notice that when you click on this, there’s
all these different colors that you can choose from. So feel free to experiment with these and
see what the colors look like. But right now I’m just going to keep it as
the default style sheet right there. Next you see that you have a custom logo,
if you’d like to add a custom logo, just go ahead and click on the “Upload” button right
here to upload your logo. In this particular demo, I’m not going to
add a custom logo; instead what I’m going to use is a text title and a site description. So if you want to use a text title and a site
description, make sure that these two boxes are checked and also I should note, if you
decide to go ahead and upload a logo, then what you’ll need to do is uncheck these two
boxes here and click “Save all changes” with your logo. But I do want to have a text title in the
site description so I’ll keep those checked and I’ll just save my changes here just to
make sure they’re saved. I tend to often click on the save all changes
button even if I’ve made no changes just to double and triple check that everything is
set the way that I want that I want it to be looking. So next you’ll notice that it says here under
text title, “Enable Text Space, Site Title and Tagline” which is checked so that’s good. And then it says “Set up Title and Tagline”
are in the General Settings. So I’m going to configure this now by clicking
on “General Settings” and here we are on the General Settings page. So notice that when you first install WordPress
by default, the tagline is always, “Just another WordPress website” which is really not a good
tagline for anyone so at minimum, I would suggest that you at least just delete that
altogether. However I would like to add a tagline so I’m
going to keep my site title like that and then for the tagline, I’m going to add my
tagline in here. So it would say “Inspiration Ebooks and Gear
for Yoga and Surf Lovers Worldwide” because once again, I’m building a hypothetical yoga
and surf eBook and product online store. So there I have my site title and tagline;
then you just want to scroll down to the bottom and click on “Save Changes,” to save your
changes. Okay so once your settings have been saved,
the next step is we want to go back to the Mystile Theme Options so I’m going to click
on “Mystile” here and here we are back on the general settings screen. So what we want to do next is we want to add
that full width image to the home page so on the left-hand side here, there’s a link
that says “Home Page” so I’m going to click on this right here and then you’ll note that
you have a number of different home page settings that pop-up. So the first one is the “Featured Image” so
I’m going to click on that and you can see here it says, “Display a Banner,” Yes or No? If you want to display a banner on the home
page and you can also select what color if you want to use a color for the text banner. So I’m going to click in this button here
where it says, “Yes I do want to display a banner” because the banner is the full width
image we want. And then here where it says Image, Upload
a graphic to appear as a banner on the home page. So I’m going to click on this button here
that says “Upload “and then I’m going to click on “Select Files.” Note that I’m in the Front Computer tab right
here, so I’m going to click on “Select Files” and then I’m going to find my files. So my file is located on the “Mystiles” images
folder so I’m going to double click that and then here’s the image at the button, yoga-home.jpg.
then I’m just going to click on “Open” to open and upload this file. So here’s my image right here. We see the dimensions are 1170 wide by 370
pixels tall. It’s always a good idea to give your images
a text title and an alternative text. So for the moment I’ll just call this my website
name right here and then I’m going to scroll down and you have all these different sizes
you can choose from. Because this is a full width image on the
home page, I am going to use the full width size so I’m going to click on “Full Size”
and then I’m going to click on this button that says, “Use This Image.” Okay, so there is my featured image. The next step is we can add both a banner
headline and a banner stand first, which is the copy below the headline. So it’s like one title and then there’s a
short description underneath that. So you can add both of these but I’m actually
only going to add a banner headline. So I’ll just add that right in there and I’m
going to delete this and then I’m going to click on “Save all changes” to save the changes. Once the changes have been saved, let’s take
a look at the website by going up to the top and clicking on “Visit Site.” Okay, so here we are on the home page. We see that we have quite a few fixes we need
to make. First of all, we need to change this menu
so it’s not taking up so much of this height here. I need to take out some of these items and
move the menu over. And then also note that our banner headline
is kind of falling off the page so that’s not a good thing. So what we need to do is we need to reduce
the padding or the margins that this particular title currently has. So one way that I find the code for this is
I use a tool in Google Chrome. I’m using a Google Chrome browser and one
tool I use, it’s a developer tool called Inspect Elements. So for example, when you go up to the top
in Google Chrome, there are these three different lines here. I’m going to move this over so you can see
it, just a little bit more. So there are these three lines and when I
click on these and I get a drop down box and when I go over to Tools and hover over Tools,
I get another drop down box and here you see there’s a link that says, Developer Tools. So I am going to click on “Developer Tools”
and here we see all the code that is being used to create this website. So on the left hand side we have all the html
and on the right hand side we have all the CSS. So the CSS is the code that creates the styles
for the website. So things like the colors, the font sizes,
the font types, the spaces, things like that. Everything related to styles is referred to
as CSS and that’s here on the right hand side. And then everything on the left hand side
here is the structure and that’s actually how the different sections are laid out. So in order to change this title of this banner
title here, we need to adjust the CSS. So to find the code for this, I’m just going
to click on this. Notice that when I’m on the html here, when
I hover over these different sections, they highlight on the left hand side. So we just need to drill down until we’re
only highlighting this area here, which is the title. So I’m going to click on “Wrapper” right here
and then I’m going to click on this marker right next to it to open up more of the elements
within the wrapper. We can see as I go one by one to each of these
different markers, it highlights the different sections on the web page, so move that over. So notice that here I’m highlighting the header
section and the header is highlighted. Then I have the home page banner. That looks good and then content is below
that. So the title of the banner, the banner title
we need to change is located on the home page banner and when I click on this marker, we
get more elements here and here we go, here it is. It’s this H1 section right here and I’m going
to click on the marker once again and then there’s a span, some span code. Here is the actual title where it says, “Welcome
to the best digital library of eBooks on yoga and surfing on the interwebs.” So this is the area that we need to adjust
and when we go here, you can see that here the CSS refers to the .homepage banner h1
span and when I scroll down here at the bottom there’s going to be a metrics. Right here it says “Metrics”, so I’m going
to open that. Click on that here and nothing displays. So what we need to do is click on this “H1”
and there we go. Okay when I click on the actual “H1” right
here, you can see we’re still highlighting the title and now, here are the metrics right
here. So you notice on the left, there’s a 2%, it
looks like space, and then there’s also a 20 % space on the right hand side. So we need to reduce that because it’s 20%
of the banner is being the space here and it’s pushing my title all the way in the middle
and drags it down too far. I want this title closer, tighter to the left
hand side. So what we need to do is we need to find that
20% so I’m going to scroll back up and here we see here it says 20% right here where it
says left 20%. So when I reduce this, I’m going to reduce
it to 5% by just double clicking in here and clicking on five. Now actually you don’t need to really touch
this yet and I will provide the code in just a moment on the video but I just want to show
you how I go about finding the code. So here it says 5% and when I click on 5%
now, now you see my title moved over to the left-hand side which is exactly what I want. Now keep in mind that when you change the
code, within this Inspect Element Developer Tool in Google Chrome, it does not actually
save the code. This is just a place where you can experiment;
you can change things safely and see how the web page now renders just by changing some
of the styles here on the right. But in order to save it, you actually have
to go into the WordPress site and add the codes. So we’ll do that in just a moment. So also note the right side spacing here is
also 20% so to keep it even, I’m going to make this 5% as well so I’ll just override
that as five. And now you see when I move this over, now
my title is showing up a lot better; more across the entire banner which is exactly
how I want it. So now what we need to do is we need to grab
these codes so I’m just going to copy this here in the CSS area. So I’m just going to move this over so you
can see it. So I’m copying this area. I’m just highlighting it and copying it and
then back on the website, I can move this over now. Back on the website I’m going to go to the
dashboard by going up to the top left hand side, hovering over the website name and clicking
on “Dashboard” and then I’m going to click on “Mystile Theme Options” and then right
underneath where it says General Settings, there’s a link here that says Display Options,
so I’m going to click on “Display Options.” And here on the Display Options screen, you
see at the top, there’s a box for all the custom CSS and on the right hand side it says,
“Quickly add some CSS to your theme by adding it to this block.” So I’m going to paste the CSS that I just
copied in the previous step and note that I did not change the top so I don’t really
need to add that here. I didn’t make any changes to the top 30%,
so I’m going to delete that and I did not make any change to the position either so
I’m going to delete that. This box is really only for the new changes
that you’re making. So I’m just going to add my changes right
here and note that there’s an opening bracket right here, this kind of tilde bracket and
you need to close it with a closing tilde bracket. So that’s kind of located on the right-hand
side of the keyboard, just above the return key. You need to click on the shift key and then
click on the tilde key like that to create this closing bracket. So I’m going to add this to the video so no
worries if you can’t see it now, I will add this code to the video so it’s more easy to
see. Once you have the new code there, go ahead
and click on “Save all changes” to save the changes. One the options have been updated, now let’s
take a look at our home page by going up to the top, hovering over to the website name
and clicking on “Visit Site.” And here we see now our title is showing up
a lot better. The only catch is that it’s a little bit too
low down the page and I also have this default line is showing up here, so we need to get
rid of that. So let’s move this whole title up and then
we’ll get rid of the default second line right here. So once again, I’m going to go through Inspect
Elements by clicking on the three lines at the top, hovering over Tools and clicking
on “Developer Tools.” Then I’m going to click on “Wrapper,” click
on the marker next to the wrapper and go straight to the home page banner and click on the marker
to the left. Then I’m going to go straight to the H1 tags
here and then you’ll note that the top is 30% so I think we’ll need to change that so
I’m going to change that to 10% this time. Okay and when I change it to 10%, now it falls
definitely a lot better like that. So I’m going to change the top part to 10
%. So I’m going to copy it once again right there and I’ll close Inspect Element. So now I’m going to go back to the dashboard
by clicking on “Dashboard” and then I’ll click on “Mystile Theme Options”, then under General
Settings once again I’m going to click on “Display Options” and this time I’m going
to add the top section back on here by pasting it right inside on the same code we just had
earlier. So once again I’ll add this to the video if
you can’t see this clearly, so no worries. But I’ve just added top 10% and its top colon
space 10% with a semi-colon and then I’m going to click on “Save all changes” to save the
changes. Now remember that there was also that default
line that was still showing up so to remove that completely, we need to click on “Home
Page” here on the left hand side and then scroll down and you’ll see that even though
I had deleted it previously, the way the theme works is if it’s empty, it will add it back
in. So the little trick to remove this entire
lay is you delete it and then you have to create a couple spaces. So you can see that I do have some actual
keys in here but there’s spaces. So you need to create some spaces here if
you want to remove this line all together. Of course if you want to add a line, go ahead
and add whatever sentence or tagline you want in here. I want to keep it blank once again to keep
it simple and have the focus on the headline so I’m just going to add some spaces, come
up to the top and click on “Save all changes.” Now I’m going to the website once again by
going up to the top, hovering over to the site name and clicking on “Visit Site.” And there you go; now we see I have my full
width image, I have my title right here and it’s positioned exactly where I want it and
that other line is now no longer there. So one more thing, if you wanted to change
the font size right here of this title, you could also do that as well. So I’m just going to make this a tad smaller. I’m going to go up to the top, click on “Dashboard,”
then I’ll click on “Mystile Theme Options.” Once again, I’ll click on “Display Options”
in the General Settings tab and here in the same section where we customized the other
settings for this title; I’m going to add font title settings, so it’s called Font-size. This is another CSS style here is the Font-size
and right now the default is 51 pixels so I’ll just make it a tad smaller. I’ll make it 40 pixels with a semi-colon after
it and then I’ll click on “Save all changes.” So now when we go to the home page, by going
up to the top and clicking on “Visit Site”, now we see that my title is just a little
bit smaller which is exactly how I want it right here. So the next thing I want to do is I want to
change this menu item here. So in order to do that, we actually need to
create some pages because here’s the end result that we’re headed toward right here and you
see I have these additional pages. So first let’s go ahead and create these pages
and then we will configure the menu. So the first page I want to create is the
About page. So I’m going to go back to my website right
here, go to the top, click on “Dashboard” and then on the left hand side here I’m going
to click on “Pages” right there. At the top, there’s a link that says Add New,
so I’m going to click on “Add New.” And because this is the About page, the first
thing we need to do is give the page a title. So I’m simply going to give it a title of,
“About” right there. Just under the title we have this box here
where you can drop-in any kind of content images or video that you’d like to be displayed
on the page. So I am going to add some content right here;
some text that I had previously copied. So I have my text right there and you’ll notice
that there’s all these different icons here so we are in the “What you see is what you
get” kind of view right here; this is the visual view and you’ll note that there is
a visual tab and a text tab. So in the visual tab, you have all these different
icons you can use to format your text. So as an example, when I highlight this text
and then I click on this “B”, then just like an email or a Word processing program, the
content will be formatted with the different icons above that you decide to use. So now that we see this is bolded visually,
when we click on the text view, it looks a lot different but here, this is the html that
WordPress is automatically generating. Right here we see here are the bold tags,
the strong tags and the html closing tag right here. So this is the code that is being used by
WordPress and created by WordPress to create that bold formatting. So the good news with WordPress is that you
don’t need to know any code, you can simply use these icons here to format the text in
the box. Also note that you don’t have to memorize
these buttons either. If you simply hover on top of them, you’ll
get a yellow Tool Tip that would tell you exactly what each of these icons do. The other thing to note is if you’re only
seeing one row of icons here, then you need to click this button here, right here and
that will open up what is referred to as the Kitchen Sink. So you see when I hover over this, it says
“Show or Hide Kitchen Sink” and I just click on it on and off and you can see the row appears
and it disappears like that. So okay, so I’m going to remove this formatting
here by just highlighting it and clicking on this “Remove Formatting Eraser” and then
I want to also add an image right before the text or I should say to the left of the text. So what you need to do is just place the cursor
where you want the image to be displayed, click on “Add Media” right here at the top
and then you need to select your file. So I’m going to click on “Upload Files” and
then “Select Files.” And then here are the file that I want, is
on “Mystile Images” so I’m going to open that folder right there and let’s see here it is,
pic number two. So I’m going to highlight the image that I
want and then click on “Open” to open this image and upload it to WordPress. So with all images, it’s always a good idea
to add a title and an alternative text so right now I’ll just add the website name and
then down below you’ll note that there are some alignment settings that you can choose. Whether you want to left align this, center
right or have no alignment. I am going to click on “Left alignment.” I’m going to link it nothing but you see there
are these other settings, I’m going to link it to nothing and for the size, instead of
having the full size, I’m going to choose this 300 by 285 as medium size and then I’m
going to click on “Insert into page” to insert the image into the page. Now note that because I chose left alignment,
the text is showing up right here on the right hand side and images on the left; just how
I wanted it. Okay, so the next step is we have our page
attributes here on the right hand side and you can create parent or child pages. Parent page will be the top level page and
the child page would be of course the sub-menu or sub-page underneath of the parent page. So I’m going to make this About page the parent
page, so I’ll just leave it as it is right here. However, here where it says Template, I want
to click on “Default Template” and you’ll note that you have all these different template
options to choose for each of the pages you create. So right now for the About page, I want this
page to be a full width page, so I’m going to click on “Full Width.”That way, there will
be no sidebars and other distractions on this page. It will be simply the About page and that’s
it. Then you could just scroll down and check
the other settings. It looks like we’re good to go. Here, I do want to make a note on the discussion
tab right here. So, on my pages I do not want to have any
comments. I’d rather keep the comments on the blog post
pages or blog posts. So I’m going to disable comments on the About
page by just un-checking these too. And here we see, here’s the layout, I don’t
think we have to worry about this for the About page because we’ve already selected
full width, but this is the different layouts that you can have; left side bar, right side
bar or full web. So just as a double check, I’m going to click
on this “Full Width” box right here and then I want to scroll to the top and click on “Publish.” Now before I do that, I just want to make
one more note. If you are not seeing this discussion box,
sometimes it doesn’t always display, then what you need to do is come up to the top
and click on “Screen Options” and then you’ll see all the different sections that you can
add to the screen and you want to make sure that the discussion box is checked so that
it will show up below. Once you’ve made your selections, you can
click on “Screen Options” one more time, to close the Screen Options. I think we’re good to go now though so I am
just going to click on “Publish” to publish this page. Okay, so once the About page has been created,
the next page we need to create is the Blog Index page. So I’m going to create a new Blog Index page
by clicking on “Add New” and this time for the title, I’m just simply going to call this
“Blog”. And you’ll leave all of this blank, you don’t
have to fill anything in; and this is not a blog post, this is just actually creating
a Blog index page. So you just want to add the blog title here
and then here on attributes, Page Attributes, you want to click on “Default Template” once
again and this time, we need to select the blog templates. So I’m just going to click on “Blog” there,
scroll to the bottom. Once again, I’m going to uncheck the two scroll
options here so there are no comments on the blog index page. I’m going to click on this; actually the blog
index page does by default have a sidebar so this is kind of irrelevant. You can choose however if you want the sidebar
to show up on the right hand side or the left hand side. So I would like the sidebar to show up on
the right hand side so I’m going to click on this third box here where the sidebar is
on the right and then I’m going to scroll up to the top and click on “Publish” to publish
the blog index page. Okay, so once the Blog index page has been
created, the other page we need to create is the Contact page. So once again, I’m going to click on “Add
New” and this time for the title, I’ll call it “Contacts”. I’m going to leave all of this blank and then
once again on the right hand side where it says Page Attributes, I’m going to click on
“Default Template” and then I’m going to choose the template called Contact Form. And then I’m going to scroll down here, I’m
going to uncheck the discussion because I do not want comments on my contact form and
then you can choose once again which if the layouts you want. If you want to have a right sidebar or a left
sidebar with your Contact Form, you can choose these. I’m just going to choose “Form Width” right
now. So it’s simply the Contacts Form on the page
without any sidebars. So I’m just going to click on this “Full Width”
layout here and then scroll down to the top to click on “Publish” to publish the Contact
page. Okay, so now that the Contact page has been
published, now let’s go ahead and configure our Menu. So to configure the menu, you want to go to
the left hand side, hover over Appearance and click on “Menus.” And here we are on the Menus page. So the first thing we need to do is create
a Menu. So I’m going to come up to the side here where
it says Menu Name and I’ll just call this “Menu”. Then I’m going to click on “Create Menu”,
this blue button here. So once you create one menu, then you’ll notice
on the have a section here that says Theme Locations. And as a note, your themes support two menus. So we can actually create two menus here and
when I go to the site that has already been created, you’ll see that I only have one menu
right here but this area right here is where the other menu, the top menu can be displayed
if you’d like to add a menu up here as well. So in this video, I’m only going to be adding
one menu so to do that, I need to come to “Theme Locations.” You’ll note that there’s a Primary menu and
a Top menu. So in order to make the Top menu empty, I’m
just going to click on the plus sign here one more time and I’m going to create a new
menu called “Top Menu”. Then as we did before, I’m going to click
on this blue “Create Menu” button and once the Top menu has been created, now I’m going
to set the theme locations for both menus. So the Primary menu is going to be My Menu
and the Top menu will be the Top Menu and then I’m going to click on “Save” to save
the locations of the two menus. So the next thing we need to do is click on
“Menu” here and we need to start adding pages or categories or whatever we want to show
in the menu; we need to add that here. So the first thing I want to do is add a custom
link to a home page. So I’ll give it the label of “Home” and the
URL will be the website name and then I’ll just click on “Add to Menu,” and here we see
now the Home page is being displayed in the Menu. So I’m going to scroll down and add some other
pages. I’m going to add the Contact page, the Blog
page, the About page. I will also add a Cart page and the Shop page. Then once these are selected, I’m going to
click on “Add to Menu” to add them to the Menu. Now the good news is that you can easily reorder
this as well just by dragging them and dropping them around. So for example, I want the About page to come
up second, followed by the Blog and let’s see, I have the Cart and the Shop page at
the bottom. So this is a good order. I like this order so I’ll keep it like that. Feel free to rearrange anything that you’d
like and then when you’re ready, go ahead and click on “Save Menu” to save the menu. So now when we go check out the site by going
up to the top and clicking on “Visit Site,” now we see here we have our Menu. So we’re good to go there. Now scrolling down you’ll note we have a blog
post being featured here and whenever I have an e-commerce website, whether it’s for eBooks
or physical products or whenever I’m selling anything, I really just want the focus of
attention to be on the product. So even though there is an option to include
a blog post or a few blog posts here on the home page, I’m going to leave the blog post
index page. So I’m going to remove this section. Of course if you want to keep your blog post
on the home page feel free to keep it there. I’m going to remove it and I’m also going
to add all of the actual featured products and featured eBooks that will be included
in my product catalogue. First to remove the blog post, I’m going to
go up to the top, click on “Dashboard,” then I’m going to click on “Mystile” and here on
the Theme Options screen, there’s a link here for home page so I’m going to click on “Home
page.” And you see, we’ve already taken care of the
featured image right there and let’s see, we also have a sidebar link and the WooCommerce
link. So I’m going to click on “WooCommerce” and
this is where you can select what you want to have displayed on the home page. So if you want to display Product Category,
I think I’ll do that. Display Featured Products, yes I’ll do that
and let’s see, here where it says Recent Products on the home page, I don’t want to display
Recent Products. I think just displaying the Product Categories
and the Featured Products is enough. I don’t need Featured Products too. It seems kind of repetitive but of course
if you want it, feel free to check this box and indicate how many of those products you
want to have featured. I’m going to set my home page like this and
click on “Save all changes” to save the changes for the home page. Now when I click on “Blog” right here; this
link, this is where it says “Display Latest Posts on the Homepage” and if you’d like to
do that, go ahead and leave it checked and choose how many blog posts you want to have
featured on the home page. I am going to turn that off by un-checking
this box and then clicking on “Save all changes.” Finally here in the Home Page Settings, if
you’d like to include a sidebar on your home page settings, you can do so by just clicking
on this box. I’m not going to display a sidebar though. I like the page to be a full width page so
I’ll leave that unchecked. And now, let’s go about adding some products
to our Product Catalogue. So to add a new product, you can do it several
ways. You can come up to the top, hover over “+
New”and click on “Product” or on the left hand side; you see here there’s a link that
says Products. So I am going to click on “Products” right
here on the left hand side and then here we are on the Products Page. So to add a product, I’m going t click on
this link here that says “Add Product” and then here on the Add Products screen, the
first thing we need to do is give our product a name. So I am going to give my eBook this name,
“Yoga Stretches for Beginners” and then once again here in the box, you can add whatever
kind of content or description you’d like to add about this particular product. So I’m just going to add a short couple sentences
here and I’m going to also be adding that Google Doc Embedder plugin so that I can include
one chapter of the eBook as a kind of preview to the whole book. So hopefully the one chapter will encourage
everyone to buy the entire eBook. Now of course in order to embed a document
using the Google Doc Embedder, we need to go grab the plugin. We need to go on the left hand side here,
we need to click on “Plugins” and then click on “Add New” and then on the search field,
we want to add Google Doc Embedder and click “Search Plugins.” So here it is at the top, the Google Doc Embedder. When I click on “Details,” you can read more
details about this particular plugin. It says, “Google Doc Embedder lets you embed
several types of files in to your WordPress pages using the Google Docs Viewer” and then
when you scroll down it says, “Similar to services Scribd, Google Doc Embedder will
allow you to embed these files directly into your page or post, not requiring the user
to have Microsoft Word or Adobe Reader, PowerPoint or any other software installed to view the
contents.” So one other thing about Scribd, it says,
“Unlike Scribd, the files do not need to be uploaded to any service first including Google
Docs but can exist anywhere publicly available on your site or the internet.” So this is a really great plugin for embedding
documents and once again the upside is that whoever is viewing the document really just
has to have an internet connection so that’s really cool. So I’m going to install this by clicking on
this button here that says “Install Now” and once it has been installed, I’m going to click
“Activate Plugin” to activate the plugin. Once the plugin has been activated, I’m going
to click on “Settings.” And here you can see there’s all these different
settings that you can choose to set the Google Doc Embedder. So one thing I want to point is that sometimes,
depending on what browser you’re using, the embedded document actually does not show up
in the browsers. So one way I found to actually fix that problem
is to change the viewer mode here from Standard Viewer to Enhanced Viewer. So I’m going to choose that right now. I’m going to click on for viewer mode, I’m
going to change it to Enhanced Viewer, then I’m just going to scroll down to the bottom
and click “Save Changes” to save the changes. Once the settings have been saved for the
Google Doc Embedder, now we need to go back to our product and add the document; embed
the document in the product. So I’m going to click on “Products” and then
I’m going to click on my “Yoga Stretches for Beginners” eBook here, I’ll click on “Edit.” And here on the edit products page, now we
see on the top row of the visual tab right here, there’s a new icon called the Google
Doc Embedder. So before we can use that, we actually need
to upload the pdf that we want to embed into the website. So to upload Chapter One, the first part of
the eBook to the website, I’m just going to place the cursor right where I want to add
the embedded document and then I’m going to click on “Add Media.” Then I’m going to click on “Upload files,”
and the “Select Files” and then we need to select the file that you want to embed into
your document. So I’m just going to embed this one Chapter
One, so I’m going to highlight it and click “Open.” And once the document has been uploaded to
the WordPress website, you’ll see the info for that document here on the right hand side;
hopefully including a title. If you don’t have a title, be sure to give
this particular new pdf a title and then we need to scroll down towards the Attachment
Display Settings. So I’m going to click on “None” here and I’m
going to choose “Media File” and then, I’m just going to highlight this particular link
here. This is the link of the actual file so I’m
going to highlight it and copy it and then once I’ve copied this file link right here,
then I’m going to set the link to setting back to “None.” So here we see now it says, “None”. I just needed to grab the media file URL. Okay, so I’m not going to insert this to the
product. I’m just going to close it right here by clicking
on this “Close” button at the top and then here on the Edit Products screen, I’m going
to place the cursor where I want to embed the document and in the top row of this Kitchen
Sink area here in the visual tab, I’m going to click on the “Google Doc Embedder” icon. Here we see we can add all of the different
settings for the Google Doc Embedder and the first one which is required is the full URL
or the file name of the document you want to embed. So I just copied it in the previous steps
so I’m just going to place the cursor in this field here and paste the file link right in
this window. So when you do that, then you’ll get a short
code preview right here. You can see what the short code looks like. If you’d like to adjust any of the optional
settings right here, you can do that. I’m not going to touch these, I’m going to
leave them as they are and then I’m just going to click on this button here to insert the
short code into my Products page. Okay so now we see we have the short code
right here, so that is good to go. Now on the right hand side, we need to add
this new eBook to a Product Category. So to create a category, I’m going to click
on the “Add new product” category link here and I’ll just call this “eBooks” and then
I’ll click on “Add new product category” once again to create the product category. Then I’m going to scroll down and here we
have some product tags. So I think I’ll just call this “Yoga” perhaps
I’ll also call it “Beginners.” And you want to separate any tags with commas. So I just added two tags here and then I’m
going to click on “Add” and then we need to set the featured image so I’m going to come
down here and click on “Set Featured Image.” And then once again I’m going to click on
“Upload Files” and then “Select Files” and then I’m going to select the file that I want
to use as the featured image. So I’ll just highlight my file right there
and then click on “Open” and then once again on the right hand side, you’ll have all of
the attachment details. So it’s always a good idea to include a title
and an alternative text, so I will add one right here. And once you have your title and your alternative
text, go ahead and click on this button that says “Set Featured Image.” Okay, so once the featured image has been
set, the next step is we need to come over here where it says “Product Data.” So we will go over in just a few minutes how
to add physical products as well but right now, this is an eBook. So you’ll note here under Product Data, when
you click on “Simple Product,” I have all these different options here but this is going
to be a downloadable product so I’m going to click on this check box right here and
also note when you hover over many of these items, you’ll get a Tool Tip and in this case,
when I hover over the check box for downloadable it says, “Downloadable products give access
to a file upon purchase.” So that is exactly what I want to do. So I just clicked on this check box next to
downloadable and then you’ll notice that you’ll get all of these additional settings for your
downloadable product. So if you’d like to add a “SKU”, you can do
so. A SKU refers to a Stock Keeping Unit, a unique
identifier for each distinct product and service that can be published or purchased I should
say. And I’m going to skip SKU’s but that’s an
option if you’d like to use it. For regular price, I’m going to give this
a price of 10, note that it’s in pounds. We’ll change that in just a moment because
I want that to be in dollars but right now I’ll just leave it at 10. You can give a product a sale price, so to
demo that I’m going to click on “Schedule” right here and I’ll create the sale price
of let’s say $5.00, half off and the sale price’s date, I’ll just click on this “Calendar”
icon and then I’m going to click on May the 31st and then I’m going to click on the other
calendar icon and choose perhaps say, June 4th. Then what we’ll need to do is create a file
or add a file of the actual full eBook, the full product that you want to sell. So this is not just the first chapter anymore. This is the full eBook that you want to sell
so I’m going to click this button here that says “Choose a file” and then once again I’m
going to click on “Upload files” and select “Files”. And here we see here is the full eBook that
I want to sell as a product. So here we see we had already embedded Chapter
One and now I’m going to upload the entire eBook right here. So I just highlight it and click on “Open”
and then here we see it has a title right there; so that’s good. And then I’m going to click on “Insert File
URL.” Okay so now we see that here is the file,
it’s been added right there. If you’d like to set download limits, the
number of times that anyone can download this product, you can add here whatever number
that you would like. You can just add different numbers here. I’m going to leave it as unlimited so I’ll
just leave it blank or leave it at zero. Actually, I’ll just delete it altogether so
it’s unlimited. There we go, so unlimited download limit and
if you want to create an expiration date or the number of days before a download link
expires, you can set that here as well. So I’m not going to set those, I’m just going
to add the file at my price and my sale price and dates and then I just want to scroll to
the bottom here and where it says “Product Short Description,” I want to add a short
description about this particular product. Then just below that you’ll notice that here
are the layout settings for this theme. And we see once again here’s the full width,
the left sidebar, the right sidebar. Whenever I have a product page, I always prefer
not to have any sidebars because once again I don’t want to distract anyone from the product
itself so I’m going to click on this “Full Width” box right here and then I’m going to
scroll up to the top and I’m going to click on “Publish” to publish this product. Okay so once the product has been published,
we can view the product by clicking on “View Product” and here we see here is the Product
page. So we have our thumbnail image which when
I click on it, it opens up into a really nice light box display here, a much larger image. Then we have the product title. We see that this is on sale because we created
a sale for this product so it’s originally 10 now on sale for 5 and we will change pounds
to dollars in just a moment. You have your short product description and
then you have your call to action “Add to cart” button. Then when we scroll down, now you see your
short product description as well as the embedded document right here. So this is only one page but if you had more
than one page, someone could just click on these buttons here to go to the next page. They can also reduce the font or increase
the font by clicking on this particular icon right here to make the size larger. And once again the good news about this particular
plugin is that anyone who visits your website in this product page does not need to have
Adobe or Microsoft Word or any other kind of software. They can just look at the embedded document
right directly on your product page. So then I’m just going to scroll down and
you see here we have the direct link if anyone wants to download the pdf for this particular
embedded document. So this download link once again is only for
the embedded document, it’s not for the eBook itself. So one other thing I want to note about this
product that we’ve just created; this downloadable eBook, when we go to WooCommerce settings
by clicking on “Dashboard” and then hovering over “WooCommerce” and clicking on “Settings”
here on the general tab, when you scroll down you’ll note that there’s a section here related
to downloadable products and currently the file method is set as Force Download. So that’s what I want but notice that when
I click on this, you have these other options. So when we check out the WooCommerce documentation
on downloadable products you’ll note that here is a great page for all the different
settings related to eBooks and I’ll include this link in the video but one thing I do
want to call attention to is right here where it notes that, “You have three choices related
to downloadable products; Redirect only, Force download or X-Sendfile” and it says, “To ensure
files are protected from direct linking, Force download can be used. Files will be served by PHP however if your
files are large or your server is underpowered, you may experience timeouts during the download. In this case you will need to look either
at your server or use the redirect method.” So then just below it there’s some more great
info that says, “If your server supports it, use X-Sendfile which is the most reliable
method. Apache serves the download, giving you the
best performance. Files are also protected by a .htaccess file
making this method secure.” So if you have really large files and you’re
experiencing download timeouts for those large files, then I encourage you to check out X-Sendfile
and as it notes here, you just have to make sure that your server has the X-Send file
module set within it. So okay then in this video, I’m going to keep
the download method as Force downloads but once again, if you want to change it, if your
files are large, you can go ahead and change it on the WooCommerce Settings Screen right
here. I also want to note that there’s lots of other
additional information related to downloadable products and eBooks so I encourage you to
check out this particular page on the WooThemes documentation in the event that you have other
special needs for your eBooks. So going back to our WordPress website, I’m
just going to add a few more products here so I’m going to click on “+ New” and click
on “Product” at the top. And this time, instead of adding an eBook
or downloadable product, I’m going to add a simple product. So I’m going to add a simple Yoga Tee. So I’m going to call it, “Yoga Om Tee” and
then here in this section here, I want to add the product description and so I’ll just
paste in some content right there. Next I’m going to scroll down on the right
hand side this New Product Category is going to be t-shirts so I’m going to click on “Add
New Product Category” and click on “Add T-Shirts” there and then click on “Add New Product Category”
once again. Then you can add some product tags. I’ll call this “T-Shirt” as well as “Yoga”
and click on “Add”. Again I’ve separated these two tags with a
comma then we need to scroll down and I need to set the Featured Image. So I’m going to click on “Set Featured Image”
and the “Upload Files” and then “Select Files” and then I’m going to find the file. So the file that I want is this one right
here, the “yoga-t-shirt-om.png” so I’m just going to highlight it and click on “Open”
and then once again it’s always a good idea to give your images or your content a title
and an alternative text. So I’ll just add that right here and then
go ahead and click on this button that says “Set Featured Image.” Once the featured image has been set, the
next step is we need to look at the Product Data section over here and once again, when
we click this box here “Simple Product” we see the different types of product that we
can choose. So this particular T-Shirt I want to create,
I want it to be a Simple Product so I’m just going to click on “Simple Product.” And you can see here, you can give it a SKU,
a Regular price or a Sale price. So I’m just going to give it a Regular price
right now, so sale. So I’ll just put it as 40. Then what we want to do is we want to click
on “Attributes”. Here on the Attributes Screen, I’m going to
click on “Add” to add a new attribute and this one I’m going to call “Size” and I’m
just going to make it one size fits all because it’s a Simple Product; so I’ll just put, “One
size fits all” and then I’m going to click on “Save Attributes.” So the Simple Products are very simple. There’s no variations to them. We’ll do a product with variations in the
next example but this is just a very simple product. So you just buy this T-Shirt, it comes in
one color, one size and we’re good to go. So I do want to make this visible on the Product
Page though so I’m going to click on this checkbox right here. Also note that there’s these other different
tabs that if you want to manage inventory or configure special shipping for this particular
product you can click on these different tabs. I’m not going to do this right now. I’m going to deal with shipping later down
the line but I’m just going to point this out in the event that you’ll need them. So if you want to manage stock, if you want
to allow back orders, or the sell the product individually you can check out these sections
here. And also note there are question marks which
when you hover over them once again it gives you a really cool Tool Tip that tells you
what this particular setting does. So here it says, “Stock Status” and I hover
over the question mark it says, “Controls whether or not the product is listed as in
stock or out of stock on the front end.” So if you want that, you can just click on
that. So okay, the next step is I’m going to scroll
down here and I’m going to add a short product description. I’m going to grab the first sentence of my
demo content here and I’ll just scroll down and I’m going to add the short product description
and then once again here where it says “Layout” because it’s a product, I don’t want any sidebars
on this. Of course if you want sidebars, feel free
to choose a right sidebar here or a left sidebar. I prefer keeping the focus on the product
so I’m not going to include any sidebars. It will just be a full width product page
so I’m going to click this box, scroll up to the top and click on “Publish” to publish
this product. Once the product has been published, let’s
check it out by clicking on “View Product” and here you see here is the product. So when I click on the T-Shirt right here,
it opens up into a really nice light box display just as the eBook did. And then we have the product title, the price,
a short product description, the call to action add to cart button right here and then when
I scroll down now, you’ll note that here I just have the product description, of course
there’s no embedded document because this is a T-Shirt not an eBook. When I click on additional information it
just says “Size,” one size fits all and if you have any reviews, those will show up in
this section right here. Also note that now we’re starting to see Related
Products show up down below and as we add more products to our product catalogue, all
of those different related products will start to show up here also. So there we go. So let’s add one more physical product and
this time, we’ll add a physical product with variations. So I’m going to go up to the top, hover over
“+ New” and click on “Product.” And here on the Add New Product screen once
again we want to give our product a name so I’m going to call this “Yoga Mat” and then
here in the box I’m going to add the product description, then on the right hand side I’m
going to add a Product Category. So this is a mat so I’m going to give it the
Product Category of “Gear” and click on “Add new product category” and then If you’d like
you can also add some product tags for this product so I’ll just call this “Yoga Mat”
and click on “Add” and then we want to scroll down and once again we want to set the featured
image by clicking on “Set Featured Image.” SO I’m going to click on Upload File” and
“Select File” and here I’m going to find the yoga mat image and click on “Open” and once
again it’s always a good idea to include a title and an alternative text so I’ll just
add that in right here. And then at the bottom you’d want to click
on “Set Featured Image”. Once the image has been set, then on the left
hand side and here we are at the Product Data once again and last time in the previous example
we created a Simple Product but this time let’s create a Variable Product. OS I’m going to create a product that has
different colors. It’s the same product but this time it comes
in different colors. So I’m going to click on “Variable Product”
and then I’m going to click on “Attributes” and then I’m going to click on “Add” button
to add an attribute. And the name of the attribute is going to
be “Color.” Then we want to create the values of the attributes,
keeping in mind that you end to separate the values with a piped symbol. A piped symbol looks like a capital “I” or
an l. It’s a vertical line and it can be found on
the right hand side of your keyboard above the “Return Key.” So you have to hold down the “Shift Key” and
click on the piped symbol above the “Return Key.” So I’m going to give this some colors right
here, Orange and then the piped symbol and then I’ll also give the color of Gray and
the piped symbol and I’ll also add a color of Blue. So this particular product comes in three
different colors and then I want to click on these two boxes that I want. One to show the attributes on the Product
page and I also want to use the color for variations. So once you have your attributes set-up with
the values, go ahead and click on the “Save Attributes” button below to save the attributes. Next we need to save the variations and we
see here there’s a new link here that says “Variations” so I’m going to click on “Variations.” And then there is a setting here for the Default
Selection. So you need to choose a default color or size. Whatever attribute you have, you need tos
et a default selection here so I’ll create Orange. Now this is really important so make sure
you don’t skip this because if you do not have a default, then the “Add to cart” button
on the Product Page will not display,. So that’s relay important, always to have
the “Add to cart” button so make sure that you do set the default selection right here. Okay so now we need to add a variation so
I’m going to click this button that says “Add Variation” and then I’m going to choose my
first variation which was the oranges color and I’m going to set the price here. I’ll make that also 40 and then I’m going
to click on “Add Variation” one more time and I want to set the other variation which
was the gray color and I’ll give that the same price of 40 and then finally one more
time I’m going to click “Add Variation” and set the color of blue and this time once again
I’m going to make the price 40. So once you have all your variations set,
then we need to come down to this section here, Product Short Description and add a
short description. So I’m going to paste in the same content
I did before; only instead of the long description I’ll just cut it off so it’s just the first
sentence. Finally at the bottom you want to choose what
layout you want for this particular product page and once again I’m going to choose the
“Full width layout” which is this box right here and then I’m going to scroll up to the
top and I’m going to click on “Publish” to publish this post. So now when we check out the product by clicking
on “View Product”, here we see here is the product with all the different variations. So we have the product image which when I
click on it opens to this really cool light box and then we have the product title, the
price, a short description and here’s the different colors. When i click on “orange” I have this drop
down box of all these other different colors i could choose and then a little bit below
I have the product description and once again the additional info with the different colors
it comes in and the reviews. So this is how you create a product with variations. Now note that the related products are not
showi9ng down below. Most likely because this is an entire different
product category and the tags that I’m using right now, “Yoga mat” are not similar to the
other products that I added to my Product catalog. So it’s always a good idea to try and cross-sell
or up-sell other products by featuring them on the Product page, So let’s just adjust
the tags so at least a few of the other related products show up below the product . So I’m
going to click on “Edit Product” and then I’m going to scroll down to where it say “Product
Tags” and this time I’m just going to add the “Yoga” tag as it is and click on “Add.” And now when I scroll up and click on “Update”
and then I click on “View Product” right here. Now we see when I scroll down, now the Related
Products are showing up. So just keep that in mind. You want to make sure that you do have related
products showing up down here and to do that, you can just add similar tags to each of your
products in your product catalogue. So now let’s take a look at the Home page
of the site. I’m going to click on the title here of the
website and we see here is the Home page and it looks like we still need to add the Product
Categories and the Featured Products. We need to make sure they’re showing up here
in the Home page. So far we’ve only added three products to
our Product catalogue so we will be sort of limited but I want to show you how you can
start adding them to the Home page right here. So to do that, first of all with the Product
Category, we need to add different images to our Product Categories right here so we
don’t have these empty place orders. So let’s do that first. We’re going to add the images to the Product
Categories by going up to the top, clicking on “Dashboard” and then on the left hand side
where it says “Products” we want to hover over “Products” and then click on this link
here that says “Categories.” So here we see our three categories right
here, we do need to add a fourth category as well because we have four categories being
displayed on the Home page. So first I’m going to add a new category. I’ll call this “Surf Gear” or “Surf T-Shirts”
and then I’m going to scroll down and click on “Add New Product Category” and if we recall
the previous T-Shirt that I had was a Yoga T-Shirt so I’m going to edit this particular
category so instead of it being the top level T-Shirts at large, it will be a little bit
more specific. That way I’ll have a Category for T-Shirts
and a Category for Yoga T-Shirts. So I’m going to click on “Quick Edit” and
here I can just change the names of the categories. So I’m going to call this “Yoga T-Shirts”
and let’s see, the slug I’ll also call “Yoga-T-Shirts” right here and you have to make sure it’s
all one word and then I’m going to click on “Update Product Category.” Okay great, so I have T-Shirts and my four
categories here. Let’s go ahead and add the images, the thumbnail
images to each of these. So I’m going to click on “Edit” for Surf T-Shirts
and then here where it says Thumbnail, I need to click on “Upload or Add an Image” and then
I’m going to click on “Upload Files” and “Select Files” and here I need to select the T-Shirt
file that I want for the thumbnail. So I’m going to choose my file right here
and click on “Open” and then once again it’s a good idea to include a title and an alternative
text so I’ll just call this “Surf tee” and once you have the title and alternative texts,
go ahead and click on “Use Image.’ Okay so here’s our image; the last step is
you need to click “Update” to update our Product Category. Okay so here we see we have one of the four,
let’s do the eBooks next. So once again I’m going to click on “Edit”,
scroll down click on “Upload Add Image” and the “Upload Files” and then “Select files”
and then I need to choose the file so I’ll choose this one right here and click on “Open”. And then once again we need to click on “Title”
and an alternative text so I’ll just paste the same thing on both places and click on
“Use Image.” Finally, let’s click on “Update” to update
this category as well. Okay, two out of four, we’re getting the hang
of this. Let’s do the Gear now. I’m going to click on “Edit” and then “Upload
Add Image” and this time I’m going to use this product image that’s all ready in the
media library so I do not need to upload anything. I’m just going to select it and click on “Use
Image” and then I’m going to click on this “Update” button. And finally the last one, Yoga T-Shirts so
I can click on “Edit” and then “Upload Add Image” and once again I’m going to use an
existing image in the media library so I’m just going to select it and click on “Use
Image.” Finally, we just need to click on”Update”
to update this category. So there we go, now we have our different
products in our product category. Now note that on the side here it says that
we have one, there’s an eBook, we have one product in the Gear category. We don’t have any products yet in the Surf
T-Shirts category and for that reason; this will not show up even it is ready to be showing
up on the Home page. It won’t show up because we don’t have any
products yet. So let’s go ahead and add one product to the
Surf T-Shirts category. So I’m going to click on “+ New” and then
“Products” and then I’m going to call this “Surf Tee” or “Surf Tees.” Then I’m going to add this to the right hand
side on the Product Category called Surf T-Shirts. I’m going to give it a Product Tag of “T-Shirts”
as well as “Surfing” and click on “Add”. And then, I also need to add the Product Description
here. So once again I’m just going to paste in some
content right in this section here. And then the last thing, or second to last
thing we need to do or actually we have a few more things; so I’m going to click on
Featured Image, “Set Featured Image.” I’m going to choose this product image already
in our Product Category and the click on “Set Featured Image.” And then here on the left hand side, we can
create the Product Data for this particular product. So once again I’ll create a variable product
to show you how to do that one more time. So we have Variable Product, I click on “Attributes”
and then I click on this “Add” button. This time I’m going to call it “Sizes.” So I’ll give different sizes, Small, Medium
and Large. So in the values box here I’m going to type
in “Small” with a piped symbol. Once again that’s that symbol that looks like
an “I” or an “l” and it can be found on the right hand side of the keyboard above the
“Return Key” and once you have the piped symbol then just add the other values for the Attribute. And then I’m going to click on these two boxes
to make sure that these Attributes are visible on the Product page and use for variations. Once all of the Attributes are ready, go ahead
and click on “Save Attributes.” Next we need to add the Variations so I’m
going to click on “Variations” down here. I’m going to add a default size. I’ll make the default sizes small and then
I’m going to click on this blue button “Add Variation.” Starting with the small size, so I’ll click
on “Small” and I’ll give this a price of 40 and then I’ll do the same thing for the other
sizes. Click on “Add Variation” click on the “Medium,”
give it a regular price of 40 and then finally the last one. “Add Variation” click on “Large” and give
it a regular price of 40 and then we just need to scroll down here, add our Product
Short Description. So I’ll just add on here the description I
had before; at least the first sentence, right here short description. And then finally at the bottom, I’m going
to click on “Layout” to be once again the Full Width Layout. So looks good so far, let’s go ahead and publish
this product by clicking on “Publish.” Okay so when we view the product by clicking
on “View Product” at the top, here we see here is our product. Okay once again it’s now showing up with the
Related Products so one way to deal with that is to make sure that the other product, the
Yoga product, the Yoga T-Shirt I should say, needs to have a tag of T-Shirts. This does have a tag of “T-Shirts” so we can
see the tags right here. However we don’t have any related products. So just as we did before, I’m going to go
to “My Products” screen, so I’m going to go to “Dashboard” right here and I’m going to
go to Products by clicking on the “Products” link. And a fast way to add tags to your products
in your Product Catalogue is to click on this button here that says “Quick Edit.” So I just clicked on the “Yoga Om Tee” and
we do see that it says “T-Shirt” here as a tag so that’s good. It looks like this Surf Tee, what I added
is I added the tag as T-Shirts, plural. So we can see here that the tag for the Surf
tee right here does say T-Shirts but it’s actually plural and this one is T-Shirt singular. That’s why they’re not showing up together
under Related Products. So I’m going to change the Yoga T-Shirt to
have a plural tag called “T-Shirts” instead of “T-Shirt” like that and then I’m just going
to click on “Update” to update this product. Now when we view the Surf Tee by hovering
over the Surf Tee and there’s a link here that says “View” so I can go directly to the
Product page. So I’m going to click on “View,” now we see
when we scroll down, the Related Product, the other T-Shirt is showing up in the Related
Products section. Okay so let’s take a look at the Home page
one more time. I’m going to click on the website name and
then I’m going to scroll down and now we see here are all the Product Categories which
is great. The next thing we need to do is add Featured
Products to the Home page. So currently we only have about three or four
products I believe added to the Product Catalogue. So I am actually going to behind the scenes
add a bunch of other products; a bunch of other eBooks specifically to the Product Catalogue
and then I will see you on the other side. So I’ve added a bunch of products to the Product
Catalogue. Now let’s go ahead and add them as Featured
Products so that they show up on the Home page under the Featured Products Section. To add Featured Products to the Home page,
we need to go to the top and click on “Dashboard” and then here on Dashboard; we need to click
on “Products” to go to the Product page. So I’m going to click on “Products” and then
we need to choose the products that we want to have featured on the Home page. So I’m going to choose all of the eBooks and
I’m going to feature all of the eBooks in the Featured Products section on the Home
page. So each for them I’m going to click on “Quick
Edit” one by one and then you see there’s this Featured box so I’m going to click on
“featured” and click on “Updates.” And then I’ll do the same for the next eBook;
click on “Quick Edit” and then click on “Featured” and click on “Update” and I’m going to do
this six more times. So I’m going to click on the next one, “Quick
Edit”, “Featured”, “Updates”, we’re getting the hang of this. Last one here, actually fur quick edits, oh
that one is already selected so “Quick Edit” and then the next one, “Yoga for Stress Relief.” I’m going to click on “Quick Edit” and then
“Featured” and then “Updates” and then you want to go through that process for each of
the products that you want to have featured on the Home page and the Featured Products
section. Now you can see them right here, there’s a
star over each of these and you see these are all Featured. So I’ve added a few more as Feature and you
can see my Surf Tee, my Yoga mat, my T-Shirt; these are not checked here. They don’t have stars by them or they have
a star but it’s not highlighted like the other ones are. So once you have all of the products selected
as Featured that you want to have featured, then let’s go take a look at the Home page
by clicking on “Visit Site.” So now we see here we are on our Home page,
we have our title and our Menu, we have our image and our title. When we scroll down we have our Product Categories
and we have all of the different Featured Products that we want to have displayed on
our Home page. Now if you’d like to add more Featured Product
thumbnails of any products on the Home page, you can do that by increasing the number of
Featured Items in your WooCommerce Settings Theme Options screen. Okay, so I just want to have eight though
featured right here. So the next step is it looks like this website
is pretty good to go; let’s take a look. So we have our About page here that looks
good. We have our Blog page; it looks like we do
need to add a blog post so let’s do that now. To add a blog post, you can do it in several
different ways. One, you can go all the way to the top, hover
over “+ New” and click on “Post” or you can click on “Dashboard” on the left-hand side
here, and then on the Dashboard, you can click on “Post” and then once again on the top,
you can click on “Add new.” So I’m going to click on “Add new” and the
first thing we want to do on our new Blog post page or screen here is that we want to
give our blog a title. So I’m going to call this the “Top Health
Benefits of Yoga.” This would be my new blog post and then you
want to put some text or some content here. I’m going to add it to the category called
Blog by just clicking on “Blog”. Once again if you want to create a new category,
you can just click on “Add New Category” and then add a category name or title and then
click on “Add New Category.” You can also add some tags right here so I’ll
add the tags of Yoga and Health and then I’ll click on “Add.” Next if you want to set a Featured Image to
show up on the Blog index page, you can set a Featured Image by clicking on “Set Featured
Image” and then you want to click on “Upload Files” and “Select Files” and then you can
choose the image that you like. I’d like to choose that one and I’d click
on “Open”. Once again, it’s always a good idea to include
a title and an alternative text so I’ll add something there and click on “Set Featured
Image.” Okay, then you can just scroll down or you
can add an excerpt if you like. So I will do that. I will just add a first sentence or two of
this particular post so I’ll just grab that there and I’ll add my excerpt and finally
you can choose in the layout settings where you would like, right down here below if you’d
like a right-hand sidebar, a left sidebar or a no sidebar. So this is a blog post so I do want to start
including a sidebar now so I’ll click on this one right here to have a right-hand sidebar
and then I’m going to scroll up to the top and click on “Publish” to publish this blog
post. So in addition to having a Featured Image
in addition to the Blog index page, I also want to include an image on the actual blog
post itself. So do that, you want to place the cursor to
where you want the image to be displayed and the click on “Add Media” and then I’m going
to choose an image from my Media library but if you would like to upload one from the computer,
you can do so by clicking on “Upload Files.” Here on my Media Library screen though, I’m
going to choose this image; this beach image right here and I’m going to scroll down. I want the alignment to be center so I’ll
click on “Center.” I want the image to link to nothing and I’ll
keep it up Full-size right here and then I’ll click on “Insert into Post.” So once you have your image in the Edit Post
screen of your blog post, the other thing I want to show you is how to add a video to
your blog post. So I’m going to scroll down here and I’m going
to add a video in the location where I like it to show up here in my blog post. I’m just dragging this down. So to add a video to your blog post or to
your page really, you just want to place the cursor to where you want to add the video
and then you need to go grab your video URL. So here we are on my YouTube channel and I’m
just going to grab a URL. Of course this has nothing to do with your
— rather perhaps this video will be helpful to everyone as well, “The Top Ten WordPress
Plugins Every Website Should Have.” So I just want to show you though how you
can add a video to the website. So this is just as a demo. So you just grab the URL, you just highlight
and copy the URL and then you just want to go back to your blog post and then you want
to paste in the URL in the blog post where you want the video to show up. So I’m just going to paste the URL there and
when I scroll down, we can see here is the URL of the video. Once you have everything set here on the Post
page, you can once again update it by clicking on Update.” Once the post is updated or published, go
ahead and click on “View Post” to view the post. Here on the Blog post page, you’ll have the
blog’s title, some information about the blog post and then you have the post itself. So we see here’s the image, then I have my
text; here’s the video. So there’s quite a few empty spots here though. We see that we need to add the Footer at the
bottom here and then on the right-hand side, we’re also missing the sidebar. So let’s add the sidebar as well as the Footer
area now. To do that, you want to go up to the top,
click on “Dashboard”, and then here on the Dashboard screen, the next step is you want
to hover over appearance on the left-hand side and click on “Widgets.” The widgets give you a way to add customizable
content; pretty much any kind of content that you want on the sidebar and in the Footer. So we see here we have a primary sidebar and
then we have our Footer sections here, so let’s start by adding the content to the primary
sidebar. So keeping in mind this is an e-commerce website,
I want to make sure that it’s really easy for anyone who visits to find my product. So I want to start by giving a Product Search
Field at the top. So I’m going to search for, here we see here’s
the WooCommerce Product Search Widget. So I’m going to grab this and drag it to the
top into the primary sidebar and then I’ll just drop it right there and I’ll add a little
title here “Search for products” and then I’ll click on “Save” and the next thing that
I want to do is I want to add some of my Featured Products. So I’m going to scroll down and look for the
WooCommerce Featured Products. Let’s see where those are located; right here
where it says WooCommerce Featured Products. So once again I’m going to drag that up to
the top as well and then release it. And here I might just want to call it, “Featured
Products” and I’ll add three products; I’ll just change the number here and click on “Save.” And the last thing that I want to add is the
Category Sections. So the different categories, since I have
four different categories, so here it is WooCommerce Product Categories. So I’ll drag that one up as well. And then, underneath the Featured Products
I’ll just release it and add the word “Product Categories.” Okay, then you can order the Product Categories
by the category order or by the name. So I will just order them by product name
and then I’ll click on “Save” to save these settings. So the next thing that we can do is we can
also add some content to the Footer area and looking at our demo over here, this is where
we are headed. So in the Footer area, I want to add some
custom menu items right here and then I want to add some Social Icons so anyone can connect
with me on the social web. And then I want to add an Email Optin Form
so that anyone can easily sign-up for my email, my weekly email. So let’s go about creating the Custom Menu
first and then we can add it to the Footer section. So going back to our website, I’m going to
scroll up here and go to Menu. So here where it says Appearance on the left-hand
side, I’m going to click on “Menus” and then at the top we see we have our Top Menu and
our regular Primary Menu but I need to create another Custom Menu so I’m going to click
on “+”and then right here, I’m going to call this my “Footer Menu.” So just add in Footer Menu and click on “Create
Menu” and then as we did before for the Menu items, we need to select the items that we
want and drag them into this area here. So the first one I want is, I want About,
Blog and Contact and I also want Shop and Cart. So I’m going to add all of these different
items to my Menu. We also might want to add a Press page or
an FAQ, Frequently Asked Questions page. So I’m just going to add these right here
and click on “Add to Menu” and then once again I’m going to organize these or re-order them
the way I want them to be displayed. So I want the About to come first and then
perhaps the Blog and then the Contact and the Cart and Shop will come after that. And then also for the About Menu Link, I actually
want to call it “About the Website” so I’ll just add in the website right there and then
I’ll click on “Save”. Okay, so here is my Menu, now let’s go back
to the Widgets by clicking on “widgets” on the left-hand side, clicking on Widgets. Then for footer one, two, three and four;
you’ll see that I have four different Widgets but I’m actually going to configure this so
that there are only three Widget sections in the Footer. So here for Footer number one, I want to open
it up so we can see it and then here on the left-hand side under Available Widgets, I
want to choose “Custom Menu” and drag this over. And then, here I can choose which Menu I want
so I can choose the Menu, the Top menu or the Footer menu. I want the Footer menu so I’m going to leave
it as that and then I’m also going to give this custom menu a title. So I’ll just call it once again the title
of the website and then click on “Save” to save this menu. So now let’s go to the website and check it
out. I’m going to go to the top and click on “Visit
Site” and then I’m going to click on “Blog” and here we see now we have my Blog Index
Page right here with my different blog posts. We have this one as the default. We’ll have to delete this later but I’ll leave
that on for now. And then here on the right-hand side, you
see here we have the Sidebar Content info showing up and now at the bottom we also have
our first Footer section right here and we have two more to go. So to add the next one, we tried the Simple
Social Icons and once again, this is where we’re headed. We’re going to add Connect on the Web icons
as well as the Sign-Up Form. So let’s add the Simple Social Icons now. So going back to the website, I’m going to
go back up to the Dashboard and click on “Dashboard” and then on the left-hand side, this time
I’m going to click on “Plugins” and at the top I’m going to click on “Add New.” Then here in the Search Field, I’m going to
do a search for the Simple Social Icons and click on “Search Plugins” and here we see
it’s the first one so I’m just going to click on “Install Now”. “Are you sure you want to install this?” “Yes, okay.” Okay, so once the plugin has been successfully
installed, go ahead and click on “Activate Plugin” to activate the plugin. Next once the plugin has been activated, we
want to go back to Appearance and Widgets and then on the right-hand side in Footer
number two, we want to find the Simple Social Icons right here and we want to drag this
to Footer number two. Here you can add a title in this particular
Social Icon section so I’ll just call it “Connect on the Web” and then you can set the size,
the border radius, the alignment. I’m going to keep this all as they are but
I am going to change the background color and the hover color. So staying consistent with the orange in the
website, the orange that we saw for the default style sheet for this particular website; I
am going to create the background color to be the same color as that which I happen to
know is this code right here. I’ll post this in the event that you want
to use the orange color as well. But we see I just added the background color
in the background hover color. And then you want to add the URL for all the
different social networks that you want to have featured in the footer within the Simple
Social Icon section. So for example, I want to include my twitter
and I also want to include my YouTube so I’ll just drop that in there and change Twitter
to YouTube, and I also want to add my Pinterest so I’ll just add that as well and then finally,
I think I’ll also add my Google+. So I don’t really remember my Google+ off
the top of my head but I’m just going to put a URL in here. Of course you want to choose your actual Google+
URL. You want to add that in here and always make
sure that it starts with http:// so I’m just adding it so that it shows up as an icon but
of course this is going to go to the top level Google+ page, not my personal but since I
don’t remember the number off the top of my head, I’m just going to leave it like that. And we see that we have the URL’s for my other
Social Networks here. So once you’re ready to go, go ahead and click
on “Save” to save your changes. Okay, so now let’s take a look at it by clicking
on “Visit Sites.” Now when I scroll to the bottom, you’ll see
that I have the Custom Menu, on the left-hand side I have my Connect on the Web Social Icons
and the last thing is we need to add our Email Optin Form. So in the essence of time, I’ve created another
video regarding how to add an Email Optin Form to your WordPress website so I’ll leave
that link here in this video so you can check this Email Optin Form video out as well. So specifically in this video, I’ll be teaching
you how to install and set-up the Magic Action Box plugin as well as how to set-up a free
Mail Chimp account to start collecting the emails that you’ll be getting on your Website,
so I encourage you to check this out. In the meantime, I’ve already gone and added
this plugin to the website. Once again step by step, you can check out
that other video and you’ll be caught up with how you can add this right here. So I do want to point out though now that
this is here, note that there’s a special customization to this particular theme specifically
regarding removing these lines for example and you’ll notice that, I’m not sure if you
can see it but the shade of this gray is slightly different from the other shade. So once you check out the other video and
set-up this email form here, then we’ll come back to this video and then we’ll continue
with customizing this box. So that is what I’m going to do right now. Right now I’m going to customize this box. To do that I’m going to go up to the top and
click on “Dashboard” and then here on the Dashboard screen I’m going to go to the Magic
Action Box Settings and click on “Styles and Buttons” and then I’m going to click on “Edit
Mystile” right here by clicking on “Edit” and then here on the General tab, you’ll note
that the background color of the form box is this code that says “f5f5f5.” So the code we will actually need is f7f7f7. It’s just a slightly different variation of
the gray and then in order to remove that border around the box, I’m just going to make
this border zero pixels and then I’ll come to the bottom here and click on “Save Style.” So now when we go to the Home page to check
out that form, I’m going to click on “Visit Site” and now when I scroll down, you’ll see
that the line has the border has been removed and now the background of this form is the
same as the rest of the Footer so it looks a lot better. So anyway I encourage you to check out that
video. Once you’ve done that, you should be up to
speed Email Sign-Up Form here in the Footer. So let’s take a look at the other pages on
our site. So we’ve added the Blog Index page. I’m going to click on that here, there we
go. And when I click on this blog post, the other
thing that we need to do here — so we have our blog post on our sidebar, we also now
have our Footer area and also note that because I just added the Magic Action Box, we now
have this extra box here, this other call-to-action inviting everyone to sign-up directly in your
blog post, inviting them to sign-up for your email list right under your blog post. So again, if you watch that other video, then
you’ll know exactly how to add this as well. So the other thing I want to add here is I
want to add some Social Sharing Icons so that everyone can easily share my blog post via
Facebook and YouTube and other social networks and I also want to add a more social comment
system right here. So what we need to do now is we need to go
up to the Dashboard once again by clicking on “Dashboard” and then we’re going to add
a plugin by clicking on “Plugins” and then at the top click on “Add New” to add a new
plugin. And the plugin we’re looking for is called
Jetpack. So I’m going to do a search for Jetpack. I can click on “Search Plugins” and here we
see it’s the first one. It’s called Jetpack by WordPress.com so I’m
going to click on “Install Now.” “Are you sure you want to install this?” “Yes, okay.” And once the plugin has been successfully
installed, go ahead and click on this link that says “Activate Plugin.” So okay, your Jetpack is almost ready. “A connection to WordPress.com is needed to
enable features.” So we need to connect to WordPress.com. So I’m going to click on this button here
that says “Connect to WordPress.com” and here on the next screen now Jetpack will ask if
you authorize the plugin to connect with your website and with WordPress.com so now you
need to sign in with your WordPress.com username and password and if you do not yet have a
WordPress.com account, it’s free so you can just create an account by clicking on this
link here that says “Need an Account.” Here on the WordPress.com website you’ll just
need to add in your email address, username and email password and you can also create
a blog address if you like but given that we’re creating our own website, most likely
you do not need a blog address because we already have a blog so I would bypass this
route and instead there’s a small sentence down here and it says, “If you do not want
a blog, you can simply sign-up for just a username.” So I would recommend that you click on this
link that says, “Sign-up for just a username” and here you can add your email address, your
username and your password and then click on “Sign-up here” to sign-up for a WordPress.com
free account. Okay so I already have a WordPress.com account
so I’m just going to add my username and password and then I’m going to click on this button
to authorize Jetpack. Once you’ve also created your WordPress.com
account, come back to this page and also add in your username and password and click on
“Authorize Jetpack.” Okay you’re fuelled up and ready to go. The features below are active. So you can check out all these different features,
these are tons of different features that you can now add to your WordPress website
but the two specifically that we want are the Sharing features and the Comment features
; so here’s the Sharing features right here. So I’m going to click on “Configure” to configure
these features, and here we are on the Sharing Settings screen. So you just want to scroll down, here we see
all the available services and you just want to drag and drop them in to this Enable Services
Box to enable these services. So for example, I want to ass Google+ so I’ll
just drag that down and I want to add Facebook , Twitter and Linkedin and then in the “More”
button over here, I’m going to add Pinterest, Tumbler, I’ll add email and I’ll also add
Reedit. You can add the others as well but I just
want to show you these right here and also notice there’s a Live Preview button so you
can see how your icons will look when they’re actually being displayed on your website. So the next thing is you can configure these
areas including where you want the buttons to show so show the buttons on and you can
choose where on the website you want them to show. I prefer just keeping them on the blog post
screen so I’m just going to click on “post” but if you want them to show up on pages or
anywhere else, feel free to click that right here. Last, you just want to click on “Save Changes”
to save the changes. Okay, once the share settings have been saved,
we’re not quite done with Jetpack. We want to click on “Jetpack” are the comments
so I’m going to scroll down here we see Jetpack comments are listed and it says, “A new comment
system that has integrated social media login options” so I’m going to click on “Activate”
to activate the Jetpack comments. Okay so Jetpack comments have been activated. The one last one that I want to show you that
I’m not going to use but I want to show you because I really, really love it is this Carousel
feature. And when I click on learn more, it will tell
you more about it. But it says, “With carousel, you can basically
create galleries, really cool galleries and light boxes for your images.” So if you’re going to be creating an Image
Gallery or adding photographs to a gallery in anyway, then I definitely recommend that
you checkout this carousel within “Jetpack”. All you have to do is click on “Activate”
and it will pretty much take care of everything for you. So I have other videos demonstrating how Carousel
works so be sure to check out the other videos related to the carousel. Okay so I’m just going to come up and I’m
going to check out the website by going to “Visit Site.” And now when I go to the Blog page by clicking
on “Blog” and the scrolling down and clicking on this blog post, now we see when I scroll
down underneath the blog post we have the social icons right here where anyone can now
very easily share your blog post to Google, to Linkedin, Twitter, Facebook and to other
social networks. And we also see now here’s the comment section
and when I click in here there’s going to be additional social sign in options for anyone
who wants to comment. So there we go. I think we’re pretty much ready to go. Let’s take a look at the Cart page by clicking
on “Cart” and here we see here we have the Cart page. Now note that there’s a sidebar here. On the Cart page, you really don’t want to
have a sidebar. It’s a little bit distracting and I want to
make sure that anyone who wants to buy something on my site really is just focused on the Cart,
not on the sidebar. So I’m going to remove the sidebar by going
up to “Edit Page” and then I’m going to scroll down to the bottom and here where it says
“Layout”, right now we’re displaying a right-hand side bar, I’m going to click on this box so
that there’s no sidebar on the page; It’s just a full width page. And then I’m going to scroll up to the top
by clicking on “update.” So now when I view the page by clicking on
“View Page” now we see that the sidebar isn’t there and the whole page looks a lot more
cleaner and looks simple. Okay, I’m going to do the same thing with
the Shop page so I’m going to click on “Shop” and actually it looks like the Shop page looks
good. It’s just — there’s no sidebar so that’s
great. So here we are on the Home page of our WordPress
e-commerce responsible website and we can see that we’re almost ready to go. So we’re almost done and we’ve got just a
few more steps to do. So let’s set-up the Shipping as well as the
Payment Options. Those are the two remaining steps for our
website. So to do that, I’m going to go on up to the
top, click on “Dashboard” and here on the Dashboard, the next step is we need to go
to the WooCommerce Settings. So I’m going to hover over WooCommerce and
click on “Settings” and here we see we’re on the General Tab. So the first thing we need to do is change
the location so note that it’s currently the UK. Go ahead and choose whatever country you are
in. I’m going to click on this and choose California
and the US so I’m going to scroll down here and click on United States, California and
then of course I’ll change the currency from Pounds to US Dollars. So I’m just going to scroll down, choose US
Dollars. Allowed countries, all countries; that looks
good. Enable the use of coupons, that looks great. Everything else looks good. I’m going to come to the bottom, we’ve already
gone over the downloadable products options so I’m just going to go ahead and click on
“Save Changes.” So once the General Options have been saved,
the next step is we need to set-up the Payment Gateway. So at the top I’m going to click on “Payment
Gateways” and here we are on the Payment Gateways page. So note that there are these purple check
boxes right here, these are all the currently active payment methods, I actually in this
video I’m just going to use Paypal just for simplicity. So I’m going to make sure that Paypal is selected
as a default which it is right here. I’m going to click on this button and click
on “Save Changes” and then here I need to disable or turn-off these other Payment methods. So I’m going to go to Bacs here; this link
and click on that and then I’m going to uncheck this to disable transfer, turn it off, scroll
down and click on “Save Changes”. Now if you want to enable any of these, go
ahead and check them but for the purpose of this demo, I am going to turn them off. So I’m going to turn-off Cheque as well so
I’m clicking on “Cheque” and then I’m going to uncheck this box to disable the Cheque
payment and then I’ll click on “Save Changes.” Finally, on the Paypal link over here, I’m
going to click on “Paypal” and I want to make sure that this is enabled so this should be
checked if you’re using Paypal and then I’m going to scroll down and I’m going to add
my Paypal email and the receiver email. So I’m going to add in my email right here
and then the receiver email. Then I’m going to scroll down and if you have
the Paypal Sandbox box checked, then it is a good idea to uncheck it because this is
related to Testing Payments. So I don’t want to check any payments right
now or test any payments so I’m going to uncheck it and click on “Save Changes.” Okay so it looks like for some reason this
just disabled it, I had it checked and it unchecked it so I’m going to click this one
more time. I want to enable the Paypal standard right
there, that’s checked. I’m going to scroll down and click on “Save
Changes.” Okay, so the “Enable Paypal Standard” is checked,
is saved. I’m going to click on “Payment Gateways” one
more time just to look everything over and it looks great. So here we see, everything is turned off except
for Paypal. So our Payment Gateways are good to go. The next step is we need to configure Shipping. So I’m going to click on “Shipping” right
here and here we are on the Shipping Options page. So keeping in mind that most of the products
so far are eBooks; eBooks are downloadable so there’s no shipping and then also keeping
in mind that in general, it’s always a good idea if you’re able to offer free shipping
because it’s one less obstacle that a customer has to consider to buy your product. So whenever possible, it’s a good idea in
general to offer Free Shipping if you can. So in this particular demo, I’m going to set-up
Free Shipping and to do that I’m going to make sure first of all that the Shipping Method
default right here is set to “Free Shipping” and then because it’s free we know that what
the price is, there’s no price, it’s zero so there’s no need for a Shipping Calculator. So I’m going to disable the Shipping Calculator
by un-checking this box and then I’m going to scroll down here and click on “Save Changes.” Once the Shipping Options have been saved,
you just want to make sure that you go over each of these different screens to make sure
they’re not enabled. So we see here that the only Shipping Method
that is enabled is purple but you happen to see that Flat Rate has a purple check or maybe
these other types of Shipping Method has a purple check, that means they’re enabled and
to turn them off you need to go to the actual screen by clicking on the link for it. So I’m going to click on “Flat Rate” as an
example and here you see here it is unchecked. So if you see that this is checked, you want
to uncheck it and once again that’s also if you want to offer Free Shipping. So here we are on the Flat Rate screen so
this one should be not enabled. So it’s not enabled here, there’s no check
so I’m just going to come down here, click on “Save Changes” and check out the other
screens. So I’m going to click on “Free Shipping” and
here we see this is enabled, there’s a checkbox so that’s good. International delivery, this is not enabled
so that’s good. I don’t want that right now. If you do want it then this is the page you
would come to. You would click on this box and then you would
configure all the different international delivery options. Just a side note, I’m not going to cover Product
Shipping Classes in this video. I’ll create another video related to Shipping
Classes but I just want to point out if you do want to have different shipping rates for
different products within your Product Catalogue within your WordPress website, then you need
to take a look on the WooThemes Documentation page on Product Shipping Classes. So as it notes here, it says “Product Shipping
Classes allow you to group similar products for shipping so they work much in the same
way as Products in Posts Categories.” So here when you scroll down there’s an example
that says, “Example, you may sell bookmarks and books; books cost more to ship so you
place them in a Shipping Class called Book and assign rates respectively.” So for example on your website if you want
to offer eBooks for free or download which would make sense because there’s no shipping,
it’s downloadable. And if you want to offer Flat Rate Shipping
with some positive price that’s not free, then you’d have to create different Shipping
Classes and I’ll leave the link for this particular page on WooThemes in the video but it really
guides you how you need to do that. You basically need to add a Shipping Class
by going to WooCommerce Products Shipping Classes and creating the different classes
with the different prices and then you need to go to each product and you need to edit
products one by one and you need to select the Shipping Class for the product when you’re
in the “Edit Product Page.” So in the Product Data Section of the Edit
Product Page, you need to actually select the Shipping Class for that specific product. So anyway, that’s just a heads up on Shipping
Classes. It gives you lots of different features for
Shipping Rates for products in your Product Catalogue. Okay so I’m glad we just touched upon Shipping
Classes; let’s go back to our video. And then last, you have Local Delivery and
Local Pickup. So we just want to make sure that these are
also not enabled unless of course you want them. So it’s not enabled so that’s good and Local
Pickup should not be enabled either and it’s not. Okay so we’re good to go, I’m going to click
on “Shipping Options” one more time. And here we see we’re all good to go on our
Shipping Options. The only option we have is Free Shipping right
here. So let’s take a look at the website. I’m going to go up to the top, click on “Visit
Site” and here we have our website. So let’s go through the actual buying process
or shopping process that a potential customer may have when they come to this website. So let’s go ahead and check out a product. I want to buy this or add this particular
product to the Cart by clicking on this “Yoga for Beginners” eBook and here we see we’re
on the product page for this eBook. So we have the thumbnail, the title, the price. We now see that it’s in dollars not in pounds. There’s a short description and then the call
to action add-to-cart and then when I scroll down, here is the first chapter embedded in
the product page. Then just below that, there’s all these different
related products. So okay, I’m going to add this to the Cart
by clicking on “Add to Cart” and okay, “This eBook was successfully added to your cart.” I can “View Cart” or I can “Continue Shopping.” I am going to order one more thing here, this
time I’m going to order this Yoga Mat so I’m going to click on this Yoga Mat right here
and here we see here among the Physical Products right here. So I have an option of different colors. So I can click on this and choose whichever
color I want. I’ll keep it with orange and then I’ll add
this one to the Cart by clicking on “Add to Cart.” Okay so once this one has been successfully
added to the Cart, we can view the Cart by clicking on “View Cart” and here are the two
items in the Cart. There’ll be a thumbnail image, the title,
the price, the quantity and then the total and then down below you’ll have your Cart
Totals. So we see the Cart Total right now is $45.00. There’s Free Shipping so the order total is
$45.00. So note that we can also apply a Coupon here
if we like. So let me show you how to create a Coupon
for your website. So to create a Coupon, I’m going to go up
to the top, click on “Dashboard” then here on the Dashboard I’m going to go to the WooCommerce. I’m going to hover over WooCommerce and you
see there’s a link here for Coupons so I’m going to click on “Coupons”. And here on the Coupons page we can add a
new coupon by clicking on this link at the top that says “Add Coupon.” So the first thing we need to do is give our
Coupon a Coupon Code so I’ll just call this “Summer Fun.” And then you can give the Coupon a description,
this is optional if you like. There are several discount types. When you click on this, you’ll see that you
can create a Cart Discount, a Cart Percentage Discount, a Product Discount or a Product
Percentage Discount. I’ll keep it at Cart Discount and then you
can add your Coupon amount. So I’ll make this $5.00 by just putting a
five there and then you’ll notice that when you scroll down, there’s all these other settings
that you can check and you can configure or add or enable in order to really drill down
on what kind of coupon you’re creating. So is it for a certain product? Do you want to exclude products? Certain product categories, exclude categories. There’s a lot of detail here that you can
really narrow down on what this coupon is for. So I’m just going to keep it pretty simple. I’m just going to create a straight across
the board $5.00 Coupon off the Total order and click on “Publish” and now the Coupon
has been created. So going back to our website, our WordPress
website, here when I see I have two items in the Cart for $45.00 and to checkout or
actually, what I need to do now is I need to apply the Coupon so I’m going to click
on this “View Your Shopping Cart” icon. I could also click on this Cart button over
here and here you see once again here we are on the Cart page. So right here I’m going to apply the Coupon
by adding in the Coupon right here “Summer Fun” and then clicking on “Apply Coupon” and
the Coupon has been applied successfully and now we see when I scroll down the order which
was $45.00 now has a five dollar discount so the order total is $40.00. Okay that looks good so if am going to now
click on this button “Proceed to Checkout.” So here we are on the Checkout page and note
that we have a right-hand sidebar and as mentioned, I’m not a big fan of having sidebars on my
Checkout page because the customer is just about ready to place their order and then
there’s other distractions so I want to remove the sidebar from the Checkout page so to do
that I’ll go up to the top and click on “Edit Page” and then I’m going to scroll down here
to the bottom and where it says Layout, I’m going to choose this box here for the full
width layout. Then I’m going to scroll up to the top and
click on “Update” to update the checkout page. Okay, to view the page I’m just going to click
on “View Page” and here we see the Checkout page looks much better. It’s much cleaner, it’s more simple, there’s
no distractions anymore and the focus is on just checking out which is great. So a customer would then just add their billing
address and their shipping address, they would scroll down, review the contents of their
order and order details. And then as we see, Paypal is enabled. They would just click on “Place Order” it
would be sent to Paypal where they can either log-in with their Paypal account and pay via
Paypal or if they do not want to pay via Paypal or if they don’t have an account on Paypal,
they can simply log-in as a guest and pay with their credit card or their debit card. So the good news is even if you do use Paypal,
a customer does not have to have a Paypal account, they can just sign-up as a guest
and pay directly with their credit card. So that is how they would place their order. So back on our Home page, this is how you
set up the Mystile Free Responsive E-commerce WordPress Website by WooThemes. It’s a gorgeous website. It’s minimalist, it has a really great design. There’s lots of focus on the images and the
products themselves and in this video, we went over specifically how to set-up eBooks. So thanks for watching. I hope you enjoyed this video and hope it
was helpful. If you have any friends who are also looking
for a Free Responsive E-commerce Theme using WordPress, then please feel free to share
this video with your friends. Also keep in mind I’ll be coming up with new
videos on WordPress Online Marketing and Building a Business Online. So if you enjoyed this video and want to be
updated on future videos, please subscribe to my channel. Thanks for watching, I’ll see you in the next
video.

Leave a Reply

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