How to add products to WooCommerce shop page | WooCommerce 2021 Tutorial

hi and welcome to this dcp work tutorial in today's tutorial i'm going to show you how to add products to your woocommerce shop page okay so on my desktop i've got this folder and inside this folder i've got one example picture of a product that i want to add to the website and if i open up this little txt file i've just got some notes in here about the product image the description the price the sku and little size guide table that i've created here and i'm explaining how to use all of this content and add it to the woocommerce shop to create a new product let's go ahead and open up the web browser and i'm on this website that i'm working on at the moment for a client and they're just going to be selling like t-shirts stuff like this they've got men's women's they've got a few other categories as well we click on the drop down we can see the main categories here and i'm going to click on men's because that's the type of product we're going to be adding right now so we can see all these different products that are listed and we're going to add a new product let's go back to the admin control panel so log into your woocommerce admin and under the woocommerce settings here you want to click on products when you click on products we're going to click add new and the first thing that this the website is going to ask you for is the product name what is the name of this product so let's just open up this folder and open up this little txt file and the name of the product is written here so i'm just going to select this and paste it into here and the next thing it's going to ask me for is the price so the price will be 15 pounds and we just we don't actually enter in the pound sign we're just entering the value here i'm going to click on inventory and it's going to ask me for an sku the sku is optional but i would advise that you you have skus for your products because each sku identifies a product specifically let's move over to this right hand control panel and in here we're going to click on men's because it's going to be a men's t-shirt and we can add some product tags these are optional but we could type in something like men because this is a men's t-shirt we can click that and then we can type in t-shirt right and if you've used these tags before they'll pop up in here you can just select them if they don't if they're not available then when you click add it will add it as a new tag now next thing we want to do is add the product image so let's go to set product image here and we'll click on this and we'll just go to the the folder on my desktop so let's just let's just minimize this a second we'll get to this folder and all we're going to do is drag and drop this picture into the directory right we'll drag and drop it in here i've already got a copy there so let's just delete this one i don't really need it there and i'm just going to rename this one slightly one thing to note is before you drag and drop a picture into the uh the file manager here the media library you should try and name the picture as best as possible just give it a really good name something that you that something that you know represents the products well so when we drag and drop it into here the reason why we do that is because that name gets used in the title here and what we want to do is cut this title and paste it into the alt tag because this is better for optimization yes better for optimization basically if we click set product image we'll see the image here now and the next thing i want to do is really add a table so if i go to this first product we can see down here we've got like a little size guide right so i want to add this little size guide so if i go back to the admin control panel and open up this notepad file i've created a html table here so this is a little bit beyond the scope of um our tutorial today but if you want to learn how to make tables then by all means write a little message in the youtube commenting and i'll show you how to make tables before you know how to do that then all you need to do is click on text here because we're going to add text content not visual content and it'll be a html table we'll click visual and we can see this little table in here it will look a little bit different in here compared to the website as we're going along and adding all this content we should click save draft because that will save a copy but when we click save draft it doesn't publish it directly to the public it's basically a draft copy for administrators for you and i for to see or for the client to see until the website goes live the one other thing i want to do is go back to this notepad file and in here i have a little description so i'm going to copy this description and i'm going to go right down to the bottom of the page here and paste it in here now normally you should write a meta description so that can just be this little short description but i'll advise you to write a little bit more than this if you've got um yoast sd installed you can see like the bars going up normally when you try and get it closer to the tops you want to write a bit of a better description to be fair but you can see the pictures in here and you can see it in like mobile here and desktop view but yo so i'll explain that maybe in another tutorial for now we're going to focus on um the content adding right so let's click save draft again and we can now click on preview so i normally middle mouse click on this so it opens in a new tab and we'll click on there we can see the product here we can see the price we can see the title and we can see the little short description that we added right that was right at the very bottom here that's that little short description and then we've got the little table in here right and it just gives the customer the size so if they want a small size a medium large or extra large they understand what these sizes represent in terms of the product itself right this is quite important now sometimes you may want to add alternative pictures so you may want to show the front you may want to show a little like a close-up view or maybe someone wearing the t-shirt i don't have any alternative images for this particular product if we go to the admin control panel and if we scroll down to the bottom to product gallery we can click on that and you just drag and drop your files as you drag and drop this file so you might have a different like the back view of this product or close-up view in this case i'm just going to select a few other images let's just say these uh these ones here let's click this one here let's click this one and let's just add to gallery and maybe we can select a few more let's select this one this one here and maybe we'll add one more right let's add this one so normally these will be three different pictures of this product maybe the back view of it a close-up view of this uh this this spartan helmet and then maybe someone actually wearing the t-shirt right i'm just putting these as examples because i want to just uh save this and then we don't need to click preview again we've got the tab already open so we can just refresh it i just want to show you that you can add alternative pictures here so there can be different images of that particular product when you roll over it will zoom in depending on the type of theme that you're using so i'm using flats and theme on this one it's called flatsome and if we click on it you can see a larger view of the product and you can just click on the arrows to move through them right like this okay so that's how you go about adding a product one thing that you'll notice if we go back to the shop and if we go to the men's category and we click on this first product there is actually a drop down menu here this is called product variations so in my next tutorial i'm going to show you how to add product variations this tutorial is mainly focusing on just adding standard type products so you may have a t-shirt that is just a specific size if you notice when i go to shop and go to men's we don't see that product listed here the new one that we've added that's because we need to go to the admin control panel and click publish right now it's saved as draft so it's temporary so imagine if you wanted to add more content to this product before it goes live you save it as a draft copy if we click on products here you'll see that it's been set to draft it's written draft here so if we go back and click on that product we can now publish it by clicking publish and then if we go to the website and refresh it we should see in these listings probably towards the bottom and here we can see this new product that's been added so really this products you can click on it and go and buy it if this website was live today let's click on that product and in my next tutorial i'm actually going to show you how to create the variation drop down list this was just to show you how to add a basic product right so it might be a toy a coffee mug it could be any type of product it might even be a t-shirt but you only have one size for example it can be any type of product but you use the same sort of workflow and same sort of logic to add the products to the website in the next tutorial i'm going to show you how to create product variations that's quite important so if you have a product that has different sizes like small medium large then you can add this drop down menu and then the customer can select large and then add it to the shopping basket okay let's go ahead and minimize this and close this down that's the end of this tutorial showing you how to add products to your woocommerce shop page i hope you find this tutorial useful don't forget to subscribe to my youtube channel where you can access over 650 free video tutorials and i look forward to seeing you in the next dcp web tutorial you

Channel: DCP Web Designers

Views: 5,015

Keywords: How to add products to WooCommerce shop page, WooCommerce 2021 Tutorial, flatsome theme tutorial, woocommerce tutorial, how to add products to woocommerce, how to add products to your woocommerce store, how to add products to a page woocommerce, flatsome woocommerce tutorial, flatsome woocommerce product page, WooCommerce Shop, woocommerce shop page, woocommerce wordpress tutorial, add product to woocommerce tutorial, woocommerce product tutorial, adding product to woocommerce

Id: NWnT7fz5kbU

Length: 8min 51sec (531 seconds)

Published: Mon Apr 19 2021