Create An Ecommerce WordPress Website In 3 Hours! (Woothemes Wootique)

Create An Ecommerce WordPress Website In 3 Hours! (Woothemes Wootique)


Hi everyone. I’m Katrina, and in this video
let’s go over how to create an e-commerce website. Specifically, I’ll be building an
commerce website for a hypothetical t-shirt company. And I’ll be using WordPress and the
free WordPress theme provided by WooThemes called Wootique. So let’s take a quick tour
around the website we’ll be building in this video. So here we are on the homepage of the
site. We see here at the top there’s either going to be your website name or a logo, and
I’ll show you how to set that up. Then, just underneath the title or the logo, we’ll have
a menu here so anyone can easily around your website or around your product catalog. Just
under the menu we’ll have a featured product slider which we see when I click on this button
here, a whole set of additional featured products slide over like that. Now, just going back
when we hover over each of these different thumbnails in the product slider, the featured
product slider, you’ll note there are two calls to action. We can either click on the
title of the product, which will send us directly to the product page, or we can simply add
the product directly to the shopping cart. So I’ll show you how to set this up in this
video. Just below the featured product slider we have the recent products and this is pretty
much the rest of your product catalog, all of the rest of your products will be displayed
here. And again, with the title that goes directly to the product page, or a call to
action. So one thing I love about this particular
theme is that there are very few distractions. Your eyes, your attention, is really directly
on the product, and on the call to action, which when you have an commerce site is exactly
what you want. You want to have everyone pretty much just focused on your product because
you want to sell them. So this theme is really really minimalist, and I just love, I love
how this theme is set up. So thank you WooThemes for providing us with this free, this wonderful
free e-commerce theme. Okay, so moving on. Right here on the right
hand side, this is a sidebar. And with the sidebar you can add whatever custom content
that you would like. So I’m going to show you how you can configure different custom
content here in the sidebar. We see in this particular example, I have a search for products
widget at the top so anyone can easily search for products directly from this search box
right here. Then I have the Top Rated Products that are featured here in the sidebar, then
I have my On Sale Now t-shirt. And then at the bottom I have a few social network icons
so anyone who comes to the homepage can easily connect with me on the social web, either
via Facebook, Twitter, YouTube, or some other social network. And I’ll show you how to set
that up in this video also. So coming up to the top let’s take a look
at one of the product pages. So I’m just going to scroll down here, and click on this one,
the Faith Hope Love sweatshirt to go to that product page. And when I click on that we’ll
see here we have the product page for this Faith Hope Love sweatshirt. So at the top we have the title of the product.
Then we have the price range, a short description, and then as we see here we see the default
is small. So note that this price right here, this is from $60, which means this is starting
at $60, so in this video I’l show you how to create different prices for the same product.
There may be for whatever reason you may want to offer different upgrades or different types
or variations of your product with different prices or different attributes, and I’ll show
you how to set that up. So here for example we see, the size small sweatshirt is $60,
but when I click on for example the extra-large, the price goes up to $65. So that is a price
variation that we can apply to the same product on the same product page. Now, one other thing I want to point out here,
is this product gallery. I’ll show you in the video how to set up a nice product gallery
so that when you click on the thumbnail for example it opens up into a lightbox display
so you can see a larger version of the product. And then when you click on the arrows here
you’ll slowly be able to see each of the different angles or images associated with the product.
So this is just a really great feature of this particular theme is the ability to add
a product gallery to your product page. So I’ll show you in this video how to configure
and how to set this up. Okay, scrolling down the page we see the next
section here in the middle is you’ll have your longer description. And then when we
click on additional information you’ll see that there are the different sizes that are
available for this particular product. So additional information related to the product
will show up here. And finally there’s a review tab where anyone can summit a review related
to the product. Just below that we’ll have a variety of different related products that
you can add. And in addition to related products I”ll show you how you can set up cross sells
or upsets for this particular product. So now just scrolling up to the top let’s
take a look at some of the internal product pages of the site because once you have the
main e-commerce features set up most likely you’ll also want to have some additional internal
pages. So let’s take a look at the about page. I’m going to click on about right here. And
here we see there’s an about page that you can create an about page about your business,
your company, your store, and I’ll show you how to add some text, an image, and here we
a see there’s a call to action button so I’ll show you how to set that up also. So I’m going to click on Contact Me to go
to the contact page. And here we see there’s a really simple form for anyone to contact
you directly through your website. So I’ll also show you how to create a contact form
for your e-commerce website. So let’s take a look at the checkout page
for when someone actually places an order. So I’m going to go back to the homepage. And
then I’m going to scroll down here to the bottom. And actually no, I’m going to just
click on this product here the Peace T-Shirt for Men, just click on that. And here we see
it’s $40, so I’m just going to click on Add to Cart to add this product to the shopping
cart. Okay so the peace t-shirt was successful added to your shopping cart. I can either
click on this button here to view the cart, or I can go directly to the checkout. So I
want to first check out the view cart options so I’m going to click on View Cart. Also note
in the sidebar here you have one item in the shopping cart for $40. So here is the Cart and you see there’s going
to be a thumbnail, a title, the price, the number of quantity that someone is ordering,
and the subtotal right here. So we can also add a coupon to this. So I’ll show you in
this video how to create a coupon for your products as well. So for example we see the
sub-total is $40 for the shirt. It’s $5 for the flat rate, and it looks like I already,
I already did apply the discount. So let me just remove that temporarily, got ahead of
myself there. So now there’s no coupon associated with this particular product. So we just see the shirt. We see it’s $40,
we see the sub-total is $40. The flat rate shipping is $5. And I’ll show you in this
video how to set up different rates of shipping. So I will be using flat rate shipping but
I”ll show you how to set up free shipping or where you can set up other kinds of shipping.
International shipping, local pickup or delivery shipping. It’s really up to you, and I’ll
let you know, I’ll show you in this video where you can change your shipping method,
your shipping options. So we see that the order total now with the shirt and the shipping
is $45 and as I mentioned I’ll show you how to add a coupon to the products if you’d like,
in this video. So I had already created a coupon here so I’m just going to add that
in. The coupon code is summerfun. And I’m just going to click on this button here to
apply the coupon. And now we see the coupon was successfully applied, and now when I scroll
down we see the order that was originally $45 and now with this order discount of $5,
it’s now $40. So that is a really great feature of this
particular design from WooThemes. You can easily add coupons to your products. So let’s
take a look at proceeding to checkout, I’m going to click on Proceed To Checkout right
here to go to the checkout page. And here you’ll see you’ll have your billing address,
your shipping address, and any notes that someone wants to add about the delivery. And then when we scroll down you’ll have your
order right here. And in this video I’ll show you how to set this up with PayPal. Now there’s
other payment methods that you can use and I will point out where you can configure those
within this particular theme. But for the sake of this particular video, since it’s
a lot easier, I will just be using PayPal. So for example with PayPal you can either
have, a customer can either use their PayPal account, or they can simply use their credit
card and they do not have to have a PayPal account. So let’s take a look at what that
looks like. So for example when I go to place order by
clicking on this button here, place order, here we see we’re on the PayPal order summary
is located here on the left hand side, the item total is $40. And as it notes here you
can either log in to your paypal account if you have a paypal account or if you don’t
have a paypal account you can pay as a guest with simply your credit card or some other
form of payment and you can sign up for paypal later, or you don’t have to sign up for paypal
at all. So that gives your customers two different ways, with via paypal or not via paypal, to
purchase your products. So going back, one last thing on the website
that I do need to point out is the blog. Having a blog is a great way to add fresh content
to your website, and search engines love fresh content. So keeping your blog updated is always
a good idea. So I’ll show you in this video how to set up your blog. Here we see here
is the blog index page. All of your blog posts will show up with a short excerpt, and then
you can click on continue reading to go directly to the blog post. And you’ll have a title
and the thumbnail right here. So I”m going to click on the title, New Peace
T-Shirts Have Arrived to go to this blog post. And here we’ll see here is the blog post title.
There’s going to be some blog information including the blog publish date, the author
and perhaps a blog category that perhaps the post was grouped in. Then I’ll show you how to create an image
gallery. This is different from the product gallery. So this is just an image gallery.
You can include any kind of images here within the image gallery. And when I click on one
of these just as an example, we see it also opens up into a lightbox display, which is
really cool. I love this lightbox display. And you can see larger images, larger versions
of the images in your blog post. Now this particular lightbox display is really
neat too because anyone who sees it can also add a comment here, right here, and there’s
some meta data related to the image. So I’ll show you in the video how to create image
galleries within your blog post. Finally scrolling down we see there are some
sharing features here, so I’ll show you how to add social sharing features so anyone who
sees your blog post and likes your blog post can easily share it across the social web,
either by Facebook, Google+, Twitter, LinkedIn, or some other social network. So this is where
we’re headed. When you’re done with this video, your website, your e-commerce website, will
look something like this. Now the good news about this particular theme and about WordPress
in general, is that you don’t’ need to have any kind of programming experience or coding,
I’m literally going to walk you step-by-step, from scratch, to show you how to build this
e-commerce website. 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
for web hosting, and at Hostgator you can get both the webs 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 sue 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 to make these free WordPress training videos. After you have the domain name and the web
hosting, the next thing we’ll need is a theme, so I’ll be using a free theme by WooThemes
in this video called Wootique, and I’ll show you where to get that and how to set that
up. And finally, we some time to build the website. So, I’m guessing it will probably
take just under two hours to go through the video so you may want to allot that amount
of time so you can complete the video so that you can get your website up and running. So what are the steps to build the website?
Well the first step is to get the domain and the web hosting. Step number two is we want
to install WordPress, and finally we want to build out the website. So let’s head on
over to Hostgator to take care of step number one which getting the domain and the webs
hosting. So here we are on Hostgator.com. To view the
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 very 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, and you do only have one domain at the moment,
then you can give ahead and click on the Hatchling Plan if you’d like to sign up for that. So I’m going to click on the “Baby Plan” because
I want to order that one. And the next step we see is that we need to choose a domain.
If you already have a domain then you can 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 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 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 on 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 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 the moment though. Then you can just come down here and here
you can see 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 posting is free with
this coupon. And we can see that here is our domain name, and our hosting at $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 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 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 had 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 word press 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 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 the “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 use 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 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 this 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. And what we want to do now is we want to install a
new theme by WooThemes called Wootique. This is the e-commerce theme that we need to install
to get started. So to install the new theme we want to go to WooThemes.com, so I”m going
to head on over to WooThemes.com and then in the top navigation here you want to click
on themes. ONce you click on themes you’ll see there are tons of amazing themes provide
by WooThemes here, most of the themes are premium themes but the theme we’ll be using
is a free theme, a free e-commerce theme called Wootique. So Wootique is a WooCommerce theme so I’m
going to click on WooCommerce and then I’m going to click on Search to search for all
of the WooCommerce themes. And here we go. Here is the page with all of the WooCommerce
themes, and once again most of these are premium themes but when we go to page two by clicking
on next, we’ll see that Wootique is free and this is the first one here on the second page.
So I’m going to click on Wootique to go to the Wootique page, and here we see there’s
a button here that says free download so I’m going to click on this button here. Which
brings us to the second button so I’m going to click on download now once again. And here,
three times the charm, we’re going to click on free download, this green button to download
Wootique. Now in order to download this theme you need
to have an account with Woothemes so if you don’t have an account yet go ahead and register
for a free account by filling in your info here and clicking on register. I already have an account on Woothemes so
I’m just going to add my username and password right there. And then I’m going to log in
to login to Woothemes. Once you’re on your account page you want to click on this second
tab here called downloads, so I’m going to click on downloads right here. And here you’ll
see there’s a list of all the available free downloads that you can choose from within
the Woothemes theme library. So these are all free downloads and we see here, the last
one here is Wootique, so I’m going to click on Wootique here to download Wootique. So once Wootique has been downloaded the next
step is I’m just going to drag the file to my desktop so it’s easier to find. So I’m
just going to drag it, let’s see, I’m going to drag it right there, and I’m just going
to drag it right to my desktop. Okay, so now we need to install this theme in WordPress. So I’m going to go back to the Manage Themes
screen here on the WordPress dashboard, and right next to manage themes there’s a tab
that says install themes. So I;m going to click on install themes. And here we see the
first link here is search. So we’re on the search field here, however what we need to
do is we need to upload this themes to our website. So right here there’s a link that says upload
so I’m going to click on the upload link. And then you see it says install a theme in
.zip format, so I’m going to click on choose file to choose my file, and here we see the
files on my desktop. So the one that I want to upload is this zip file that says wootique,
and then I’m going to click on open to open this file. Once the file has been chosen I
need to click on install now to install the theme. So I’m going to click on install now. Okay the theme was installed successfully
the next step is we can either live preview it, activate it, or return to the themes page.
I’m going to activate this theme by clicking on activate. So once we activate the wootique theme you’ll
arrive on the wootique theme options screen where you’ll see at the top you have several
different messages. The first one will say enhance your theme with WooDojo. WooDojo is
a powerful WooThemes features suite for enhancing your website and you can learn more by clicking
on the Get WooDojo button right here. So we are actually going to get this so I’ll do
that in just a moment. The next message says Enable Press Trends. Press trends is a simple
usage tracker that allows WooThemes to see how its customers are using WooThemes. If
you’d like to enable that you can do so by clicking on this. I’m not going to do that,
I’m not going to enable that, I’m just going to close that for the moment, just to save
some time here. So I’m just going to say okay to close that. Next we see that WordSEO and Sidebar Manager
have been removed from version 5.5 of the WooFramework. So for SEO needs we encourage
you to use the WordPress SEO Plugin by Yoast. So we will use this in just a few moments
down the line. In this video I’ll show you how to set this plugin up. So we’ll do that
a little bit later. And then you’ll see you have all the different
options available for this theme. So first let’s go ahead and get WooDojo. So I’m going
to click on this button at the top that says get WooDojo. And here we are back on the WooThemes page
where we can get WooDojo. So you can watch the video or get more information about WooDojo
here. I’m just going to download WooDojo for free by clicking on this download link. Once WooDojo is downloaded then like we did
with the theme I’m just going to drag WooDojo to my desktop so that it’s easy to find. So
I”m just going to drag it and drop it there on my desktop. And then I’m going to go back
to my WordPress theme here and what we need to do is we need to install this plugin. This
WooDojo is a plugin so I’m going to click on plugins right here. And here we see our
plugins screen so we can add a plugin in two ways, we can either click on add new here
at the top or we can click on add new underneath where it says plugins in the left sidebar.
So I’m just going to click on add new at the top here. And then I’m not going to do a search
for the plugin since I know where it’s located. Instead like we did with the theme I’m going
to upload the zip file of the plugin by clicking on upload. So I’m clicking on the upload link
right here. And then I’m going to choose the .zip file by clicking on choose file. And
here’s the WooDojo plugin with the zip file right here so I’m just going to select it
and click on open to open that file. And once the file has been chosen I’ll just go ahead
and click on Install Now to install this plugin. Okay the plugin was installed successfully.
The next step is to activate the plugin so I’m going to click on activate right here.
And now we see the plugin has been activated. So we’re good to go on the WooDojo plugin.
now I’m going to go back to the Wootique Theme Options by clicking on Wootique, and then
we see here we are on the Woothemes screen. So I had noted before that I was going to
add this WordPress SEO Plugin so just to remove this message here I’ll take care of that right
now. So I’m going to click on this to get the WordPress SEO plugin. And here we see
this is the WordPress SEO by Yoast. So we can download this but an easier way
to do that is because we see we’re on the WordPress.org Plugin Directory here, we’re
on WordPress.org. An easy way to add plugins from WordPress is to go back to the dashboard,
and then on the left hand side we’re going to click on plugins once again. And here on
the plugins screen I’m going to click on add new to add a new plugin. And this time instead
of clicking on the upload link I’m just going to do a search for WordPress SEO by Yoast.
And then I’ll click on this button here that says search plugins. So here we see it’s the second one listed,
WordPress SEO by Yoast, it has over four stars, that’s really good, based on over two thousand
ratings. You can see the details by clicking on details right here. And here we see on
the right hand side we have let’s see, this plugin was last updated nine days ago, it
requires version 3.3 of WordPress or higher, it’s compatible up to 3.5.1, which is the
version of WordPress we’re currently using and it has been downloaded over four million
times with a four and a half star rating. So this is a really awesome plugin and you
can read more about it by checking out the description here. I’m going to install this
plugin by clicking on this orange red button here that says install now to install the
plugin. Okay so once this plugin has been installed,
it says successfully installed, then I’m going to click on activate plugin to activate this
plugin. Okay you’ve just installed WordPress SEO by
Yoast. You can allow tracking or not allow tracking. I’m not going to allow tracking
so I’ll just turn that off for the moment. So here we see we do have the WooDojo plugin
right here and we have the WordPress SEO plugin as well. So let’s go back to the Wootique
theme options screen right here by clicking on the left hand side, I’m going to click
on Wootique. Now we have this message at the top but we have added the WordPress SEO plugin
so I’m just going to dismiss this message now by clicking on this box right here, this
x. And then I’ll click on okay. Yes I do want to close this banner. And now we see just the WooThemes themes options
page. So let me just scroll down here a little bit. We’re getting another little note here
from WordPress SEO by Yoast, and I just want to click on close to close that, I’m not going
to so a tour of the plying right now. So I’ll just close it. And then I’m just going to scroll back up
to the top of the theme options screen. Now let’s just take a quick look at the website
and see what we have so far. So to check out the website I’m going to go to the top left
hand side, hover over the domain name and click on visit site. So here we can see the bare bones version
of our website. Of course, we’re headed toward this version. This is another domain here
where I have the finished site already built. So we’re headed toward that but for the moment
our website looks like this. So if perhaps you are not seeing a toolbar, like for example
I am not seeing a toolbar right here right now, it’s a good idea to make suer that is
there because it makes it easier to navigate around your website when you’re logged in
to tour dashboard. So i’m going to make sure that this little toolbar here pops back up
by going back, so I’m going to click the back button. And then I’m going to go to WooDojo,
all of the features included in WooDojo. So I’m going to click on WooDojo right here on
the left hand sidebar. And here we see there’s a little description
here that says WooDojo is a powerful toolkit of features to enhance your website. Select
only the functionality that you need without any unnecessary code and enhance your website
with WooDojo today. So these are tons of features that you can add to your website that are
included in the WooDojo toolkit. So the one that we want is called WooCommerce,
so I’m going to scroll down here. It’s a plugin ,a WordPress plugin developed by WooThemes.
And this is the one we want right here, WooCommerce. So I”m going to download and activate WooCommerce
right here by clicking on this button. Okay, welcome to WooCommerce, you’re almost
ready to start selling. And you can click on install WooCommerce pages or you can skip
the setup. So I’m going to click on install WooCommerce pages right here by clicking on
this button. Okay, thanks all done. So now we have the pages installed and now we have
WooCommerce installed as well. And now we see there’s another item here on the sidebar
called WooCommerce. So now let’s go ahead and take a look at the website. So I’m going
to go to the top left hand side, hover over the domain name and I’m going to click on
visit site to visit the site. And here we see now we’re looking a lot better.
We have all of our different sample pages and items here in the menu, we have this filled
out a little bit more, and now we can see this toolbar up here at the top which will
make it easy when we are logged in to the website and we want to navigate around the
website. So this is looking a lot better than it was just a moment ago. So let’s continue building out this website.
So the first thing we want to do is we want to go back to the dashboard so I’m going to
go to the top left hand side and I’m going to click on dashboard. And then we want to
go to the Wootique theme options screen. So on the left hand side there’s an item here
that says Wootique, so I’m going to click on this. And here we are on the theme options
screen of our Wootique WordPress theme. So here on the left hand side there are lots
of different options here that we can configure to set up the theme. The first one is the
general settings tab and we see we can add a custom logo to the header of the site or
we can use a text title right here. So let’s take a look at what that looks like.
Looking at the domain where I”ve already built the site, we see the logo and the title will
show up right here in the top left hand side right here. So let’s set that up. To do that
here we are once again on the theme options screen. If you’d like to add a logo just go
ahead and click on the upload button here to upload your logo. I’m not going to use a log, I’m just going
to instead going to use a text title. So I’m going to keep this check box checked. And
you can see here you can set up the title and the tagline in the general settings page.
So when I click on general settings for example, and here we are on the general settings screen.
So now you can see here at the top here is the site title and this is the title that
I want to be displayed in the header right here, just my domain name. And also notice right below that there’s also
a tagline. So by default WordPress comes installed with a tagline that says just another WordPress
website. So I don’t really want that so I’m just going to delete that right now. You can
add a tagline or not. I’m going to leave it blank for the moment, and then I’m just going
to scroll down here and click on save changes to save the changes. Also, just a side note when you do come to
this screen sometimes if you don’t want to change anything it’s still a good idea even
if you’ve made no changes to come to the bottom and click on save changes just so that the
theme will override the Wootique in the header. So we just noted that it said Wootique in
the top header area. So it’s a good idea to save your changes here, again even if you’ve
made no changes just to make sure that this new site title shows up in the header. So once you have all the settings saved you
want to go back to the wootique theme by clicking on wootique here on the left hand sidebar.
And here we are on the wootique theme options general settings screen. Now we haven’t made
any changes yet to this but again just to make sure this configuration has been set
I’m going to come up here to click on save all changes. Again the reason I’m doing that
is because sometimes when you don’t click on these save changes button, even if yo haven’t
made any changes, sometimes the Wootique will continue to show in the header section. So
I want my domain name, the text title to show up so that’s why I clicked on save changes
right here. Now let’s take a look at the header on the
homepage. To do that I’m going to go up to the top left hand side and click on visit
site to visit the site. Okay and now we see I have my new text title showing up here in
the header. That’s exactly what I’d like. So the next step is let’s add some featured
products here to fill out this slider. To do that I”m going to go back up to the left
hand side and click on dashboard. And here on the dashboard once again you want to click
on Wootique on the left hand sidebar. So I’m going to click on Wootique right here. And
here we are on the theme options screen again for wootique. So before we add featured products
I want to go over the additional settings that you can in the general settings screen
right here. So we’ve already gone over the logo and the text title, the next one that
you can configure if yo’d like is the custom favicon. This is a small graphic that shows
up next to tour domain name in the browser window. So if you’d liekto add a favicon,
a small little graphic, you can do so by uploading a 16 pixel by 16 pixel ice image, and you
can click on this link to learn more about that, to represent your website’s favicon.
I’m not going to do that right now, I’m just going to leave it as-is. Next we have some tracking code so if you’re
using Google Analytics, and I do recommend you use Google Analytics, you can add the
embed code from Google Analytics right here. I have another video where I go over Google
Analytics and how to add Google Analytics to your site, so be sure to check out that
video to learn how to add Google Analytics and the tracking code to your site. But here is a great little section where you
can just drop the code in if you have already set up your Google Analytics. Next if you
want to add a RSS URL you can do so right here. Feedburnder is a really popular RSS
feed. I’m not going to add that one either. Here is the email subscription URL, you have
a contact form email section. You can add any custom CSS and you can add some additional
options down below here. So I’m not going to change any of these. Usually the defaults
are set exactly the way I would like them to be set, so I’m going to leave everything
like that. The one thing I think I will actually add though is the contact form email. As it notes here, enter the email to be used
on the contact form page template. Add the contact form by adding a new page and selecting
contact form as the page template. So I’ll show you in this video how to set
up your contact form but for the moment I will add my contact form email since we’re
already on that page. So I’ll just add that there and then you want to scroll to the top
and click save all changes to save the changes. Once the changes have been saved let’s head
on over to the next tab here in the theme options screen to where it says homepage settings. So here we are on the homepage settings page
of your wootique theme. So as it notes at the top by default woo themes will have the
homepage content checked off here, this is a default that says display your latest post
on the homepage above the slider. So let’s take a quick look at what that looks like
right now. To do that I’m going to go up to the top left hand side bar here and click
on visit site to visit the site. And here we see just under the menu, here is the homepage
content that that is referring to. So we see we have our blog post showing up right here
because the default home settings of this theme have it checked to display this blog
post. So this is an e-commerce theme and I would prefer to have the focus be directly
on the products. I don’t really want anyone to come to the site and see a blog post right
at the top. So I’m going to turn this particular section
off so that we only see the featured products and the recent products. So let’s go ahead
and turn off this blog post by going back to the WooThemes options for the homepage.
So I’m going to click on Dashboard here. And then once again I’ll click on Wootique. We’re
getting the hang of this. And then I’ll click on homepage settings. And here where it says
homepage content I’m actually going to uncheck this box so that I’m not displaying my latest
post. So once we have that all set I’ll click on save all changes to save all changes. And
the options have been updated. Okay now just under that there’s a couple more homepage
settings the first one is the homepage featured products section. So we can feature either
a static grid which is all the different thumbnails displayed on the homepage at once, or a slider.
So I would prefer to have a slider so I’m just going to keep the default of slider and
just below that here you can indicate in the featured entries section how many images you
want to have displayed in the slider. So 8 is a good number that will display four items
on each screen. And I’ll show you what that looks like in just a moment. So I’m going to leave that as-is we’ve turned
off the blog post showing up on the homepage and we’ve kept the slider for the featured
products, so I’ll just click on save changes. We don’t really need to since we haven’t made
any changes but I like continuing to click on save changes whenever I come to a screen
just so that I know the settings are set the way I want them, just like a double check. Okay so let’s add some featured products so
we can see them showing up on the homepage. So to add a new product to your e-commerce
website you want to go to the left hand side bar and you want to click on this link here
that says products. Here we are on the products screen and we see that I don’t have any products
added yet so we need to add some new products. To do that there’s actually three ways. You
can number one, you can click on add product here at the top, or you can click on add product
on the left hand side bar underneath where it says products. Or in the top toolbar here
where ti says +New if you hover over +New you’ll notice that it will say product, and
you can also click on this link as well. So WordPress gives you several different ways
to navigate around the website to do the same thing. So to add the product now I’m just
going to click on this link at the top that says add product to add a new product. And
here we are on the add new product page. So the first thing is we need to give our new
product a name. So I’m going to be adding a Brazil t-shirt here so I’m just going to
call this Brazil. And then we have a description field so you can add information about the
produce there. So I’ve copied some content already so I’ll just paste that right in here.
This is just going to be a women’s scoop neck t-shirt because again I’m building an e-commerce
website for a t-shirt hypothetical company. So once you have your product name in the
title field here, and you also have your description in the box here and also notice that there
are two different views, the text or the visual view. So the visual view is the what you see
is what you get view. This has all the different formatting icons here, this is very similar
to writing up an email or using Microsoft Word or using some other kind of word processing
system. You can just highlight whatever you want, without knowing any code, You can just
highlight what you want and then you can use these icons here to format it like that. So the other thing is that this text tab here,
this is the behind-the-scenes code that WordPress is generating without you having to know any
code. But if you want to learn some code it’s always a helpful way to toggle between these
two different views. For the visual view to see the actual what you see is what you get
view of the content and then you can click on text to see how WordPress is producing
the code associated with the formatting. So we see here by clicking on the text view now
WordPress has added this strong code here for the bold. It’s a bold html code. The opening
tag and then here we have the closing tag as well. So the good news is that you don’t
need to know any code with WordPress, you can simply stay in the visual mode here, the
visual view, and WordPress will generate all of the code for you. Another thing to note about the visual view
is that you notice right now we only have one row of formatting icons. If you click
on this link here, I’m going to click on this button, and notice when you hover on top of
it you get a yellow tooltip which will tell you exactly what the icon does. And that’s
true for all of the icons here in this row. So you notice when I hover over this particular
one it gives me a tooltip for an unordered list. This one is a tooltip for an italic
kind of formatting, so the good news is that you don’t have to memorize any of these different
kinds of icons, if you just hover on top of them you’ll get a tooltip provided by WordPress
that tells you exactly what it does. So the one I want to point out here is this
one, show or hide kitchen sink. And when I click on it you’ll notice I get a whole second
row of icons which is pretty cool. So you have all of these extra formatting options
that you can use to format your text. So here we have the text here we’re going
to continue adding the new product and filling out the product page. So the next step is
I want to scroll down here and I want to find the section that says product data. So right where it says product data we’re
going to be adding a simple product this time. So I’ll just keep it at simple product. When
I click on this though you’ll notice that I have several different options that you
can choose from. You can group the products or create external affiliate products or variable
products. I’ll go over the variable products later in this video but for the moment let’s
create a simple product. So the first tab here is the general tab and
if you want to use a sky you can do so right here. And also notice that when you hover
over these question marked the wootique theme also gives you tips about what this particular
field is about. So for example when I hover this question mark in the sku field it says
sku refers to the stock keeping unit, a unique identifier for each distinct product and service
that can be purchased. So that’s pretty cool here that you have a little tip that will
tell you what each of these things will do. So right now I just want to add a regular
price for this so I’m going to add a price of say forty dollars. You can also create
sales on a product so if you want to create a sale so I’m going to create a sale for thirty
dollars, the regular price is forty the sale price is thirty. And then you can schedule
it by clicking on this link here that says schedule. Then you can see the sale price
dates if you want to specify a limited time for the sale of he product and then you would
just set the dates right here. So to set the dates I’m going to click on the calendar right
here. It’s the 25th of April. So let’s say I want this sale to go into effect from today,,
so I’ll click on today through the end of the weekend. So then I click on the to field
here, the little calendar. And then I’ll add it through Sunday. So I’ll click on the 28th
right here. So now you’ll see the regular price of this product is $40 but there’s a
sale on this particular product between the dates of today, April 25th and the end of
the weekend, April 28th. So once you have all your prices lined up
here the next step is you can go down this row here. The next one is inventory so let
me click on that. Here you have some more stock keeping features you can add so for
example when I hover over the question mark you’ll notice a tip comes up. This is very
helpful. The stock status controls whether or not the product is in stock or out of stock
on the front end. So if you want anyone to see if it’s in stock or not you can add whatever
stock status you want right here. So I’m going to say this is in stock. So you’ll notice
when I click on it the out of stock option pops up as well. So I’ll leave this in stock. Allow backorders? I’m not going to allow any
backorders. I’ll just leave it at the default which is do not allow. But once again here
is the little tip for you if you hover over the question mark it says “if managing stock,
this controls whether or not backorders are allowed for this product and variations. If
enabled the stock quantity can go below zero.” So once again I’m going to leave it as the
default. The defaults work pretty well for me so I’m just going to leave it. But the
good news is that you do have several different options if you want to be more detailed about
your stock management. Okay the next one here is shipping so I”m
going to click on shipping. And here you can specify shipping weight, dimensions, and shipping
class. Now I’m not going to touch this now I’m going to talk more about shipping class
a little later in this video. And we will be coming back to shipping. So I’m going to
hold off for the moment and just leave it as-is. And click on linked products to check
out linked products. So this is the first product we’re adding,
however when we have several products on the site then you can choose whether you want
to cross-sell products or up-sell products. And once again here’s a great tip that tells
you what upsells are and what cross-sells are, and when you click in here you can select
whichever item you want. So I’m not going to do that right now because we’re just getting
started and I don’t have any other products to up-sell to or cores-sell to, but this is
an area that you can come back to later once you have products added to your website. Now the one I do want to add though is attributes.
So I’m going to click on Attributes. And here we see on the attributes panel that here we
can add an new attribute. So I’m going to click on add to add a new attribute. And of
this one I’ll make it an attribute of color, I’ll make it an attribute of color. And the
t-shirt I’m adding is a teal t-shirt, it only comes in one color. So I’m going to put the
color here as teal. And I’m going to click on this button here to make it visible on
the product page. Now note that this is a simple product so
with simple products you cannot add variations. I’ll do that in the next example with the
next product. But for the moment I’m just going to add one color, this comes in teal.
I’m also going to add one more attribute here by clicking on add. And I’ll make it a size.
and this particular one will only come in the size of small. So it’ll be really simple
it’s just a simple product with one color an done size. And then I’ll click on save
attributes to save the attributes. Once the attributes have been saved I’m just
going to scroll up and now we can see that we’re almost there. We see we have our product
category, we have our tags. The other thing we need to do is we need to add a featured
image of a thumbnail to be displayed for this product. So I’m going to click on set featured
image. Next I’m going to click on upload files because I’m going to upload a file from my
computer and I’m going to click on select files to select the file. So this is the t-shirt right here, the Brazil
t-shirt in teal so I’m just going to select it and click on open to open the file. And
here we have the thumbnail showing up on the right hand side. So I’m going to give this
a title for the image. I’ll just call it the Brazil Women’s Scoop Neck T-Shirt. And it’s
always a good idea to add an alternate text as well so I’ll just paste that in there also.
And then at the bottom I’ll just click on set featured image to set the featured image. Okay so now it looks like w’re ready to go.
So I”m just going to click on publish to update and publish this. Okay the product has been
updated. Now I’m just going to view the product by clicking on view product, this link. And now we can see the product. So we see
that it is on sale. There’s a little note here that says it’s on sale. There’s a title
and a description and a price. It was originally $40 and it’s on sale for $30. And actually
this is pounds so the next thing we’ll do is we’ll change the pounds to dollars. But
here we see we can just order it and add it to the cart. And then when we click on additional information,
again we see that it’s a simple product. It comes in one color and one size. So the next
thing is let’s change the currency here from pounds to dollars. So to do that I’m going to go to the top toolbar
here and hover over the site title and click on dashboard. And then I’m going to actually
this time click on WooCommerce to go to the WooCommerce settings. And then I’m going to
click on settings right here. So right underneath where it says WooCommerce there’s a link that
says Settings so I’m going to click on settings and here we see there are a number of different
tabs and all of these have tons of different options that you can configure. So we see
on the general tab here that the base location is the UK, so I’m in the U.S. so I’m going
to clicl o nits and change that from United Kingdom to the U.S.. And I’m in California
so I will click on California. And then for the currency I”m going to make
this in U.S. dollars. So I’m going to click on U.S. dollars right there. Allowed countries.
All countries that sounds good. And then I’m just going to come to the bottom here and
click on save changes to save the changes. Okay the settings have been saved. So now
let’s take a look at the site to look at that particular product. So I’m going to go up
to the site title and I’m going to click on visit site to visit the site and see what
the product looks like. Okay so we see it’s showing up in the recent products section.
It’s not yet in the featured products section, we’ll do that in one of the next steps. And now when I click on this you can see it
si on sale from $40 to $30 so the pounds have been changed to dollars. So once again just
clicking on it to go to the product page, we see again here now it is in dollars which
is exactly what we want. Okay so lets add some more products. And the
next product will be not a simple product but a variable product because I want to add
a t-shirt that has more than one color and many sizes. So let’s add a product with variations in
the next step. So to do that I’m going to add a new product
by going up to the top toolbar, hovering over +New and clicking on Product. Then as we did
before I’m going to give this new product a product name. This is going to be a t-shirt
that says just surf. So I’ll call it Just surf and it’s going to be a women’s slim fit
t-shirt so I’ll just add that in. Okay so we have the title here, Women’s Slim
Fit T-Shirt here, Just Surf. And then as we did before I’m just going to add some text
right here so I’ll just paste in some info that I just copied. And as we did before I
want to bold the title and the type of shirt it is so I’ll highlight it and click on the
B here to bold this info. So now we have the title and the description.
The next step is we want to scroll down and let’s see, we want to give this a product
category on the right hand side. So here we already have women’s noted, so I’ll just click
on this box so select it, to put it in the women’s category. And for tags, I’ll just call it Surf since
it’s a surf shirt and I’ll click on Add. So once we have out product title, description,
and category selected and some of our tags added, and then in the product data section
once again, this time instead of having a simple product I actually want to create a
variable product. So I just click in this box here and you see there are a number of
product types you can choose, and this time I’m going to choose the variable product by
click on variable product. So here we are in the general tab, and we
just have this sky here. And now we can click on inventory. And once again we can select
any of this. I’m going to leave it all as the default version so I’m not going to touch
inventory but these are some options that you can select if you’d like to do so. For shipping I”m going to click on shipping.
And once again we can also specify shipping right here. I’m not going to do that right
now. I’m just going to leave it as no shipping class. We’ll come back to shipping in just
a few moments when we have it together when we put together some products. So I’m going to leave shipping as it is. Next
we have linked products. So I’m going to click on Linked Products. Once again you can cross-sell
or up-sell across different products. I’m going to leave these as they are. The main
one that I want to call attention to though are the attributes though. As noted we just created a variable product
by selecting that here as the product type. So step two of creating a variable product
is to create some attributes. So I’m going to click on this field here to start adding
some attributes. So we want to add different sizes and different colors for this particular
t-shirt. So I clicked on this button here that says
attributes. And now I’m going to click on this button here that says Add to add some
new attributes. So once I click on add now we see that there’s a name so as we did before
I’m going to give this different colors by putting in color. And then notice here in
the values field it says enter some text or some attributes by pipe separating values.
So I want to add some different colors here so the first one is going to be Navy. And
the pipe they’re referring to in that description in terms of what to do here, is a line that
looks like an L and an I, and it’s located right above your return button on your keyboard.
So it’s not a very commonly used symbol, but it looks like an L or an I and if you hold
down your shift key and then you click on the button above your return or enter key
on the right side of your keyboard you’ll find it. It’s a line that looks like an L
or an I. So that is called a pipe symbol and i”m just
going to add that there to separate the different attribute values that I want to include. So I have navy. This is also going to be offered
in black, as well as in white. And let’s see we’ll add one more color we’ll put this in
yellow as well. Okay, so we have four different colors here. Actually, just to keep it simple
I’ll jet add it with three colors. Okay so we have three different values here.
Now we see that here is a button here to make this particular product attribute visible
on the product page. So I do want to do that so I’m going to check this box. And also notice,
now that we have this selected as a variable product we have a new box here that we can
check called used for variations. So this is an important box to check when
you are setting up variations on a product. So I’m going to click on this box to add the
different variations. And now we have this part of the attributes set up. So in addition to colors I also want to add
some different sizes. So to do that I’m going to click on Add to add some more attributes
to this particular product. Then just as we did with colors I’m going to give this particular
attribute a name. I’m going to call it the size. Then once again we need to enter separate
text and we need to separate the different values by this pipe symbol. So I’m going to
create different sizes, so I’ll create Small and then I’ll add the pipe symbol and I’ll
make it medium as another value, large and extra-large. Okay then we need to click on
these two checkboxes. One to make it visible on the product page, and two we want to make
this available for our variations. So we want to click on used for variations. And then
at the bottom here you want to want to click on save attributes to save the attributes.
Once the attributes have been saved, the next step and final step for setting up the variable
product is you need to click on this link here that says variations. So I’m going to
click on variations. And now you’ll see there’s a button here that says add variation. So
I’m going to click on add variation right here. And now we’ll have this drop down list
of different variations we can add. So we need to do this for each of the different
colors and each of the different sizes. So for example I’m going to click on any color
and I’m going to select navy. And I’m going to specify what sizes navy is available in.
So I’m going to make it available in small. I’m going to give it a price of $40. I’m not
going to give it a sale this time. I’m just going to make it one regular price. And then
I’m just going to scroll down and I’m just going to keep adding the different variations
once again. So I’ll add navy here, add it in medium and
give it a price again of $40. Then I’ll click on this button again to add a variation. And
then I’m going to scroll down and I’m going to select navy once again and click on large
this time. And also give it a price, a regular price of $40.
Then I will also once again click on Add Variation. And you can see what we’re doing here step-by
step. I’m just adding all the different variations that this one color comes in. So it will also
come in extra large and once again I will give it a price of forty dollars, add my variation
and so forth. So I’m just going down the list here and adding all the different sizes and
colors that this particular product comes in. So make that forty. So for this one to
save time I’m not going to add every single size for black. But I will just give it one
size. So black for this instance will come in small and I’ll also add a variation. I’ll
also make it available in medium. So let’s see. I’m going to click on black, give it
a size of medium. And I’m not going to add the other sizes just to save some time. BUt
you can see that if I wanted to I would just add large and extra large as well. So we have
one more color so I’m going to click on add variations. And this time I’ll add the white
color do I’ll make it white. Any size, I’ll also make this small. Add the variation. Then
once again, white. Any size, I’ll make it in a medium. and then again just in the essence
of time I’m not going to add these other two but if I wanted to add white I would go through
the same process of clicking on add variation. And I would add them in white and then I would
add them in large and extra large. So I’m pretty much good on all my variations
so the variations are pretty much set and ready to go, so now just scrolling up the
last step we need to do as we did before is we need to set the featured image. So I’m
going to click on this button to set the featured image, but actually before I do that to save
everything I’ve created on my product variations I’m going to click on save draft to save my
changes so far. Okay so the draft version of this particular product has been saved.
Now I’m just going to continue by setting the featured image by clicking on set featured
image link. And then I’m going to upload the files by clicking on upload files, and then
I’ll click on select files to select my file. And the one I’m looking on here is called
just surf so I’ll highlight it and click on open. And here is the image. So as we did
before it’s always a good idea to give your particular product a title and an alternate
text. So I”m going to add that in here, women’s slim fit t-shirt. And I’ll just copy that
and add it as an alternate text, and then you want to click on this button here to set
the featured image. Once the featured image has been set we just
need to go up to the top to publish this product. Okay so once the product has been published
you can view it by clicking on the view product link. And here we see at the top we have the
product image, the thumbnail of this particular product, we have the title, Just Surf, Women’s
Slim Fit T-Shirt. We might want to remove this pipe here I’ll probably do that. We see
that here it’s forty dollars. There’s no product description, we did not add that. But we see
we can choose the different colors that this comes in, whether by navy or black. We can
see medium right here. So it looks like we are missing the white color, so I’m not sure
what happened with that, let’s take a look at that. For some reason the white color is
not being displayed, So let’s go back and it looks like we have the product description
which is great but we also need to add in the short description right here as well.
So I”m going to click on edit to edit this product. And then I’m just going to grab the
description here by highlighting and copying it. And I’m going to scroll down here and
then where it says product short description this is where I’m going to paste in the information
right here in the short description. Then I’m going to come back up to the product variations
and attributes and I’m going to check this to see what’s going on with the white color.
So I clicked on attributes and then I’m going to click on color. And it looks like we do
have color listed here as an attribute, so let’s take a look at the variations. I’m going
to click on variations. And then I’m going to scroll down and it says, it looks like
I can remove this one. And it looks like we do have white in small and medium, but for
some reason these are not being displayed. So let me click to toggle this and let’s see.
Oh. They’re not being displayed because we did not set a price, so we need to set a price
of course. So let me add the forty dollars here for the white in small, and then I need
to do the same thing for the white in medium. So I had forgotten to add the price which
is why it wasn’t being displayed. But I’m kind of glad for the sake of the video that
it did not display because now you can see how you can troubleshoot these different issues.
So now we have the price there and now we have the product excerpt so now I can go ahead
and update this product, and now let’s take a look at it by click on view product. And
now we see we have the title, the price of the product, a description, a short description
at least is here right now, we have the product thumbnail image which when I click on it it
opens up into a really nice lightbox image display, so we can see a larger image of the
product with the title. So that’s pretty cool. And then when we scroll down now when we click
on color options now we can see that white is visible and now white can be selected.
So we have our different colors and we have our different sizes.
So any customer that comes can choose any color or size that they want.
So we see once again this is only in small. And it looks like the medium is not being
displayed because we need to set the price on that as well. But we saw in the previous
example how you can troubleshoot that and how you can fix that. So we see when you click
on navy we see it is available in all the different sizes except for small which once
again, the reason it is not showing up is because the price was not set.
So we go up to product and we set the price then the small will be displaying as well.
I just went over this example so I’m not going to do that again. you can review the previous
step to see how to set the price, and when you set the price then all of the different
version will pop up. Okay so when we scroll down we have the product description, and
when we click on additional information here is the additional info right here. And then
when you want to see reviews we can click on this. So we don’t have any reviews yet
but anyone who comes to this particular product page can submit a review by clicking on this
link. And also we can also see that a new section is popping up which is related products
right here. So let’s continue doing a few more of these and then we’ll move on to the
next part which is shipping. So I’m going to start adding some more products
so we can start filling out the homepage. So going up to the top, actually let’s check
out what the homage looks like, so I’m going to click on home to go to the home page. And
here we see we have our two different images popping up. So I’m going to continue adding
some more products to continue filling out this section. and then once those products
are filled out then we’ll add them to the featured slider right here. So I’m going to
do just a few more of these by going up to +New and clicking on Product. And then as
we did before I’m going to add the product name right here. Now I’m going to add a sweatshirt
and I’m also going to show yo uhow to add a product gallery for a specific product.
So here just looking at our finished site over here right now we see here is what we
are going to create right now. I’m going to create an image as well as a number of images
associated with it as well. So let’s continue on our add new product page. So I’m going
to add this sweatshirt. And I’m going to pop in the text right here, the description. This
is a women’s wide neck sweatshirt so I’ll just highlight that and bold it. I’ll click
on Womens to put it in the womens category, and then I’ll call it, I;ll just add a tag
right there, Love, add the tag. Then I’m just going to scroll down. This is once again a
variable product because we’ll have multiple sizes. We’ll have one color but multiple sizes.
So I’ll click on variable product. Then I want to click on attributes and I’ll click
on add. The name for this particular attribute is size. And I want to add my values in here,
small with a pipe. And then medium, large and extra large. I want to click on visible
on the attribute page to make this visible on the product page. And I also want to use
it for variations. So I want to check these two boxes here. And then I’m going to click
on save attributes to save the attributes. Once the attributes have been saved I want
to click on variations down below, and then I want to click on add variation. And here
ai want to click on the size and I want to add the price along with the size so that
each of these variations are displayed. So I have a small here, I’m gong to make this
sixty dollars. Then I’ll add another variation for the medium size. So I’ll just scroll down
and click on medium. And add another price here for the medium, same price sixty dollars.
Add a variation. This time I’ll add a large, again noting what
the price is. And then finally the extra large, I’ll note
that down below here. So if you want to create different prices for the same product you
can do so in this section. So for the extra large for example, just as a demo I’ll make
this $65, instead of $60 just to show you how you can create different prices for the
same product. So once I have my different variations there
I’m going to scroll up. Let’s see we have our description here but I want to add a short
description. So I just copied this and then I want to scroll down to where it says product
short description. And I’ll just add that right in here, the shorter description. Then
I want to scroll up and I want to add the featured image. So I’m going to click on set
the featured image. This is the thumbnail for the product. And then I want to click
on upload to upload my file. Then I’ll click on select file to select the file. And here
is the image that I want so I’m going to select it. And then I’m going to click on open to
open this. And then once again we want to add a title so I’ll call this the Faith Love
Hope Sweatshirt. And it’s always a good idea to create an alternate text so I’l add that.
Same thing right there in the title and in the alternate text and then you want to click
on set featured image to set the featured image.
So once the featured image is et the next step is we want to add some images in the
product gallery. That will give us this display so for example when I click on this, this
is the finished site right here. We see here is an image and now when I click
there are other different angles of the same image. So that is a really great feature of
this theme that you can have different images for the same product. So let’s go ahead and
continue creating the product gallery so we can create this kind of image gallery for
this particular product. So to do that right here where it say product gallery you wan
tot click on add product gallery images to add the images. And then once again I’m going
to click on upload files. And select files. And I’m going to click on this item, and actually
all three of these items I’m going to click. So I’m just going to highlight all three of
them. And I’m going to click on open. And then they’ll all be added one by one. Then
when you click on each one of them here let’s see here we go I’ll click on that one. And
I can once again put in a title and the alternate text. Then I’m going to give this one a different
title since this one is the back. So I’ll call this the same thing but then I’ll put
back. And I’ll give it an alternate text. And finally for the side angle I’ll do the
same. So I’ll give this one a title as well. And I’m going to specify that this is the
side. With the alternate text and then I’m going to click on add to gallery to add those
three to the gallery. So let’s see it doesn’t look like they’re all displaying here. So
let me click on this one more time. Add product gallery images. So let’s see we
have this one, this one and this one. and then add to gallery. So it looks like we need
to add these one by one so I’m going to click on this one more time. They will display right
here in the product gallery. So you see we have two of the three so far. Then I’m going
to click on this one more time and now we have to grab the back image right here, this
one. So I just selected it, you can see it’s checked. Then I want to click on add to gallery
to add that to the gallery. And you can see I want to drag these into the order in which
I want them to be displayed. So I think I want this one to be the second one. And the
side one will be last. Okay so now that we have all of that set we want to come up here
and click on publish to publish this product. Now the product has been published. We can
view it by clicking on view product. And okay it looks great. Now there are a couple things
to point out here. Number one, we have our title right here of the product. Now also
when we click on this, it opens into a really nice light display box. And here we see there
are the different angles that we can see. So we have this one, the front, the front
again, looks like the back, and the side. So we have the different angles that we can
see of this product. Okay the other thing to point out is that you notice that we had
just created the variations so that the starting price is at $60 so we see now it says from
$60. And here we can choose different size options. So when I choose a small, we see
here it is $60. And same with the medium is $60. But when I choose the extra large this
time it goes up to $65. So that is just an example of how you can create different prices
for the same product. And how you can add a lightbox display with a product, with a
gallery of images for your product. Okay now when we scroll down you see there are few
more related products being populated here showing up. We have out description, and then
when I click on additional information you can see the additional sizes that this product
is offered in. And we have our reviews right here. So that is pretty great. I’m going to
go through this process a few more times so that we can add some more items and then we’ll
move on to the shipping, the shipping settings. So to add a new product once again I’m going
to go to the top hover over +New and click on Product. And I”m going to go a little bit
faster since we’ve done this a few times already. So I’m going to add this Peace II tee-shirt,
I’m going to add in this will be a peace t for men. So I’m going to highlight the title
here and click on bold. Next I want to add a new product category here, so I’m going
to click on add new product category. this time I’ll create a category for guys t-shirts
so I’ll just add Men there and click on add new product category. Then I just want o scroll
down and under product tags, this is a peace shirt so once again I’ll add peace and click
on Add. So we have our title, our description, our category and our tag selected. Next we
need to let’s see here just scroll down. Here where it says product data I’m going to click
on variable product once again. So click on variable product. Then I need to create some
attributes for this product. So I’m going to click on attributes and then I’m going
to click on add to add those attributes. So I want to add some different sizes here so
I click on size for the attribute name. The values will be the different sizes all separated
by this pipe symbol. So small, medium, large. Yeah small medium large that sounds good.
Then I want to add these two, these two checkboxes we want to check because I want these attributes
to be visible on the product page. And I also want them to be used for variations. So I’m
going to click on both of those right here and then I’m going to click on save attributes
to save attributes. And once the attributes are saved the third
step here for setting up the variation is to click on variations, and then we want to
click on this button here to add the variation. Then we want to select the size that we want
to create a variation for. So I’ll click on any size here and select small and then we
need to give this a price. So I’ll make this $40. And then I’ll scroll down and do the
same thing for the medium size and give it a price. And then I’ll do the same thing for
the large size here by once again clicking on large and giving a price and I’ll make
it $40. So we have all of our different variations set up. So then I’m just going to grab the
description as we did before. This is the large description here or the longer description.
I want to add an excerpt or a shorter description down below here where it says product short
descriptions. So I’ll just paste that in and make it a little bit shorter. Then I’m just
going to scroll up here and it looks like the last thing we need to do here is add a
featured image. So I’m just going to click on set the featured image. And here on the
set featured image screen I need to click on upload files to upload my files. So I’m
going to click on upload files and then I’m going to click on select files. And then I
need to find the image which is this one right here. So I’ll just highlight it and click
on open. And now I just need to add the title and the alternate text. So I”m going to keep
it as Peace T-Shirt right here and then for the alternate text I’ll just paste that in.
Then I want to click on set featured image to set the featured image. And once the featured
image is se the last step is to come up to the top and click on publish to publish this
product. Okay so the product was published to view
it we just click on view product to view the product. And here we have our product so we
are good to go. SO from here just keep doing the same steps over and over to add your products
to your product catalog on your website and I’l see you on the other side so we can take
care of the shipping. Woothemes Wootique. So here we are back on the home page and as
we can see we’ve added all the different products we have for our product catalog. We’ve added
all the different products to the e-commerce website. So we’re good to go on that. However
before we jump to shipping we need to take care of a few more things. So first of all
I want to point out when we go to the product page I want to point out the difference between
these two items and call attention to one important thing that needs to be visible on
the product page. So to show you that I’m going to click on this product right here,
this peace t-shirt. And we see here that the product page is set up, we have the title,
the price, the thumbnail which when I click on it it opens up to a nice lightbox display
right there. Then we have the description, we have the size and we have the additional
information we see here by clicking on that and then down below we have the related products.
So it looks good, the only catch that I want to pint out is that here we notice this is
a variable product so it has several different sizes on it, it has a medium size, and a large
size attached to this product, however, we notice there’s no call to actio listed right
here. So it’s really important when you have an e-commerce site to make sure that you have
your add to cart button visible right away. RIght now the only way to get to the add to
cart button is someone would actually have to click on shoos an option, then they would
have to choose the option, and once they chose it then the add to cart button would pop up.
But it’s much better with e-commerce sites to make sure that this is always visible because
it’s importna tot have a call to action to let people know that they can in one click
add the product to the cart. So comparing this example let’s look at the
other one I have set up here. So I’m going to go back to the home page just to show you
the comparison. And here we see we have a second item here, this Keep Calm And Volunteer
t-shirt. So I’m going to click on this one. and here we see right away we have an add
to cart button and the default size is set to small. So we can change the size by clicking
on medium or clicking on large. But at the same time the add to cart button is always
visible. So we need to make sure on every product page
that the add to cart button is always visible right from the get go when we arrive on the
product page. So I’m going to go back to this time right there, to this brown mens’ t-shirt,
I’m gong to click on that. And I want to show you how to make sure the add to cart button
is always being displayed. So let’s go ahead and edit the produce t by going up to the
top and clicking on edit product. And then you want to go down to the product data once
again, here we are on the product data screen. And to makes sure that the add to cart button
is visible we need to click on variations. So I’m going to click on variations right
here. And here you’ll note there’s a setting here that says default selection. Now note
right now it says that there’s no default size. For that reason that’s why we do not
see the add to cart button. So whenever you’re setting up your product info you want to make
sure that you set up a default size or a default variation for whatever your product is and
whatever your variations are. So I’m just going to click on small to make that the default
variation size. And then I’m going to come up to the top here to click on update to update
the settings of the product page. So now let’s take a look at what the product page looks
like. I’m going to click on view product, and here we see the small size is the default
version selected right here. This is the default size that automatically pops up on the product
page. And as a result we now have an add to cart button here on the product page.
So just be sure whenever you’re setting up a new product page that you always set a default
variation if you have a product with many different variations and attributes. When
you do have a default variation set up you will see an add to cart button when you arrive
on the product page. So now that we have an add to cart button
on the product page let’s go to the homepage and take care of the featured product slider.
So when I go to the home page you see that it looks good so far on the recent products
section however we’re missing all of the featured products in the featured products slider here.
So let’s go ahead and set up each of the products so that the products we want to be displayed
in the featured products slider will be displayed right here. So to do that I’m going to go
up to the dashboard, up to the site title. and underneath that I’m going to click on
dashboard. Then once we’re on the dashboard then I’m going to click on products to go
to the products page. Here we see all the different products we’ve added to our e-commerce
website. So to add these to the featured slider we need to do a quick edit here so I’m going
to click on quick edit. And then there’s a check box here that says featured. So I want
to feature this brown men’s peace t-shirt in the featured products slider so I’m going
to click on this righ there and then I’m going to click update. And then I’m going toy add
this Keep Calm and Volunteer one as well, so I’ll do a quick edit. And once again I’m
going to click on featured. And then right on the right hand side I’m going to click
on update. and we want to have eight total items featured in the featured product slider
so I’m just going to add them one by one. So here I’m just going to click on that, click
on featured, click on update. That’s three. We need about five more. So I’ll do this one,
click on quick edit, click on featured, then click update. Let’s see. We’ll add this surf
sweatshirt. So quick update, click on featured and once again click on update. I think that’s
five so far. I’ll click on this one as well I’m going to click on quick edit, click on
this link here that says quick edit, I’m going to check the box that says featured, and then
click on update. And then the Faith Hope Love sweatshirt I’ll add that to my featured slider
as well. So I’ll click on quick edit, I think we’re getting the hang of this. Click on featured,
click on update. And just surf we’ll do that one too, quick edit, click on featured, click
on update. And I think I have one more to go so I think I’ll add the Brazil shirt. Quick
edit, click on featured and then I’ll click on update t update that setting as well.
Now when we go back up to the site by going up to the site title and clicking on visit
site, now we see that all of these are listed in the featured product slider. Now note that
they’re a little bit blurry. So this is not good. We don’t want these items to be blurry
like this. So I don’t know if you can see it but right now I’m looking at these items
here in the slider are sort of blurry, and these are really sharp. So let’s take care
o faking sure that these items are not blurry. So to solve the problem of blurry images showing
up in the featured product slider of Woothemes Wootique, we need to take three steps. The
first step is we need to go to the dashboard here. I’m going to click on dashboard. And
we need to add a plugin called regenerate thumbnails. So I’m going to come down to the
left hand sidebar click on plugins right here, and then I’m going to add a new plugin by
clicking on add new at the top and then I’m going to look for a plugin called regenerate
thumbnails. Then I’m going to click on search to search for this plugin and here we see
it’s the first one that pops up. So uyou can click on details to find out more about this
plugin. And we see here it was last updated 132 days ago, it requires WordPress version
2.8 or higher and it’s compatible up to WordPress version 3.5.1 which is the version of WordPress
that we’re using right now. and it’s been downloaded over 600,000 times. We also see
that it has pretty much a five star rating out of five stars. So this is a really great
plugin. I’m gong to install it by clicking on install now. Okay so the plugin was successfully
installed. So we want to activate the plugin by clicking on activate plugin. Okay so we’ve
taken care of step one which is to activate the regenerate thumbnails plugin. Step two
is we need to go to WooCommerce on the left hand side here so I’m going to hover over
WooCommerce, then I’m going to click on settings. here are the WooCommerce settings screen we
see there are all kinds of different tabs with different configurations available. The
one we want now to solve the problem of blurry images on the homepage featured products slider
is the catalog tab. So we need to click on catalog right here. And here on the catalog
options screen we need to scroll down to the bottom and here where it says product thumbnails
we want to change this from 90 to 550. So you can try different sizes here if you want
to try different width sizes and height sizes. I’ve already tested this and 550 seems to
work pretty good. So I”m going to add 550 to the width and the height and then I’m going
to click on save changes to save the new image option sizes.
Okay so our settings have been saved the next step is we want to go to our media page right
here so I’m going to click on media. We need to go to our media library. And we need to
regenerate all the images of the featured images on the homepage. So I’m going to keep
it simple by regenerating the thumbnails for everything by clicking on this box here. Then
at the top where it says bulk options I’m going to click on bulk actions and then I’m
going to select this option here to regenerate thumbnails. And then I’m going to click on
apply to apply the new thumbnail image sizes. Okay so all the thumbnails of these images
have been regenerated. So now let’s take a look at the homepage and see what they look
like in the featured image slider. Okay much better. So now we see all these images now
look really crystal clear just like they do down below.
So that is how you want to adjust the featured images on the product slider in the event
they turn out blurry when you add them to the slider. So now you know how to change
them and fix them so they’re no longer blurry. So that’s awesome. So the next thing is we
see here at the top we have quite a few different items here in the menu. One of the next things
we want to tdo is we probably want to add an about page about the business as well as
a contact page so anyone can contact you directly through your website.
So let’s add two pages to the website right now – both an about page about the company
and a contact page. So I’m going to go to the top here, in the
top left hand side, I’m going to hover over the site title, and once again I’ll click
on dashboard. and this time I want to create a new page so this time I’m going to click
on pages here in the sidebar to create a new page. And then I’m going to click on either
add new right here to add a new page or you can click on add new right here at the top.
So I’m going to click on add new at the top to add a new page. And then on the add new
page screen I want to give the new page a title. So this is going to be the about page
so I’ll just add about right here. And then I want to add some content here about the
about page. So I’ll just paste in some content I just copied from another location. So here
we have the title and the description. I also want to add an image right next to the text.
So to add an image on the about page I’m going to pale the cursor right where I want it and
then I’m going to click on add media to add an image. Now I’m gong to upload a file by
clicking on upload file. I’m going to select the file. And then I’m going to find the image
that I want. So I”m going to choose this image here and then I’m going to click on
open to open this image. And here we see this is the image that will be displayed right
next to the text on the about page. So you can give it a title if you’d like.
I’ll just call it the name of my website. And then we’ll just scroll down here and this
is where you have a choice about what kind of alignment you want this to be. So I want
this to be left aligned. So I’m going to click on left to align this to the left of the text.
I want to link it to nothing so I’ll just click on none right here where it says link
to I just clicked on none. And then you have a choice of thumbnail sizes, a thumbnail,
a medium size, or a large full size version. So I’ll use the medium size here. So I’ll
click on medium. and the last step is you want to click on insert into page to insert
the image into the page. Okay great. So now that looks good so far
let’s just scroll down a little bit. Okay so it looks pretty good so far. So this will
be a parent page so I’ll just leave the page attributes set as they are. And let’s see.
We have different template choices here so when I click on this default template option
right here, I’m going to click on that. You’ll see you get a drop down box of all the different
templates that are included with the Wootique theme and this theme comes with a lot of different
templates which is awesome. So the default theme includes a sidebar. And this is the
about page so I do not want a sidebar showing up on this page. So I’m going to click on
full-width to make this a full-width page. So I’m going to click on full-width right
there. And then I’m going to click on publish to publish this page. Okay to view the page
I’m going to click on view page to view the page right here at the top. And here we see
that I have my page right here. So I’m missing a call to action so I think what I want to
do here is I want to add a call to action here that says contact me.
So first I’m going to create a contact page and then I’ll come back and I’ll create that
call to action. So let’s create one more page here. I’m going to go to the dashboard, click
on dashboard right here in the top left hand corner. And then I’m going to add a new page.
You can just directly add a new page by hovering over pages and clicking on add new. And now
I’m going to call this contact. This is going to be the contact page so anyone can contact
me directly via the website. So I’m going to leave this blank right here. Actually I’ll
say, I’ll create a short sentence here. Okay for more info please contact us via the form
below. And here on the page attributes section once again I’m going to click on template.
And you see that there’s already a contact form set up which is great.
So I’m just going to click on contact form. And then I’m going to click on publish to
publish this page. Now when we view the page by clicking on view page, we’ll see we have
a really nice contact page form set up. and someone can just add their name, create an
email, and add a message. And then they can click on submit to send you a message directly
via your website. So I’m just going to come up to the top here. Now notice there’s a lot
of menu items going on at the top here. We’re going to take care of this and clean this
up in just a moment. I want to go back to the about page here. I’m going to click on
about. and I want to add a call to action down here that says contact me or contact
us. So to do that I’m going to click on edit page to edit the about page. And then at the
bottom here I just want to place the cursor here where I want to add the call to action.
Now there’s a really cool shortcode for the button provided by this theme. So I’m just
going to place the cursor where I want to the button to be. and I’m going to come up
here where it says Woo, and I’m going to insert a shortcode. And I’m going to click on that.
And you’ll notice there are all these short codes listed right here. So these are not
the short codes that I want. Let’s see I’m looking for a button which is not listed here.
So instead I’m going to create my own button. So there’s another Woo icon here to insert
WooThemes shortcode. So it looks like we have the Wootique, the theme-specific, and then
we have the Woo at large shortcode. So the one we want is insert WooThemes shortcode.
So I’m going to click on this blue icon. And then you see there should be here a button
link. So right here at the top it says button. So I’m going to click on button to create
a shortcode for that. and then you’ll notice you have all these customizations and options
you can fill out to create your button. So the title of the button is going to be Contact
Me. And then I’m going to create a link. Now the link is my contact page. So it’s http://
then the name of the website is my domain name, and then the link is just forward slash,
contact. So if you created a different page title, and if your page title was not simply
contact, then you may have a different link here and you want to add whatever the link
is to your contact page, and you want to add that right here. So okay this looks good so
far. You can add some different colors if you’d like. I think I’ll just choose a blue
color here. So I’m going to drag this bar down.
Let’s see. It’s not working very well. Let’s see if I go like this. Hmm. Okay there we
go. Okay perfect. So I’m going to grab this blue color and then I’ll just copy it to make
it easier. And then I’ll add the border here and I’ll add the same thing and I’ll just
pop this code down there and paste it right there so it matches. And it looks like, okay
I’m good to go on that. So I”m just going to scroll up to the top. And then there’s
a button up here that says insert so I’m just going to click on insert to insert this button
by clicking on insert. Okay so now we see that WordPress, the WooThemes has created
this shortcode, this code here, which adds a really cool button to your homepage. So
I”m just going to save everything by clicking on update. And then let’s look and see what
this now looks like. Okay so the page has been updated. To view the page I’m going to
click on view page. And now we see down below we have this button here that says contact
me, and when I click on it it goes directly to the contact page right here. Okay so notice
that the door was a little bit off on this. So if you want you can match the color to
the sidebar over here. So I’m going to do that now. I’m going to change the color of
this button by going up to the edit page and clicking on edit page here in the toolbar.
And then I’m going to scroll down to where the code is. Now the code is located in two
locations. Right here it says bg_color for background color, and then we also have a
border. So I happen to know what the code is, so I’m going to just paste that in, I
copied it from another location. So I”m just going to paste it in here. And when you paste
it in you want to make sure that you keep the two quotation marks before and after the
code intact. So it should say quotation mark and then you have your code right here. And
I’ll give you this code as well. If you’re using the blue Wootique theme which we are
seeing so far, then this is the color you would need to add in between the two quotations.
So I’ll make a note of this so that you can use this code also. But the main point is
you want to make sure that you use this code in between the two quotation marks right here.
So it’s “#4C677E”. And you want to add it for the border as well. So I’m going to going
to paste the code in between the two quotation marks right here. And then I’m going to click
on update to update this page. Now when I click on view page, now we see that the button
is the same color as the menu bar right here which is great. So now it looks a lot better,
it definitely looks more consistent and it flows a lot better. So that’s how you add
a contact button to your about page. So the next step is you most likely will want to
have a blog on your website. Having a blog is a great way to add fresh content to your
website, it’s a great way to keep in touch with anyone who’s coming to your site because
they can read new updates that you may be posting on your website. And another good
reason to have a blog is because search engines love fresh content. So having a blog is definitely
helpful in terms of helping to rank in search engines like Google and other search engines.
So let’s add a blog to the site. To do that I’m going to go up here to +New in the toolbar
and I’m going to click on page to add a new page. And to add a blog is really simple all
we need to do is create a title with Blog right here. So you want to add Blog right
here. And then right here on the right hand side in the page attributes section under
template you want to click on this and find the template that says blog. So this theme
comes with a blog template which makes it really easy to add a blog, you just have to
click on blog. And then all you have to do, the last step is you just want to click on
publish to publish this page. And now when we go to view the page, now we see here here
is our blog post. So we haven’t’ added any blog posts yet to the site. So this is just
the default post that comes with your WordPress installation but as you start adding blog
posts to your website they’ll start showing up down below on this page. So we see we’re
on the blog page right here. And then when you click on the post, I’m going to click
on it right now. Then you go to the actual single post page. So here you’ll see you have
the title, then you’ll have some data here like when the blog was published, who published
it and what category it’s in, and then you’ll have the actual post. And then you’ll have
an author box description here. And then you can have your comments right below. So this
is what the blog post page will look like for single posts. So when you have posts they
will show up on your blog. So now we se we have all these different menu
items showing up here. Let’s take care of this next. We want to clean this up so that
it’s a lot more simplified up here. So let’s change the menu. So to do that we’re going
to go back to the site title, hover over the site title and then you’ll notice there’s
an item here that says menus. So I’m going to click on menus. And here we are on the
menus screen. So to create a menu, first we need to come up to the top here and we need
to enter a menu name. So I’m just going to call this menu. And then you want to click
on this blue button here that says create menu to create the menu. Once you’ve created
the menu then you’ll notice on the led thane side it says theme locations. And then you’ll
see that it says your theme support s two menus, so select which menu appears in each
location. So we have a primary menu and a top menu.
So I’m just going to use the primary menu right here so I’m just going to click in this
box. I’m going to select the menu I just created, Menu. And then I’m going to click on Save
to save this theme location for the menu. So once we have the menu and the menu location
selected and saved, then we want to figure out which items we want to have displayed
in the menu. So I would like to have, looking at the pages down below, I’m going to click
on View All to view all of my pages. and let’s see, I’d like to have the home page on the
menu, the about page and the blog, and then I’d like to have the shop page as well. So
I’m going to select all of those and then I’m going to click on add to menu to add these
to the menu. Then you can go ahead and you can rearrange how you would like this to be
displayed. So for example, I would like the shop page to show up at the beginning of the
menu, so I’ll just drag it right up there. And then I want to come over to the right
hand side and I want to click on save menu to save the menu. Now we need to add some
different items beneath shop. I’d like to add some different categories to help people
more easily find the products they may be looking for. So if you recall I have some
womens t-shirts, some kids t-shirts and some mens t-shirts. So I want that to show up underneath
the shop page. So we don’t see those now, the product categories, we just see the overall
website categories right here. So what we want to do if you don’t see product categories
on the left hand side, then what you need to do is go up to the top, click on this screen
options button right here, and then you’ll see this will display all the different things
you can add to your menu, and one of those things includes product categories. So I’m
going to click on product categories right here. And then I’m going to click on screen
options again to collapse this section. Then when we scroll down you’ll see that here are
the product categories that we created in one of the previous steps. So I want to include
womens, mens, and kids product categories to my menu. So I’m just going to click on
them to select them, then I’m going to click on add to menu. Now when I scroll up we can
see now these are all added to my menu. So just to display them in a little more organized
way I’m going to drag women’s right underneath Shop. And I’m going to do the same thing for
the kids product category and the mens product category. Okay I think that’s good. So I think
what I’m going to do is I’m going to put the kids first. And then to display this really
nicely I’m just going to drag this over to the right hand side. Just like this. I’m going
to move it over just a little bit. I’m going to drag it to the right hand side. So now
these three categories will fall underneath the Shop category, the Shop page. So we’ll
have the home page as a menu item, the shop page as a parent menu item, and underneath
the shop menu item there will be these three different sub-menu items. So it’s looking
good so far the one page I’m missing is the contact page it looks like. So let’s see,
I’m going to find that and click on contact right here, and click on add to menu, and
now I have my contact page added right there as well. So the menu looks good, this is just
how I’d like it to be. Now I’m going to click on save menu to save my menu. Okay the menu
has been updated. So now let’s go and check out the site. So I’m going to the top left
hand toolbar, hover over the site name, and click on visit site. And now we see that the
menu looks a lot better. So we have the home page in the menu bar, the shop page, and when
I hover over shop we can see here the different product categories. So now it’s a lot easier
for anyone coming to your site to more easily view your products in your product catalog.
So for example I’ll click on kids right now. And now we’ll see here are the three results
for the kids page. I’ll do the same thing for womens. We have a lot more womens items
here, so here are all the womens t-shirts. And finally, when I click on men, here we
have the two mens t-shirts right here. Next we have the about page which we saw earlier
with the contact me button. And then we have our blog and then we have the contact page.
So we’re looking good so far. Next let’s take a look at the sidebar over here and figure
out what content shows up in the sidebar. So to configure the content in the sidebar
we need to go back to the left hand side to the dashboard so I’m going to click on dashboard
right here. And then we want to go down to where it says appearance and we want to click
on appearance. Once we click on appearance you’ll see there’s another item that pops
up called widgets. And we want to click on widgets. So here we are on the widgets screen
and this is all the content that shows up in the sidebar. We can see here on the right
we have our normal full width sidebar, the primary sidebar, and then there’s four different
footer areas where we can add content, custom content in the footer as well. So the main
thing we want to do right now is we want to change the content showing up here in the
primary sidebar. So by default when you install WordPress it will come installed with Recent
Posts, Recent Comments, Archives, Categories, and Meta content. So what I want to do first
is I want to delete all of this to remove it. So I’m just going to click on this carrot
here and click on delete. You can also just take this bar here and drag it over to deactivate
it, and then release. So maybe that’s a faster way. So I’ll just drag it over and release
these to remove them. Okay so now we have an empty sidebar right
here. Now we need to figure out what we want to add. So when you scroll down you’ll see
there are a lot of Woo Widgets that are specific to this theme that you can add. You can check
each one of the out if you’d like. There’s a Woo twitter stream, there’s a subscribe/connect
widget here. You can add your Flickr photos, or perhaps a search bar right here, or tabs
or bestsellers. There’s all kinds of custom widgets and custom content that you can add
to your sidebar. So feel free to check these out. Also note here are all the WooCommerce
widgets. So these are specific to your WooCommerce theme. So the one that I want to find is I
want to find the WooCommerce product search so here we see here’s the WooCommerce product
search. So I want this one this will make it easy for anyone coming to tour site to
easily find your products which is always a good thing. So I’m just going to take this
and I”m going to drag it to the primary widget area. I’m just going to drag it up here and
release it. And here you can see you can add a title here. And I’ll just put search and
then you want to click save. Okay and the next step is I’m going to close it by clicking
on this carrot. Now I want to add more widgets in this area as well so I’m going to scroll
down once again. I want to find the top products widget. So let’s see where that is. Let’s
see we have recent products, top rated products, so this one I want to drag up as well. So
it’s the WooCommerce top rated products. So I’m going to drag it up to the top here. And
once again I’m just going to release it and you can add a title if you’d like. So I’m
going to just call it Top Products, Top Rated Products. And actually I’ll just display three,
so I’ll change the number over there and click on save, and close that once again. And then
the one item that’s on sale I want to call attention to that so let’s find the items
on sale widget. Let’s see. Where is that located. Okay so here it is. The WooCommerce On-Sale
widget, display a list of your on sale products on your site. So I’ll just grab this widget
and drag it up to the top once again. And I’ll release it underneath the top rated products
and I’ll say on sale now. Okay and once again I’ll just display three items here and I’ll
click save. And the last item I would like to display
are my social network icons so anyone coming to the site can easily connect with me on
the social web. So we have not yet added that plugin so I’m going to add it by going to
the left hand side. I’m going to click on plugins here and then at the top I’m going
to click on add new to add a new plugin. So the plugin I really love is the simple social
icons plugin and the main reason I love this plugin is because you can customize the way
the icons look on your site to match the colors of your site with the colors of the icons.
So we’ll see what that looks like in just a moment. So I’m just going to add this simple
social icons here in the search field and I’m going to click on search to search for
this plugin. Here it is at the top you can click on more
details to learn more about this plugin. We can see it was last updated fifteen days ago
and it’s compatible up to WordPress 3.5.1 which is the version of WordPress we’re using
right now. It’s been downloaded over 60,000 times and it has pretty much a five star rating
which is awesome. So I”m going to install this by clicking on install now. Okay so the
plugin was successfully installed. So now I’m going to click on activate plugin to activate
the plugin. Okay so now that the plugin has been activated we want to go back to our widgets
section so I’m going to hover over appearance and click on widgets. And now when I scroll
down we see there’s a simple social icons widget that we can add to our primary sidebar.
So I’m going to drag this widget over to the bottom of the sidebar over here. And here
I”m just going to give it a title, connect on the web. And then you can notice that you
can change the icon size if you’d like. You can also change the radius and the alignment.
I’m going to leave this all, the defaults are always working well for me so I’ll just
leave them as they are. But the one thing I do want to call attention to are the background
color and the background hover color. So as you may recall when we added the contact
button on the contact page we added that code, that color code of the blue that matched the
color on the website. So I want to use the same color here for the color of my social
icons. So I’m just going to paste that. I’ve already copied it so I’m going to paste that
right here. And then I’m going to do the same thing for the background hover color. I’m
just going to paste that code right in here that color code. And then what you want to
do, you want to just come down to any of the different social icons you want to display
on your site and you want to add the URL for your social network in these fields right
here. So the ones I want to add right now let’s see. I’ll add pinterest, I’ll add Twitter,
and I’ll just copy the pinterest one and add the twitter URL, and then I’ll also add a
YouTube one. Okay. So you may want to add some additional social network ones as well.
feel free to to do that and when you’re ready go ahead and click on save to save the settings
of this particular widget. And then I’m going to click on close and then when we go back
to visit the site and check out the sidebar let’s see what that looks like. So i’m going
to click on visit site and then I’m going to click on blog to check out he blog index
page and now we see on the right hand side we have our search bar and our top rated products
and it looks like I spelled that wrong so I have to fix that. Then we have our on sale
now time and then we have our connect on the web social icons so anyone can connect with
you on the social web either via Facebook, Twitter, Youtube or some other social network.
Okay so that looks like we’re good to go except for having to respell this particular item
which I’ll do in a little bit. So here we are on the homepage and we see the website
is looking good so far we see we have pretty much all of the homepage filled out. we still
have a few things to do behind the scenes though to complete the commerce website.
So the first thing we need to do is we need to take a look at shipping. So to do that
let’s go back to the dashboard by hovering over the site title here and clicking on dashboard.
And two things we need to add to the shipping are shipping classes. So let’s take care of
shipping classes by going to products here. So you’re going to click on products or hover
over products here and then you see there’s a drop down menu here and one of the second
to last items is shipping classes. So I”m going to click on chipping classes right here
and then we can create our new shipping class. So as it notes at the top shipping classes
can be used to group products of a similar type and these shipping classes can then be
used by certain shipping methods to provide different rates to different products. So
I want to create two different shipping classes. I want to create a free shipping class and
a standard shipping class. So I’m just going to add free here for the name for the free
shipping class. And then at the bottom here I’m going to click on this button here that’s
says add new shipping class to add the shipping class. And now we see right here we have a
free shipping class. The other one I want to add is a standard shipping class so once
again I’m just going to add that to the name field right here and then click on this button
to add new shipping class. Okay so once the two shipping classes are created we need to
go over to WooCommerce. Im going to hover over WooCommerce and I’m going to click on
settings to go to the WooCommerce settings screen. Here on the WooCommerce settings screen
you see there are a number of different tabs at the top and one of them is shipping. So
I’m going to click on shipping to go to the shipping options. And here on the shipping
options page we can see here are all of the different settings that we configure to set
the page how we would like to to be set. So we notice that by default shipping is enabled
here in WooThemes. And also we have a shipping calculator that is by default enabled.
We’ll come back to that in just a moment. And then you’ll see that currently the shipping
method is currently listed as flat rate. But we see here there’s a purple highlighted check
mark here with status and actually the free shipping is enabled so you have many different
shipping methods here that you can choose from either a flat rate or free shipping or
international delivery local delivery or local pickup.
So in general free shipping is of course the best. That’s one less ting that a customer
has to worry about so it really helps to incentivize them to buy any kind of product you may have
if you offer free shipping. So wherever possible it’s always a good idea to offer free shipping.
In this video I’ll show you how to create shipping with the flat rate and one of the
options will be free shipping. So let me show you how I’m going to do that.
So number one I’m just going to come down here and click on save changes. But actually
before I click on save changes I want to point out this shipping calculator. Because I’m
going to be offering a flat rate shipping charge we don’t really need a shipping calculator.
So I’m going to turn this off since the shipping calculator is used to calculate how much shipping
is so if I offer a flat rate then everyone will now in advance what the shipping is so
I don’t need the shipping calculator. So I’m just going to keep the shipping like that
the default rate is flat rate as we can see here. and then I’m just going to click on
save changes to save the shipping changes. Okay so now that the shipping options settings
have been saved the next step is we need to check out the flat rate settings right here.
Since we will be using a default shipping method of flat rate. So I’m going to click
on flat rate right here this link and here we are on the flat rate shipping options screen.
So the first thing we need to do is enable this by clicking on this here that says enable
this shipping method. And once again you see there are these question marks which when
you hover on top of them you get a really nice tooltip that tells you what this tool
tip does. So we see here the method title which is what the user sees during checkout.
So the title flat rate works for me, everyone understands what that is so it’s really clear
so I’ll leave it like that and scroll down. I’m going to leave all the default settings
here I’m not going to change those since those work for me. But I do want to come down here
to where it says shipping class. So we can see actually let me go back up one second.
I did miss one thing. Okay so cost per order. When we hover over that it says leave a cost
per order, leave blank to disable. Now because I want to use shipping classes I’m actually
going to leave this blank this time. So I’m going to leave the cost per order, I’m going
to leave that blank. So what I want to do I want to come down here and you can see that
we can add a chipping flat rate to the per order – charge shipping for the entire order
as a whole. Or if I click on this there are two other options. You can charge shipping
per item or per class. So I’m just going to leave it like that. So I am going to add some
shipping classes however. So I’m going to click on add cost to add a class. And then
you see that here I have the free shipping class that I created in the previous step.
So for this one I’m going to give this a class of zero. So I’m going to type in zero right
here. And then I’m going to add another cost here and this one will be the standard shipping
class. So when I click on free now I have the standard option right here. So for the
standard option I’m going to give this a cost of five dollars by just putting a 5 in there
and now I’m going to click on save changes. Okay so the settings have been changed. We’re
using a flat rate for the default shipping payment shipping charge. But you do notice
that I have two chipping classes within the flat rate. One is a free shipping class and
the other is a standard shipping class. So let’s see how this plays out. So the next
step is I want to go to one of my products. I’m going to click on products here. And now
I’m going to click on this one. I’m going to click on quick edit to edit this particular
one. And then on the right you see there’s a section here called shipping class and I
can select whether I wan this t-shirt to have free shipping or standard shipping. I’m going
to click on standard and then I’m going to click on update to update the shipping on
this t-shirt. The next thing I’m going to do is we can edit
all of these t-shirts in bulk which is a lot easier to do by clicking on this box here
which checks all of these different t-shirts. You see that there all selected. And then
I’m going to go to the top here where it says bulk actions and I’m going to click on edit.
Then I’m going to click on apply to apply this edit to all of them. Now when I scroll
down you’ll see that here is the shipping class and I can edit all the shipping for
all of the products all at once with just one step. So I’m going to create a shipping
class of standard for all of the t-shirts by clicking on standard, that’s the $5 shipping.
And then I’m going to click on update to update all the products at once. Okay so 13 posts
were updated. So let’s go check out the website and see how this works right now. So I’m going
to click on visit site an then I’m going to click on select options. Actually let me find
one let’s see we’ll do this one here. Keep calm and volunteer, I’ll click on that one.
And here we see we have the small selected, I’m going to add that to the cart. And here
we see I get a message when I click on add to cart which says keep calm and volunteer
was successfully added to your cart. I can click on this button here to view the cart
or I can click on this button here to go to the checkout here. So I’m going to view the
cart by clicking on view cart. And here we seen the price of $40 is located here in the
cart. And when I scull down you’ll see the cart
total is $40 sub-total plus a flat rate shipping charge of $5. So the order total is $45. Now
it’s always fun when you create a video and you find a little issue that pops up which
I’m discovering right now. So we see in addition to the flat rate of $5 we also have a free
shipping option here which a customer could potentially click on and that would recalculate
the order to be only $40 so clearly I dod not want to have two different shipping prices
showing up right here. So let’s take care of adjusting that right now. So we want to
make sure that just one flat rate is displayed right here. We do not want free shipping and
a flat rate to both be displayed. So let’s remove the free shipping feature right here
by going back up to the dashboard so I’m going to click on dashboard here. And then I’m going
to go back to WooComerce Settings Page, so I”m going to hover over WooCommerce and click
on Settings. And here on the WooCommerce Settings page I want to once again click on Shipping.
Now here we are on the WooCommerce Shipping options screen and we can see here that the
default shipping method is flat rate but we have two different shipping methods enabled.
Both the flat rate and the free shipping. So I had forgotten in the previous step to
disable the free shipping that’s why it’s also showing up on the cart page. So let’s
turn off free shipping by going back up to Free Shipping, this link that says free shipping,
and here where it says free shipping I’m going to uncheck this box to disable the free shipping.
So once I’ve unchecked this box I’m going to click on this button save changes to save
my changes. Okay so now that the shipping options have
been changed when I click on Shipping options one more time we’ll see that only one shipping
method is enabled, it’s the flat rate with the two shipping classes. So now let’s go
check out the cart once again. So now I’m going to go visit the site to visit the site,
and now I’m going to click on my item here to check out my shopping cart. And now we
see when I scroll down that it looks a lot better. So we have the cart total with the
$40 for the t-shirt and the shipping charge is a flat rate of $5 so the order total is
$45. So that’s exactly how we want it. So the next thing we need to do is we need to
configure the checkout page so that we have some kind of way to get paid. So let’s do
that now by going back to the dashboard again. And then I’m going to go back to WooCommerce.
I’m going to hover over WooCommerce and click on settings one more time. And over here there’s
a tab called payment gateways. So I’m going to click on payment gateways and here we see
there are a number of payment gateways that you can choose as a way to get paid. So I’m
going to have paypal right now. You can see there are a number of other options, you have
direct bank transfer, check payment, cash on delivery, credit card or paypal. So I’m
just going to use paypal. Also notice once again that everything in purple is actually
enabled. So we need to disable the ones we are not going to use and just make sure the
ones we are using are enabled. So I”m just going to click on paypal and then click on
save changes. And then I need to go to the direct bank transfer and check payment pages
and disable these since they’re currently enabled. So I’m just going to click on this
one here, B-a-c-s, and I’m going to click on this box here to disable it. I just unchecked
the back transfer button. So I just unchecked that. I’m going to scroll down and click on
save changes. And I’m going to do the same thing for check I’m going to click on check.
And I’m going to disable this by unchecking it and then I’m going to click on save changes.
And it looks like cash on delivery is already disabled. And then you have this other form
of payment here that is not enabled. If you’d like to learn more about that go ahead and
click on join for free or learn more about WooCommerce and I may pronounce this wrong,
Mijareh. Anyway you can learn more about this checkout by clicking on this link. I’m using
paypal however so I’m going to click on this link here and I need to set up paypal. Here
we see it is enabled which is awesome and here we see you just need to add whatever
your paypal email is. Now I already have a paypal account but if you don’t have a paypal
account you can just go to paypal and you can sign up for an account.
So once again PayPal is free so you can just come to paypal.com and sign up for either
a personal or a business account. Most likely a business account if you are using your e-commerce
website for business. And you can just check out the different plans they have here. And
you can sign up for paypal. So the good news is that with paypal anyone who wants to buy
something from your site can do so by just signing in to their paypal account, so they
can sign in to paypal. Or if the don’t have a paypal account that’s no problem they can
just pay via credit card if they do not have a paypal account. So we’ll go over that in
just a moment. Let’s go ahead and continue setting up the payment gateway here so I need
to add my paypal email. So I”m just going to enter that right in here, and then I’m
just going to scroll down here and it looks like we’re good to go. And I’m going to leave
all the default settings here so the one I am going to turn off here though is this one
which says enable paypal sandbox. So I’m going to disable that we don’t need that anymore,
that’s used for test payments. Then I’m going to click on this one that says save changes.
Okay so payment gateways have been set up. So let’s just check some other tabs here really
quick. I’m going to click on emails. And here we see emails will be sent from the name of
my site. You can add any name here and then here’s the email address so that looks good.
So I”m going to leave all of this as it is. And then I just want to click on integration
really quick as well. And here we see that here we have Google Analytics. So I recommend
using Google Analytics, and you can also add your ID in here. Now we already talked about
Google Analytics. You can add also add Google Analytics in the Wootique Theme Options settings
but you can also add it here also. So there are a couple different places where you can
add Google Analytics. So there you go. So now let’s go check out the cart to check out
the shopping cart. So I’m going to go back to the site by clicking on visit site. And
here we see I have the item so I’m going to click on the item once again. And here it
says proceed to checkout so I’m going to click on proceed to checkout. So here at the top
there’s a message that says “do you have a coupon? If so click here to enter your coupon.”
So let’s create a coupon really quick and then we’ll come back to the checkout page
to check out. So I want to show you how to add or create a coupon for your site. So to
add a coupon I’m going to go back to the dashboard by clicking on dashboard. And then I’m going
to hover over WooCommerce and you cash see when I hover over WooCommerce there’s a link
here that says coupons. So I’m going to click on coupons and here we are on the add coupons
screen. So I”m going to add a coupon by clicking on this link that says add a coupon. And then
at the top I’m just going to add what the name of the coupon is. So I’ll just call this
summer fun. That will be the name of the coupon. That will be the name of the coupon, summerfun.
So maybe you have a coupon you want to give, some holiday coupon or special occasion or
event. I’m going to call this coupon summerfun. And I’m going to scroll down here and coupon
description you can add a coupon description for your coupon for reference if you’d like.
And then there’s all these different settings that you can add right here. So the discount
type can be a cart discount, a cart % discount, a product discount or a product % discount.
I’ll just leave it as a cart discount. And then the coupon amount I’ll just say this
will be a $5 off coupon. You can also enable free shipping if you’d like for your coupon
or check all these other different limitations or options related to your coupon so you can
read about these and select them if you’d like. I’m going to leave these as is. Then
you can also specify if there’s a minimum amount needed to use the coupon. You can also
specify which products these are for, and there you go. So you can read about all these
different criteria to make the coupon valid. So I’m going to leave it like that and then
I’m going to click publish to publish this coupon. Okay so the coupon was updated so
now let’s go back to the checkout page to apply this coupon. So I’m going to click on
visit site. And now I’m going to go back to the check out page by clicking on checkout.
And here it says “do you have a coupon” enter your code” so I’m going to click this to enter
the code and here the code is summerfun so I’m going to add that in there and I’m going
to click on apply coupon. Okay the coupon was applied successfully. So now when we scroll
down we see the order, the product was $40, the cart sub-total is $40, the shipping was
$5, but I just got a discount of $5 so now the order total is $40. So that’s awesome.
So the next thing is we just need to fill in our billing address so I’ll just do that
now. And once all the billing info is filled out then you can just indicate whether you
want the shipping address to be the same as the billing address. So I’ll just leave it
like that and then the customer can note whether they have any comments about the delivery.
So we’re all set to go now as we note here the last step is as it notes here we’ll be
paying by paypal or through paypal but it does say you can pay with your credit card
if you don’t have a paypal account. So I’m going to click on place order to place the
order. And here we are on the paypal order page where we can see the order summary on
the left hand side and then on the right hand side it says have a paypal account? log in
to your account here. Or, if you don’t have a paypal account you can pay as a guest now
and sign up for paypal later, or you don’t have to sign up for paypal at all. So just
by filling out this info and clicking on continue you can sign up as a guest and pay with credit
card directly without having a paypal account. Okay we’re almost done we have two more things
that I want to do before completing this video. Number one, let’s go over how to add a downloadable
product to your product catalog and then we’ll go about creating a blog post with an image
gallery. SO first I want to create a product that is a downloadable product. So I’m going
to go up to the top where it says +New and click on product. And here I want to add an
e-book so I’ll just call it “E-book: how to create your custom t-shirt” so it will be
an e-book about how to create your own custom t-shirt. And then I’m going to add some info
here as text. Let’s see I’ll just reduce it a little bit. Then you want to come down once
again to product data but this time instead of clicking on simple product or variable
product you actually want to click on this checkbox here that says downloadable. So I’m
actually going to click on that. And here we see we can actually put a price for this
particular unit. So this is a downloadable product so I’m just going to make this free.
So I’m just going to say it will be zero, no price there. Now we need to choose a file
for this particular download. So I’m going to click on choose a file. And then I’m going
to click on upload file to upload the file. And select the file. And here I’m just going
to find the file, so here’s the ebook. I’m going to select it and click on open. And
then here we see it says ebook right here. That’s good. And then I’ll just click on insert
file URL. So now we have the file URL right here so that’s good to go. Now here I need
to click on shipping. So I’m going to click on shipping right here. And now we see here’s
a shipping class and it currently has no shipping class but we want to add a shipping class.
So I’m going to click on that. So we have two different shipping classes. We have the
standard shipping class which we saw previously was the $5 shipping charge. But this is a
downloadable ebook so I just want to give this ebook away for free. So I’m going to
use the shipping class of free for this particular product. So I’m just going to click on free
and then I’m going to add a short description down below here about this product. Then I’m
going to scroll back up right here. Here we see are the product categories. I’m going
to give this a new product category, so this will be called ebook. So I’ll add the ebook
product category and then I’ll click on add a new product category. And then once again
I can give it a tag if I’d like so I’ll just call this ebook and click on add the tag and
finally I need to give this a featured image. So I’m going to click on select featured image
and then once again I’m going to click on upload files and select files and then I’m
going to select my ebook cover right here and click on open. Okay and then for the title
Ill just call this ebook, and then with the caption and then I’ll click on set featured
image. Okay so it’s all good to go, now I’m just going to come up to the top and click
on publish to publish this product. Okay so the product was published let’s go take a
look at it by clicking on view product. And here we see here is the ebook. And it’s free
as it notes here, it’s free. So I can add it to the cart, so when I click on add to
cart, and then I click on view cart, here we see we have the t-shirt we originally selected
and here we have the e-book with $0 for the price and $0 for the subtotal, and once again
we only have the flat rate but that is being applied to the t-shirt. So if I eliminate
this t-shirt from the car by clicking on the x button, then the total will recalculate
and now we see we have a flat rate but it’s free for this particular ebook.
So that is exactly how we wanted it. So the last thing I want to do in this video is I
want to go over how to create a blog post. So I’m going to click on blog right here and
we see we have one default blog post showing up. So I want to add a new blog post so I’m
going to go up to the top, click on +new and then I’m going to add a post by clicking on
post. So the first thing we want to do is give our
new blog post a name so I’m going to give this a new title so I’ll just say New Peace
T-Shirts Have Arrived. Okay so I have my new title right here for this blog post and then
I want to give it some text right here. Then on the right you can categorize it if you’d
like so I’ll just call it Peace T-shirts, that will be the new category. I’ll click
on add new category. And then we just want to scroll down and we want to give this a
featured image. So I’m going to click on set featured image. And I’m going to choose this
image here and click on set featured image to set the featured image. And I also want
to add a small image gallery of the t-shirts that have arrived. So I”m going to put the
cursor right before the text here, and make a return. And I’ll place the cursor where
I want the images to be because I want a set of images to show up with this blog post.
So I set the cursor there and then I click on add media. And here I’m going to click
on create gallery to create a small gallery. Then I’ll just select the different shirts
that I wasn’t to have displayed in this gallery. So I have one, two, okay I have three peace
t-shirts. And then I want to click on this button here that says create a new gallery.
Okay so I have the three items in my gallery. You can also just move them around by dragging
them depending on how you want them to be displayed. So I’ll jus leave it like that
you can see that it’s linking to either a media file or an attachment page. We’re going
to adjust that in just a moment. Now though I’m just going to click on insert gallery
to insert this gallery. Okay so now I’m going to click on publish to publish this gallery
and now let’s take a look to see what it looks like. So I’m going to click on view post.
And here you see we have our images and our text and our author description right here.
So when I click on this image you’ll notice it goes to a separate page with just the image.
So what I would really prefer is to have a lightbox display so that I stay on the blog
post. So to do that I’m going to go back to the blog post. We need to add a plugin to
get the lightbox to display. So the plugin we want is called Jetpack. So
we are going to go back to the dashboard to add this plugin so I”m going to click on dashboard.
And now I’m going to go to the plugins screen by clicking on plugins. And here we see all
of our current plugins. So I need to add a new plugin. So I’m going to click on add new
to add a new plugin and this plugin is called jetpack. It’s a plugin that is developed by
WordPress, and I’m going to click on search plugins to search for this plugin. Here it
si at the top it’s produced by Automattic as I noted. Automattic is the maker of WordPress,
we love Automattic. And now I’m just going to click on install now to install this plugin.
Are you sure you want to install it? Yes I do, okay. And once the plugin is installed
I want to activate the plugin by clicking on activate plugin. Okay your Jetpack is almost
ready a connection to WordPress.com is needed to enable the features. So we need to conned
tot WordPress.com. So I’m going to click on this button that says connect to WordPres.com.
And here it says okay we nee dot connect the website to jetpack to wordpress. So if you
have a wordpress.com account you can just add your username and password here. And if
you do not have a wordpress.com account you can click on this link here that says need
an account? So the good news is that wordpress.com is
free so you can just sign up by filling in an email address, a username and a password
and you can create a blog address if you would like, or probably if you already have a website
you don’t need to create a blog address so you can click on this very very small link
over here which says “if you do not want a blog you can sign up for just a username”.
So for the purpose of the jetpack plugin you really just need a wordpress.com username
so you can simply click on this link here that says sign up for just a username. And
then you can just add your email address, username and password and then you can click
on this link here to sign up. So I already have a wordpress.com account so I’m just going
to add my username and password here and then I’m going to click on this button that says
authorize jetpack to authorize jetpack. Okay so you’re fueled up and ready to go the
features below are now active. So Jetpack provides you with a whole suite of tons of
different features that you can use. So the one we want for the purpose of the image gallery
is called the carousel. So it’s located right here. You can learn more about it by clicking
on learn more and read about it right here. Or you can just click on activate. So I’m
going to click on activate right here. Okay the carousel was activated. Excellent.
So I want to point out two other features, actually one other feature that I really like
in Jetpack and that’s the social sharing features. So it’s located right here. The most super
duper sharing tool on the interwebs. That is awesome. Share content with Facebook, Twitter
and many more. So when you click on concfigre here. Well you can click on learn more as
well to learn more about it. But I just want to configure it, so I”m going to click on
configure. So here you can add all kinds of social network icons that will make it really
easy for anyone who visits your blog post or your pages depending on how you configure
it. It will make it easy to share your content to the social web either to Facebook or LinkedIn,
Twitter or Google+ or any other social network. So to make this work you just need to drag
these icons down to the available area here so I want Facebook, I want Google+, I also
want Twitter. And I’ll take Linkedin as well. And then let’s see I also want these other
ones. So I’m going to add these other ones over here in this section. And this will just
create a more, a more button. So we can see a live preview of what this is going to look
like on your blog post or under your blog post right here. So I want to add pinterest,
we’ll also add Reddit. And we’ll add tumblr. So that is how you can configure it. You can
add the others as well if you’d like. I’m just going o leave it like that. And then
you can see you can choose different buttons styles. I like this pretty symmetrical look
so I’ll leave it like that. the sharing label we’ll say share this. It will open in the
same window. And here, this is important, you need to select where you would like these
button too be displayed. So I want these displayed on posts so I”m going to click on posts there.
and then I’m going to click on save changes to save the changes. Okay so we’ve configured
the sharing settings. Now let’s go back to that post we created and let’s check out the
carousel. So I”m going to click on posts right here and here is the new peace t-shirts
have arrived so I’m going to click on edit to edit this post. And here we see here is
the carousel. So let’s take a look at what these looks like so far. So i’m going to click
on view post. and here it is as it was before. And now note we now have these different social
network sharing icons so you can now share this post with anyone via Facebook, Google+,
Twitter or some other kind of social networks. But I want to click on these links here these
images to see if the lightbox displays. So I’m going to click on this one here. And there
you go, voila! So now we have a really nice image gallery for our images. It looks a lot
better than sending someone to another page. So that is really cool. So that is how you
create an image gallery within WooThemes on your blog post. So there you go that is how
you add all the different features to the Wootique theme and that is how you can configure
your e-commerce theme using Wootique and WooThemes. So thank you so much for watching. I fyou
enjoyed this video please do leave a comment below. Also please do like the video if this
was helpful to you. And I will be coming out with more videos so please do subscribe to
my YouTube channel. And also if you found this video helpful please do share it with
your friends, especially any friends that may need an e-commerce website. Thanks for
watching, I’ll see you in the next video.

