How To Make a WordPress Online Store - 2022

by the end of this video you're gonna know how to make this ecommerce website step by step with no steps skipped and as we can see it's absolutely beautiful i took inspiration from nike all birds lululemon and apple not this garbage what is this this makes me absolutely want to throw up don't ever make a website look like this and don't ever make a website look like this this is just crap to be honest we want to make something look great like this instead of garbage like this let's take a look at nike in nike we see this logo up here the menu and this cart icon and apple logo up here menu and cart icon our website logo up here menu cart icon on this website we have logo over here if that's even a logo menu right here and where's the cart icon i don't know it doesn't even exist and don't even get me started on these colors just wow and i hope that they're selling weed down here because it looks like they must have been high when they made this all right and i'm just messing around i don't think this is that bad but take a look at ours and i think it's so much better so what do you think i take this design over any of the other designs any day of the week for my own store we've worked over 300 hours on creating this design and making this tutorial for you i'm super proud and i think you'd be proud too if you have this as your store and your customers went to your website and it looked like this and i can't wait to show you exactly how you can make this design step by step with no steps skipped but obviously you can make any design that you want after you learn all the things that i'm going to show you in this video so what are we going to learn the first thing that we're going to learn is how to get your website up and online then we're going to put in this huge hero image right here and we do that because on the websites like all birds and nike we see this huge hero image and we see these call to action buttons and that's the same thing on our website we see this huge hero image and this call to action button then we can see on the other websites that they have their different products on their stores and the different categories on their store so we can go to our website and we can see the different categories here and the different featured products here so we're gonna make your website just like these other amazing websites and then for our header we're gonna learn how to put in our logo our menu and our cart icon so we're also gonna learn how to make this about page right here so on this page we're gonna learn how to put in this beautiful image right here we're also gonna learn how to make it transparent so it's see-through for our menu then we're going to scroll down and we're going to learn how to make this section right here where these words swoop in and then we're going to learn how to easily make all of these sections and import them directly into our website and we can obviously change anything that we want any of this text any of this images we can rearrange and change super easily in the visual builder the next thing that we're going to do is we're going to learn how to create this contact page and again we have this beautiful hero image and if we scroll down it says let's get in touch and your user can enter in their name their email address and message and this will get sent directly to your email once it does that you can begin and start a conversation with them or they can look at all of your contact info of course any of this can be changed any of this can be deleted any of this can be rearranged down here we have an interactive google map that we can zoom in and include or not include if we want on our website really cool we also have this footer at the bottom of the website this shows up on each and every page with the menu your logo and your copyright then if we scroll up we can see how the store works so we can click on store up here we have different categories of our store so we have plants cactus succulents if you had a t-shirt store for example you can have men's and women's categories we can also just click on store up here to go to the main store and we can see all of our products right here and of course this can be changed and rearranged however you want it and you can put things on sale you can display the ratings and you can obviously add products to your store delete products to your store control it however you want your user can also scroll down and click on a product and here is where it displays a product so we can zoom in on the product and look at it we have this beautiful photo gallery right here that slides we can have a whole bunch of pictures right here if we want to and let's say we want to buy this plant so we can add it to cart and your user can see it up here and we can view our cart and we can see the product right here and we can check out so all they have to do is enter in all of their information right here then enter in their credit card information and press place order then that money will get sent directly to you and you'll get an email letting you know that they've created an order so it's super super important that your website works on all tablet and mobile devices which it's going to and this is because over 50 or more of your visitors are going to be coming from their mobile devices like their phones so we made sure that this website is gonna work great everywhere and you're gonna learn how to make your website look great on any device from your mobile phone to a huge flat screen tv and you're also gonna learn how to do the same for your website i'm also gonna show you how to manage all of your products in order so that you're in control of your website so let's learn how to do all of this step by step so basically we're gonna learn four things the first thing that we're gonna do is we're gonna get your website name your website name is like yourwebsite.com so facebook's website name is facebook.com google's website name is google.com and my website name is tyler.com you need something for someone to type in order to go to your website the next thing that we're going to do is we're going to get hosting hosting is a computer that's on 24 hours a day that holds all of your website information so like all of your text and all of your images if you had only a website name but no hosting your website would come up blank the third thing that we're gonna do is we're gonna install wordpress wordpress is a content management system which is just a fancy way of saying it helps you manage all of your website content so you don't have to know any html or css or any confusing coding it does all of that for you in a visual way wordpress is by far the most popular way in the entire world to make a website it's used by people like cnn forbes jay-z and katy perry the fourth thing that we're gonna do is we're gonna create your ecommerce website so instead of paying thousands and thousands of dollars to have a developer create your site you're gonna do it all yourself using this tutorial it's gonna be super easy and super fun so only parts one and two cost any money so getting your website name that costs approximately fifteen dollars per year getting hosting cost approximately ten dollars per month but i'm going to show you how to get a super great discount on both of these and then installing wordpress wordpress is awesome because it's free and creating it yourself using this tutorial is also going to be free all right so in total if we add up everything with a discount it's going to be 30 per year which i think is an awesome deal to have your website spread out to the entire world all right so if you're ready then i'm ready so let's begin creating your website alright so luckily we can get your website name and hosting at the same place so let's go ahead and open up a browser and let's type in hostgator.com that's h o s t g a t o r dot c o m and press enter all right so i've been using hostgator for 16 years now i really liked them it was the first hosting company that i recommended and i'm still with them i do get commissioned for telling people about hostgator so i really appreciate you using hostgator there are thousands and thousands of hosting companies to choose from and obviously i haven't tried all of them but i really like hostgator because of their 24 7 365 live chat and phone support and i also really like them because they have really great pricing so we have all of these different options hosting pro hosting essentials domains and support we're just going to focus on hosting so go over hosting and then we have three different options shared hosting website builder and wordpress hosting you would think that you would use wordpress hosting but actually it's just way too much and it cost a lot more than shared hosting and you can always upgrade later so we're gonna be going on shared hosting so just go ahead and click on that and then we have these three different plans here and we can see the price of the plan so this is 275 a month but i have a trick if you go up here and go to hostgator.com forward slash unlock u-n-l-o-c-k and press enter we can see that the biggest discount is unlocked and if we go down here those three different plans are now a lot less so now it's 257 a month so these three different plans are the hatching plan the baby plan and the business plan the business plan is just way too much and we don't need all of this and again we can always upgrade later so it really is between the hatching plan and the baby plan the difference between the hatching plan and the baby plan is the baby plan you can have unlimited websites so you can have like yourwebsite.com yourmomswebsite.org a clientswebsite.net you can have as many websites as you want on the single plan where the hatching plan you can only have a single website like yourwebsite.com but because you can always upgrade later we're gonna start off with the hatching plan unless you know that you have multiple websites then you'd start off with the baby plan but we're just gonna go with the hatching plan because we're only making one website so we're just gonna go ahead and click on buy now and then we have two options right here register a new domain or i already own this domain you would choose i already own this domain if you already bought it from somewhere like godaddy.com so you can type it in right here i already own it.com but because we're registering a new domain we're just gonna click on register a new domain and we're gonna type it in right here so we're registering learn how to create a website dot com and over here this is the extension this is like the ending to your website so most of the time it's a com but sometimes your main website name isn't available so you might want to go with the dot net or the dot info if you're a non-profit sometimes you want to go with the.org if you're a really cool business you might want to go with the dot space all right so now what we can do is we can scroll down here and what this is is they want you to add on more domain names and i really don't think that you need any more they obviously want to make more money and have you add in the dot net and the dot club for 15 each a year but i really don't think it's necessary i don't think people are gonna copy your website and i just think it's a waste of money so we're not gonna check off any of these and then we're gonna scroll down and we're gonna get to domain privacy protection so what is domain privacy protection by default when you register a new domain name that information like your email and your phone number gets registered in a database for anyone to look up what domain privacy protection does is it hides all of that information so sometimes if you uncheck this you might get some spam calls or some spam emails but if you don't really mind and you want to save 15 a year then you can uncheck this i'm trying to save the most amount of money possible so i'm gonna uncheck it but just know that i might get a couple of spam calls or spam emails next we're gonna scroll down and we're gonna choose a hosting plan we already did that so we're choosing the hatchling plan for a single website name next is the billing cycle so here's the billing cycle and there's a little bit of strategy that goes along with this so we want to pay the least amount up front but we also want to save the most amount in the long run so how do we do that so with one month we'll be paying the least amount up front and with 36 months we'll be saving the most amount in the long run but there is a balance and i think that balance is 12 months because if you look here on 12 months we're paying 2.58 cents a month and on three years we're paying 2.57 cents a month so this is gonna allow us to pay the least amount upfront and save the most amount in the long run in my opinion and this is because the discount is only applied one time so if you go with the month that discount will only get applied one time but if you go with a year it'll get applied for the entire year with the 12 months your domain name becomes free also and that's different than the one month where the one month you'll have to pay for your domain name separately your domain name again is your website name like www.tyler.com so i think that 12 month has the best deal possible then we're going to scroll down and create your hostgator account so just enter in your email and put in your password and then enter in your security pin then we're going to scroll down and enter in your billing information like your first name last name phone number address city and state i'm in california and also your zip code then we're gonna scroll up and it's gonna ask you what kind of payment type so credit card or paypal i'm just gonna choose credit card and enter in all of my information don't worry this is not a real credit card number and put in the cvv code and expiration date then we're gonna scroll down and it's gonna ask you if you want additional services so right here is ssl and ssl is security for your website our website already comes with ssl this is just advanced ssl and i don't think that we need it so leave it unchecked site lock essentials this is again another type of security on your website and at 36 a year i really don't think that we need it and we can always download something for our website to secure it that's absolutely free for professional email i do like gmail but your website already comes with email and again we can always upgrade at a different time so i don't think that we need this right here do we want to back up our hard work for 24 a year i think that's ridiculous and there is something free that we can download on our website that allows you to back up and again it's absolutely free then we can scroll down here and we can see hostgator seo tools and this is basically they say going to rank you better in the search engines but i don't think it's really going to work i don't even know what they would do there's also free things that we can download to our website that's what makes wordpress so great and we can save 35 a year so all of them i think is a no then it's going to ask us to enter in our coupon code unlock should already be in here if it's not put it in and click validate then we can scroll down and we can review our order so 24 7 365 phone live chat and email support instant account activation money back guarantee domain registration for one year which is free and that's because we got the hatchling at 12 months so it all comes out to 31 dollars which i think is an amazing deal to have your website online again this may fluctuate from thirty dollars to forty dollars but anywhere in there is absolutely awesome then we'll scroll down and click i agree to hostgator's terms of service and click checkout now all right congratulations you've done the hardest part which is just decide that you really want a website and to do something about it the next thing that we're going to do is we're going to install wordpress so anywhere it says install wordpress just find it mine says it right here we're just gonna click on it and we're gonna install wordpress all right so they make it super simple it used to be difficult but all we have to do is click on install now and then we can choose our domain name don't worry about this keep this exactly how it is so we're going to go over here choose our domain name i have a whole bunch of domain names but i'm going to choose learn how to create a website.com we're going to make sure that this is kept blank we don't want anything in here because if you put it in then it will install it on yourwebsite.com forward slash something instead of just your mainwebsite.com we're also going to keep this as is this might be a different number for you but you just want to keep it as the default don't change that then we're going gonna go down and change the site settings up here you just put in your business name but i'm just gonna put in make a store and we're gonna be able to change this later so don't really worry about it and for site description this is just a description for your website we're going to be able to change this later so it doesn't really matter what you put it in i'm just going to put in learn how to make a store but don't worry about it right now we can always change it later for the admin account i like to put in my name just because i can remember it and capitalization does matter so i'm just gonna put in tyler and then for password choose a password that you can remember so i'm just gonna hide this and i'm gonna put in my password right here all right for admin email you wanna change this to your main email so i'm just going to put in my email right there and for choosing a language we want to keep it english right now even if your language is different just because it's going to be much easier to follow along and again we can always change this later all right next we want to scroll down and we want to skip all of this because we're going to be selecting a much better theme and we want to email the installation details to our email address so just put in your email address and then once you've done that we can click install so right now wordpress is installing for you and it's going to take a couple of minutes but through the magic of editing i'm going to speed that process up all right so now it says congratulations the software was installed successfully and we can go to your website so if we click on your website will your website actually work let's take a look alright so let's check out our website and we can see that it doesn't work we get a sad face and why is that that's because it takes a little while somewhere between 10 minutes and one hour for your website to spread across the entire world sometimes it can take up to 24 hours but that's super rare so i'm just going to take a break right now i'm going to go for a walk and then i'm going to check on it a little bit later all right so it's been about 20 minutes we're going to check on our website and if we click on it we can see that our website works we have a website and that's super awesome some developers would charge you 500 just to get you here which is absolutely ridiculous it's super easy once we do that we can close all of these tabs right here and what we want to do is we want to log in to your website so the way to log in is to go to yourwebsite.com forward slash wp dash admin wp adm and press enter all right so what we can do to log in is we can go over here and enter in your username that you made in the previous step so i'm just gonna put in tyler and then password that you made in the previous step so i'm just going to put that in right here if you forgot your password you can always click lost your password and it'll email it to you once we do that we can click login and now we're logged into the end or the dashboard of your website so real quick i just want to show you how to get to the back end and front end of your website this is the back end again the dashboard of your website that's what wordpress calls the back end and to get to the front end of your website all you have to do is click on your website name and that will get you here you know that you're logged in by having this big black bar at the top none of your users can see this this is just for you when you're logged in to get back to the dashboard of your website the back end of it all you have to do is again is click on your name and you'll be transported to the back end of your website we're going to be doing that a lot during this tutorial so i just wanted to show you right there the next thing that we're going to do is delete plugins what are plugins plugins are like little programs or apps on your website a lot of the times hosting companies install a whole bunch of plugins that you don't really need on your website you see all of this mess right here they've done that probably because it makes business sense for them or they got paid to do it but we don't want to be a part of any of that we're not mad at them for doing it but we really just want to start off fresh and clean on our website plugins are super cool they allow you to add different programs to your website so for example by default wordpress doesn't have a contact form plugin where people can fill out information and press send and email you so you can easily download a free plugin that adds that to your website all right but to delete all these plugins is super easy all we have to do is go over to this left side and click on plugins and we can scroll down we can check off all of them right here by clicking on this button and then going up here and first we need to deactivate them so go to deactivate and then apply now all of our plugins are deactivated and now we want to delete them so go up here and then go here and go to delete and apply then press ok and now delete all of the unnecessary plugins on your website and then we can start off fresh and clean so now we can go to our dashboard and we can see it looks much much better all right the next thing that we're going to do is we're going to switch the theme the theme is the design of your website let me show you what it looks like click on your name to go to the front end of your website and we can see that this is the theme so again the theme is the design of your website this is our design right now and we're gonna make it so much better all right so to change the theme or the design of your website all we have to do is go back into the back end and then go to appearance and themes once we're here we want to add a new theme so just click on add new and we're going to be adding a theme called astra so go over here and type in a-s-t-r-a and press enter to search and we can see this theme right here we can click on details in preview and we can see that it's been rated 5 000 times 5 out of 5 stars and it has over a million downloads this is the best and most flexible theme out there so all i have to do to install it is click install once we do that we're going to click on activate to activate the theme alright now that it's activated we can go to the front end of our website and we can see that the website has changed it doesn't look that much better but this theme is gonna allow us to create any website that we can think of all right but this theme right now isn't looking that much better from the original wordpress theme so why'd we install it we installed it because we can install pre-made websites on this theme so in order to do that all we have to do is go to the back end and then we go to plugins because we need a new plugin and then we go to add new this plugin is called starter site so just start typing starter and sites s-i-t-e-s and press enter and we can see it right here it has five out of five stars with one million active installations and we can go ahead and click install now to install that to our wordpress website then we can click on activate and it'll activate and now when we go to appearance we can see this new menu options starter templates so just go ahead and click on that and then we can click on build your website now and then we have all of these different options right here but this is the best visual page builder by far so just click on elementor once we do that we can click on e-commerce and we can install any of these stores in just one click and many of the best ones are free and i think that's super awesome for this tutorial we're installing simply natural because it's one of the best ones to start off with and you can make any design you want by modifying it just like we're going to show you in this video so let's go ahead and click on it and we can see what this template looks like by scrolling with the preview right here and we can obviously do this for any of the templates but i really recommend starting off with the simply natural template because it's the one we're using in this tutorial and all the steps will be the same and here it's going to ask us to put in our logo but we're going to do this later so let's just skip and continue then it allows us to choose between some default colors for our theme like this which changes the colors here but we're going to go with the default colors and put on our own colors manually later so let's just go with default and click continue then it's going to allow us to customize our fonts on our website you can pick any of these fonts that you like like play fair display or maybe we like montserrat and as you can see that changes all of the fonts over here but i like poppins the best so let's just click continue then we can skip all of this and just click submit and build my website and that's going to import the entire template into your website saving you hours and hours of work now through the magic of editing i'm going to speed this up but it's going to take a little while and now congrats your website has imported successfully we can now click view your website up here and we can see what our website looks like and as we can see our website looks much much better it imported all these products and this entire home page and all of these pages up here and it got our shopping cart working and it also added a whole bunch of plugins so if we go into our back end by clicking on our name and then going down and clicking on plugins we can see it added all these extra plugins which again are like apps for our website alright so we installed starter templates ourselves that gave us the ability to import that website what elementor does is it's a visual designer so it allows you to visually design your website what woocommerce is is that allows us the shopping cart capabilities so we can do things like take payments and have products on our website we don't need to know what this is we're not going to be using it for this tutorial and for wp forms lite that's the plugin that allows us to have a contact form on our contact page where people can fill it out and press send and it'll send to your email because we're not going to be using this one right here we're going to go ahead and deactivate it and then we can scroll down and we can press delete to delete that plugin we can always install it later if we want to but we don't need it right now if you're ever worried about what some words or terminology mean don't worry we're going to be doing it all step by step alright so we can close this up here we don't need this extra tab and now we're going to delete the extra content that we don't need that wordpress and the starter sites have installed so if we go over to posts right here and click on it these are blog posts that we don't need on our website so go ahead and click on trash and then go to the trash and we can delete permanently so hover over it and press delete permanently once we've done that we can go to pages so our starter plugin put in a whole bunch of pages that we don't need and some that we do need so what we're going to do is we're going to delete all the ones that we don't need so we're going to select all of them right here and we're gonna deselect the ones that we're gonna keep so unselect about us unselect cart cart page then we're gonna scroll down and we're gonna unselect this checkout page right here then unselect contact us then unselect the home right below it and finally we can scroll down and we can unselect this shop page right here and that's all of them all of them that are selected are gonna be moved to trash and the one that's unselected it's gonna be kept so we can scroll up and from this drop down right here we can move to trash and apply once we do that we can click on trash and we can select all of them and go from the drop down and delete permanently and apply all right now we can press all and we can see all of the remaining pages we had and none of them are duplicates some of them from previously that we deleted were duplicates so we got rid of all of those and we're also going to come back and design each of these pages later on the next thing that we're going to do is we're going to change the general settings of your website so if we go to settings and then general this is where you can change your site title which is usually your business name and your tagline which is what explains your website so if we open up a new tab right here and we go to our website and we hover over it we can see it says make a store learn how to make a store and that corresponds with this make a store learn how to make a store this is what's also going to show up in the search engines and you can always change and update it later next is this section right here which we don't want to touch at all this will break your website if you change it so don't change it then we can update our email right here this should be your email address and if we scroll down we can change the language right here if we want and we can also change the date format then we can scroll down and we can save changes the next thing that we're going to do is we're going to change some of our global colors so let's exit out of here and the way that we do that is we go to appearance and then customize and we click on global so click on global up here and here we can change all the typography colors container and buttons for our entire website the typography is like the font so if we go here and we scroll down a little bit pay attention to this font right here this is the body font if we go up here and we change it to poor story we can see that that font changed and it changed in different areas of our website it also changed up here in the menu and obviously that typography looks pretty bad so we're going to change it back to poppins but that's how you be able to control your font you can also change the fonts for your headings like up here and you can do that below right down here but we're not going to change any of the fonts so we're just going to go back but that is how you would change your fonts we can also change the colors of our website so all we have to do is click on colors and here we have our main colors we're going to be changing two of the colors so we're going to click on the first color and we'll be able to change it to any color that we want so we can go like this and we can see that this color has changed right here so we have a specific color called a hex value that we want to put in here and that color is 1 f 5 1 3 f and we can see it change to a darker green right here and for the second color we're just gonna click on it and we're gonna go up here and we can see this menu text right here and we're gonna change that color to five one a zero a007 so that's going to change to that green color and we can just click off of it and now we can see that it's changed to this green color super cool it also changed the cart color up here and it's looking awesome and if we ever want to reset the button color all we have to do is click on this color right here and press reset and now reset it back to the default color all right the next thing that we're going to do is we're going to change the buttons on our website so we can go up here and press back and go to buttons before that let me explain container real quick so the container is how wide your website is and we don't need to mess with that right here i just wanted to explain it so for the buttons all we have to do is click on it and we can change the button color right here all right so right now we can't see the button so what we can do is we can click on plants up here and then we can click on any product i'm just going to click on the first one and we can see this button right here it has this color and it has a radius which is the rounded part of the button so right now it's 50 which makes it super round and we're gonna change it to five so it's not as round so we're just gonna put in five and we can see that now the button isn't as round next we're going to change the color of this button so we can go right here and click on it and we can choose any of these buttons if we want and it's not updating right now because we actually have to publish it but what we can do is we can put in our own color so we're just going to put in 75c 32c and that's going to change it to a lighter green this dark green on hover is perfect so now that we've done that all we have to do is click on publish and we're going to exit out of here then we can go to the front end of our website click on plants but before that we can see that this color has changed this button color has changed to what we put in and at the bottom it's changed right here and we can scroll back up and we can go to plants we can click on a product and we can see this button has changed so that's how you control the colors of your buttons and what we can do to see that change is we can click add to cart and we can hover over our cart and we can see some of those colors changed and we can also view our cart and we can see all of those colors that updated super cool alright now's the fun part which is the design of your website and that's what we're doing next if we check out nike.com we can see that this page is designed really nicely it's not just a list of their products we can see this huge hero image right here with this shop button so that you can shop and we can scroll down and we can see products on the home page we're also going to do the same thing if we look at allbirds.com we see the same thing a huge hero image with a shop button and if we scroll down we also see products on their homepage so how do we achieve a similar and amazing designs like this well it's super easy all we have to do is go to our home page by clicking on your business name and what we want to do is we want to design this home page we already have that huge hero image in that shop now button and we already have some products on here so it's already looking really good but we want to make it our own and we want to learn how to actually design this so to edit your page all you have to do is click on edit with elementor sometimes this doesn't show up though so i'm going to show you how to go back into the dashboard which you click on this and then we can click pages and then we have all of our pages right here like our home and about and all we have to do is hover over it and we can see edit with elementor so that's what we're gonna do we can also click on the home page and click edit with elementor so we can edit everything except for the very top of the website which is called the header and the very bottom of the website which is called the footer later we're going to be able to edit all of that but right now this is just the inner page that we're editing so basically the concept is anything that you click on the right side right here you can edit on the left side so we can click on this button on the right side and edit it on the left side we can click on this text on the right side and edit it on the left side so your entire website is made of sections and columns this is an entire section right here if we scroll down we can see that this is another section you can see by the blue border around it within this section there are three different columns so here's a column here's a column and here's a column you know it's a column by this little icon right here we can also scroll down we see this is an entire section and within this section there are three columns so this column this column and this column and within these columns there's text and images and buttons and anything that you want to put within it we can more easily visualize this by clicking on this navigator right here and we can also pin it to the right by just click hold and drag it to the right and letting it go so basically we have all of these different sections and we can click on any of them and within these sections we have different columns and within all these columns we have different elements and that's why it's called elementor so we see this column right here it's the first one and within it we have this image box and we also have this button right here we can add any more elements if we want to by clicking on this and we have all of these different elements that we can just click hold and drag right into our website to add things to our website in order to add different sections we can scroll all the way down here and we can press plus to add different sections but i'm going to show you how to do that later we're not going to do that right now right now we're just going to edit our website alright so this is super easy once we get started i know it might look overwhelming but we're gonna learn all this by doing it step by step all right the first thing that we're gonna learn is how to change the home page image so let's do that to do that all we have to do is hover over this entire section and click on this section we're trying to change this image right here once we click on the entire section we have these three different columns layout style and advanced we want to go to style once we go to style it's super easy to change the image all you have to do is click on it and what we can do is we can upload our own files by clicking on upload files you can find copyright free images from places like pixabay.com p-i-x-a-b-a-y dot c-o-m and these are copyright free images that you can download on your website we can also go to pexels.com p-e-x-e-l-s dot c-o-m which is another place to get free copyright pictures and videos and another place that we can go is unsplash.com uns p l a s h dot c o m and press enter and we have all of these free images that we can download and all you have to do is click on them and download them so we can do it that way or we have this free images tab right here that we can click on and this is pixabay so we can search for something like t-i-t-l-i-s and we can see this image right here and we can click on it and all we'd have to do to insert it into our website is click insert media we're not going to do that right now because i've prepared all of the files for you so we can go to upload files and what you can do is download the zip file from the description below so i'm just gonna minimize this right now and this is the file that you download from the description below so just go ahead and click on it and unzip it and now we have all those different files right here that we can see and now we can upload all the files that i've prepared for you all right so what we're gonna do is we're gonna click on upload files then we're gonna select files and then we're gonna go to our desktop hopefully where we've downloaded it and go to make a shop 2021 and then we're gonna go and click on the home page and we're gonna go to home header hero and we're gonna press open then the file is gonna upload and we're gonna insert media and that's gonna insert it right into our website super easy right now you might be tempted to put in all of your own content in your own images in your own text but i think you should just learn how to do it first and then later you can put in your own content the next thing that we want to do is change the position of this image it's way too focused on the center so all we have to do is go here and go to top center and just click on it and that will make it so that we can see the sky much better the next thing that we want to do is get rid of these rounded edges right here so we can scroll down and go to border and for border radius let's put in zero here and zero here and that will get rid of the roundness and don't worry if a lot of this doesn't make sense it'll make sense in a little while next this image is a little bit too bright so we're gonna make it less bright so what we can do is click on background overlay and then we want this background overlay to be classic so just click on classic and then we want to turn this opacity which is how see-through it is all the way down to point two and now we can see through it more but we wanna change the color of this to black so it's much darker but we can change any color that we want right here but i'm going to make it black and that's going to make the text that's white pop out eventually and next we're going to change the height of this image and make it a little bit taller so we want to go to layout and we want it to be px instead of vh so go to px and change this to 615 and that will make it much taller and look much better all right so now to update changes all you have to do is click on update alright so we're all done learning how to change the image on your home page let's mark that off the next thing that we're going to do is we're going to change the home page text so how do we do that so what we want to do is we want to delete this and make this text white and center this text in the middle so to delete this right here all we have to do is right click on this right here and press delete and that'll delete this now we want to change this text to white all we have to do is click on it and then go to style and then go to text color and make this color white then we want to center this text right here so to center it all you have to do is go to content and then under alignment we make it centered but we can see that it's not actually centered in this picture right here and that's because there's way too much space on this side so to change the spacing on this side all we have to do is click on this column right here and then go to advanced and where it says margin which is just another name for spacing on the right we want it to be zero and now that's gonna make it centered because there's no right spacing right here the next thing that we're gonna do is we're gonna change this text so all you have to do is highlight it and i'm just gonna caps lock it so it's all capital and i'm going to type in explore nature and then what we want to do is we want to change this font and the size of the font so we can go to style up here and then under typography you can click on it and then we're going to search for a s babis nuo just go ahead and click on it and then for the size we want to do px or pixels i'm going to drag this to 90. all right that's looking super good the last thing that we're going to do is we're going to change the letter spacing and we're gonna change the letter spacing to three so that it's more spread out that's looking awesome all right so we're all done with learning how to change the text we can check that off and the next thing that we're gonna do is we're gonna learn how to edit or add a button so let's learn how to do that so what we want to do is we want to make this button in the center remove some space make the button see through and link it to our shop page so it's super easy let's do it we can click on this edit icon right here and the first thing we're going to do is we're going to remove this space so go ahead to advanced and we see the margin and we're just going to make it zero to remove that space then what we can do is we can center it so we want to go to content and then go to alignment and make it in the center the next thing that we're going to do is we're going to make this see-through so we can go to style and then under background type we're going to keep it as classic and under color we're going to change this so that it's see-through so we can drag this all the way to the left and we can see that it's now see-through but now we want a border around it so what we can do is we can go to border type and we can click on solid we're not seeing it yet because it doesn't have any width so we're going to make the width 2 and that's going to add the border all the way around it then we're going to change the color of the border so we can go ahead and click on it and drag it to white and we want this border to be a little bit more rounded so under radius we can type in 19 right here and that's going to make it round the last thing that we need to do is we want to make this text bigger and link it to our shop page so we can go over here and we can go to style and under typography we can click on it and then for size we want it to be 14 so it's a little bit bigger and then we can go to content and for link all we have to do is press slash shop and that's going to link it to our website dot com forward slash shop and that's going to link to our shop the button looks amazing what might make it look even better is a little arrow so we can do that over here under icon we can click on this icon library and we can type in long arrow and we can see this long arrow and we can click on it and we can press insert and that'll insert it right there we want it to show after the shop now so we can under icon position just click on after and now our button is perfect alright so let's go to our checklist we're all done learning how to edit a button the next thing that we're going to learn is how to edit and move a home page section so we're going to scroll down a little bit and we're going to edit this section right here we're going to change a couple of things and we're going to move this to the bottom so the first thing that we're going to do is we're going to click on this plant collections and then over here on the left side we're going to type in premium quality and under the description we're going to type in best value for the money under free shipping we're going to go ahead and click on it and we're going to change this to all orders above 50 in the usa and then what we want to do is we want to change the shipping icon right here so we can go ahead and click on it and let's search for shipping and click on the icon and that icon will change super cool the last thing that we want to do is just click hold and drag and we want to scroll down to the bottom or right above right here and let it go and that will move the entire section and that's how we edit and move a home page section so we can go ahead and mark that off right here the next thing that we're going to do is we're going to edit our product categories so we can click on our home page and what we first want to make sure that we do is update so we're going to update and save all of our changes and then we can scroll up and we want to change this area right here we want a little bit more space and we want to change the color of this so how do we do that we can click on the entire section right here and then we could go to advanced and under padding we want it to be 100 at the top which is going to give it more space and 100 at the bottom which will give us 100 pixels of space here the next thing that we want to do is we want to change this link so that it goes to your category page we want this link to go to our plant page so we're going to open up a new tab right here and we're going to go to our website and we want to click on plants and then we want to copy this url right here so we're going to copy it and this is how you make a link to any other page then we'll go to your home page again and then make sure this is clicked and then under link we can paste in that link right here and now that will link to your plants page or whatever category you have the next thing that we're going to do is we're going to change this color so we can go to style and then under text color we're going to change it right here and we're going to change it to fc5f5f and that's going to give it a really cool color then we're going to also change the hover color so when you hover over it it's a different color so we click on hover and we'll change this color to e6000 and that's that exact color right there and now a really cool thing that we can do is we don't have to make changes for all this we can just right click right here and press copy and then go here and right click and press paste style and that will paste the style for that and paste the style for that and now all those settings are copied over we also need to change this to link to our cactus page so we can click on it and then we can go up here and we can click on cactus once we do that we can go over here and copy it so just right click and press copy and then go back to our homepage and under link we can paste it and for the third and final section we just want this to be our shop page so we can click on it and again we can do forward slash shop and that will take us to our website dot com forward slash shop all right we're all done with that now we can go back to our task list and we can mark that off the next thing that we're going to do is delete sections or save sections for later so we can exit out of here and go back to the home page so let's see what we don't need so let's scroll down and i think that we don't need this section right here so all you have to do is hover over this and press this x and it'll delete it and maybe we don't need this section right here but i actually really like it so i think we can save this one for later so we're going to delete it from our homepage but we're going to use it at a later time so all you have to do is click on this and right click and press save as template so we're going to save this for later and you should too so name it testimonials and press save and that's going to save to our library now we always have that section but we don't want it on our homepage so we're going to exit out of here and we're going to exit out of it so that will delete that and this bottom section right here i don't really like it so we're going to delete this one also so we're gonna press x and we're gonna delete it but right now it's looking a little bit blank and empty so maybe we'll add something later but for right now that looks super good so let's update that and let's go back to our checklist and we can mark that off the next thing that we're going to learn how to do is we're going to learn how to make this website mobile friendly so how do we do that so it's super important to make your website mobile and tablet friendly because over 50 of people are gonna be coming from those devices so all we have to do is click on this responsive mode right down here and now we have these three tabs so we can click on the tablet first and now we want to change this so we want to make this one centered so all we have to do is click on this column right here and then go to advanced and under margin we don't want all the space to the right so we're going to press 0 and that's going to look super good next we're going to change this height right here we want it to be a little bit taller so just click on the entire section and then under minimum height we can click on px and we can put in 400 right here and the next thing that we want to do is we want to change this radius right here we don't want it to be rounded so all we have to do is go to style scroll down and go to border and remove this by pressing zero and zero and now that is looking super good all right next we're going to scroll down to see what other changes we want and this is looking good this has a little bit too much space right here so we're going to click on this entire section go to advanced for bottom we want to change this to 40 instead of 80 to give it a little bit less space and that is looking super super good and we can go ahead and update that and the feature plans are going to show right here but they're just not showing because we're editing our website all right if we go back to our checklist we have made it mobile friendly for our tablet super awesome the next thing that we're going to do and super important is we're going to make it mobile friendly for our phones so all we have to do is go to the home page and then what we can do is we can click on this mobile icon right here and we can scroll up and we want to change this we want to make this not as big and this button not as big and we want to remove this border radius right here we also see that this isn't centered perfectly so what we're going to do is we're going to click on it right here this column and then under margin we're going to set that margin to zero and that's going to center it so that there's no space on the right the next thing that we're going to do is we're going to make this text smaller so just click on this pencil icon go to style and under typography we want to make sure it is px and we're going to set that to 45 to make it not as big then we want this button to be a little smaller so we're gonna click on this edit and we're gonna go to style and we're gonna scroll down and under padding and this is the padding within this button so like right here and right here we're gonna unlink these values and we're going to put in 12 then click tab to go to the next field 24 tab 12 and 24. all right next we're going to remove this right here this border radius so what we're going to do is click on the entire section and then scroll down and under border we're gonna make it zero and zero so it has no curve at the bottom and then we're gonna make this image less tall so we're gonna go to layout and under minimum height we're gonna do 350 pixels all right so we're all done with that and the rest of the mobile website looks amazing so we're just going to click on update to update it and we can go back to our checklist and check it off and we're all done with editing the home page but there was one more thing that i wanted to do so we can exit out of here and then what we're gonna do is we're gonna go back to the desktop mode and if you remember i wanted something down here because it looks a little bit blank so what we're going to do is we're going to duplicate this section right here by just right-clicking and press duplicate and then we're going to click hold and drag to this bottom section right here and let it go the next thing that we're going to do is we're going to change this image so let's select the entire section and then go to style and let's click on the image then we're going to go to free images so click on free images and we're going to search for an image and let's just search for something like alpine all right and we see this one this one's super cool so just go ahead and click on it i hope this looks good and insert media and i'm going to make sure to include this photo in the zip because i think it's looking super awesome so you can download this image from the description below all right next we're going to position it a little bit different so i'm going to click on this entire section and go to position and we want it to be focused on the center center center and that move the image focus to the center next we're going to make this a bit darker so we're going to scroll down and go to background overlay and we're going to set the opacity to 0.4 and that's going to make it darker and now we're going to change this text to discover nature so we're just going to change it right here to discover next we're going to add some text right here so we're going to go and click on this elements and then we're gonna drag in a text editor so just click hold and drag it in and let's go to style and let's make it white so that we can see it by going to color and making it white and then under alignment we're going to align it to the center so that the text is in the center and then we're going to go to content and we're just going to paste in some inspirational text right here so just click on text and highlight this and right click and paste it in all right that's looking super awesome finally let's adjust the spacing under advanced so click on advanced and then let's unlink the values so they're not all the same and on the bottom and top let's give it 20 pixels so 20 on the top and 20 on the bottom that looks much better spaced out all right so we're gonna update that and that is looking amazing so now it works on the desktop mobile and tablet and our aria works on those because we already applied those settings so this is what your website looks like on desktop this is what it looks like on tablet and this is what it looks like on mobile and it looks super super awesome all right so if we click on our desktop you probably notice that there's one more thing that we didn't edit here and that is our products and our products would show up right here if we weren't editing our website right now so that's what we're gonna do next all right so let's open up a new tab and let's go to our home page and if we scroll down we can see the different featured products here and whenever we make a new feature product it'll get inserted right here if we have the right shortcode on our website so let's go check out what that looks like so if we click on edit with elementor all we have to do is click here because this is where that shortcode lives and we can see it over here so this may look hard and confusing but it's not at all it's super easy all it's saying is product limit equals eight that's how many products there are so we can change this to six and then six products will show up instead of eight so now we can see instead of eight it has six we can also change the columns to three so it will be three columns instead of four and now that shows up just like this we're not going to have the button right here and that's because elementor shows it a little bit different than it's gonna actually look like on our website we can also do different things in the short code like we can add something after this featured and we can put in category so just type in category equals and maybe we only want the plant category so we do quote and we do plants and that's only going to show us our plants we can also change it to cactus so we can just type in cactus and that'll only show our cactus and because we only have three it's only gonna show three so that's how you put in different types of products on your homepage and that's how you show only a certain amount of products and only a certain amount of columns all right so we're all done with that we can update that and we can go to our store and we can see right now it has four columns and eight products but if we refresh and we can see that it's only showing our three cacti but if we go back and we remove the category cactus it'll show all of the categories and we press update and if we refresh now it'll show all of our categories and i'll show six products that is looking really awesome so there are many many things that we can do with this woocommerce product short code and you can just simply google woocommerce product shortcode and you'll find all of the documentation that you need but we're going to keep it simple and we're just going to stick to this but we are going to learn more about it in a little while all right so we can close this and make sure that it's updated the next thing that we're going to do is we're going to make a new page that has our deals on it so let's just go back to our home page by removing all of that and pressing enter and now we're going to make a new deals page up here but why are we making a deals page we're making a deals page for two different reasons first we want to learn how to make a new page and that's because maybe you want a services page up here or an faq page up here so we want to learn how to make a new page and we also want to learn how to add any of your products to any page on your website so those are the two reasons that we're making a deals page so let's go ahead and create it we're making this deals page after this page so we're basically just going to copy this page and not reinvent the wheel and use this as a starting point so let's go ahead and edit this home page with elementor by clicking on it up here and we're gonna save this as a template so click down here and press save as template and we can call this home and press save all right once it's saved we can exit out of there and we can go to the back end of our website by just going to our website dot com forward slash wp admin and removing all of that then to create a new deals page we go to pages and we click add new and then we're going to call this deals d-e-a-l-s and we're going to click on publish and click publish again then we're going to click edit with elementor all right next we're going to import that home page by clicking on this folder and then going to my templates and then over home we can click on insert and then press yes and now that's going to import the entire deals page into our website alright so we can go ahead and preview this by clicking on this i and this even though it looks like our home page is actually our deals page now we can see it has a problem because the header is not transparent it's not see-through and we want it to be see-through so how do we do that let's go back and let's update this page right here so just press update and that'll save all the changes and then we want to go back one time so let's go back one time and now we can go over here to the astra settings and click on it and then we can scroll down and where it says transparent header we want to enable it and then we can press update and now we can go back to our deals page and we can refresh and that header should be transparent it should be see-through and there it is now that looks much better now we can exit out of here and we can edit our deals page with elementor again so the first thing that we're going to do is we're going to remove everything that we don't need so we don't need this shop now button so i'm just going to click on it right click and press delete and then we're going to scroll down and we don't need this section right here so we're just going to exit out of this one and then we don't need these two headings right here so we're just going to right click on this and press delete and right click on this and press delete the next thing that we're going to do is change the heading to latest deals so let's just type it right here and then we want this to be smaller right here so we're going to click on the entire section and then change this to 350 pixels so 350 and that will give it less height and then what we're going to do is we're going to change this image right here so we're going to go to style and we're going to click on the image and we're going to upload files and select files you can find all of these images in the description below so we're just going to look for it and go to the deals page and click on deals header hero image and press open then we're going to click insert media but i don't like how this is positioned so i want to position the image for center center and that looks much better but it's not perfect this doesn't look centered to me so we want to click on the entire section again and go to advanced and we want to change the top and bottom paddings to 30. so press 30 and the bottom 30. and that looks centered to me all right next if we scroll down we can't see it right now but this isn't aligned perfectly either so we want to click on this entire section and then go to advanced and it just has too much space up here so we want to go for the top heading to be 40 and the bottom padding to also be 40. and now if we hover over this shortcode area we can see the space is smaller at the top there and at the bottom right there so now it looks perfect alright so now let's update this page by clicking on update and let's preview it by clicking on the i and this page is looking really really awesome it looks super good but we only want to show the latest deals or the things that are on sale so we have a couple of these products that are not on sale that are just featured but we want to change this short code so that it only shows things that are on sale alright so to do that we go over and click elementor and then we click on our short code which is right here and then instead of visibility equals featured we want to change that right here and delete it and do on and then underscore sale and equals it in quotes true and that will make it so it only shows products that are on sale so let's update that and let's preview it but we're gonna see that it doesn't actually work and why is it blank it's blank because we imported a starter site and that starter site hasn't refreshed these products yet so we have to refresh these products manually so in order to do that we have to go into the back end so just click on your dashboard and then go to woocommerce and click on status then we want to click on tools and we want to scroll down until we see product lookup tables and then we want to click on regenerate then press ok and now we can see that the lookup tables are regenerating so we just have to wait about a minute in order for it to regenerate and our products are going to be refreshed all right so we can click on tools to see if that message is still there and once that message disappears it means you're ready to go to woocommerce transients and click clear transients and then press ok once we do that we know that our products are refreshed and you're never going to have to do that again again we only had to do it because we imported those products on our starter site all right so now let's go check out our deals page again by going to this right here and let's preview our page by clicking on the i and now we can see our latest deals page and it has all of the products that are on sale we only have five products that are on sale so it would show six if we had six products and i'm going to show you how to create a new product on sale in just a little while all right so now we can close this tab up here and we can go back to elementor if you're looking for a specific short code but can't find the solution online then leave a comment below and i'll do my best to help alright so now our deals page is done make sure it's updated and now we're going to add this to our menu so i'm just going to go up here and remove everything so it's just the main website and press enter and we can exit out of this the next thing that we're going to do is we're going to control this menu part i'm going to show you how to change and rearrange this menu i'm going to show you how to add different items to this menu and we're going to add our store to this menu we're also going to add our deals page so we can put any page up here that we want all right so to do that all we have to do is go to the back end of our website by clicking on our name all right and then we go to appearance and we go to menus now we want to select our primary menu so instead of important links go to primary menu and press select that's our main menu for our entire website now we want to scroll down and we want to remove plants and cactus from our menu just temporarily so we can click on it and this is how you remove any pages from your menu and just press remove so click and remove the next thing that we want to do is we want to add our deals page and our shop page so just click on deals and click on shop and add to menu the next thing that we want to do is we want to re-add our product categories and we don't see them right here so what we want to do is we want to scroll up and go to screen options up here and then click on product categories then we can click on this to hide it and we can scroll down and now we see product categories here so we can go ahead and click on it and we can add cactus and plants and add them to the menu and now we want to rearrange this menu so i'm just going to click hold and drag shop under the home page and under shop we want our different categories and our deals so we're going to click hold and drag plants under shops and we're going to indent it in order for it to be a sub menu and then we're going to click hold and drag cactus the same way and we're going to click hold and drag deals in the same way and now what we want to do is we want to rename all of these so that it's capital because i think that's going to look better just to have all of the menu items capital so i'm going to speed through this a little bit but we're gonna capitalize home instead of shop i'm gonna name it store because i think that's a cooler name and capitalize all of the rest of them and i'm gonna rename contact us just to contact because i think it's simpler all right all we have to do is press save menu and now we can go back to the front end of our website and we can see that this has changed we can't see it that great and we're going to change it in a second but if we go to our store we can see that this menu is looking much better and this sub menu is super super cool so it goes home store about and contact that's awesome the next thing that i'm going to show you how to do is create your own logo and put your logo up here so the way that you can do that is you can open up a new tab and we can go to logomaker.com that's l-o-g-o-m-a-k-r without the e-dot c-o-m and press enter once you do that you can click start my design and we'll create a new design all right you could look for tons and tons of graphics up here but i'm just going to show you how to make a simple logo with text so all you have to do is go to this t right here and let's type in nature all right now we want to make it a little bit bigger so all we have to do is click on it and then drag these handlebars out and we'll make it a little bit bigger now we want to change the font so we can go up here and we can scroll down and change it to roboto the next thing that we want to do is make it bold so we're going to click here on styles and choose the b for bold that's looking super good the next thing that we want to do is we want to save a couple different versions of this logo so the first version is going to be white we're not going to be able to see it but if you click hold and drag it all the way to white we can go ahead and save this version just click on save logo and we're gonna go down here and download it just like that all right now we have that version saved we're gonna save a different version and this is because one will show up on our transparent header and one's going to show up on our regular header it'll make more sense in just a second so just click on this and we can make it a green so you can just click hold and drag i have a specific color that i want to use so i'm just going to paste that in there and we're going to save this version also so we're just going to click off of it and press save and we're going to download it and the next thing that we're going to do is we're going to make a fav icon so your fav icon is like this icon up here and this helps distinguish your website from other websites we can see right now our fave icon is this wordpress symbol but we want our own so what we're going to do is we're just going to make an n so we can erase all of this right here and that n is looking good but we want to add a circle behind it so let's go over here and add a circle and what we can do is we can send this circle backwards so we just right click and we send backwards all right and the end might be hard to select right now so we're just going to select it over here and then we can move it all right and we're going to make this end a little bit bigger so we're just going to click and hold and drag it a little bit bigger and we're going to reposition it and you can also use your arrow keys to reposition it perfectly all right so that is looking really good to me and now i'm going to click back on the circle and i'm going to make this white so we can't see it right now but we will be able to see it when it's up here so now we're just gonna save that and that is our fav icon so we're just gonna download it from right here and now we have those two different logos and our fav icon alright so we're all done with logo maker we can exit out of here and exit out of this one and i'm just going to drag all those logos to my desktop all right now i'm going to exit out of here and the next thing that i'm going to do is i'm going to insert that logo onto our website up here so all we have to do is click on customize and while we're here we want to make this menu white so that we can see it a lot better and we're going to change this logo so all we have to do is click on header builder and because this is a transparent header we're going to scroll down and click on transparent header then we can click on design up here and we can scroll down for menu color we're going to click on this and we're going to make it white and now we can see that that changed and we can see it much better but we can see when we hover over it it turns green and i don't like that so we're gonna go over here and we're gonna make the hover color also white so now that looks great but now when we go over this cart we can see that it's green and we can't really see it so we need to change that so what we can do is we can scroll all the way down and we see woo cart icon color and we can click on it and we can make this white and now we can see that perfectly all right but this looks a little too square for me so i want it to be a little more rounded so we can just click on this cart icon right here and we can go to design and for border radius we want to make it eight and that will round it much better so down here is just like elementor we have different sections and then different columns so we can actually click hold and drag and rearrange this just how you want it i like it to the left so i'm going to keep it like that but it's super easy to add things up here or down here which would be way up here or down here to make it exactly how you want it all right we also want to make sure that this cart icon looks good on the non-transparent page so let's click on the store and we can see that it's this color right here but we want to change it to be a lighter green just like on our logo so we're just going to click on it right here and we're going to paste in that green color so 7 5 c 3 2 c and it'll become that lighter green color all right so now let's finally change the logo so let's click on site title and logo and we're gonna go here and we're gonna scroll down and where it says display site title we're gonna get rid of that and we're gonna change the logo right here so just click change logo and we're gonna upload files select files or we can just click hold and drag them into the website all right then press select and we're going to skip cropping that's looking way too small so we want to go over here and go to 130 pixels and that looks perfect so now this is looking perfect but we also want to change our home transparent logo so just click on home and then we want to go over here and we can scroll up and we have this customized transparent header text so just click on it and then check off this right here because we're using a different logo for transparent and then we're going to select our image and upload files and we can just drag the transparent logo into our website then click choose image and now once again it's way too small so we want to go down here and make it 130 pixels and that's looking awesome except for it seems a little bit crunched up here so we want to add a little bit of spacing so let's click on this cog wheel over here and then go to design and under padding we want to unlink the values and for the top we want to add 10 and for the bottom we want to add 10 and to me that's looking much better alright and finally we want the site fave icon up here to be changed so we can just scroll all the way up and click back twice one and two and then scroll all the way down and go to site identity and then we can go ahead and select our site icon and upload files and drag in that icon alright then press select and then we can click on skip cropping and that's going to put in this icon up here it looks really cool when you open up a new tab and you can see it and that looks super awesome all right so now we want to publish changes to save all of our hard work and we can exit out of there and we can see that the design is finished both on our transparent and on our non-transparent website and we can also click on our logo to go back to our home page and the next thing that we're going to do is we're going to make sure it works on your tablet devices and your mobile devices so all we have to do is click on customize and what we're going to do is we're going to click on header builder and then we're going to click on the tablet then we're going to click on the site title and logo element and we're gonna scroll down here and we're gonna uncheck display site title we're also gonna change the logo width to 120 pixels and don't worry this is going to be the white version it's just showing up green because we're on the previewer and the next thing that we're going to do is we're going to change this toggle button element so what we're going to do is we're going to scroll up and go to customize transparent header and then under design we're going to scroll all the way down and then we're going to make the icon and the border white so white and not the background but the border white and then we're gonna select the toggle button element right here and we're gonna make it a thicker version so we're gonna make it right like that and then we're gonna go to design and we're gonna make the border width a little bit bigger because it's too thin right now so we're gonna make it bigger and then we're gonna change the radius and we want this radius to be a little bit more round so we're gonna make it eight and that's looking awesome and then we're going to set the icon size up here to 16 to make it a little bit smaller all right so so far i like the spacing all around it and right here but if we did want to change the spacing all we'd have to do is click on this cog wheel and then go to design and under margin we can change the spacing right here but i like how it is so we're going to move on to the mobile version so we're just going to click on this mobile icon then click on the site title and logo and we can actually hide it right here so that we have more space and then we go over here and we can scroll down and we can turn off display site title and then for the logo width i want it to be bigger so i want to be 110. all right now we're going to scroll up and we're going to customize the transparent header and we're going to scroll down we're going to also make this 110 pixels and finally we can publish our changes and we can exit out of here and now let's take a look what it would look like if you're on a tablet or a mobile device and it's looking really awesome the next thing that we're going to do is we're going to fix up this footer right here we're going to make it much simpler and look much better so all i have to do is click on customize then we can click on footer builder and now we want to remove all of this right here because it's just way too complex so we're just going to x out of all of these and that's going to remove all of them and the next thing that we want to do is we want to make this one three columns so just click on the cog wheel and under columns we want to make it three and now we want this copyright to be on the right side so just click hold and drag it to the right side and we can go ahead and click on the copyright and i want to align this to the right so just scroll down and align it to the right and right here is another short code that enters in the current year and your site title but i want my site title to be capitalized and linked to the home page so all we have to do is just remove that and i'm going to say make a store then i'm gonna highlight it and i'm gonna press the link button and i'm just gonna type in home and click on the home page and that will link it to the home page no matter what page we're on now there's not enough space on the right side here and so we're going to go up and we're going to click on design and we're going to unlink these margins and we're going to give a right margin of 40. now we're not going to be able to see it right here but when we publish it it's going to show up in the middle right here we want our logo so just click on html1 and we're going to get rid of all of this text and we're going to scroll down and we're going to line it to the center and then we're going to go here and we're going to add media so just click add media and then we're going to use that green nature logo and we're going to insert it into post all right but that's a little bit too big so we want to hover over it and we want to click on this little pencil icon and we want to center it and then we want to set the size to a custom size and we want the width to be 130 pixels the same as our header logo then what we're going to do is we're going to link to a custom url and all you have to do is put in slash right here the forward slash and that's going to link to your home page no matter what page you're on then we're going to click on update and that looks much better and the last thing that we're going to do is we want a footer menu right here so we can just click on this plus and then we can click footer menu and then we can click on it and we're going to align it to the left and we can't see it right here because we have to configure it so we go configure menu from here and we want to scroll all the way down and go to footer menu and select it as the main menu because it's going to have the same links as our main menu all right so that's looking awesome now we want a little bit more space over here so what we want to do is we want to click on this little pencil icon right here and that's the same as clicking on the footer menu then we're going to click on design and let's scroll down so we can see it so we're gonna unlink this right here and we're gonna give 15 on the right side and zero on the left side now all we have to do is scroll down because we want some space over here and we want to unlink the values and give it a left margin of 40. all right it looks messed up here but it's going to look great when we publish it so let's go ahead and publish it we're going to exit out of there and we're going to see it on our homepage so we can scroll down and we can see that this menu is looking awesome all right the next thing that we're going to do is we're going to make sure it works on your mobile and tablet devices so if we go like this we're going to see it doesn't look that great on the tablet and if we scroll down we're gonna see it doesn't look that great on the mobile so we're gonna make your menu look perfect so we can go up here and go to customize and now we can go to footer builder once again and let's click the cog wheel right here and then let's click on this tablet icon and let's scroll down so that we can see it and what we're going to do is we're going to click on this right here the stacking one and now for our tablet they all stack on top of each other but they don't look that great all right so now we're going to click our footer menu and then we're gonna change the layout to inline and then now we're gonna click on design and we're gonna unlink this and we're gonna set the top to ten so it gives a little bit more space and now we see that this is on the left so we're gonna click on copyright and we're going to scroll down and we're going to align it to the center again this is only going to affect the tablet and we're going to scroll up and we're going to click on design and we're going to set all the margins to zero and that will center it correctly and then we're going to click on the html one which is our logo and then we're gonna click on design and we're gonna unlink the margin and we're gonna give the top and the bottom 35 pixels so we have a little bit more space all right so we're all done with the tablet and now we're gonna switch to mobile and we're seeing that this is not centered so we're just gonna click on the footer menu and then go to design and then under margin we're just gonna put in zero and that's gonna center everything and now if we hide this that looks absolutely perfect so we can go ahead and click on publish and we can exit out of there and we're all done making our menu completely responsive all right the next thing that we're going to do is we're going to edit our contact page so just click on contact page and the first thing that we're going to do is we're going to change this contact us just to contact because i think it's much better so it'll be your website dot com forward slash contact so what we can do is we can go into the dashboard and we can go to pages and we can scroll down and we can click on contact us and we're going to change the name just to contact so just delete the us we're also going to click on this cog wheel up here and we're going to go to permalinks right here and where it says url slug we just remove the dash us and then we can update that and now we can view our site all right now it says our website dot com forward slash contact so that looks much better let's exit out of there and the next thing that we're going to do is we're going to learn how to import an entirely new design into our website so let's say we go to our website and we don't like this design right here all we have to do is click on edit with elementor and we're going to get rid of all of this design by clicking on x we're just gonna exit out of all of them and then we can click on this s right here and if we go to free over here we can import any of these pages in just one click which is super awesome i'm going to go up here and i'm going to search for contact to find a contact page and i'm going to find the one that i like maybe this one and i think it's really cool so i'm just going to import the template all right and the image is a little bit too bright here so i'm just going to click on it and then i'm gonna go to style and under background overlay i'm gonna change the opacity to zero to remove it and that looks much better the next thing that we're gonna do is we're gonna change the image so just click on background and we're gonna click on an image and we're gonna upload files and we're gonna select files from the downloadable images in the description below then we can go to our contact page right here and click on it and open it then we can click on insert media and i'll insert it and that looks really good but maybe the image is a little bit too bright so we're gonna go down to background overlay and we're gonna set the opacity to point two and we're also going to change the color to black and to me that looks much better the next thing that we can do is we can change this text and i want to caps it and just put in contact us then what we have over here is just two empty columns and we can just right click and we can delete them because we don't need them all right that looks awesome the next thing that we want to do is we want to make sure this photo is the exact same height and has the exact same spacing as our home page image so what we want to do is want to select the entire section and we want to go to advanced and we're going to change it to 50 on the top and 0 on the bottom and that's just like our home page now we want to go to layout and for height we want to do minimum height and we want to change this minimum height to 615 and that is looking great all right so that's it for our hero image so now we can change any of this text so let's just type in let's get in touch in all caps and we can change this one to contact info and all caps and of course we can change any of this by just clicking on it and changing any of the info right here we can also click on our social media icons and put in our social media sites right here and that was really cool we just imported a whole new design into our contact page in just a minute or two so now we can go to our google sheet and we can mark that off so mark both of those off the next thing that we're going to do is we're going to add a google map so let's go over here let's scroll all the way down we want to add a map to the bottom obviously this is optional but we want to click on this plus and we want to click on the single column and then we're going to go over here to our elements and we're gonna find our google maps and just click hold and drag it in there all right we can ignore this we don't really need it but we can go down here and we can change the location maybe i'm in malibu california but if you have a business address you can put in something more specific like your store's address and we can also change the zoom of it or how much it's zoomed in maybe i want it a little bit more and then we can change the height of it maybe i want it a little bit taller or a little bit not as tall so i can put in 400 right here and i think that's looking really great but maybe this is a little bit too bright for me maybe i want to change it so let's go to style and let's go to css filters and we can make it all the way black and white or we can make it have like really vibrant colors i want to make it a little more desaturated all right next if we look at our website we're gonna see that there's space on the left and on the bottom here i want it to be completely flush so what i can do is i can click on the entire section here and then under layout where it says content with i want it to be full width and then i want to go here to this column and then go to advanced and i want to make sure it all has zeros in it so zero margin and zero for the padding and now when we look at it it's gonna make sure that there's no space and it's gonna be completely flush so i think that's great all right so we're all done with that let's go back to our sheet and let's mark that off and next let's learn how to undo and redo so let's go back to elementor and first let's make sure we save our changes by pressing on update but let's say we mess up our website so we get rid of maps and we get rid of this section and we mess this up what we can do is we can go down here to history and we can move back and forward into time so we can get rid of that and re-add that and re-put in that and we can start back from the beginning so that's how you undo and redo all of your changes all right so don't ever be afraid to make changes you can always click on this history right here and go back and forward into time all right but we're going to click back on settings and we can go to our sheet and we can mark that off the next thing that we're going to do is we're going to edit our contact form so we can see right here that if we scroll up and we click on this contact form it really is just a short code so this code enters in this contact form right here and we can't edit it directly from this page so what we want to do is we want to make sure we're all updated by clicking on update and then we can go into the back end by going to yourwebsite.com forward slash wp-admin and then what we want to do is we want to click over here to wp forms and we can see that this short code corresponds with this contact form and this was the short code that was inside elementor so if you wanted a new form all you have to do is press add new and then you'd copy that new short code into your website and you can display the contact form wherever you want to edit the contact form all you have to do is click on contact form and i'm going to open up a new tab to show you the contact form page and if we scroll down we can see your name email address and message and that's the same thing as your name email address message so anything that we change here is going to change right here so let's make a quick change real quick let's just do a drop down right under email address and let's press save once we do that we can go here and we can press refresh and we can see we have a new drop down so that's how you edit all of the different fields so we can go back up and you can change any of the fields by clicking on them and then you can edit all the choices right here so you can add so many different types and customize it just the way that you want we can also go to settings and then we can go to notifications and then we can scroll down and this is basically like another short code that inserts your admin email if you want to send the user's message to a different email you just type it in right here so you can just type in your email address and everything else you can leave the same and again this is where you're going to receive all of the emails from the form and if we scroll down where it says all fields all the fields that the user fills out are going to be sent to your email so that's what this means all right so we can save that and we can go to our contact form and we can refresh and this would be your user filling it out so let's just put michael and hey at michael.com and whatever choice they have and say hey it's me and then they can send it and this is going to get sent to your email and then it says thanks for contacting us we'll be in touch with you shortly and if we go back and go to confirmations we can see that we can change that here if we want to so we can see this new email in our email inbox and it puts all the fields in it and that's super cool because your customers can contact you next what i want to do is i want to revert back because i don't want to show that field so i'm going to remove this drop down and just put it in the trash press okay and save it and now when we go back to the contact page and we refresh and we scroll down we can see that that is deleted all right so now we learned how to edit the entire contact page and the contact page form so now we can go to our sheets and we can check that off the next thing that we're going to do is make sure our contact page is mobile friendly all right so we can exit out of here and we can go back to our contact page so let's just click edit with elementor and then we can go down here and click on the responsive mode and let's click on tablet all right now we're going to change the height of this so just click on the entire section and we want to make it just like our home page so let's make it a minimum height of 400 and then the spacing the same as our home page so let's go to advanced and go to padding top 50 and padding bottom 30. and then let's make this heading bigger so let's select it and then go to style and typography and let's make this 60. that's looking perfect now let's see if everything else looks good on tablet it does so let's move on to our mobile again let's change the size of this right here so click on the entire section and then under layout we're going to change the minimum height to 350 and then we're going to go to advanced and we're going to change the padding to 40 and the bottom to 24 and that looks really good and it looks exactly the same as our home page now let's make this heading smaller so let's click on it and go to style and typography and let's make this 36. all right let's check the rest and we are all done making it mobile friendly all right so let's update that and let's go to our sheet and let's mark it off and it's time to move on to our about page so let's click on the elementor tab and let's just go to our home page and now we can click on our about page and on this about page we're going to learn all of this so let's do the first thing we're going to copy another section from another page all right so let's just click on about us again and we can click on edit with elementor all right so what we're going to do is we're going to copy the header image from the contact page and we're going to insert it in right here so we have to open up a new tab and go to our contact page and we can click on edit with elementor for our contact page and we can hover over this section and then just right click and press copy then we can go back to our about us page and scroll all the way down to where it says plus and then right click and press paste that's going to paste in that contact page hero header and all you have to do is click hold and drag and we're going to drag this to the top once we do that we can exit out of this one right here and then we can change this to about us by just putting in about and we're also going to change this image and we can do that by clicking on this entire section and then going to style and then clicking on the image and uploading files and selecting files and find the folder that says about page and click on it and we can open it then we can insert media and that will change the image all right so our hero header image is done in just a couple of clicks so let's go up here and let's mark it off and let's next add some motion effects to our text so we can go back here and we can exit out of this and we're gonna have this text slide in from the left and slide in from our right but first let's remove this button because we're not gonna need it so just right click here and press delete and then we wanna click on this text here and then go to advanced and then under motion effects we have all these really cool motion effects and we can choose any of them like fade down or fade up or fade to the right we want to choose slide in from the left so it slides in from the left and then we're going to make that duration fast so it does it quickly and this one we're going to do the same thing we're going to go to advanced in motion effects and we're going to go up here and we're going to make sure it slides in from the right and we're also gonna make that fast we're also gonna delay it a little bit so we're gonna delay it half a second which is 500 milliseconds so this one will go first and then this one will go next alright so that's looking awesome we can scroll down and see what else we want to change and maybe we want to change this maybe we want to change these columns it's super easy all we'd have to do is click hold and drag to rearrange and change them just like that alright so let's see what we've learned so we can go back to our sheet and we learned about motion effects and we also learned how to swap columns around so let's go back to elementor let's see what else we might want to change to this page i don't like this bottom section so i'm going to remove it and maybe i want to add a different section here so let's click on the s and let's go to blocks this time instead of pages and we can insert any of these blocks here into our website in just one click maybe i want an faq block so go to faq and we can search for one that we like and i really like this one so i'm gonna click on it and then just press import block and that's going to import this faq block right into our page and we can click on any of it and we can edit it right here it's beautiful and it's already designed and made responsive so it's going to look great on all devices and now if you remember from our home page we also saved a testimonials section and we want to insert it in right here so just click on this folder and we can go to my templates and we see that this testimonial is saved and we can just insert it like that and press yes and now that testimonials is going to be inserted right into our website all right so we're going to scroll down and actually want this testimonials above the faq so i'm just going to click hold and drag and let it go and now i think that's a much better order and i'm really liking how this about page looks so let's see what we learned so we learned how to insert a previously saved element which was our testimonial section and we also learned how to import a new block which was the faq block next we're gonna see if this about page is mobile friendly so let's check that out let's click on elementor and let's see our responsiveness by clicking on responsive mode and we can go to tablet and because we copied this section it's already responsive and the tablet is looking really really good and we could go to mobile and the mobile also is looking really good and there's no changes that we need to make all right so let's just click on update to update all of our changes and let's preview our changes to see what they look like and we can see that animation right there which is looking cool and our about page is looking great so now we can go to our sheets and we can mark that off all right next we can close out all of those tabs and go back to our home page the next thing that we're going to do is we're going to set up our shop page our shop page is the one that we named store up here and this page is different than our other pages and we can't edit it in the same way as our other pages because it's set by woocommerce so because this is a special page set by woocommerce we can't edit it in elementor so let's see how to control it so first i want to show you how this page is set up inside of woocommerce so let's go to our dashboard and then we can go to woocommerce and then settings and we can go to our products and then we can see that this shop page is a page that is named shop and it's set right here we can actually set our shop page to any page that we want but obviously we want to keep it as the shop page besides the shop page there are also two other pages that are handled by woocommerce and we can see that by clicking on advanced and we can see that it's the cart page and that's a page named cart and the checkout page which is a page named checkout alright so let's go ahead and look at these pages by clicking on pages and we can see all three of the pages we can see the cart page the checkout page and the shop page right here so we're going to open up the cart page in a new tab by just right clicking on the view and open link in new tab and then we're just going to view the checkout page so just view this page and we see that we're not actually on the checkout page and that's because nothing is added to our cart so let's just return to shop and let's click on a product and let's add to cart now we can go up here and we can actually visit our checkout page by clicking on checkout and now we can see this checkout page and we can also see this cart page this cart page if we refresh it we can see all of the products in our cart and then once we proceed to checkout it goes to this checkout page right here but we can see that there's a problem on both the cart page and the checkout page on both of these pages it says cart dash 2. and on the checkout page it says checkout dash 2. we only wanted to say cart and we only wanted to say checkout so all we have to do is click on edit page for both of them so just click on edit page and also click on edit page and what we can do is we can edit this url slug under permalinks and just remove the dash 2. once we do that we can update and then we can go to the other page and remove the dash 2 and press update alright so let's check out those changes that we made and let's go to our main website and let's go up here and let's see if the links have updated and they have not and what we can do is we can go to our store and we can add another product because that will refresh our sites let's just click on another product let's add another product now if we view our cart it's working so we see it's our website dot com for slash cart instead of cart dash two and then if we go to proceed to checkout it goes to checkout and everything is working perfectly so let's go back to our woocommerce settings by clicking on our dashboard and then going to woocommerce and then going to settings and now we can click on products and i just wanted to show you that you can change most of your ecommerce settings here like under weight unit you can change that to pounds or under dimension unit you can change that to inches then we can click save changes and next i want to show you how to change your currency so you can go to general and we can add all of our store address zip code we can also change where we sell to in which countries and super important we can change our currency so i'm in the united states so i'm going to leave this as is but you can change it to anything that you want so if we scroll up we can see all other woocommerce settings up here and this is how you control your woocommerce settings for your entire store next we're going to learn how to design and control what the shop page looks like so let's click on pages and we're gonna scroll down and we're gonna go to shop and we're just gonna right click and we're gonna open up in a new tab then we can go up here and we can see we have the same problem as last time we have our website dot com forward slash shop dash two when it really should say our website dot com forward slash shop so the way that we can change that is we can go back to our pages and we can click on shop where it says url slug over here we just want to delete the dash 2 and we want to press update so we can exit out of here now and now we can go back to our website and we can click on our store again and we can see that the url works but the shop doesn't actually work we can change this by once again adding another product to our shop so we can go to the plants category and we can click on any image and let's add it to our cart and that's going to refresh our products so now when we go to our store all right and that did work that refresh our shop sometimes it won't work for you though so you have to go to your dashboard and then you scroll down and go to settings and permalinks and you scroll down and click save changes and that's going to refresh all of your links so now let's go check out our store one more time and click on store and your store should look exactly like this now so next we're gonna learn how to design this page this page also shares the same design as the product category pages so this page will have the same design as this page and i'll also have the same design as this page in order to change it all we have to do is go back into the dashboard and then scroll down and go to appearance and customize and then we can click on woocommerce and we can click on product catalog now it's going to open up that page for us and we have all the settings over here for example for our shop columns we can add only two columns and that will change it for both this page and the product category page we can also add six columns to it if we want if we have ton of products but i like it three and we can also change how many products per page so maybe we want six products per page and if we scroll down here we can see that we have two pages of six products each again i'm just going to keep it as 12. and finally we can change all of these elements right here by scrolling down a little bit and we can click and hide any of them so let's say we don't want to show category and we don't want to show ratings and that will remove it right here maybe we do want to show the description for it and maybe we also want to show add a cart button now i don't really like that that much so i'm just going to keep it as default by hiding those and we also can click hold and drag any of these around so i want to put the price above the title and we can have that effect right there but again i liked it how it was so i'm just going to change that back and re-add the category and the ratings the other change that i want to make is to scroll up and we're gonna sort the page instead of default sorting we're gonna sort the page by most recent and this is gonna make it so by default our newest products are gonna show up right here at the top all right let me show you one more thing we can go back and we can go to product images to change how these images look what i want to do is make this image higher resolution so i'm going to change the thumbnail width to 600 and that's going to make the thumbnails look much better you can't really see the change right now but on higher resolution devices like larger screens it's going to look much better we can also scroll down and here we can change the shape of our images so right now they're square they're one by one but we can go to custom and now this changed to four by three but we can also change it to two by three aspect ratio and maybe if you have something like really long images this might be a really good option for you but i really like one by one so i'm just to click on that and keep this as default so let's publish these changes and we also want to make sure that our page looks good on tablet and mobile so just click on this button right here and we can see that it looks pretty good except for we have this gray background it's kind of hard to see and we just want it to be all white we want it to be white here and white here so the way that we can change that is we can go over here and we can press back and we can press back again and we want to go into global right here and then click on colors so next we're going to scroll down and we're going to go to content background and click on it and scroll down again and we're going to make sure this is white so we just click hold and drag all the way to the top corner and now it's white and we also want to make sure that it works great on mobile so we click on the mobile icon and we can scroll down on mobile also and we can see or maybe you can't see but it's a very very light gray and it's white right here and that was the same as the tablet it was really light gray and white so you might not be able to see this on the video but we can definitely see it in real life so we want to just click hold and drag and make it all the way white now it's white here and white here all right so that looks perfect let's go ahead and publish those changes by clicking on publish all right so now our shop page looks really great on desktop tablet and mobile so we can exit out of there and the next thing that we're going to learn is how to add and edit products the first thing that i want to show you is the product category so just hover over products and go to categories and now we can see all of the product categories on our website so we have a cactus category in a plants category if for example you had a t-shirt business you'd maybe have a men's category in a woman's category so we can easily add and delete categories here to delete a category all you'd have to do is hover over the category and press delete but i'm going to cancel that out and that would delete your category to add a category you just go over here and you can add a category i'm just going to add in succulents and we don't need to do anything else all we need to do is click add new category and we can see if we scroll up here we have a new succulents category the next thing that we're going to do is we're going to add products to our website so all you have to do is go over to this all products and click on it and we can see all of our different products on our website if we scroll up we can add a new product by just clicking on add new and we can type in the product name right here i'm just going to paste in a product name and we can also put in a product description so i'm just gonna put in a product description and there are actually two different product descriptions a short product description and a long product description so this is the short product description this is gonna show up right besides our product and this is the long product description this is going to show up underneath if the user wants more information so we're just going to add short to this and i'm going to paste it in there so you can see which one is short and i'm just going to add long to this to show you where this shows up as the long description it'll make more sense in a second next if we scroll down we can start adding prices and other options right here so we want to add a price we're going to put in 154 and right here you can add a sales price you don't have to but if we add a price here it's going to show up as on sale so we can put the sale as 145 to give a little bit of a discount and next we see these two different options virtual and downloadable we're not really going to go over them too much but a virtual product is something like if you're selling something that didn't need to be shipped and it was intangible for example like a coaching lesson for 99 you would check off virtual for downloadable it's a little bit different where let's say you're a fitness trainer and you're selling a pdf once your customer bought the pdf they can automatically download it and it'll get sent to their email all right for us we're just keeping it really simple there are tons and tons of options that you can do here and you can make your shop any way you want but we just have a really simple product and we're also gonna add it to the category as a succulent so this is gonna show up in the succulents category and finally the most important thing is our product images so if we scroll all the way down we can add a main image right here and we can set product image so now we can upload our files so i'm just going to click on upload files and select files and in the downloadable zip in the description below you can download all these images but we're gonna click the first one and then we're gonna hold shift and we're gonna click the second one and that will allow you to select both of them then we're gonna press open and it's gonna upload both of those files so we're going to set this one as the main one so just click on that and we're going to set product image then we can scroll down and the next thing that we can do is add different images as the product gallery images so we can just go ahead and add them and i'm going to add that other one right here and then i'm going to add a few more by scrolling down and holding control if you're on a pc or command if you're on a mac and just click and that will select an additional one and then still hold ctrl or command and click and that will select all three and then we can add to gallery all right once we've added it we can update this by clicking on publish and then let's open it up in a new tab by right-clicking and open link in new tab and now we can visit our product and we see that it's on sale from 155 to 145. we see the name we see the category that it's in we see that we can add it to the cart we can hover over it and zoom in and we have all of our product gallery images right here and it's looking awesome it's also up here showing the sale badge because we have it as a discounted product and this is where our short description shows up and if we scroll down here this is where a long description shows up so if you wanted to give additional details you can add it here and this would just be a summary of it if we wanted to delete any of these images here or rearrange them we can easily do that so we can just go back to our edit product page and we can scroll down and let's say we wanted to rearrange it maybe we wanted this one first then we can scroll back up and we can update that and now we can refresh our site right here and now we can see that that one appears first but let's say that we didn't want these two images here we can easily delete them by going back scrolling down and let's delete those two so let's delete this one and this one and now when we update those will be deleted so we can just click on refresh and now we can see that that's deleted and this is looking really good we can zoom up and we can see that we added a product to our website now if we scroll down we can see these reviews so we can click on them and let's review our product let's give it five stars and say amazing plant we can submit our review and now we have this plant as a five-star rating we can also open up the store and because we sorted by latest we can see this latest product right here and we can see the review right here all right so now let's visit our home page by clicking on our logo and let's scroll down and we don't see our product here and that's because it's not yet a feature product we can easily make it a featured product by going back to our website and clicking on all products and all you have to do is click on the star to make it a feature product once we do that we can go back to our main website and click on refresh and now that's going to show up on our home page as a feature product all right so let's go ahead and check out our deals page let's see if it updated there it is on sale so it should show up and we can see it right here so it's updating in multiple places which makes your life much easier so there's one thing left to do if we go up to our menu we don't see the succulent category right here we can easily add that by going to our dashboard and then scrolling down and going to appearance then menus we want to make sure under screen options up here that product categories is selected which it is then we can scroll down and under product categories we want to add succulents so we want to add it and add it to the menu then we want to click hold and drag right under cactus and we can open that up and we can capitalize it once we do that we can save menu and we can go back to our website and visit our site we can exit out of here and we can hover over our menu and we can go to succulents it's right in there we can click on it and we only have one product in there but it's looking pretty good the last thing that i want to show you is how to remove products from our store so all we have to do is go into the dashboard and we can go to products and then to delete anything all we have to do is hover over any of the products and we can click on trash if we want to delete multiple products all we have to do is mark them off right here and we can go up and under bulk actions we can move to trash and apply so that's how we can delete any of the products that we want and the last thing that i want to show you is how to moderate those reviews that you got on your website so what we can do is click on comments and we can see that review that i left and we can move it to trash we can unapprove it so that it won't show up or we can reply to it i'm gonna reply to it and i'm just gonna say thanks click reply and now that reply will be on the website so let's go ahead and check that out by clicking on this date over here and now we can see that right on our website amazingplant thanks right on our product and now i think it's time for the big moment let's try to make our first store order so let's add this to cart and we can view our cart and we can see we have all of these in our cart so we want to proceed to checkout and if we scroll down we can see that we can't actually make a payment yet and that's because our shipping and our payment methods are not set up yet so let's see how we can configure that all right so let's go back to our dashboard and let's open up woocommerce and then settings and then let's check out the shipping tab right here and we're going to add a shipping zone and click it and for the zone name you can put anything that you want i'm just going to put usa and for the regions this is where you'd want to ship so we can start typing in california or if you want you can just start typing in all of united states so this would allow us to ship to everywhere in the united states and we can add more or subtract more as needed all right and below here we can add multiple shipping methods but we're only going to add one so everyone in this region in the united states will be able to see the shipping method that we add so let's add a shipping method so here we can choose between flat rate or free shipping or even local pickup we're just gonna offer a simple flat rate shipping and we're gonna click on add shipping method once we do that we can edit it by clicking on edit all right so for here we can make it taxable or non-taxable i'm just gonna make it non-taxable and for the cost we can just put something like seven dollars for the flat rate shipping and so what this means is that everyone in the united states will be able to have this shipped to them for a flat rate of seven dollars all right we can also have rules if we hover over this question mark we could put something in here like seven dollars times the quantity qty and what that will do is however many products we have in there will be multiplied by seven dollars and you can check out how to do that by hovering over this question mark so if we had two products in our cart then shipping would cost fourteen dollars for your user we could also do something like shipping fee as percent of the total order and we can see how to do this by hovering over this question mark but i'm just gonna leave it seven dollars flat rate and save changes all right so we're charging seven dollars to ship anywhere in the united states and that's all set up and the next thing that we want to do is set up our payment methods so just click on payments up here and now we can see we have these different payments so we can enable or disable direct bank transfer we can enable check payments or cash on delivery just by clicking on this right here but what you probably want to do is you want to take credit cards on your website and that's the beauty of having plugins we can easily get a plug-in and be able to take credit cards on our website so what we're going to do is we're going to go over here and scroll down and go to plugins and click add new and what we want to do is we want to search for stripe because that's what we're going to use we're going to use stripe s-t-r-i-p-e and we're using stripe over paypal because stripe is much better the paypal plugin was recently updated and it's absolutely garbage and we can see right here that the stripe payment only has 3 out of 5 stars but it's so much better than paypal so we're gonna install that now i'm gonna show you why it only has three out of five stars and we're gonna fix it so just click install now and by the way paypal only has one star and that's why we're gonna activate stripe once we do that we can go back to woocommerce and we can go to settings and then we can go back to payments and now because of that plugin and the beauty of wordpress we're going to have all those stripe payments available but we only want to focus on this one the simple one and so we're gonna enable that and then we're gonna set it up so just click on setup and if we scroll down we wanna make sure that test mode is enabled so we can test our shot before we do anything and it's asking for these two keys the test key and the secret key in order to get those we have to go to stripe.com so just open up a new tab and go to stripe.com s-t-r-i-p-e dot c-o-m and press enter then you wanna sign in you might have to create an account but i'm not going to show you how to create an account because it's super easy you guys know how to create accounts and i'm just going to log in right here and creating an account is super fast it only takes two minutes and you don't have to do anything else and then you can also connect that to your bank account and send that money directly to your bank so now we want to enable test mode so just click on this test mode up here to enable it and then we see this publishable key and we just want to click and copy it and then we want to go over to our woocommerce and paste it here and then we want to get our secret key so just click on this and press copy and we want to go over here and press paste now that we have both of that we want to scroll down and press save changes so now let's go check out our store so let's go and visit our site and let's click on our store and let's click on our product and now we can see this huge buy with google pay button and this is probably why they got only three out of five stars because this is just terrible so we can add this to cart and then view our cart and we can scroll down and again we see this really ugly button we'll show you how to delete that in a second and we can proceed to check out all right next we can scroll down and we can put in a test credit card so i'm just going to speed this up but i'm going to fill out all this information and we're going to place an order so here your user could add in optional notes and that will get sent to your email and now we're going to put in the test credit card information so we're just testing your website to see if everything works so just paste that number in there and then put an expiration date but put it after today's date and then we could just put in a random cbc numbers right here all right and we're going to put in just a test note just to show you what this does and now we can scroll down and we can place our order all right so our test order was successful but this is what it's really gonna look like when your customer really makes an order so you're gonna get an email as a store owner and the customer is also gonna get an email confirming their order and your customer is gonna be able to scroll down and see all of the products that they have and the total and where it's shipping to and we can see the seven dollar shipping fee here as well so this is the email that the customer is going to receive something that looks like this and this is what your email is going to look like as the store owner so it's going to say new order and it's going to tell you where to ship it and it also has the test note in here so that's how you create a test payment on your website so you can test out to see if your website is working properly so now we're going to configure a couple of settings to make our stripe integration and experience much better for the user so we're going to go into the back end and then we're going to go back to woocommerce and settings then we're gonna click on payments and then we're gonna scroll down and click on manage where stripe is all right so let's just go up here and right click and let's open a link in a new tab and let's go to our checkout to see what it looks like and right now we don't have any items in our cart and that's because we just made an order and it cleared all of those so we can just click on plants and let's add something and we're gonna add this to cart we're gonna get rid of this really quickly and let's view cart and let's proceed to check out so the first thing that we're gonna do is we're gonna get rid of this button so we can go up here and we can scroll down until it says enable payment request buttons and we're gonna uncheck that and that's gonna disable all of those google pay buttons from everywhere on the website so let's click on save changes and let's refresh this page to make sure this button goes away all right perfect now if we scroll down we also want to get rid of this save payment information and we want to make this look much better so what we can do is we can go over here and again we can scroll down and where it says enable payments on saved cards we can uncheck that and then we're going to try the new payment experience to make it look much better and then we're gonna save changes and now when we look at our checkout and refresh it's gonna look much better over here and that looks much cleaner and much more modern so the next thing that we're gonna do is we're gonna get rid of this test mode so that people can put in their real credit cards and actually give you a payment so if we go over here to settings and we scroll down here we're going to disable enable test mode and now it's asking for a real live key and our real secret key so we can go back to stripe and we can disable test mode and we can copy our live key by just clicking on it and going over here and pasting it and then we can go back to stripe and click and copy our secret key and then going over here and pasting it then we can scroll down and click save changes and we can go up here to checkout and we can refresh this page and now it's going to work with a real credit card and we know your website works perfect because we use that test mode in order to test it properly so now if anyone enters in their credit card and places an order it's actually going to get sent to your stripe account and from there you can send that to your bank account so now you can accept credit cards on your website there's one more change that we may want to do and that's this text right here so we can change that by going back to our dashboard and then going and scrolling down and going to appearance and customize and then we can go to woocommerce and then we can go to checkout and if we scroll down this is the text that shows up right here and we can change any of this text and we're just going to paste in right here secure payment processed by stripe this is going to give the user more peace of mind that your credit card is secure and it's being processed by a real company with a super good reputation all right so let's remove the text right here and make it much cleaner and now it looks amazing so we can publish those changes and we can exit out of there so let's take one last look at the checkout so let's refresh this so we can see our changes and this would be our final version and i think it looks perfect all right so now we can exit out of stripe and the next thing that we're going to do is manage our orders so let's exit out of here and to manage our orders all we have to do is go over to woocommerce and click on orders we can see that we have one new order here and that was from our test order and we can just click on it so right now we can see that the status is processing if we want a quick overview of it we can click on this i and this will show us some details like where to ship it and what they bought once we do ship it we can click on this completed and that will complete the order another way to do that is we can exit out of here we can click on this order link right here and that will give us a more in-depth summary of everything and again once we have completed that order once we have shipped it out we can click on this and we can press completed sometimes we need to cancel the order or refund the order so we can click these and also do that from the same place but right now we're going to complete this order and once we do that we can click on update and now an email will be sent to the user that that order is being shipped we can also go back to our orders page right here and we can see that the order status has been completed and if you have a whole bunch of orders they'll all show up here and you can mark them all off as complete by just clicking on each of them and then going to the bulk actions and then change status to it and then everyone will get an email saying that their order is completed and has been shipped all right but how do we get more orders i think we can go over here to coupons and let's create a new coupon and all we have to do is click on add coupon right here and let's say we want to add a 10 coupon so we're just going to type in 10 off with no spaces and we can write anything here as long as it's one word and then we can go down here and we can change it to discount type and we're going gonna give it a percentage discount and we're gonna put in 10 for 10 off if we want to allow free shipping or change the discount we can do that we can also put in an expiration date but we're not going to do that so we're going to click publish and now let's go back to our cart by visiting our site and going to our cart and viewing our cart and now you can give that discount to anyone on social media or through email or anywhere else and we can put in 10 off right here and apply the coupon and we can see the discount right here but where else besides social media could we advertise this new offer let's say we want to show it to all website visitors and to do that all we have to do is go to our dashboard then go to appearance and customize and then under woocommerce we can go to store notice and then we can enable our store notice right here and then we can change this text and we can paste in something here like limited time offer get 10 off all items with code 10 off then we're going to click on publish and let's open up a new tab and let's check out what that looks like then your user can read it and get 10 off then dismiss it and it won't show again so for example we go to about that won't show up again and i think that's a super cool way to alert all of your users to a sale all right let's say our sale is over though so we want to go back to our customizer and disable the store notice and publish our changes and that made everything back to normal all right so we can exit out of there so let's say that you had your website for a little while and you're getting a whole bunch of sales how do we get some insight within those sales what we have to do is we have to check out the analytics so we have to go into our back end of our website and then we can click on analytics and now your website is probably gonna look like this with zero sales right now but let's say it's been a few months and you're getting some sales so what we can do is we can go ahead and check out a date range by clicking on this date range and we can go to custom we want to select a date range for last month and we can just do the entire month by clicking on the first and the 31st then we can scroll down and we can actually compare this to the previous period so this is gonna compare it to the month before that and we can click on update and now it's going to show us all of our sales for the month of october and we can actually see the increase from the previous month and we can go down here and we can see that the blue line is october and the green line is september and this is how many sales we're getting and this is the amount of orders we're getting right here we can see if we're on the right track if these numbers are going up so 4 600 one month and 7 500 the next month or 45 sales one month and 69 sales the other month so now we know we're doing really good we can also check on different products and see how they're doing by clicking on products and here we can see the items sold and we're up 54 from the previous month and we can scroll down and we can see right here all of the items that sold so these sold the most so we might want to order a whole bunch of these and if we go all the way down here these sold the lease so maybe we wouldn't order as many of these this way you can get all of the data for your store and you can keep on doing better and better and better because you have that information of what sales and what doesn't next we can look up the orders tab so just click on it and here we can see the average order value this is super helpful to know how much we can spend on marketing for example you or a digital ad agency might want to know how much an average order is in order to know how much they can spend on an ad and what makes it profitable for you the last thing that we want to check is the categories performance so we can click on categories and we can scroll down and we see which categories are doing the best succulents are not doing that great but cactus is doing really great so maybe we want to add more cactus to our website and this is going to help us be smarter about the products that we hold in our store so that we can make more and more sales over time so there's one more step for this tutorial and that is logging out so all we have to do is we can go and click on our website and this is completely optional you don't have to log out but we can view your website as your user would view it by just hovering over your name and pressing on log out then we can go to the front end of our website by removing all of this so now we've removed that black bar at the top so you're not logged in anymore and you're viewing the website just as your user would view it so we've created this website step by step with no steps skipped and it's absolutely beautiful you guys should be super proud we probably put in 300 to 400 hours of work into creating this tutorial for you guys if you do make an online store using our guide please feel free to leave it in the comments below we'd love to check it out please remember to comment rate and subscribe i'm tyler moore thank you so much

Channel: Tyler Moore

Views: 399,942

Keywords: make an ecommerce website, create an ecommerce website, build an ecommerce website, make a wordpress ecommerce website, create a wordpress ecommerce website, wordpress, wordpress store, wordpress online store, make a store, create a store, build a store, wordpress ecommerce, wordpress ecommerce website, wordpress ecommerce tutorial, wordpress ecommerce website tutorial with woocommerce, woocommerce, how to create an online store, how to start an online store, ecommerce website

Id: facMcbWB0jI

Length: 132min 46sec (7966 seconds)

Published: Tue Dec 07 2021