E-Commerce Tutorial 2016 | WooCommerce
Subscribe to my YouTube Channel
Hi there, my name is Ferdy Kopershoek for a ferdykorpershoek.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 500×500 and 1,200×1,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.