How to Make an Ecommerce Website using WordPress & Woocommerce
Articles,  Blog

How to Make an Ecommerce Website using WordPress & Woocommerce


Hello, thanks for watching. It’s Alex
here from WPEagle. In this video, we’re going to be setting up an eCommerce website using
WordPress and the amazing WooCommerce plugin from WooThemes. We’re also going to be using
a premium theme called The Retailer which is really great because it’s responsive. It’s
got widgets and short codes. It’s easy to configure. You’re just going to love it.
I’m going to take you through it step-by-step. We’re going to start by setting up some hosting,
then we’re going to install WordPress along with the theme and some plugins. We’re then
going to add a few products and then configure the shops so that it’s ready to sell and take
money via PayPal. We’re obviously also going to style it and make sure that it all looks
really, really nice. Now, if you have any questions at any time
during the video, just post them in the comments and I’ll be sure to try and get back to you
as quickly as possible. Another note, if you really like my videos and you think they’re
useful, it would be really cool if you could subscribe or at least just click the like
button. It really does help. Okay, so the first step is we need to set
up a hosting. If you already got hosting set up and you’ve got WordPress installed, you
can skip this step and just forward the video a little bit until we get started setting
the eCommerce site. If you haven’t got hosting, then you need to choose from one of these
two links that I’m going to put up on the screen now depending on where you are in the
world. If, like me, you’re in the UK, then you need
to select this video. Pause this video you’re watching and click this video and that will
take you through setting up hosting in the UK with a fantastic company called TSO Host
who I highly recommend. If you’re in the US or somewhere else in the world, then you need
to check out this video where I will take you through setting up hosting and installing
WordPress with a company called HostGator based in America and they will charge you
in dollars. Again, they’re highly recommend. Okay, so select one of these two great videos.
If you’re on a phone and you can’t click on an annotation, then you need to find the link
in the description down below this video. [00:02:00] Yeah, go and do that, set up your
hosting and then we’ll get started setting up the eCommerce site.
Okay, hopefully that all went well for you and you watched one of those videos and you’ve
got your hosting set up and WordPress installed and you’re now ready to configure the rest
of your eCommerce website. Without any more chitchat for me, let’s roll the tape.
The first thing that we need to do is give the blog a name and just go through all the
basic settings. Then what we’ll do is we’ll install the premium theme and all the plugins
that we need to turn this basic WordPress website into a fully functioning eCommerce
site. Let me go back to the dashboard and then I’m
going to go down to the settings down here and go to general. This is where we can give
it a name. I’m just going to call this the WP Eagle Shop Demo. Another WPEagle Demo.
Obviously you start to obviously put your information in whatever your company or website
is called. This is the URL which we’ve already set. You
can change this if you need to any time. Sometimes, you might want to add a WWW if you haven’t
already. This is the email address. I’m just going to enter my email address in there.
Basically, that’s the email that’s used whenever there’s a notification from the website.
Obviously, just check that your time and everything is all okay. Mine should be on London. It
works better, I find, if you do set the town or city that’s nearest to you, so London and
save changes. That’s done. The next thing I want to do is just set the
permalinks. This is basically the structure of the website. The way that the addresses
of the web pages are displayed. I just want to double check that it’s /category/postname
which it is. If yours isn’t, just make sure that is ticked and then click save changes.
Okay. Now, we’re going to go on [00:04:00] and install the premium theme. I’m going to
go over to ThemeForest. I’ll put a link up on the screen now for you. The theme we want
is The Retailer. You can even follow my link which would I’d be most grateful as I will
receive a very small amount of commission if you are so kind to click on that and purchase.
Just the way of showing some thanks for my videos.
Yeah, I’m going to bring out The Retailer which is this one here. It’s $55. It’s a really,
really cool theme. Yeah, that’s the one that we’re going to be using. I’ve already purchased
it, so I can just click download. That’s going to download in a second or two.
Okay, I’m just going to put that in my downloads folder, then I know where it is. That’s going
to download. That’s done. I’m just going to have a look at this. This is a folder that
you get when you download. Is it file even? Is it folder? Is it file? I’m just going to
open that up or expand it. You’d use … In Windows I’m not quite sure how you do that.
I think you just double click on it or whatever or right click and click unzip.
On the Mac, you right click and open it with the archive utility and then you get this
folder here called The Retailer. Then within here are the theme files that we’re actually
going to upload. Once you’ve expanded that zip that we downloaded, we can now go back
into WordPress which I’ve got still open in this tab here.
Then I’m going to go to themes and then add new. Then up the top here, there’s this big
button that says, “Upload theme.” Then, I’m going to click browsing, go into the folder
that I just expanded and into the theme [00:06:00] files. There’s two in here and I’m going to
upload both of them. Let’s start with The Retailer.
I’ll explain why we do that. The retailer is the main kind of theme with all the bits
and bobs in there. Then the child theme is the one that we’re actually going to run.
In the future, if you need to ever make any changes to the actual code of the theme, you
can use that rather than changing the main package. That basically means that whenever
you do get an update of the theme, it doesn’t overwrite any of your changes.
If you didn’t understand any of that, then don’t worry about it, but as I said, It’s
just good practice to use the child theme whenever there is one included. That’s done.
I’m going to go back to themes now and upload that child theme. Add new again, upload, pick
that child and click install. Then I’m going to click activate on that one.
Once you’re done, you get some messages that you need some plugins and some other bits
and bobs, so let’s go to this link here. This says, “Begin installing plugins.” I’m going
to just take all of them and go under the bulk actions toggle, click install and then
click apply. That’s going to hopefully go away and find all the plugins that we need
and install all for us. This is going to take a minute or two and they’re all installed.
Great. Let’s go back to the required plugins installer
by following this link. Now all we need to do is activate them, so I’m just going to
tick all of them and I’m just going to go to the toggle and select activate. And they’re
all done. Now if we go back to [00:08:00] the front
of our website, which I’ve got up here. I’m just going to close this tab I really don’t
need that one anymore. Go to visit site. It’s got the theme for us, we don’t need that anymore.
It’s starting to look a little bit different. There’s still quite a few settings that we
need to do, but you can see that it’s starting to change. Let’s go back to the dashboard.
There’s a few more other setup things we need to do.
The first thing is we need to install the WooCommerce package. This is automatically
create things like the checkout, the cart, all those kinds of things. Just click the
button. The next step is we’re going to start putting
the product categories together, adding some products, and setting attributes. All those
kind of things. The site that I’m going to do in terms of the type of products that I’m
going to add on this demo site is I’m going to work with some t-shirts. These t-shirts
are going to come in a few different colors and in a range of different sizes.
Depending on what you’re selling is going to depend on what attributes you need, whether
you need them at all. If you’re selling very standard products that don’t have variations
you’re probably not going to need them. If you’re selling anything like clothing or anything
that comes in different sizes or colors then this bit is going to be quite useful for you.
All the shop kind of stuff and product stuff is logically under products. The first thing
I’m going to do is add some of these attributes. The two main ones that I’m going to be using
today are size and color. The click ad attribute. It’s added it. Then we need to add some terms.
I’m just going to click on this little cog and I’m going to add a new size which will
be small, medium, and large. [00:10:00] Let’s go back to attributes again. I’m going
to add color. I’m going to spell it the UK way. Then I’m going to add a couple of colors.
Black and blue. Let’s go for red as well. Once they’re done we can then use them when
we’re adding some product. The next thing I want to do is add some categories.
Everyone is probably going to need these. A category is useful when you want to create
your menu. Just a way of logically organizing all your products. Let’s go to categories.
I got two types of t-shirts that I’m selling at the moment. I got film t-shirts, I’m just
going to add film. You can add descriptions if you want. We might come back to that later
because they can be displayed on the site. The next one is TV. Okay, they’re done.
What we’re going to do next is add some products. I always like to start by adding a few products.
That way when we’re trying out different layouts and things we can see what we’ve got. It’s
quite difficult to do that when you haven’t got any content on the site.
It’s also a good opportunity for me to take you through how to add a product because you’re
going to be doing quite a lot of that obviously adding all your inventory and stock.
As I already mentioned, I’m going to be just using some t-shirts for this particular demo
site. The thing with t-shirts is they come in different sizes and different colors. I’m
going to need to set up some product variation. I’m going to take you through doing that as
well. If you’re just selling very simple things
that don’t have any variations, then you’re just going to go for the simple product which
is quite straightforward and you just enter the price and stock. That’s about it.
If you are selling things that have different configurations, sizes, colors, shapes, whatever,
then you are going to need to do the variations. These variations are going to be [00:12:00]
done on the attributes we set up earlier, size and color. Let’s get started.
I’m going to go to new product. I’ve got all my notes in this little text file here. You’ll
have all your product information at hand hopefully and images and all that kind of
stuff. The first one I got is a Doctor Who t-shirt.
I’m just going to call this Doctor Who T-Shirt. The first box is where you put the bulk of
the description, the main kind of details. This is going to appear towards the bottom
of the product page. I’m just going to copy and paste all this stuff here. There we go.
The next bit is where we’re going to enter all the product data, so because it’s t-shirt
I’m going to need some variations. It’s going to be a variable product. Here you can enter
the numbers if there’s any old SKU if you got it. Inventory is where you can set up
stocks. I’m going to tick that to enable stocks and I’m just going to say I got 10 of these.
You can allow back orders and that kind of thing.
Shipping has not been set up yet on the site, so there’s no classes or anything. Obviously
if you’ve got a weight and dimensions you can enter that information here. Link products
are for doing upsells and cross-sells. Once you’ve added a few products you can then come
back and link them together. Say you’ve got an accessory or something like
that on your product and you want to promote that alongside the product, you can use the
upsells and cross-sells. I think I’ve got it where upsells will also appear on the page
of the product and the cross-sells appear in the cart when you’re checking out.
Attributes is where we’re going to add our attributes. I’m going to come over here to
custom product attribute. I’m going to add the size to start with, click add. You can
just start typing and it will all just drop down or you put select all if it’s going to
have all the values. This one comes in large, medium, and small [00:14:00].
If you tick this box here it makes the options appear under additional information on the
products so you can see what’s available. I’m going to tick this box as it’s used for
variations because I want people to be able to select this as an option when they add
it to the basket so that we know which size t-shirt to send out when we get an order.
I’m going to add another one. I’m going to add another custom product attribute. I’m
going to add the color. I’m going to select all. It comes in black, blue, and red. I’m
going to tick that box and that box, then I’m going to click save attributes. They’re
done. The next section is variations which is where
we’re going to basically set up all the options that you can pick. If you just do the attributes
they’ll just appear on the page without people being to select them. If you go to variations,
this is where you set up the bit for selecting. You can add things like … Say someone picks
a small and that’s cheaper, you can have a price difference or different shipping rate.
All that kind of stuff. If you’re going to use all the variations, for example, a black
small, a black medium, a black large, then obviously a blue small.
You’re going to need to link all the variations. I’m going to click this button. I’m going
to link them all together. There’s nine in total, obviously because there’s three sizes
and three colors. Here we can start adding different things for the different variations.
Here I got large black and the next one is medium black. For example, if they had a different
SKU for your picking and packing you can enter those things here. If you got different stock
quantities of these different sizes you would enter them all here.
Here you enter your prices, sales prices. Again, if they’re different. If they’re all
the same, which in this case they are going to be, you can come up here and go for the
bulk edit. Here you can select all the different options and do them all in one go [00:16:00].
I’m going to check for the price and click go. The price is 14.99. It’s put it all on
all the variations on the regular price. We could do sale price as well. Prices, sale
prices, click go. Sale prices are 12.99. That’s populated that. That’s all the variations
done. Check if they’re all there. They’re all done.
The next option is the advanced. Let’s just have a look in here. You can add a note for
when people are purchasing. When they place the order you can have a note. For example,
we are preparing your order or this is a custom. It’s generally something specific to the product.
If it’s got some special note that you need to say then that’s where you enter it. That’s
it. If we scroll down a bit further to the bottom
of the page, the last box we need to complete is this product short description. This is
just a small bit of text that appears up at the top of the product page near the price.
I’m going to go back to my description. I’m just going to put these bullet points in like
that. Let’s just check these options down the right hand side. We need to add a category.
Doctor Who is TV. You can add some tags if you want. If could be BBC, Doctor Who, sci-fi.
It’s entirely up to you. You don’t have to use tags if you don’t want to. Again, it just
a way that you can put things in nice categories so people can find stuff easily. Allegedly
is may help a little for SEO, but that’s not proven.
The last two things are the images. If you got a whole load of images, you would add
them to the product gallery. The product image is the main image that’s going to be used.
I’ve only got one image, so I’m just going to set that. I’m going to upload from my computer,
Doctor Who [00:18:00]. Click set product image. There we go. Then if I click publish we’ve
got our first product. That’s done. If we click here we go have a look.
There it is. There’s my Doctor Who t-shirt. As you can see here the options. We can have
large black, then we can add to cart. The next thing I’m going to do is add some more
products. I’m not going to bore you with that, so I will fast forward time. I will see you
in a sec and we’ll get on setting up the rest of the site.
I’ve added some products. As you can see we’ve got six products now added to the shop. I’ve
added a few different variations and prices. One’s out of stock. Now we’ve got some things
to play with. I’m now looking at a page that’s created by WooCommerce when you install it
which is /shop, which we’ll come back to shortly and play around with. I’ll show you different
layouts that you can have. For now what we’ll do is we’ll start with
getting the rest of the site in order. For example, I need to add a logo. I need to set
up the navigation. Just kind of create the structure of the site and then it should all
start to hopefully come together. To start with we’ll do the logo and go from there.
I’m going to go back into the dashboard. Hopefully by now you’ve added some products too. Then
I’m going to go into appearance and theme options. Here’s some options. You can change
these as you want. I’m going to leave them pretty much as default for now. You can come
in here and have a play whenever you’d like. To upload your logo, you go to styling. The
first option is upload your logo. The second option one is to upload your retina logo.
Basically if you’ve got a logo [00:20:00] that’s twice the resolution, you can upload
it there. I’m just going to upload the one here, just the WPEagle logo for now. That’s
done. Just click save. If we go back to the website, let’s have a look at that. There
we go. The logo’s done. Let’s go back to those styling options just
for a second, so back to the dashboard, then appearance, then theme options. We’ll set
the theme color. This is basically for the buttons and all that kind of stuff. I’m going
to add a color that I’ve got which is the orange with the eagle’s feet. There we go.
I’m going to leave the primary font color as black and leave all the rest for now. Because
we’re using a wide layout, we don’t need to mess with the background options. That’s done.
Let’s go back and have a look at that now. Now we got this orange on buttons and things.
We need to start putting things together. We need to start setting up the home page
and these widgetized areas and the navigation. To do that, let’s go back into the back end
and let’s just start creating some pages that we’re going to need. I’m going to go to pages,
all pages. We’ve got some basic pages, just the default ones that come when you install
WordPress and when you install WooCommerce. We’ve got an about page, shop page, and then
my account, checkout, and cart. We’re going to need a few more.
I’m just going to create them as blank pages for now and then we’ll go back and edit them.
The first one is going to be the home page, I’m just going to call it home. Then click
publish. Obviously you create whatever pages you’re going to need. I’m just going to do
the basics. Contact us. We’ve already got an about. [00:22:00] I’m going to have a shipping
page with all the shipping information. I’m just adding pages by using the add new button
at the top. I’m going to have a returns page. I think that will do for now.
The next thing I want to set up is the navigation. To do that, I’m going to go to appearance
and then menus. I think there’s a couple of different areas to put menus, obviously the
first one is the main menu, so I’m just going to call it main menu and click create. This
is where you get where the menus go. This is the primary menu. I’m just going to tick
primary. Then I’m going to add some pages to it. I’m going to add the home page. I’m
going to add the shop. I’m going to add the about and the contact us. Then you can just
drag and drop to rearrange them. Let’s have the contact us at the end.
Let’s save that menu. If we go back to the front of the website, we can see where that’s
appeared. Now we have our menu here. You can click through, go to the shop, and about.
There’s the default blurb. There’s nothing on the contact us for now. I’m going to go
back and set up some more because we can have another menu here and there’s also a sub-menu
we can have along the bottom. I’ve gone back to the dashboard, then into
the menus. What I’m going to do actually is I’m going to add a couple of the other pages
to that menu because there’s [00:24:00] plenty of room. We’ve got the returns and the shipping,
I’m going to add those. Save that menu. I’m going to create a new menu for the top. Create
new menu, I’m going to call it top menu, then click create.
For the top I’m just going to have my account and maybe the contact us again. Add to menu.
Tick this box here which is the top header menu. Switch those around. Save. Again, I’m
going to take you to the front so we can see where that is. That’s along the top here.
For the secondary menu which is going to sit below here, I’m just going to add a few categories
at the moment. I’ve only got film and TV, so I’ll add those for now.
Again, back into appearance and menus. Then I’m going to click create a new menu. This
one is going to be called sub-menu. Create menu. Here I need to go down to categories.
These categories are for the blog, but what we need is the product categories which aren’t
actually showing here. To make them show, we need to go to the top here and click screen
options, then click product categories. We’re going to add film and TV. Then I’m going
to click secondary menu and save. Let’s have a look if that’s worked. There we go, there’s
our film and TV. Obviously we need to add a few more I think so it looks a bit better.
What I’m going to do is add a couple more categories and [00:26:00] I’ll be back with
you in a sec. I’ve added some more categories and I’ve added
the word tees to fill it out more so it’s looking a bit better. That’s the navigation
all done. The next thing we should do is have a look at this home page because at the moment
it’s just showing the latest blog posts kind of default WordPress thing. We need to add
a slider and we need to maybe add some products and whatever else we want to the home page
to make it look good. The first thing I’m going to do for the home
page is set a page as the home page rather than just showing these posts. To do that,
we go to the dashboard and then down at the bottom in settings and reading. We select
a static page and then the home page that created earlier. That’s done. If we go back
to the site, the home page is now just a blank page, so we can start adding some things to
it. The first thing I want to add is the slider,
which is powered by the Revolution Slider plugin. We’re going to go back in to the back
end. I’ve got a couple of images that I’ve purchased from PhotoDune which I’m going to
use. I’ll put a link up on the screen down if you want to go check it out. It’s great
for stock photos and all that kind of stuff, where these images are from. Let’s get them
on. We’re on to Revolution Slider. We’re going to click create new slider. You
can have as many sliders as you want and insert them on as many pages as you want. For example,
you could have a slide on top of your shop page if you wanted. I’m doing one for the
home page for now. I’m going to call it home page. It’s going to be gallery, so basically
it just uses images that I upload. I’m going to leave it as auto-responsive and then click
force full width [00:28:00]. Over at this side, I think the only one I
want to change is appearance. I just want to get rid of this shadow, so no shadow. Then
I’m going to click create slider. It’s been created. Now we need to add a slide or two.
I’m going to click edit slides, then new slide. Here’s one image I just uploaded a second
ago. I got it from PhotoDune for the movie t-shirts. There it is. I’m going to click
edit slide to add some text. Here you can give it a name, I’m going to
call it movie tees. You can set a date if you want. Here you can set the transitions.
I will keep it random for now. You can enable a link, I’m going to click enable. It’s going
to be regular. I’m going to link through to the movie tees. I need to go get the URL.
To get the URL, I’m going to open the site in another tab. Just copy and paste it from
there. Movie tees, copy link address. I’ll just call it film tees, keep it consistent.
Then I’m going to paste that link in there. The rest I don’t need to worry about for now.
Here’s our slide. This area in the middle is where we can overlay some text and some
messages and they will always display because no matter what size the screen, they will
always be fine. Let’s click add layer. Here you can enter
some text [00:30:00]. I’m going to call it film t-shirts. Then you can select a style.
Large black one there. Large white. There’s a load of different ones. That’s not too bad,
I think we need it a bit bigger than that. There we go, let’s add just one more layer.
View the range, make that a bit smaller. As you can see, you can just drag and drop these
elements wherever you want. It’s a really good slider, really easy to use. Let’s just
go for that and click update slide. I’m going to add one more for the TV t-shirts.
Let’s call this one TV. Choose the image. You are going to need to crop the images.
I recommend that when you get a photo from PhotoDune or somewhere like that that you
crop it so it’s not too high. I’ve cropped these so that they are 500 high and probably
as wide as you can because some people have some very wide screens.
Obviously try to make sure that the bulk of the image is within this grid area [00:32:00],
which is 960 wide at the moment, but you can adjust that if you want. Let’s have a layer
for this one. Let’s find another layout. That looks quite nice. TV t-shirts from all your
favorite. Let’s go with that. We’ve got two slides, so now we just need
to add our slider to the home page. I’ve got the website open here. I can now click edit
to edit the home page. Once you’re on the edit page screen, if you click on the backend
editor that fires up the visual composer, which makes it quite easy to start adding
things to the pages rather than having to type in any code or anything like that.
I’m going to click add element. Then Revolution Slider. Then the only one we can pick is obviously
the home page because that’s the one we just created and click save. That should be done.
Just click update over here. There is one other thing we need to set just before we
check the page and that is the template, and because it’s the home page we need 100% width.
Then click update. Then if we have a look at the home page, hopefully the slider will
be there in all its glory. There it is. The next thing I’m going to do is I’m going
to add a banner below the slider and then I’m going to add a latest products below that.
Let’s go back in and click edit page. The first thing is the banner. I’m going to click
add element [00:34:00]. Then I’m going to look for banner. The title is going to be
free shipping on all orders over �75. For the subtitle, let’s have next working day,
royal mail service. Then we can add some colors. I’m going to
use a color that I’ve got over here, which is one of my WPEagle colors again. Let’s have
the background as a brown. Obviously you put whatever brand of colors you have at hand
or you can use that color switcher there. Order today. Let’s change the bullet to the
orange. E7F19. Let’s save that. One other thing we need to just check is the width.
I’ve just clicked on that little pencil over there for the row options, I’m going to set
that to boxed otherwise it will be right across the screen like the slider. Then I’m going
to click update. Let’s have a look at that. There we go. It’s quite a high box. I think
what we’re going to need to do is add a little bit of margin at the top because it’s touching
on the slider [00:36:00] and reduce the height a bit. Let’s go back in again. To adjust the
height, what I’m going to do is just go back into banner and go to this pencil. Scroll
down to height. I’m going to adjust this to 90. Leave everything else as it is.
While we’re here, we might as well add the next section. What I’m going to do is I’m
going to add another row. It adds this other grey area. Then I’m going to click this plus
to add the element. What I want to show here are the recent products. I’ve gone to products
and there’s loads of different product type things you can add. I’m going to add recent
products. It goes into the options. I think the only one thing I need to change is … No,
that’s all fine. Let’s save that. Then I’m going to go over
here to the row and I’m just going to make sure it’s not set for width, it’s set to boxed
so that it looks better on the page. We’ll have a look at what that looks like. Update.
Then view page. Here we go. That looks very nice. The height of the slider is much better
at 90. Here’s our recent products, which is a nice little slide-y thing here. The home
page is really coming together now. I think that will be okay for now.
What we’ll go on to work on now are things like this footer area. We’ll do that next
and just finish off these pages, then we’re nearly ready to check all the shop settings
and everything like that. Hope you’re keeping up okay. Obviously it’s quite a long slog,
but we are making good progress. Let’s move on to the widgets and the footer.
To set up some widgets, we obviously need to go back into dashboard. I’m going to do
that now. What I’m going to do is [00:38:00] I’m going to set the top footer, which is
called the light footer as a three column and then the dark footer which is the very
bottom footer as a four column. In order to do that, I’m going to go into the theme options
to start with and then footer. Here’s the light footer and there’s the options. I’m
going to set it to a three column. I’m going to leave the colors the same for now. Dark
footer is fine, I’m going to leave that as four column.
Again, I’m going to leave the colors alone. As you can see, it’s pretty easy to change
the colors, change things like that. Change your credit card logos or put some other logo
there. Here’s some copyright text. I’m going to change that to my name. Then save those
changes. Now we simply drop some widgets into those areas. To access your widgets, again
under appearance, and then widgets. Then over here we got the light footer and
the dark footer. With WordPress, if you’re not familiar with it, you just simply drag
the element from over here and drag it to where you want it over here. For the light
footer, which is the top footer, I’m just going to show off some products. What we need
first is the top-rated products. I’m just going to drag that up to light footer. I’m
going to put it down to three, click save. The next thing I want is the products. Going
to drag that one up there. I’m going to call it on sale. Click save.
For the third one, let’s see what we’ve got left [00:40:00]. I know there’s another one
I want to use. I’ve done the top-rated. Oh the featured products, of course. We’ve got
top-rated, now we need featured products. That’s in WooCommerce products again. Then
I’m just going to set that to three products again. Again, you can have it as whatever
you want, just makes it longer on the page. Just change that to featured products and
I’m going to put show featured products. For featured products, you can just basically
tick what products you want featured, so we’re going to do that now to make sure that we’ve
got some. They’re all saved, that should be done.
To set a couple of featured products, go back to your products and from here it’s very simple.
You can just click the little star. It’s just being a bit slow. There we go, it’s on that
one. We got Twin Peaks. We’re going to have the Delorean for all the Back to the Future
fans out there, including myself. One of the best films ever I think. Let’s go back and
see what that looks like. The footer appears on every page, not just the home page. There
it is on the home page. We need another on sale t-shirt don’t we to even that up. I’ll
do that in a second. On any of these pages, you’ll see the footer.
There we go. Let’s find a t-shirt and put it on sale which isn’t included on there already.
Could be tricky. Let’s go for the Godzilla. I just like things all even. There has to
be three products in each column, otherwise it just doesn’t look right to me. I’m going
to head back into the variations just to keep you familiar with this.
I’m going to choose a field to bulk edit so I affect all of the different [00:42:00] variations.
I’m going to click sale price. I’m going to add the value of 7.99, click okay, update
that. That’s now on sale. If we go back to the home page, there we go. Let’s go and do
this dark footer. What I’m going to put in the dark footer is just some kind of link.
I’m going to start with the company address, then I’m going to put links to the important
pages. Then I’m going to add any recent blog posts I think and some social media buttons,
I think that will look nice. With widgets, you can add whatever you fancy,
so let’s go back into the dashboard. Go to appearance and widgets. This is the dark footer
we’re going to add. The first thing I’m just going to add some text, which is where you’d
probably add your company name, whatever, but I’m just going to call it the WPEagle
Shop Demo Site. This is a demo site which I created during my video tutorial on how
to create an eCommerce website. Then you can have your address. Let’s click save and see
what that looks like. It’s all in a big block. In order to change
that, let’s go back to widgets. Sometimes when I’m working with widgets I just like
to open the [00:44:00] site in another tab instead of going back and forth all the time.
If I tick this box here it will automatically add paragraphs, that should format it nicely.
I’m going to open it in a new tab just to stop going backwards and forwards too much.
Let’s see what that looks like. Okay, there we go. We do need a bit of a space I think
between the address and little bit of text. To do that, you sometimes have to add a break
tag like that. Sometimes you have to add two, let’s start with one. That’s just the sharp
brackets or trial brackets slash BR, just to add an extra bit of space. There we go.
That’s one column done, let’s do the next one.
The next one I’m going to create a little menu and add that. Let’s go create a menu
first. Back into menus. Then create a new menu. Let’s call it footer menu. I’m not going
to add it to any location because we’re going to use it in a widget. Then we can start adding
some pages. I’m going to add the returns, shipping, contact us, and my account, all
the useful kinds of pages. Maybe the about us. Add all those. Anything else that we might
have missed? That should be enough for now. Save that menu.
Then we’re going to go back into widgets. What we need is the custom menu widget, drop
that there. The order that these are in, obviously you can just drag and drop them where you
want them is the order. The one on top is the first column, the next one is the second
column, and so on. Let’s call this information. I’m going to select my footer menu [00:46:00].
Save that. Let’s go back, refresh, and have a look. There we go. Obviously you can add
as many links as you want there. The next one let’s add the recent blog posts
which there isn’t any yet. Probably the Hello World which is the default one. We’ll just
see what we’ve got. That’s just another widget over here which is called The Retailer recent
posts. We’ll call it From the Blog. I’m going to set it to three, but again, you can adjust
it depending on how high your footer is. Let’s have a look. I don’t have three posts I don’t
think, so there’s only going to be one. There we go.
We can add another quick post so you can see that it will appear. This is another blog
posts. If you’re not familiar with WordPress, you can just start adding posts. They’re very
easy to format. Just type your blurb in there. You can add a picture down here. Use different
categories. Let’s put this one in the t-shirts category. Then publish. This theme supports
a lot of different posts, so you can add a video, audio, a gallery of photos. Whatever
you like really, it’s really flexible. If you go to view posts, we can see that post.
There we go. Obviously not very exciting because there’s not much on it, but if I had a picture
that would be at the top and so forth. People can leave a comment. The usual WordPress things.
If you scroll down, you can see it’s now appeared in the footer here with the date and everything
like that. It’s starting to come together really nicely. The last bit I think we’ll
just add our social media links. Back in widgets. I’m just going to close that.
We’ve got two Retailer social media things [00:48:00]. You got this one and that one.
I’m not quite sure what the difference is. Let’s try this one. That says, “Get Connected.”
Let’s see what that looks like. That’s going to add icons and links through to Facebook
and Twitter and all those things. Seems to got stuck, let me refresh again. My broadband
is a bit slow this morning. There we go. You set those options. The color is not matching
my other color. Let’s have a look at what the other one is shall we.
That was the Social Media Profiles, this one is the Retailer Connect. This one you can
add your URLs here, so you know, Facebook.com/WPEagle and so forth. I haven’t got time to do all
of them, but I’m going to type something in so that the buttons appear. These are not
the right ones so don’t follow them. YouTube, I do know that one. Let’s just see the difference.
You can decide which one you want to use. I’m not quite sure why the theme includes
two to be fair. I prefer those ones because they match my
colors and things. Let’s remove that other one. To remove a widget, you just click delete.
Did you notice that because we now got five, it’s created another set of columns, so you
can really add as many widgets as you want, but I think four is probably plenty. I’ve
deleted that. Then if we go back and refresh. The last thing we need to change is that title,
it’s not the Retailer Connect [00:50:00], it’s Connect With Us or something, whatever
you’d like. There we go. We’re starting to get what looks
like could be a proper website now aren’t we. We’ve just got our final touches now to
be fair. I’m going to go back through the shop page. Maybe play around with a couple
of layouts. Then we’re going to go through the WooCommerce settings to make sure that
we configure things like the payment gateways and any shipping and that kind of stuff. Maybe
go and grab yourself another drink, another cup of coffee or something, and let’s do the
final section. What we’re going to do now is have a quick
look at these static pages. The two that I’m going to look at with you are the about and
the contact us. I think once you’ve done those, you’ll be able to go on and have a play with
the visual editor and create some really cool pages for other things on your shop. Let’s
go with the about first. I’m just going to click on about.
When you’re logged into WordPress, you can edit anything just using this bar across the
top. I’m going to click edit page, this is just the one that comes with WordPress. I’ve
got that message because I was messing around with it offline a few minutes ago, so you
probably won’t have that so ignore that. It comes with a bit of blurb. I’m going to take
that out and start with a blank canvas. I’m going to delete that and click backend editor
to get into the visual composer. You can add all sorts of things. It’s the
way we built up the home page. I can add an element, for example, we can start with something
nice like a title. Here we can put a title. Meet the Team, something like that. We love
t-shirts [00:52:00]. You can different colors. We could have a nice blue and a green, that’s
probably going to be hideous. With separator and center align it. Let’s have a look at
what that looks like. I’m going to open it in a new tab again so it’s easy to go back
and forth. “We are love t-shirts.” My English is one
of the best things I think that I do. Let’s edit that, that looks a bit rubbish. The colors
are hideous aren’t they. Let’s go back to something a bit less garish like that and
make sure we get the English a little bit better. We love t-shirts, perfect. Passionate
about cool stuff, excellent. I’m going to change the template again to 100% width because
that will get rid of that top title. Let’s see what that looks like. That’s just loading.
Let’s refresh again. We need to add a few more different elements.
Another cool one is the Team Members. Excuse that very noisy car that just went past. I’m
looking for it now, it’s called Team Members, over here. Here you can add images and blurbs
[00:54:00] about people on your team. Let’s upload an image. I’m just going to find one
on my computer. Hopefully I got one somewhere. Here’s some I prepared earlier. Then you can
just add a little bit of blurb. You can add their roll and a name. There’s one.
What I want to do with these, I want to actually add them into different columns, so I’m going
to add a new row. Then we’re going to click custom layout here. I’m going to pick three
columns. I’m just going to move that into first column. Then I’m going to add another
one, another team member. Again add an image. Click set image down here. General Dogs Body.
Then I’m going to add a third one, just keep it all nice and even. Find an image. [00:56:00]
Cook. I make great food for all the team. Let’s have a look at what that looks like.
I’m going to update the page. Go back over here and refresh the page. It’s not looking
too bad, but again it’s gone wide because I forgot to set it to not to be wide, so I’m
going to go back in here and click this little pencil for the settings of the row and I’m
going to set that to boxed. Click save and then update. Let’s go back and see what that
looks like. Not bad, apart from that green which is pretty
horrendous. That’s the about us done. Let’s go on and have a look at our contact page.
I’m just going to go back to the site on this particular tab. I’m going to go across to
the contact us. Here I’m just simply going to add a form so that people can get in touch.
Again, it’s only a page you can add whatever you like. Let’s click edit.
Now this theme comes with Contact Form 7, which is a good free plugin for forms. Let’s
just add that, so I’m going to click add element and I’m going to click Contact Form 7. It
comes with one setting by default, but we’ll go and change that in a second. Then click
save. I’m going to make this a boxed layout again. Going to change this to 100% width.
Click update. [00:58:00] There’s our form. In fact, on this
page I’m not going to set it at 100% width because I want the contact us titles. Let’s
go back. I’m just going to leave this at the default template and I’ll show you what that
looks like, which is perfectly fine to use as well, it’s just not suitable for the home
page. There we go. It’s got a contact us form. There are other elements that you might want
to add. For example, we could add a little map at the bottom. I shall add it in its own
row. Then you’ve got a Google map. You can add
a color. Let’s just leave it at the default, let’s see what happens. You obviously need
to add your latitude and longitude, which you can find using a tool, just search Google
for latitude and longitude using Google Maps. That’s the wrong page, let’s have a look at
the contact us. There’s our form, there’s our map. Then you can click get directions
as well. The final things we’re going to do is I’m
just going to check this contact form and then we’re going to go through the WooCommerce
settings. Let’s go back to the dashboard. Then let’s go to contact, contact forms. This
is the form we’re using on the contact us form. If you click edit, you can see all the
settings. It’s got a name, email, subject, and message. You can add more by using this
generate tag feature over here. Here you can set where the email goes, so it’s all fine
for me I’m happy with all that. Generally the default will be okay, but if you need
to add any other fields or change the email address, it’s in there.
The final thing, let’s go through the WooCommerce settings just to [01:00:00] make sure that
that’s all correct for you. You basically just need to go through all of these options.
Where you’re selling to, whether you sell it to all countries or specific countries.
Set your currency. You should leave the stars alone, generally they’re set by the theme.
The next one is the products page. Generally these are all set okay when you install, but
you may need to adjust some of these. Here you set your tax, so if you need to enable
tax, VAT, things like that. Then you can calculate it based on the shipping address, so if it’s
international you don’t need to charge tax you can do that as well.
The checkout is where you’re going to set your payment options. For example, if we’re
going to use PayPal, we would click PayPal here. You enable PayPal, you enter your email
address for your PayPal here. Generally these two are the same, I’m just going to put them
the same. That should be enough to get PayPal up running if you just got a PayPal standard
account. The next one is shipping. You can have free shipping at the moment or you can
have a flat rate, so let’s select flat rate and go to settings. Enable shipping method,
flat rate. Cost per order, 1.99. Let’s go back to free shipping. You can make
this so it’s just on a certain order amount. I’m just going to put mine at 50, I can’t
remember [01:02:00] what I said it was going to be, but whatever, it fits too. There we
go. Then that’s all done. Let’s just go through and just see what happens when we go through
the checkout. Let’s just go back through the front of the website.
Now when I add a product to the cart, choose my size, choose my color, add to cart. I can
view the cart. Then proceed to checkout. It’s allowed free shipping, but I don’t think it
should. Let me just see. It shouldn’t let that go through, but let’s just see if it
will and then we’ll go back and change the setting. Just fill all this stuff in. Place
order. It looks like it’s going to accept the order
which is not quite right. I did a direct bank transfer because it’s a good way of testing
it and it would be a bit of a pain to try and pay myself to my own PayPal account. That’s
good for testing. Let’s go see why that free shipping wasn’t working. I’m going to go back
to the dashboard. I love it when things go bad, especially when you’re making a video.
I’ll keep this bit in so that we can find out what’s going on [01:04:00]. I’m going
to go back to shipping. Free shipping settings. There we go, I should have set this. You could
be with a coupon or it can be a minimum order amount, so that’s why. I didn’t select that
drop down. Now when we go back and try to order something that’s not 50 … Choose an
option, choose my color, and add to cart. Let’s check out and see what happens. Now
the shipping is the flat rate because I haven’t spent enough in my cart.
That’s all done. The final thing I just want to quickly show you is the shop page, which
at the moment is still the default page. What you can do is add some filtering options down
the side here. Let’s go to the dashboard and theme options. Under shop we select here and
you get the shop sidebar. Then if we go to widgets, we can add product listing, that’s
where we can add the stuff. For example, you can add things like the price
filter, which allows people to filter by price. You can add a search. You can add [01:06:00]
a layered nav so people can filter by size. Let’s see what that looks like if we go back
to the shop page. There we go. We’ve got nice filters there so you can say you just want
the medium or just the large. You can have multiple filters, just the large and the medium.
There we go. That kind of concludes this tutorial. I think
we got a site, it’s all done. I hope that you made it this far with me too. I know that
looking at the analytics of my previous video, not everyone makes it this far, so well done
if you did make it this far. If you got stuck on any point then please just drop me a question
in the comments, that will be really useful for everyone else that’s also making a website
using this video. I’d just love to hear from you anyway if you want to reach out to me
on Twitter or Facebook or any of those things, then you’ll find all my stuff on WPEagle.com.
If you like these videos, please like them on YouTube and subscribe. It’s really helpful
to me in terms of getting exposure and getting more people to watch my stuff, so that’d be
helpful to me. On that note, I’m going to stop rambling on and wish you good luck and
I will see you soon.

