How to Make a WordPress Online Store - (Step by Step)

in this video we're gonna show you how to create an online e-commerce store step by step with no steps skipped my name is Tyler and I'm here with Edmund well he is a web developer from Florida why are we making this website and WordPress and what can it do thanks Tyler yeah so WordPress is the most popular way to make a website online one thing you should know is that it'll be super easy you don't need to know coding or anything like that if you have basic computer skills you'll be able to follow along and make the website so yeah we can add so many things we're gonna add a shopping cart a way to take payments we're gonna add all of your products we're gonna show you how to put in a logo we're gonna show you how to design your website so that it could look like anything in the entire world we're gonna show you how to do reporting and keep track of all your sales and do shipping but why should even people be using WordPress who uses WordPress and how popular is it right so WordPress is actually really safe and really trusted big companies like Best Buy CNN the New York Times they all use WordPress and even though big companies use it that doesn't mean it's complicated if you follow along it'll be super easy and we're gonna show you every step that you have to take and by the end of this video you're gonna have a fully functioning website with your products that you can sell online and they can be physical products they can be downloadable products or even a virtual service that you want to provide right and you can make this on a Mac or PC we wouldn't really recommend trying to make it on your phone you can view the website on your phone it's completely mobile friendly and responsive and all of that but why shouldn't people will try to make it on their phone or tablet so you know your computer browser has a lot of built-in features although software we're gonna be using this online and a lot of times the mobile browsers are missing some of the features that let you edit websites live so definitely do it on the computer if you can right so is there anything else that people should know before we get started before we start creating this website um the only thing you should know is that it's okay to make a mistake you can always go back and re-watch the video we're gonna try to make it as clear as possible me and Tyler are available if you have any question you can email me I put your site at gmail.com or go to my website and leave me a message and it will be more than happy to answer any question you have about this video so I'm gonna share my screen with and Manuel and we are gonna go over what we're going to learn so can you see me again can you see the screen looks good alright so we're gonna do all of this we're basically done with the intro so I'm gonna mark that off the next thing that we're gonna do is get our domain name and hosting and this is the only part that costs money what is a domain name and hosting so the domain is just the name of your website so for example Google's domain is Google com Best Buy's is bestbuy.com so domains can be a common thing like that I'm sure you've seen a ton of them so we need to have a domain for our website that shows where our website is located how people can find it and hosting is pretty much just the storage for our website so all of the pictures and tags and videos and things like that that we want to upload to the website they have to be somewhere where people can always look at them so hosting is just a really big computer somewhere else that is always online connected to the internet so that when someone goes to your domain they can see everything being built on your website right so domain name is basically your website name like Tyler calm as mine google.com I create your site calm is yours and Hosting is where all the files live right so if you didn't have hosting your website would come up blank so the next things that we're gonna do is we're gonna install WordPress and log in and learn how to change your password but the really fun part is we're gonna start adding your products and adding the shipping methods and the payment gateways and getting security so that you can actually accept payments online and manage orders and do all your reporting and things like that but what website are we gonna make even though you can make any design anything what type of website are we gonna make so we have the website right here and we can see it even though you can change the design to anything that you want we're gonna be making this specific website right here and why is this website so great and why should people care to do this so this is a fully functioning website that anybody can build without any prior knowledge so you can see that it looks like a completely professionally done website you have your featured products you have testimonials form social media links everything you want and now if you don't particularly like this design you can change everything about it you can completely redo design and we're going to show you step by step how we made this one and you can apply those same steps to build any kind of website that you want to build so right here we can add the product to the cart and we can see it up here and then we can view our cart and your customer will be able to apply coupons and we're going to show you how to do that and add shipping and we're gonna proceed to checkout and they can enter in all of their information here and their credit card number right on the website it doesn't take you to a third-party PayPal even though we'll show you how to do that and they can place order you'll get an email and that order will come up and then you can ship the product or have them download the digital thing that you are you're offering and it's just a really great concise simple tutorial on how to do all of this and I think it's gonna be really awesome yeah it's gonna be great we're gonna do all of that the first thing that we need to do is get your domain name and hosting and we can do that at hostgator.com so we just open up this right here and go to Hostgator hey Cho st GA t o r c om and press enter the next step is to choose what you want and there's all these different options but we need the least expensive option because you can always upgrade later and I really like Hostgator what has been your experience there pretty good I think they have like a ninety nine percent uptime guarantee which means that most of the time your website is pretty much always gonna be up some places they offer really crappy hosting and then what happens is that every once in a while you'll try to go to your website and it won't be available because they're having some kind of issue with your sure right or a be super slow I've been with them for since I was 19 so 13 years and they've been really great they offer a live chat which sometimes you gotta wait a little while for email support phone support all that now we have all of these different options here like web hosting website builder WordPress hosting VPS and dedicated and you think that you'd use WordPress hosting but you can just go to web hosting because WordPress hosting has all these bells littlez that i don't think you really need and you can always upgrade later yeah and pretty much the most important part of what they try to sell you on WordPress hosting is that word pressures already installed and it's more expensive for the same thing you reading with web hosting we're just gonna install WordPress ourselves so just click on web hosting and just scroll down a little bit then we have three different plans the hatchling plan the baby plan and the business plan I think again it's the same sort of thing you don't need any of this stuff and you can always upgrade later if the difference between the hatchling plan and the baby plan is the baby plan offers unlimited domain names so you can have like your friend's website your dad's website your mom's website my client's website all on there if you're planning to be a web developer then go with the baby plan and also for all of these plans and other thing that's good about host Gators they add a free SSL for you so your website is much safer and as a matter of fact because Google now takes it into one of the things for ranking one of those signals for ranking this will actually improve your website's rank because it's safety exactly yeah and the SSL will show this little security lock up here instead of saying not secure which people would freak out about probably if they're on your web site especially if you're trying to on a store trying to buy something and that thing is read it says not secure you click on it and it says you know your information is not secure you're probably not going to put your credit card that's essential you'll never get any sales probably if it's not secure and they're entering in their credit card so we're just gonna click buy now for the hatchling plan then it's gonna give you two options I already own this domain or register a new domain when would someone choose I already own this domain over register a new domain right so maybe you have the domain you've had for a while maybe you only use it for email like a domain that you got from GoDaddy your Hostgator itself or another website so if you already have a domain that's when you would use that so one question that we get a lot when somebody uses a different domain is that hey I did other steps I use my own domain and now my website doesn't work so if you are using your own domain you need to log in to whatever company you're using for your domain you need to figure out where the name servers are that domain and you can always call their support or chat support of that business I mean they'll tell you what the main servers are and you know Hostgator will give you their own name servers and you can just update them and the name servers just a little line of text that tells your name how to connect to your storage right exactly so if you bought a domain name from GoDaddy a long time ago and you want to connect it now to Hostgator you're gonna require one extra step and that step is to tell GoDaddy that you are hosting with Hostgator and to just plug in a line of text so the first step would be to get Hostgator then after you do that the second step would be to connect your name server if you already own this domain if you're registering a new domain and and you can live-chat them and be like hey I bought it from GoDaddy and how do I connect this and it's a super simple thing to do so but if you're registering a new domain name like we are today how to create a website com then it's gonna be super easy to do it's all gonna be automatic so we're just gonna go with the dot-com then it's gonna ask you about domain privacy protection and how well first of all it's gonna say do you want all these other things and they try to sort of encourage you to get all these online space tech but it's not necessary in my opinion people don't copy your business exactly and do the dotnet so I don't think it's really necessary yeah most people are used to calm so they don't remember your name there's assumed it's calm very rarely do you see a company use different kind of ending to their to their domain unless it's you know it's something that they're doing for marketing because it's like catchy the way it sounds which is like that but for now um businesses or websites com is gonna be the best way to go and people will use like dot space sometimes as cool or tech org if you're doing something if it makes sense for your website if it makes sense for the marketing yeah one good example of that is Google's parent company alphabet their domain name is ABC dot XYZ so dot XYZ is a super weird domain ending but because their company name is alphabet they have ABC XYZ it's kind of like oh that's awful bit so it's marketing but calm workforces that if you just think it's cool then do it and if you're gonna love it then just but most of the time it's it's calm how would you explain domain privacy protection yes so domain privacy protection is something that I also get a lot of messages about it's not required and it's nothing bad if you don't have it so when you make a domain it's like starting a business or buying a house you're buying your house on the Internet and just like a house your domain has a public record which shows where it's located who owns it and their contact information so when you make a domain your email and phone number and that kind of stuff is linked to it and that's public information it's public information for anybody and it's nothing bad what's gonna hack here anything or go to your house because of that but it is available a lot of businesses research recently open domains because they know that if you just opened a domain you probably need a website and these companies will start calling you to try to sell you online services and a lot of the times you know you have a ton of companies doing the same thing and you can you know you might get two or three phone calls per day and that might last one or two weeks it's happened to me when I see an unknown number I usually just you know if it's out of state especially I know that it's most likely an ad I just don't answer it but if it's gonna bother you a lot then you can pay the extra you know dollar for it the main privacy and then it won't show that information yeah and so I've gotten complaints on my channel saying hey Hostgator sucks so much why are you recommending them but because I've gotten twenty calls or something in the first week but it's it's really not hosts Gators fault but if you add the domain privacy protection it's gonna be so people can't see any of that but I'm just gonna uncheck it because I want you to see how inexpensive it can be to get a website online and start accepting payments online so I'm just gonna uncheck it but you know if you definitely don't want any more spam calls I know spam calls are so annoying and I already get like a million of them a day anyways but the next thing is the plan so do we want the hatchling plan yeah that's what we decided on and then the billing cycle how do you explain the billing cycle yeah so it's it's like anything that you buy the more you buy up front you know the cheaper it'll be you know in total for what you're getting so for example if we do 12 months it's 35% off like it's showing right there so it's up to you you know if you really invested in you want to really establish your business you might want to apply a whole year so that gives you enough time to work on your website and try some marketing and try some different things if you're just practicing and you're not sure you can do one month just practice yeah so it costs the least if you do one month upfront but more in the long run and if you do 12 months upfront and I'm gonna show you how to get an even bigger discount then all of this I have a special code that will give you like 74 percent off or like three dollars a month for one year we're just gonna go with one month for now and then you can enter in your username security pin all of your billing information don't worry this is not my real credit card I get a lot of those emails too so put in californium and then it's gonna say do you want additional services and what do you feel about these additional services the first one is SiteLock that's I think that's probably like a plugin or servers at the ad but if you have an SSL you really don't need more protection in that so I think with the necessary you don't really need site lock website backup we can show you a plug-in where you can set up and do your own backups so that's not really required you right and with the SiteLock monitoring if you keep your WordPress up-to-date which we're gonna show you in the video then you shouldn't have any problems when you get into problems this when your WordPress is like super out to date then there's like security flaws that are known and then so people will try to pack those but as long as you keep it up to date you shouldn't need the SiteLock monitoring so uncheck everything then it says it's gonna be $23.90 which is awesome to have this is the only thing that cost money also and it's awesome to have your website online for that but if you put in save code sav e c.o de and press validate then that's gonna go down to ten dollars and 37 cents but that's just for the first month so you only get that code for the first month and then it's gonna be ten dollars the next month about this is my coupon code so I do get credit hostgator does give me a little bit of money every time someone puts us in helps me make these free tutorials so appreciate that he went to took a course it was like six weeks eight weeks to learn web development it costs them $12,000 to take the course Wow you know so you know you learned that so that he can make websites but in this video you'll see how you can make any kind of website you can even use what you learn in this video to make a website that's not ecommerce you can start selling and you know it's a free tutorial that will teach you 90% of what you need to get a perfectly running website and the other 10% is if you want to do custom but you probably won't need right and yeah if we go up here we can also see that this is all turned to 60% off there is a special code that Hostgator that contacted me and they said we'll give your users 74% off or something crazy for 12 months and that code is start code so it would be $48.95 for entire year but if you type in start code that goes to $36 for the entire year so three dollars a month which is awesome we're entire year yeah and if you think about it you know most places that you go to a bio domain just a domain alone there's usually around ten to fifteen dollars just for the domain so the fact you're getting your domain you're getting an SSL and you're getting hosting for a whole year for thirty-six dollars it's really good yeah I agree and so you have 24/7 365 live chat email support money-back guarantee domain registration and twelve months we're just gonna go with that one it can cost you as little as ten dollars or you can do that's only for one month but you could do thirty-six dollars for the entire year agree the Terms of Service and click checkout now all right so we're done with that step which is getting your domain name and hosting so we're gonna mark that off the next thing that we're gonna do is install WordPress WordPress used to be super hard to install used to have like download it and then hook up an FTP then transfer all the files and then make a MySQL database and put in all the credentials and just like set it up correctly but now it's just like so easy so right so yeah and if you're not familiar with design that probably off sounded like Chinese but now it's literally a button that you just click you click install and installs itself you plug in what username and password you want yeah yeah super-easy so to do that just go to hosting and scroll down and go to launch quick install Bend you're gonna want to click on WordPress and we can exit out of this billing right here and then it's gonna say select your domain name and that's really easy I have a whole bunch of domain names but you probably only have one so I'm just gonna click my domain name and we want to leave this directory blank and why do we want to do that right so here you're saying you know we're on the storage Q that we talked about you know the hosting do you want to put WordPress and you want WordPress to be right on your main website so they will go there they can see whatever you're making right there without having to go to any extra like - home or - about because we're gonna use that for pages now another question I get a lot is some people tell me hey I already have a website and I want to update my website without a changing which there right now it's all done so that is a good case in order you would use this you know instead of a selling WordPress on your website you might want to install it on like slash new you know it's not there build everything you want to build and then transfer it to your main website when you're done but for a brand new website like what you're probably doing right now you want to be blessed right exactly so we're just click on and I want to show you this look look how much they're charging to install all this stuff like $99 and $1.99 and 399 and trust me we're gonna do it in a much better way than they would do it for you right and if you scroll down and you look the the cheapest option which is $99 WordPress theme credit install WordPress that's pretty much what you're about to do by just clicking next right you're literally about to do that right now we're gonna show you how to do all right so click Next then blog title I don't know it says blog title but they mean website title WordPress did start up as a blog but now it could be anything practically user name you can put in your name I'll just put in Tyler first name last name Tyler Moore you ma just Heather Moore at gmail.com try to get the email address right because if you lose your password and you can just send it to your email and then I'll go there you know but if you don't put in your real email then it's maybe really hard to get into your website so click the Terms of Service and install now alright so what's happening right now right so WordPress is pretty much made a bunch of different files that set up you know your menu which your website menu gonna be what your headers supposed to be what's what are your page is supposed to be how are you supposed to upload pictures all that stuff that would normally take a really long time for somebody who knows coding to build that kind of structure it's already done for you so it'll be done in a visual way where you can just click around and you know get it built and that's what just rapid saw them to our website right it's a content management system which is just a fancy way of saying it helps you manage all of your website content in an easy way without coding or anything so now if most people go to their website right now will it work most of the time Hostgator is pretty fast though you might go to it and they might be working rather than wait but if you get an error page or your boss says we can't find this page that's perfectly fine sometimes it takes a little bit longer for the host and domain to connect usually within two hours it's up if after a day it's still not up you might want to contact Hostgator via their chat or you might want to contact your domain have you got it from somewhere else it might not be connected correctly exactly so it's called propagating your website needs to propagate which means it needs to spread throughout the entire world going from server to server saying that your website exists and sometimes that takes a long time it used to take like 48 hours they used to take like it used to be really slow but now sometimes it takes 10 minutes five ten minutes or sometimes it's instant so it just makes it a lot better so if you go to your website right now and it doesn't work don't freak out it's it's fine it'll work in half an hour an hour you know maybe 10 minutes just give it a little time I've already bought this domain name so mine's gonna work perfectly so I'm just going to go to the site just by copying it I wouldn't recommend clicking on it because they'll take you away from this page yeah yeah and also a good idea is just to copy all this information as soon as you see it copy the information printed out paste it somewhere just so you have it yeah so just I would copy this command C on a Mac ctrl C on a PC open up a new tab paste it and then see if your website works if you get this website coming soon then you are good to go then how do you login well one thing that I want to say if you're coming soon might not even look like this it might look like a white page it might look like a WordPress theme as long as it doesn't say error and it shows you something it means that it works because this this I'm coming soon page they updated they change it so as long as you see something that's not an error you probably did it right right and this is what an error would look like let me open up a new tab type in just a whole bunch of things dot-com this is what you know this I have frontier Internet so they try to like you know do a search for me of this because they couldn't find the the domain name so that's what an arrow would look like so yeah it would go to your search or it would just say this page does not exist one of those too but this is we're good to go and so how do we log into WordPress so here they have an admin login but that might not always be there the only surefire way to login you want to write slash WP for WordPress - admin so ya / WP WordPress - admin for administrator and then we can click enter and then it tells you to login I already put in a username and password but that's not gonna work because that's not the username and password anymore we get our username and password from over here so I'm just gonna copy the password because it's really funky yeah my username is Tyler so I'm just gonna type in Tyler paste that password and press login once we do that we can exit out of here let's let's see what we need to do so we logged in and then the next thing I think that both of us like doing is changing that password right right because that password was super impossible to remember yeah so just a quick brief what you're seeing here now this is not your website this is just the back end of your website where you're going to be doing a lot of the changes and all this stuff that it's showing up right there you don't have to worry about that we're gonna delete all you know extra stuff that we don't need later but right now we can just change the password first right so all this stuff is just like extra add-ons that we're gonna show you how to delete this is the dashboard this is where you make the changes of your website this is not your actual website this is the back end of your website so to change your password just go to users and click on your username and then scroll all the way down generate password I'm gonna hide this because I don't want the internet logging in and I'm gonna put in my password that I could remember it then press update profile so yeah that's it for that so we can go here and we can say that we've logged into WordPress and changed our password the next thing that we're gonna do is delete plugins why would we want to do that right so if you ever bought a phone you know how sometimes it comes with apps that you've never used so when you install a wordpress sometimes the host installs extra plugins that they think are useful but in this case we want to start our own plugin so we're gonna go ahead and delete all those extra plugins or extra apps we have on our website now we can have a fresh start right so basically the hosting companies all the hosting companies they basically get paid to install people's plugins and just like to get the cost of a computer down they get paid to install some apps that you don't really need right we don't need them and we don't want them all popping up on our website right here and it's annoying and so we're just gonna start fresh and start clean so just go to plugins scroll down there's so many things right yeah exactly all these things are extra things that we don't need that's crazy so just click on this and then go to da to be and apply then click it again and delete and apply cool so now all that's gone yeah we're starting off clean and that's super awesome so we deleted our plugins and we're just breezing through these things the next thing that we're gonna do is change our permalinks can you explain what that is yeah so a permalink is just like you know the URL of a specific location on your website so for example right now on this dashboard it's learn how to create a website comm slash the VP slash plugins up HP plugin status equals you know a bunch of mumbo-jumbo if we don't change anything when we go and make the about page for example it'll be learning how to create a website slash dot something or other you know it will be a really confusing name that will be really hard to organize it'll be really hard to put a find it'll be really hard for Google to you know link it somewhere on on search so we want to make it as simple as possible for you for search engines and for customers and we're gonna change the Prem links to just be you know the name of the page that we're kind of create so right so this is an example of that if we go to visit site and we hover over here and press visit site and we go to one of our posts that they automatically put on we're gonna see this like what he was saying this really ugly thing this index dot PHP like when you go to yeah google.com they don't have Google com forward slash index.php slash about they just have google.com slash about the permalinks will fix that so if we go hover over our online store and go to the dashboard and we go to do you remember where it is settings permalinks you guys and then we click just on post name post name is great and then we go to Save Changes then we go to visit our site again and we see hello world it won't have that indexed at PHP will just say hello world and then when we visit our site right now what are we seeing WordPress has a really cool way of between the website for you called themes so this is just the basic theme that they have for 2019 it's really simple it's not really easier intuitive to work with so I think we should probably replace that with a better theme and the theme is the design of your website what it looks like and so this is the default theme or design and it's you know very cool right you know very simplistic but it's not am I and very usable me and not too funny yeah not that fun at all alright so we are done changing the permalinks the next thing that we're gonna do is update WordPress why should we do that well first let's go in go into our dashboard so this is how you get back into the dashboard and go to updates and we can see that we don't have any updates but why would someone want to update right you always want to make sure you know there's on the internet things are always changing there's safety updates bug fixes so you always wanna make sure that you're up to date so that your website is as fast as possible and as safe as possible if you're up-to-date you get all the newest features also so that's really cool so we're up to date that's great and mark that off now we're gonna delete our pages and posts by default WordPress installs pages and posts into your website pages are like your about page your contact page your services page your store page what would you say a post was if you're blogging then that's when you would be using posts so let's say that on your website you wanna you know have some blog post or some articles about what your stores about and you can definitely use your post to share that information like you said there's some demo ones that don't really have any real information in them so we wanted to lead them so that when somebody comes to our website they only see what we put they don't see some you know pre-made post and think that the website does not be worked on so yeah to do that just click on pages select all move to trash apply and for posts this would be like your blog posts you'd go there and move to trash and apply so basically you don't need to do this but I'm a little OCD and I just want everything to be clean everyone to start off fresh basically you don't want customers actively finding extra pages on your website that are empty you know that's just weird you know they're gonna feel like it's not finished yet so we're just want to make sure that everything that is on the website there's stuff that we make yeah all right so delete pages and posts and then now we're gonna install a new theme and we sort of explain what a theme was a minute ago but a theme is the how your website looks so we want a different theme that is in our opinions more powerful and can do a lot more things so how do we do that so we're going to go to appearance we're gonna choose themes and there's a lot of different themes from different companies that you can install first you see the ones that you already have so these are the WordPress ones so we're gonna click add a new theme and that's gonna show us to search for the hundreds or thousands of themes that WordPress has um the one that we're gonna be using it's called Astra because it makes it really easy for us to get started right away on our website so a Stra and that looks pretty cool so we're gonna install it you can also go to details in preview and see that it has five stars 1328 reviews install from there or we install right here and if you in the preview it's always gonna look anything like if you look at the preview for the actor theme it kind of looked empty but that's just because we really don't have anything on the website right now and the theme mostly controls your header and your footer and a little bit of how your blog work what we're gonna show you how you can actually start customisation and make it look really cool cool so yeah then after we click install then we have to activate the team so we clicked on activate alright and now that we did that it's gonna say thank you for installing Astra do you want to you know put in the starter site template and I don't think that we want to do it that way because this may change this you know pop-up right here do you agree yeah they can always promote something different there so the best way to do it is through plugins you know it's always gonna be on plugins right so basically right now we've changed the theme of the website but it's telling us look you can import an entire website in one click as a starting point you can of course change that to any design that you want but just as a starting point why wouldn't you just have it import all these pages and then you can tweak it and it's just so much faster to do it that way rather than starting from blank then you can just focus more on your products and your content and things like that right there there are some things that you know you're gonna need you're gonna need to have a menu on your website you need to have a couple of pages you're gonna need to have a shopping cart you need to have products on there so you could go and do that each thing one at a time by yourself but doing a starter site does is that everything there for you that way you have to worry about you know customizing it to how you want it to look but all the functionalities are either exactly so to do that we're gonna go to plugins and again this huge pop up but we don't need it we're gonna go to add new and we're gonna search for Astra starter sites and then here it is Astra starter sites I believe yes that's it and we're gonna install now and we're gonna act good and then we're gonna activate I think I clicked on more details oh no I did activate alright and then it's gonna ask us what's your page builder can you explain what this is so like we explained earlier one way to make up web pages to use coding which is really complicated takes a really long time there's really hard to do so a pain you builder is just a visual way to just drag-and-drop and build your page right then and there there's different ones like Elementor beaver builder cool bird and breezy the best one we think is Elementor they have a ton of different by far yeah for anything that you want is gonna be available they let you move and change the size color font image you can change it completely to whatever you want so element is definitely the best thing best best one it was beaver builder before I feel like but element or really just really suppress them this one so you know you can drag drop and see it right away you don't have to wait for anything to load like in a lot of the other builders cool so just click on Elementor cuz that's the Builder that we're using then they have all of these things that you can just import in one click so imagine if you're making a website for somebody or you're you want to make your own website just to do it in seconds rather than weeks or months or years or never get it done I think that's super cool right and you just have to remember that what you're seeing is just layout just because it's the plumber starter site doesn't mean that if you're not a plumber you can't use that for example my dad is a carpenter so a lot of the images that that brings were already kind of good for me cuz it's plumbing carpentry are similar so I went in I changed some of the plumbing pictures to carpentry pictures I changed logo I delete some of the pages and added some different ones put in their information and you know within a couple of hours that a completely custom website for carpentry even though I'll use the plumbing layout so because the FEMA says it for one thing doesn't mean you can't use it for something else and I think yeah that is a huge misconception I feel like that just because it's about wildlife or yoga or something that it can't be used for something else and that's a big mistake I think and I think that's something that these places need to make more clear just because the pictures are something and the content something doesn't mean it has to be that just like what you're saying I've worked with Astra people and I made something excited them exactly what I would want in a website and that was this simply natural so we're gonna click on that one I think it's really cool let me know what you guys think it's just super simple super awesome all you have to do is click on it and then just press install plugins and that's gonna add a whole bunch of functionality to your website so what is a contact form 7 plugin do write so normally one of the steps you'd have to do is go in and add in each and every plug-in one other time so like we said the starter sites does that for you one last thing we have to do so contact form seven or add in the tool that we need to create a contact form for our customers can messages on the contact page Elementor will install the page builder that we haven't installed yet header and footer block alimentar will give us extra widget you want to customize your hat or our footer and it will also install WooCommerce for us which will make all of our shopping cart work yeah so WooCommerce is the store functionality so all we have to do is click install plugins and bam how much time did that save us right so commerce will take care of your my account page your car your shopping cart a payment processing shipping all these things are some things you don't think about it's already set up and ready for you so it does make it super easy to get started right like start selling yeah and after it installs the plugins then we can click import site and press ok and now what's happening here so now all the images tax and everything that's part of the starsight is getting moved over to our website so even though this is for plants just you're selling pots you can just change the picture of the plant to a picture of a pot change the title from plant the pot plug in your price and it's the same thing you don't have to worry about you know sticking to one thing right you can cell phones or crayons or sand if you're a very good marketer all right rocks rocks rocks if you're absolute genius and much smarter than we are but you could do anything it's just the content is changing and and just everything right so if ya like an e-book maybe you're a photographer and you want to sell photos that you've taken or maybe you are a DJ and you have custom tracks and you want to sell your music you can have downloadable music so anything digital anything physical or even that service you could sell anything through your website right and then from there you could even install extra plugins so you can be an affiliate you can dropship there's just endless endless endless things to do but it's all done importing so let's click done and view our site yeah so that took about what like 30 seconds 45 seconds a minute something like that for us and yeah so we can exit out of here and we have an entire website done and it looks awesome I think I mean has these testimonials and how these plants and and everything like that right so this is the same page we saw a couple minutes ago that was blind for texting and it looks now completely different with just a couple of steps and a lot of people ask me oh now someone's gonna go to my website and they're gonna see this well the bad news is no one's probably going to your website yet that's that's a sad thing it's gonna take a time to get ranked in the search engines and it's gonna take time for you to advertise it on Facebook or Google or in person on your business cards or whatever if you are still pretty paranoid about that or it's already advertised somehow and people are going to it somehow then you can install a maintenance plugin there's a plug-in that's really easy to use it's called under construction I use it all the time we just download it it just has one button on/off you click on somebody goes to your website if just say it's under construction and when you're done you just click off that's so yeah you'd go into your dashboard click plugins type in under construction right that's what's called ya just called under construction and then install it then then you'd have the option to put your website under construction so that people would see under construction instead of this right but the reality is that unless you're advertising it somehow right now what you're probably not because why would you be advertising if you don't have it yet most likely nobody's gonna come across your website even Google takes a couple of days to even begin to rank your website you know don't worry about yeah exactly but yeah we have a store so you've made the store this would have cost you money yeah so we have this store it looks awesome we can go to our store and we can see that we have plants and I don't know why why they give them two stars I have five this plant just sucks but you could see you could see them up and it has you know a review well best quality I don't know he gave it two stars and you could go to the description and it says it and you can see related products so that's all cool this page is customizable we can add to cart' let's see how that works and then it added to cart so it's up here now and then we can view our cart either here or here yeah you can change all these colors and everything obviously but we can proceed to checkout you can even create a coupon if you want to right you could create a coupon and then give your good customers a coupon or email them to lure them in and yeah so we haven't set up payment methods so it's not gonna allow us to place an order right now but enter in all of their information in place in order and then you'd get the money from four or five billion people potentially in the entire world that's your target market if you ship everywhere or just like 350 million in the United States or however many an Australia or Canada or India or wherever you're watching from but yeah I think that's super awesome and that's how it works we have an about us and that looks great we have a contact us and that was that contact form seven that you're talking about right there it is and we have in my account so if someone has an account they would be able to see their orders or downloads the dashboard everything like that we also have categories so maybe we only want to see cactuses then we only see cactuses right so if if you were let's say a mechanic right and you're selling car parts maybe your categories would be like you know mufflers engine wheels right so if you're selling clothes you know tops shoes shirts so have to get creative and you know change all these things to make them face your website exactly all right so we did all of that so we installed the theme installed starter sites import the websites the next thing that we're gonna do is change the title and tagline so why do we want to change our title and tagline why is that important well you probably don't want to have don't want to call yours online store because it's kind of generic com you want to have your own name up there and you want to use a tagline to either have your slogan or describe your website a little bit also if you want to do SEO you might even want to put some keywords in your tagline and that can help you a little bit definitely and when you scroll over your website hover over it it says online store if it comes up yeah just another WordPress website but you want it to say your website name then something descriptive right so to do that let's click on customize and where does it exist here should be under the site identity right under layouts layout site header and site identity nice alright so this is where we also can change a logo we'll do that in a second but right here it says site title and we want it to say your the name of your business probably I'm just gonna put in simply natural I spell that right it's simply natural okay hopefully then display site title so you can either display it or not display or display the tagline or it didn't shows up here or not display and for the tagline I'm gonna say like what we do so I'm gonna say we sell succulents cacti and pot pots not pot yeah it's just I do live in California so is it legal in Florida no yeah so we did that then we can press publish and this shows up in the search engine so this title is gonna show up in the search engine and what you do these yeah like he said there should be keywords and things like that that's gonna show in the search engine so we'll click on publish we will exit out of here price shouldn't have exit out there but cuz we're gonna bout to do a logo but so now we have that all going on so yeah then we can go over here and it will show up just like that it's raining right here in Los Angeles which is crazy sorry I'm very distracted but look it's very rainy here yesterday a lot the whole day so that's pretty crazy it doesn't rain here a lot we don't know what to do in LA we're freaked out alright so anyways the next thing next thing that we're gonna do we're down what's that it's super easy we're gonna create your logo Photoshop how can I possibly create a nice logo you can't sorry no just going there's a whole bunch of websites to create your logo my favorite one actually I built this one then I sold it as logo maker calm l OG oh ma ke r dot c om without the e so you go here and you can watch the video do you know of any other logo making tools um there's a lot of companies that will like you plug in your company information and they kind of generate like a couple for you but not that like not where you have like a like a canvas where you can build it yourself so yeah there's a lot there's like Photoshop clones but you can kind of deep into it you know it's it's all things yeah and this is great like if you're just starting for the first time and just need something to get you off the ground so pretty good right and I always want to tell people that you can just literally type your name out you know people aren't gonna buy or not buy from you from your logo probably I mean unless it's really yeah unless it's really bad and a lot of logos are really bad and so it's like you should just like take your name and just type it out in caps rather than have a trillion things going on in your logo 17 different colors and I don't know just try to make it simple I think you know with with with local a lot of times less is more so like if you think of any well-known good logo McDonald's apple you know Microsoft Nike they don't have 50 colors they don't have 25 shapes like Nike's logo isn't somebody playing basketball it's just ice Nike's logo has nothing to do with sports or athletics at all it's just a symbol right so don't over think it's just a symbol that people can recognize that's it right oh yeah like IBM there's just like I and Abby in it um yeah yeah it's just like whatever super simple all right so I'm gonna type in so you Lent because that's what mine's about and try to find something that is good this one looks pretty simple and then once we have it here yeah you have any input on that yeah I think we can show them that you can change the color and you can add you know shape or text if you don't want to as well right so yeah you could change any of the colors up here you can even put in your own color let's say like your web developer says these are the colors of your website not your web developer if you decide these are the colors of your website Oh your graphic designer says says it then um you know you could put in the hex code right here something like that yeah so yeah you put in the code then that's the exact color and I'll show you that in a little while all right so yeah we can resize this we can add text we can say so you'll and then you can change a color put that over here and change that color and change the font and resize things and rotate things and you know yeah overlapping overlap boom put this here I don't know - 8 whatever that's terrible but you could delete things but we're just gonna use this symbol right here for it so I'm just gonna go here and then I'm just gonna press save then I'm gonna say no thanks download regular resolution file then I'm just gonna say this one is the darker logo save then exit I here and then I'm gonna create a white version because right here we have the a white version for our transparent header so you're not gonna be able to see it but it exists so go white and then save then download then white version and the reason we're making to look two versions of the logo is that if you have for example let's say you have a paragraph and you want to add your logo obviously a white logo doesn't work next to text on a white background right let's we use a darker lower before and if you have a dark picture like you do on the on the home page then you want a white version of the logo that's also why the yeah that's also where the logo should be simple because if your own hand like multiple colors and like flags like things coming out of it or then you could truly hard to make it fit somewhere because you know colors will always clashed with whatever you're putting it off yeah exactly and it's hard for people to understand it's like well what is that then it should just be like simple like okay I get it this is about like nature succulents you know that's it if we go down here we can see that this is the dark version of the logo if we go up here we can see it this is the light version of the logo so we're gonna go to customize and where was that again layout header layout header site identity and then we're going to not use a different logo for retina that's fine I mean doesn't matter we're gonna remove this logo and then add the dark logo so upload files select files the darker version select and then skip cropping it wants to crop it skip cropping alright our darker version is there it's not really going to show up here because this is the transparent header so what we're gonna do is we're gonna go back and then go to the transparent header and uncheck on a retina device that's just like if you have a really big logo and you want to resize it down but our logos are a pretty big so it's gonna look fine on a retina device so we're gonna remove this logo and then select image upload files select files and then do the white version and choose image and then there it is and that looks pretty cool the next thing that I want to do just while we're here is change this fav icon so right here it's like a it's a little how would you explain it yeah it's like a smaller version of your logo pretty much just to like if somebody has a lot of tabs open you're obviously the more times they have opened your name counter starts to shrink so at a glance they can look at it and they can see oh that's that page that I had open so this usually wouldn't be here but it's already there now if we go to site identity and we go down here and we select icon we can select the image and we can choose an Emmy if we chose this image it would look really weird but we're just gonna choose a simple right here then select and then it's gonna ask you to crop it and then just crop image you have to crop it because it has to be a certain square nose yeah those have to be square then yeah it's good so it'll show up right there instead of like the default Hostgator thing or just a regular page so publish that and exit out of there and now you have your new logo and if we go to a page maybe like the my account page we can see that dark version and if we go to home we can see the light version so yeah we did that bam bam now your favorite part we're gonna change the home page this is where we really get to customize your site yeah and this is where you know you can do anything on your entire website you can make it look like any other website in the entire world so how do we do that right so the easiest way to do it is to just click Edit with Elementor on the top where right there in the center you can also book the dashboard but the easiest way is probably just to click Edit with all events on the page that you're on yeah and just know that this bar is not always gonna be here what you know when people go to your website that's for eat this bar is just for you because you're logged in people won't see this so right yeah just click Edit with Elementor and how do we explain all of this yeah so there's a lot going on because like Tyler said you can change anything on this website like if literally if you wanted to make a look like any other website you could and there's a million settings to do that so pretty much the website is broken up into three different parts there's ROS which is what goes all the way from left to right and that's symbolized by the blue long blue tabs the H at the top there's columns which is you know the car you know each row I can have multiple columns and those are the grey little boxes that you see right there and then there's content which is what you add to your website whether that's a picture or text or a button or a link anything so pretty much the website is broken to those three things as a matter of fact all websites any web so you go to will be rows columns and content so we can edit each one of those things to make them a copper one exactly and then so on the left side here we have all of our different widgets I guess they're called widgets that you can just click hold and drag into any of your rows and columns so if we click plus right here and you click plus again you can add one column two columns three columns for you know a side sidebar type column you know you could split it in half and but right now we're just going to add one so let's add one and then we can go back to our widgets by clicking on this and we can drag any of these widgets into here you can also drag any of the widgets into up here or anywhere you want so but we're just gonna drag it what what do you think we should drag here let's add for example a headline but there's no headline there so we can you can put like featured products or so yeah we have a heading here and then we can Center it and then we can say these are our feature products I think it says that down below so these are our bestsellers yeah alright so we have our bestsellers here and now someone's like well I don't like that font or I don't you know it's too close to here too far from the bottom you can change literally anything that you want so we can you know bold it underline it italic that's all really simple we can also click on it and then just go to style and change the typography maybe we want this to be Rini reenie beanie that's a cool one and then well you know put bestsellers and that's kind of cool it's kind of fun we can also change the text color to blue or green or you know maybe we want it to be a succulent color like right there something there alright and then what would people want to do next um well we can fix the station so fix our spacing there's two ways of fixing the spacing one of them is clicking on all the widgets here and then adding a spacer that's pretty cool I think you just go like that all right now the spacing is a little better the other way and to delete something you just right click and press Delete the other way is what's the other way to yeah without padding and margin that's kind of way that I like to do it just because you know it's less things to add to the website and it's really cool so for example if you click any content so you just click on bestsellers and you go to advanced you'll see that you get a margin and padding so margin is all the space outside of the box that you see that best letters in and padding is always pasted inside of the box so yeah you can do either of them it would serve the same purpose here but let's just do padding's I like to unlink the values because if the values are linked they're all gonna be the same all right so I like to unlink the values and then on the top let's just put maybe 50 and on the bottom let's put 50 all right so that gives us some some padding in there right go on yeah but now as you can see you just did the pnau there's too much on the next section so we can scroll over it usually get the option for that one and then you can click right there in the middle for the decimal event room yep and you go to advanced and you'll see that that one already has some padding as a hundred so we can probably shrink that down and get it to be to let you leave it to zero or you know put it back on a hundred and then change this one you know in you can change these things in multiple places so you can change it here then go to advanced and change the top and bottom or we could make that zero again or go to the entire row and then go to advanced and then change the the padding here so top you know so you can change the spacing of the item or the row or the column and it'll have the same effect obviously if we had something on top of bestsellers or multiple things stacked it would be more noticeable but you can change you can pretty much change it for any item right and so yeah that's that's pretty cool another thing that you can do is you can add some text below it so maybe we want some text below it we just drag in a text editor and then we put some these are the best selling things ever in your life okay in the world and then we can go to style and we can Center that and you can also go to advanced and we can make the margins zero and the padding zero or or change that and you can go to style and change any of the typography make it bigger or smaller that looks better and then with a line height you can make it so it gets a little bit closer to the bestsellers and we can add a new widget and then we can add like a button let's try to add a button well yeah sometimes you gotta you gotta mess with it a little bit so I'm just gonna add it wherever I can and then I'm gonna drag this one top above it all right yeah so and then you can go to content and center the button and we can link it to the about page just start typing about okay now that button will link to the about page and we could click on this whole section again and go to advanced and we can add even more padding not that much padding but let's say a hundred on the top and a hundred on the hundreds on the top 100 on the bottom and now we have our own little cool section here you can background to it yeah so if we click on this and then we go to style we can add a background to it so let's add a background let's just add it a color you later a very ugly background color you can show how to do a gradient - oh yeah gradient that's good idea so it goes from one color to the next yeah you gotta be careful gradient says the gradient will either look good or make sure upside look really real it might turn out anything like this then that's not a good thing you can change the angle of the gradient which i think is just the coolest effect ever sometimes I just do this for hours we can you know click here and change the color of the button so we have the background color and say this is blue this is like the ugliest section ever make a section just do the opposite of this yeah you can have a great website if you just do the opposite of what we're doing right here you can also add a video background this one's really cool so if we go to video background and then let's Google search YouTube search I don't know like a major video like yeah there you go thank nature video on YouTube okay so yeah that does look cool should we go with let's go with green yeah all right awesome so we take this and you know would probably like skip a few minutes into it so anyway so we copy this and then we paste it here then it says when do you want to start the time let's start the time at like in seconds at start time at like 200 seconds yeah that way kind of starts in the middle not like from the beginning with like the intro and odd right well this isn't a good one because it has this like at the nature app are you gonna find a much better video concluded oh there we go okay so yeah and then we have this cool video on it I think this is just pictures am i that I think I think it's just really slow like time-lapse video my gosh okay sorry let's do better oh my god yeah my life oh yeah you're right it's just really slow okay so this is a yeah okay so this is how not to make any sort of website so we're going to leave this section because oh no okay you can always you can always undo okay I'm gonna shut tight I'm gonna show you how to save this section really quick okay oh okay just can we save a different section please know how to you know make it better in a couple of steps okay good just come show them how to copy and paste the style from the top section to the bottom so copy and then we'll paste this here a style like my style right we'll call this one - yeah [Music] and then paste the button style as well and we'll make this line white right let's make this yeah go to style text color make it white okay then copy the letters now got it hey style then how should we handle the back let's add just a little bit of a black overlay to the back to the video I think if you scroll down you get some other options hmm a little bit dark just to make the letters easier to read style dark yeah there you go and then you make it a little bit darker a little lighter so significantly better great what a little bit better yeah a little better here let's get rid of that let's get rid of I think we chose the wrong video I suppose maybe there's a nice picture on though yeah you do this oh no you know what we should do we should do an image let's select an image maybe a cool point you have right here someone looks like it might be too tall yeah okay liked it this one maybe yeah that's cool all right and then for the image we can change the attachment no we could change the size and I like to do cover cuz then I could easily make it fit the best you know side to side yes and then I don't think this should be here so you just click hold and drag and then let's scroll down so that it's not like color on top of color so okay much better if you set it to fixed it'll give it a cool effect they might like that okay so if we go here and we go to style and we go to attachment and fixed six then it will stay while it's scrolling instead of if we do default it will move while its scrolling so that's really cool and then of course you couldn't change the position maybe they wish you to go Center center or top center yeah eh then so okay that is much much better thank you for saving that we're kind of show is that if you yeah of course if you just you know throw a bunch of things together it probably won't look too great but if you had lead to try to make all the parts of your website be in a similar style and you give a little bit of thought to the images you choose a little bit of thought to the font that you choose you know with some tweaks you can make something look really good like it you saw that from the section we had a couple of seconds ago to this one it was a couple of different settings but it looks so much better yeah so much better okay so this is something that you know we could live with yeah so what else should they know anything else about this besides here we'll just keep that besides that you can change any of these sections just like we changed that one you know any of these things any of these images any of these texts anything you can you can add in a bunch of different columns and drag in anything in here like maybe an image here or you know a button or a video or Google Maps or of gallery or ratings or counters or progress bars you can put a progress bar right here I mean you could just do anything what else do you people well I kind of want to cover because I sometimes I feel like people are scared to make changes to their websites they think that if they do something wrong little break oh yeah so should I show them how to break a website that would be really interesting because it's really hard to break it yeah like like you can make it ugly but it's not a break you can only there's an undo button you can undo it right so if I add a section and just like completely just don't think about anything I put this here and this image here and divider Google Maps yeah Google Maps basically imagine that this is just like the ugliest thing at least uh I mean it's not looking that bad actually looks okay then we could do like image carrizal okay so just imagine this was they didn't add what yet sometimes you get to put it on top and then wiggle it down oh okay yeah so you for image castle you'd add images and they can like slide all of them but anyways imagine that like okay you really messed up this I mean this doesn't look that bad but then you can press ctrl Z or command Z and you could just undo it it's no big deal so don't feel weird like you know no matter that ya messing with it you can also go to the history here you can jump back a couple of steps or like a couple of days even yeah so you can say oh man I really actually did one all that you know or yeah just at the button yeah I only wanted up to this part and then the revisions will whatever you saved if you actually press update you can just jump back days ago or weeks ago or months ago so feel free just to play with it that's the only way that you're really gonna you know understand how all this works is just by playing with it and trying to build something maybe sketch out something on paper and be like oh how would I build that and you can do that easily I kind of want to show me you scroll up a little bit you see you have those three there's three sections with the three plans how do you would Eddie you know let's say you want to edit one of the existing sections instead about a new one gotcha yeah so yeah you just click on it and sometimes when you click on it you're like oh wait it's not doing anything you can always right click and edit column or you can click on this button up here and then you go to style and then you have all the options you have the image you know you have everything here you can click here and you can put in whatever you want you can of course undo that and then you can make this link to any of your pages so you click on that and then you start typing some page plant and you can do that so right where you can put in your own link if you notice on this section there's three background right there's a each plant has its own background so for the X section instead of adding a background to the road you added a background to each column mmm so you know just doing something simple like that gives it a completely different look what you know compared to like if you had just one big background go away across right and then they they rounded the corners and yeah it looks really cool right so if you scroll down you go to borders you see that there you have options to add a border add a shadow' round it like tile I can make it square if he puts it like 2-0 or even puts it to 100 it'll yeah there you go super you know round it off um so yeah don't be scared to like go in and be like oh what is this do and just change it and see what see what it does and then yeah I like that alright maybe right exactly so yeah oh the other thing I want to talk about is this shows your cart so this is a special code and basically it's saying look showed the featured items it didn't says product limit show eight of them and put them in four columns so it's gonna be eight products in four columns so it's gonna be four on top and four on final and this is what's called a shortcode and this is just some sort of just like a custom plugin that you added and if you go to a plug-in details they tell you how it works and I'll show you how to feature an image a product yeah so a lot of times short codes the only time you really use them is that if you have a different plugin that is not built into Elementor but it has a feature that you want to add it in short code is when you can copy and paste the code and then you can pretty much get anything into elements or in this case the WooCommerce that is that the shopping plug-in um which separate plugin from Elementor says hey listen if you want to add you know our layout to your element to page just plug in this code where we want to show up and no show up so we plugged it in there and now if you shave the page you look at it you see that you know the products are there exactly and then they put in testimonials and you can edit this just like you would edit in anything and yeah super simple super super simple so we're just gonna update that and we're going to preview our changes and exit out of there and you can also preview on the your main website since you updated it and we can see that our new bestseller section is there and we should have changes text not to click here but yeah as I might see we can see that code right there so it's four on top form bottom of the featured plants so yeah super simple to edit your website you can go to to the about Us page and you can edit this website just the same just edit with Elementor and you can edit it super simple cook what's next the next thing is to how do you add a page so before we get into the shop I want to show people how to add pages so yes so the way I like to do it I like to go back into the dashboard you know there's more than wait there's more than one way to do it but usually this is the way that never changes you go to pages yeah my mom always said there's more than one way to skin a cat yeah so I quit school and she said that's not what I meant all right go to pages and then you can click add new new page and those are all your other pages that you see on there right and we're using WordPress 5 which has Gutenberg but but which is an editor you know it's their new WordPress editor but why are we using Elementor and not the Gutenberg new WordPress editor right so with elementary benefit is that as you build it you can see what your website is actually gonna look like so that's a lot easier for you know for a designer or even somebody who's just started if you can actually see what you're doing you don't have to keep going to your site then going to your dashboard thing go at your site you know and it's really easy to just click if we make a change you know drag and drop in a picture and upload your picture with Gutenberg there's a lot more steps and then you got to go back and forth to see what it is that you're actually doing right and also element or is more of a mature product and they've thought out everything I think better and so it just it just works a little bit better than Gutenberg or a lot bit better in my opinion Gutenberg has their editor has a long way to go so what we're gonna do is we're just gonna add a title services let's say and then we're gonna edit with element or instead of writing things down here well should publish the page rate so that it shows up uh I think you need to well well I think it's Auto saving it's doing something crazy let's see yeah should we should publish it probably okay so let's publish it publish the page you're probably right you can always even if you were to miss this step you know you can after you're finished editing you can always go back and click this concert that's fun yet and then we'll edit with Elementor alright and then that's gonna open up Elementor for us and it'll be the same thing but i think we should show them content blocks I don't know what they're called what are they called I think yeah they're like template blocks or content blocks they they change the name every once in a while so how do we do that yeah so if you click or why do we do that sorry that's a let's do why yeah so for we know that if you click the plus you get to make your own section but you know that can take a long time and maybe you're not sure how you want to organize it we can click the little folder and you get let's take a live yeah sometimes we leave a window open for a long time with logs you see you think if something happens like when you do your website we get a pop-up if something crazy happens like you know don't worry about it I just refresh the page everything is fine yeah you know like you know little things that people get scared of them like you know it's that's not more just refresh the page yeah it's fine it's probably fine you'll be able to figure it out and sometimes it's gonna take a little while to figure it out or you have to Google search something or it's it's okay right okay so what do we do we click the little folder and that's gonna show us templates and there's three kinds of templates so this is I mean this is super awesome I feel like like they've thought about all these different really cool layouts for you that you could just click and it could put into your website then that could be a starting point rather than starting from scratch right so okay what do we do okay so right now what you have in front of you are the pages so these are all completely done pages for you if you go to blocks don't use that mean if you just I want to show them blocks really quick if you go to blocks these are instead of whole pages maybe just sections you know maybe you want to have a header section then add an FAQ section and then add like a like a I don't know like an image section you can add each section or you can add a whole page so I think we're gonna do a whole page let's see if that works again okay yeah risky click of the day but it worked right it happens like you know you get a little glitch like that like we're saying you know it's it when things are online it depends you know as a server working like I'm a computer that 200 miles away like we don't know yeah just wait wait a little while and try again you know right it'll work a lot of the times okay so we do that we love this page it looks awesome so we insert it and it's gonna take a little while to insert because it is grabbing everything from their computers and then putting it on your server your hosting you know it's downloading all of the images and downloading the text and downloading the style of it and you know configuring it all for you so it's gonna take a little while right but it's still great because imagine how long it would have taken you to do that from scratch right this way ten minutes no twenty minutes half an hour I don't know but it's all like design really nicely it's all designed really nicely and then so we can update that or I mean we could change anything of course change the video change the text change the button change where the buttons links to you could do anything that you did before but let's update yeah yeah match any of the colors this is a background overlay this purple so you go to style and you see the background overlay color purple so let's update that and you update it and then you preview your changes and we can exit out of this one and now we have an entire page but what's the problem do you see the problem oh yeah how are people gonna go to this page I don't see if we're gonna go to this page exactly they can't that's not up here how do people go to the page before we do that right what we just give up we just yeah I think we should just give up no there's a couple of ways you can do it through the customizer or you can do it through the - yeah right before we do that I want to show them one more thing that I think is really cool if we go to edit page how do we get this to be the transparent header basically is what I want to show good option edit page then we can scroll down and then it says transparent header and then we'll say enabled shablam update that wait for it to update press view page and then we have Wow sometimes I just get lucky look at that that's different kind of looks really bad sometimes it looks absolutely terrible but I don't know that's cool yeah Mac it works all right I'm just gonna redo my website and this really quickly alright so yeah what was our problem our problem is that there's no services page here in our navigation that's not good we actually have two problems and the other problem is that this menu is glitching out if you click on homepage it doesn't take you home for some reason it takes you to this page so that's a problem so yeah how do we fix our menu how do we control our menu how do we rearrange things so how do we do it the way that I like to do it is from the dashboard because sometimes and the customers you're like missing options mmm so I don't know which way you like to do it better you like to do the customizer yeah sure I usually show people from the customizer but let's show people both so what I would do but you're right it is glitchy and thank you for for showing me the way because this is glitchy sometimes so you go here then you go to menus and then we have our main menu and you can click hold and drag and rearrange or add items but we're gonna do it your way so let's exit out of here the benefit of doing it to the customize customizer way is that you can see it live you can see it like but that's me probably yeah you can really can't go wrong with the menu this is like it it's either one order or the other yeah so you can imagine it so we're gonna go there dashboard and then what do we do if we're gonna go to appearance and then menus so appearance then menus all right here's our menu right there there's our menu so if we can imagine and we can even open up another tab that has our website so we can go back and forth yeah at the pro tip right there so the surfaces pages right there on our recent page that we just created oh so we have services here and then we click Add if you add it to the menu and if we save well let's make it capital like all the other ones so all the other ones are caps so we're gonna make it caps - all right and then let's rearrange it where should we put the services um right around about yeah I think so I think right after about I like to put them in well depends but I like this services there or about them about there all right then we press Save menu and it saves so then we go here and then we refresh it's not going to refresh automatically all right it's not done yet so we could refresh again ah we have our services page there so we click like services and what do you know it works is this website mobile-friendly we do you mean talk about that yeah the website is responsive so whatever size the person's computer screen is or laptop screen or their phone screen it will automatically adjust now elementa have some tools that tweak it a little bit more maybe you want to have one background on the phone and a different background on the computer and things like that but without you doing anything it is responsive yeah so it's gonna work on everyone's phones and everything like that and yeah it's gonna be super awesome okay so we did that and we put the menu there but we really don't want to service this page there so let's go to our services page and just remove it save menu and now it'll be got is gone gone but not forgotten yes gone but not forgotten is that like a let's fix the homepage oh yeah yeah that's messed up so the homepage I don't know why it goes to the other quality place if you click right there to open reverses home so if you look at it they titled it home page but it looks like it's connected the link is to hello world which is a blog post oh that we deleted yeah exactly so you should remove that and then add a home again this home yeah drag it to the top then home there you go so menu what Tyler is typing in is just what he wants to call the page right he's good to type it yeah he could type in there about and it would still be the home page it would just show the word about or I could put in like not the home page and it would still be the home page don't click right but it's still be the home page and yeah after we're done with that if we go here and refresh again that services page should be gone and the homepage should actually go to the home page cool like magic all right the next thing that we're gonna do is we added a page edit navigation page the main website colors and buttons so what I mean by this is if we visit our site ok sorry I don't really know how to do this I think you go to customizer and they should have practice this before always practice before you go on YouTube it's very important all right you can go to customize well there's colors in back right there hey make long easy on us probably their background base colors yay okay so we can change all of our base colors which is like what this green looks like so if we go to theme color this is the hex color and people always tell me what the hex does that mean and that's a terrible joke that's just every color that is available online like for a website to display it has an identifying number so write a number is just a you know you might not remember every shade of green but if you saved the number you know that as long as use that number you gonna get right so we're gonna copy this of them we're gonna make the theme base color a blue and we're gonna see how that changes things and it didn't do anything that's super exciting yeah it has these if we click on this perhaps things will be blue in there no yeah some things will be blue okay so we're just gonna go back to this one and for the link color okay yeah I think that's where that's where it's gonna be yes she's gotta click around and see what changes find out what what each things that's the link color let's make it this and we have the link of a shopping cart yeah the show so it looks it looks like the right now from now maybe yeah it looks like everything that we designed the colors are being controlled by Elementor and everything that is not part of elevator show the theme settings and like the shop settings that are coming from a different plugin those are being modified with this right so it might be here but it's not well we can go to header colors and yeah this is the transparent header color so we can select this we can actually change copy it and then go that changes so that's pretty cool yeah so that's it and you have you have their did that the desktop icon so I think they actually might have an option for you to have different colors on like different devices if you want to is that what that is where the desktop icon right next to each color oh yeah Wow can you can you make it mobile I didn't know that that's crazy okay so how do we actually change all these buttons are being controlled by Elementor so it's not anything and then we learned how to change this so those are all the colors those are all the places that the colors should be yeah so we can exit out of there and that's not save that because we like that green mm-hmm and the next thing that we're gonna do is the fonts of the website so how do we do that I think for this is probably gonna be the same way where you can change the font um you know commerce other installed plugins and like the theme but the fonts that we set up in elementary will still be with elementary I think yeah I think they might have did the default fonts so you know there's two ways change the fonts you edit with element or you change it there or you can set element or just to choose the default font on your website which would be in customize and they probably set it up as a default font because yeah I think I think and then we can go to typography perhaps then probably based typography all right so the it's right now it's quicksand and we're gonna do that reenie beanie again just because I like the name and so this has changed up here mm-hmm right here and then some of these things have changed its the font says not exactly big enough so I'm gonna say 18 right so it looks like this is only affecting body and content because that's the part that we read each other sighs it's not doing the titles which it would be down here we can also do reenie beanie and this should change right here there you go yeah and then right and then you can change the size in Elementor but that looks pretty cool I mean that looks like it's a little too small you can make it bigger in Elementor but it looks like it would be like a lemonade stand right oh sorry Oh or plants or plants yeah but we're not gonna save that because that's terrible I mean it's it's okay I don't know I kind of like it all right so that's how you change the funds edit footer so I'm just getting everything out of the way before we start shop the shop how do we edit this foot so the foot header is like your head it's at the top footer is like your feet at the bottom how do we go change this this whole thing is the footer here this thing Plus this thing so easy you have the footer which is that last part of the website and then you have the footer bottom which is the last that's part of the website so this is almost the the footer bottom usually edit that with the theme I think but the nice footer which is only one change now with Elementor so if you hover over elements you get a little extra option so site footer so let's click on that where we can edit the footer all right so now we reading that bottom part not the bottom bottom part but the bottom part and the bottom of the bottom up yeah just the bottom not the bottom bottom so we click on that and then we let's delete this one and let's add in our own logo that we made this one do nice and then you can change all of these links what they link to and they made an icon list so if you have privacy policy shipping details whatever you just make a page and then you get the link to that page or you just start typing and that page will come up right here yeah and it's super easy add in all your social media stuff and that's how you change this super easy let's update thought and something that on we can't wrong I think we we haven't covered that yet um if you go to the Advanced Settings for like your logo or any part of the site for the lower you can add animations to it if you want to maybe make it bounce or make it like a light in here a little bit you go to advanced to then what Oh entrance animation this alright I thought it was a entrance animation so like fade in okay that's not very cool fade in left whoa so you could do that with the entire sections too like we can exit out there then we can say hey you know what er this this whole thing fades in or you know and it's slow fades and slow or it soothes in well so the top pages of your website can have that to any anything can have that so they can have different ones you probably don't want to have like you know a million things going on right people are there for the content so you don't want it like you do you can do some crazy ones but it's kind of nice to maybe have you know little things that have a little bit of motion that yeah in depending on your website if your websites like a spa or something maybe things should just stay easily fade in or you know if it's yeah alright so maybe you have a roller coaster website and things like maybe you own Six Flags and you're watching this video um you never know so yeah we go there oh and then we go to the homepage and then now we can see at the bottom the footer that is uh there how do we change the bottom bottom yeah that's part of the theme so that's gonna be in the customizer customize that would be layout probably footer and then footer bar perhaps yes all right so you have different options here if you scroll down we have this where we can stack it on top of each other or we can do it side by side do it side-by-side is good I think this current year code just gets the current year so that put in 2019 this site title will put in your site title your yeah website title so essentially now natural this credits thing I don't think we need so we're gonna delete it BAM and then now that look good it then first I think that also you can assess custom text maybe there might be some other options you can yeah well we J I met you can add another menu in there make it or leave it blank yeah so to add another menu you would go to the dash or appearance menu create new menu create a new menu then you can put in footer menu a footer menu for cut section to again you could do a bunch of things but we're just gonna have it there this H ref like huh what do we do here how do we make this link so obviously I'm a web developer so usually what I right there right there is a web design by I create your site com mm-hm so I always have to type that out and I always forget like what that means sounds like okay I have to stop by google searching this so well all that means is a hyper reference link that equals like what is your link gonna be whatever your website is right so just erase the number sign paste where you want it to link to and that's it you're done there you go so now instead of linking to nowhere it'll actually link to your website very cool so I scroll down all of that has changed no more credits you go here it'll link to your website and on any of the pages it will go back to your home page so yeah that is good so far so good we edited the footer or breezing through this now designing the store right alright so we're gonna set up the store so just click on store and what is happening with the store what is going on right so this store looks really nice it's really well organized you have your featured products there and you have you know some extra products but the way they made this was actually using Elementor so they custom-made this layout and that can be kind of hard to work with actually like using the WooCommerce layout because it's actually it's actually made the same way that you're used to seeing it in almost any e-commerce shop online so I think we should probably use that yeah and it gives you a lot more settings this looks nice and if you want your website to look like that that's awesome but I just wanna we want to show you how to do it in the way that most bukhoma stores would be set up so right to do that we have to delete all this content first so just edit with Elementor and it's pretty easy to delete all the content just click on this X right here see and these were all done with short codes you click on it and then it gives you the code and these are featured and when you add a product you can set it to featured and it would show up here and these are just all the products here so that's just the product so we're gonna exit out of all that now that it's blank we're gonna update it and then what do we do now that it's updated yeah let's hit preview just to make sure that it saved those changes and then if it looks good from there we can go back to the dashboard yeah so it's all empty then go back to the dashboard and now we need to set up the store the store to be the WooCommerce store so how do we do that right so we're gonna go to all commerce and settings you and then here under there should be a top four products and stories there it goes where's your shop page and our shop page is slash store so your stop page can be you know something else I could be up you know downloads or something like that you can call it something else right and here you can change the you know while we're here we could change the wait units maybe we use pounds or dishes because we're crazy and then press Save Changes okay and now if we go and visit our store what's gonna happen we should see the default layout alright so now we are seeing all of the store with all the products there and we can click on it and it works just perfectly and this gives us a little bit more control of how it is laid out um and we can change things like the colors and buttons and everything like that so let's try to do that how we go about doing that all right so most of the settings if I'm not mistaken are in the customizer yes I would go to customize and I think we showed you how to change the buttons before right but we'll just go over it again really quickly and then we can go to here where the buttons are but we can go to colors and background I believe right then for base colors that'll change the colors for like the sails and the stars but keep in mind that that will also change the colors in your menu those are gonna be your theme colors throughout right so if we go to link color because or theme color you know we could change it I'm just gonna copy this because we're gonna go back and we can change that and then that changes this sail right here with the link color we can change change this too and that will change that color so yeah it changes all the colors and everything but I'm not gonna say with that so just gonna exit out of there and press ok the next thing I do want to show how to change is this button so maybe we want a square button and not a rounded button so we can go to customize and how do we do that that should be under buttons right there buttons theme button button and then how would we make it not rounded right so the button radius is referring to how much the edge of the button should curve so right now it's 50% if we make it zero it'll be a perfect square right okay so that looks pretty cool so we're just gonna save that and then we have our button colors and everything like that so we can actually change that and you can customize it exactly how you want it so that looks pretty cool looks pretty nice yeah so we are gonna publish that one and then we're gonna exit out of there no we're not gonna exit out there the next thing we're gonna do is change the side bar so yeah let's exit out of there actually yeah I think for the side bar we have to go back to the store edit the actual page of the store mmm I think there might be you can do it that way but there's I think another way to do it also boasts two ways to do it I think we can actually go into the customizer cuz Astra has set that up so here why would we want a side bar right so eventually over time of um you know a bunch of different products people might want to sort out through the price or they might want to search for something specific or maybe they want to get only the ones that for the best reading so you want to then tell those search tools on that sidebar mm-hmm so yeah so to do that there is a layout and cipher and then it's asking you woo commerce do you want a sidebar or not no this yeah if we do a left sidebar we can see well we can't see here because hey it's there I think and we publish it then we'll be able to see it I believe right I think so hope so and I think maybe there's no sidebar here because it's either if we want to try the page keep doing it through the page settings yeah I think maybe because there is no sidebar so it's not showing up this empty maybe we need to create the sidebar yeah so yeah this is fine we just the sidebar is set up but there there's no sidebar that exists so then I accept we should you should probably create the sidebar first so yeah let's go create a sidebar then alright so we'll go to our dashboard and then we go into appearance we're doing widgets there good and then because this has no sidebar right it's not just oh yeah so what kind of things can we add to our sidebar well we can add a product search we can add the different categories we can add a you know organized by the product rating organized by price I mean you can even add extra things like share buttons and you know a little paragraph even an image but usually for shops you want you know the categories and things like that right okay so let's add a search first so where is our search shipping your product search search is there a product search yeah there's a product search huh learn new things every day a product search okay and then after product search I think we should maybe do a ratings product ratings maybe [Music] we could do a price too let's drag that in since I see it here can reorganize them later yeah the shelter by rating is equal top further memory oh yeah there it is okay there's product by rating there it is products by ratings then categories let's add product categories is there anything else you think we need oh no I think that's pretty good these things should be arranged in a different way we could say you don't have I think probably have categories or maybe a price people usually care about that okay on the top yeah I think so okay then product ratings do we have two product rating for price categories okay I think that's good alright so it saves automatically and hopefully if we go back to our store it'll work if not then it's definitely the page settings what the fudge okay all right edit the page you go to the dashboard and then you go to pages and we go to our store yeah so what happens is that sometimes there's their theme settings and then there's page settings and sometimes one you know overrides the other and sometimes the other one overrides well you know the other one so in this case I guess the backend settings are overriding the customer yeah so these settings have more authority I got ya authority exactly then they're the one so this is set to no sidebar but really we want to be whatever the customizer settings are because that's how that's how it should have been set up I think so we're gonna update that and now we're gonna view our page and we'll actually see our sidebar hopefully we'll definitely see it mm-hmm all right so but what is wrong with this page right so we can see there that the images of the products are kind of squished against the sidebar right so how would we change that so it probably has to do with how much the width the content has you can probably fix that by going to the page settings so the dashboard yeah and go into pages and seeing if you have any other options for how we can give those a little more space store and sometimes it just takes a little bit of playing around with but if you were to guess yeah here's the content layout what do you think it would be well usually stretched gives you the most space but it's supposed to stretch it all the way across so the next one we could try is a fourth contained conceived that makes it look a little better update all right view our page and yeah now very good got that space going and now that shop is looking really awesome alright so we've already set up the shop and the sidebar so let's show them how to add a brand new product alright so yeah we got this and the sidebar and now we're gonna add in a product how do we add in a product right so we're gonna go back to the dashboard one more time and right under WooCommerce we're gonna see the products option and we can click add new right there new you can also edit any of these but working in a darn good and we'll just name this put in your your title then we put in a what should we do next right so there's two descriptions that will covers lets you have so there's a short description right at the bottom and then there's a long description so the third description is the first one do people see so that's kind of like a basic overview of the item yes that's for being short like hey this is this product that's made for this and it's most people of this age range like it or whatever you want to show at your funnel and then the description the long description is like this how much away is this someone information about shipping how to take care of your product you know warrants information all that extra stuff goes in the long description exactly alright so we did that and then the description what else do we need to tell people alright so we can set if you scroll down just like you did you can set up a price for the product like how much is it gonna cost and this is in pounds so yeah we're gonna put in this put in $50 here and we can have a sales price if we want also and then we can actually make a new category so maybe we don't have a cactus or a plant maybe this is actually a second second right which I believe is a type of cactus but who cares so we add a new category and it adds it right there right and you can have your product to be in more than one category if it matches you know more than one thing right so just click on it then once someone clicks on a category they'll see it in two different places could you explain someone what virtual or downloadable is right so you can set up a you know a simple product is you know an actual product that people are buying and you send it to them you know a virtual product is something like an online meeting maybe it's a stream maybe it's you know a phone call any kind of service that is not tangible and then a downloadable product is anything that they can download from your website could be a picture it could be a PDF could be an e-book or may be a music file or a movie file you know those are what those two things meet right yeah so if you're not shipping them something physical you'd be using yeah virtual or something that's not tangible and downloadable for a PDF whatever yeah right alright so what else do we need to do we need to add images you've probably taken images or maybe having it but or maybe the manufacturer has images already but where can we get some images alright so there's two kinds of images that you can add to any product there's the product image and then there's a product image gallery so the product image is the first picture that people see right on the shop and it's when they open the product that's the main English that they will see and then the product gallery can be like different sides different angles things like that all right so let's go get some images let's go to pixels calm and maybe search for some succulents and well I don't not a spell so that's a problem all the time that I have to deal with and I'm Tyler what if do we have permission to use these pictures are these copyrighted right so these are all copyright free so this is pixels compiex els another good one is unsplash.com but these are all copyright free we can use them however we want so we could just find an image that we like which always takes a lot of time so I'm just gonna say well that one's not even down looks pretty cool yeah and then download what size do we want to download it right so you know you want that image to look clear but you don't want to be so large that you know it slows down your website you know loading speed so I think medium is probably Oh click medium also all right then we'll download this as the main image say that one's the main and then let's get a couple of other ones and I'm not gonna be very good about this but I'm just gonna say download call this the second one I know this doesn't make any sense but hmm and maybe one more you think or you think that's good uh yeah I think one more is probably gonna be good okay I'll do I don't know why I'm having such a hard time doing a demo image fourth okay okay looks good all right so we downloaded that and then now we can set our product image so we click set then we're gonna be uploading files so select files this is our main one we're gonna press open we're gonna set the product image to that then we're gonna add some things so we're gonna upload things so I had to before I just shift yeah go on and you can add as many as you want ready for but you can have just one or more you can have ten depending on the product yourself yeah you don't need even yeah you know you just need one main image you don't even need the main image if you don't want so that image then we're going to publish that is everything that we need to do um let's see we have our category we have our description looks like yeah I think we're all set there's so many different options it would be you know impossible to go through all of them right but these are all the main ones all right now we can view our product and we see that that looks pretty good and then we can see our Gallery and that looks awesome we can add to cart' and someone could actually pay us for that and I think that's pretty awesome if we go to our store we are not gonna see it because we added only 12 products this page and now it has 13 so that be on the next page there this so that can probably be oh no it did it add it is right yeah it just it blended in so well wait no that's not it there it is we added the same one so what you can do you can sort it by the store by most recent if you're not sure if your product was added correctly so there was a sort of I put newest latest there you go and then you can always check to make sure that your product is there this and then now we have a new product category succulent so if we just click on that we're only gonna see the succulents that were tagged succulent alright so there's a way also to make this a feature product like if you wanted to be displayed on your homepage as a feature product how do we do that right so we're gonna go back to our dashboard and see all our products again and if I'm not mistaken you can hit um quick edit on any product and there should be a little checkbox to add it to featured so quick edit you hover over it quick edit and then we can make this go down a little bit somewhere feature features click on it and then that would make it a featured product and that was set up on our home page to display all of our featured products they just click update so that is how you do that and that's how you add a product to delete a product you just click on any product here and then move to trash and then you can delete just like yeah so now that we added the category succulents to our website we hover over here then we see plants and cactus but we don't see succulents how do we change that right so we want to add that to our main menu and we're gonna do that in the same place we set up you know the menu originally which is in the dashboard under appearance and menus - bored appearance and menus all right but I'm not seeing it right here what's up with that right so you know there's some settings on this patient that kind of control what you can see so it's just showing you post custom links categories and WooCommerce categories Missy no one covers endpoints so if you scroll all the way up there should be some screen options there you go and you want to show you product categories to check that there you go and now we have product categories and we can I to find succulents and Adams did the menu and drag and drop them right under the other categories right there and then let's make it actually caps you let's alright save menu yeah even if you have fast internet just because of the way WordPress is you know because you're managing an entire website something that takes a little bit longer for things to load and that's fine yeah so now if we go over here we have cycle ends and it would take us just to our succulent page which is really cool nice that's looking pretty good so has let's see where we are on our thing so we added the products we add the categories now we have to do add shipping because let's try to buy something from our store so that should be easy we all bought something online so we're gonna add this to cart and now you can either view cart or go here so I'm just gonna view the cart and well we already ran into a problem here you see we don't want why don't we want a sidebar right here right so think about it like you have somebody in your store they're about to give you money for we trying to sell and now you have all these distractions on the side like oh wait well maybe I want to know the category you want to check something else and you don't want to do it you want them to be able to go to their shop page and finish shopping and then if they want to buy something later they complexly yeah you want them to be focused on purchasing your product so yeah not being like oh what's this over here then like you know their kid comes in and whatever and they'd never purchase it so how do we change this all right so we're gonna edit the page and we probably wanted to set up with the same setting that we had on the store either full width or contained one of those two so under content layout ya contained or full width so we'll just go with which one the fact contain I think that should look similar to what we have in the store contained and now we view our page okay oh let me have to put no sidebar about that part right no sidebar contained and no sidebar customizer settings now no sidebar settings yeah I mean we could probably put in customizer settings then if we have no sidebar we'll see Connor yeah it's it's all about you try it okay good that's so good yeah then you can hide this coupon and the WooCommerce settings or have one and get people discounts or right yeah have affiliates or whatever and then proceed to checkout we have this problem again so we're gonna edit page and get rid of the sidebar okay and we're gonna say sidebar no cyber update that alright to view the page view our page okay so now everything works perfectly and we're trying to buy this but what's our problem yeah it says there's two problems we don't have any way anything set up to ship it whether we want to do free shipping or paid shipping or any kind of shipping we want to do there's no shipping setup and there's no payment process setup either so we have no way of taking payments yet so let's tackle the shipping first how do we go about that all right so we'll commerce has a built in settings to help you set up your shipping so we're going to go back to the dashboard we're gonna go to WooCommerce and settings and there we have our shipping settings so the different zones are like different areas that you want to ship to we're in the United States so we can probably hide out shipping zone for the United States tipping the zone and we should name this what they take us yeah United States this is our you know for shipping to United States then regions within the zone you just start putting any United States so this is where this is just our name for it and this is everything that it serves you know so it serves the United States if we're gonna sit shipped to Canada is probably gonna be more expensive so we need to set up a new zone call it Canada it didn't say you know this is gonna cost a little bit more because it's a little further away right and then what do we do well we can add a shipping method for the United States and then there's a flat rate and I think there's also free shipping if you want to offer that or if you're like a local business you can even have a local pickup I think flat rate will be fine for us so it should be method and we're gonna if you scroll over a flat rate you can see little edit buttons a little bit hidden that's pretty weird like why is it so hidden all right you can choose whether or not you want to tax the shipping and then you can set up a price for the shipping I'll say non-taxable let's say it costs $7 you can also do like some weird things here you'd have to look up the WooCommerce documentation but just search that on line but you can like say okay if they order three quantities it's three you know seven times quantity you know ity something like that yeah so the reason you have those options and you can Google search all of that and the WooCommerce website is overseas oh there's some options there too so hover over the reason is the reason is because you know sometimes everything you want does fit in one box and flattery works fine but maybe you're keeping a bigger item that each one has to be shipped separately so you want to have you know obviously there's more quantity if you increase the shipping price there really is just endless things to do regarding your shop you can almost customize you can customize anything alright so now we've got the shipping done let's mark that off what was the other reason why we can't accept a payment right we have no way of processing payments on the website so right next to shipping we see there is a payment option we can work on that oh sure to save right cancel it Oh save it is saved weird all right all right whatever okay and there's a couple of different options you can have you can set up your bank you can take a check of it something local we can even accept cash or it's local and there's PayPal which is what I like to use most of the time all right so we'll just enable that yep and then we can set up pepaw and people have probably easiest one to set up say it's just a need your email all right so it's PayPal standard then all right all right has my email in there so that's good [Music] all right so it all looks good we Save Changes now let's go and try to buy something let's go back to our cart view our carts still in there we have it here it added our shipping to us cool we can proceed to checkout fill out all the info then proceed to PayPal now why is it okay yeah yeah so so yeah um right after this we're probably going to show you how to change the currency to u.s. dollar or whatever the currency is of your location and you might also be wondering what happens if your customer runner-ups it doesn't have PayPal account so we're going to be showing you that how to fix that too in case they don't people and then tether is almost done something out here has information so we can see what happens when you click proceed to PayPal yeah you can add a note right here and press proceed to PayPal and I wasn't paying attention but did you tell him why you can't take payment on the website right because we're using PayPal so it's jumping over to PayPal yeah and so yeah it jumps to PayPal and we we don't have to you know have to sign up you can pay with debit or credit card right but some people might not like that they might want to keep everything in one is a nullity right on their website yeah and I think it does you know it's not it works it definitely works you know so they can just do it right here but I think it's not as and people trust PayPal so that's a good thing also but it's not as professional as having the credit card you know entering in it on your website and did you explain them why we can't do that right because PayPal is a third party party service so it kind of has to take you out into the air system to process the payment and then at the end bring you back to your website so it's not as seamless right but yeah the issue why we can't take a credit card on our website is because we have this not secured oh yes because the credit card companies if someone's entering in it in people will be able to hackers would be able to intercept that you know while it's going to PayPal they'll be able to intercept it if it's on your website and it's not secure so we need an SSL to encrypt that information so that we can actually accept credit cards on our own website right so yeah whenever you're on a website and you're trying to buy something and it's not secure if especially like if you're on a public Wi-Fi network like Starbucks when you submit your credit card details that gets sent from your computer over the Wi-Fi network to Starbucks Wi-Fi and then you know to the credit card processing company but in between that process if there's somebody else that Starbucks from knows how to you know login and hack it's that kind of stuff if your website is that encrypted they can see your credit card numbers you know in plain text and that's the kind of thing that encryption avoids you know it encrypts those numbers so they can't read them like numbers right so all these payment processors like stripe and PayPal they don't allow you people to put in credit card numbers if it's if you don't have secure on your website so we need that ssl security but i do want to change one thing let's change this so that it's u.s. dollars and not with that so how do we do that and then we'll tackle the ssl right so we're gonna go back to our dashboard and back to commerce and back to settings okay and then let's see for the I think under maybe general general it's in pounds so we want it to be US dollars you and I did States dollars okay cool it then Save Changes and you can put whatever currency your country from you have a different of course yes don't put it United States from somewhere else so let's look at this whoops make sure it really is in United States dollars there it is so we have it right there United safe dollars cool all right so for the good thing with hostgator is um if you do use Hostgator intelligent code and all that they are actually starting to provide an SSL for free with your hosting because google has made such a big requirement for websites to have SSL where that if your website doesn't have an assault and it's not secure who was less likely to recommend it because honestly who doesn't want to be recommending web search that might not be safe right yeah so so how do we add an SSL to our and if your hosting is not doing SSL then for free they should they really should be so right um I mean letter or something I don't know they should be doing it now in 2019 so yeah exactly or whatever yeah if you're hosting doesn't have one you can't always buy it but why would you buy it when you can get it for free from something like Hostgator right so how do we add an SSL to our website okay so we're gonna go back to the dashboard and we're gonna be using a plugin because like we said host kid already gave us an SSL it just didn't activate automatically so we're going to go to our plugins and there is a plugin that will automatically set up our source and configure everything and it's called a simple SSL if I'm not mistaken or easier we add new and then just type in SSL probably and then really simple suffice SL there it is and so we're gonna install now yeah there's over a million installations and over a thousand factor reviews so you know it's really good right and we're gonna get rid of this not secure thing right here so we're gonna activate it and chrome started putting this you know Google Chrome start putting this there so that people would be encouraged to put security on all right so now that we've installed SSL it didn't change anything what do we do right so we have to activate the SSL and I think if you go right into the settings for really simple SSL it should be like a really big button it says activate settings so it says SSL is not enabled yet but we do have an SSL security was detect you know certificate was detecting on your website if this was not detected on our site then we need to write our hosting company a stern letter and saying hey give this to me for free or somehow get in an SS alright so get an SSL if this is there that's good go ahead and activate what's gonna happen when we click on activate well it should change probably gonna log us out that's yeah I might log you out and that's because you're technically on a different URL no because you're not on HTTP here on HTTPS and I have to log in again so if we visit our site or and we go to let's say we go to a different page than my account page we're gonna see this lock and we're gonna not gonna see the navigation bar because the locked is you know the the admin bar because it locked us out if we have the I look over here it says your connection is not fully secure so let's log back in WP dash admin and let's fix that right so the reason we installed the SSL but it's still showing that's not fully secure is because a lot of the files that we use when we're making the website so the images and the tags and Elementor and the plugins those are all unsecured files you know only now that we activate the SSL so we need to update all of those files to make sure they're also secure and Elementor has a really easy way of doing that you just go to Elementor and you go to settings so we're asleep and you go to not--but stools 500 tools now you don't you to replace URLs and we want switch any file or document that has an HTTP URL to one that is an HTTP URL so where says new URL we're gonna paste in the HU know the URL how it is now and then though with the s yeah that's right s and then the old one we're gonna paste it in without the s right so the old one doesn't have the s the new one has the s replaced URL okay Save Changes just for fun I like to go to general and then regenerate the files and might as well resync the library because it's fun clicking buttons not cuz it does anything a the impress save changes and we can view and that was a maintenance mode that I was talking about no I don't know if it actually I don't know what it does but visit site and refresh and now we have that lock symbol and we should have it on every page so sometimes it does let's see I don't think I could get it to mess up sometimes it does mess up every once in a while and all you have to do is click on edit with element or you then make one change and put a space somewhere then delete it and press update and then I'll show you that lock simple right so now we have that great lock symbol and I don't know if we ever told them about the form do we I don't think so we should I don't think so okay so should we do that now yeah little out of order yeah we're already here so you might have a contact page with a contact form it's already set up for you the only thing you might want to double check is we just want to double check that it's going to the to your email so right you can just double check that real quick so we go into the dashboard the contact form is right here contact when people fill it out it will email you basically what happens we have this contact form we can edit it there's a whole bunch of different settings you can add fields delete fields but we want to go to the mail settings and yeah it goes to website demos we want to go to to our email right and you want it to be from WordPress that your what here was another dress so that's really important because if if that was wrong and somebody filled out your form you would never get the email you never so glad we remember that I don't know why I forgot that so I'll put up here all right we added the payment gateway whoops we got the ssl and soar above so how to do the contact form now that we have our ssl now we're be able to accept payments right on our website so they could put in their credit card right on our website but we're not using paypal because paypal makes it really hard to do that then you have to pay 30 dollars a month or something right yeah business account I believe to write it then stripe is free and I like free freeze the best so we're gonna set up stripe to accept payments that is a payment processor so the first thing that we need to do to set up stripe is insert the plugin that's right how do we do that so we're gonna go back to plugins and there is a plug-in that will integrate your strep account that we're gonna create in a moment now with add new write and search for Commerce stripe we'll probably poeta narratives will converse stripe payment gateway so we install that now and then we activate it where is it right so it got moved to the Commerce settings commerce is in settings and payments payments should have a stripe opportunity and now we have stripe right here and we don't need to worry about these I think these are for well you know Ally pay and just different programs and maybe different countries right so if you're if you have some kind of credit card or banking system that requires any of those other ones you know you're obviously going to recognize them we don't really know them but you might you might want to set those up your cup what some I need those right so I'm just going to disable PayPal and then enable stripe and then press setup all right and now it's asking us for this test publishable key it's basically what stripe needs in order to identify that this is your website and to identify yeah you that you can accept payments from them so to do this then we need to have a stripe account so we just Google stripe or just go to stripe comm and you need to set up an account an account setup is really easy you you know put in your email password I'm gonna save you guys some time and in pain and not do it in front of you I mean you guys know how to sign up for accounts I think so I'm just gonna sign in and put in my email then sign into the account of course it's going to text me Oh okay skip this step yeah skip that step okay so now it wants what do we do here right so the first thing you've seen on your website you have heard they're getting your API key so you have a publishable key and a secret key but you probably shouldn't uh share your secret tip whether you hire YouTube but we're gonna we're gonna show you guys okay so I'm all you have to do is click to copy so we're gonna first test the website we want to test that if the payment would work so this is our test keys so we're gonna and then we're gonna paste it then we're gonna go to their secret keys so I copied that and then paste that and this payment request button here what is it right so a lot of browsers especially Google Chrome um have extra payment options through like Chrome pay or Apple pay or things like that and those are cool but they can be kind of glitchy and they're hard to set up so it's something that's better just let people use their own credit card payments and you know we can uncheck that yeah if we didn't uncheck this there would be two payment buttons if they pay here and pay here and that's really weird yeah so we're gonna uncheck that and then we're gonna Save Changes so this is just our test publishable it's a test so we're gonna visit the site and we have something in a cart already let me show you adding another thing to the cart so let's add two things to the cart this one looks nice Add to Cart all right proceed to checkout then now we're able to accept the payment right on our website which is exactly what we want it and it adds it all up for you and does everything great for you so it's giving us a fake credit card number to test with yeah so we copy it expiration date and CBC I think you could just make it up it then it says save payment information so the user could save information to make check out in the future really easy but now we place order and hopefully our order will work all right so now our order and repeated right there yeah or receipt is right there you receipt there we see something will notify you as the owner of the website that an order came through and then something will notify them that this is your receipt so it does that all of that automatically for you so that's really cool so they'll get the same way they get this receipt they'll also get an email and you will also get an email with the confirmation right exactly so but what if we want like a way to manage all of our orders like how do we like keep it all organized what I have to do that so if somebody buys something from you and you have to ship it to the new August I need to know in all this information and to be able to ship it to them so there is um have you go to back to the dashboard are you gonna see where WooCommerce keeps all your orders so you can fulfill them so right under WooCommerce you're gonna see an option that says orders and you can even gonna have a notification port right there yeah so it says orders and then we have a new order that's crazy it's crazy cool we actually have two new orders because of that one PayPal one and then this new stripe one right so we can yeah how do we manage it right so where it says status you see one says a pending payment and one says processing so pending payment means they almost got to the checkout but they never paid for it yet so that person might not have gone all the way through right and hey pal that's what we did we open it up you know you know a them but we never actually paid paid for yeah this we actually did pay even though it was a test credit card right so if you click the little eyeball icon you'll be able to view the transaction and then you have their billing address their shipping address agree to ship it to them their contact information and you know in case you need to contact them for anything maybe they I don't know put something wrong and you have their phone number and email you can contact them so once that is all done and you everything looks good and you way that it whatever you want right and yeah you can click completed and that's it the customer got there product and you shipped it to them and market orders yeah yeah so yeah you mark that as complete and then that's probably as soon as you have you know shipped it or whatever right and then and then let's say alright we're done with that we got stripe our account we manage the orders reports so we want it we want some sort of way to you know visualize how we're doing do we get three sales this week and 20 sales the week after or you know like how do we do that right so you can actually get reports for the sales you've done right under WooCommerce but reports instead of Commerce reports and then now we see wow we've done really well today you know went from zero to it's here yeah the first day that you know if you open your store on the first day without any kind of our advertising and marketing you got a hundred dollar sale good start you do even if it's your mom you're doing it yeah and I just want to show them under right above reports there's also coupons so I just learned something really cool in coupons so though coupons you can create your first coupon and then for example you can put in like the coupon code you want to use and then you can put in like so a coupon code you can be a safer save code right and then description to be you know save 10% right 74% right and then coupon amount you just put you know 74 percent off and you hit publish and now if you know you want to give that code to your friend they can use it and they'll get 74 percent off when they shop on your on your on your website so you go to the site and now it went back down to zero because we actually purchased it right so we go to store and then we add the ball cactus which is not very good product apparently we Add to Cart and then view our cart and then a coupon let's put in save code and then apply and bandit shadow dollars seven dollars so that's really awesome yeah and really easy to do also super easy to do so we did reports coupons working by adding to this will just keep on going forever there's so many things that you can do on them on your website yeah the last thing that I want to show them is how to put in their live keys tested the website it works it can accept credit cards so let's go into our WooCommerce settings payments and for the final thing we're gonna put in our live keys and stripe so manage it says enable test mode what do we do yeah want to uncheck that that that's checked by default you want to make sure that's uncheck uncheck go to our stripe stripe I didn't mention that you have to put in your you know a banking information and stuff like that in order to receive payments to your bank I did that for you I didn't want to put my banking information to the internet for personal reasons yes yeah they asked you for a lot of information on it's completely safe they just need to have that information to obviously deposit money into your account takes about five minutes right about five minutes to but they it will ask you you know for your address phone number contact details and backing information right so I'm just gonna click get your live keys and then copy just click to copy and then publish the live keys and then click to copy and put on a secret key and once you do that we will save changes we can exit out of the stripe visit our site and now we won't see that that tests anymore so now this is a real live site you can pay and then it says entering your credit card number just like that and bam you have a complete ecommerce online store website what is the last thing that we need to do right so your website is done you just wanna maybe double check how it looks like to users so you can log out of your website and see it the same way that a normal user would see it so just hover over here log out and go to our website and this is how the user will see it and you have a complete online website ecommerce store step by step with no step is skipped we're all done and finished thank you for spending time with us I'm Tyler Moore and I'm Matthew and you know if you guys do make a really cool website feel free to leave a link to it in the comments we'll check it out right and where can we find you if people want to get in contact with you right so if you need any help or have any questions about you know anything else that you want to add your website or maybe something wasn't too clear you can go to my website it's I create your site calm and I have a contact form there you can't eleven probably more than happy to answer your questions and I'll put it in the description below and please remember to comment rate and subscribe I'm Tyler Moore thank you so much

Channel: Tyler Moore

Views: 498,273

Keywords: Create a ecommerce website, make an ecommerce website, build a store website, create a store website, make a store website, make an online store, build an online store, create a wordpress online store, wordpress online store, wordpress ecommerce, store, woocommerce store, woocommerce online store, ecommerce tutorial, wordpress ecommerce tutorial, online store beginners, beginner friendly online store, how to, tutorial, wordpress, woocommerce

Id: fQWfFYTEk0o

Length: 154min 10sec (9250 seconds)

Published: Tue Mar 19 2019