Hi there, my name is Ferdy Kopershoek for
a wordpressking.com and in this video I will show you how you can create a web shop with
WordPress using the plugin 'WooCommerce'. I’ll show you how to create a web shop with
a sub-menu, what categories, I go to the shop, I’m going to show you how to create five
different products, simple products, a variable product with more sizes more colors, a service
product you don't buy anything but you buy a service you can add it to the cart. You can even make it sale. A downloadable products like an e-book or
a song and then affiliate product. I will be showing you how to create categories
and subcategories, how to get a sidebar in shop with a price filter or you can filter
what you want to pay based on that. It will be shown what you can buy with a cart
over here, if you buy something and what we add it into your cart. If you don't have anything, this will not
be visible and overview with product categories I will show you how you can rate products
and you can see reviews. How to add shipping cost based on the weight,
the total amount and the location of the buyer, how to pay with PayPal or credit cart and
how to add coupon codes. If you like what you are going to learn in
this video please like the video and if you want more videos like this and learn new things,
please subscribe. So let's get started. If you want to know how to make a website
like this, you can follow my other tutorial, I show you step-by-step how to make WordPress
website exactly like this from the beginning till the end. So you can follow that, if you don't want
to do it then just follow me along in this video. Last thing I need to say before we begin,
I use the fall theme, it's a premium theme which you can download at wordpressking.com
at themes but you also can get along very well if you have another thing. So what we will do, we go to the back end
of our website, WP admin and we have to log in and we need to scroll down to plugins,
add new, we are going to search for 'WooCommerce', press ENTER and it's the one that is downloaded
the most, over 1 million times so install it now. It's unpacking, it's installing and it's successfully
installed. Let's activate the plugin, thank you for choosing
'WooCommerce' and I say let's go, let's configure some settings. Here's the page setup, 'WooCommerce' needs
to make a few pages, the shop page, the cart page the checkout page and my account page. We want to do it right now so we click on
continue, after that they will ask us where the store is located, it's in the united states
in California, you can change the units for the weights Kilogram, Grams and leave it at
this one and also the product dimensions can be centimeters, millimeters, meters or just
inches. I leave it like this, continue, this step
I will skip so I skip this step over here I will come to this later. The payments are also skip for now and then
we are ready. If you want to help 'WooCommerce' who is giving
us this awesome plugin for free, then we can allow them to see some information on our
websites which can help them to make it even better plugin. We can create our first product but first
I go back to the desperate over here, return to the WordPress, there's board and I scroll
down, I go to the WooCommerce settings, we see a few things we just did, the currencies,
you can change the separators by '.' or ',', number of the smalls too that's all. Ok so if you want to change settings from
here you can do it over here but for now I leave it as it is, let's set our shop into
our menu. So I scroll down, go to appearance, menu,
I’m sorry, even pronouncing it wrong and I have to go to shop, at to menu and I can
drag it over here. After the block I can change title into a
'Shop' or 'store', you can call it however you want it to be called. I save it, I go in a new tab to my website
and here it is the shop. We see nothing, no products were found so
let's make our first product, we can do it over here 'new product' or if I close this
one I go to the WooCommerce below to this products at a product. I’m going to show you I can make five different
kind of products. I will start with a really simple product
which is a 'sweater', only one size, one color so I call this one WordPress King sweater. I scroll down, leave this empty for now and
go to the product data. You can choose here what kind of product you
want, a simple product, a group product, external affiliate product or a variable product. You can also make it a virtual or downloadable. 'SKU', this is the stock keeping unit, you
can give it a number or whatever you want, for now I call is 0 0 0 0 1. The regular price will be 29.95, if we want
to we can make it sell but for now I won't do that. What I will do now I will save this product,
I will publish it and now we can view our product, overview the new tab and this is
our product. FerdyKopershoekmedia.com/product/wordpresskingsweater,
here we should have picture, here's a title, here's the price, in here you can select how
many you want to add to the cart. If you do that, you can view the carts, here
it is the carts page. You can change some things, proceed to check
out, here you have to fill in your billing details, total, the payment option and proceed
to PayPal. That's how it works but I close this one and
continue to work on the product. We are going to add a picture, we can do it
over here, product image, set product image, I go to upload files, select the file, I go
to my desktop to web shop, sweater and here it is this is a Sweater. I’m going to use a WordPress King sweater. I open this one and what I want to do, for
the search engine optimization I am going to remove, the dash is over here at the title,
copy the title and paste it in the all text and that is good photo search engine optimization. Set product image and when we update it and
we take a look, it's looking like this. You can click on it and it's looking quite
nice. Press this one or press 'Esc'. Let's continue over here, there are two place
where you can put some information about the product, over here, below or we scroll down
over here, that side. I updated, refresh the page, over here at
site and product description below. It depends on the product but I almost never
use this one so I go back to the back end and I delete this text and here I can type
some text about my product. You can say whatever you want about your product
and if you save it and you will see it over here. So what I will do I will make a category,
the categories, merchandise, add it and below there's new one, it's called sweaters and
to parent this merchandise, merchandise and below that comes sweaters. So you can also have merchandise t-shirts,
merchandise shoes whatever you want. I will scroll down, I go to inventory and
here we can manage the stock. I have 10 sweaters over here and then I save
it, it will be shown 10 in stock. When people buy a few and added two carts
then the stock roll decreased to 7 and so forth. It's a really simple product, there are no
sizes, no colors so what I will say in the title is 'Size L', it's the only size. We have the only color we have. In the next product we will add multiple choices
like the size and the color but for now it's only a simple product and it's looking quite
nice already. The title, the price, some text, how much
you want, add it to cart, we have 10 in stock, this is the SKU number, categories, merchandise
and sweaters. This is image but what I want to do when people
hover over the image, I wanted to show the back of the sweater so I go to the back end,
scroll down and it says over here, I don't know if every theme has this but I can select
'Yes, So first gallery image on hover'. I scroll down and go to the product gallery
and add two more images, upload files, select them and I want to select the back and the
side. I open it, what I will do again for google,
select it, scroll down, copy and paste, copy and paste, hold shift and select them both
or command or control and I add them to the gallery and the first one is the back. So if I hover over the image, the back should
be visible, I updated and here it will not hover but if I go to the shop and I hover,
you will see the back. You can click and go to the picture, you can
select this picture and go to the right with your arrows or clicking here, so that's a
way to add multiple images. This was our first product, let's create our
second product. I update it once again and I say new, product
and this time we are going to sell t-shirt in different sizes and different colors so
I call this one WordPress king t-shirt. The SKU will be 0 0 0 0 2 and the regular
price is 14.95 but this time I sell with four 11.95. I make a new category over here at new product
Category, I call this t-shirts parent category, merchandise and edit over here. I also select merchandise because it's a parent
of the t-shirt category, it's not a simple product, it's a variable product and if I
click here see what happens, there comes a new tab over here. Let's go to attributes over here and we can
add an attribute, I add one and I call the attribute size and here we have to enter some
values so I start with small, pipe, medium pipe, large and extra-large. Four sizes visible on the product page and
used for variations is important to select those both and safety attributes. I will add another attribute add and this
one I call color and the colors will be black pipe or white, also this one so save the attributes. Now we have to go to variations and if we
do some math, there are four sizes and two colors. What kind of mixtures are their? Small black, medium black, large black and
extra-large black and the same goes for white. So there are eight options in total so if
you go to variations and select 'create variations' from all attributes we just made, 'go ', 'Are
you sure you want to link all variations, maximum of 50', we have only eight so I press
Ok eight variations edit, ok and now we can expand them all, click over here and don't
be frightened just get used to it. It looks like a lot of information and it
is but it's quite simple. What we need to do we can give them their
own 'SKU 00003' and call this '1'. I copy this, do the same here two, three,
four, five, six, seven and eight. Why do we do that? If you get an order with 'SKU 0000 38' they
know, ok it's extra-large white and then you can go to your storage place and grab the
right t-shirts. If SKU's are the same and it will get messy
in the stock overview so every variation needs his own SKU. Ok let's add an image, it's a black t-shirt
small, click here, upload files. In my case I go to t-shirts, I have four over
here, the back of the black, the front of the black, the back of the white and the front
of the White, I select them all, open them. I do the same again over here
and I select the black one in the front, here it is. Scroll down and here is white so we have to
select the front of the White, here we have black again, black, scroll down, a white,
a white, black, white, black and the latest one I guess white. I save the changes and if I screw up, the
fault form values are a large black t-shirt. I go to add variation, go to set regular prices,
go and enter 14.95, ok, yes and now we see 14.95 everywhere. Do a different one at the variation, set sales
price, go and that one is 11.95, ok. Let's save it or publish it and view the product
and the default one is large black, we decided that and if I say large white, it becomes
white. You can click here, it looks amazing. Unfortunately those t-shirts are not existing. What we see here, it's a sale, it was 14.95
and now it's 11.95 but what we can do, maybe want the extra-large t-shirts to be more expensive
so then I go back to back end, variations exponent, I scroll down to the XL extra-large
and I change the price to 12.95 and also the black version of extra-large 12.95. I updated it, I refresh the page and now it
says between 11.95 and 12.95. I choose medium, black and is 11.95 but if
I say extra-large it's 12.95 so you can change every variation individually. I change it back
to 11, same goes for the white one. So this is how variations work, you can add
even more attributes but it's all up to you. The last thing I will do, it is now 10 in
stock. I go to the back end to inventory and I don't
manage the stock over here but I will manage the stock individually. I go to variations at a variation and say
toggle managed stock. Now every variation will have their own stock,
maybe a five t-shirts of every variation so go to variation at one and say stock of everything,
press go, will be 5 small t-shirts in black, five small t-shirts in white and so forth. Expand it, you see stock quantity of everything
is five, update it, refresh the product page and now it says five in stock. If I buy five large black t-shirts, it will
be out of stock but if I go to black t-shirts or go to medium it will still have five. Here you can see some related products. We have to do one more thing, go back, scroll
down, go to product, hover and say yes, go to the gallery and at the shirt from the back
and after that these too. Update, refresh the page
and here you see the other t-shirts. Ok go to the shop, we have two products, front
and the back, front and the back. This one has a sell, this one says add to
cart or show details, this one says select options because it has multiple options. Ok let's add our third product and the third
product will be a service. Maybe you want to sell something which is
not tangible, you can go to product and make it a skype call. Maybe you have some really valuable information
and people are willing to call with you for money so you say skype call of one hour, scroll
down, it's a simple product but it's a virtual product 00003. The regular price of course is 129.95 to talk
an hour with a person but for now its 79.95 and I only wanted to be for this month so
the 2nd of February till 29 February, after that the sale will be gone automatically. It's a service so I add it to services, services,
edit and what I want to do, if I say this or publish it and I take a look
then I can call ten times with person but I don't want it, I want it to be maximum one
so I go to the back end, scroll down and go to inventory and say sold individually. I select that one, I check it, update it and
now it's just says add to cart like this. Let's add a picture, scroll down, product
image, upload, select the file, I go back to web shop, services and here it is, please
not left but that's me. All those products are non-existence by the
way. Update, refresh and there you have it the
skype call of one hour for only 79.95. Let's go to the fourth products, a new product. This is a downloadable product so I also made
a fake eBook, it’s called eBook 'How to make a website'. I will add a new category its called eBooks,
add a new product category. Now what I forgotten the latest products is
to have a description so I will make one now, I scroll down, Ok that was it. Its 0 0 0 0 5, the regular price is 19.95. It's a virtual product and it's downloadable. I have to add the file, the file name is eBook
'How to make a website in WordPress' and the URL I can choose a URL or I can choose a file,
I will upload file, select file, go to the shop, downloadable products and this is the
e-book, open it, change this, insert and it's not in word press it's just like this. I can add another file maybe a song, you can
also sell songs. Maybe you're a guitar player with a beautiful
voice and like to sell your own music and can do it all so you can upload an mp3 whatever
you want. Download limits, no limits if they buy it
thinking they can come back the rest of their lives to download it and the download type,
it’s a standard product in my case. Let's add a product image, upload a file and
here again it's me on the cover I don't know why, I was just having fun with myself and
here it is, my book that does not exist. Open and I guess I still can paste it, yes. Set product image, eBooks, publish, view product
and this is it. Also here I want people to have the option
to buy only one, one is enough to make a beautiful website. Sold individually, update and refresh, yes
ok let's go on. The latest one and this one is the one you
have been looking for I guess, the affiliate products. What is an affiliate product? Affiliate product is a product that someone
else has made and if people buy the product or that service through you, through your
affiliate link, they will get a commission so let's make it. Add a new one, a product and it's called in
stock builder for words press. I scroll down and it's an external affiliate
product, I do not own this, I call this 00006 and here's the product URL and here you have
to fill in your link. I have it over here, fill your product, here
is my link, I copied this one and it's true click bank and this is my code so if someone
goes through the website like this, click bank sees, it comes to my account here 'Ferdy
Korp' and if somebody buys this and I get a commission. So here's my link, I replaced it, the button
text is 'more information' and then we see what is the price, let me say 77. Ok let's add an image, upload it and here
it is, set the product image and you can put some information here, that is very easy and
get this thing. I have to say I never used it, I wants you
to searching for infinite links so I don't know anything about this theme thing. Okay so add new product gallery, I call this
one themes or WordPress themes, I publish it, I view the product, InstaBuilder 2.0 , InstaBuilder
for WordPress $77.-. I want more information and I go to the website,
if someone buys it and I got the Commission and there are websites that have more than
2,000 products and they don't own one of them, it's all affiliate marketing. Update, I did already I guess. So now if we go to our website, go to shop. What I like about this theme is that you see
this everywhere and is how it looks like. What I like about this is that the image is
kind of cropped, you see this image is wider, you only see a square, same goes for this
one and for this one and this one, only this one is not. So if you add images, of course you can buy
plugins or a free plug-ins to make it a square but I rather would do something like this. Go to file, save it, open it in Photoshop,
go to, oh I’m sorry its Dutch, canvas and make it as high as it is in the white. Ok save it as a PNG, InstaBulider for WordPress
and then I go back, I say edit product, scroll down, remove product image, at a product image,
select InstaBuilder, copy this text of the title, delete it permanently, upload it again,
go to the desktop. In my case 436 pipe 436, open it, add a title
and all text, set product image, update it. If you go to the shop now, you see it's looking
better already. Not in all cases it's mandatory but what we
will do, we go to the back end, we're going to add a plug-in here and because everything
has different way of displaying photos, we have to regenerate all the photos in our website. Add new, we're going to do it with the plugin,
'Regenerate thumbnails', install now. Also more than 1 million users activate the
plug-in and this will increase the image size and go to tools, regenerate thumbnails, you
can read how it works exactly. We also can go to the media settings tools,
thumbnail size I wanted to be bigger 500x500 and 1,200x1,200. I want to increase the quality and I don't
like this but that's not for now. Save Changes and now regenerate all thumbnails,
it can take a while. Ok it's done, it took I think five minutes. What you can do is not mandatory but you can
go to WooCommerce, settings, you go to product and a tap display over here and then go to
the second option 'shop page display'. Right now we see the products that you can
also select a categories and subcategories. I save it and if I go to the web shop, here
we go to a shop and now we don't see products but we see categories, the eBooks category,
one item, merchandise two items. If I click here, you see the sweater and the
t-shirt because they're both beneath merchandise in the categories. So I want to give these categories an image. I go to the back end, I scroll down to products
and go to categories, I close this step and what I’m going to do, I’m going to open
all in a new tab, I press command or ctrl and click like this. For each category I’m going to find an image,
a thumbnail. I’m going to upload it here, its eBook so
I use this one, you can do whatever you want. I press [Ctrl + Tab], I go to the next one,
it is merchandise, I take the white shirt. Next one sweaters, I take the sweater. T-shirts, I take the black t-shirt and we
press 'Themes'. I take InstaBuilder. I update them all
and if I go to the front page and to the shop but actually I don't like this way of showing
my web shop so I go back to the WooCommerce settings, products, display, the second option,
put it back to show product, Save Changes. What I want to do, I refresh the page and
now I see the products again. I want to put the categories beneath the shop
menu item so I go to the back and I scroll down to appearance and menus. I scroll down and I’m searching for product
categories, I select them all, add them to menu and put them beneath the shop, I can
put them here then they will be in the menu. I don't want that so I drag it to the right
like this and now it's a sub item in the menu. Sweaters are also child of merchandise so
they go more to the right, same goes for t-shirts and then serves this again like this and eBooks
and WordPress themes like this. I can make it all capitals and I will fast
forward like this, I save the menu and if I go to the home page and I have hover over
shop and you see merchandise serves as eBook WordPress themes. If I got the merchandise, I can choose between
sweaters, t-shirts. If I choose sweaters, I see all the sweaters,
it's only one. This is the thumbnail image for the category
sweaters and here is a sweater. This is how it works. So if you go to the shop you see only the
products but if you hover over the shop, you see the categories. What I want to do, I want to create a sidebar,
I want to edit this page. I cannot do it from here because this page
is the shop page, you only can change it from the back end so I go to back end, pages and
I select the shop page, I scroll down, search for the shop page and at the right I scroll
down and I select sidebar settings, right sidebar. I have to choose one and I have to choose
shop overview page, update and if we watch this page, there's a sidebar but there's no
information so go to the back end, go to appearance and click on widgets. I will scroll down and select WooCommerce
price filter. I click once on it, I scroll down to shop
overview page, scroll down again and add the widget, price by filter that's okay. I scroll down again, I scroll, searching for
the WooCommerce cart, click on it, shop overview page and add widget and the third one I want
is an overview of the categories. Enlist or drop down of product categories,
add widgets, we have three widgets now. The first one is a price filter, second one
is an overview of our cart, you see what you have in your cart, you can hide it if it's
empty I save it and the third one our product categories. Order by name, we can do it as a drop down
or the amount of products we have and that's okay. I refresh the page, we can filter over here,
we have carts, and this is all we've got in the carts. If I want to view the card and I remove everything,
now my cart is empty and I go back to the shop page, now you don't see a cart because
it's empty and as soon as I had something it will be added over here. So how does the filter work? Filtered by price, the cheapest thing is eleven
dollars 11.95 and the most expensive one is $79.95. So if I say I want to spend a maximum of thirty
dollars and drag it over here and I filter it and everything about thirty dollars will
be gone so only 99.95 29.95 and 1195. What if I want to spend between twenty and
thirty dollars then I drag this up to 20, I filter it and only this one is visible now. So that's how it works, I drag them up. Here you can order by name or by price, you
can choose how many products you want to see but we only have five so it's no relevant
option right now. So that's how it works, now we have a beautiful
shop overview. If I hover, you see the back, I can click,
see more information. You can go back to the shop, filter things,
see what's in my card, choose by category so that is great. If you want to have more items in a row, go
to the back, go to WooCommerce settings and go to products, go to display, scroll down
and here you can have the column. You can choose how much product you want on
one page or the columns. So if I say five there will become very small
and in one row like this. Well I think 3 is perfect like this. So what's next, if I buy this I add it to
my cart and I add another one and I had another one, I go to check out and I scroll like this. What I see the total is 109.80 dollars, I
can choose to pay with a check or PayPal or credit card but I don't see any shipping fee
so let's configure that. Go to the back end, go to plugins, add new,
we are going to add a shipping plugin which is called 'Table raids'. WooCommerce table rate shipping by Mangohour,
install now, calculate shipping cost based on this nation weight and cart total. Activate the plug-in and now we have to go
to WooCommerce, settings, to the tab shipping and we have to enable shipping. I save it and if I refresh the page it says,
'Shipping', there are no shipping methods available. So shipping is activated but we have no shipping
method available so go to the back end again and we have just installed this plugin, table
rate shipping. We're going to click here or click here it's
the same and when you click on it you can configure the plug-in. We're going to enable this and the title is
what you will see over here, you see the title and the costs. So if I’m planning to ship with UPS, I leave
that UPS, I type in UPS tax status, taxable. You can add a handling fee, I do not have
a handling fee, you can add shipping zones, you can assign different prices to different
places in the world or in America. I leave this blank for now and I go to the
shipping rates. I add a shipping rate everywhere else based
on the weight in the pounds. I can say total but if somebody buys a digital
product, I think it's not necessary to charge shipping cost for that because we will not
be shipping anything. So based on the pounds the minimum of 0 and
the maximum of 0.49 will be $1.95. I don't know if this is accurate, I’m just
explaining how it works. The next one between 0 and between 0.99 will
be 3.95 and the next one will be between $0 and $1.99 and will cost $5.95. Save changes, so if we go back to shipping
options we have enabled shipping, we have enabled UPS and I drag this up, I save the
changes and if I refresh the page you see the costs are $1.95 that is because it's between
0 and 0.5 pounds but there's no weight at all yet, we have to assign a way to this so
I don't want to charge people for something that weighs zero pounds, so I go back to the
back end, I go to table raid, it's now here at the front. I scroll down, I make new one and this will
be from 0 till $0.01 will be free so I refresh the page and now it's free. It's because this is a total weight of zero
pounds. Now if they assign a weight to every product
we have so go to the back end and go to products, products because we have a few digital products
and services, this has a weight nothing, nothing, nothing. We have to assign something so go to quick
edit, scroll down and here at weight. I’m not sure how much t-shirt weighs but
I think 0.10 pounds maybe and I save it. We update it and go to quick edit, this one
is a little bit heavier I think 0.25 pounds, update and
now let's see what the shipping cost will be. So 3 times 0.25 pounds. It's you mean it will be 395 I guess and here
we see it's 395 so if I go to my card and go view cart and decreases this to 1 and I
update my cart and I go to check out that means it will be 195. If people are buying a lot of stuff, I want
to give them free shipping. There are two ways to do it so let's go to
the back end to WooCommerce, settings, shipping, click on the table raid, scroll down and we
can add two more things. The shipping rate can be based on pounds so
let's say between 1 and 199, people pay $5.95 but if their total weight will be more than
two pounds to unlimited then it will be zero. I will add one other thing, if people buy
a minimum of hundred dollars, I will give them also free shipping so total based on
dollars from 100 to unlimited will be no shipping costs. I save it and if I refresh it, this gives
no cost at all but this does so if I go back to the cart and I add a few more, you see,
the total amount will be more than $100 and that's why it's free. So if I remove the e-book, it's $149 and if
I make it three and its total of $98.85, this will be the cost but if I add one more then
it will be above 100$ and then shipping cost will be free. What you also can do, scroll down, you can
make shipping zones. So for instance, for instance you sell to
the Netherlands and you scroll down and save it and scroll
down again, add a shipping rate, select the Netherlands and the weight between 0 and 2
will be $13.95. So if somebody buy something from the Netherlands
and it will be sent to the Netherlands and it's between 0 and 2 pounds the cost will
be $13.95. What else can we do, we can go to a product
and for instance the t-shirt. If I scroll down, people can give a review,
I will copy this link, I will logout, I will paste the link again, I scroll down and goes
to the tech reviews, now you can add a review. I can say I really like this t-shirt, I have
the white one and sleep in it every night. Since I bought it I have a nice dreams. My name is Jim and I submit it as a visitor
of the website I will do you see. You see your comment is awaiting approval
so if I login again, that will be admin, go to comments I see there is new one and then
I can approve it and I reply 'Good to hear that Jim' reply. I go back to the t-shirts in the web shop,
you see there's a rating now, one customer review, you see the review and see our reaction. That's how it works. Let's add a payment method because if I go
to check out, I can choose cheque payments or PayPal so go to the back end of the website
and go to WooCommerce, settings and go to check out. Now there are a lot of options to pay with
and I only want to use PayPal and credit cards, I go to check payments and I enable this and
uncheck enable, save it. I go to PayPal and change the title to PayPal
or credit card, description given by PayPal or credit card. This needs to be your email after PayPal account
so this is mine, I have PayPal account on this address, I scroll down and I save the
changes. Now if I go to a website
and I want to proceed to check out, I filled in my stuff and I select PayPal, it's automatically
selected because it's the only option, proceed to PayPal and if you have a business PayPal
account you probably have to pay a little fee every time somebody buy something. Now I can login over here and then I can pay
or I can click here and pay with my credit card and that's how it works. Thank you for watching this video, I hope
you like it. If you did so please like it below the video
and if you want more videos like this then please subscribe and I hope to see you next
time bye bye.