37 Comments

  • John Brennan

    Hi,  this is been a great help for me as i have always wanted to learn how to build a website.  i'm having a problem tho.  On the about page i insert a title block.  but it wont allow me to change the colours of title or sub.  Any idea how i can fix this ??  thanks  and keep up the great work.

  • John Brennan

    hi again.  loving your work. was wondering if you can take a look at something for me.  I created a site following your tutorial which was great.  I went away for 3 weeks came back now my products are not showing when clicked. im getting 404 error page does not exist. but it ways published on all my products.  my site is www.lol616.co.uk   any helpmon this will help me out massively as I build this for a group im in.

  • Wh0DatHaxkor

    Thanks for this video. Really helpful!
    I will start my journey on making my site very soon.
    If I get stuck I will send you a message 🙂

  • Wave Ocean

    Alex, Thank you for producing this excellent video. I knew absolutely nothing about setting up a website. I found your video really useful as it provided a comprehensive step by step guide from start to the end i.e. getting hosting, registering domain, setting up home page, shop pages, categories, cart, check out, shipping, background etc etc including all the technical stuff which was made really easy. You also kindly responded to many emails where I needed support specific to my website which is now ready: http://www.qualityink.co.uk   Once again thank you for your videos and the support offered. I highly recommend these to anyone who is looking to set up word press website.

  • Rajib Kumar Paul

    Hey, retailer is pretty awesome theme and it is 100% responsiv. I used this theme on my online store site. I like your customization. I will appy your tricks in my site.

  • CHOO-CHOO collector of weird

    A QUESTION, WHAT DO YOU THINK OF…URSTONED.COM- WEARESTONED.COM …MESTONED.COM….STONEDBUNNY.COM….             MYSTONEDLIFE.COM……CANNABISMEDS4ALL.COM…?WHICH IS THE BEST?

  • Lu

    Many many thanks Alex for your swift reply with such rich content, CSS coding etc. and I must say that without your tutorials I wouldn't have even dreamed of arriving at where I have with an eCommerce site, big time! Anyway just to let you know that I really appreciate your invaluable assistance both on and beyond YT, amazing job really, down to earth, simple and funny with a wee coffee break now and again 🙂

  • Chris R

    Is it possible to create the website on word press before you get a hosting company and then change it later on?

  • WP Eagle

    +chris r – You can create a site on your local computer using something like MAMP. However I find it easier to create you site on the hosting and then make it live rather than moving it etc.. Hope that helps..

  • Jones Jonass

    great tutorial, thanks alot, but i have just one quetion, can we edit product settings so the options match the product? for example i'd like if i choose a yellow shirt in options that the image change for a yellow shirt too. hopfully you will understand my bad english

  • Rajesh Jangid

    hi chris i created slider with help of yours video, when i created 1st tym with 2 slides it executed properly and later when I add 2 more slides after its not working properly why so???? plz help me with this asap.

  • maheswar degani

    Hello Alex.
    your video is very useful..
    But I want my cart to be seen only registered users ..
    how to restrict visitors to be checkout?

  • Paul Tyler

    Alex I cannot thank you enough. I had no idea how easy it could be to set up a shop. I've been struggling with html, css and mysql with no luck. Then I found your video, articulate, accurate and easy to follow. My provider has wordpress and I had no idea these things could be done, even a bloody slider. No struggling with jscript. You star. I know I'm from the dark ages, I'm 65 next month and looking for a little extra income and your video has shown me how and easily too. thank you and I've subscribed. 🙂

  • rdw3ut

    I have a blog with five different pages. I want to know how to allow visitors to my blog to have access to one page only. Next I want a lead capture page to pop-up when the visitors tries to go to the other pages on my blog. Once after visitors fill out the lead capture page will they have access to my entire blog. How do I go about doing this?

  • Nasirul Islam

    i have bought the retailer theme. but for some reason i cant edit the theme. e.g change name, colour etc

  • Nasirul Islam

    i fixed my last problem thanks. can you make an update version of this video because the system has updated and its hard to follow your video now.

  • Melanie Briggs

    Does anyone know how to enlarge the logo in the Retailer theme? This is my first eCommerce site and I'm not tech savvy with this stuff. Thanks for the tutorials!

  • BighypeBeats

    after adding products i want to view product it shows a 404 error and doesn't open the page. What can i do about that?
    Great video though

  • Joni Lackey

    Hey Alex, I've written you an email on your website and am so desperate for your help. Please Ives followed everything you said to do to Andy now amazon has cancelled my associate she account because it is running so slow. I've called hostgator multiple times and they are no help and justice want to sell me further services. Itoday they are telling me I need to make my site look nothing like how you designed your beautiful sites. I am in tears so upset. Please can you help. I beg you And will pay you. Please. Please contact me at the following email [email protected]

  • Shaun Palmer

    I've got a video for your in mind
    Is there a possibility you can cover php/CSS styling of woocommerce pages carts and process, It's a little more tricky then I was expecting , The defaults are as ugly as a troll under a bridge …
    Don't just suggested plugin please there are plenty of videos on the Internet for that

  • The Fairy Tale Family

    Can you use a free theme with WordPress to do this, too? Or does it have to be a paid/premium theme for Woo Commerce?

Leave a Reply

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