99 comments

  1. I have another quick question. On my contact page, it says "your contact email was not set up correctly." How can I set it up correctly? Thanks!

  2. @77webstudio I have two more quick questions. In my Contact page, it says my email was not set up correctly. How do i Set that up correctly. Also, I don't have a home page and i dont know how to make a page to bring me back to the home page (to set up a home page). Could you possibly let me know what i need to do?

  3. Hi Katrinah,
    I really like your Create An E-commerce WordPress Website video.
    I am looking to create an e-commerce enabled app like Uber app. (www.uber.com) & (https://www.taskrabbit.com/dashboard).

    Can you help me with that or guide me to find a step by step video for creating app.
    TaskRabbit is a website I like that have the similar idea to provide different services through their website but I need to build an app like Uber as well that will offer different services.
    Thank your!

  4. Katrinah Does it work in WordPress version 4.1.1 ? I did not find woodojo plugin in wooTheme.com.Reply me ASAP.

  5. hi there, i just wanted to say that this is one of the clearest tutorials to understand, thank you. regards jon

  6. Hi Katrinah. I have a problem. I want the page with "Featured Products" and "Recent Products" to be as my home page. So, I created a page called "Home" and I want to change the permalink to my website's URL. Can you help me?

  7. Thank you for this video! Unfortunately I got stuck after downloading wordpress and login in. I been waiting three days for being able to log in but wordpress still says my password or username are wrong. I tried to delete wordpress and then download it again but it still is not working. Would be grateful for some advice 🙂

  8. Hi, katrinah. It looks like they have retire the plugin woodojo. do you have any other suggestions

  9. Thank you for your video. Everything  goes fine expect header image slider. I have uploader 6 images for slider. But it show into two rows. why?? can u help me please. Thank you in advance.

  10. Hi Katrinah, great video as always. Just a quick silly question, how did you make you t-shirt thumbnails?

  11. Hello Katrinah, First of all your tutorial is great and i have started making a e-commerce website for somebody's business. Thanks for the video.
    I wanted to ask you that how many product categories we can add in shop drop down menu? is there any limit? i have around 88 categories and sub categories in it and it is not letting me add more product categories.
    Desperately looking forward for your answer .

  12. Hi Katrina I want to change currency to pkr and provide Cod plz help I can't remember use PayPal cause I am in Pakistan

  13. Hi Katrinah, greetings from Portugal. I love your videos…it was a great way, for me, as a newbie, in wordpress design and usage, to learn more about wordpress, Woothemes and Woocommerce…of course, adding the extra detail of having a nice young lady like you, to teach us how to use this tools, with lots of patience 🙂
    Thank you for everything (I will continue to search some of your other videos to test).
    I used this, with the latest wordpress and woocommerce versions, and I had to make some changes to the usage, itself… but one thing I couldn't do was to make the Woo Shortcodes appear… I've manage to install the Woocommerce shortcode bar, to get the products in a post, if needed, but when trying to create a button, like the one you've created in your "About" page, eventhough the dropdown list shows, when pressing any option, none of them work… so in order to create the button, I had to use raw html… is there any known bug, and workaround to create buttons, or links, using shortcode or others tools?
    Once again, thank you for your time, and for your sympathy…
    Excuse my poor english.
    Best regards

  14. hello Katrinah.. I am so happy you are here the help me out! My website is so beautiful thanks to you.
    But still I need your help …. I addes a Blog page, but on my website is written:
    Sorry, no posts matched your criteria

    I am very sure I followd every step…

    also if I see on the right site… in the block of Publish .. I see I have 5 Reviews on the Blog site… so why can't I see the text on my website?

    Please help me out… did I missed something… perhaps in the settings ?

    Ellen

  15. This theme has an odd background texture over the background color/image that's annoying and I can't figure out what it is or how to get rid of it. It's a bunch of tiny dots. Similar to a Band-Aid strip. I looked in the Images folder and don't see it so I don't think it's an image I can delete. Any ideas?

  16. Hi katrinah you solve my many problems by this video, for this really thanks. please guide me is it also useful or responsive for mobile phone or tablet?

  17. Hey Katrinah, I want to thank you for your excellent video on how to create an online shop. I followed your format and now I have my own online t-shirt, poster and tote shop. http://www.wildburrocustomtshirts.com . It certainly is alot of work, but it is very gratifying when you see the collection of products. Please let me know what you think?
    take care
    Dwight

  18. Hi Katrinah, Thank you for this great video. I have a problem here. I had downloaded Wootique but what I got is not in zip file format. I can't go ahead to download it to my website because I kept receiving unpacking . The blue wootique icon is still in my desktop. Could you kindly advise what shall i do  please? Thank you so much.

  19. This is an awesome video, but I have one question in my head. Does WooCommerce support my cart, my account, my wish list, and if they do, how are they going to see the website?

  20. Thank you Katrina, you really made a wonderful and understandable tutorial presentation, indeed you did a great job and I appreciate it. thanks once again.

  21. Hello Katrinah, i am about to develop an ecommerce site for and existing website that uses opencart. stumbled on your video and i went through the comment thread.. does this video have an updated version? will the information here still be useful for me? i intend to use wordpress and woocommerce

  22. i have installed wordpress by quick install but when i can click to my admin url/page it does not show the page …PLEASE HELP

  23. hi hatrinah. I noticed that woodojo plugin is no longer available for using on wordpress, do you know any other similar plugins that have the same function? Many thanks

  24. Katrinah, You really save my life, You are so talent to the point during the whole video. I am a web designer (not developer) and always afraid of the code in the back. You saved my life.. I love you !

  25. thank u Katrina for this tutorial ….. I didn't knew about the 'woocommerce' and WordPress before , now I had made a multi vendor website …..

  26. hi katrinah, your videos is very helpful to me and my friends, but please tell me how to make CJ(commission junction) affiliate website by using wordpress

  27. it is very much help full .we all need full social website using buddypress and bbpress.
    including all extention plugin.

  28. I just started my ecommerce website with WordPress and I'm kind of a newbie but with your tutorial it makes it a lot easier to understand thank you

  29. Hi Katrinah,

    I just started learning WordPress and I love your training. What software are you using to film these training videos?

  30. how do you make one flat landing page. We need it for the theme of our site. our visitors commented about crowded counted. email us

  31. Hi,
    I have just started setting up my WordPress website with the Wootique theme, I would like to change the font of text-based site title and tag line but I don't seem to be able to find how to do this, I have found how to change the font of all other text in Typography but not my site title……please help!

  32. I wish I could follow this tutorial but none of the screens you show look anything like what comes up for me. thanks for your time making a great video however

  33. I wish I could follow this tutorial but none of the screens you show look anything like what comes up for me. thanks for your time making a great video however

  34. I enjoyed your tutorial. I also subscribed i plan on watching more of your videos. I am a web developer and i have made many sites but this was my first with woocommerce so well done i enjoyed it. I used your video as a stepping stone for the project i was working on i wanted a full width layout and the wootique doesnt offer that so i used another woo theme and my site is still turning out just as clean and as awesome as the one you made in the video. thanks

  35. Hi Katrinah Brilliant tutorial! Not sure if I missed something but can I use this sell downloadable material like photos? or, could you direct me to a suitable tutorial?
    Many thx!

  36. How come my pictures load sideways then after i edit they are straight
    on my computer and android devices, but are sideways on Apple devices?
    What am I doing wrong?

  37. Product description tag box is large & separate with long description box overlapping & text sitting to the right, outside the box.

  38. Hi Katrinah,

    I'm new to wordpress and have been watching a number of your tutorials. Is there a plug in for commercial sites so the client come into a members area (or not) and select an option to pay a random amount, not an advertised product amount? I have clients that have off price list amounts.

  39. wow your video are truly amazing . Quick question can i add this plug in to an exsiting word press site and make it my store? i don't want a whole new website to sell our apparel

  40. how does this effect safe payements?  I can see how this tutorial covers the actual build but are you relying on paypal security for payment when it goes to there site? in which case how does that work when paid by credit card? I assume you have to buy https services from the host?

  41. hello i want to ask you 1 question is that how to create indian takeaway buying website on word press

  42. Thanks for all your efforts in teaching us. By the way, I'd like to have a business website. I want it for a living. I want it like that "craftsmen, mainly, getting into the site, putting their names, ways of contacting them ….etc and letting customers contacting them to have their services-all through my website only-and I or my website will get a percentage of what they get from these clients" Is that clear, if not please tell me.

  43. ————————————————————————————————————————————————————————————————————
    My Friend has over 4 years of experience in WordPress, and can develop any type of website like E-commerce, blogs, business, entertainment, magazine, real estate etc., check him out! He can customize your wordpress website according to YOUR needs! http://www.konker.io/services/18927?affid=682130
    ————————————————————————————————————————————————————————————————————

  44. Would you happen to know why the product gallery won't display correctly. I'm at 1:23 in the video and my pictures come up big and in a vertical line one after the other.

  45. it doesn't show up like in your page. I used this same tutorial 1 year ago and they showed up perfect. do I need to resize pictures or did wootique update mess it up

  46. Can you help making a website using some HTML template? I have just got a theme for me from Templatemonster and need to customise it. In return, I would like to offer you this promocode which they sent me: m6qvxsbfqyo969av44x94wsr0 I think you will find it helpful to you, guys 😉

  47. wordpress updates change everything. i found the answer. thanks for all the good information in this video. It helps tremendously.

  48. Have a look at https://shopitag.com
    They offer a free platform to sell online through your website, your Facebook page and even Messenger.
    I use it myself and it's very cool ! I sell online at no costs !

  49. Good video!
    After over 20 years of IT experience and over 12 years in web developement industry. I gained experience from all branches of e-commerce websites (full stack developer and server management).
    I learned few things, most antrepreneurs give up after only 6 months after they started online e-commerce website. Patience! Is my advice for all. It is scary when you do not have time to learn how to build and manage a website. I created my own website to offer front end and back end services. There are solutions for entrepreneurs which don't have skills or time to learn how to build e-commerce websites. This is a website service providing for them https://www.my-business-website.com/ , they can hire developer and customize their shopping website however they want.

Leave a Reply

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