How To Create an eCommerce Website With WordPress | James Stafford | Skillshare

How To Create an eCommerce Website With WordPress

James Stafford

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (1h 18m)
    • 1. Online Shop Video 1 Hosting and Products

      20:58
    • 2. Online Shop Video 2 Editing Homepage Part 1

      20:19
    • 3. Online Shop Video 3 Creating Products & Shipping

      18:20
    • 4. Online Shop Video 4 Setting up WooCommerce, Menu, Sidebar and Finishing Your Homepage

      18:21

About This Class

In this course, you're going to be creating your online shop step by step with WordPress.

I'm going to show you how you can upload new products to your shop, how you can do reviews, and how you can set up categories for individual products, set prices, and everything to do with your shipping and how to set that up as well. I'm even going to show you how you can set up discount codes to give to your customers.

I'm going to show you how you can move these sections around so you know you don't have to have this section here. For example, you can drag it up here. You can move this featured product section up here. This online shop is completely flexible and you can do anything that you want with it.

I'm going to show you how to customize your footer so you can have different links to the different products in your shop. You're going to have a working menu at the top with store accessories, women's, men's, anything that you can think of or anything that you want to have in your shop.

You're gonna have your own about us page, which tells your customers and your viewers all about you and who you are or what you're doing and all about your products. And you're going to have a contact us page with a working contact form as well as social media icons in case people want to visit you there and carry on the conversation so you can carry on building your community.

This online shop has everything you need to build an online shop and be successful. So if you've been wanting to have your own online shop, this video will show you every step of the way to doing that and making it work.

Transcripts

