How To Create a WordPress Ecommerce Online Store Website - 2023

my father-in-law started to get into pocket watches and I told him that he should start an online store so we got his domain name thepocket watchguy.com set up a WordPress eCommerce website for him and now he sells pocket watches full time I'm going to show you how to do the same thing using Wordpress which is the most popular way in the entire world to make a website and we're going to be doing it all step by step with no steps skipped hi I'm Tyler and in order to make a website it's just four simple steps for the setup part of your website we're going to be doing things like getting your website name like yourwebsite.com and also installing WordPress which is super simple then we're going to be done with setup and next we're going to organize your website in this section we're going to be doing things like logging into your website cleaning up your website by deleting pages and posts and we're also going to update your website if it needs to be updated then we're going to be done with the organized part and we're going to design your website we're going to do things like install a theme there are hundreds of different themes that you can choose from as a starting point then we're going to design your home homepage you can literally make your home page look like any page on the internet it literally can be anything and you can change each and everything on your website we're also going to make your website mobile friendly because a lot of your traffic more than half of it is going to be coming from mobile devices like people's phones so it's super important that it works on all devices after that we're going to learn about something called blocks that's going to save you tons of time blocks allow you to import pre-made sections of your website and you can mix and match different blocks to make millions of different combinations and it really saves you hours and hours of time developing your website so you don't have to make everything from scratch after that we're going to set up a contact form so that people can easily contact you then we're going to learn another trick that's going to save you so much time we're going to learn how to import entire page templates into your website this is going to allow you to take entire pages from different templates and put them on your website this again is going to save you hours and hours and hours of time so you don't have to reinvent the wheel after that we're going to learn how to create pages on your website so that you can add any additional pages that you need then if you don't already have one we're going to learn how to create a logo and how to insert it into your website then we'll be done with the design part of your website and the next thing that we need to do is manage your website this is the part where we're going to learn how to add products to our website and how to put those products in different categories like if you have a men's category or a woman's category then I'll show you how to add a variable product what if you want a product that has different options like small or large or different colors like blue or green once we do that I'm going to go over virtual and downloadable products and affiliate products these are all different ways of selling on your website once we do that I'm going to show you how to do shipping and then we're going to set up payments on your website so you can take payments directly on your website and then finally I'm going to show you how to manage orders so once you get in your orders how can you see all the analytics for everything and how can you manage everything and how can you keep everything organized also in the description below I have a website checklist where you can keep track of all of your progress and it also links to each part of the video and this way you're never lost or confused of where your progress is I also respond to each and every comment I'm always here to help whether it's just a thank you or if you have a question and we're going to be doing it all step by step with no step skipped so let's begin so what is your website name and hosting your website name and hosting are the only thing that costs money and it's super easy to understand your website name is basically yourwebsite.com or yourbusiness.com and Google's website name is google.com and Apple's website name is apple.com so that's your website name you need something to type in order for someone to go to your website hosting is a little bit different hosting is a place that stores all of the information so if you had a website name and no hosting then we'd be able to type in your website name right here but the website would come up blank because there's no place to store all of your text images and files but if we had a website name and hosting then we would see all of our text and images and files and everything like that so it's super important to have hosting because without it your website would come up blank so this right here is basically what hosting is it's a computer that's on 24 7 that holds all of your images and all of your texts and it puts those images on your website and then those images can be displayed on your website and the text can be displayed on your website let's see a really quick example let's say someone types in the website google.com so right here they type in google.com that's where they want to go then that request gets sent to this computer this hosting computer right here and then this hosting computer that's storing all of the text and images sends all of that information back to their computer and we can see that website get transferred back so it travels from this computer all the way back to their computer right here and then we can see the Google Website so your website name costs about fifteen dollars per year and that's before discounts I'll show you how to get a discount in just a second and hosting cost about ten dollars per month again before discounts but in total with all of the discounts and everything else it costs about thirty dollars for the entire year and I think that's a really good deal to have your website spread across the entire world operating 24 7 365. and again that's the only thing that you need to pay for there are no extra costs for your website alright so let's get your website name and hosting so all we got to do is open up a browser so you open hostgator.com that's h-o-s-t-g-a-t-o-r Dot c-o-m and press enter I do get a commission for recommending HostGator so thank you so much and I've been using HostGator myself for 17 years now and I've been recommending them on YouTube for 11 years now I can't believe it's been that long I really like them because they have super great prices and they have 2 24 7 365 live chat phone and email support but there are thousands and thousands of Hosting companies and obviously I haven't tried all of them so if your hosting company is different this tutorial might be a little bit different but you should be able to follow along just fine so we can just scroll down and see everything that they have to offer and there's all these different options right here like hosting Pro Hosting Essentials domains and resources you'd think that we would want the pro hosting but in order to save the most amount of money let's just go with the hosting because you can always upgrade later we have these three different options here WordPress hosting website builder and shared hosting you'd think that you would use WordPress hosting because we're making a WordPress site but actually we can install WordPress on the shared hosting and it costs a lot less plus again we can always upgrade later once we do that we can scroll down and we see that it says 275 a month that's a super great deal but if we go up here and type in unlock unloc and press enter we can see that we got the biggest account unlocked and if we scroll down we can see that it is now 2 57 a month so we're saving a bunch of money right there we have three different plans the hatchling plan the baby plan and the business plan we don't need everything with the business plan because it's just way too much stuff so it really is between the hatchling plan and the baby plan the difference is the baby plan offers unlimited websites so you can have like your website.com your mom'swebsite.org afriendswebsite.com you can have as many domain names as you want on your single hosting package where the hatching plan you can only have one domain name so a single website like yourwebsite.com but again you can always upgrade later if you decide that you want another website you would only use the baby plan if you definitely want to launch two websites right now at the same time so under the hatchling plan we can just click buy now so now it's going to ask us to check out and register our domain name and we can either register a new domain or we can say I already own a domain so maybe you bought your domain name from godaddy.com and you already have a domain you would choose I already own this domain and you'd fill it out right here but today I'm registering a new domain so I'm just going to click register a new domain then I'm going to enter it in right here and now we can choose the ending or the extension of your domain name we can choose.com.online.site.store.website or you can choose.org if you're a non-profit the most popular is the.com so I would recommend going with that if you can unless the name that you really want is taken next it's going to ask us if we want to purchase the additional endings of the website like the dot club or the Dot site and in my opinion you don't need any of them I don't think someone's going to go and try to copy your business or anything like that I think it's a waste of money so I don't think we need to add any of those to our shopping cart next is domain privacy protection what is domain privacy protection well basically when you register a new domain name people can look up your name and address and phone number and see who this web website belongs to and sometimes it can be a little bit annoying but you'll get some spam text or spam calls telling you that they're going to rank you higher in Google or whatever BS they're trying to sell you but it also might be worth it to save 15 a year and just deal with a couple of calls so I'm gonna uncheck it in the spirit of saving the most amount of money but just know you might get a couple of spam calls or spam emails all right so we're going to choose our hosting plan and for our package type we already chose hatchling unless you have multiple domain names then you choose baby and for the billing cycle this is where a little bit of strategy comes into play because the discount only gets applied one time so if you go with one month the discount will get applied just for that month and if you go for 36 months the discount will get applied for that entire 36 months I think the best strategy for saving the most amount of money in the long run and spending the least upfront is actually the 12 month plan I think that strikes the best balance between everything thing so next it's going to ask us to create our HostGator account so I'm just going to enter in my email address confirm my email address enter in the password and put in a security pin then it wants you to enter in your billing information like first name last name phone number address country city state I'm actually in California and zip code all right then you can pay by credit card or PayPal I'm just gonna choose credit card and put in my credit card number don't worry that's not my real number and then it's going to ask us if we want additional services so first is SSL do we want SSL that makes this little lock up here on our website showing that our website is secure it's super important to have however your website already comes with SSL this is just Advanced SSL so we don't need this one we can leave this unchecked and save forty dollars a year and your website is still going to have that lock site lock Essentials do we want to secure our website for 36 dollars a year the great thing about WordPress is that we can download something called a plugin that has security features that will allow us to save all of this money which is going to allow us to uncheck this and just move on next professional email I do like the Google email Suite but your website already comes with more basic email so you don't don't need to do it this might be something that you consider in the future but I don't think that you need it you'll still have your name at yourwebsite.com as an option for email site backup do we want to spend 24 a year backing up your website and I think the answer is no because again you can download something called a plugin with WordPress and that's going to allow you to back up your website for free do we want to improve your search rankings I'm not sure what they would even do to do that and that costs 36 dollars a year but again we can download something called a plugin that will improve our search rankings for us and we can save that money next we're going to enter in the coupon code make sure it says unlock that's the best coupon code and click validate it should already be there so we're good so let's review our order we have 24 7 365 live chat email support instant account activation our money back guarantee for 30 days and our domain registration for one year we have the shared hatchling plan for 12 months or whatever you chose and it comes out to about thirty dollars sometimes it fluctuates it could be anywhere from thirty dollars to forty dollars but I think that's a super good deal to have your website spread across the entire internet next we can say I have read and agree to the terms of service and click checkout now alright so congratulations you've actually done the hardest part which is just decide that you actually want a website the next thing that we're going to do is click on install WordPress so if you see install WordPress anywhere just click on it then we can see this page right here and all we have to do is scroll down and click install now we want to keep this as it is with the https then we want to find our website name right here you'll probably only have one website name and we want to leave this blank because if we put something in there then it's going to install WordPress on your website.com forward slash something instead of just your mainwebsite.com you also want to leave this as default and for site name you can put in your website name that's probably the same thing as your business name and for site description this is what describes your website so if you were a plumber from Los Angeles you'd put Los Angeles plumber if you did marketing and SEO maybe you'd put marketing and SEO right here this is what's going to show up in the search engines so it's pretty important but don't worry about it we're going to learn how to also change this later so just put whatever you can think of right now and we'll be able to change it later then for the admin username I like to put in my name and for the password let me hide that real quick and just put in whatever password that you can remember this is going to be used to log into your website so you have to write this down or remember it somehow then what you want to do is put in your email address right here and now we can scroll down and we want to make sure the language is English even if your language isn't English and that's because this tutorial all is going to be in English and I don't want you to get confused we can always change this later we don't need any of those plugins so we're going to skip that we definitely don't need any of these themes right here so we're going to skip that then we're going to click on install now right now WordPress is installing it used to be super difficult to do this but now it's super super easy so I'm just going to speed this up a little bit but it should take between one and two minutes four to complete alright congratulations it installed successfully but has it really installed successfully we can go ahead and click on it and we can see that the website doesn't work the the website can't be reached and that's because it takes anywhere usually from one to two hours for your website to work sometimes but it's rare it can take 24 hours but usually it works within about one hour so I'm just going to exit out of there and I'm gonna take a break right now I'm going to go for a little walk and when I come back it's probably gonna work alright so I'm back from my break let's go ahead and see if it worked and we click on it and we can see that we have a website right here it doesn't look very good it looks pretty weird but it's a website and it works and some people would charge you five hundred dollars just to get here which is absolutely ridiculous this is super easy but in order to make your website actually look good we have to log into the back end of your website and to do that you go to yourwebsite.com forward slash WP Dash admin that's wp-ad-m-i-n and then we have that username and password that we just created we're going to put that in right here and we're going to click login and once we do that it's going to log us into the back end or the dashboard of our website this is where we can make all the changes on our website now that we're logged in to get back to the front end of your website where the user will see it all you have to do is click on your website name up here and that's going to transport you back to the front end of your website sometimes you have to click on this refresh button up here in order to see this black bar I didn't have to do it this time but sometimes you will and this black bar is not seen to your users it's only seen to you this is only when you're logged in so we can click back on our website name to go back into the back end of the website or the dashboard where we can make all of our changes the first thing that we want to do is we want to clean up our website because we can see that there's a big mess right here there's all of these things popping out at us the website isn't clean and that's because the hosting companies install what's called plugins onto your website basically like apps on your phone or programs on your computer that you don't really want we want to start everyone off on a blank clean slate and we don't want to be forced any marketing materials so what we're going to do is we're going to click on plugins and then we can see all of these plugins right here and what we're going to do is we're going to click on this button to select all of them and we're going to go up here and press deactivate we have to deactivate them first and apply and then we're going to go back up here and we're going to click on it again and then we're going to go to delete and apply and this is going to delete all of the unnecessary plugins on your website so we can all start off on a very clean slate and now when we go back to our dashboard we can see that our website is much much more clean all of those plugins aren't there and it looks much much better the next thing that we're going to do is we're going to change the permalinks sometimes this is already done but we want to make sure everyone is on on the same page the permalinks are how your links show up it's much easier to explain if I give you an example so all you have to do is click on your website name to go to the front end of your website and then we can click on this hello world right here and now if we go up here we can see it says yourwebsite.com and then the date and then all these numbers and then slash hello dash world but that's not how we want it to show up we just want it to be our website.com forward slash hello world or our website.com forward slash about instead of all of these numbers right here and that way your website will look much cleaner and much better so let's click on our website name to go back into the dashboard and then go to settings and click permalinks instead of day and name we want to click on post name once we do that we can scroll down and click save changes and now if we go back to the front end of our website we click on that hello world it'll say just our website.com forward slash hello world so if we have an about page it'll say our website.com forward slash about and to me that is much much better all right so let's go back into the back end of our website and the next thing that we're going to do is super important we're going to make sure your website is updated so just click on updates and we have the current version but if we didn't it would say update and we would just click on a button and our website would update the next thing that we're going to learn how to do is change our password so just go to users and click on profile and here you can change the different colors of the back end of your website it doesn't change how the front end of your website looks but it'll change the back end and if we scroll down we can press set new password if we want right here and then we can click on update profile all right let's click on our dashboard one more time and the next thing that I'm going to show you how to do is we're going to clean up our entire website by deleting all of the pages that came by default and all of the posts like the blog posts that came by default so we can check it out right here if we click on our website name that we have the sample page up here and we didn't create it so so obviously we don't want it on our website it's just a sample page and if we go back to our home page we also have this Hello World blog post right here so let's delete them by clicking on our website name to go back into the dashboard and then we can go to pages and now we can see that sample page and this privacy policy page that we didn't create so we can select both of them by clicking on this and then going to move to trash and clicking apply alright once that's done we can click on the trash and we can click on empty trash or select all of them and go up here and press delete permanently and apply alright now those are deleted from our website now we can go to post these are blog posts we can select everything and click on trash and then we can click on the trash and we can delete permanently alright now our website is clean blank and fresh we can go back to the dashboard and now we're starting off with a blank clean website so now we can check our website by clicking on on the website name and now that we're starting off blank and clean we can actually make a backup of our website so we can always get here we can always start fresh so to do that all you have to do is click on your website name and we're going to download something called a plugin and this plugin is like an app or a program that's going to allow you to add things to your website so just go down here and click on plugins then we're going to click add new and we're going to search for a plugin called All in One WP migration and search for that then we can go to the first one and we see it right here we see that it's installed five million times and has 7 000 ratings so it's pretty good we can just press install now wait for it to install and then we can press activate now it's activated and now we can see this over here where it says all in one WP migration that is added to our website and now we can click on export and then we're going to export your entire entire website by clicking on this button right here and we're going to export it out to a file once we do that it's going to prepare our export and take a little while it's packing up our entire website into one file and now we can just download it right here by just clicking on it and now we have this file right here on our computer that we can always go back to alright so I'm just going to exit out of there and press close and now we have that file right there once we want to put that file onto our website we can just click on import right here and just drag it up there I'm not going to do that right now obviously but you can just do that and once it uploads it's going to log you out then you have to log back in and in your entire website from that file will be loaded the next thing that we're going to do is learn how to change the site title and tagline we did this in the previous step but it's important to know how to do it within WordPress itself just in case you want to change it the site title on tagline is super important because it's what show shows up in the search engines to see what your site title is all you have to do is click on your website name right here and then we can hover over this tab right here and we can see that it says create a website which is your business name and learn how to make a website which is your tagline so that's what's going to show up in the search engines so if someone Googles for your website they'll see that to change it all you have to do is click on your website name and then go to settings and general and we can change the site title right here which is probably your business name And the tagline right here which is the description for your website don't change this or this because that will break your website but you can change the admin email but it should be your email address and we can scroll down and click save changes and that will change our title and tagline alright now we can click on your website name to go to the front end of your website the next thing that we want to do is super important and that's change the theme because right now your theme or your design of your website looks like this and to be honest this doesn't look great so we want to change the theme or the design of your website and we can do that by installing a new theme this theme is going to allow you to make any design that you can think of so to change the theme all you have to do is click on your website name then go down to appearance and themes and once we do that we can see that this theme is active right here but we want to change it so we want to press add new because we're adding a new theme and then we can go over here and we can search for the theme it's already in the most popular themes right here but just in case you can't find it there you can search for Astra a s t r a and we can see it it's the first one we can go to details in preview we can see that it's rated 5 000 times with 5 out of 5 stars and this theme looks super great you may not like this design but this is going to allow you to make any design that you can think of you have complete control over your website that's why this theme is the best so we could then click install up here and then press activate and that will activate our theme now that our theme is activated we can go to our website and we can check it out so just click on our website name and we can see that this theme starts us off as a blank page and that's exactly what we want we of course are going to make it much much better really soon and that brings us to our next thing which is installing our starter site what this is going to allow you to do is install hundreds and hundreds of different designs to your website as a starting point so this is super cool that they have this and this is why I like this theme because it works perfectly with starter templates so to install Starter templates we need to plug in to get a plug-in let's go into our backend by clicking on our name and then going down to plugins and clicking add new once we do that we can go over here and we can look for starter templates s-t-a-r-t-e-r-t-e-m-p-l l-a-t-e-s and press enter and we can see it right here it's been installed a million times with 3700 5 out of 5 Star reviews alright so we can just click on install now and it will install and then to activate it just click on activate and that will activate it on your website once we do that we can go over to appearance and we have this new starter templates right here so we can just click on it and now it's going to guide us through getting our starter templates we can just press build your website now and it's going to ask you to select your page builder there's one that is by far the best and that is Elementor so we're just going to click on that and now we have all of these templates at our disposal we can just click on any of them and install them the ones that say Premium cost money but the ones that don't say premium are free so we can just scroll down and check out all of these and if we want to preview one we can click on one and we can expand this to see what the website looks like this is just a starting point but we can click on any page and preview all of the different pages right here once we see something that we like or if we decide that we don't like it we can expand this and we can exit out of here if we don't like it and we can continue our search for this tutorial I made a template and I submitted it to the Astra team and it is called Earth and if we type that in here we can go to the planet Earth store right here and we can just click on it and we can preview the store right here and we can open this up right here and we can scroll down and we can see that it has testimonials it has the products on the home page we can go to the about page and any of this can be changed all of it can be changed and I'm going to show you how to change it but it's just a really simple store a simple starting point that's going to allow you to make anything that you want and we can see the shop right here where people can browse your entire shop and people can contact you right here and we can see all of that people can fill out the form and email you and we can go back home and we can expand this out and again this is just a starting point so we can just press Skip and continue and then we can change the different colors right here so we can change these and of course you can actually change any color that you want to whatever you want these are just suggestions let's keep it default for now I'll show you how to change the colors later and we can also change the font here there are like 600 Fonts that you can choose from but we're just going to keep it simple and go with the original font then you can press submit and build my website and it's going to be building your website so right now it's doing all of the complex things in the back end adding all the pictures building all those forms that people can submit putting all the e-commerce functionality on your website doing everything that would take hours and hours and hours it's doing all for us right now and it's saving us so much time so I'm just going to speed this up a little bit but it'll take a couple of minutes and congratulations we're all done with setting up our starter template now we can view our website to check it out and we can see that we have a great starting point right now we can close this tab up here and now you can look at your new website and it's much further along than starting off with a blank page so that's really cool this is our starting point where we can edit it so that you can add all of your own custom content the next thing that we're going to do is change your website theme style what is a theme style a theme style is all of your fonts and all of the colors for your entire website of course you can change these individually for each page but it's much more professional and it looks much better if you have consistent colors throughout your entire website so to change the theme style all you have to do is click on customize up here and then we can go down to Global and we can click on typography that's the same thing as your fonts now the heading font that's like the large text like up here where it says Earth we can change that by clicking on this pencil icon and scrolling down and then we can just choose any font that we like maybe we'll go with Josephine's lab and we can see that that changed right there so now all headings on the entire website like even down here has changed and we can change it again to Josephine Sands or we can keep it as the original thing which was just we can also change the font weight down here which is basically how bold the font is but we're not going to change that right now and then we can exit out of there that's how you change all of your heading fonts for the body font which is like up here on this menu or down here for this price or all of this text right here basically anything that's not a heading we can change that and we can click on it and we can change it to something kind of crazy and we can see that it changed all right there we can change it again to something else and we can see the change so that's how you change the font for your entire website I'm just going to go back to Roboto and exit out of there because that's the one that I like and I think that's really good now we can go back and now we can change all the colors on our website so we can just click on colors and we see all of these colors up here and you just have to play around with them to see which one is which so we can just click on this one number two and we can change it and we can see that that one controls this up here so that's the main headings and if we want to go back we can press reset to go back so that's color two right there the main heading and we have all of these different colors down here which changes the colors for the website so that is colors four buttons we can change what the buttons look like so we have rounded buttons by default and we can see that change right there we have this button with just the outline and you can see it change underneath where it says Earth and we have this button here but I'm just going to keep it as normal we also have the background color for the buttons so we can change this here and again you can always change this individually on every page this is just going to keep it consistent on most of your pages so that's a background color but there's also a hover color which is right here so when you hover over it it should change colors a little bit so that people know it's a button so we can change that hover color also and we can just press reset if we don't like that and we just want to go back to default alright so that's the main ways of controlling the buttons we can click on publish to save all those changes and then we can exit out of there and that is how you control the overall theme Style on your website the next thing that we're going to learn is how to design and edit your home page so it's pretty easy all we have to do is click on this edit with Elementor right here and then basically whatever we click over here on the right side we can edit on this left side right here so if we click on Earth we can edit it and put in whatever we want right here to change it and we're going to keep this HTML tag as H1 because that's the main heading for your website and for alignment we can align it left we can align it right we can align it in the center and we can do that again so we can click on anything again and we can go over here and we can change it to whatever we want we could just put in something like online store and now we can even do that again we can click on this button and we can change it however we want we can put in different text we can put in discover more and then we can put in a link so whenever someone clicks on this button it'll go to a different page we can just start typing in the page and if our website has that page name so our website does have the shop name then it will show up right here and we could just click on it and now when someone clicks on that button it will go to that page we can also change the background by clicking on these six dots up here and this will select this entire section and then we can click on style and we can click on the image and we can upload files if we want to upload our own files or we can search for a copyright free image website like pixels p-e-x-e-l-s.com another one is pixabay p-i-x-a-b-a-y Dot c-o-m and another one is unsplash u n s p l a s h Dot c-o-m and these are all copyright free images that you can use on your website for free but we can exit out of that and exit out of that and we can just search for something like Green Landscape all right we can verify that we're human and we can search for any Green Landscape we want we can use any of these images on our website let's just choose the first one and let's download it let's click on this Arrow we don't want to download This original size right here because that will make our website slow because this image is too big so we want to just go with the large size and click on it and then just download selected files once it's downloaded I'm just going to drag this to my desktop and exit out of here and I'm going to exit out of here too and then I'm just going to click hold and drag it from my desktop to this area right here it's going to upload and we can press insert media once we do that our image will show up and it's as easy as that if we scroll down a little we can see this image position right here and we can change it to Center Center or Center left I think Center Center is the best so we'll just keep it Center Center for display size we usually always want it to be cover because it's going to look really weird if it's anything else cover is the best thing because it's going to show as much of the image as possible without cutting it off but what if we want this image to be darker we can click on background overlay and we can click on a color and we can make it black right here and then we can change this opacity to really dark or really light and this might not seem that important but it is really useful especially if you want the text to pop off of an image that's a little too bright so we can make it darker and then we can click on this e-commerce right here and then go to style to change the color typography to change the font and all of these different options here let's just click on text color and click hold and drag to White and click on online store go to style again and text color and make it white now that looks much better especially with the dark background overlay because that white now pops against the background alright let's click on this button and let's go to style again to change this button style and let's change the color so background type is classic color is let's make it a yellow alright text color let's make it a little bit darker let's make that a black so we can see it and we can see that this button doesn't have a hover color so when you hover over it it doesn't change the color so we can just click on Hover and we can go to color and let's make it a yellow but a slightly different color so now when we hover over it it changes and that's what a button is supposed to do supposed to change just a little bit so that we know it's a button all right let's go back to normal and for Border type we can make it a solid Porter around the button and we can give it a color let's make it black but we can't see it yet because we need to put in a width so let's put in five or maybe one and we can see that the border is there but I don't really like that so let's get rid of that for Border radius we can change that to 50 and now our button is going to become rounded so you have ultimate control over the style of the button and to me that's looking pretty cool and it looks much different than when we started out next let's scroll down here and let's keep on going let's click on this entire section right here and let's click hold and drag it down here so this is how you move a section so that's pretty simple we can also exit a section by just clicking on this x right here and that will delete it we can also edit the individual columns right here by clicking on this column button and click hold and dragging it and we can drag it around and we can drag it here or here we can also right click the entire column and just press delete to delete it if we want to undo all of those things all we have to do is press Ctrl Z on a PC or command Z on a Mac and it remembers all of your changes and it'll undo all of the things that you just did the next thing that we're going to do is create our own section but we're not going to just start off blank with nothing in mind we're going to take inspiration from the best websites in the world and we're going to incorporate that into our own website so let's go to nike.com And we can see that they have some large images right here people like visual things obviously if they're buying something on your website we can see this headline and this sub headline and this button right here I'll show you how to do that we've already done it actually and then we have the different different categories right here so we have different categories like shoes people can shop all shoes clothing people can shop all clothing and accessories people can shop all accessories so it's super important to narrow down what people want on your website and we can scroll down here and we can actually see popular products right here so just having the most popular products on your website to begin with is super important so people can just click on them and buy as soon as possible we can also open up a new tab and go to something like adidas.com and we can see that they have these big images right here again it's very visual they have the headline the sub headline and the buttons again and if we scroll down they have different categories again like shoes and clothing and best seller and new arrivals and if we scroll down they have the actual product on their website also so everything that's basically new or popular they have on their website right here alright but we can exit out of that right here and exit out of this and now we can make our own section right here what we can do is we can just scroll down and click on this plus button if we want and now add a new section or what we can do is we can go to any previous section and add this plus button here and it's the same thing so just add a plus this is going to add a new section click plus again and now we have the option of adding how many different columns we want we want ours to be three columns so we're going to put three columns right here because we're going to be adding different categories for your website and in order to add things to this all you have to do is Click hold and drag we're going to drag an image over so just click hold and drag and let it go and now we can choose an image by clicking on it we can upload files and select files and we can select any files we want right here so we can just select it and press open and that will upload our file to our website and then we can press insert media and now we'll insert it now we have that that picture on our website we can go to style and we can change the width the max width or the height anything like that or how it hovers and let's say when we hover over it we want it to be more transparent so now when we hover over it we can see that it looks more transparent and we can change that value right here to make it even more transparent or less transparent and then we can go back to the widgets by clicking on this and we can add a button to it so we just click hold and drag a button now a button is here and we can click on the button and then we can change the text to whatever we want obviously just like we did before maybe I'll put in postcards because this is the postcards category so when you click on it you're going to be able to see all postcards and for the link let's open up a new tab and let's get that link let's go to our website and we can go to the shop area right here and we can click on postcards right here and we can just grab this link right here I'm going to show you how to make your own categories later but this is just how you grab the link for this category so we can just press copy and go over to our website and paste it in and now when you click on this button it'll link to that category again I'll show you how to make categories in just a little while we can change the way this button looks by going over to the size right here and changing the size or going to style right here and again we can change the color we've done this before but I just want to make sure that you know how to do it so we can change the color and the text color and that looks kind of cool and we can change the padding to be zero so that there's no padding around it and now we can go to content and we can add an icon to it just by clicking on it and then going over and maybe we'll do a right arrow or something and insert it and we want to insert it after because to me that looks much better and give it a little bit of space right there and now we can go back to style and go to hover and we want it to grow when we go over it so we'll just press grow right here and that's going to give us a cool little animation it's going to make it pop a little bit as we hover over it so that's kind of cool all right a really cool trick to save you a whole bunch of time is you don't want to do this over and over and over again what we can do is right click on this and press duplicate and then we can do it again and press duplicate and now we've duplicated those sections so we don't have to recreate everything and now we right click on this right here on this column and press delete and then right click and press delete on this one also and now we have three of those and all we need to do is click on it and change the images and change the text so we can just change the images upload files select files and click on the image and press open wait for it to upload and we can insert the image we can go ahead and click on the text and change the text right here so we can change this we can put posters or whatever your category that you want to link to is and then we go over here and we find that category which I'm going to show you how to do later and we can copy it right here and we can go over and click on our page and we can paste it in where it says link right here and once we paste that in now it'll link to all of our posters we can do that again click on it choose the image upload files select files choose a different image press open wait for that to upload and then press insert media and click on the text and we're going to change that we're going to just change that to shop because it's going to be all of our products that we want to shop so shop all and then we can close that tab right here our shop page is just shop if we start typing it in we can click on it and then it'll go to that shop page so that's all of our products but right now this is a little too crammed for me there's not enough space right here so let's add a little space here let's click on the entire section by clicking on these six dots in the middle right here and then let's go to Advanced and that's add 80 pixels of space to the top and 80 pixels of space to the bottom and now that has much more space and it looks much better we can also adjust the space in between these columns right here by going to layout and then columns Gap and we can make it wider and now we have a lot more space there or if we want it just to be narrow we can make it narrow or we can just keep it as default which is fine I think next we can scroll down and we can see the space right here the spacing doesn't annoy me but what it does annoy me is it just looks like it sort of Blends together and that's kind of hard on your eyes it's a subtle thing but I think it's really important so what we can do is we can click on this entire section right here and we can go to style and then we can go to background and click on the classic background and then we can go to color and we can change this right here so we just want it to be slightly slightly slightly darker so I'm just going to make it all the way black and then I'm just going to give it a transparency so a really big transfer currency by sliding this over right here and that will make it slightly darker so I think that's cool that's easier on my eyes so now I know when a section begins and when a section ends and I think it's these subtle things that really make your website much better than everyone else's all right we can open this back up and then we can go to Advanced and we can change the spacing again because it's a little bit messed up so let's change it let's do zero for the top the margin is on the outside so the margin is the outside space and then for the padding let's do 80. and the padding is the inside of the section the inside of this blue line right here so that'll add 80 pixels of space to the top and we can add 50 pixels of space to the bottom we would usually make it even but there is already space at the bottom of the button so 50 pixels of space at the bottom and now we see this little Gap right here and that's because again the margin is the space on the outside so if we want to close that Gap we want to make this zero and now there's no Little White Blank Space right there so margin is based on the outside padding a space on the inside of that section all right let's open that up and let's check out our website and I think that is looking pretty good the next thing that we can do is add a heading to our website so all we have to do is click on this elements button right here and then click hold and drag in a heading and just drop it where you want it and then we can make that heading Center and we can change this text to whatever text we want maybe we could put latest products right here and now we can click on this section right here where all of our latest products are and we see all of this crazy code right here so this is called a short code what it does is it takes your products from your shop and it puts it on your website so if you update your website with new products it'll put those products on your front page of your website automatically without you having to do extra work and we can change this code right here instead of having 3 products right here we can put six and six products will show up then we can change our columns to four if we want but that's not even there's a little Blank Space right here so we can just add two more products and put product limit equals eight so I think that looks pretty good if you want to learn more about short codes and what you can do with them you can Google woocommerce short codes and there's all this documentation on it on how to display your products differently on your home page using shortcodes if we scroll down to this section we can click the entire section and we can go to style I want to show you how to do something really cool this is definitely more of the extra credit type of work though and instead of a background image we can actually do a background gradient which is just a color from one color to the other and obviously you'd make it much better than that but we can also do a video so we can click on the color and then clear it so that there's no color over it and then we can just search for a YouTube 2 video obviously you want to check all the copyrights and everything like that and make sure you're able to use it but just for an example let's search for Drone footage free hopefully that will give us some copyright free oh here it is royalty free Drone shots alright that's cool and now we can just copy this video URL up here and press copy skip ads and we can close this down and we can paste that video link right here so maybe if you had some really cool shots of your products you can upload that video to YouTube and then you can do the same thing you can just put it in right here and I think that'll give you a really cool way to display your things that's pretty different we can also give it a background overlay so that the image pops a little bit more just make it classic and then choose the color and make it dark and then change the opacity how see-through it is basically and 0.25 is good and then we'll just click on the text and we'll go to style and we'll change the color to White so it pops a little bit and we'll click on this subtext the sub headline and we'll go to text color and make it white again and this is just like the Nike and Adidas websites where they had the headline and the sub headline and the button so let's click on the button and let's actually do something really cool that's going to save us a lot of time and let's copy this button up here by right clicking and pressing copy and then let's scroll down and right click and let's paste style so it's going to keep all the links and all of the text and everything it's going to take the way the button looked and just paste that style right here and now we have that and we've saved a whole bunch of time editing this button now we can go over here to history and this is going to show us all of the changes that we made so we could go to revisions and we can see all of the different revisions that we made for this and we can go backwards in time or forward in time and we can click on anything and we can delete all of our changes basically and just go back to the beginning if we want we can also move back forward in time if we wanted to so don't be afraid to mess around on your website because you can always go to this history Tab and play around with it and move backwards and forward in time all right once we do that we can click on update to revert all of those changes back to the beginning but that is basically how you edit your home page and now you can pretty much control any page on your website and make it look exactly how you want it just by using these few different techniques in combination the next thing that we're going to do is make your website work perfectly on any mobile phones or tablet devices right now your website is already mobile optimized but sometimes you want to change things specifically so that it's perfect so the first thing that we want to do is click on this responsive mode right here and then we can go up here and we see the desktop version the tablet version which we can click on and the mobile version of your website so it pretty much already already works perfectly but we can just click on anything let's click on this Earth and go to style and we can click on typography and now we see this little mobile icon right here that means that this is just for the mobile settings so if you don't see this icon then you can't change it just for mobile but if you do then it's specifically for the mobile version or the tablet version so we can change this from 50 to 45 and we can see that the text has changed and now we can go over to the desktop version by just clicking on it and we see that that value is 80 and we can go to the tablet version and we see that that's 60 and we can go to the mobile version and we see that that's 45. so obviously that's super important in order not to have giant text on the mobile version another thing that we can do is we see all the space maybe this is too much space on this mobile version right here so we can just click on this column right here and then we can go to Advanced and then we can see this padding right here here and we can change that maybe we want that to be 100 and we can make this 100 also and now there's a lot less padding on the top and the bottom and the spacing looks a little better we can go back to the desktop version and we can see that there's more space on the top and bottom and we can see that there's different spacing different padding above the text and below the button for the tablet version and we can go back to the mobile version another cool thing that we can do is we can click on this entire section and we can go to style and we can actually change the position of this image so if we go to position we see this little mobile icon right here that means that it's just for the mobile version and we can make it top left if we like that better or top Center and maybe that looks good so we can update that and that is just changed just for the mobile version if we go back to our desktop version we can see that the position over there is center right and this way you have ultimate control over your web site so we can close that up and go back to our website and that's how you control the mobile version of your website and you could do that on any page that you want the next thing that we're going to do is edit the about page where I'm going to show you how to do some cool effects and also give you some tips that's going to help you save hours and hours and hours of time all right so all we have to do is click on about and then we can click on edit with Elementor and the first thing that I want to show you is that you can actually just click on any text right here and you can either change it over here or we can change it right here so we can actually just type right here to change the text now that only works for text you can't do that for anything else but that's just a quick way to change your text you don't always have to go to the left side you can just change it right in the Box the next thing that I want to show you is different ways of adding space so we can click on this entire section right here and we can actually go to minimum height right here and we can just adjust this right here so instead of adding space to the top and bottom like we did before this is just a quick way to add space all right the next thing that I want to show you how to do is how to add a slideshow so we can click on style up here and we can go over to slideshow and then we can click to add images and we can upload files and select files I'm going to put all of these images in the description below so that you guys can follow along if you want so just select files and then we can highlight all the ones that we want and then we can press open then we can wait for it to upload and once we do that we can press create a new gallery and then we can press insert gallery and that's going to insert all of those images into the slideshow alright so we can see it's sliding there but we can also change a couple of things maybe we want it to slide a little bit faster so instead of five seconds we can put it at 1000 which would be one second and we can change the transition type maybe we want it to slide to the right and we can see that or maybe we want it to slide up so we can see that or maybe we want it to fade and we can see that let's change it to three seconds and the fade I kind of like that and we can also do a Ken Burns effect which is like a slow Zoom I'm sure you've seen this before and we can choose zoom in or zoom out I think that's kind of cool or we could just turn it off right there we can also do a background overlay and we've learned how to do this before but right now I think it's a little bit too bright so let's make it dark right here and let's change it so it's a little bit more see-through so 0.25 and let's click on about us and let's go to style and let's change this color right here and let's make it white alright that looks pretty good let's learn about another effect let's learn about motion effects this is going to make your website look super pro but you definitely don't want to overuse this but it's going to look super cool so let's scroll down and let's click on any column right here so we click on this column and we click Advanced and then go to motion effects and we can choose all of these different effects right here let's just choose one let's do slide into the left and that's going to make it slide into the left now we can make it a fast animation a slow animation or whatever we want and then we can click on this other column right here and let's go to Advanced and let's go to motion effects and under there we can go to slide in right and let's do a fast animation and let's delay it so let's delay it by half a second right here that way the image on the left will come in and then the text on the right will come in after all right that's pretty cool let's scroll down and let's change this background just click on the entire section and go to style and click on the image right here go to upload files and select files and let's select this image right here again available in the description below and we can open it wait for it to upload and we can click on insert media all right now we have a different image right there that's pretty cool and we can add a different effect right here where we can make the image look like it's staying still so what we can do is we can go over here and under attachment we can do fixed and now that image will stay still on the the page and as we scroll we can see more of the image and I think that looks pretty cool but what if we want to add another section we can do that by pressing this plus right here and this is a super quick tip that's going to save you so much time all we have to do is click on this folder right here and we see these different blocks that we can add a lot of them are pro though so you have to upgrade but some of them are free so you just have to search over here for the one that you want and you have to find the free one they also have different pages right here so we can insert entire pages into our own page some of them are pro again but a lot of them are free so we can just click on them and it'll insert that entire page into our website but we can exit that right here my favorite way of doing it is pressing this plus again and going to the Astra one right here so just clicking on the S and then we can insert all of these different pages right here as long as it doesn't say premium unless of course you want to upgrade and we can also click locks right here so we can just search for any block that we want over here let's go to Team and we can just click on any of these and insert them into our page so we can click on them and press import block and now it's importing and we can mix and match millions and millions of different combinations of blocks together to make your website exactly how you want and to save you so much time these are very professionally designed and I'll give you a bunch of ideas and it'll save you so much time so we can go down here and we can obviously edit anything that we want we can add colors of course and it's your website so you can change it however you want maybe we'll put in our team right here and we can see that this is rounded right here of course we can swap out the image if we want but we can go to style and for the Border radius maybe we don't want the Border radius to be round so we can just put zero here and now that border radius is going to be very sharp and a really cool thing that we can do to save a whole bunch of time is we can copy this style and then go over here and we can paste the style and now that edge is sharp and we can paste it again that edge is sharp and we can paste it again and now that edge is sharp so that's going to save you a lot of time you don't have to duplicate all those Styles we can also make this right here not rounded at the bottom so to do that all we have to do is click on the entire column again and then go to style and then go to border and we can make that border zero and now that is sharp now it has sharp edges and we can go up here and we can go to copy and then again we can just paste style paste style and paste style and now all of those edges are sharp instead of rounded so it didn't change any of the content it just changed the style of it it just copied over the style all right but what about making this entire page right here responsive we can go down here and click on the responsive mode and let's go to the phone and we can see if we scroll up a little bit we can see that all of this looks pretty good but maybe we don't want the motion effects to show up on the mobile version so we can easily change that by clicking on this column and then going to motion effects and instead of slide in left we don't want that to show up on the phone for the mobile version we'll put none and then we can go down here and we can do the same thing click on the entire column and under Advanced and motion effects we'll press none again all right that way it's not going to show up on the mobile version and it'll just show up on the desktop version let's update that and preview our changes and now we can preview this very cool slideshow right here and see all those images that's pretty cool and then if we scroll down that first image is going to come to the left and then that text is going to slide in from the right and that looks super cool we can see our team which is the block that we added and we can see this cool effect down here all right let's exit out of that and let's say that we actually decide you know what I like the original one better no worries we can always undo all those things by going over to this history down at the bottom right here scrolling all the way down and then go and click editing started and that's going to revert all of those changes back to the beginning so you never lose anything so you don't need to be afraid of breaking your website then we can click on update to update all those changes and revert back and now we can go back to our website and we learned how to do some really cool effects and how to save a whole bunch of time by using those blocks the next thing that we're going to learn is how the contact page and the contact form works so that people can get in contact with you so just like we've done before all you have to do is click on the contact page and then we can click on edit with Elementor once we do that we can just click on contact us and we can change it any way we want like we did before and then we can scroll scroll down and we can change all of this on the right side and all you have to do to change it is click on it and then we can go over here and we can change the icon or we can go down here and change the title and description or we can change the email address right here which please do I don't want to get a bunch of emails from people on your website the next thing that we can do is change the phone number by just clicking on it and then we can just click on the address and change any of that and we can also change these social media links right here so if you have any social media profiles that you want to add you can add them all right here and you can add additional ones also then we can scroll down and the next thing that I want to do is add a map to our website let's say you have a physical location or just a general location of where you are we can click on the plus button and then let's add one column because it's going to go all the way across and then we can click on this widgets up here and we can go down here and we can look for Google Maps and we can click hold and drag it in and that will drag in a map now we can change where the location is right here let's say we're in Malibu California and that will show up on the map and then we can change the zoom level so if we put it at 12 Zoom it'll zoom in even more and we can change the height right here we can make it bigger or smaller or we can just delete that and keep it as the default height we can expand this and we can see that we have a little bit of space around it right here I would like it to go all the way across so let's try to do that let's click on the entire section right here and the first thing that we want to do is go to full width instead of boxed and now we can expand it and we see that it's almost all the way across but not quite all the way there there's a little Gap right here that I don't want so let's expand that out you would think that you would go to column gaps and make it no Gap but actually that won't work so what we have to do is we have to click on this entire column right here and then go to Advanced and then under padding let's link all of them together and that will make them zero and now there's no padding around this map and it looks pretty cool to me all right let's expand that out and that's how you change the majority of this page but what about this form right here if we click on it we can't edit it like all of the other things on this page so what we want to do is just click on it and then we can edit the selected form right here and once we do that now we can edit this form and that's because this form is a plug-in that we installed so it's not a part of Elementor or Astra it's an additional plug-in that this starter template pre-installed for you but anyways to edit it it's super simple all we have to do is click on anything right here and then we can edit it on the left side just like Elementor so we can change the name and the full name and everything like that with this contact number we can rearrange it by just click holding and dragging it up right here or or we can drag it back down let's say we don't want it at all we can just press this delete button right here and press ok now that's going to delete it from our website we can also add Fields up here so we can just click on that and we can click in a multiple choice or we can click hold and drag it in it's the same thing and we can delete the extra one of those and press OK and to edit it we just click on it and we can change all of the labels and everything maybe we want to ask people how they heard about us so we can type that in right here and maybe the First Choice could be something like Google the second choice can be something like social media and the third choice can be something like a friend alright we can add more choices right here if we want or delete them and I think this will give us a good idea of how people are finding our website and be very useful for us to know where our efforts are paying off all right we can also go to settings right here and under settings in general we can change the name of the form and this is only for you so only you will see this but we can just change it right here to contact form we can also change the name of the submit button so when people press it does it say send now or does it say submit we can change that right there after the person who's contacting you clicks on submit it'll say sending when it's sending so I think that's fine we can click on down to notifications and the send to email right here is who is it going to send to so it's going to send to you it's going to send to your admin email so whatever admin email you have on WordPress that's where it's going to send it to you can always put your email right here or anyone's email right here and it'll send to that email so you could just put your email at gmail.com right here but right now it's going to send to the email that you signed up with on WordPress the email subject line this is what's going to be sent to you when someone fills out out this form so we'll just remove simple right here from it and just say contact form from name that's who it's from that's what it's going to say I think that's fine right there it's going to say it's from our website and from email now it's going to give us all this text and throw a fit because the from email is tylermore gmail.com but my website is learn how to create a website.com so what it's saying is that the from email Isn't from this website so what we need to do is just make the from email admin at yourwebsite.com so whatever your website is up here you would put just admin at yourwebsite.com because that's saying that this email is getting sent from your website alright now it's going to say reply to who do we reply to well we're going to reply to field ID equals one what does that mean that means when someone's filling out our form they put in their email address and it's going to reply to that email address so that field ID equals one is whoever's filling out your form it's their email address so just leave that as is and then the email message all Fields it means all the fields that you have it's going to email so like their name their message and how did you hear from us it's going to take all those fields and it's going to email you all right let's press save and let's give you an example and let's exit out of there and let's update that we can see that the new form has been updated and let's preview those changes right there let's exit out of there and we can just remove all of this we don't need it and if we scroll down we can see our new form right here we have our first name we can put in right there it doesn't have the contact number because we deleted that we can put in an email right here I'll just put in hellowittiler.com and we can put in any message that we want hi there hopefully people will be asking about your product or services and how did you hear about us let's say we heard about you from Google and press submit now it's going to say sending because we changed that and it's going to say thanks for contacting us all right so let's open up a new tab and let's see what that looks like in our email so let's go to gmail.com or whatever your email is and we see that plant Earth store right there that's the title of our email we see that new entry contact form and we see all of the fields and we see that it's from admin at our website.com all right we see our first name our email and the message and how'd you hear about us we see all of the fields and when we click on reply it's going to reply to whoever filled out the form their email address and that makes sense because we want to start chatting with whoever is trying to buy our products or ask about our services so we can just start chatting with them right here and press send and build a conversation all right let's exit out of there and let's scroll back up now we know how the contact form Works how to change all the contact details and how to create the form so that people can get in contact with you the next thing that we're going to do is learn how to add a page to your website and also how to duplicate your already existing pages to new pages so first let's add a new page to our website and we're going to add it right here so let's make a deals page right where this menu is to do that all we have to do is click on our website name up here and then we can go to pages and we can click on add new once we do that we can give our page a title again you can make any page that you want it doesn't have to be deals obviously and then we can click on publish to publish that page once we do that we can click on edit with Elementor to edit that page and now we can edit it just like normal we can press this plus button and we can drag in some headings or whatever we want we can also use these blocks right here by pressing on this s or a cool thing that we can do is we can open up a new tab and go to our website and let's go to the about page right here and we can edit with Elementor and and we can save these individual sections right here if we right click up here and we can go to save as template if we scroll down we can also save this template or this as a template or we can go down here and press this button and press save as template and this is going to save the entire page as the template so we can just click that and then type in about because it's the about page template and press save and now that we have that we can exit out of here and we can actually exit out of here too and now what we can do is we can click on this little folder icon and go to my templates and then now we have this about page as a template and we can insert this we don't need to apply the settings right now so just don't apply and that's going to import the entire page keeping your website consistent and saving you so much time we can of course change it however we want we can just change this text right here we can do something like latest deals and we can scroll scroll down here and maybe we want to X this out right here we don't want this section let's add a new section and let me show you a different way of importing a page let's open up a new tab and let's go to our website and then click on edit with Elementor for our home page and we can scroll down and we see this woocommerce short code that we did before we can actually go up here and right click and press copy and then we can just go to our other page and right click and press paste so that's a much quicker way of getting different sections on your website if we want we can also scroll down and right click and copy all content so that I'll copy the entire page and we can paste all that content alright but let's just exit out of there and leave the site right now and let's change these settings because it's supposed to be the latest deals so let's change this woocommerce shortcode and I'll show you how to get more information on short codes in just a second but for now let's change it let's do instead of three products let's change this to six products so it displays six products and that looks pretty good but we definitely only want ones that are on sale because it's the deals page so we can go up here and we can type on underscore sale equals true in quotes now that's only going to show the items that are on sale so we can scroll up and we see that it's all on sale we can also do it from a specific category if we type in category equals and then whatever category you have let's say we just want to show posters and only the posters will show up it's not going to show six because we only have three posters or we can say postcards right here and it'll only show the postcards all right but let's get rid of that because we only want the ones that are just on sale and not from a specific category alright that's looking pretty good if you want to learn more about woocommerce short codes you can just type in woocommerce product short codes into Google should be the the first one and then I'll have a whole bunch of examples and other things of woocommerce short codes alright so our website is looking pretty good let's check it out that looks pretty good let's press update to update all of that and let's preview our changes right here by clicking on the I and we see that our website looks really really great except for one thing you see how this is not transparent all the other pages are transparent where we can see the image behind the menu but right now it's just white so how do we get this to be a transparent menu let's go back to our editing with Elementor for the deals page and let's just go back once and that will take us back to where we created the page and we can go over here and press this little a button right here and then we can go down and we see where it says advanced settings where it says transparent header right here we can just click enable and then return to post and update and we can exit out of there and now when we click on refresh instead of being white it will be be transparent and we'll see that image behind the menu alright so our latest deals page is done but let's go to the home page and we have a little problem and that's because we see the home about shop in contact but where is the deals page no one can get to it so we have to add the deals page to the menu so how do we do that we can click on our website name right here to go back to the dashboard and then if we scroll down a little we can go to appearance and menus so now we see that this is a primary menu and we see home about shop and contact let's open up a new tab and let's go to our website and we can see the home about shop in contact so that menu corresponds with this menu right here in order to add the deals page let's view all of our pages and let's click on deals and let's add to menu alright once it's added we can click hold and drag this around to reorder it so now it'll be home about deals top contact we can press save menu and we can go back to our website and we can refresh it and once we do that we're going to see home about deals shop and contact and now anyone can click on this deals right here and they will be taken to your latest deals page or whatever page that you want to create we can also do something else that's pretty cool we can make it a sub menu if we go down here and we can just drag it around and then we can indent it under another menu so this is going to become a sub menu of the about page so we can save that and now when we go back up here we can click on refresh or just click on our Earth store to go to the home page and now we see this about and we see that the sub menu is the deals page so this would be useful if you had a whole bunch of menu items and they didn't all fit you could put them in different categories or if you had like a men's line and a woman's line you can separate those within the menu right here all right but maybe we don't like that at all so let's go back and let's go over here and press this down arrow and let's remove this page all together and we can save that menu so that's how you would remove pages from the menu and now if we go back to our website and click on refresh we can see that that is gone from the menu alright so we can exit out of there and that's how you create Pages that's how you duplicate in copy pages and that's how you add it to the menu the next thing that we're going to learn how to do is how to create your logo right here and how to insert it into your website so maybe instead of this text we want a logo or you want different text I can show you that too so the first thing that we're going to do is click on customize and we can click on this edit right here or we can go down here and go to header Builder and site title and logo and we see this logo right here we could just remove it and now we don't see it anymore and we can go down here and you can change the site title right here to whatever you want and for site title visibility we're going to say we want to see it on the desktop on the tablet and on the mobile phone and for this we just want to make sure that this is off so we can check it on right now and we can check it off just make sure it's off and we can scroll up and we can go to design right now you should be able to see the create a website title right now but it's white so we want to change the color so all we have to do is go to title color right here and just make it black or whatever color that we want and we can choose any of these colors but I'm just going to make it black and for the hover color we don't want to be transparent so when you hover over your mouse so we're going to change that and we can change that to Black also for the title font size we can change this we can make it smaller or bigger right now and let's say that we want it to be 30 so let's just put it at 30 and that looks pretty good but what if instead of text here we want our actual logo how do we put in our logo so if we go back right here and we go to site title and Logo we can select a logo right here by just clicking on it but first maybe we need to create a logo so all we have to do to create a logo is open up a new tab and go to logomaker.com that's l-o-g-o-m-a-k-r Dot c-o-m and just click on start my design and we can exit out of there then we're going to create a new design and now we can start building our logo so I'm just going to search for a graphic like Earth and just scroll down and try to find any Earth icon that I like so sometimes this takes me a while but just choose anything and click on it and we can click hold and drag it anywhere that we want and we can resize it by just clicking and holding the corners right here and we can move it and we can add some text over here by clicking on this T and just typing anything that we want this would probably be your business name I'm just going to put in Earth store or and then just click hold and drag this around right here align it to the center right there about and I'm just going to change the color so we can just make that black and we can also change the font so let's go with simple and modern and we can click on anything that we want maybe we like this Josephine Sans which I think is on the website already so let's just click on that one and we can resize it and and make it perfect and move it and get it exactly where we want it to be then we can click on the icon and we see this code right here you can always copy this code this is the code for black but if you have your own exact color that you've used before you can type that in right here this is called a hex color alright so we can put that color in and we have that exact green color right there and maybe we can resize it a little bit and drag it so it's perfect because I'm crazy and then we can go up here and we can press save once we do that we can download the low resolution files right here and now just download to your desktop or a trick that you can do is you can click hold and drag to get the higher resolution just click hold and drag it to your desktop but we definitely want to support logo maker so if you want the huge file size that can be blown up on a billboard then we can press download your files and pay for it alright so let's exit out of there so now we have that on our desktop and what we can do is we can go back to our web site and we can select this logo right here and we can upload those files and we can select files and we can select that image right there that we had on our desktop and we can press open that's going to upload it to our website and we can select it and we're going to skip cropping because it's already cropped and now we're going to see that logo in there and we can upload a different logo for a retina display and that's like a really high quality screen display so let's just upload the same file for the retina displays this will make it so it looks good on like iPads and MacBook Pros and things like that alright so we can choose that image right there and now it's going to look good on both screens we need to get rid of this create a website right here so we can go back down to site title visibility and just make sure all of these are marked off and that's going to make them go away for the logo width we can make it bigger or smaller so that it's perfect on your website and we can also change the logo with just for the desktop or for the tablet or for the mobile by just clicking on this icon right here alright the next thing that we want to change is we see this little icon right here it says W that's the WordPress icon but we don't want that on our website because our website is whatever we're selling not WordPress you see how logo maker up here has their icon and this is so it's super easy to identify in the tabs so to change this all we have to do is upload our icon but we need to create our icon first so let's go back to logo maker and let's click on this and we can delete it and then let's click and make this bigger right here we could put it in the center right there and we can press save again and we can just click hold and drag this icon to our desktop and of course click on download your files to support logo maker and you can buy all of these designs and everything and get the SVG format which is your logo files based on math so that your logo can be blown up the size of a billboard or a building or Earth and it still won't lose inequality so do support them we appreciate their free tools but we can exit out of there and exit out of there and now let's upload our site icon and select site icon and upload files and select files and just click on our icon right here and press open we wanted to save just the logo because the site icon needs to be in a square so once we click select it's going to want to be in a square that's why we want our icon to fit within that so we can just press crop and it'll crop and now we can see the site icon up here instead of that W and now people can identify our website if there's a whole bunch of tabs open and it just looks way more professional so we can click on publish and exit out of there and now we have our logo and site icon and our website is looking super good the next thing that we're going to do is customize the header the header is everything up here at the top of the website like the logo in the menu right here and also this icon right here and this right here so how do we edit all of that we can go to customize and the first thing that we're going to do is edit the menu so that's like the color of the menu and the font so we can go to header Builder and we can just click on anything that we want if we click on site title and Logo that'll let us edit right here if we click on primary menu that will edit this primary menu right here if we click on cart that'll edit the cart right here and if we click on account that'll edit this account icon right here alright but this up here this is the transparent header right here so we have to edit the transparent header and not the default header it'll make more sense in a second but we can just click on transparent header right here and then click click on design now this will change our menu color right here so we can just click on anything and change the menu color to whatever color matches our business and we can drag that around and change it to whatever we want we can also change the hover color so we can change that to whatever we want so when we hovering over different menu items it will show up also whatever page is active it's going to be that color so if we're on the home page it'll show up as that color we can reset it right here if we don't like that and the sub menu color that would be edited right here also so that is for the transparent header but if we click on this primary menu right here this will edit both the transparent header and the regular header and we want to do this because for the transparent header we want to individually adjust the colors but both for the transparent and non-transparent headers we can click on design right here and we can scroll down and we can change the font so this will change the font for both of the transparent header and the non-transparent header and I'll show you what the non-transparent header looks like in just a second so we can click on this pencil icon right here and we can change the font to whatever we want right here and this is going to change for both transparent and non-transparent and we can increase or decrease the font size and we can change the capitalizations right here and we can exit out of there now we can scroll up and that was again for the primary menu let's see what that looks like so we can go to shop right here and this is the non-transparent header because it has a white background and the image doesn't go through it so all of these settings right here are going to be what's going to affect this non-transparent header so we can change the menu color right here if we want and we can change this icon up here we can scroll down and let's add something to the cart and let's learn how to change this icon up here so we have this one right here because one thing is added to the cart so we can just click on this cart icon and we can edit it right here so we can change this icon right here we can click any of these and it'll change we can either display cart count or not display it so if we click on this it'll not show that one right right up here and we can have the cart click action what happens when you click on it does it slide in let me demonstrate that right here what that looks like so if we go to our website and we hover over this cart right here and click on it we can see that it slides in so it's going to show us everything in our cart and if we go back here and we press drop down then we can go over here and we can see that it will just drop down when we hover over it so that's a different style or we can just have it go to the cart page so when we click on it it goes to the cart page all right I'm going to keep it as drop down and then I'm going to go to design and we can design this little cart icon right here so we can have a background fill or an outline we can change the Border width of it and create a border width and we can change the radius of that also so maybe we want it to be round or we can just reset all of those because I kind of like it without it we can change the icon size maybe we want to be bigger or smaller we also have this cart tray right here which is this and we can change all these settings so maybe we can change the background color of this cart tray and we can see that that looks terrible but we did change the color so let's reset that and we can change the separator color and the link color of the cart tray and if we scroll down we can see the cart button which is this right here so we can change this cart button by doing that and then the checkout button we can change that color too and for all of the spacing so how much padding and how much margin is on the button and we can scroll up and we can see this little icon up here this is the account icon so if you're logged in or if one of your users is logged in for your website it'll show their image or just an icon if it doesn't have their image so we can click on account and we can see this icon right here we can click on it and it'll show us just a little account icon we can just do text that says my account and we can change that here and we can change the url right here or just keep it as default I kind of like the Avatar if it has their image then it'll put it in there that's kind of cool we can also add things anywhere we want so we can add things up here or we can add things over here and let's say we want to search right here so we can just click on the search and that will add it to our header it looks squished because my screen is small for recording but it'll look normal on your website but we can drag it over here or just exit out of it to delete it and you can delete any of these things up here we can also change the height of this right here by clicking on this gear right here and we can change the height so we can just make it bigger or smaller and make it whatever height that we want we can type in a number or we can just reset it we can also change the different heights for the tablet and we can see that right here and of course we can change the height for the mobile we can't really see that right here because again my screen is small so let me hide this control and hide this and now we can see it much better and we can see the height right there we can see that this logo on on this header for mobile looks a little bit small so let me try to edit it and make it a little bit bigger so we can edit it we can see that the logo width is just for mobile right there we can slide it and make it a little bit bigger we can enter in a number right here if we want maybe 120 is right and we can also change this toggle button design right here so we can show this Builder right here and click on the toggle button and then we can hide this control and hide this Builder right here and then show this just because I'm on a small screen and we can change what this looks like right here by just clicking on any of these buttons we can make it an outline we can make it a minimal one I'll just keep it as this one and then go to design and we can change the color of it and everything like that we can choose one of these colors right here or just reset it and we can change this icon color right here also if we want we can change this icon size the Border radius which will make it rounded or the font size if we add text there we can also change the margin spacing which is what I want to do I want to change the margin spacing because that logo still looks a little bit small so I'm going to put 0 in here and that will give us a little bit more space on the right side and we can edit this again and we can make the width a little bit bigger that is looking good at 140. all right we can click on this edit and I don't believe that there's another way to get more space out of it even if we put like a 1000 here or negative numbers or 50 here I don't think there's any way to get any more space out of that so we could even try to unlink this and just put a huge number here there's no way to affect any more space which is fine I think it has enough space so we're just going to leave it as that and we're going to click on publish to publish that and that is how you edit everything in your header from your logo your menu your cart icon and your account icon and we can go back to the website and we can refresh that and we can see that it has changed we now have that drop down right here and our website is looking pretty good if we scroll down what we can do is also edit this footer down here so the header and the footer are edited in the same way so we can edit everything from this menu to this earth store and this copyright down here so we can click on this tab and go back and go back again and then instead of header Builder we click on footer Builder and we have this footer menu right here that we can click on and we can click hold and drag and rearrange it and that will rearrange it on the bottom we can grab this widget and drag it up here or we can put this over here and put this back down here so you can just rearrange anything by click holding and dragging we can click on this copyright which is right here now it says copyright C current year in Brackets and then it says site title so that's going to replace it with the actual current year and the actual site title and we can put site by Tyler or whatever you want so that's how you change that and we can click on this widget right here and we can edit this by just clicking on it and going up here and pressing remove image so we can remove that image let's scroll back down and we can add a new widget right here maybe we want an image here and go to the media library and we can click on our fave icon and we can select and that is way too big so we need to make that smaller so just click on it click on these three dots right here show more settings and we can scroll down in the width we want it to be much smaller so we can do something like 60 by 60 and that looks much better and we can go back and we need to make this Center because it's not Center so we can click on a line and a line Center and that will align it to the center and make it look much better all right we can click on this link icon and we can just put forward slash that's going to link it to our home page which is what we want and we can apply that and now when we click on this it's going to go to our home page and that's pretty cool to edit this menu right here all you have to do is click on this footer menu right here we can change everything in there like the colors and everything else just like we learned before then we can click on publish to save all those changes and let's refresh this right here and now we see that icon right there let's exit out of that and that is how you change the footer alright so we learned how to change the header and the footer the next thing that we're going to do is edit the shop page so the way your shop looks we're going to edit that page not the actual products but the actual page on the shop to see the page all you have to do is click on shop right here and if we scroll down we can see what the shop looks like so how do we change what this looks like how do we change everything on this page right here all we have to do is click on customize right here and later of course I'm going to show you how to change the actual products on this page but this is just the way the products display the first thing that we can edit is the sidebar right here so this sidebar layout is this right here we can keep it as default which is the left sidebar or you can click no sidebar and that will remove the sidebar you'd want the sidebar on there if you had like a whole bunch of products that you need to filter down you wouldn't want a sidebar on there if you only had like one or two products and we can check that out that looks pretty good we can also do a right sidebar or a left sidebar which is the same as the default sidebar so that's how you change the sidebar the next thing that we want to do is maybe change the shop layout right here so right now we can see the shop layout which is all this right here it's on design two but if we change it to design one it's going to be a little bit different the thing that's different is right now it says the sale right here and it doesn't have this icon right here that adds it to the cart so I think I like design two better but that's really up to you and we can see design two has that sale and it has this add to cart right here the next thing that we're going to do is we're going to change the shop column so how many columns does the shop have right now the shop has three columns so we can change that to something like two and we can see the change now there'll only be two columns right there we can also change this to four so we can have four columns right there and we can see all of that we can also change the different columns for the tablet View and for the mobile view so maybe we want to show two columns on the tablet view because the screen's a little bit smaller and maybe for the mobile view we want to show only one column at a time instead of two because maybe two is a little bit too cramped or maybe we like to I don't know let's go back to our desktop view right here and let's reset that to three because I like three and the next thing that we're going to do is we're going to decide how many products per page we want right now we have 12 products per page and we only have 12 products so it's going to show on just one page but if we change that to something like six products or something like that then our page will be split into two pages if we scroll down right here we can see that it is one of two if we click on two it'll show the rest of our products but I think that I like 12 so I'll just keep it at 12 products per page so that's just really up to you next we can show and hide different things if we scroll scroll down right here so we can show and hide this category right here so we're in their postcards category and I'll show you how to make categories later we can also show and hide this title or this price we can also show ratings if we want if we want to allow people to rate it we can also click hold and drag anything to any other place so now the ratings will be shown up on top we can also enable short description and enable add to cart so we can see those things the description looks way too long I think and the add to cart is sometimes cool to have but I'm just going to disable it right now let's also hide the ratings right here alright so that looks pretty cool all right let's scroll up all the way to the top and all the way to the top right here what about the sidebar these actual things within the sidebar how do we edit these things to do that we want to go back and we want to go back again and then we want to go to sidebar right here and the first thing that we want to do is change the sidebar width so if it's actually a perfect width right now but maybe we want it to be bigger or smaller we can change it right here and then to change the actual things within the sidebar we can go back and we can go to widgets right here and then click on woocommerce sidebar and we can add things right here or remove things right here and all we have to do is click on this edit right here and then we can edit it if we scroll down and scroll down right here we can add something to the sidebar by clicking on this plus and then go to browse all and maybe if we scroll down we want to add something like on sale products so three columns is way too much so we want to click on these three dots and go to show more settings and we can change those columns to one column by just clicking on this right here and that looks a lot better and we can change the amount of rows maybe we only want to show two and we can also go down here and click what is visible and what is not visible so we can click on this image right here and it'll either show or how hide the image and we can order it by and have a whole bunch of different settings right here all right once we're done with that we can publish that and then we can exit out of here to view our website and now we can scroll down and we can click on any product right here and the next thing that we're going to do is we're going to edit this product page not the actual product but the way the pages are displayed so all of your product pages are going to be displayed in the same way how do we make them look really good to do that we can click on customize up here and once we do that we can have a sidebar layout so if we wanted a sidebar on this page also we can put it on this page as well and then it's going to say single product structure this is everything over here and here we can see that it goes category title ratings price so we can click hold and drag around anything that we want and it will rearrange on the right side we can hide anything and it will hide and we can show anything and it'll show and again just click and hold and drag anything that we want we can also hide the meta right here so that will go away or show it and we can show or hide the payments right here the payments are showing the user the different payments that you take and we can click on this drop down and we can change anything right here we can change what it says we can change the type of payments that are here we can enable or disable any payments that we want and we can also go grayscale so if we want to just use the colors of the theme then we can click on grayscale and that will display in that way we can also enable breadcrumbs or disable them that's this little navigation up here so we can just click off of it to make it go away or click on it to show it again this is useful for people if they want to go back to postcards real quick they can click that or if they want to go home real quick they can click that do we want to enable shipping text sometimes it's nice if you have free shipping to say we have free shipping or maybe if the shipping is really expensive you can put it right there you can change the text right here or we can hide it next the sticky heart menu this is pretty cool if we scroll down a little bit we can see this menu right here and it makes adding to the cart super easy we can also place it at the bottom right here or at the top we can disable it and then it won't show or we can enable it again to make it show so I think this is pretty cool I like it alright next we can scroll up and scroll up on that and press publish to publish all of our changes the next thing that we're going to do is we're going to see how to edit this image and make it show up differently so we can go back and we've done product catalog and now we're going to do product images so this is the way our images are showing up on the shop page and I don't know if you can see it but these images are a little bit blurry so we can actually just put in 600 right here and make them much more clear and crisp and this is one by one cropping we can make it custom cropping so it will be four units wide by three units high we can also change that right here to two to three so that will be a longer image and basically you want to crop it to what your image looks like if it's really long you'd want a longer cropping if it's really wide then maybe you'd want like 16 by nine or something so we can see some of these images look better cropped in a different way I think I'm going to keep one by one cropping so that's going to be a square and we can go back the next thing that we're going to do is edit the cart so we can click on cart right here and let's go to the cart so let's go up here and press view cart and this is our cart it says proceed to checkout if you wanted to change that you can click on this edit right here and change it right here but I'm just going to keep it as is after that we can go back and we can go to checkout to change the checkout so this is the page that people are going to put their credit card information in and we can show or hide different fields right here so maybe we don't want this company name or maybe you want it to be required maybe you don't need to gather their phone number and we can highlight the required Fields if we want we can also Point them to our privacy policy page and you can generate that online just Google it privacy policy page template the terms and conditions page again we can just Google that terms and condition template and here's our privacy policy text right here so you can change that or just keep it as is and that is how you edit the cart we can go back and we can click on store notice this gives your entire website a notice at the top of it so we can enable the store notice maybe you're having a sale or maybe your website's down for maintenance or maybe you're working on it you can click on the store notice and it'll show at the top of every single page you can also change the colors of the store notice right here and we can change those to whatever we want we can change the text right here we can have it hang over the top which looks like this this so as you scroll it'll just stay there we can also press dismiss to dismiss this notice or your users could press dismiss to dismiss it and we can disable the store notice so that is how you enable or disable the store notice and we can click on publish to publish that and exit out of there and that's pretty much how you edit what your website looks like and how to display the products and what your cart looks like and how to put on a store notice the next thing that we're going to learn how to do is how to add categories to your website and how to add a simple product to your website you want to add categories to your website only if you have different types of products for example if you're selling shirts maybe you'd have a men's category in a women's category if you're selling jewelry maybe you'll have rings and necklaces categories are super useful for narrowing down what the user really wants to do on your website so maybe they only want to see necklaces or they only want to see men's shirts to add a category is super simple people let's first click on shop right here and if we scroll down we see all of the different results right here but we also have categories so we can only see postcards if we click on it or only see posters if we click on it and I'll show you how to put that in the menu later so it's easy for your users to click on any category that they want but for now let's create a new category so let's click on our website name and let's scroll down and go to product and categories all right right here we could name a new category so let's just name it flyers and click add new category and now we have a new Flyers category if we want to delete a category all we have to do is click on this delete right here but I'm not going to delete it so I'm just going to cancel that and once we've added a category now it's time to learn how to add a product to our website this might be the part that you've been waiting for so let's just click on add new Under products and we're going to add a new flyer so we just created the flyer category now we're adding a new product called flyer and we can put in a product description right here and we can put in a product short description here the difference between the product description and the product short description is basically where they show up the product short description is going to show up right next to our image and that's going to be the first thing that the user sees it'll make more sense in just a second so let's add the product description first I'm just going to paste in something right here you could put in anything here I like to put bullet points and things like that so it's super easy for the user to just browse through it really quick not a lot of people read huge chunks of paragraph text then product short description I'm just going to copy over some text again and paste it right here this is just a few sentences about the description basically that I'm going to paste in right and now we can scroll up and go to regular price and just put in whatever price it costs and we can also put in a sales price if we want so just put in whatever sales price that you think is good or most of the time you probably wouldn't be having a sale so you don't need to put in anything right here but to show you what it looks like I'm just going to put in a sales price you can also schedule the sale so if we click on this we can say this sale is from this date to this date so whatever date that we want to choose we can put in right there and we need to add a product image so we're just going to set this product image right here and all these files are available to download so we can upload files and select files and we can go into simple product and we can select our flyer featured image we can upload that and set product image the product image is the main image that's going to be shown like on the front of the website but we can also add a product Gallery so if we scroll down a little bit we can go to product gallery and we can add a product gallery and this is going to be when you click on the actual page it's going to show these images it'll make more sense in just a second so we can upload files and select files and again we can just select image is but this time you can select multiple images so we could just click hold and drag and select them and press open we can wait for those to upload and we can add to Gallery alright we can click hold and drag and rearrange any of these and it'll be the order in which they appear here we can also exit out of any of these right here and now we want to add this to a product category so we created the Flyers category and that's why it's showing up right here it wouldn't have shown up if we didn't create it so we just want to click on Flyers we can also add product tags product tags are like many categories they're way more specific and they make it easier for your customers to search and find what they're looking for on your website for example if you're selling a white shirt for men you could use tags like white shirt men and you probably wouldn't create a whole category just for white but you could just enter in a bunch of tags that describe it and by using these tags the customer can quickly find all the products that match their search criteria it'll make make more sense in a second when I show you where the tags actually show up alright so we're just going to put in flyer but maybe we could have put in green or travel once we're done with that we can click on publish and it will publish this whole new product with all of its description images tags and categories and now we can go up here and we can click on view product to view our new product so let's just right click and open in a new tab and we can click on that and now we can see our new product so we can see everything we can see the title of the product flyer version one obviously you name it something better we can see the category up here that it's in so if your user clicked on that then they would see all of the Flyers on your website or all of that specific category we see the price and the sales price we see the short description right here so this is where the short description shows up and we can add it to cart right here and we see the category and the tag so the category is flyers and the tag is flyer it if we had multiple tags right here it would show up also where it says tag and your users could click that maybe they only want to see travel tags so if we had a travel tag right here they would click that then they would only see products that were related to travel we can scroll down and we can see the long description right here so this is like the more detailed description maybe this one is more technical a little bit and the other one is maybe more salesy all right we also see the image that we uploaded this is the main featured image and this is what's going to show on the front of your website or anytime they click on a specific category it's not going to show all the images it's just going to show one image and then down here is the image gallery so your users can click through the images and check out the different images of the product we can also click up here and we can go through the images like this and exit out of there if we want so that's how you create a simple product on your website next let's learn about upsells and in Cross sales and customer notes let's click to go back to our product and if we scroll down we have a whole bunch of options right here so this is the general options but we also have inventory options if you have a SKU basically a product number to keep track of all of your products you can put that in right here if you manage your stock like you only have 20 of something you can manage your stock in quantity levels so when it gets sold it will go down by one you can allow back orders which is if it's out of stock then you can still allow people to buy it it's just going to be delayed shipping obviously if you don't have it and you can have a low stock threshold so it's going to let you know when there's only five left so you can reorder it or rebuild it so that's managing stock levels I don't really want to do that right now we can also click on shipping and put in the weight of the product the length the width the height this is really good for UPS or FedEx or whoever is the delivering the package and that's because there are different shipping plugins that automate this automatically they'll calculate how much the shipping is based on the weight and the dimensions you could also have link products upsells and cross sales let me show you what that looks like right here the upsells will show up on the actual product page so let's search for a product let's say poster version 6 and let's press update all right and let's go back to our website right here and let's click on refresh to refresh it and now when we scroll down we can see that there's a different product right here so this is like what Amazon does when you click on a product it says you might also like these products so this is a good idea if you have similar products then they can add these to the cart also or maybe this is the thing that they actually wanted to search for alright so that's an upsell let's see what a cross-sell is if we scroll back down right here we can go to link products again and go to cross sales and for this one let's do postcard and let's do version one and then scroll back up and press update and let's go back to our product right here let's click on our cart and empty it out right here just so we have nothing in the cart and let's add to cart right here once we add to cart let's view our cart and now if we scroll down we're going to see postcard version one so this is a cross sale so basically on the cart page it's going to show you additional things that you want to buy so the upsell shows on the product page and the cross sale shows on the cart page all right let's go back up and exit out of there there's one more thing that I want to show you from here and that is a customer note and we can click on Advanced and this purchase note right here is a note to the customer so it's going to email them a note so maybe you have something that the customer is buying that needs instructions or something so you can put a link to the instructions here and then when they buy it it'll email those instructions to the customer along with the receipt after they've bought the product we can also enable or disable reviews right here I'm just going to leave it enabled and that is how you add a simple product to your website the next thing that we're going to do is create a variable product a variable product is like if you're selling a T-shirt and had different sizes or different colors or if you had a ring that had different sizes each size might cost a different price so even though the variable product is just one product it's not a whole bunch of products on your website you can choose from different options so how do we create a variable product the first thing that we need to do is make attributes for the variable product attributes are things like size or color so let's create those attributes by clicking on attributes under products we're going to create one attribute called color and then we're going to add attribute next we can press configure items to configure it basically to add different colors to the color attributes we can add add green and add new color and then we'll add blue and add a new color of course you can add as many colors as you want I'm just going to do two and now we have green and blue we can click on attributes again to give another attribute so we have color right here and we have blue and green but what if we want a different attribute like size so let's add attribute and let's add some to size by clicking on configure terms and for the first size let's do large and add new size and for the second one let's do small of course you can add as many as you want I just want to keep it simple all right once we're done with attributes we can click on attributes again over here and we see that we have size large and small and we also have color blue and green alright let's click on all products and instead of adding a completely new product let's duplicate this product so we can click add new right here or we can go to duplicate just to duplicate this one so we don't have to redo everything and let's rename this to flyer version two and let's edit this link right here this is the link where the product lives on your website so let's just do flyer Dash V2 and press OK all right let's keep this description the same because it's fine but obviously you can change it let's change this product image so we can tell the difference let's remove this product image and let's set a product image and let's upload a new file again this is available to download in the description below let's select files and press blue flyer and open that let it upload and press set product image all right once we do that we have this blue flyer here we can remove all of these right here and under product categories it's under Flyers that's great and product tag is flyer that's perfect we can keep the short description as the same that's fine but for product data instead of simple product which is what it is currently we want it to be variable product so this is going to allow variations to your product like size and color once we do that we can click on attributes and we can choose the different attributes right here like color or size and press add so I'm going to add color and one of the colors is blue and one of the colors is green so I'm just going to add blue and green options right here because you can get a blue or green poster next I'm going to add size because you can not only get blue or green but you can also get large or small so I'm just going to put those values in here or you can just select all values and I'll put in large and small that's all the values we have for the attribute all right so we can add attributes over here by clicking on attribute or we can go over here and press add and we can add a new one right here so let's say for example we want paper type and we can add attributes here and separate them with uh type character so maybe we can say matte and then use the pipe character which is not often used but I think it's on the right side of your keyboard and then we can put in gloss and you would separate every attribute with the pipe character alright so you can also add it that way but I'm not going to do that so I'm just going to press remove and remove that next we want to click on Save attributes to save those and once we have all of our attributes we have different things that we want for that product like color and size next we need to create variations of it so click on variations and we're going to make this really easy we're going to put create variations from all attributes this will make more sense in just a second but we can press go and press OK and four variations were added alright so what does this mean press OK and we see that it went through every color and every size in every combination so it went blue large Blue small green large and green small so it added every variation if we had small medium and large then it would have an extra one I would have blue medium and green medium or if we had more colors it would go through every combination of everything all right once we do that we have to edit each variation so each variation can have a different image so for the blue large I'm going to just select this one right here and obviously you can have like a larger poster here if you wanted and the blue large price let's just put that the price for the blue large is 50. all right we click on edit again and edit here and the blue small I'm just going to click on the same blue one but obviously you can have a smaller looking poster and I'm going to set variation image and I'm going to go down and make the price thirty dollars and press edit then I'm going to edit again and click on it upload files and select files this is for the green one and I'm going to press open wait for that to upload and set variation image image all right so that's the green large price for that I'm going to put it as 50 again same as the blue large and for the green small we're going to upload that same image right there and set variation image and put the price as 30 same as the blue small click on edit now we have all of our variations and the images associated with them we can click save changes all right now default form values what does this mean this means that when someone goes and visits this product is there a default value do you want them by default to select the blue large flyer if you set this to something the add to cart button will be enabled but if you don't set it then it's going to make your customer choose a color and a size before that add to cart is enabled I'll show you that in a second all right we can click on publish to publish those changes and now let's go up here and let's view our product by right clicking and press open link in new tab and we can select it and now we see that we have a flyer version two and the price is 30 to 50 dollars because the smallest 30 and the largest 50. we also have options to choose a color but as you can see the attic heart is not enabled yet it would have been if we chose blue large as the default selection or green small but we didn't so we're making the customer choose so let's go with green and size small and we see that that image changes so that's pretty cool and we see the price is thirty dollars now and we can add to cart so this is the green small image right here we can choose green large and it's fifty dollars that image would have changed if we had a different image and we can make this blue large and the image will change and it'll be fifty dollars and the blue small is thirty dollars all right so this is looking pretty good but the problem is it's a little bit slow like choosing the drop down and everything luckily for us there's a plugin that allows it to be much quicker and allows us to choose our variations in a much more visual way like wouldn't it be cool if we can see the different colors and just click on a color or see all the size options without clicking on the drop down let's go and find a plugin that can help us do that so let's go back to our website and let's scroll down a little bit and let's click on plugins once we do that we can click on add new because we're adding a new plugin then we can go over here and we can search for something let's search for variation swatches once we do that we can see over here that this one has 300 000 active installations 5 out of 5 Stars updated two weeks ago probably a pretty good plugin so let's click on install now to install it to our website this is the beauty of Wordpress we can add so many different plugins for so many different things and then let's click on activate to activate it once we do that we can go to products and attributes and right now we can see the color type is Select so we can change that down here we can do color image instead of pressing configure terms let's click on edit right here so we're going to edit our color we're going to see that the type is Select but we want the type to be color for color and we're going to press update so this plugin added this new functionality we didn't have this before all right let's go back to attributes and now our type is color so we can configure terms and now when we click on edit for this blue we have this new thing where we can select the color so let's just select color let's go down let's just click on this default blue then we can press update and now we can go back to color attribute and we can go to the green and we can press edit so now we're editing this green color and let's just click on this green and maybe let's make it a little bit darker I want a little bit darker green and press update all right now we have the blue and green colors that's pretty cool so let's go back to our website on that product and let's click on refresh now we have this blue and green color which is way easier to select in my opinion you don't need to click on the drop down so we have blue green right here and large and small so let's click green and small and it changes just like it does in the form or blue and small and it's much much faster and it looks much better in my opinion we can go back and we can go to get woo plugins and Swatch settings this is where you edit all the settings for the swatches and we can do shape style now we can do square shape or rounded shape rounded shape is going to be a perfect circle so that large and small should just be L and S instead of typing out large and small I'll show you that in a second enable tool tip on each product attribute a tool tip is when you hover over it it'll write out the entire attribute I'll show you that in a second press save changes and we can go up here and we can refresh the page and now when we hover over it we can see that tool tip that says blue and the tool tip that says green and it's rounded but for the size obviously you'd only put L and S instead of typing out all of large and all of small so that would be a change that we would need to make but I think I'm going to go back and I think I'm going to make it the square shaped I think I like that one better and press save changes all right let's go back to our website one more time click on refresh and we see that it is now Square again alright so that is how you create a variable product and that's how you make it look way better on your website so it's easier for your customer to use the next thing that we're going to learn about is virtual downloadable and affiliate products we're going to do virtual products first and virtual products are products that don't need to be shipped and that don't need to be downloaded for example if you're a mental health coach or a therapist you could charge your clients a thousand dollars for a package of eight sessions so you don't need to ship anything thing in that case and you don't need to download anything in that case but you're still providing a service to them so that's what a virtual product is to create a virtual product let's just close this right here and let's go down and let's go to products let's go to flyer version one and let's just duplicate it to save some time and we can call this flyer version three let's edit the link right here so it says flyer 3 and press OK we're just going to keep this all the same but obviously you can change it and we're going to keep it as simple product but we're just going to check off virtual right here so that is how you'd make a virtual product and it's super great if you're selling something like a service but maybe we also want our product to be downloadable so we can check off downloadable here and now when your user buys something they're going to be able to download a file also so maybe if you're a fitness trainer and you have meal plans you can have them download it right here so to add a file we could just go to add file right here and now we can choose a file and upload files and select files and we can choose whatever file that we want let's say it's this one right here wait for that to upload and once that's done uploading we can click insert file URL next we just need to give it a file name I'm just going to put in flyer PDF but you could put in workout plan or whatever it is and then do we want to give it a download limit I'm just going to say unlimited and do we want it to expire so maybe they only have this download for one week before it expires I'm just going to keep it as never next we can click on inventory and we can say that this is sold individually because why would they need two of these files so we can limit purchase to one item per order but I'm not going to mark that off because they should know not to add two but just in case if you want to we can click back on General and we can remove this right here the next thing that we're going to learn how to do is how to add an affiliate product to your website an affiliate product is a product that you don't own but that you can get a commission for for example anytime you see someone on social media trying to sell you a supplement or a VPN or anything that they don't own they're probably an affiliate of that company and they probably get a commission for each sale that goes through their link we can do the same thing on our website so maybe we want all of the best gardening supplies on our website and we review it on our website and if anyone clicks on our link we'll get a commission for it so of course we have to set up an agreement with the company but a lot of companies have an easy way to do this you can just go to the bottom of their website and you can click to become an affiliate and it's super easy one of the easiest affiliate programs is the Amazon affiliate program where you get up to 10 of the sale so for example you can have a whole bunch of gardening products on your website that Amazon sells and you review them people read the review and they like it or they don't like it and they click on the link that will give you a commission from Amazon all right so how do we set this up we are not going to be doing virtual or downloadable so we can uncheck that we can cancel out that we can just do a regular price instead of a sales price so that people know what the price is and instead of simple product we can go to external slash affiliate product all right and where it says product URL that would be the link to your product so when you sign up as an affiliate they give you a special link that will track it to your account so the best thing is just to go to amazon.com for example and if you scrolled all the way down on Amazon there be a place to sign up as an affiliate and they would give you a special link to that product and you'd put that link on your website this isn't a full affiliate video tutorial I just wanted to show you what is possible and this video we'll definitely get you started as being an affiliate so let's just copy this link let's pretend like this was our custom affiliate link and we can paste it in right here and now this link if we signed up as an offer affiliate would be tracked by Amazon we could change the button text right here to whatever we want maybe we can change it to buy on Amazon because a lot of people obviously trust Amazon and regular price is fine we can click on publish and that will publish that and now we have our first affiliate product on our website let's go ahead and view this product open link in new tab and we see this buy on Amazon right here and we can click on it and if this was like gardening supplies or something it would go to whatever link that you put in there so right now this would just go to amazon.com because that's what we put in but obviously yours would go to a specific product all right so that's the very beginnings and the basic steps of how to sell affiliate products on your website let's go back and the next thing that we're going to do is learn how to create categories in the menu so that people can access them easily if you go to a store like nike.com in the menu you can see men's women's and kids sections so they make it really easy for people to narrow down exactly what they want on their website so how do we get those categories on our actual website it's pretty easy and we sort of have done it before but we just need to add one extra step so let's check out the shop page right here and on the left side we can see the different categories Flyers postcards and posters but really if a user comes to your website they're looking for something specific so they don't want to click on shop and then have to go over here and click on something we need to make it as quick as possible for them so we can go up here and I want these categories to show up right under shop I could put them in the main menu which is what a lot of people do but I don't have enough room unless I took out like home and about and contact and moved that to the footer so I'm just going to put it under shop for now but just know that a lot of people put it in the main menu all right we can go and click on our website name and go to the dashboard and then we can go down and we can go to appearance and menus and there's one extra step that we need to make and we need to go to the screen options up here and we need to click on product categories and that will make our product category show up down here so we can go down here and click on it and now we have postcards posters and flyers and we can add that to our menu now we can click hold and drag and put it anywhere we want we can put it in the main menu or we can make it a sub menu under shop let's just make it a sub menu and let's click on Save menu now it's going to be much easier for your users to find things in the different categories all right we can go up here and go back to our website and click on visit store and that'll take us to our shop page and now we can go here and we can see all of the different categories right in the menu and this will show up on the home page this will show up everywhere and that makes it much easier for your users to drill down exactly what they want the next thing that we're going to do is change the woocommerce settings so this includes like your store location what your currency is the taxes shipping and payments so let's do our store location first all we have to do is hover over our website name and go to the dashboard and then go down to woocommerce and select settings once we do that you can put your store address right here like your city your country your zip all of that and then we can put in our selling locations so where do we sell to so maybe we sell to all countries or just some countries maybe you only sell in the United States or you only sell in India and then we have shipping locations so where do we ship to maybe you only ship to United States or you only ship to Canada and right here we have enabled taxes do we want to enable taxes so it will calculate taxes for us let's just check this we don't have to we can obviously include taxes in our price but let's just check that and then do we want to enable coupons or not so you can give away coupons as a promotion and then what is our currency options so do we want to do the dollar or the Ruby or whatever currency is in your country and we can save those changes the next thing that we can do is we can click on products for our product settings and now we can choose our shop page so we can go to pages and we can add new and you can add a new page and you can name it whatever you want so maybe you want to name a page called store and then that will be your main shop page so here we can select that we can select which page is our main shop page and that's going to be the page that shows all of our products I'm just going to keep it as shop and we have a whole bunch of settings right here the weight is important if you plan on shipping things so where I live we use pounds because we're crazy and we also use inches because we're crazy all right and we can enable reviews or disable reviews here we can make sure reviews can only be left by verified owners basically people who bought the product and we can save those changes the next thing that we can do is look at the tax settings so we can say prices are entered with tax or without it we can add additional tax classes which I'll show you in just a second that's up here so we have the standard rate the reduce rate and the zero rate let's just go to standard rate tax and we can insert a new one right here so let's put in that we're in the United States or wherever you are and you can get your current country code by clicking on this so we can see all the different country codes here and then you can put it in right here and state code I'm going to put in California because that's where I am but we can just delete that and just keep it as us obviously you would make it more specific but I'm just going to keep it super simple you can put in your zip your city and the rate so I'm just going to pay put in the rate as 10 percent tax right here and then is this calculated before shipping or after shipping so we can check this right here let's have it not tax the shipping and we can click on Save changes all right so now we have our tax let's go to shipping and see the shipping settings right here for shipping we need to add a new shipping zone so let's click on ADD shipping Zone and we need to give it a Zone name so let's just say that this is USA and Zone regions we can just put in any specific state that we want or any specific region or we can just go with all of the United States and let's just go with all the United States to make it easy and now we can add a shipping method so we have some different options flat rate free shipping or local pickup let's just do flat rate for right now and add shipping Method All right so how much are we going to charge on our shipping let's edit this right here and is it taxable or not let's say it's not taxable and how much does it cost cost let's say it costs ten dollars but what if someone orders multiple products like they get a whole bunch of products does it still cost ten dollars and probably not it probably costs extra to ship multiple things so we can hover over this right here and we can see that we can multiply it by the quantity also so if they have five things in their bag we can say ten dollars times and then a bracket and quantity qty and then end bracket that's going to multiply ten dollars by how many things are in the cart so if there's three things in the cart it would be thirty dollars for shipping all right then we can click on Save changes and now we have a shipping method so that when people come to your website they can choose how it's shipped to you obviously you can make it free shipping and just include that in the price but that's how you set up shipping the next thing that we're going to learn how to do is how to take payments directly on our website so the first thing that we need to do is click on payments and we can see the different payment options right here here we have woocommerce payments direct bank transfer check payments and cash on delivery we can enable or disable any of these but there is a much better way to take payments and in my opinion that is stripe stripe makes it super easy to take payments directly on your website and in my opinion it's much better than things like PayPal alright so to install the stripe plug-in all we have to do is go over here and click on plugins and then we click on add new once we do that we can search for stripe s-t-r-i-p-e and press enter and we can see it here woocommerce stripe payment Gateway and we can install this right now you can see it doesn't have the best star ratings and that's because they advertise their own link payment but I'm going to show you how to disable that but we can see that this is installed 900 000 times all right we can just click on activate to activate that and now that it's activated we can go back so let's go to woocommerce and let's go to settings and if we go to payments right here and we scroll down we can see all of these new things right here we just want to make sure that stripe is enabled right here so just make sure that this right here is enabled and then after that we can click on manage once we do that we can create or connect an account which is what you would do if you needed to create a new account I already have an account so I'm going to enter account keys and this is what you would press after you've created your account so creating an account is easy I'm not going to show that it's just choosing your username and all of that so just create it there I'm just going to click on enter account keys but first let's go to stripe.com s-t-r-i-p-e.com all right let's click on dashboard but obviously you would sign up for stripe and log in just like this and now once we're logged in we can click on enter account Keys all right we need our live and test keys but first we want to test our shopping cart to make sure that it works so let's put in our test Keys first and let's go back to stripe and we want to make sure test mode is on so we always want to test our shopping cart first because we want to make sure the payments are getting through and to make sure that all the emails are being sent and everything like that all right then we click on developers and we can click on API keys I know this is like a whole bunch of tech mumbo jumbo but just follow along with me here it's super easy all we have to do is click and copy this and then go back to our website and paste it in up here at the top and then go back to stripe and reveal this key I'm just going to blur my secret key because you're not supposed to share it with anyone it is a secret after all and we can go back here and we can paste this in again I'm going to blur it because it's a secret all right once we have that now next it's going to tell us to add the following web hook endpoint now that's a bunch of tech mumbo jumbo but basically what that's going to do is help the website and stripe communicate with each other it'll make more sense in a second but for now let's just copy this and we can go back to the dashboard right here and click on web Hooks and scroll down and add an endpoint and we can paste this URL right here so just paste what you copied and now stripe in your website can talk to each other I'm just going to say this is Earth store test payments as the description but you can put in anything that you want and it's going to ask us to select events to listen to I know this is getting deep in the tech but we're going to click on charge and just select all events so basically what this does is that when someone goes to your website and pays stripe is going to get that information and then it's going to send all of this information back to your website like if the charge failed or it expired or it got capped insured or if it's pending all that information needs to go back to your website so that you know if the credit card actually went through or not all right but you don't need to know all of that I just wanted to explain it we can click on add events and now stripe in your website are talking to each other alright so we just click on ADD and now it's waiting for the events all right I'm gonna copy the signing secret key it's blurred out but it's a whole bunch of letters and numbers and I'm going to paste this web hook secret all right and again it's blurred out but yours will be a bunch of numbers and letters save test keys to save all of that now stripe in your website are communicating with each other so if we scroll down it says that we're in test mode right here the payments are enabled the payouts are enabled that's like your bank account and the web hooks are enabled so we have the ability to take payments we have the ability once you've signed up with stripe to add that to your bank account and we have the ability with web hooks for stripe in your website to communicate together about the payments alright let's scroll up and let's exit out of here let's not take Stripes little green check marks as our final test let's actually do a test on our website so let's go to our website and let's just click on visit store and open the link up in a new tab and let's go down and scroll down a little bit more and let's go to this poster and it has this pay with link right here remember why I said it had the terrible reviews not terrible but three out of five that's because of this right here people are very annoyed it's super easy to get rid of though I'll show you that in the next step but let's just press add to cart for now and now we can view our cart alright so we have two things in our cart one that we added before one that we added just now and again it says pay with link which is an advertisement and it's annoying but let's proceed to check out we'll get rid of that in a second all right and again we see this pay with link you can see why people would be really annoyed with this and Mark this as one star now I'm getting annoyed with it so let me show you how to get rid of it let's go to woocommerce settings and go to payment methods right here Express checkouts and let's uncheck this this is going to get rid of it we're gonna click on Save changes and we'll go to our checkout let's refresh this and say bye bye all right that went away thank God it went away from all of those other places too so now we don't have to look at that and now we have a five-star plug-in all right right here it says that we're in test mode and this is the old style of gathering people's credit card numbers they have a new style that just looks a little bit better so let's enable that let's go over here again and let's go to settings and let's scroll down and down and let's mark off enabled payments via saved cards I don't know if you saw that but that was below and for our bank statement what do we want to say so when we receive a credit or when someone charges their card what does it say on their credit card statement and we can say it says Earth store so that people are reminded of what they bought let's go to advanced settings right here and let's scroll down and let's enable the new checkout experience I like this right here so let's save changes and let's wait for that to save and let's go to our checkout and if we see right now the save payment information to my account for future purchases maybe we don't want that or maybe we do I don't know but we disabled it so that's going to disappear also so let's just click on refresh and now if we wait a second we're gonna see this much updated and to me it looks a lot better it doesn't look as old and it just looks a little bit more modern so I like that better alright let's scroll up and let's make a test purchase so we're going to purchase this not with our real credit card but with a test credit card I'll show you that in a second but let's just enter in our first name last name select which country you are in I'm in the United States and the street address of wherever you're living and the City of course the state I'm in California the ZIP code a phone number and some email address let's just go with hello tyler.com obviously you need to put in an email address that you have access to we could ship it to a different address but we don't need to do that so the top is billing information and the bottom is shipping information but it'll be the same if you don't click on ship to a different address we can put in our order note let's say I'm the customer and I have something to tell you right here all right and it tells us the credit card number that we can use right here so let's just copy this right here and let's paste this as our credit card number and let's put in an expiration you need to put in an expiration that is later than today so I'm just going to put in 2025 and the CVC you could just make that up I'm just going to put in one two three all right and now we're going to place our order and just press no thanks and now it's communicating with Stripe Right now making sure that this test order is going through and now this is what the customer is going to see when they place an order so it's going to say thank you for your order it's been received stripe got all that information and now we can see that we got a flyer a poster the subtotal shipping of course you could have done free shipping but we set that up and it's twenty dollars we set up taxes which was ten percent and it tells us our payment method and our total and the note so this is what your customer would see when they purchase something from your website alright and we have the billing address and the shipping address which are the same so now the store owner knows where to ship it to and we can scroll up and now let's see what the customer gets as an email and what the website administrator what you get as an email notifying you that there has been a purchase on your website so if we go to gmail.com or whatever email service provider you have we can see two new emails a new order which is what you as the website administrator get and your order has been received that's what the user on your website will get that's what the customer is going to receive I'm receiving both of the emails here because I am both the website owner and the customer but you'll only receive one of these as the website owner you'll only receive the top email the New Order alright so let's click on it this is what the customer is gonna get so it says thank you for your order and and you can go on woocommerce and you can customize all of these colors and everything like that and it tells them their name and the breakdown of everything and where it's billed to and where it's shipped to and everything like that so that's really cool that they get an email automatically and this is what you as the website owner are gonna get it's going to tell you that a new order has been completed it's going to tell you your order number and all the information and where it ships to and everything like that so there are ways to manage orders better which we're going to get to but it's super nice to be alerted through email that a new order has been received so you don't have to check your website five times a day all right let's exit out of that and scroll up and that is how you test to make sure your payments work on your website the next thing that we're going to do is make it so that you can take real payments on your website so to do this the first thing that we want to do is disable enable test mode so just check that off and then we want to click edit account keys and instead of test let's make sure it's clicked on live and then we can open up a new tab and go back to stripe.com then go to the dashboard and once we're in the dashboard we want to make sure that the test mode is off so just like that then we can click on developers then we can click on API Keys just like before and we want to copy our publishable key go back to our website and paste it in right here and then go back to stripe and we want to copy in the secret key so we can just copy that right here and then go back to our website and paste in this secret key and I'm blurring this because it's a secret all right now we need to scroll down for our website to communicate with stripe we need to make sure that this is copied right here so we can just copy this right here and we can go back to stripe and let's click on web Hooks and let's scroll down and let's add an endpoint so we can add this endpoint and we just want to paste it in right here this is going to allow your website to communicate with stripe and we can add a description right here we'll just say Earth store payment once we do that we want to select events to send and we're going to select charge so now stripe in our website are going to be able to communicate all charge events so we can select all and add events once we do that we can add endpoint and now that's working and now we need the web hook signing secret so we can reveal it again I'm blurring this out so we just need to copy that and paste that right here and then we can test the connection to make sure everything's working and connection is successful so we have put in our web hook and live Keys successfully now we can save the live keys and I know this is a bunch of tech mumbo jumbo but just bear with me it'll work now we can scroll down and we can click on Save changes all right and we have the Account Details here everything is enabled and working and our website can now take live payments so now someone can actually go to your store and buy something all right so let's close out stripe we're all done with that and just a note one stripe gets the payment you'd have the connect a bank account or maybe they could write you a check or something but you have to enable a way also to get that payment from stripe to your bank account and that can happen automatically of course all right so we're all done with setting up the payments I just want to make a quick note right now that in order to take payments your website has to be secure it has to have this lock up here HostGator automatically comes with security and so do nearly all hosting companies but if for some reason you don't have this lock up here then you need to tell your hosting company that they need to install SSL Security on your website you can literally just say that even if you don't know what it means but what SSL does is it encrypts people's information like their credit card information so when they fill it out on your website and it gets sent to the stripe website if it's intercepted between the customer's computer your website and stripe it'll all be encrypted so that people can't see the credit card information so anyways that's what this lock does and you need it on your website but it should already be installed on your website the next thing that we're going to do is manage orders so you got orders on your website and you got emailed which is cool but how do you manage orders in a more organized way we can easily do this by clicking on orders under woocommerce and then we see our different orders right here we can click on this I to preview it and we can preview this order right here this is the quicker way of doing it and you can see all the billing information the shipping details and everything like that once you do that you can press completed to complete that order or we can exit out of here if we haven't completed it yet we can click on our order right here for a more detailed View and we can see all the information right here what they ordered how much it cost where to ship to and here we can provide a status so is it completed did we refund it did it fail should we cancel this order everything like that so we can just say we've completed this order which means we've shipped it out and press update now that order is completed so that's basically how you manage orders and how you keep everything organized the next thing that we're going to do is learn how to make coupons this is super useful to motivate people to buy from you on places like social media or emails so under marketing we can click on coupons and then we can click on add Coupon once we do that we can give it a name so we're gonna name it right here this is the same name that people would enter to enter in the coupon I'm just going to put in Earth 20 right here for 20 off then we have the discount type is it a fixed number is it a discount on a product or is it a percentage I'm just going to click on percentage and put in 20 so it's a 20 discount we can also add things like free shipping or at an expiration date let's add an expiration date right here then we can go over to usage restriction we can make it so they have to spend a minimum or maximum amount if it's for individual use only or to exclude some items or maybe we only want it for certain products or maybe we want to exclude certain products or for certain categories or to exclude categories so we have a whole bunch of options right there there's also usage limits so how many times can the coupon be used maybe only 50 times and can a user only use it one time or can they keep on coming to your shop and keep on using it alright then we're going to click on publish and publish our coupon let's test our coupon out and see if it works let's go to our website and click on visit store and let's scroll down right here and just click on any poster or any product that you want and let's click on add to cart once we do that we can view our cart and it says coupon code code right here so let's go over here and enter in that coupon code let's enter in Earth 20 right here and apply a coupon now we can see that the coupon code has applied successfully and if we scroll down we can see that the coupon Earth 20 has been applied and that's 20 off right there and now we know that our coupon works so that's pretty cool that's how you add a coupon to your website and now you can advertise that coupon code to motivate people to buy from your store the next and final thing that we're going to do is see how we can view reports on our website so that you can make better and better decisions about what products to stock in your store so all we have to do is go to the back end of our website and then we can click on analytics and right now we're on the overview and we can see all of the overview of our sales our net sales our orders products sold and different variations sold if we have any we can also change the date range right here so I'm maybe we want it to be the first to the eighth we can also click on this preset and select something like month to date and we can also compare it to the previous period so how are we doing compared to the month before and we can see all those Trends right here we didn't have any sales the month before so it's not going to really show up here but if we did we can see it right here and we can see how we're doing we can also see how many orders that we have and compare that to last month also and if we go over here and click on products under analytics now we can get data about our products so what products have sold so we have items sold is two so two different items and we have the different products right here so this is super important because we need to know what is selling and what is not selling in our store so that we can stock up more on what's selling and maybe even double down on the things that are selling we can click on orders right here to see the different orders so we have one order in it's really important to see the average order value because maybe over time we can increase this by offering things like cross posts or upsells that we learned before and finally we can click on categories so what categories are selling and this is also super important because maybe you have a jewelry shop and you're selling a lot of necklaces or maybe you have a lot of clothing stores and you're selling mostly men's shirts so this could really help you figure out which categories are selling most on your store to help you optimize and to help you get more sales so obviously all this data is super important and that's the basics of how you can read reports on your website alright let's go back to our website and congratulations we have learned so much and you should be super proud that you finished this video now you have the knowledge to create manage and take payments on your eCommerce website and I think this website is looking really really nice and a super great starting point there is one last step that is completely optional and that is logging out of your website so that you can view your website exactly like your visitors view it so to do that all we have to do is hover over right here and click on log out once we do that we can go back to our website by clicking on this and we are done with the video I put so much love into this video I hope you loved it too please remember to comment rate and subscribe I'm Tyler Moore thank you so much

Channel: Tyler Moore

Views: 101,361

Keywords:

Id: Ot31LNNXc6Y

Length: 161min 12sec (9672 seconds)

Published: Mon Jul 10 2023