1. Online Shop Video 1 Hosting and Products: in this video, you're gonna be creating your online shop, and I'm gonna give you a free domain to do it. I'm gonna show you how you can upload new products to your shop, how you can do reviews and how you can set up categories for individual products. Set prices on everything to do with your shipping and how to set that up a swell. I'm even gonna show you how you can set up discount codes to give to your customers. I'm gonna show you how you can move these sections around. So you know, you don't have to have this section here. For example, you convey drag up here. You can move this featured products section up here. This online shop is completely flexible on Do you can do anything that you want with it? I'm gonna show you how to customize your footer so you can have different links to the different products in your shop. You're gonna have a working menu at the top with stool accessories, women's men's anything that you can think off anything that you won't have in your shop. You're gonna have your own about us Page, which tells your customers and your viewers all about you and who you are, what you're doing and all about your products and you're gonna have a contact US page with a working contact form as well as social media icons in case people want to visit you there and carry on the conversation so you can carry on building your community. This online shop has everything you need to build an online shop and be successful. So if you've been wanting to have your own online shop, this video will show you every step of the way to doing that on making it work. And then the first step is to click on the link here where it says, Start here. So just click that link on that's going to take you over to host Gator and we've teamed up with host Get in on DWI. We're going to be getting you 60% off your hosting, but also you get a free domain by doing this with us, cause we have teamed up with them. We've got this just for our viewers. So you click here to start saving immediately and then in here type in your website's name . This is what people are gonna type in to visit you on, then here, choose dot com order website dot Store on anything you want there. Then scroll down on Choose your hosting on your billing cycle. I always go with their years hosting because it does mean I save the most. Andi, you're now going to get a free domain with it too. It's up to you. Whichever hosting you go for, you're gonna save loads. But with a year, you get a free domain 60% off. Andi, it is an investment for your new shop. You're getting the best had stopped. So I'm gonna choose a year Onda, then enter Use name and security pin on. Do you want to make sure that you've chosen the business plan because you need this because you gave free SSL certificate and a dedicated I P, which you need for a shop to make it completely secure. Then scroll down on here. You want to make sure you've got a really email address because ho skater are gonna send you a couple of emails, so make sure that's an email that you can access, then scroll down and uncheck these. It's just added on a few extras that we don't need. Then make sure wordpress hero is validated here to make sure you're getting your savings on . Then when you're happy, click on, check out. Now on, you're gonna have your very own domain name. Okay, great. So now you're going to receive a couple of emails and, you know, open this one up and find the control panel link, which is this one. So click on that to go to your control panel and then scroll down. Keep scrolling down until you find the software and services here it is on. Then the first thing you want to do is click on PHP selector right here. So click on that. And then all you want to do is click here on the drop down because we're gonna update the default PHP Right now it's a 5.4. So click here, Onda. Let's click on Let's choose 7.0 earned Update that There we go. Then click this hour to go back and now click on Quicken store. Now click on WordPress and no select your domain from the drop down here and click next are now enter in a few details here, like your name, block title, user name, first and last name andan email, then click on install. WordPress is now being installed to a website on. You'll receive your website log in details here. So write these down and then click here. Then you should see this page where you can log into a website to start creating it. Sometimes you'll get a page saying it's not available, but you just have to wait a few minutes and then try again, and it should come up. Now. Log into a website and you're done. Congratulations. You've now got a website up and running. This is your dashboard on. This is like the heart of your website. It's where you customize exactly how your website looks, how you can edit the different pages, the posts you're gonna see. You've got a tool. But on the left here, which has posts, media pages, comments, appearance, which is where your themes are. Plug ins, Andi tools and settings. And so and I'll be showing you a few different things there further in the video. All right, let's get straight into it on in store your brand new theme, so let's go to appearance on themes and a theme is like the look and feel of your website. It's how your website functions with any images text, and it's just the overall look of your website. So now let's scroll down here. You'll see that the active the current active theme is 2019 but we're not going to use that . Let's go to our new theme here, and this takes you into the WordPress Themes page. And in here there are literally thousands and thousands of different themes to look up. But we've found the best one for you to use, especially for you creating an online shop. And that's called Astra. So let's type that in. Here it is. So now just click on install Andi, activate. When that comes up, There we go. Activate that. Okay, Perfect. So, no, thank you for installing extra. You've got this little messager, Andi. Obviously, it says Astro comes with dozens of ready to use starter site templates. So we're going to use one of those select click on get started to install the start of sites. Plug in. Amazing. So and now it's asking you which builder do you want to use we're going to use elemental because that is by far the best one to use for any website or shop going forwards. Elemental has been an absolute game changing tool to use for building websites and shops, so let's use that. So now click on next on L. A mentor lets you literally create any type of website that you can think off. It lets you move things around and change text, colors, images and put your own videos and images into your website. It's unlike anything that's ever been around before, so here we go. These are the templates that you can use with Astra and Summer paid some of free. There's a lot of really, really amazing themes in here or templates, but I've already chosen the best one to use. So now up here, let's click on e commerce. Actually, no, let's click on free. And this brings up all the free templates. Now scroll down and you are looking for You're looking for this one brand store. I scroll over that. It gives me a glimpse of what this looks like. And as you can see, it is a pretty amazing looking template has already built for you. You're gonna be getting all of this. So you're gonna be getting this beautiful header all these different sections, a shop section featured products of footer. It's incredible. So let's click on this. And now you can score around and see Really? What this looks like you can play around or that it's exactly It shows you exactly what it's gonna be like when people visit and we'll look around your shop. How amazing is this a fully functioning shop ready to go for you? So to import this, all we have to do is click on imports site right here, and it's gonna import everything that you can see all of the images, all of the animations to do. The buttons of the color's absolutely everything is done for you. So let's click on that. So now it says, installing. As you can see, it's installing all these different plug ins and importing all the images has just so easy eyes. It's absolutely amazing. You hardly have to do anything. All you have to do now is basically place, or put in your own images and videos if you want to, and just customize your website to how you want it. So you just wait a minute or two for this two? Complete on. I'll be back with you in a minute. Okay? That template has been imported successfully. So now we can go ahead on. We can customize the text, the images on the design to make it ours. So you ready? Let's click on view. Site on. Here we go. This is just a lobbying imported. This is ready to go. You haven't had to do any of this. This is just unbelievable. Never possible. Just even just a few years ago. It's created this menu for you. Go a little basket animation. Here. You're beautiful. Header With this parallax effect got a couple of buttons that people can go straight your shop or to find out more about you. You got some brands here that post possibly that you work with all that you sell. You've got these different beautiful sections that get people Teoh again. Go to your shop for different products that you want them to check out. And here's a featured products section. This is just unbelievably simple to use and have her together. I really hope you're happy and excited going forwards about customizing this. I'm really excited for you. So let's get going to head back to a dashboard. Either click on the other tab that you've got open or you can go up here and then click on dashboard. Okay, so we're back on the dashboard and you'll see you've got a few more options on your toolbar . So here we've got one called CART flows on. We're not gonna use this sort of more about it. We've got one called wu commerce, and this is one of the most important new tools that you've got because this is everything to do with your shop. As you can see, it's got orders, coupons and reports, and you can change the settings for this as well. This is like the behind the scenes of your shop. So it's gonna tell you when you've got orders and how much and where to send those orders to so on. We'll get into this a bit later. You then go products underneath that and then elemental here. So first, let's go to products. That will take a look at how this works. So let's go to a lot products on. I've got loads and loads of newer notifications up here. So I'm just gonna get out, get rid of some of these. Someone's gonna say Maybe later for this on, I was gonna click on Skip set up for the cart flows plug in because we're not going to use that. I'm just going to click on the cross for this on. I'm gonna keep this because we can run the set up for Wi Comus and a little bit. Andi, I've got a little message saying your store does not appear to be using a secure connection . We highly recommend serving your entire website over an https connection on this is obviously because it's a shop on. This is really, really important and will be setting this up in a little bit on this is what the SSL certificates for, and I'll be explaining all about how you can set that up a bit later. You have to go over to host Gator and ask them Teoh put it up on day set up for you. But we'll be going through that a bit later, so I'm gonna keep that up to remind me to do it later. And here is saying that you can try the new version of Wu commerce, but I'm not gonna bother with this, but feel free. Of course, if you want to you you can keep this message up in Troy. It later, Whatever you want, really? So you all you do is click on install Woo commerce admin. But I'm not going to do this for now. So I'm gonna click on Dismiss and at the top there is another one saying Configure Google Analytics on Google Analytics is a whole other video is really, really in depth to do with Statistics are all about your website. Who's visiting in New York, your viewers and your customers. It goes into quite a lot of depth. It is something that you could get into after watching this video if you want to. But I won't be explaining how to use it in this video because, as I said, it can easily be another hour long video explaining all about it and the best ways to use and how to use it. But we do have a video on our channel. If you do want to get into that and also on our block, so take a look at those. If you do wanna start using Google Analytics and to get rid of this message, you just uninstall the plug in because you've already got the plug in installed by default . So here we are in products. Now you've got some default products already set up, which came with your shops. Template on this is really good, because I'm gonna It lets me explain how these products look onda kind of function and what all this means. So obviously you've got the name of the product here. Then you've gone sk you andan sk you is a stock keeping unit. It's a number assigned to a product by a shop and you can use SK used to track inventory in your shop and they can be really helpful. But I'm not going to use it in this video or in the shop going forwards. Then you've got stock on this is going to say if the product is in stock or not, then you've got the price on. If you see a price like this which is crossed out, that means it's on sale. So this used to be 100 50 but now it's a 120 then the category This is women's, and then the men and whatever category you are signed for, that product will be here. Then you've got tags on this little star is something that you can choose for each product . If you want it featured in the featured products section on your home page and we're gonna be getting into that in a moment. I'll explain all about that in a minute. And then the date is when you created this product. So let's now scroll over one of the products here. So let's take, for example, just this this white shoe, right? So you've got edit, you've got quick at it, you can trash it, you can view it and you can duplicate. So if I click on quick edit, you can change simple things like the title. Even the date when it was created, you could make it private. If you don't want it to show in your shop on here, you've got the product data. So the escaped you again. The price. If it's on sale, you can put a price there. Even the weight on the length, the width and the height that has to do with shipping, of course, and then shipping class, which will be getting into a bit later, that this is really, really important to set up your your postage costs and we're shipping costs and then the visibility on. If you want it to be managed, the stock manage stock, so that means you can automatically put it out of stock. If you've only got a few of these or something like cereal, automatically, say to your customers or on your website that it's out of stock. If it's being bought a certain number of times, for example, then you can add some product tags up here. You can even change the template on you've got categories on the right, and then you can change the status of this product. If you don't want it published anymore, you can put it as a draft or anything that you want. So I'm just gonna council to come out of this. Then I'm going to click on Edit on. You're gonna most likely just click on edit for most things I have barely use quick at it, really. It's just a quick to just go into the main product here and then you can change the title of the product of the hair and then in here you would change the products description. So this is where you would type in what the product is on information about that for it below. You've got the product data so you can change the price and the sale price again. The inventory is here, like I just explained with the SK you. And if you want it to manage the stock for you, you can change these stock status here as well. If it's out of stock or on back order. Or if you've only got one version or 11 of these products, you click here to only allow one of this item to be poor in a single order. The underneath we've got shipping where you can assign these shipping classes, which I'll tell you all about soon. Then you've got linked products which can be really useful. If you want up, sell things to have you got another product. You can add that here. So if I type in shoe, it's gonna search for all the other shoes in my shop, and then I can add one of these as an up sell it. It's like when you're in McDonalds and they ask you if you wanna make it a meal so you get chips and a drink with it, we'll make it a large or extra large. Whatever that's about sunup cell. Then you've got attributes for a product which can be so if you've got T shirts that you can add and attributes such as small or large, medium whatever, then in advanced, you've got purchased notes and things like that. Then underneath here, you've got a short description and, for example, this is gonna be the description that is just underneath the title of the product and next to the picture like you see here. So this is gonna be the short description, and then the main description that is above his head down her on these products look absolutely amazing. As you can see, if I scroll around, it zooms in, and I can change the image just like that. It's just incredible. People can add as many as they want and then add to it at the cart, and then you've got related products underneath. This looks just so good. So let's keep going. So here we are again, on underneath. You got reviews on? Obviously, there's no comments yet. This is just a demo site on the right. You've got a few things to consider, so you've got product categories here. Now category could be really useful if you want people to find other other products in that category. So this one is in women's. So obviously, if someone is viewing this product, I can click on this category and it will show them other products in the same category, So that can obviously be good toe. Get your products in front of people on end product tags underneath. There your post attributes on these settings for the themes of Astra settings. Now I wouldn't change it. I wouldn't change any of these. I just leave them as they are, because this is a working really, really well product image on product. Gallery is something you want to. You have a look up. So the product image If we if we have a look in the featured products action here. This is the product image, the main product underneath my cursor here. So if I now click on that seat changes as I scroll over it. That would be the other image, the product gallery. So again, this is the product image, and then the other product. Other image is that is the image in the portrait gallery. You've got tools here to change how the tax looks. If you want to change any of those that they're right there really easy to do that. And again, you've got those there, and this is easy is that to create products in your shop? 2. Online Shop Video 2 Editing Homepage Part 1: so we'll be coming back to the products and creating our products in a minute. But now let's go to pages and all pages on. As you can see in a minute, you're gonna have some default. Pages are already created with your with your new shop. So again, it's done all of this for you. You haven't had to create any of these pages ons you've got about. You've got carte page check out, contact us home. My account. We're not going to use an account in this in this video, but you can you can always set up after watching this. Pretty straightforward. You got a privacy policy, a sample page, a store, which at the moment is your shop page on day WP forms preview. So I'm just gonna remove a few of these pages that we aren't going to use, So I'm gonna click on those two. I'm also going to remove the account page. You can keep this, but I'm not going to use that on. That's it for that. I'm gonna keep everything else, so I'll school up here, click here on Glicken, moved to trash and apply. All right, So I am left with the about page and so on on. We actually only need Teoh. It looks like we've got a lot of pages here to edit and customize, but we really don't. We're only going to do the about contact on home page on. That's it. The other pages work on their own that already set up and functional. They're going to do everything for you don't need to change anything there. The only thing we might have to do later on is come back and edit each of these pages and just change a couple of settings. But I don't think we have to you right now. I think they're all working completely fine. So now I'm gonna go through doing customizing the home page on. Do you do that by clicking on edit with elementos? So let's do that right now. I'm gonna actually open this in a new tab so I can change and click between windows right here. Make things. It just makes things much easier. So here we go, is going into elemental are. And as I said, elementary is just incredible as you can see you as I So this is your your head out here. This is vice click Hair opens up and makes it full width. And this is really, really looking amazing. So if I bring back the customizer again as you can see, his lights school around. Each of these elements has a blue line around. And this means I can edit anything here, even the background image. You can move text around and change colors and fonts and everything you can add in your own images and videos. I'm gonna show you exactly how to do that right now. So here I am on the finished website on this is my head of now all I've done is change the background image on, got rid of one of these buttons because I think that looks much better. And I'm gonna show you how to do all of this. How to change this text on the colors, whatever you want to do. So let's go back to the home on DSO to change. The image is really simple. You've got these different buttons up here. You. This middle one is exactly how you change the image. You can edit this section and then here is you can add a section and if you click, that is gonna add a new section above her. I'm not going to do that. But that's how you do it. So and then here you can click on the cross to remove it. So let's click the middle one to edit the section. And then this brings up the settings on the left. Let's go to style and then in image. This is exactly how you change the image. You just collect hair. You go to your media library where you're most likely gonna have lots of new images because these came with the the templates on do you could if you wanted to. You could use any of these if you do want to have completely free future use or you can upload files. So I've put together a really, really good selection of images for you to use. And you can find that over on our blawg if you just go to websites made easy dot tv forward slash blawg fourth slash Start your dream shop and you can download that image pack right here. You just click here and it'll download on. Then if you go back in l a mentor and you click on select files and then find that image pack. You've got these background images or whatever the union uses anywhere. But these are the background images I think look really good. And then you've got some images to use as products on. You could just use these four the video, so you can follow along with me if you haven't got your own products yet. This just means you can follow along with the video, keep going with me and learn how to do this. Once you got photos of your own images, you can then just re upload those and so on. This just makes things really easy for you. So let's go back, and I'm going to use one of these background images. I think I'm going to use this one because I just love this one. It looks really good. So click on it and click on open, and that's gonna upload, as you can see. Stop polluting right now. And there we go. It's uploaded on in the future. If this comes up with an error or anything just coming off here, save anything that you've done by updating and then refresh the page, then do it again and it'll work. Sometimes you just need to refresh the page for things to start working again for some reason. Anyway, so that's uploaded. So now all you do is click on insert media here on There we go. It's inserted that straight. And your header on that is looking absolutely amazing. Is looking so much better if I make this full wept. How good does Allah Wow. Okay, I just like I love it. So here we go. Here. You've got some settings for this image. You've got position, which is at the moment on center center. You can change this to top left on. This is gonna move the image around slightly depending on the image that you use. But I'm just gonna leave on center center. I could could be useful. As I said, depending on what picture you're using, what you want to show it in, and so attachment. I like it to be on fixed because that's what gives it this really nice parallax effect. It keeps the image in place when you school about and now looks or radical, but you can always keep it on Scroll on. That will make sure the image scrolls As the viewer looks around, so scrolls with the website. I'm gonna keep it on fixed. You don't need to worry about Repeat on size. You'll generally you want to keep it uncover, and that's pretty much about it. In background overlay, this could be useful. If you want to darken or lighten, the image of the moment is got on overlay, which is a black on the capacities. You can see it's on 0.4. If I increase, this is going to darken it. And then if I decrease it like that is gonna light in it. So I'm gonna probably keep it on a what about something like that or something? Yeah, that looks good. Just like that. And then you underneath that you've got boarder shape divider and typography is going to shape divider. That could be quite fun sometimes. So if I go to bottom top and bottom, the top is the top of these section or your header here on the bottom is the obviously the bottom of it. So it's click on bottom and then you can select the type off divider so you'll see what I mean when I add on. So let's Ardan. Let's just add in a tilt Ontario. So it's added a divider. I know it looks pretty good. You can change the height of it here just like that. So you could just have it a slight, slight divider or something like that at the bottom. That does look really nice. I'm not going to use one, but that is there if you want it. So it's gonna click on none. And that's gonna remove that like that, and that's it for changing an image. This is basically the same for every section on your website. You would collect this middle button and that will bring up the settings on the left Her. You can also change the headers margin and padding here as well. So as you can see, it's got a top padding of 12. If I increase this, it's gonna move things down. If I decrease their moves up, it's gonna keep on what it waas because I looks really good on gud mess around with us, see how you like it. It does change things slightly so it could be really useful on depending depending on what you want to do with your header I didn't lay out. You've also got some some different options, but you really don't need to change these if you don't want to play around with things of you want and see how things work because you can always, you know, learn mawr and you might find something that you like to do anyway. So that's the image done to change text. It's as easy as clicking on it. So let's just click on this one. Then you would write anything here. You'd write what you want in here. You can create link our of it as well. If you just paste the link in there, you can align it to the center or left on, then in style. This is where you change the typography on the text color. So if I click on typography, you can change what font that you want to use on DSO on on the size. You would just increase and decrease this really, really easy today, and then the weight this is this could be really good bye changes to 300 makes. Thea makes the writing thinner, which can look really, really good. It's going to keep it on what it was because I do like the look of this and then obviously in text color, you can mess around with this and change it any color that you want. I'm just gonna keep on what it was there. And, you know, you don't really need to do a lot here. It's as I said, This is the beauty of this video on this template. It's done everything for you. So really don't need to change his tax just right in what you want and leave it as it is. Make things easier for herself. Then you've got a couple of buttons here. These are just a ZZ. I'm going to remove one of these. You can keep it if you want to, but I'm just going to remove it by right clicking this pencil icon and click on Delete Andi for this button. All you do is click on it. Then in here the text you'd write what you want. So shop now or find out Mawr whatever you want, you can align again on Dhere. You would paste in the link for that button. So if you wanted to take people t your shop, you would paste your shops, link in there. And to do that, probably the best way is to open up your shop in a new window while probably better to do it. While you're not logged into your your website on Ben, obviously up in the address bar appear is gonna be the link, and you just copy. Copy that while you're in the shop, you copy that link and its most likely gonna be something like your shop dot com, forward slash shop or something like that. And then all you do is just paste that in there. Then you got some link options on. This is probably quite good. Open in a new window that could also always be good. So I'm gonna keep that on. Duh. That's about it then you've got the size. You can change it to a medium or small and in style. This is where you can change the color off the button. So at the moment, the text color is black, the background color is white, and that is on normal. So this means what this means. While no one is scrolling over it. So if I make this full screen, find out school over. It changes just like that. So it changes. So the background is transparent on the writing changes to a white that looks really, really good and so that all happens in hover here. So as you can see, the text color is white background color. There is none. It's transparent. Ondas. Well, the border color is transparent to you can also have a harbor animation here. So if I choose, let's go with grow. There we go. So it makes it. Let's have a look. So the button grows in size when I scroll over Alec Good as well. So that's all. Therefore you I'm not gonna have that is going to remove that on. Then you can change the width on the border radius and padding of the button. Here, this is all really useful to again customize exactly customize your shop to exactly how you want it in advanced. You've got the margin and patting again. So this is really useful. If you want to again move your move different elements around, so it's completely flexible. So if I increased the top padding, you're gonna see that the button goes lower down the header and then of course. Why decrease it comes back up again and you can do this anyway you want, right? Left any anything you want here you got things like motion effects on background. Border custom positioning responsive, responsive could be useful. So if you've got so if you want to customize how your website or your shop looks on a mobile device compared Teoh a laptop or a desktop, you can choose to hide this whole header on a mobile so it won't show to people that visit your shop on Mobil's. And then you can create a separate header for those people because your header might not look exactly perfect to someone that visits on a mobile. Thankfully, they we don't need to use this because this theme. So I just move this window to how a mobile looks. So that is how your shop would look on a mobile. That's how the head of would look and looks perfectly fine. It looks amazing, in fact, so you don't really need to use those settings, but they are there if you want to use them and that's your head out done. You know everything off. How to customize your header That's Aled done now. So let's go to the next section, which is on these could be the different brands that you work with all the different brands in your shop that you that you sell. This is really easy to do. You would just collect you editor and at the top is gone Image carousel, and then you can add images. You just click to edit that you can edit the gallery. Here you can add to gallery so an edit gallery can cross, and you can remove these images where you can add to galleries can add in your own logos of the brands that you work with, for example, and that's just just Azizi is that you can change how, how big the images are, the slides to show and how it's scrolls and stretching the images and all kinds of things you can add in a link as well to accustom Eurail so that could be to your shop. It's a lot so easy. Just look around. It's all here, ready for you in stall. You've got navigation options. So arrows on what position they're insert inside or outside. I was gonna keep it on the outside and then an image. You've got some some options there, too. And in advance again. You thought the margin and padding just like before. So that is that section done already. So now let's scroll down on the next section. Is this one right here on this is actually a really, really good area where you can get people to go to your shop or different areas of your website using these three beautiful sections or elements here. So first, let's do the images and change in image. You would just scroll over here and click this button right here, then go to style on. Do you can change the image right here. So let's do that. Let's click on style and then upload files on select files and again find the images. Now let's go to products on. I'm gonna use this image right here. And as you could see, this has come up with an error on Remember earlier? I said, if this does come up with an error when you're uploading an image, all you do is do the following. I'm gonna show you. So you would come out of here, you would then update right here to save everything that you've done. Then refresh the whole page. Just refresh this page. It will go back into Elemental. You'd find this section again, collected the image, upload select files. Andi, choose the image that you want again. And then that will upload. No problem. Now we go. Perfect. Now click on Insert Media on that gets placed in there. That is looking fantastic. So now I'm gonna do the other two images again. So style select The image upload falls on select files is the same as we've been doing. You should probably be used to how to do things. Now I'm gonna use this image on for the next image. I'm going to use these puddles. There we go. Perfect. And remember, you've got these options down here to edit your images. You can use position to change exactly how the image look, so you know you can move it around and select which part of the image shows up the most For everything else, though this looks this looks great. So I'm gonna leave them as they are. Then you can edit the text easily just by clicking it again. That's what I'm going to be doing. I was gonna change. This is going to do it just for this demo website. I'm gonna put 20% off long boards climb, doing like a surfing website or outdoor website. Then for this text, I'm gonna change that again. Two latest sops. Stand up, paddleboards. And then let's get paddling for the paddles that we dio. I know you've got these bottles here as well, and these are what you want to add your links to because this gets people to look at the different pages on your website. So let's say you've got a dedicated shop area just for your paddles or just for surfboards . You take them to that page, obviously. So now we do is click on it. You can change. The text on Dhere is where you add in your link. And like I said before, you can get this link. If you go to your own website, bring up the page that you want people to go to a new copy that link at the top. It's really easy on you. Type that in here, you paste that in. Here It's is easy is that you can also align the button anyway you want and also the size here. But that's all looking fantastic. Now we go. Perfect. So the next section of my school down is this featured products sexual. And as you can see, I don't have anything here right now, But we're gonna fix that. We just need to add in some products. So if we have a look at the finished website I scroll down here is what it actually is supposed to look like. And as I school over these Ah, these products, as you can see, some of the image change that you go to another image, and I think this looks really, really good. And I'm gonna show you how you can make that happen and how how to make that work. In a moment when we create off our products on, I take you through, obviously, like how what products look like. But I didn't show you exactly how to create them. So now we're going to do that. So let's update to save everything that we've done here. Then go back to your dashboard 3. Online Shop Video 3 Creating Products & Shipping: If you've got a tab open, just click on the otherwise you can ah, go back to your dashboard from Elemental, like I showed you earlier. So now let's go to products and all products on here. You're going to see that you've got lots and lots off default products already created on this came with the the template when we imported it. So no worries about that, but where we obviously don't want these. Um, so we're gonna delete these, and we're gonna create some new products. There's quite a fair few default products here. So what I'm gonna do is click here to select all of these and then from this drop down select move to trash on, apply on there's a few pages of these. So I'm going to keep on doing that until I get to the last page. And then here, I'm gonna select all of them, but take off one or two, keep one or two of these, and then apply on There we go. You should be left with a couple of just default products because, um, well, this is just for the demo website, so you can see it working. And so one. But obviously you would create your own products. I'm going forward. You don't want to use these default once. Andi, over here. You can see this star. This is what you want to select to make on individual product A featured product. So you just click on this to make it featured, and then it would show up in that featured section. So I'm gonna click on this to on the feature of that product that we go, Andi. Now let's create our first product. So up here, let's click on add new on This is the page where you're gonna be creating your products for your shop. So I'm going to show you around. It's the same as I showed you earlier. So you will probably know what it really looks like and how it works. But now we're gonna actually be creating products. So let's go. Let's go start. So first things first is your product name. So we do is type that in here. So I'm gonna put sunset surfer girl poster on, then scroll down, and then in here is where you enter your products description. So I've already got some that I've written. So I'm just gonna pace that in here. There we go on, then I'm going to scroll down, and you got your product data here. So this is This is like the price sale, price, inventory and shipping and so on. So, first of all, I'm gonna put the price. There we go. And then in inventory, you can use an escaped you. Like I explained earlier I'm not gonna use on there. Andi. In shipping, you would want Teoh change your shipping class. You'd select a shipping class on This defines the cost of the postage for each individual products. So let's say for this poster, obviously, it's not gonna be as much as a surfboards. So then, based on what someone wants to buy, the postage will change in the check out. So it is pretty clever. It works really well, and it isn't complicated, but I will show you how to do it. You just need to learn how to do it on. Then once you've done it once or twice, you'll get the hang of it. No problem. We'll be doing that in a moment. I'll show you all about that soon, and then I don't use any any of these other options here. So then I'll scroll down on all paste the same description in here. This is the short description, which shows up to the right of the image or your product. So I'm gonna pace the same thing in there. Then I'm going to scroll up on on the right. You've got things like categories. So, as I explained earlier categories of really useful if you've got lots of different products . So for this demo site, I've got surfboards, I got paddles. I've got wet suits and posters. So each product has its own category. So posters It always obviously posters, surf boards and surfboards. And if someone comes to my shop, Andi goes on one surfboard product. They can then click on the category, which will be underneath, and it will show them all the other surfboards in my shop. So this is obviously really useful to get more of your products in front of your customers . So let's now click on add a new category here, a ninja's type in your category name. I'm gonna put posters and then click on add new category on that gets at it. I'm then gonna create some more categories, so I can So I've got them going forwards. So surfboards and then wet suits. And there we go. I'm gonna uncheck wetsuits because this is a poster. So I just wanted posters category. You can also use product tags if you like. Um, do you don't want to change any of these settings down here? The last thing you want to do is add in a product image here. So let's kick on set product image, then upload files. And I'm gonna use this image of his girl carrying surfboard. Oh, it's amazing. So let's choose that nots uploading Perfect. Um, then you want to click on set product? Image on that gets uploaded. There we go. Perfect on Gus about it. So, you know, scroll up, aunt. Click on Publish. And that is your first product created. Well done. This is easy. Is that so? All you are, the products are the same. That's all you do to create a product. Remember, though you want to add in a shipping class, which will be doing in a moment, I'm going to shoot. So you're gonna probably show you how to do that right now. in fact, because that is really important going forwards. So let's go to woo commerce on settings. Andi. So the first thing you can do is add in your store address. I recommend you do all of this. I don't know. Store address in your ZIP code on DA Select from your general options where your selling location is your shipping location on DA Things like this, you can enable taxes and all their side and then go to product. Yeah, let's go to products First on this enables you to change Which of your Websites pages shows up as your shop page, and right now it's on store, so that's fine. And you can change things like out to CART behavior and all the of these different settings , like measurements and and so on. I mean, you don't have to change any of these, but that's there if you want to on an inventory, you've got things like manage stock, and you can hold stock for a certain number of minutes for for unpaid orders on us entirely up to you. If you want to do that, I know you've got notification, recipient email and things like that. So now at the top. Let's go to shipping on. This is where you can set up your shipping zones. So down here you've got your different shipping zones. Obviously, you haven't got any right now, so let's click on add Shipping zone here on then. In here, you've got his own name zone, regions and shipping methods. So in zone name. If you scroll over the question mark, it tells you each thing is so zone. Name is this is the name of the zone for your reference. So no one's going to see this zone. Regions are the regions inside this own customers will be matched against these regions on . Then you've got shipping methods. Okay, So for his own name is gonna put us a on zone regions are put United States. This is what So I'm basically selecting where I am able to ship my products to and you can add as many his own regions as you like. You can put United Kingdom. You can put Africa anywhere in the world that you can you want to ship to. You can just put other and then shipping methods. Let's click on add shipping method here on then, from the drop down, you can select what methods you want to let people choose from. So you've got a flat rate. You're free shipping and local pickup. So I'm gonna add a flat rate shipping perfect on. Then you can edit this and you've gone method title tax status and so on. And the cost. Now you don't want to put in the cost here. You want to use shipping classes, Teoh to set up a cost for each of your products. This means the As I said, the cost for the postage will change depending on what someone is trying to buy. So you want to use classes instead of on their shipping classes right there. But before we go there, let's click on Add another shipping method and I'm gonna add local pick up Teoh. Allow people to come and pick up the product from me. Um, and you know, you have to do this. I'm just doing it just for this demo website. Okay, so here we've got shipping options on this has got different different options for you to have a look out and play around with few. If you'd like to. I'm gonna change the shipping destination to default to customer shipping address because that kind of makes sense to me that if they put a shipping address in there, they want it shipped there. So I'm gonna choose default for that, then save changes. Then I'm gonna go to shipping classes on. And this is where you set up your shipping classes. So this is really important. So just follow along with me. It's really easy. Let's click on our shipping class on in here. All you do is type in a name for let's say, uh, each of your products. So I've got surfboards. Like I said, So I'm gonna put surfboards on that. I'm gonna add shipping class again, and then I'm gonna put wet suits, and at another one, I'm gonna put paddles. Then I'm gonna save shipping. Class is perfect, and you can edit them if you want to, but it looks great. Oh, I forgot to add one more. So I'm just gonna add in another shipping class on posters. Then I'm gonna go back to shipping zones, then edit this USA shipping zone on in here. You want to scroll down, go down to the flat rate again. Click on it. It. And in here is where you can put in each of the different postage costs for each different type of product. So, as you can see, you got puddles, posters, surfboards, wetsuits. So each of these has a different cost. The cost of a wet suit is going to be different to her surfboard. So this is how you differentiate that on in the calculation cost? I'm going to keep that on charge. Shipping for each shipping class individually. Okay, Perfect. Then I'm gonna save changes. Andi, you're all done. That is your shipping set up. That should be, well, working perfectly. So now let's go back to products and all products on. We've got our product that we made here, as well as the two other default ones. So you can click on quick edit to quickly add in the shipping class here to this product on Here it is down here, shipping class. Undo. Just click here and select. I'm gonna select posters perfect. And then just update that on that shipping class has been added. So now I'm also gonna actually I'm gonna click on the start head to make this I featured product. Perfect. OK, so now let's add in a few more products. I'm gonna click on, add new again on we're back on this screen. So obviously you want to put in your product name? Here we go. Hydro force paddle. I'm gonna add in a puddle, then add in the description. And remember, you've got these tools up here to change how the text looks. You can use all of these tools to, you know, bold or make a headline metallic. You can align their you can add in a link, even if you want to. All kinds of really nifty tools there. Then scroll down. Andi, do the product data. So I'm gonna put in a price then in the inventory. Obviously you can do the SK you again. You can collect to manage the stock if you want it to manage stock. If you've perhaps you've only got one of these puddles you can ah collect to enable stock of management. It's product level and then I'll ask you how many you've got on DA. It's really easy. So that's there. Then you've got shipping on obviously, in here we can select our shipping class So let's do that. I'm gonna select paddles so we're done, and then just add in your description again, see how easy that says on then. Remember your categories on the right here. I haven't added a paddle one, So I'm gonna do that. So, paddles and then it's gonna select up for me. Perfect on. Then I'm going to scroll down on the product image can and upload files on. I'm gonna choose this image for the paddles. This is really cool looking image. Remember, you can use any of these that you want to anywhere on your shop on that's all done. I'm not going to use ah product gallery image. I'll explain all about that in a moment. So then let's publish Perfect and no, let's create another product will create another one or two. So let's click on Add new product again. Put in the product title or their name of this product Onda, then the description than the product data price and so on. Usually how to do this by now. It's really easy, really straightforward. It's the same every time. Shipping class, short description on the product image. I'm gonna upload another image. Select that warm not is great. And now I'm gonna upload a product gallery image. And this could just be one other image. It doesn't need to be lots of images, but whatever you upload here, so the first image that you upload. So I'm gonna upload this one. This is gonna be the one that it changes to when someone scrolls over. So just keep her. Keep that in mind. Obviously, if you might have, you know, 10 images of one product, but whatever product is first, that's gonna be the one that shows up after when someone scrolls over that product image, if you know what I mean. I'll show you how it works in a minute. But then let's go back to all products on. I'm gonna make a few of these featured products. I'm going to do that one. Then I'm gonna make the paddles featured. I was gonna make all of these products featured, so let's just do three of them for now that we go. So I'm on the finished website right now, and, um, you can see we've got five products in the featured products section here, so I'm gonna add a couple more products. So you know this is looking or good, and over this is how the images look when you've got a product gallery image set up. So when you scroll over, it changes is really, really nice effect. That's really, really nice. So engaging. I love it. So it makes people you know want to see more and click on your products. Find out more are definitely recommend doing that. And you most likely will young. You're hardly ever gonna have just one image of your products, so make sure you use the product image gallery. So for this demo shop example, I'm just going to use these default to default products here just to make them featured. So they on the featured section so I don't need to create any more products. I was going to use these. So again, if these are highlighted, if these stars are ah, like, you know, if they're colored like this, then that means it's ah featured product. So now if we have a look at our shop, there we go. I've got those two as featured products as well, and they're looking So you got They've got the product gallery going on there as well, looking amazing. And if I click on one of these, let's click on this surfboard product. Right click on the There we go. It's ready to go so I can add that to my car. So if I add that to the cart, it's going to show up up here. Little notification saying It's being added and it's in the car shopping bag right up here . It's just so nice looking, so professional looks fantastic. I really, really hope you're happy. Your shop is really coming together so nicely. You should be really proud on this product is looking so good, absolutely beautiful. It's just just works flawlessly and does fluidly. It's really good. 4. Online Shop Video 4 Setting up WooCommerce, Menu, Sidebar and Finishing Your Homepage: Okay, I am back in the products on now we're gonna set up woo commerce. Now we've got our products set up. We're gonna finish doing all of this by making sure we commerce is properly set up and running well, And that means you can set up payments paper as well as card using stripe. So here, let's click on Run the set up Wizard on it's gonna take you through a few steps and it's really easy. So it's gonna ask you, where is your store based? So let's just select where the stores based on, then enter your address here. What currency You want to accept payments in what kind of products you sell on. You can choose whether you want to select a that or no and then click on. Let's go on. This next page is gonna ask you about payments or whether you want to use stripe on PayPal and yeah, we do. So I'm gonna enable keep strike enabled on. I'm gonna enable people right here, and it's gonna ask you your PayPal email address. Obviously, this is really important because this is where you're gonna get payments to as well as your stripe email, but we're gonna set stripe up in a moment, so just enter your email there for both. Just make sure it's an email you can access because I was obviously really important. You can also choose whether you want to accept offline payments such as cash on delivery or ah, check or whatever you want right there. Then click on Continue. And here you can have the option to print shipping labels at home. And, of course, you know this is entirely up to you. You can then choose what product, weight and dimensions you want to use kilos, grams, pounds and so one from there and then just click on continue and then it's asking you about automated taxes. Mail chimp on Facebook. Andi, Of course, this is entirely optional, so go ahead and shackle. Uncheck these, then click on Continue. If you want to use mail chimp on Facebook, it's going to install these plug ins for you. So do that. If you want to, then click on Continue. And here is asking if you want to connect your shop with Jet Park. Um, jetpack is just a plug in, which enhances your website a bit better on DA, but I'm not gonna go ahead with this. Have a look at it and see if you want to. But I'm just gonna skip this step because you don't really need it. Then you can sign up for product updates and so on. Andi, you're done. Now. You're already all done. There we go. So you can obviously create a product straight from the But we've done this already, so that's all good. You can also import products if you've got them in a CS file right there. But all you have to do now is visit dashboard. You're gonna have a few new notifications up here, so I'm gonna keep this area organized. I'm gonna cross this one out. I'm gonna across this one as well on. And I'm gonna keep these two up to remind me to do those you need to set up your stripe account keys so people can pay with their credit cards and all that on DA. This is the SSL certificate that we need to do to make sure that your shop is 100% secure. So we're going to do that in a moment just before we get into that. Let's set up our menu at the top. This one right here that enables people to look around your shop on bond and get your other pages. So to do that, let's go to appearance here and then menus. And then in here you've got away or your shops menus, and we've got a few that are created by default. So we've got one for her for him. Main menu and quick links. So I am gonna go into the main menu here and select that we only really need one menu, So there's gonna be a few things here that we don't need, so I'm going to just clean this up a bit. So this is how your menu looks is the structure right here. And to delete anything here you would click on, then remove. So I'm gonna do that for a few of these things. So I'm gonna just remove the ones I don't really need gonna remove that one because you can create your own page Is a War menu menu items in a moment, so I'm gonna remove accessories. Gonna remove account. I'm going to keep the about and contact us pages on That's it. I'm gonna click on here on. I'm gonna actually change the name of the label. Uh, here, I'm gonna make it say shop instead of store. So I'm gonna just type that in here just like that on. And so that's how the menu is looking at the moment on. Do you want this to be the primary menu right there? Okay. So to our new pages, your menu, all you do is selection them here. So let's say so. If I didn't have the about page here, let's remove that. If I click on the about on an ad too many, I guess I didn't just like that. So I can rearrange by clicking and dragging in, choose where or how I want it to look. Now, one thing for the shop, you're gonna have obviously different pages for your different products. Potentially So I've got surfboards and wetsuits. So if you scroll up here, Andi, click on screen options and then enable product categories right there and minimize that again. Then scroll down here and you've got product categories right here. So open that up on you can add in your different categories as the menu items, So I'm gonna add in surfboards, posters, paddles on. I'm gonna make that. Do I think surfboards, posters and puddles. Yeah, this final that's fine. So I'm gonna add too many, and then, obviously that's just gonna be added to the menu as its own menu item. But really, I want that to be part of the shop. So if someone scrolls over the shop, it's going to drop down. So you do that by clicking and dragging, putting, putting it over the shop just like that and using you see, there's a rectangle box that comes up just so that it goes to the right. Not like that, but like that, then you just dropped that in. It becomes a sub item of that shop. So that's what you do. So do that again. There we go for pedals and then paddles posters. So there there will set up perfectly. And then you can move those around as well if you want to on their radio. So that is really all you have to do for your menu. Um, and then that's linked to allow the pages that ah, that you want now you might want to have Let's say you might want to have your check out page on their or something, of course. Or the cart? Um, it's entirely up to You mean people can easily check out using this icon at the top and then clicking on check out or cart easily from there. So there's no need to clutter up the menu if you don't if you don't want to. So then all we have to do here is saved menu and that is your main menu complete. So now if we go and have a look at the website Perfect, there's our new menus. You've got the about contact us and there's your shop with the drop down going to each individual category page. So if you had lots of surfboards, I click on this is gonna take me to that page what a lot of surfboards would be. There we go and then have all my products here. This is looking just amazing. And then you've got a best sellers section. Their search bother, absolutely amazing. People can browse by categories and then filter by price. Alright, guys. So you've done your menu and now all you want to do is carry on doing the home page. We've nearly done it. So we've just done this. Featured products section on. They're not coming up. Doesn't matter. They are. They're so that's all good. Let's just scroll down and we've got this section next. So if we look on the finished website, this is what it looks like. It's absolutely beautiful. It's got parallax Fact, this is just normal tax like you've done before. You got a really, really cool little discount code right here, which I'm going to show you how to set up. Got a button background image, looking or great on. I'm gonna show you how to set up a coupon code in the moment so you can change this one right here. So let's go into home andare elemental. I'm already in it. I've got my tab open. If you haven't and you honor you on a dashboard, just go to pages and all pages, find your home and open up with elemental. So here is the next section that we want to edit. And to do that, we just click here, which edits the background image. Same as before. This is exactly the same as you've been doing really, really easy. You just go, then go to style and you click here to change image just as before. And all of all this text is the same. You just click on it and you can write in anything here, get a style. Can change typography and color. Same as before. This is just textiles. Well, you can just type in anything you want here. You can change the coupon code or the discount code that you want to set up in a moment. I'm gonna show you exactly how to do that in a minute. And you can enter the new code right here on. Do you also got a button and Samos before guys? You just click it to editor in your content, you can change the text on adding your link right there. You can align it. It's exactly the same as I've been showing and in style. Change of typography on the text color on the background, color and hover change colors for that as well right there. But to be honest, you don't need to do much. This is looking fantastic already, so you don't need to change the text or colors if you don't really want to. But of course it's there, and it's easy for you to do if you want to do it. So that's pretty much that section done. This is easy. Is that so? Let's head down to the next section, and you've got this really cool little section air with different in different little bits of info, such as worldwide shipping, best quality, best offers, secure payments, and you can change us, obviously, toe whatever you want. I collect this. You'll see this whole element here is a is an image box. It's an image box. So the top image here, this is the little icon that you see. So you just collect like before. Teoh. Change that. You could ghost your media library where you can use any imagery one or you can upload on. I would recommend obviously using an icon that is transparent and you can see their squares in the background. That means it's transparent on that will look perfect against the white background. So if you got that, that would be better to use. You can obviously edit attacks, and you can change the title and description right here, adding any links that you want, you can change how the image position is right here on in style. You've got options for the image such as spacing the width, you ah ha for animation, which, if I choose grow, that's gonna give a really little cool little animation. Rather, the best thing to do is to play around with all the settings here. You can't break anything, just play around to see how you like it. But anyway, that's that's that section done as well. Every one of them is the same. Change the image if you want to. Whatever you want title description on. If you don't want to use this section, just remove it by clicking the cross right there. And I am really happy to say that you've just finished your home page. The only thing left to do is your footer, which is down here. And you've got a lots of really cool links that you can use if you want to. And I'm gonna show you exactly how you can edit that, right? No, but look at your home page. Isn't this looking just amazing? I really hope that you're happy this is gonna change your real business. and you're just how you do how you sell your products. It's really, really beautiful. So remember to update to save everything that you've done here on just before we come out of this, I'm gonna show you how you can add in different elements if you want to. So if I just find a section so let's hear. If you click on desolate like on, you'll bring up all of these different widgets that are available for you to use. So you've got a star rating your icon boxes, image boxes like what you've got down the bottom there, you've got testimonials. Um, you got social icons, which can be really cool, and all you do is click and drag to use each one, and they are so easy to to set up and start using, just like everything on here is super simple, straightforward. So just play around like I said. So once you've updated, go back to your dashboard by opening up your other tab If you gotta open. And now we're gonna have a look at the footer. So let's go to appearance on and widgets. Hey, so in here you've got different footer sections. You've got 12 on foot. Ah, Widget area. 123 and four is was a woo commerce side bar. The wood commerce sidebar is a side by that we saw earlier. When you're looking at a product So you've got the search. You got the products by rating bestsellers, the categories Andi, the filter by price. So that can be obviously really useful. If you want to edit any of these were not going to, though. I'm going to leave it as it is. It looks great. So let's go to foot. Aerial one. So if we go to the finished website on down to the footer So we've got quick links, Andi. So we've got about cart on Contact us right now on if we go back to the widgets. So we've got a navigation menu and this is quick links. So if we open that up entitles quick links, select many. So these are the different menus that you had in your appearance here on menus. So if we all open this up in a new tab to show you so if we go into that, you've got all your different menus in here. If you remember So here is here your menus at the top. So if you're going to quick links right here and select that on Dhere, are the menu items that show up in that quick links menu going to remove that? Because it's not valid any more. Remove this woman and there we go. So you can add in anything you want here, obviously, into that menu, and it's gonna and it's gonna show up in your footer down here. Under this quick links menu, you can change and move these around. Change what they say. You don't even have to have any of this. If you don't want to, you just delete all of them. But this does look really, really good. So obviously, in this menu you would add in what you want. Then save the menu and it will update, and you'll have whatever you put in there on your footer. If we get back into the widgets area, let's go to footer area or with your area to got another navigation Men. You've got one called for her. So obviously this is like a menu for women, and that's gonna have its own menu items. So if we go back into the menus on select for her, and it's really easy. You just select each one of their navigation menus and then customize it to what you want inside that menu. So depending on what you sell, you condone change waas around here to make. Basically, it makes it easy for people to get around your shop and find all your different products. So you know you might not have women's jeans or tops, but change it to whatever you do have changes menu to tow what you do have on, then save it on. It's gonna update on this footer Onda look incredible and be really, really beneficial to your customers and us. And that's all you have to do for that. Footer your different areas here. Like I said, just update each one. Onda Mrs Easy. Is that okay? Now we're done with the menu and footer. You've completed your home page. The footer is set up on working perfectly. That's gonna update on all of your pages. So everything's coming together really, really nicely or shoppers looking incredible. All we gotta do is about page on Contact Page. If you want to do those, um you might not have a contact page. You want to have an about page. But if you do, I'm gonna show you how toe edit each of those. So the next thing I'm going to show you, though this is really important is to set up your strike account keys.