How to Make an Ecommerce Website for Free - Wordpress 2021

i'm just gonna say it i think this might be the best ecommerce tutorial for wordpress that i have made [Music] the one and the reason why i'm going to say that is because we're not starting from scratch on this one we're not installing a template and then designing it on our own we're going to be using some professionally made pre-made templates and there's so many that you can choose from that i'm just so excited for you guys because no matter which template you choose any design that you want to use in this video tutorial we're going to show you how to really customize your website and again you don't need to be a designer a web developer you're going to be able to do all of this using the elementor page builder and the astra theme and it's all gonna be free other than getting your hosting and your domain so i can't wait to show you what we're gonna be doing in this video tutorial what's going on everyone my name is jamison and i am the i guess face behind the voice nyc tech club and i'm happy to see you guys here and in this video tutorial we're going to be covering everything that you need to know about woocommerce wordpress the elementor page builder and using the astra theme to build your own professional e-commerce website with wordpress and you can see in this video it's going to be super easy we're just going to be dragging and dropping we're going to be showing you how to create any type of products that you want so single products that means something with just one option variable products with different colors sizes what whatever you guys can think of virtual products and even affiliate products so no matter what you guys want to sell any type of online store that you want to make we're going to show you how step by step so we're going to be showing you guys how to build everything from a home page with latest products and feature products we're going to show you how to create sliders and image areas and customize your text we'll have an about page and a shop page a blog post testimonials even a contact page with a contact form so your customers can write you a message and ask you a question and this website is going to be fully functional that means we're going to integrate a payment service so that you can actually have transactions and get paid and find details about your customers so they can send them out whatever they purchase so all you have to do is watch this video tutorial and by the end of it you're gonna know how to use wordpress you're gonna know how to use woocommerce you're gonna be able to customize your own wordpress website and you're gonna have a fully functional ecommerce website up and running and i can't be more excited for you guys so if you guys want to learn how to make your own ecommerce website keep watching this video because we're going to show you how step by step so let's just get right into it so the first thing that we have to do is we have to register a domain and your domain is going to be your web address for your ecommerce website and then we also have to get hosting which lets you store all of your content so the images the text and everything else that you want to add to your ecommerce website so we want to get hosting and a domain in order to run our ecommerce website so what we can do is in the video description there is a link to the text tutorial that i typed up on creating an ecommerce website with wordpress and we are redoing the nyc tecla website so don't worry too much about the look and feel of this website but this has every step in this video so if you guys need some help or maybe we go a little too fast then you can come to the text tutorial and see all the different steps so right now we're on step number one domain and hosting and what we're gonna do is go to a website called hostinger to get our domain and hosting so you can click on this link right here there's also an affiliate link in the video description so go ahead and click on this and once you come to this page right here this is the host ninja website and before we move on i do want to note that if you use the hostinger link in the text tutorial or the video description you do get 10 off with hostinger when you sign up so make sure that you use that link and once you come to this page this is hostinger this is what i recommend to my clients my friends and also what i use for my videos because they're fast they're reliable they're cheap and they have great customer service and they also have a 30-day money-back guarantee but if you want to use another hosting service that's fine you can check out our resources page we have a link to a pretty much all the different hosting plans but this is the one that i would recommend to you guys if you guys are looking for something brand new so you can also get a free domain and also a free ssl certificate so let me talk about that a little bit so let's click on the start now button and you're going to come down to the web hosting plans there's the single premium and business and the business plan probably too expensive more than what we need so i don't really talk about this one but you can see all the benefits and the differences down here in these boxes so what you want to do is choose the plan that's best for you and you can see that there are some differences for the single shared plan you can host one website you have 30 gigabytes of storage and you can average 10 000 monthly visitors a month and you don't get a free domain so you would have to pay for that and again you do get the 30 day money back guarantee no matter what plan you choose and then for the premium hosting plan you can host up to 100 websites you have a hundred gigabytes of storage you can average 25 000 monthly visitors and you also get a free domain so you do save a little bit of money here but really it's up to you guys i think the most important thing is that you do get the free ssl certificate no matter which plan you choose and that's going to secure our websites for transactions because we are making an e-commerce website people are going to be giving their payment information we want to make sure that we have a secure website okay so really up to you guys if you want to choose the single share plan or the premium i'm going to go with the premium because i like this one for the free domain but choose the plan that's best for you and then once you're ready go ahead and click on the select button and once you come to the checkout page you can see right here that you can choose your billing period so there's one month 12 months 24 and 48 and the higher that you go the more that you do save so i'm going to choose 12 months just because that's probably what i would recommend to anyone that's starting out a website because you get enough time to know whether or not you want to keep doing a website or creating a website and having your own business so once i select that what we can do is come down here you want to create your account and i'll let you guys do that on your own and then select your payment method so they do have cryptocurrency paypal credit cards and all these other options and i'm gonna do this by myself so i'm not gonna show you the credit card information that i'm gonna type in so go ahead and pause the video if you need to to select all that information the one thing that i do want to know is down here for the coupon code we want to make sure that we put one in so you can see that you do save a small little discount right here if you also type in super 10 and push the plus button right here you're going to see this refresh and you should see your discount increase so you can see that you're going to save a little bit more money right here and if you choose the premium plan then you're going to see that you get a free domain so if you don't choose the premium plan then you're gonna have to pay for this a little bit later but that's okay too and you should see that you get the free ssl certificate and the free setup and everything like that so down here go ahead and just fill out your information and then once you're ready click on the submit secure payment and just remember there is a 30-day money-back guarantee so if you guys aren't happy or you decide that making a website's too hard you can get your money back in 30 days okay so go ahead and push this button once you're ready and i'll see you on the inside of the hostinger dashboard all right so once you sign up with hostinger you should see this page right here and all we have to do is click on the start now button and then you can see right here that we want to get the website domain and also name our website so if you already have a domain you can select this option if you guys are using the single shared plan you want to buy a domain so go ahead and select this i am using the premium version so i'm going to claim my free domain so i'll just select this button right here and then down here we can type in the domain that we want to register so i'm going to type in ecommerceshop.myc and then i'm going to type in com right here because that's what i want so i'll just select that and then once you're ready click on the search button and we're going to see the search results so if it is available then you should see this if it's not available that means someone else registered the domain that you want and you want to go and search for a new one okay so if you guys are ready let's click on the continue button and now you should see this section right here and what we want to do is we're going to build a new website so if you guys want we can just select this option right here and then we're going to select the platform that we want so we want to install wordpress and woocommerce since we are building an ecommerce website if you guys are only building a wordpress website with no e-commerce section then you can select the wordpress option but the one that i want is woocommerce and wordpress so i'm going to select this one right here and then once we do that we can come down here and we can create our wordpress account so type in your email address and then your password and then once you're ready go ahead and click on the continue button and once you come over here we don't want to select any of these templates because we're going to go and select another template using the astra theme and so we're going to just click on skip i don't need a template and then right over here let's finish setting up so you can see that you have your domain your website location and you probably want to check and switch this to the closest location to you because this is going to make your website a little faster so you can see that i can select north america since i'm in new york and then we're installing woocommerce and wordpress and then we have our email right there so once you're ready go ahead and click on finish setup so what we want to do here is put in our information to register our domain so you can just come in here and then just select your country and then you can click next and then put in your details right here and then once you're ready click on finish registration and once everything is set up you should see this notification right here that says your website is ready and that is going to be awesome so we're on the right track so now what we want to do is we can go to our wordpress dashboard but what i want to do first is just show you the control panel so let's open this up let's click on manage site and once you come to the control panel all we're going to do is just scroll down to this section right here where it says ssl certificate and we want to set this up so turn this on and just check out to make sure your domain is correct and then click on install ssl and once everything is installed you should see down here that the ssl certificate is enabled and this is going to encrypt your website which is going to secure the transactions that your customers are going to have with your website so now what we're going to do is go to the wordpress dashboard to start customizing the ecommerce website so up here you should see edit website if you click on this it should redirect you to the wordpress website but if it doesn't like this where it says sorry but this page you requested doesn't exist then just click go back right here and you'll come to this page right here and what we can do is click on the manage button again and it's going to bring us to this page right here i'm going to click on dashboard and then again we're just going to come in here and click on the edit website button and once you come to this page right here this is the wordpress dashboard and before we go through anything and talk about anything the first thing i want to do is go to our username and make sure that we know our username and also change our password and show you how you guys can login to the wordpress dashboard without having to go through hostinger so down here on the left hand side you should see users go ahead and click on all users and you should see your username right here so let's click on edit and once you come to this page this is where we're going to go to check out our username so our username is going to be our email address so just remember that and you can't change that so just remember the email that you use to sign up with hossinger and then over here you can put in your first name last name or your nickname and then you can choose what name you want to display for your blog posts or any pages that you create that might show the username so i'm going to use my first name right here and then all we want to do is i want to make sure that we can change our password because right now we don't know what our password is and we want to make sure that we know that so that we can log into the wordpress dashboard anytime that we want so in the account management section just click on set new password and there's a secure password that's going to show up right here if you want to use this just copy it and save it in a safe place so write it down or something like that because you want to make sure that you have this and then just click hide and that's pretty much all you have to do just scroll down to the bottom and you can type in your own password too so you don't need to use that super secure one just choose a password that works well with you that you know and you can remember and then once you're ready click on update profile and once everything is saved now we are good to go and we have our username and our new password down here and i'm going to put the url that you guys need to log into your wordpress website so it's going to be dot www.whateveryourdomainnameis.com slash wp dash admin and that's going to bring you to the login page and that's all you're going to do you're going to go and put in your username and password and then you can just log in if you ever want to create some additional users just come to users again click on add new and then you can create a new user with a new email okay so that's pretty much all we're going to do here because i wanted to make sure that we knew our username and password i'm going to go back to the wordpress dashboard now so hover over dashboard click home and we'll talk about this a little bit all right so once we're back on the wordpress dashboard let me just give you a quick overview if this is your first time using wordpress so the dashboard is the backend this is where you can go to create pages post upload images go through your settings and create your header menus your footer menus and also go through the theme layouts and customize the template that you want to use and also upload plugins which are tools to help you customize and create your website so we will be installing a theme and also installing different plugins that we need to build out our website so if you guys want to check this page out you can there's really not much here you can always clean this up by deleting some plugins we're going to leave everything as is right now and we're actually just going to move on to the next step which is going to be installing the astra theme so that we can customize and build our ecommerce website so what i want you guys to do is go back to the text tutorial or the video description and down here on step number four you should see install theme and there's gonna be a link to the astra theme which is one of the most popular business and e-commerce themes available with wordpress and we're going to go and download the free version and upload it and you can always upgrade to the pro version also so go ahead and click on the astro theme link it's an affiliate link that's going to bring you to this page right here and all we have to do is click on the download button so go ahead and click on that and once you come to this page right here what you're going to see over here are different plans for the astra theme and we're going to use the free version so if you guys do want to upgrade you can do that here you can see the features and everything but it doesn't really matter for what we're trying to do because again we can use the free theme and build a very professional ecommerce website so down here you should see a link that says download free astra theme go ahead and click on that and all you have to do is just type in your name and your email and pretty much that's it so we're gonna just click on subscribe and download and you should see the file get downloaded right over here so once we have that i want to make sure that that is a zip file so what i want you to do is go to wherever you downloaded this file and you should see the folder right here i want you to either right click or go to your macbook and compress this so you can see that we're going to turn it into a zip file because this is what we're going to upload onto the wordpress website so once we have that we can go back to the dashboard and now we want to go and install the astra theme so to do that we're going to hover over appearance and then click on themes and over here you can see that there are some themes that are downloaded by the wordpress developers and these are default themes what we're going to do is go and install our new theme so just click on add new and once you come over here click on upload theme and then this is where you're going to drag in or put the file so i'm going to come over here and just click and drag this right here and you can see that we have astro.zip so you want to make sure that you compress that so that's a zip file and then just click install now and once the theme is installed we want to activate it so go ahead and click on the activate button and once it's activated you should see it right over here and if you need to update the version to the latest available go ahead and click on the update now button and you can see that it's updating right here so we'll just wait for that to update and once that's updated and maybe you didn't have to update so if you didn't that's awesome what i want to do now is i want to show you what the website looks like so i'm just going to click on visit site and you can see it looks very basic we have our title up here or website address we have a header menu and then some blog page or post nothing really fancy about this at all and what we want to do is we want to turn this into something like this that we can customize so i'm going to show you guys how to do that so let's go back to this website right here and i'm going to go back to the dashboard so just hover over the website name click on dashboard so once we're back on the wordpress dashboard you can see right here that we have these pop-ups and this little thing right here that kind of shakes sometimes we don't need the monsters insight and we don't need the option monster so i'm gonna go and deactivate or maybe even delete these two plugins before we move on to the next section so if you guys want to do that just come down here to plugins hover over that and click on install plugins and what you're going to see here are all the different plugins that you have for your wordpress website that are installed and activated or deactivated for you so if you guys want to remove some of these you can so what i'm going to do is just come down here and you can see that i selected the option monster right there and i'm also going to remove the monsters insight because we're not going to use this right now but maybe you guys will want to integrate that later so i'm just going to come up here and deactivate these and if you guys want to you can deactivate these other ones or you can always go and install some additional plugins if you want also okay so you can see that the option monster disappeared from the left hand side now i'm going to go back to the dashboard and now what we're going to do is go and install the template that we're going to use to customize our ecommerce website so if you want to do that we can just hover over appearance right here and when you hover over this you should see the astra options go ahead and click on that and once you're on this page right here we're going to go in and customize our settings for this stuff a little bit later but first what we want to do is install our template so over here you can see that we have 150 starter templates and what we want to do is we want to install the importer plug-in and you can see down here someone is messaging me but we're going to ignore that for now and we're just going to click on the install importer plugin and you can see that it's activating so we'll just wait until that's finished and once it's ready you can see right here we want to select the page builder that we want to use and i like to use the elementor page builder i think it's the number one page builder for wordpress there's a free version and a premium version and we only have to use the free version so we're going to select this one right over here so once you come to this page right here these are a bunch of different templates that are pre-made for you by the astra designers and you can upload any one of these and customize them and really you can just watch this video learn how we use the elementor page builder and customize any of these templates now some of them are premium so that means you have to upgrade to the astra pro version but a lot of these are free also but again we are creating an ecommerce website here so what i want to do is at the search bar up here i'm just going to type in ecommerce and once i do that what you're going to notice is that we have a bunch of e-commerce templates right here some of them are premium and the one that we want is this one right here the cosmetic store so if we just click on this you can see that we have the website right here and you can scroll through it this is the home page you can check out these other pages what we're going to do is import the complete site and then we're going to show you how to customize the stuff so you can change the background the text the buttons the colors whatever you guys want so if you guys want to find another theme or template you can click back and again by watching this video you're going to really be able to learn how to customize any type of astra theme template because it all does pretty much the same thing with the elementor page builder but we're here to create an online store so let's go and import this one if you guys want so we're going to click on import complete site and right here we're going to just select that we're a beginner expert or whatever you guys want this is just some data for them and i'll just say for myself and then we'll click next right here and then we'll put in our name because that's what they want so i'll just type in jamison and then if you guys want to put in your real email you can i probably will not so i'll just type in jamesonmail.com because i i like the the astra theme and the astro developers but sometimes you just don't want emails from people so i'm gonna put that one in and just click submit and start importing and right here you can see it says we have sent you a surprise gift and if you have your real email then you'll be able to get that gift but i probably won't and we're just gonna let everything import so it's going to be importing the plugins that we need and then once this is done we'll move on to the next part of this tutorial so you can see right here we imported everything successfully and now what we can do is check out the website and it should look a little bit different so you can see right here now this doesn't look like a blog website and there's a bunch of stuff going on we have a logo we have a cool header menu and we have a shopping cart we have background images and buttons and everything that you guys need for your ecommerce website including products that we're going to show you how to customize and replace and so you guys have already seen this because we went through the demo website and this is exactly the same so what we're going to do now is we're going to show you how to customize all these different sections and really add whatever you guys want to create your own ecommerce website so let's go back first to the dashboard so hover over your ecommerce website and click on dashboard once we're back on the wordpress dashboard right here i'm going to close some of these tabs because we don't need them so i have the ecommerce website right here the text tutorial the demo website and i also think that this is the demo website also so i have two of these tabs and i can probably close one of these so let's go back to the ecommerce website and what i want to do is i want to go through the settings really quickly because we have our website name right here and i want to show you where you can upload your logo and also where you can change some of the colors and everything like that so first let's go through the general settings so on the left hand side of the dashboard we should see the settings tab right here if you hover over it we can go through some of these so first let's go to the general tab so the first thing that we can do is we can change the site title right here so maybe i'll just change the name to something else so i'll type in beauty cosmetics because this is a makeup website and that's just the name that i came up with and then for my tagline i can leave this blank or i can type in something else and once i do that over here for the wordpress and the site address if you guys want to have the www dot right there just put that in don't change the rest of the url leave everything else as is because if you change anything it's going to mess up your website you can't change your domain name or anything like that okay and we will be installing a plugin to get the https to make our website secure so we'll do that right after this and once you guys are ready you can come and change the formatting if you need to but i don't need to do that so i'm going to click save right over there and because we updated the url we do have to log back in so i'm going to just do that and what we can do now is let's go and install the plugin to secure our website with that ssl before we do anything else with these settings so let's go to plugins and let's click on add new and once you're over here all we're going to do is go into the search bar and type in really simple ssl so go ahead and type that in and the search results should come back and this is the one that we want so we can just click install right here and this is going to be really easy so the hard part is really just finding this plugin if you guys have any problems let me know and we're gonna click install and we're gonna click activate and once you do that right here where it says almost ready to migrate all we have to do is click on this blue button right here that says go ahead and activate the ssl we're gonna come back to this login page which is where we have to go to log back in because we updated our url again so once we do that you can see that the ssl is activated and there are some open tasks that you can go through and you can submit but you don't need to everything else should be pretty good and we're going to leave everything as is so if you guys want you can check this stuff out you can enable disable whatever you guys want to do and now what we're going to do is we're going to go back into our settings so if i go to the general tab right here under settings what we should see is the http now has this s right here and this i guess it stands for secure so that's the best way to explain it so now our website is encrypted and that is awesome and we don't need to do anything here we can click save if you guys want and once we do that now what i want to do is we're going to go into the settings again and what we can do is go into the reading tab and what you're going to notice on this page is that the home page displays has the static page selected and we already have a home page selected so when someone goes to our web address they're going to go to this page right here and we don't have a blog page created already so we're going to create one and that's going to be helpful for your visitors so if you have any updates or anything like that also go with seo so we're going to create a blog post page and then come in here and select this so we can hover over new and click on page or what you can do is over here hover over pages and click on add new either way you're going to come to the add new page and once you come to this page you can go through this editor we don't need to right now so i'm just going to close that all we're going to do right here is just type in blog and i'm going to click on the publish button and we can always come back to this page later so again that's the blog page and we're going to go back to our dashboard so i'm going to click on the w right here and you can see that we have the dashboard we're going to go back into our settings so just hover over settings and then click on reading again and then now over here in the post page we can go and find the blog page select that and then click save changes and there is going to be a blog post section so we'll cover formatting the blog page the theme settings for the blog page and how to create blog posts a little bit later okay so we saved that so you want to make sure that you save that and then once you do that we want to go back into the settings and the last thing that we're going to do is come into permalinks right here and over here we can change the url formatting the best one is the post name because this is going to give you the best seo url with the page title or article title so just select the post name and then just come down again to the bottom and if you want to change your product permalinks you can do that over here also i think the default one is the best one so i'm not going to change that so i'm going to click save changes and everything should be saved and then we should be good to go so we can always come back into our settings if we need to a little bit later but everything looks pretty good right now so what i want to do now is we're going to talk about the theme settings which is going to be customizing the layouts the colors uploading a logo and different things like that so let's just cover that and we might not even need to change anything but i do want to make sure that you guys know how to do this so hover over appearance and then click on customize and once you're on the theme settings this is where you can go to customize the look and feel of the ecommerce website so you can change the header layout the font colors the styles the link colors and a bunch of other stuff so we're not going to change anything because we're going to use the default layout options but i want to go in here just to show you guys so that you can customize your own layout for your ecommerce website if you want so first let's go to the global tab and you can see that we have a few different options for typography color buttons and if we go into typography you can come in here and this is where you can change the body font so if we come down and maybe we'll just choose one of these you can see that it'll refresh and the body font changes and you can also click to move the font size and you can see that it becomes really large we can undo that we can go back in here and change this back to whatever it was before so i think it was this one and there's a bunch of other stuff here so you can just go through it check it out if you do like any of the changes you make you want to click on the publish button up here and you can also see what the website looks like on different devices so you have the desktop tablet and the mobile device and you want to make sure that your website is responsive so you can also hide this if you want to see what it looks like just as a preview screen i'm going to go back right here you also have the headings so you can see we have heading one and then if we scroll down heading two three four and five and those are just the larger fonts over here so again we're not going to change anything but if you guys want to you can always pause the video take your time choose what you like and again you will see a preview right here so you'll see the changes right away and again if you want to save them you want to click on that blue button whenever you see it so in the colors tab this is the text color theme color link colors and when you hover over it again we're not going to change anything because we're going to keep everything kind of how it is maybe we'll change some images and a few different things but we're not going to do too much i don't want to waste too much of your time because everyone's ecommerce website is going to be special and unique so you'll probably choose your own colors that really represent you and your brand so we're going to go over here container there's really nothing to do we leave the layout how it is but again you can always play around with this stuff and if you want to make any changes go ahead and do that and then you have your buttons right here so for your buttons you are going to be able to customize these as we go through using the page builder but these are the default layout options so whenever you just add a button and you don't customize it these are the colors that you're going to get the text colors be white the background color is going to be this color and then you have your borders and everything like that but just remember that this button is probably customized using the elementor page builder and that's why it doesn't have the background color that you see right here so again you don't really need to do anything here but just giving you guys a heads up that this is where you would go if you wanted to change your header option so you can see right here that when we come into the header builder that we have the logo which is going to show up right here and then we have our menu and cart right here if you wanted to move this stuff around you can actually just drag this over and then the logo will show up over here instead so that's all you have to do and you can rearrange this stuff you can add whatever you guys want you can go into the design tab right here and you can change the width option again nothing to do but you can also change the menu right here so if i click in here you can see that you have your menu style so you have different options and then you can customize everything here too and we do go and show you how to create a header menu and we set it as the primary menu so if you don't like these links up here and you want to add your own custom ones i'm going to show you how to do that a little bit later in this video okay so we're going to go back and again you can rearrange this stuff if you guys want to you can even go in here and this is where you would go to customize your logo so if you click over here into the header builder and you want to upload your own logo just go into this logo tab right here remove this and then upload your own logo so you can just click on change logo click on select files find the image or logo that you want to use and then you're good to go if you have anything saved in your media library it would show up over here and then you can choose the logo that you want and again it'll populate all right so there is that button down there to select that and down here you can change the logo with if you wanted to and you can also turn on or turn off the site title and tagline and we have this off because again we have the logo name which is supposed to be your business name and sometimes it doesn't look good with the site title and tagline and if you guys wanted to add a little site icon which kind of shows up sometimes on the tab or in the web browser over here you can also upload a smaller icon for that okay so again there is this design tab if you want to change anything like your margin or padding and margin is just spacing same with padding it's just one is on the inside and then the other is on the outside we'll talk about spacing a little bit later in this video when we get the elementor passable to turn on so for breadcrumbs i don't think there's anything to do here so i'm just going to leave it as is and then for the blog post over here this is where you can change the layout for your blog pages so you can see right here that it has the structure which is going to have the featured image and then the title and then the metadata right here if you want to turn any of the stuff on you can just click on the eyeball and then it'll turn on like this so if you wanted to go to the blog page before you edit anything then you can always go to that page and then you can turn on the theme customizer so that you can see your changes so again we're going to be showing you how to create some blog posts a little bit later so maybe we'll come back here if we need to and we'll customize the section so single post is for a single blog post because the other tab was for the entire blog page or blog website of the web i guess i don't want to confuse you but the other tab is for the entire blog and then this is when you click on a single article so again you're going to see the structure and the metadata of what you want to show up so it'll make more sense once we go and create a blog post so we'll skip this one for now and then down here you have your sidebar and again we can customize this a little bit later if we need to for your blog pages or your woocommerce pages but right now again leave it just like how it is and then your footer if you open that up you're going to see your footer down here and this is on the demo website and probably on the website that you imported and again you have this builder where you're going to have your widgets and then your different widgets over here so we're going to go to the widget page a little bit later and that's where you would insert the stuff and then you're going to see this stuff right here widget one two and three so if this is confusing right now don't worry but what you can do is you can always just click on this right here and then you can choose what you want to add for this widget so you can see that widget one is contact details and that's this right here so you can see that we have a menu right here with our contact details so i'll show you how to edit that stuff a little bit later and again all i really want to do here is just kind of give you a heads up right now of what the theme customizer is and we will be editing the footer section a little bit later and then you have these other options here so you have your social media you can add some additional icons if you want just by clicking on this and then you can go in and add whatever is missing so maybe like linkedin or i don't even think they have google plus anymore but if you want to edit anything just click on this and then you have twitter right here and then you would type in the url for the account page right over here and again just click on the save button or that publish button and then you can also customize this up here and then you have the design tab right over here for the different icon sizes and different colors if you guys want to have your own colors so i'm going to go back really quickly and the next thing that i want to do is come into the woocommerce tab so over here is where you can go to customize the layout and setting for your store option or the product pages and again we're not going to be doing anything because everything is already set pretty well but if you want to enable a store notice right here so that you can update the shop without people seeing it you can just turn this on right over here and then for the product category or catalog right here this just lets you select what type of products that you want to show for the shop page and then the category pages and we're going to leave everything as is but you can come in here and select your different options and then see what that does also if you want to have a certain number of products per page this is where you would put it in and then you can see right here that this is what's going to show up on the products so for each of these you can see that we have the category title ratings and price and right over here you can see category title ratings and price and if you want to remove any of these just click on the eyeball and then it'll disappear so you probably don't want to include the short description because you can see how long that makes this section and that's just a little weird so we're gonna keep that hidden just like that okay so again if you do make any changes make sure that you always push on that publish button and i'm just gonna go through these other ones really quickly so single product we have the breadcrumb display so for single product we have disabled the breadcrumbs and then for the product images these are just the default sizes and then you have your shopping cart right here which is gonna have the cross sells if you want you can disable this and i just kind of recommends other products and then you have your checkout page right here with the name if you wanted to or what you can do here actually is you can make certain things optional so you can see company name not everyone is a company so you want to make that optional and then you have these other addresses phone fields and then these options down here that you can set also so we will be making a terms and conditions page because we want to make sure that we have that set for our ecommerce website and you also want to update the privacy policy page and there is one set by default because wordpress does include one but it doesn't have a lot of information and then over here you can see that there's a little excerpt for this section right here and it links to that privacy policy page okay so again if you do make any changes you want to click on that publish button right there and that's pretty much it we're going to cover the menus and we'll go through the widgets a little bit later if we need to and then we have already set the home page and there's nothing with css but if you want to add some to customize your website you can right over there all right so if you guys are ready i and this was just a quick little teaser or really just an update section just to show you all the stuff so we again we don't make any changes here but if you need to you can always pause the video to do that alright so i'm going to close out of this and we're going to move on to the next section so once you're back on the wordpress dashboard let me just give you a quick tour so over here is where you can go to create your blog post and right here is where you would upload images so we're going to do that in just a little bit or at least i'll show you how because we are using the demo content from this demo website and then here you can go to your pages or you can create new pages so if i click on all pages you can see that there are some pages already created for us and this is because we installed the woocommerce plugin so they do create these and also we imported the demo website so you can see we have an about page we created the blog page we have a shopping cart and all these other things right here so if you ever want to edit or delete any of these you can do that right here and then down here you can see that we have woocommerce and this is where you can go through your settings which we will be doing in just a little bit we can also add new products right here so this is really good for the online store that you're making you probably want to add a bunch of different types of products for things that you're selling and then you have all these other tabs here that you can go through and we don't really need to go through these ones but that's a pretty quick tour of the wordpress dashboard so what i want to do really quickly is just show you on the text tutorial that we do have some demo images so if we come down to i guess step number eight right here there is a link to demo images so if you click you'll download a zip file and that might open up a new tab just because i made it do that and once you have that zip file what you can do is open that up and you can come to media right here and then click on add new and this is what you can do to add your own images also and you can add them one by one as we create our pages and posts this is just one way to do it you can click on select files and what i want you to do is go to wherever you downloaded that file or that folder and then you can see that you have a bunch of images right here i'm just going to upload some of these just to show you and you can upload them one by one and again you don't need to use the demo images you don't even need to use the same demo website that we imported you just need to watch this video and then learn how to do everything and then you can create and add whatever images that you want to use so really quickly we're just going to let everything download just so that you can see that this is one way to upload images the other is if you create products pages and upload things one by one so i will show you how to do that also so once we have these images and again these aren't going to be very consistent with the current web layout that we have but i did want to show you that you do have these images here you can click on the edit button or what you can do is go into the media library right here click on this link and you can see that we have all the images for the demo website that we imported and then also these new images that we just uploaded so if you want to edit any of these you can just click on the image you'll get the pop-up you can delete this you can also click on edit image right here and then you can crop this image if you wanted to you can rotate it you can flip it you can even change the size right here so if you do make any changes you want to click on that save button right there okay so again if you want to remove these we can just bulk select these and maybe that's what i'll do but i will be showing you guys how to upload images as we go through this so i'm just going to delete these ones i don't know what this is maybe i'll delete this one too and i'll just click on delete permanently and then click ok and that should remove them all so you can see that they're all gone and now these are the images that we are going to be using for this demo website so that's pretty much it i just wanted to show you guys how to upload images and again you can do this as we create pages and posts okay so if you guys are ready let's move on to the next step so now what i want to do is show you how to use the elementor page builder to edit the home page so this is going to be kind of exciting and also maybe new to some of you guys so just be patient and just know that everything is really really easy and if you ever have any questions just let me know so i want you guys to hover over pages click on all pages and once you come to this page find the home page right here and we want to go and click on the edit button so this is the back end of the home page so you can see right here that the title is the home page we're going to be turning on the element to our page builder in just a little bit but first i want to show you that there is this pages tab right here so if you ever want to delete this page you can you can change the publish date you can also edit the permalink for a lot of your different pages except for the home page if you set that page and then you do have these other tabs right here so the main one is the astra settings right here you can see that we have the no sidebar selected and then the full width stretch content layout right here if you want to change this you can but again we're using the default settings for the website that we're importing so we aren't going to change too much here you can also disable the title for the page so that doesn't show up the breadcrumbs all these other things so it's really up to you and you can also enable or disable the transparent header down here there are some additional stuff that you can do to edit the page for seo so you have the meta description the page title and all these other things so i'll let you guys play around with that we don't really need to cover anything here you can actually remove this plug-in if you wanted to but we'll leave it just because okay and if you do edit this page you want to click on the update button right here and you can see what the seo plugin that you do have a score right here so if you want to update this or get it higher you do want to change some stuff here so that the seo is perfect and you get like a 90 or 100 or even 80 out of 100 is really really good okay so i'll let you guys do that on your own let me know if you guys have any questions about that but we're not going to cover seo in this video so what i want to do is just turn on the elementor page builder to start editing the ecommerce website so click on this button right here that says edit with elementor and once you're on this page right here this is the elementor page builder so i'm going to give you a quick tour of the page builder and then we're going to show you how to customize this website if you need some additional details i do have tutorials on how to use elementor and also how to build a website from scratch but we're going to really make this process really really easy because we have this demo template that we really just have to customize and swap things out and add whatever you want to add so on the left hand side you can see that this is the elementor modules and you can just click and drag the stuff in so let's say for example i want to drag in a headline i can drag it right there and i can just type in my text right here and then i can go over here change the size i can go into the style tab and change the color and i can also change the font style so maybe i'll just select that one i can also make the size different and i can transform this and maybe even italicize it and then change the line height and the letter spacing so super easy that was just a few clicks i think i went a little bit longer than it normally takes just because i was explaining everything but say you don't even like that all you have to do over here is there's this history button click on that and then you can undo any steps so let's just say i want to click here it changes that i can click here and then if i go all the way back to the beginning it's gone just like that so these are a bunch of modules we're going to show you how to customize a lot of them primarily the ones that we will be using for this demo website but again super easy you just go in there and customize however whatever you want so even this stuff like if i add a spacing element and then i just make it larger you know it's pretty it just seems very very easy and that's why i like the elementor page builder so again there are some pro version modules this is for the premium element toward page builder so you do have to upgrade if you want to use the pro modules but we don't need them for this tutorial everything that we're going to be doing is for free and that's the best part of this video tutorial so over here you do have the responsive mode if you click on this you can see what the website looks like on different devices and i will have a section to make sure we cover how to make sure your website is responsive so it looks good on all the different devices because i know a lot of people nowadays are surfing on their iphones or their androids and they're not always on their desktop even though i have my desktop with me at all times and what you can do over here is you can preview your changes so this is going to open up a new tab with the website you can also just hide the sidebar like this and then you can see what the website looks like so again we're going to be customizing this entire website or showing you how to and then you can pause the video for each of these different sections i don't want to spend too much time creating something new because i think the layout for this website is beautiful but i will show you how to add a section and then you can customize it we're also going to be creating a bunch of different products for our online store that will show up in different places and on the shopping page and that's pretty much it okay so again if you guys have any questions let me know you can always pause the video and if i speak too fast leave a comment in the comment section below and i'll get back to you as soon as i can so the first thing that we're going to do is show you how to edit this background image so if you want to do that what you want to do is click on the dots right here to go to the edit section right over here so the first thing that we're going to do is click on edit section and what you're going to see is the edit section right here and what we want to do is we just need to go to the style tab right here and this is where you can insert an image so in the background section right here let me just show you you can choose the classic option you can choose a gradient if you want to choose different colors so you would have two different colors here and this is a secondary color so you have two colors you can also add a video if you guys want and also a slideshow so if you want to have multiple images just click on this and then you can upload your own images by clicking on the upload files tab and clicking on select files if you want to use the demo content then you can just select these images right here so i don't think these are good resolution images but i'm going to use them anyways and i'll just click insert and you can change the duration for how long you see on each image over here and you also have the transition and duration time so you can see that the images transition to the next image after five seconds and yeah these images aren't that great so i'm going to remove this but that's how you can add a slideshow if you guys want and then if you just want one background image go to the classic option you can choose a color if you don't want an image you would just delete this and then you can choose the color right here so it's really up to you guys but if you do want to use an image then we can override that color by clicking on the plus button right here and again to upload your own images all you have to do is click on upload files in the media section and then click on select files and then find the image that you want to use in the media library we have all of our demo content right here so i'm just going to come back in here and select this image so you can just select it so you have that check mark right there and click insert and you'll see that it shows up just like this you can change the positioning if you need to and then you can also change the size the cover is probably the best one so that's the one that i would use and then if you guys want to add a background overlay which is a color tint then you can come into the second tab right here that says overlay and then you can choose the color that you want so if you guys want it to look just like the demo content just leave it as is and again remember you have this history button if you need to change anything you can also add a secondary color we're not going to mess around with this too much but this is the overlay section and just remember we're in the edit section so we're editing this entire box right here so if you have a border or shape divider or you want to change the typography colors the default colors you can do that over here but you can also do that in each of these modules the last thing to mention is that there is the advanced tab right here so this is spacing and margin and padding margin is what's on the outside of this blue box so you can see if we had some stuff up here it would be on the outside padding is what's on the inside so you can see that we have padding on the top so this is 220 right here and then to the right and the left we also have padding so if i hide this you can see that we have 30 px right here and also 30 px right here and then some padding on the bottom and i can just show you by changing this really quickly so for the top let's type in 500 just for fun and you can see that padding pushes this down because you have all this padding right here okay so that's just a quick little lesson on padding a margin let me know if you guys are confused about that but there's some other stuff here that we can go over motion effects if you want an entrance for this section you can select that here so maybe you want something like fade in or something like zoom in which i wouldn't recommend but you have all these different options we're going to go with none right here but this is some animation that you can have for your different sections and kind of cool when you're scrolling down or your page loads if you guys want to have an animation but again that's up to you responsive this is a tab that we're going to cover a little bit later so we're not going to talk about this yet but we are going to be making sure that our website is responsive and there's nothing here and custom css if you guys want to add some then you can add some but again all we were doing in this part of the video was showing you how to change the background image or color for your different sections and again all you have to do is click on the dots go into the style tab and then over here you can change the background color or image and you have all these other options right here okay so i'm going to click on the update button just to save that and now what we're going to do is we're just going to go down and talk about all these different modules so the first thing i'm going to go back to the main page here is what you're going to notice is when we hover all the over all this stuff we have a big checkered box and that is a big column so if we go in there so we can click on this little icon right here you can see that it says edit column and this is one single column and you can change the background color here too if you wanted to so let me just do that just to show you you can see that we have that color just like that and you're probably wondering what the heck how come it doesn't cover this whole thing and the reason is just like we talked about in the advanced tab right here we have some margin so margin just kind of squeezes the section out so if we were to remove this though then you can see it goes all the way across but because we wanted that space right here so that everything just formats over here and then we have this open we put in some margin right there and let me just show you because we do have this red color here if i was to type in some padding here let's see what happens let's type in 35 right here nothing happens because padding is what's on the inside so it just gives you some padding on the inside of this column so for the margin it pushes this over okay so again a little confusing but the best thing for you guys to do is play around with the margin and padding and then it'll become easier and you have these buttons right here to link everything and de-link everything so i'm going to go back to 35 just like that and i also want to change the color back to nothing so i think i'm going to go white and then go transparent right here and then that should make it perfect so again click on the update button and so we have our column right here let's go through this first text box and you can see when i click on it you can see one that it highlights with a square blue border right here of what we're editing and it's a heading so we can come in here and change our text to whatever we want and if you guys want you can pause the video to do that i'm going to leave it as is so i'm not going to change the text you can change the size right here or you can leave it and you can also change the alignment so you have center right left whatever you guys want and the important thing here for these text boxes is the style tab because you can change the color right over here to whatever color that you want and you can also change the typography and i mentioned this a little bit earlier in my first example so it's really easy you have all your sizes and this is boldness right here the weight and you can transform stuff so if you guys want i am going to cover these other sections right here but first let me just undo all this stuff so i think i'm going to go back here and there we go if you guys want you can pause the video and just click into each of these text boxes this is another heading and you can just customize it and then this is a text box right here it's a little different the thing that's different between a text box and a heading is really just the font styles and sizes so you would just type in your text here and then go to the style tab and again you can edit the color and typography you can also before we move on go back to the main dashboard here if you wanted to add another text box just click the text editor and then drag it to wherever you want to place it and you'll see that blue bar right there if i want to place it below this other text box i would move it down here and then i can insert this it'll pop up and then we'll have the text editor right here and then we can change our text to demo text hello and we can go into the style tab we can change this to white and then we can change the typography right here also and the size and then if you want to remove it we can just hover in here right click it and then click delete and remove it just like that so it's really easy to edit text and headings so you can see that these are the two modules right here that we just learned about so why don't you guys pause the video if you guys need to to edit this section and just know that there are a bunch of other text boxes too so we have one right here and the best way is if you click into these you can see what type of modules they are because it'll say edit whatever the module name is right there so you do have some headings right here and then over here you should have some additional headings and a text box and then down here you have some text boxes also so again we're going to cover all these different sections but i just want to point out the stuff so if you guys are wondering how do you edit this then you can just go into these text boxes and do that on your own so what i want to do now is we have a button right here so i want to move on and show you how to edit that so again you can pause the video right now if you want to update this section and you can always remove stuff and then once you're ready push play and we'll talk about editing buttons so if you want to edit a button and you can always just edit the one right here or you can drag in a new button to place it wherever you want to place it you're going to see it pop up and then you'll have the edit button section right here there are a few different types that you can choose from and these just give you different colors from the default settings so you can select whatever you want you can put in your text right here and then the url for the button right here so you want to type in something like http colon slash www.yourwebsitename.com whatever and then you can change the size of the button right here and also the icon if you want and then if you want to style this button you can come to the style tab you can change the formatting for the font right here so the size and the style and then right here this is the probably the most important thing so you have the normal and the hover tab so normal is when your mouse isn't hovered over the button and then hover is for when your mouse is hover over the button so you can see on this other button we don't have anything right here it's just transparent but then when we hover over it it turns white so if you want to do something like that for this button you want to customize what the button looks like first so first you can change the color so maybe we can change the text to red and then the background color right here we can go with transparent so i'll just drag this all the way over here and you're probably saying oh no there's no border or anything like that well down here is where the border stuff is so we can go with a solid border and then we can put in the width right here so if you have this button clicked then when you type in a number right here it's going to go all the way across if you unclick this then when you edit one of these numbers it's going to just edit that number right there okay so we can also change the radius so we can make it thicker so something like thr or actually the radius makes it rounder so let me just show you if we go with 10 you can see that the edges are a little bit round so let me click out of this so maybe you can see it a little bit better you can see that it's round just like that and this button is not that great i should probably make the border even thicker and oops we want to just make sure that goes all the way across so this is just a quick example of how you would edit a button i do want to show you how to edit this one which we are going to be keeping but you also have some additional stuff down here such as padding so if you wanted to make the button even larger we can go with 50 all the way across and you can see that it just adds padding inside that okay so what i'm going to do is right click this and remove it and we can just click on this button right here and you can see that we have the edit button section right here and all i did right now was i just put in a url already for this page so it's just https colon slash www.ecommerceshopnyc.com so you want to put in your own website name right here and then at the end all i did was i put in slash shop slash and that's going to link to the shopping page or the store page for our ecommerce website and i know this because i've created so many woocommerce websites that this is the default link for that page okay so i can just show you really quickly actually i can copy this and then go to a new tab and if i paste in that url this is the default shopping page right over here so that's the same link that we just put in for our button so whenever someone clicks on this they'll go to that shop page you can also change the alignment the size you can add an icon if you wanted to and there is a icon library right here so you can click on this and let's just say we want to add this one we can click insert and then you can see that we have the little icon right there and if you want to remove that just click on this right here so you also have the style tab again just remember that you can change the typography right here so you can change the font style the size the weight the transformation and you can even change the text color right here so one of the most important things with the button is the look and feel so for normal and hover right here this is what the button looks like when your mouse isn't hovered over it and then this is what it looks like when you hover over it so if you do want to change the stuff you can click on the normal tab and then edit the text color and the background color for when you're not hovering over it and then click on hover and then you can change the colors over here for the hover option also and then over here you have the border type border radius and pretty much that's it you also have the advanced tab here if you wanted to add some margin or padding for this entire section but we don't do that and just remember you always do have the motion effects right here so the animation so if you want to make this fade in you can do something like that okay so that's how you can edit a button and just remember you do have the button module here so you can always add some additional buttons so i'm going to scroll down to this section right here and before we actually go and show you how to edit any of this stuff i want to show you how you can add a new section just in case you do want to do that for your own ecommerce website so if you want to add a new section what you can do is click on the plus button right here and for each of your sections you should have that plus bar so if i scroll down here this is a new section and you can see that we have the plus bar and if we click on that we'll have this little pop-up right here and let me just show you really quickly before we go and click on that if you come down to the bottom you do have it over here too and then you can always just hover over this click and then drag it and place it wherever you want to place it okay so i'm going to scroll back up here and we're going to add a section in between these two sections so i'm going to click on the plus button and then you have two options if you click on this plus button right here you can choose the number of columns that you want for your row and then if you want to use a pre-designed section you can click on the folder right here and then if you go into blocks you'll have these pre-made blocks right here and then you can also filter by the different types of blocks that you want to use and the elementor designers created all these you do have to go and install something to do this but it's free and there are pro versions but again there are free versions and same with pages you can actually insert a complete page also just by hovering over this you can view it by clicking on the magnifying glass or you can just click on the insert button and then that's going to upload it so what we're going to be doing is creating our own section and this isn't going to be anything spectacular i just want to show you guys how to do this so that you actually know how in case you want to customize the website a little bit so we're gonna click on the plus button right here and then you have all these different options so maybe we'll go with the three column option like this and then you can see one two and three and we can click into the edit section right here and then we can go in and change the layout however we want so we'll leave it the boxed option and the column gap i guess we'll leave it as default but we'll come in here and we're gonna go with minimum height and you can always rearrange this you can make it larger or smaller so it's really up to you guys i'll do 450 so you can see we have our section right here and what we can do is go into the style tab and maybe we'll insert a background color so we'll just come over here and black is pretty cool maybe we'll do that but i'm going to do something a little bit more fun because i am going to remove the section after i show you guys how to build it so we'll do something like that and for margin and padding i think we'll leave it as zero or blank for now so we can go into the first column and we can insert whatever we want so maybe we'll come over here and let's see what we can insert we can scroll down and maybe we'll choose an icon box we'll just drag that in right here and you can see that it shows up we can come in here we can change the icon to whatever we want and if you guys want you can format this stuff i'm going to leave it as is but you can see that you can't really see the stuff so we're going to go into the style tab right here and really just remember this is all really just so easy that you click around to these different tabs and you can figure out what you guys need to do so you can see right here it says primary color i'll come in here and maybe i'll change this to white because i have this dark black background right here because i have this dark background right here and then for the spacing i'll leave it and then for the content section we can open this up and you can see that we can change the font colors and the font style so again we'll go with the white color so that we can see it and then for the description i think i'll just change this to white too and i'm not going to do too much with the text because i want to just show you guys how to do this and then in the advanced tab what i can do is i can add some padding to give it some space between all the stuff so maybe we'll do something like 35 and you can see now we have a little gap everywhere and then we can come down to the border and we'll just insert a border right over here let's go with the white color also and do we need a radius no let's keep it like that if you guys want to change the border width to make it thinner you can do that right here but it's really up to you guys so we'll just leave it as two and then what you can do is do these other columns too but one of the cool things that you can do with the elementor page builder is right click it and click duplicate and then you have a duplicate that you can just paste in and sometimes if you don't paste it in correctly just move it to the right spot and there you go so let me just do that one more time and i'll just place it right over here and for some reason it doesn't go in but i'm gonna click and drag it and it shows up right there and then if all of a sudden you see your section and we're gonna hide this real quickly and you say ah this doesn't look that great i need more spacing right here then let's go and add it you don't have to do everything step by step or in order or anything like that so we can go back to the edit section and what we can do is add some padding because remember padding is what's on the inside and the margin is what's on the outside so over here we'll just type in let's go with 70. and now this is what the section looks like and if you wanted to add a headline you could so we can come back in here and we can add something up here if we wanted to but it's really up to you guys and you can also add intersections on all the stuff okay so creating a new section super easy again you're just going to use the modules you're going to customize the layout of the section and then add whatever you guys want you can always customize the columns also and you can also remove these just right click and then just delete it and now you have two all right so i'm going to close that and that's just a little quick guideline for you guys to learn how to make a new section if you guys wanted to but again this website i really believe it has almost everything that we need and i really like the layout and if i was to create something i would just kind of follow this for the most part so i'm going to click on the update button right here just to save everything because i want to make sure that we don't lose everything or anything in case my video fails or my computer shuts off or anything like that okay so now let's move on to this next section and show you what you need to edit if you guys need to do anything and in this next section really what i want to do is i just want to talk about this section a little bit and what you can do to edit this section so first if we go into the edit section right here just remember you can change the size and the width and also in the style tab over here you can add a background color or image and if we go to the advanced tab right here what you're going to notice is we have some padding for the top bottom and the right and the left and this is the top padding this is the bottom padding and then this is the right and this is the left and really it just encapsulates or spaces out the modules and everything on the inside so if you want to change that maybe you don't like the look and feel of this then you can do that on your own and over here you can see that we do have some text boxes so you can edit these on your own we already have gone over how to edit these and then over here you might see a blank box and if we click on this you can see it says edit shortcode and the shortcode is for some products that are going to show up in this section so if you remember on the demo website we do have products actually populate here they're going to be like feature products or just products that you want to show up so we're going to paste in the short code to make the section show up so what we have here is some short code and you can see it says product limit eight and then columns four so it's going to have eight products in four different columns so that's two rows so that's pretty much all we have to do right now we don't have to change anything here and we can go over short codes with woocommerce a little bit later so if you want to include certain types of products or categories or feature products we'll show you how you can write the right short code to paste in right here and again this section populates on the website when we do go and view it so i can show you really quickly if we click on preview changes we'll open up this tab right here and then we'll scroll down and you can see we have our featured products and in the next section of this video we are going to be covering how to create these types of products so again all you have to do is just put in some short code and that's going to populate this section right here and this is a module so if you can't find the module you can always just type in right here you can just type in shortcode and then we can just click and drag that in just like that okay so i'll let you guys pause this video if you guys need to to edit this section it's really really easy maybe you want to change the headline sub headline and the text or even remove some text go ahead and do that and then once you're ready we're going to come down to this section right here and talk about these two columns and this section that we see so for this section right here you can see that we have two sections we have an outer section and then an intersection so if you ever want to do something like this let me just show you let me come down to the bottom over here and let's add a new section and then we have our section right here what we can do is we can add something like a headline right here and then let's say we want to add another section so let's just center this so you can see it and then we're going to come into the modules right here just click and drag the intersection and then place it down here and now you can see we have some additional rows and columns and different things that we can add right here so you can see that you can have an intersection for your sections so if you want some additional rows or columns and you want one large column up here and you can add as many different columns as you want so i can always right click this and duplicate this and then we can make it three columns or even four and all that stuff so this is the same type of structure as what we have at the top over here so i want to show you that because sometimes people want to have a long headline that goes all the way across and then two columns here for maybe images and text and a button and this is how you would do it you would have one large section and then you would drag in an intersection after you add whatever modules you want on the top okay so all we did for this section is we go into the edit section in the style tab right here we have a background image so if you want to remove that and replace that or maybe you want to add a color you can do that you can always add some additional stuff here you have the plus button to add some modules so if we wanted to add an image we can just click and drag that in here and then once we see the image module we can click in here we can go to upload files and click on select files to find the image that we want to use or we can use one of these ones right here and click insert and then you'll see it show up just like this and then what we can do is we can change the size if we wanted to so maybe we'll make it medium and then if you want to move it down then we can just come in here and we can change the margin so maybe we'll do something like 75 and you can see that it pushes it down just like that okay so super easy just something to keep in mind if you do want to have additional columns and everything and different stuff to put in there so let's see how i can click this image right here okay so let's right click this and just delete this and over here we have some text so we have a heading and another heading and then we have a text box and then we have a button and you guys already know how to edit this stuff so again let me just remind you guys with a button that in the style tab we have the hover and the normal so you want to go in and change the colors to whatever you want and right now they're just default colors that the developers put in there and over here if you don't know the link for the page that you want to go to just put in a hashtag if you want just so that it's a static link or you can update this later it doesn't really matter okay so i'm going to click on the update button right there and again pause the video if you need to to edit these sections i know we're going probably a little bit faster than i would like but it's so easy to really create your own ecommerce website and the only thing that you really need are images and content and you'll probably have everything that you need within an hour or so so really just keep in mind the images and the text and the content that you want and this is going to be a breeze for you guys okay so what we're going to do now is we're going to scroll down to this section and talk about these little icon boxes and how we can edit this section that we see right over here so what you're going to notice over here is that this is still an intersection from the section above because when we hover over this we have this little rectangle right here but we also have this larger box which if we come all the way up goes all the way over to this area so just to let you guys know when you're looking at the structure that this is an intersection also so we added two intersections here and if you want to edit this you can just click on the edit intersection right over here you can change the background color if you want you can change the spacing or the margin and again if you see numbers here and you don't know what they are go ahead and just mess around with it and see what moves so if we type in 150 right here or whoa that's 1400 but 154 you can see that it's this gap right here that moves down so you can just play around with that and see what works for you and just remember you have the responsive mode here so that you can see what it looks like on different devices and again we are going to be covering the responsive mode a little bit later so the other thing to notice or note is that there are columns here so if you click on each one of these you can go into the advanced tab and you can see the spacing and also if there's any formatting stuff here so we can go into each of these and you can see that the spacing is a little different because the center one you want to have spacing on both sides and then on these right and left ones i believe you only want to have spacing on one side sometimes so there's not much to do here but what we can do is we can click into these modules so you can see that we have three different modules the first one is an icon if you want to change this you can remove this and then you can go into the icon library or you can upload your own icon so if we just go in here we're going to have all these icons available from the elementor library and there's a few different ones and you can search by name if you want anything in particular so maybe we'll search for a phone right here and we have a bunch of different phones and i'll just select maybe this one right here just to show you when we insert it it'll show up just like that and then you have these options right here you can stack it you can make it the default option or you can do the framed option just like this and then you can make it a square if you wanted to it's really up to you you can also link the icon so if you just put a url in here it's going to be a link and then you can align it whichever way you want i'm going to actually switch this back though to the other icon so i'm gonna go back here and you can see that it just changes back just like that and if we go back in here you can go and change the color also so if you don't like this color right here maybe i'm gonna just copy this but if you don't like this we can just change the transparency all the way over here and you can see that it just changes the color we can make it red too if you wanted to it's again up to you guys what you guys want to do so i'm going to close this right here and you can change the size the padding the border width which is the circle around it and again if you have to change in a spacing you can do that right here so that's going to be the same for these two right here and these two are just text boxes so super easy again and go ahead and pause the video if you guys want to update this i like to have a section here just to kind of either talk about my services products or even shipping and handling or terms and conditions or refunds or anything like that so that kind of gives you an idea of what i would put in here so i like be having so i like having the shipping option and then also the money back guarantee here and then putting in something else over here but again you can always remove this also if you wanted to okay so i'm going to move on to this next section which is going to be the logo section so we have this big column right here and you can see inside the spacing or this edit section that in the styling tab right here the color that we have is i believe just white so if you want to change it around to something else you can and then the other thing is if we go into the advanced tab right here we have some padding for the top bottom left and right and then we just have one module inside so the module here is an image carousel and what we did was we uploaded some images or logos that will go as a slider through all the different images so it'll just continue to rotate over and over again so if you want you can delete this and you can edit this so when you get this pop-up right here if you want to go back into the media library just click on edit gallery or add gallery and then you have all these images and you can always upload some more so this is the way that you upload images one by one by just going into the upload files tab and then clicking on select files find the image that you want and then clicking select right there okay so again super easy just another way to give you some credibility or show that you have relationships with other businesses or what you kind of sell or maybe you just want to put something else here so it's really up to you guys what type of logos that you want to put maybe some types of products that you have or trademarks it's really up to you guys and you can always remove this if you want also just one of the modules that you get with the elementor page builder okay so let's come down to this next section and again i'm going to give you guys the chance to pause the video and once you're ready go ahead and push play i know we've covered a lot in the homepage but hopefully you guys have realized how easy it is to just import a website design and use the elementor page builder and just click and really just switch things up so the next thing that we're going to talk about is this testimonial section and what i want to do really quickly is just show you the demo website here because i do have this page open up and just remember if you need to you can always go and preview the page because sometimes you can't see all the spacing and everything like how there is space or gap in between the image and the sides over here so you want to make sure that you always go and check that out on the website as you're building your website okay so again back on the elementor page builder here this is a new section that was added and we can go in here we can see the content with the layout all the stuff everything looks pretty good and then in the style tab right here this is where you're going to go to really customize the section if you want to add an image or change the color or maybe even add a video or gradient or slideshow whatever you guys want you also have these options here to change the positioning and also the size so keep that in mind because the best option in my opinion is the cover option but it's personal preference and you'll notice when you do change some of the stuff it is a little different so just keep that in mind and so i'm going to select the cover one and if you guys want to add an overlay you can and then you have these settings right here and always in all your different sections you have the advanced tab where you can go over padding and margin and i'm going to say this one more time and probably even a few more times but padding is what's on the inside so everything in here and the margin is what's on the outside of the section over here okay so we have our background image right here and again what we can do is we can delete this and let's just pretend that we're adding a new image we're going to click on the plus button you can upload your own image or you can go to the pixabay image library which is free or you can go to the media library where we have all of these images already uploaded for us and we want to find the image that we want to use so we're going to come up here and we're going to click on this and you can always insert your own image in the upload files tab just click on select files you can also go to the pixabay library which is a free library with a bunch of different images and you also have the media library where we already uploaded all these images and it does have all the images that you upload as you go through making your website so i'm just going to find that image right over here just select that and click insert and you can see the image show up we have the positioning and the size correct and we're good to go so this is a testimonial section in here you can see it says testimonial up here and just remember that you do have all these different modules so if you do want to add anything you can if you just want to edit this stuff you can also do that we can come in here we can change the text we can change the size the alignment we have the style tab right here to change the font color and also the font family and the size if we wanted to and over here again your padding and also that motion effects which is the animation for things to enter so again super easy you can just change the text for these sections to be whatever you want and then this last one right here is a testimonial section so you'll notice that the formatting for this box is a little different because you have your testimonial right here and then you can choose an image for the person and then you can put in their name and even their title so if they work for a certain company or they have a certain position and then you can also link them to whatever social media or another web page if you want also okay so i'm gonna come back up here and in the style tab here again you can change the text colors for the content section and you have the image option over here to style the image you can make it larger if you wanted to see how large you can make it and i'm a little afraid if i just delete this it just goes away but it actually goes back to that default size so that's fine and then you can also format the name with font styles and colors and also the title if you have that and if you want to add some additional testimonials you can also do that so you can just pile them on top of each other or next to each other and if you have any questions about that let me know so if we go and check out the website really quickly we have a testimonial right here and it just looks really professional you don't want to clutter the website with too much stuff so maybe just one good testimonial maybe two or maybe have a testimonial page or even other pages where testimonials show up so you don't have to just add all the modules onto the home page but just remember you do have as many different pages as you want for your online store okay so i'm going to let you guys if you want to pause the video update this section and again we have demo images you have your own images you can add your own content and if you want to format the column settings you can also do that you can see that there is some margin right here so the margin is on the sides so if we just change this to maybe 50 you can see that it just pushes it over quite a bit and then you also have the padding here so let's see what happens if we type this so let's do 60 here it pushes it over just a tiny bit so they're different stuff and what you want to do is just kind of eyeball it see what works best for you and then you can always hide the section right here so you can see the website and if you want something like this where it's a parallax scroll let's talk about that because what you'll notice is when i scroll through this it looks like this layer right here kind of goes on top of the image so if you guys want to learn how to do the parallax scroll let's open up the page builder right over here so for the scrolling effect what we want to do is we want to go back up to the edit section right here and you're going to see the image over here and in this section where it says attachment all you have to do is just come in here and you want to select the fixed option so when you do that it's going to keep the image over here and when you scroll through it it doesn't move but if you click on the scroll option you can see that it goes up as you scroll okay so super easy and that's pretty much all you have to do so again you can pause the video if you need to otherwise let's talk about this next section which is going to be the blog post section so this next section is the blog post section and what we can do is first go into the edit section just to look at the stuff and i'm not going to repeat myself again because you guys already know how to edit all of this but just remember that there is some padding set for this for the top sides and the bottom and then in this section right here we have our heading and another heading and then this text editor right here so you probably want to update this with a sub headline maybe it says something about your business or stay up to date with the latest trends or anything like that whatever you want to put in here and then once you're ready this module right here is going to be for your blog post i believe so if we click on this you can see that there is another shortcode section right here and this isn't actually a blog post section so i'm going to apologize this is for the latest products which are the most recent products so again this is going to be short code that we use or we get from woocommerce so we'll show you where you can get all that short code so you already know that this is a module and if you wanted to add a blog post section you could though all you have to do is come over here search for blog all you have to do is come over here and search for posts and then you have all these different options and you can add whichever one that you want so if you do want some help on how to do that let me know but we do have a blog link on the header so we'll just probably end up using that because we don't want to make too many changes to this design especially i don't because i think it actually looks pretty pretty good so if you guys are ready and if you guys need to go and pause the video to update this section right here and just remember that there is some padding over here and if you want to change the background you can and then once you're ready let's scroll down to i believe the last section over here which is going to be an opt-in form so for this last section right here you can see that we have a little row right here and there is a background image so you can come in here and you can go and edit that if you want and we have two columns so if you ever want to add additional columns again just remember that you can just right click and duplicate and then you can create another column right over here or you can make a copy of it and then you can take stuff out so i can actually just remove this right here and then we can add whatever we want so we can just come in here and drag something else in and we can also just remove this just like that and what we can do is just edit the text right here so again you guys might not have a makeup website so you might want to change that and then on this side right here this is short code also but this is for a plug-in a contact form plug-in so what i want to do is just show you how you can actually edit that and really make it so that people can sign up for something or send you a message so let's talk about the contact forms really quickly and then you can paste in the short code here so what i'm going to do is click on the update button right here and we'll stay on this page what i'm going to do is open up a new tab and i actually have the elementor page build open here i'm going to go back to the wordpress dashboard so i'm going to click on this once we're back on the wordpress dashboard we want to go to the contact form plugin and that's down here wp forms hover over that this is a plug-in that was installed when we installed wordpress and our wordpress website and all that stuff so we can just click on all forms because the form should be created for us already so you can always go and create a new form i do have a tutorial on how to use wp forms we're just going to really talk about how to customize and add the contact form to the contact page and also the shine up form to the home page so you can see that there is the short code right here wp forms id 11. and if we go back to the ecommerce website over here you can see that we have our module with the shortcode also and it's the same thing so what you want to do is just paste in that short code and then it'll populate the sign up form right over here so what we can do is really quickly go in and show you how to edit this so if you click on the edit button right here and you can see that we have this pop-up that says don't forget to use the marketing tab to integrate a newsletter service provider because if you are having an opt-in form you want to be able to save those email addresses so we'll show you how to do that or we'll at least show you where that is in just a little bit but you can see right here that this is the contact form we have a section for the email and then a button right here so you can click and drag this into the contact form right here and you can see now we have this new box with a paragraph section and if you want to edit this all we have to do is click into it and it'll go to the field options for this section and then you can change the label here or you can remove it and you can make this a required field and also you can go into the advanced tab you can change the size right here and you can even add some text inside so you can see where it says enter your email address we can also say something like type your message right here okay and if you want to remove this just click on this little trash can right there so really quickly let me show you if we click into the email field we have everything removed right here and then in the advanced option we have the placeholder text if you want to make this a required field for people to submit you want to check this and then you can see that it just shows up right here and you can also put in email right here if you want that label so that's really up to you guys the other thing is we do have this button right here so let's click on this and once you come to this section right here you can see that the text for the button says subscribe right here so if you want to write in send message or something else then you can do that and you can also change the name of the contact form right here and then there's some other stuff here that you can edit if you want but we don't need to do anything and then if you had a contact form which we'll talk about a little bit later you can send the or put in the email address that you want the messages sent to and then you can have the name of the sender over here okay so we'll talk about this section a little bit later when we go through the contact form right now we're talking about the sign up form and the last thing that we want to do is go to the marketing tab so right here it says you got to save your contact form if you make any changes so we'll click ok there just so that you can see that it's saved and then on the marketing tab right here this is where you're gonna go to integrate the software provider to save your email addresses and this is a free plugin there is a premium version that lets you unlock all these other service providers you can use constant contact for free right here and you can try them for free i think it's a trial the thing about this is i believe the wp forms people put the constant contact link here because this is an affiliate link so they'll get credit if you sign up so i am also an affiliate with constant contact so i'm going to put my link in the video description go ahead and click on that and then you can sign up for a free account and then you can just add connection and integrate your newsletter list with the contact form okay so again all you're going to do is just go into the fields edit whatever you need to if you got to go to the setup this is the home page or the front page for the form and you can just select the contact form or the sign up form and that's pretty much it you have your general settings here really really easy click save and then just close this and then you have your shortcode right here you would take this copy it and then go back to the elementor page builder paste that in and then you're good to go so just remember that the buttons are customized based on the default colors and settings so if you do want to change this you can go into the theme settings and that's really up to you guys so if you need help with the colors of the buttons just again go into the theme settings and you should be able to change it there but let me know if you guys need any help okay so i'm going to go back to the main module section here and i believe that's pretty much it now we have this other section here this is the footer section so we're going to cover this a little bit later what i want to do is i want to move on and i actually want to show you guys how to add some products so you can see right here we have some products if we click on this it's going to go to the product page and you can see that we have a product right here with our description price add to cart and a larger description and a review section right here so if you guys want go ahead and pause the video to edit and update the home page however you want we've been pausing as we go but now we're going to move on to the next part because now we know how to use the elementor page builder to customize the home page using a pre-made template we're going to move on to learning how to create products for our online store so if you want to do that go ahead and click on the update button right here just to save everything and now let's go back to the wordpress dashboard and once we're back on the wordpress dashboard i think the easiest way for us to learn how to create products for the ecommerce website is to actually create them from scratch so instead of using a template or something that's already made something like this let's just go and show you how to recreate this with a new product so what i want to do is go back to the wordpress dashboard you can hover over new and click on product or over here you can hover over products and click on add new so this is the add new product page and before we get started i did notice that we have the all-in-one seo settings right here and this kind of gets in the way so what i'm going to do is just collapse this right now you can always disable this in the plug-in section if you want to but we'll just leave it for now okay so this is the product page this is where you're gonna go to create all your different types of products whether it's a single product so no size no color just one option or a variable product which does have different options and even your virtual products downloadable products whatever type of products that you want to sell whether it's ebooks makeup t-shirts clothing books this is where you're gonna do it so we would put in our product name right here and right below it this is where you put in the long description so let me just show you on the product page really quickly that this is the product title this is the price this is the short description because it's a small little section so we call it the short description and then down here is where you would have the long description where you can put in more information and then you have the category name right here so this is the long description and then this is where you put in all your product data so the price if you have different colors or variables and the shipping information the size the dimensions and then down here is where you have the short description which shows up next to that image and over here you have the product image and then you can add a little gallery if you have some additional images and right here this is where you can select the formatting for the layout of the page and then you have your product tags and the categories which help with recommending different types of products or similar products and also just filtering and categorizing stuff so we'll show you how to add all that or at least use the stuff and then at the top over here let me just explain this one or i'll actually explain this more than once but right here where it says catalog visibility if you have a featured product that you want to show up in a certain section like the home page and you have a featured product section then what you would do is select the box right here and then click ok and then that's going to save it as a featured product so it shows up where you want it to show up alright so for now we'll just leave this as is i'm going to click ok right here so let's go and add whatever we need to add to create our first product and again we're just going to be creating a copy of this one right here so you can use whatever product that you guys want if you guys want to use the product from the demo website that's fine too and we're just going to copy the title in right here and the long description just remember that the long description is at the bottom over here so this is all dummy text so if you guys need to you can pause the video to add real text and maybe you guys want to see how to do this right now so that's awesome too because we are going to be showing you how to create different types of products and you can always re-watch the video to create them over and over again so over here now this is the product data section we're creating a simple product i believe so there's only one option you can see right here that it's just skin toner and there is no different size no different variables so in this drop down you would just select a simple product and if this is a virtual product or downloadable product you can select these options but this is a regular product so we're not going to do that and i think the price is 40 so we'll just put in 40 right here and did we go over woocommerce settings i don't think we did that yet so we should actually do that in the next section so what we're going to do right now is don't worry about the currency if you're not in the us dollar if you're in the euro or something else i'll show you how to change that after this section so we have our price right here and then for inventory you can add the sku number if you want you can manage the stock it's really up to you guys for stock management if you want to put in the quantity right here and then you'll have a counter that counts down and then it'll stay out of stock if it is out of stock on your website for shipping we're going to go over this in the woocommerce setting but what you can do is put in the weight and the dimensions right here and this helps with automating the shipping if you're using a plug-in that sends you shipping labels or calculates shipping for you and for link products we're not going to do anything here but if you do have additional products you can add the ids over here to upsell and cross-sell and you can see what this stuff is all about over here with these question marks so you can see that you can upsell and you can also cross-sell right there for attributes we don't have to do anything because this is a single product we will be covering this in the variable products section so don't worry about that and then for the advanced tab right here this is where you can disable reviews if you don't want people to review your product so we'll leave that as is and pretty much that's it so all we have to do is select simple product put in our price and then if you guys want you put in your weight and dimensions and that's all you got to do for a simple product and then over here this is we're going to put in our short description so i'm going to take this text and just copy that and then paste that in right there and then we can come over here add our product image so i'm going to click on set image we'll come in here i'll select this image and if i had some additional images i can add them to the gallery but we'll just use this one right here and then up here what you can do is you can select or use a category name so there are some selected right here i'll show you how to remove those in just a little bit but if you guys want we can just select this one and i guess skin toner and you can also add some additional category names by clicking on add new category and just typing it in right here and then just pushing enter and it'll show up and whichever ones you select are going to be the categories for this product and same with product tags i recommend that you use product tags because again it helps with cross selling and recommending certain products so we'll just type in so we'll just type in skin toner and cream right here and push enter so you can see that they show up right there and again if you wanted to make this a featured product you can i won't right here but again it's up to you guys and then all you have to do is click on the publish button and once the product is published now we can go and check it out so you can see right here that this is our product page and it looks beautiful we can actually change the layout settings if we wanted to because i think this is a little different than what we see over here everything is more condensed so let me show you how you guys can do that so again we have everything we want here though so this is great and then we also have related products because of the category names and the product tags but let's show you how you can actually customize this page i'm going to go back to the edit product and once you come back to the edit page to change the layout just come down to the astro settings right here and for the same layout as the demo product page just select no sidebar and the boxed option but you can always choose any of these other options also and you can disable any section that you want and also turn on or turn off the transparent header so i'm going to click on the update button again just to save that and once it's saved now let's go back and check it out and the layout should look a little different so now we have the background color here it's this gray color and then everything is in a box if you want to customize the things that you see here like the background color for this outer edge you want to go back into the customize tab so this is the theme settings so let me just show you again really quickly before we move on to the woocommerce settings and then the variable and other types of products so once you're back in the theme settings you can see that we have this gray background right here and if you want to change that just go to the global tab and then go into colors right here and you have the background right here so if we click on this what you're gonna see is that the colors are over here so if we just click white right here it disappears and we click red and you have all these other options over here okay so i'm not going to save this so it's going to revert back to that light gray color but you can change it over here if you do want to have a background for whenever you have the box option all right so i'm going to close this right here and we're going to go back to the wordpress website and what i want to do before we go and show you how to create these other products is i need to show you guys the woocommerce settings so you can set up your payment options shipping and also the type of currency and all that stuff that you guys want so we're going to hover over our website name and click on dashboard and once we're back on the wordpress dashboard let's go to woocommerce hover over that and let's click on settings so once you come to this page right here this is where you're going to go to set up all the details for your online store so we're gonna go through these tabs really quickly and this is just a quick little break from creating the ecommerce website and we have to do this in order to get our store up and running so right here in the general tab this is where you can put in the address for your business so if you need to you can fill that out and then down here you can just choose the options for where you want to sell to if you want to exclude any countries that you don't want to sell to you can put them in or select them here and then i'm going to enable the tax rate and calculations so that people can actually see that when they go to the checkout page and if you want to enable coupons you can right here and we can talk about coupons a little bit later in the woocommerce section there is a coupon section where you can just add coupon codes and change the discounts and when they are being when they can be used and all that stuff so you can put in the certain dates so i'm going to click save right here and just i guess i didn't mention this but down here in the currency options if you aren't in the united states and you need to choose a different currency you can select that right here and then you can choose how the currency is positioned and all these other things so make sure you do that and click save and then once you're ready let's go to the products tab and on the products tab right here all you're going to do is really just come down to the measurement section you should have a shop page already set up by default because we installed woocommerce and also the demo page but if you ever go and make your own page and you want to select it as the default shopping page you can come in here and select that the other thing is down here in the measurements you want to choose the correct measurements for your products so because i'm used to pounds and inches that's what i would select and i think this is what i would use if i was to use shipping labels as well and there are extensions you can use for different shipping companies that you can print labels as people order stuff so you might want to just put this in correctly and also for your customers so that they can see when you add your dimensions that you have the right units okay and by default we're going to keep the reviews enabled but you can always change that if you want and i'm going to click save right here and we don't need to go through these other tabs but you can if you want to so you have inventory management and then for downloadable products you can force downloads or choose the other options over here so i'm just going to go to the tax tab and once you're on the tax tab right here there's really nothing that you have to do unless you want to change the tax options and you can also put in your own rates over here if you go into standard rates and you have these other options also but i normally don't change anything so again this is just where you go to change your taxes but i'm going to leave everything as is so i'm going to go to the shipping tab right over here and what we can do is we can add our different shipping zones here so what that means is you can have a specific rate for a specific region and then you can charge more for different regions also so let me show you how to do that so first let's click and add our shipping zone and what we can do is add a default shipping zone so i'm in the united states so maybe i'll just type in united states right here and then what i'll do is for this region for the entire united states i'm going to have a flat rate option so you can choose specific states if you want to but i'm just going to choose the entire united states and then what i'm going to do is click on add shipping method and you have a few different methods local pickup free shipping and flat rate i'm going to choose the flat rate option and i'll enable this and then what we can do is click on the edit button and i want to put in maybe ten dollars right here and you can add an equation if you hover over this question mark right here you can see that you can create a shipping rate based on the number of products or the price so you can see right there that you can just use some short code in order to create that product or that price for your shipping rate okay so i'm gonna click save right here and now we have the united states so anyone that orders they're gonna get charged 10 and then what i want to do is have a shipping rate for all the other regions so once you add your first region if you want to add some additional regions you can just go back to the shipping zones right here and then click to add some additional zones what you're going to notice though is now that we have the first shipping zone we have locations not covered by your other zones so this is a default rate or shipping charge for everywhere else other than what you set over here so what we can do is just go in here and we can add our shipping method so we can go free shipping or flat rate let's go with flat rate and again you can create the equations if you want but i'm just going to go in here and we'll choose maybe a little bit more money so we'll do 15 because it's probably more expensive to ship to other countries and i'll click save right there so you can do things that are more complex and there are some additional options so just keep that in mind so you want to click on save right here so we can go to shipping options right here and you can see again that you can set your settings and then you can also set shipping classes so if you want to understand shipping classes just hover over this and you can read all about it and we do have an entire tutorial on how to use woocommerce so i'm not going to go into all the details here but just know that there is a tutorial out there on the youtube channel nyc tech club that goes over the woocommerce plugin and let me just open this up real quick you can see that we have this extensions link under woocommerce right here let's open that up and if we go to it what you're going to notice is that you have all these different extensions these are premium plugins or premium extensions for different things so we have shipping right here and you can see that you can print out labels or calculate your shipping you can see fedex get your shipping rate and then right here print your labels so you have all these different options and all you have to do is just click on them and then you can integrate it with your website if you want and there's also payment options so i'm going to click on that because i think that's the next tab that we're going to be going to so again what you guys want to do is just set your shipping zones and then you're good to go okay so once you're ready let's go to the payments tab and once you're on the payments tab you can see right here we have paypal standards so this is the one that we're going to integrate but if you want some additional options in the extensions tab right here so again it's under woocommerce click on extensions and then go to the payments tab you can see you have all these extensions so you have stripe amazon pay square and all these other ones if you want to integrate them to your online store also so we're just going to focus on paypal because that is what we have here and that works for me so i want to turn this on so you want to enable this and once you do that go ahead and click on the setup button and once you come to the paypal page right here you want to make sure that paypal is enabled and you have your title right here and then what you want to do is put in the email address for your paypal account right here and down here you can add some additional stuff i don't really add the paypal identity token but if you hover over this you can read about it and i do have the paypal page opened up right here and this is a business page so you want to make sure that you have a business account for paypal and when you hover over your username and click on account settings you'll come to this page right here you can type in ipn and if you push enter you'll see the instant payment notifications and then you can click update and walk through the steps to get that token code right here but again i've built so many of these ecommerce websites and they actually run on paypal so they take transactions and everything like that i don't believe i've ever put in the paypal identity token so if i do i'll update you guys in the text of this video and i'll make an updated video and all that stuff okay so the other thing that you want to do is you just want to come down to the api credentials and you want to put this into process refunds so what you can do is click on this to read about api credentials and how to get them but really all you have to do is again go to your paypal account and this is a business account we want to click on account settings and oh let me log right back in once you're logged back into the paypal account you'll see right here api access if you click on the update button right here you're going to come to this page right here and all you have to do is come down to the nvp soap api integration click on manage api credentials and all you have to do is create a username password and signature so you'll probably have a button that does that and then you'll see this section right here you're going to click show and just copy and paste the api keys into these three different sections so you have the api username password and signature i'm not going to show you this because they're very specific to my account but that's all you have to do again just come to the account settings and then go to access api click update right here and then you're going to come to this page and then down here just click manage credentials or turn on credentials or get credentials something like that and you'll get them right here okay and once you do that that's pretty much it you're going to have paypal integrated with your website so again the most important thing is making sure that you have the right paypal email so that you get paid when people make any transactions so you want to click on the update button right there just to save your changes once you're ready and then we can go to the accounts and privacy tab so if you need to pause video to integrate paypal go ahead and do that and just remember there are the extensions right here for additional payment plugins so if you want to use anything else to accept credit cards or cash i don't know what type of payments you want to get you probably can't do cash but you can do crypto or anything like that you want to go through those extensions okay so i'm going to go to the accounts and privacy tab now and on this page right here you can just select the options that you want so if you want to let people check out as guests if you want them to create an account during the checkout you can select all these options right here we're not going to change anything up there but again it's really up to you you should probably go through these and make sure that you select whichever options that you want and then down here in the privacy policy section just remember that there is going to be a notification on the checkout page and then you're going to link to that privacy policy page that you can create or edit in the pages list so i'll remind you about that later if i remember and also you have the checkout privacy policy you can change the wording here and then this is the short code that's going to be a link to the privacy policy page okay and if you make any changes click on save changes right there super easy and i mean setting up woocommerce super easy the hardest thing is probably just the shipping and the payments but even that was pretty easy so let's go to emails really quickly go ahead and click on that tab and over here this is where you can go to update the email addresses for when you have a new order a cancelled order or fail order so if you have a business email or you need to create one with your domain i'll have a video link that shows you how to do that but if you get a new order or a cancelled order it's going to go to this email address right here and then whenever someone is getting a confirmation or completed order it's going to go to the customer email over here so if you want to update these just click on manage and then you can change these emails so make sure that you do that so that you know when you have an order and you send it out to people on time all right so i don't think there's anything to do in the integration tab but we're just going to come here anyways you can look into this on your own with the geo location and then in the advanced tab right here and what you can do here is you can change the default pages for the cart page check out my account page we're also going to be creating a terms and conditions page a little bit later and it's not going to go into too much detail but i will remind you guys to create one and then come in here and select it so that you have that set up for the checkout page and the terms and conditions so just so that people can read those because you want to make sure you cover all your bases and then there's really nothing else that you have to do here so you can click save if you need to and pretty much that's it you do have some links here that we don't need to go through and that's all you have to do to set up woocommerce i know it seems very difficult maybe i talked a little fast but you can always pause the video to go through these steps to really set everything up but really super easy if you need to re-watch this section go ahead and do that otherwise we're going to jump right back into creating some additional products so we already learned how to create a single product like this and now what we want to do is create a variable product where we have different colors different sizes different whatever we can do multi-variable single variable however many variables as you want so we're gonna go and create that right now hover over new right here click on product or on the left hand side we can find the products tab and then we can click add new right here so once you're back on the add new product page we're going to go over a variable product now and you can see on the demo ecommerce website that we have this product page right here and what you might notice is that we have a range of different prices and the reason why is because i inputted a variable right here with different sizes and different costs for the different variables so you can see when we have six ounces it's going to be 15 and then 12 ounces is 20 and then 15 is going to be 45. if you had colors for a t-shirt or something you can have one price but with different colors for the customer to choose so what i want to do is just show you how you can add a variable and you can add more than one and different variations and all that stuff so back on the website right here we're going to go through adding all the content again and then we'll come into this section which we're going to spend a little bit of time on because this is where we're going to go to choose a variable product okay so the first thing we're going to do is in the add new products section i'm going to just copy the title right here and we'll just paste that in and then we're going to go and get the long description over here and again this is just to save some time so if you guys need to you can always pause the video we're going to scroll down to the short description and i think it's the same as a long description but we're going to come up here and just copy this and once we do that we'll go through the featured image and the categories and tags a little bit later but first let's come into the product data section the first thing that we want to do when we create a variable product is come in here and select variable and what that's going to do is just change things up a little bit so we don't need to go through the inventory tab unless you want to add an sku number and manage your stock for shipping if you want to put in the weight and the dimensions you can and then there's nothing to do for the link products the main thing is for a variable product is you want to put in a custom product attribute so all you have to do is click on the add button right here and you'll get this little pop-up and what we can do is type in size right here because that's going to be the name of my variable and then i'll do 6 ounces and if you notice this shows you how you have to separate the values so you're not using a comma you're using this line right here so for me that's control and the slash so i'm gonna do six ounces and we'll just space that out and then we'll do 12 ounces and we'll put that line right there and then we'll do 15. and once we do that what you want to do is check this box that says use for variations and click save attribute and once it's saved you should see the variable right here and you can always just click in here and edit whatever you need to and i will be showing you how you can save your variables and the input factors so that you can just with a click of a button add the variable instead of having to type in it every time if you wanted to add more than one variable just come back to the custom product attribute click add right here and you'll have another option over here so we can do something like color or maybe even scent and we can do vanilla and then we can do i don't know violet even though these are colors and what's another one blossom i'm just making up words right here but if you click on user variation right there now you have two variables so that's all you have to do and you can always remove it what you want to do for the pricing is you want to come to variations click on that and then just click on go and what you're going to notice is that both of the variables show up right here and what we can do is we can just input one price if we wanted to so we can just open this up and then we can put in 15 right here so i'm going to save this really quickly and just show you guys what this would look like if we just have one of those inputs for 15 so don't do this let me just show you as an example we're going to click on view product and we didn't put in any image yet so don't worry about that but you can see right here this is 15 and when i select the size and the cent the price is always going to be 15 so what i want to do is i want to show you how you can change the price for different sizes but it doesn't matter what the color is so i'm going to go back to the edit page and if you want to have a bunch of different prices what you want to do is go back into the variations right here and you want to select the variation so we want any color or any scent but we want the six ounce and what we're going to do is we're going to make this cheaper so we'll do something like five dollars for this one so i'm gonna type in five dollars and then we can close this and then we can add another variation right at the top just click go right here and you can see that we have another one we can go in here it's like 12 ounces and they can select any color and again we'll just put in the price so what did we do last time i don't remember but we'll do something like 12 and once we do that we can close that one and we'll just add one more for the other size which is going to be the 15 ounce and we'll just go in here and we'll click let's say 25 or 35 because we typed in 35 right there and just click save right here and once we do that now we have all these different sizes and any sent for different prices so let's click update right here and now let me show you if i click on the view product you can see now there is a range and if i go in here and select six ounces and then choose the cent then we have our price and if i choose a different color or a different scent it doesn't change anything but if i change the size you can see that the price actually changes so it's really easy but you just have to think about the variations a little bit just so that you select what you guys want for these different prices and again you can have one variable or as many different variables as you want and then you can just go into each of these put in the price the sale price and then the dimensions for the product and if you do have a sale price so let's just type in 20 right here let's see what shows up or we have to save this first let me just click out of this click save and then we're going to come up here and let's look at what things look like when we have a sale price so we have the view product right here and i forgot which one it was i think it was a 15 ounce and then vanilla you can see that it crosses out the original price and puts in 20 just like that okay so that's all you have to do for a variable product and you can re-watch the section over and over again oh and that's kind of cool it has a little sale bubble right there so what i want to do is just finish off this page with our category names and then our product and maybe even make this a featured product so again go back to the edit product page and once we're back on this page let's come down to the bottom and let's add a product image so click on set product image and i'm in the media library i'm just going to select this image right here and click insert and then again if you guys wanted some additional images you can come in here and select whatever images that you want you can just click on them and maybe we'll remove this one so we'll click insert right here so we have some additional products or images and then for the astra settings i want to go with no sidebar and the box option right here and then we can just put in some product tags so we can do lotion and skin care and push enter and then over here we'll do i don't know choose anti-aging cream because we have a list but again you can always add some additional category names right there and then if you want to make this a feature product just come in here and click feature product and then we can have some short code that we can insert the featured products wherever we want on our website so i'm going to click on the update button right here and that's pretty much all you have to do for a variable product so let's go and check it out one more time you can see right here now we have our image and down here we have our additional images so you can just click on these just like that and then we have our variable and we have our category and product tags and then we have our long description and now we have an additional information section with our variables and then if people want to leave a review they can do that right here and just remember the related products section shows up as you create more products with similar category names and similar product tags okay so if you guys want to create some single variable products or variable products with a bunch of variables then go ahead and do that right now because we have just learned how to create some variable products for our online store and we're gonna go over virtual and downloadable products next and then we'll do affiliate products and then we're gonna move on to the rest of the website so pause video if you need to otherwise what we're gonna do is go and hover over new and learn how to create some virtual or downloadable products so now what i want to do is i want to show you guys how to create a digital product so i do have some stuff already set up you can see i have the title right here the long description and then the short description and what i want to do is just come to the product data section right here and this is where we really have to just focus for the virtual or downloadable product so you have these options here and you can see when you choose variable product that the tabs over here disappear so you want to make sure that you're on the simple product and you can make this a virtual product that means it's not tangible and it can't be shipped so you can just select this and then if it's a downloadable product then you want to also select this option right here and what you'll notice is that when you select these some of these tabs go away so you have the shipping tab right here when i select virtual the shipping tab disappears because you aren't shipping anything and then when you select downloadable you have this section right here where you can upload a file that people can download so what you can do is put in the price right here so i'll just put in 50 and then for the downloadable file you can just click this and then what you can do is type in the url or you can go and find the file so you can type in the url if you have the file stored somewhere or you can click on choose file and then you can come in here and you can pretty much add whatever you want so if it's a song a pdf or anything like that i'm just going to select one of these images so that people can download that and then you can select the number of times they can download it you can make it expire it's really up to you you can see right here you can leave the number of downloads and also the number of days before the link disappears or expires and pretty much that's it so there's nothing else here you can see that everything else is the same and you don't need to select anything that's all you have to do for a downloadable product and then you can add your product tags your product images and all that stuff but let's just go and save this because we don't need to do all that stuff i just wanted to show you that this is how you create a downloadable or virtual product so i'm going to go to the product page right here and you can see that we have our digital product and once you add this to your shopping cart you check out then you'll get 9 and pretty much a link to download this product super super easy and so if you guys are selling downloadable products or virtual products this is all you have to do okay so the last type of product i want to show you guys really quickly is an affiliate product because some of you guys are going to be making an affiliate website with amazon or any other affiliates and i want to make sure that you guys know how to create an affiliate product so that you can make money so i'm going to type in affiliate product right here and we can just type in the descriptions over here and this time around in the product data section you want to go into this drop down and choose the external affiliate product section or the tab right here and the main difference is all you're going to do is put in the product url so this is where you put in the affiliate link so if it's an amazon affiliate link you want to type that in and then you have a button right here that is going to link to amazon so let me just show you really quickly so i have amazon associates opened up over here and i found some lotion affiliate products and let's just say we want to add this one we can just come in here and get this link so we can copy this if we wanted to let me just copy that and all we're going to do is paste that in right here this is an affiliate link and then we have our text right here so we can say something like buy product and then we can put in the price i don't really know what it is let's go and actually check so it's 9.85 so we'll just type that in 9 85. and pretty much that's it so you don't have to go through these other tabs and i'm not going to add the images or anything but you can do that you can copy and paste the images in let's go and just click on the publish button and let me show you how this works so let's say that you have an affiliate website and this is your product pretend we have an image right here and then oh this is a lotion product i want to buy this i'm going to click buy product and it actually redirects you to the amazon website using your affiliate link so if someone does buy this or buys anything else you're gonna get credit for it okay so pretty much that's it super easy to create all these different types of products again if you need any help let me know so what we have covered today in the product section for the online store is learning how to create a simple product variable product virtual and downloadable product and an affiliate product so if you guys want you can pause the video to create some additional products for yourself and i do want to note that from the demo website if we hover over products and click on all products there are a bunch of different products that are already created for you because we imported a demo website so if you want to go in and edit these or if you want to delete all of these come to the product page just select all of them and then you can move them to the trash to delete them and if you're using woocommerce and you want to import the products you can use the import tab right over here okay so i'll let you guys do that and again pause the video if you need to otherwise we're going to move on and talk about the store page and then all the other pages so now what we're going to do is we're going to talk about the short codes that you can use on the woocommerce website so i do have a link in the video description to the woocommerce page right here and these are all the shortcodes that you can use for woocommerce so over here you can see that you have all these different types and if we go into products right here you can see that you can create your own short codes or what you can do is you can come down and you can just search for the ones that you want so for example we have featured products right here we can just take the short code and copy it and then paste it into the elementor page builder so let me just show you guys let's go back to the home page really quickly and we're going to turn on the elementor page builder so that we can go to the shortcode section so let me click on this and once we're back on the elementor page builder i just want to come down to this section right here because remember earlier in this video tutorial we talked about how the developers put in the short code so that products show up now if i wanted to i can go in here and just search for short code and just copy this and let's place it down i don't know down here and you can see that we can put in our shortcode so i'm going to go back to the woocommerce website and i have one featured product that i know of so i'm going to copy this and then i'm going to go back in here and paste this in and you can see that we have our product right here but you might be wondering why is it so large and this doesn't look good well the reason is because right here it says product limit is four so we're gonna have four products in the featured product section but right now there's only two columns so what i want to do is i want to change this to four just like this and if i had four of them they would show up one two three and four so i'm not going to click the update button but i will click on the preview button right over here and that's going to open up a new tab and once we have our website in the preview mode if i scroll down you can see that here's our affiliate product from the section before but down here we have a new section for the featured products and again i selected this as a feature product in the product page so you can see that we would have one here and then we would have our other ones right here it's a row that we added just with the shortcode into the section so what you guys can do is find whatever short code you need and you can see that there are different types so there's a random sales for for sale or random you can see right there there's random items for sale there's the feature product section and then best selling products and new products so all you would have to do is just take the shortcode copy it and then go back to the wordpress dashboard and paste in that short code wherever you want to place it and that's pretty much it you can see that these are the most recent products that were created on my online store and that's why they're going to show up right over here and you can edit the short code however you want okay so really really easy i wanted to show you guys this because some people want to add certain types of products to their different sections and you have all the different types of short codes here so even categories so if you wanted to do pants or just shirts you can add them by putting in the category name right over here so i think that actually gives us a good transition into how to edit our product tags and categories so let's go and do that really quickly and again i'm going to link you to this page in the video description if you need it but i'm going to close it right now and we're going to go back to the elementor page builder right here and i'm not going to save this so i'm just going to go back to the dashboard and it's going to say do you want to save and i don't so i'm going to click leave so once we're back on the dashboard right here there's a few different things that we can do we can talk about how to save your variables so you don't have to type them out each time and we can also talk about how to edit your categories and your product tags so everything on the wordpress dashboard is going to be under the products tab right here so first let's go and talk about the variables and how we can save them so click on attributes and once you come to this page right here this is where you can go to create your variables so we're gonna go with size again and in the slug we'll just type in size right there and we'll leave the custom ordering right there so i'm going to click on add and once it's added if you want to add some additional variables you can and you can always edit or delete this one right over here what we want to do is we want to add the values for this variable so i'm going to click on configure terms and over here we can just add our different sizes so we're going to go in reverse so we'll do 15 and then 12 and then we'll do six and these are the same that we did for the lotion and if we need to we can drag these to rearrange them but i think everything is set right here so i'm going to click on apply and once that's saved now what i want to do is just come and add a new product so i'm going to open up a new tab just to keep this open and what we're going to do is create a site or actually a save variable is what we're going to do we'll just type that in so we're not going to fill everything out but i want to come to the product data section and we can just select variable and then if you guys remember all we have to do is go into the attributes so normally what we would do is just add the custom product attribute but now what we can do is select the saved variable right here and then click add and you're going to see it pop up right here and you can type in the values if you want but you can also see that they pop up right here so we can just select all and you can see that they populate but they don't populate in the right order so what you want to do is test this out to make sure that everything works so what i want to do is i want to go back to the attributes page right here and i want to rearrange this stuff so i think i'm going to add six to the top and let's try that so let's just rearrange these just to kind of put them all in order and then i don't know if clicking the saves anything or not but we're going to do it anyways and once that's saved we're going to come back here we're going to refresh this and i'm just going to come down to the variable section or product data section right here select variable go into the attributes and then go into the saved variable add that and click select and now you can see that they all show up just like that and you can remove them you can type in whatever you want and then if you do like that and this just saves a lot of time then all you want to do is select the use for variations and click save and once that's saved just come into the variations right here and then just click go and then now you have your drop down and then you can go in here and you can just add your price and pretty much that's it and you can add any type of variations you want you can do more than one you can have different sizes with different prices again it's really up to you guys okay so that's how you can save your variables and that just saves a lot of time especially if you create a bunch of different products with a bunch of different variables just come into the attributes and then add all of those so that you have them with a click of a button and sometimes you might have to rearrange the values to get them correct okay so now let's jump to product categories so once you're on the product categories page this is very similar to the variables page where you would just add the category and then the same slug name so if you did something like shirts you would put shirts right here and then just come down here and push the add new category button so over here you have a list of all your different categories and if you want to get rid of the uncategorized one what you want to do is make another one as the default so if i just select this to make this the default then i can come in here and i can delete the uncategorized one and once i do that it just disappears just like that and you do have the count of the number of products for the different product categories and you can always add as many different product categories for your products as you want so again all you have to do is just click edit and then you can come into each one of these you can change the name if you wanted to and then just click on the update button right here and if i go back again you can just delete all these other ones just remove them just by clicking delete or do the bulk action right here so super easy in case you guys have these product categories that you don't want and you want to get rid of them okay and same goes with product tags so i'm going to go in here really quickly just to show you it's pretty much the same thing so the demo website didn't use product tags but i like them for the related products section so i do add them and if you want to remove any of them you can you can also edit them and you can see the number of items per tag over here so if you ever want to go and use one of the category page links then just go to the categories page right here and once it shows up you can hover over it and then just click view and you'll come to the category page and then you can just copy and paste the url right here to use for a button or anything like that alright so let me know if you guys have any questions about variables categories or tags otherwise we're going to move on to the next part of this video tutorial so now what i want to do is we're going to move on and just show you how to create blog posts really quickly so this demo website doesn't have a blog post but we're going to create one anyways and later on when we go through the header we can add it to the header menu if you guys want so if you guys want to create a blog post we can just hover over new and click on post or you can go back to the wordpress dashboard and on the dashboard you're going to see posts right here we should have a blog post page already created so we did that a little bit earlier so we're just going to create a new blog post so just click on add new and once you're on the blog post page this is where we're going to go to show you how to create a blog post and this is the blog post that we're going to show you so we'll have a featured image with a title and then some metadata and then the blog post right here and then down below people can leave a comment if they want to talk to you guys or say whatever they need to say or ask you a question okay so actually what i want to do is i'm going to take the text over here and just copy this into the blog post because it's super easy so all we're going to do is type in our title right here and then what you have to do is just type in your text so this is the blog post and i'm just going to copy this and then you can paste it in down here and once you do you can see all the text and you can come in here you can bold stuff you can add a link you can format stuff you have all these different options right here and once everything is set what you can do is go to the post tab right here and then we can come into categories if you wanted to add a category so we can do something like fashion and maybe and we'll do more than one so we have fashion and we can also do style and then same with the blog tags right here we can type in fashion and summer and just push enter and then we can add a featured image so i'm going to go into the media library and just select the image down here and click insert and you guys already know how to upload an image and pretty much that's it if you wanted to change the excerpt you can come in here and do that otherwise it's just going to take some of the text right here and you also have this discussion tab so if you want to disable comments you can do that and then down here in the post attributes make sure you come in here and choose the theme option and once you do go ahead and click on the publish button and you might have to click on the publish one twice and once it's published we can go and check it out and you can see right here that we have our first blog post with an excerpt and then we have our second one which is just a copy because i just made a copy of it and then we have this hello world default blog post so i want to remove some of these so what i'm going to do is go back to the wordpress dashboard and once i'm over here i'm going to go into the post and click on all posts and i'm just going to remove some of these so i'm going to remove let's say this one and this one and then just go in here click move to trash and click apply and once that's deleted if you want to edit anything on the blog page just hover over appearance and then click on customize and you're going to come into the theme settings and what you want to do is just go into the blog tab right here and then for the blog archive you can change whatever you need to right over here and then same with the blog page for a single blog post you can change the structure right here if you want also just make sure that you click on the plus button just make sure that you click on the publish button okay so that's pretty much it for blog posts super easy to create so go ahead and pause the video if you want to create some we're going to move on and show you the other pages i'm going to create and then pretty much we're done with this video tutorial so now what i want to do is i want to show you the shop page and how you can customize it and the product page so you can see that this is the shop page right here and if you want to have a filter with a sidebar with different categories or different ratings or prices then i can show you how to do that so you can see right here on this product page we have a product category sidebar and you can add some additional stuff so it's really easy to do you just want to add some widgets so let me show you how to do that and then you can change the template for the page so first let's go to the edit product right here and once you're on the edit product page and even with your other pages if you want to have a sidebar what you want to do is come down to the astra settings and right here in the sidebar option you want to select where you want to place the sidebar so this one has a left sidebar right here and you're probably wondering how do you add those different products or widgets or whatever into the sidebar i'm going to show you how so it doesn't matter if this is for your shop page blog page or the product page all you're going to do is you're going to hover over appearance right here and click on widgets and on the widgets page right here what you're going to see is the main sidebar which is going to be for your blog post but if you want to add widgets or stuff to the sidebar for the product page you're going to come into the product sidebar right here and then for the store page you want to come into the woocommerce sidebar here and you're probably wondering how come on the shop page we didn't see any sidebar and that's because we didn't change the settings for the page layout so these are widgets and you can add as many different widgets as you want so maybe we'll do something like the price widget we can just click and open this up and then right here you can place the widget wherever you want so we can put it into the store page so just click on woocommerce sidebar and click add widget and we can also add it to the product page so i'm going to click and add it there and you can add some additional ones if you want but i'll just add these ones and you can change the title also if you wanted to just click save i'm going to rearrange these right here and maybe we'll add the search box so i'm going to come over here and just click and add this one you can also drag it in if you wanted to and i'm going to do it one more time so i'm going to show you guys what this looks like after we add it so we have all of these widgets right here and i'm going to just rearrange these and you can follow along if you guys want to just go to appearance hover over that and then click on widgets so we have the store page and then the product page right here and i want to go into my store page to set the template so i'm going to hover over pages and click on all pages and just find that store page down here click on edit and once you come to the shop page right here you can see now that we have a sidebar with a search box a filter by price and then another widget right here so you can go into the widget section and add whatever type of widgets that you want just make sure that you go into the page and edit the template for the sidebar option so you can see for this product right here we also have a sidebar just like i said and if you ever don't have the updated stuff it might be because there is a cache plugin already installed so what you want to do is hover over an item like this or an icon and then just click purge and that's going to remove the cache which speeds up the hosting or the loading because it saves all the data but it'll resave it so you can see right here now it updates with the other widget that i put in right over there okay so you can see when i go back to the shop page and i click on this product it doesn't have the sidebar because we didn't set it so again if you want to set it just go to the edit product or edit page and then in the astra settings all you're going to do is choose the sidebar option and then go back up and click update and then that should do it so you can see right here that we have a sidebar and you can add any type of widgets that you want alright so now what i want to do is just move on and show you the other pages and remind you guys how to edit them and then we're going to customize the header and the footer and then we're going to call it a day with this video tutorial so now what i want to do is just go through these other pages and kind of dissect them so that we understand how to edit them so you already know how to use the page builder so let's go to the testimonials page and you can always go through the page list to come to this page and what i want to do is just show you all the different sections that you can edit and if you don't want this page you can always delete it but first let's go and edit the page so that we can see the page attributes or the template so again you can see that this page is made with the elementor page builder and on the pages tab right here we want to come down to the astra settings and you can see that there's no sidebar it's full width and then we disable the title and we actually add our own title and you can see right here there's a few other things that are disabled and we have the transparent header enabled if you make any changes you want to click on the update button right here so we can just do that and we want to go and turn on the page builder so click on the edit with elementor and you're going to come to this page right here and again we have all of our different sections and the first section right here is a custom title section so if we click on edit section you can see right here that you can change the layout options and then you can go into the style tab and you can add the background image and over here in the background overlay this is where we added the green tint so if you want to change that you can and we covered this in the first section when we edited the home page and you can see right here in the advanced tab there is some padding which again is what's on the inside of the blue box and over here we just have a heading so if you want to change that you can and then over here you can see that we have a background image so you can click in here and you can see right over here you can replace this and then there's another image over here so what you want to do is kind of just hover over these different sections that you can customize or if you see something that you want to change and then just click in there and you'll see the module so this is an image and then you can change this if you wanted to and you can customize it with these other tabs and over here there are a few different testimonials so if you just click into this first one it's going to show you the edit testimonial and what we did in the homepage was we actually customized the section also so it's the same thing where you can add your content your image and then the name of the individual and then you can format everything over here and then you have these other tabs to do that also and you can always remove stuff and just remember you can undo stuff with this button down here and if we scroll down you can see that there's a few different testimonials down here is again that sign up form so we use the wp forms and this is just like the home page so you can go back there if you need to and just remember that we add the short code right over here to populate the signup form and you want to make sure that you integrate it with an email newsletter sign up or some type of service and again you can find that on the wp forms and then down here we have the footer which we're going to cover a little bit later okay so if you guys want to edit this page or maybe you just want to get rid of it you can pause the video to customize it however you want and then once you're ready click on the update button and then we're going to go back to the other pages so what i'm going to do is exit to the dashboard so once we're back on the wordpress dashboard now what i want to do is go to the about page so just hover over pages and let's click on all pages and right over here we have the about page i'm going to click on the edit button and again i just want to remind you guys that in the page tab over here you want to customize the formatting so you can choose to have a sidebar but if you want everything to look like the demo you want to choose these settings right here and we're going to add our own custom title so click on the update button to save whatever changes you make and then click to turn on the elementor page builder and what you're going to see over here is another custom title section just like the testimonial page and what you'll see on the contact us page and you can come in here and edit the heading and you can always change the background image if you go into the edit section in the style tab right here and just remember there's a background overlay so if you want to remove that you can do that over here and in the advanced tab you have some padding so you can go through these sections and you can see what each section does and remember everything is formatted to look like the demo website so there's nothing in the style tab for the second section but you can see right here there is some padding to add this gap right here on the top and the bottom and over here you can see that this is a two column section where you have a bunch of different text boxes that you can go in and customize and add whatever story or biography that you want and then over here you can see that we have an image and you can see that there's some white space right here if you want to change the image and maybe you want to make it a full width for this entire section what you can do is go into the style tab right here and you can change the width you can see that it makes it smaller or larger so it's really up to you and then if you scroll down you'll see that you have another section with two columns and these are just some icon lists and we already went through how to customize the stuff so again you can delete these you can copy them you can go into each one of them and add new icons and text it's really up to you and you can also add some links right here so super easy and down here you have a carousel so if you want to remove this all you have to do is just click into it you can change the images or you can just right click and delete this entire section also and just remember if you do make a mistake you can always go into the history and then just click to change whatever you want to change and then down at the bottom again you have some of these icon boxes to talk about your business or shipping or services or anything like that this is something that we did earlier so we don't need to repeat the section but again you can always add some additional modules too or change the spacing if you want and then down here this is another image carousel with some logos and very very similar to what we did on the homepage so we don't need to cover it but you can always come in here change the logos or whatever partnerships you have and then you are good to go so just click on the update button if you make any changes and again super easy so let me know if you have any questions the last thing i want to do for our pages right now is talk about the contact page right here so again i'm just going to walk you through all the different steps and we'll also talk about how you can customize the contact form right here using the wp forms and i am going to remind you that you need to create some additional pages for the checkout stuff okay so i'm going to go back to the dashboard just so that we can go to the contact page but if you need to you can pause the video to edit the about page right now otherwise keep watching and we're going to move on to the next page so i'm just going to click in here go back to the dashboard and you want to go to the pages list and we'll go and check out the settings for the contact page so let's click on edit so once you come to this page right here again all we're going to do is come down here and just look at the settings and if you want to change anything you can and then just click on the update button if you do make any changes and then just turn on the element to our page builder and you're going to come to this page right here and you already know how to edit the title section right here and one of the cool things about the second section is if you go into the edit section and look at the background image you can see that it's a full width image but only half of it shows up and the reason is because if you go into the background overlay you can see that there is an overlay color right here but it's only covering 50 percent of the image so if i change this around you can see that actually changes just like that okay so i'm going to remove that but that's just something for you guys in case you want to change the look and feel of this section right here the other thing is we have this intersection with some text modules and then we have a contact form right here and again all you're going to do is paste in the short code so we're going to go over how to customize this page in just a few minutes but first let's just go through this other section so you have two columns right here with some text and your social icons and then this is a map module when you hover over it you'll notice that the edit button is over here so you can click in it and then this is a google map you can just put in the address right here and then change the settings for the formatting and you can see that there's the pin right here and if you go into this tab right here you have some additional options also okay so go ahead and put that in and if you need to you can remove that but that's just something that you can add to this contact section so that people know where the physical location is and then at the bottom we're going to edit the footer and one of the next sections so what i want to do right now is just talk about how you can format the contact form to have required sections and add whatever you want or even remove stuff so if you do make any changes here click on the update button and i'm going to leave this page open just so that i can show you guys again how to paste in the short code but i'm going to go to this demo page right here and go back to the wp form so there is a button right here but let's go back to the dashboard just to show you one more time that that right down here there is a tab and you can see it's wp forms we can go to the form that's already created for us and over here we have the contact form so we'll click edit and this is just like the sign up form where you have the form and all your fields and you can click on any of these sections to edit them and you also have the advanced tab right here to change the size and the placeholder text you can hide the labels and if you want to make this required you can just check this box right here so you have the submit button and if you click on this it's going to bring you to the settings and again you can change the button text and over here in the notification this is where the email is going to be sent whenever someone sends you a message all right so if you do make any changes click on the save button so that that's saved and then close this and again on this page you'll see the short code all you have to do is just copy that and then go back into the module and then paste that in right here and that's going to populate this section alright so if you guys want to make some changes go ahead and do that and click on the update button and that's pretty much all you have to do for this page i want to show you guys some of the other pages that you probably should make for your website just for the checkout stuff so i'm gonna go back to the main page or the main dashboard right here and just show you the other pages that i would create and then you can do them on your own so some of the other pages that i would create for my ecommerce website are the privacy policy page which comes in a draft form so you want to go in here and edit this and you can turn on the elementor page builder to customize it the other one is the terms and conditions page so this is a page that you got to create on your own you're not going to have it in your list and you can see right here i put in the terms and conditions i didn't really do anything with this page but over here you can see that you want to change the astra settings and then click on the update button and then you can turn on the elementor page builder to create that page once you create this page what you want to do is go back into the woocommerce settings to set that terms and conditions page so what you want to do and you can pause the video first to create the terms and conditions page but let me just show you where you're going to go to set this page so you're going to hover over woocommerce and then go into the settings and once you're in these settings what you want to do is go to accounts and privacy and once you're in the woocommerce settings just go to the advanced tab click on that and then right here is the terms and conditions tab so if you go into this drop down and just type in terms right here you should see the page you want to set that so that when people go to check out they have a link to the terms and conditions page to read whatever your terms and conditions are okay so all you have to do is come down here and click on save and pretty much that's it so i want you guys to make sure that you have a privacy policy page and a terms and conditions page and once you do we are good to go and the final thing that we're going to talk about besides making sure our website is responsive is first the header up here and then we're going to talk about the footer down at the bottom and i didn't know i forgot how long the homepage is but it's all the way down here okay so let's go and talk about how you can customize the header using the header builder so what you can do is click on the customize tab here but i want you first to go to the dashboard so that we can create our header menu so i'm going to go back and to create our header menu we want to hover over appearance and click on menus so once we're on the menus page right here before we start talking about the header and the footer i want to talk about how you can create your menus so you can see right here there are three different menus and these ones are created for the demo website and you can always create a new menu so if you just click on create a new menu you're going to come to this page right here and you can type in the name so you can name it whatever you want and then just click on create menu and that's going to create your menu and you can set the location so if you want it to be the header menu you would select this and then you can add your different page links you can add custom posts or custom links so you can just type in the url and the navigation label and then you can click and drag them around but since we already have some menus right here and i want to use these i'm just going to show you how to customize those so i'm going to delete this menu item and you can always use that or create one if you want we're in the contact menu right now so you can see we have three different items and on the demo website you can see right here we have a phone number email and address so these are custom links you can see right here it says custom link and if i expand this you can see that we have a hashtag for a static link and then the phone number right here if you want to add your own custom links you can just come over here type in the url or use the pound sign for a static link and then type in the text right here and then click add and it's going to show up over here and then you can rearrange these by dragging them around and you can make an item a submenu item if you just indent it like this okay so you can see right here that this is an email with a hashtag so it's a static link and then over here same with the address if you wanted to add some pages like the home page or the about page you can find it in this list right here so you can go to view all and see your pages and you can just select these pages and you can add them to your header menu and you'll see them show up right here and then you can go in here you can change the navigation label if you want so we don't want to add these so i'm actually going to remove these but that's all you really have to do to add your header menu items or menu items wherever you want so if you do make any changes what you want to do is click on the save button over here so let me go through the other menu items since we're in the footer right now i'm going to go to these quick links and click on select and the quick links are these links right here so shipping and returns contract and customer service we don't have all these pages but assuming that you did you can just go in here and maybe add the terms and conditions or something so you can see there isn't really a link but if you had a page you can type it in for the url right here and then same with the contact right here you can go to the contact page if you wanted so we can actually just find the contact page right here and click add and what that's going to do is insert a new navigation item over here and i'm going to remove this one and then just place this one up here and if i go in here you can see that this is going to be for the contact page and same with customer service this is just a custom link so you can pause the video and edit this if you do make any changes you want to click on the save button right over there and then i'm going to go to the main menu which is going to be the header menu and we'll just talk about this really briefly so we have a home page a shop link testimonials about and contact if you want to add any other pages maybe the blog page or any other page you can add that right here so again if you don't see all your pages you should see them on the view all page you can also add some custom links posts and categories whatever you want and again you can rearrange these by just dragging them around and then this is going to be a sub menu item of testimonials if you indent it like that okay so you can always go into these and customize them and add whatever links you want and you can see right here that this menu the primary menu is set as the primer menu so that's going to be on the header okay so if you do make any changes again push the save menu button so if you guys want go ahead and really just go and customize these menus and then you're going to have them show up on these different areas for your website so what we're going to do now is just show you how you can select the header menu design or layout for your website and then we'll talk about the footer so if you guys want you can pause the video otherwise what we're going to do is move on and we're going to go back to the customizer page i believe to customize the header menu so if you want to do that we're going to hover over appearance and click on customize so once you're on the customize page right here you can see on these tabs we have the header builder and the footer builder and these are pretty intuitive so if you just click in here you can see that you have your different rows right here and you can place whatever you want wherever you want to put it so if i have my logo i can place it here and you can see that it just adds it over here and then if i want to place it maybe over here it puts on the same line so if you have additional items that are on these different rows then it's going to create different spacing so even if i put it up here what you're going to notice is that there's a line in the middle with nothing here but if i put this maybe right here then now we have three round three lines like that so it's really up to you guys what you want to do but really really easy and you have your items right here so you can also see that you have a transparent header option so if you click on this you can change the logo to have a different logo but i have my logo right here it's this white one and then that's pretty much it so there is this design tab that you can go into if you want to change the margin or the padding or change the width so once you're on the customize page to edit the header super easy all you're going to do is go to the header builder you'll get this little pop-up and you can click and drag these modules in and you can place them wherever you want to place them so you can see when i move this stuff around you can see that everything gets kind of changed round you can add it to the right or the left or you can leave everything as is and you do have some additional modules that you can add so you can see that we have this plus button right here if i click on this we have all this other stuff that you can add so if you have some widgets that you added to the widgets page you can add those you have the search function social media icons so if we want to add this search icon you can see that it just shows up just like that and we can remove this right here if you want to edit the transparent header so we are using a transparent header right now if you want to change the logo you can do that right here and you also have the design tab so if i go back right here you can see that you can change some of the spacing and the width and all that stuff okay so now what i want to do is just talk about the footer builder so if i click on this it should bring me down to the bottom and this is pretty much the same thing we have our different items over here so we have widget one widget two widget three social media icons and the copyright so if you go to the copyright right here what you can do is change the text if you wanted to and then same with the social icons over here all you have to do is click on this and then you can add your social media icons and their links over here so you can just click on this and then you can add the url right there okay and then if you want to collapse it just do that you can change the styling with all this stuff over here and you do have these options right here for the different types of icons that you want to add for the menu items you can see that it says contact details and then we have the menu items here and the logo and the other links over here these are widgets so what we can do is go to the widgets page and customize widget 1 widget 2 and widget 3 and then add them in so that everything populates like this so let me show you how to do that but again the footer and the header super easy you just click and drag and move stuff around and you can have three rows if you want so click on the save button if you do make any changes what i'm going to do right now is just show you where you can go to add the details right here on the widgets page and then we're going to talk about the responsiveness of our website and then pretty much we're done with this ecommerce tutorial so i'm going to close this so once you're back on the wordpress dashboard remember that the widgets are under appearance so if we click to go to the widgets page remember we customize the woocommerce sidebar for the shop page and also the product sidebar for the product page and over here you can see footer one footer two and footer three these are widgets that you can add different things so in the footer one this is where we have the contact details so you can see on the demo website if i just scroll down to the footer this is footer one so if you want to customize that you would come in here and we added a navigation menu you can add any of these widgets that you want and in here you can change the title and then select the menu that you want to show up so we have the contact menu right here and then just click save for the second widget this is where they put in the logo so you can see that there's an image widget and then they just uploaded the logo right here and then for footer three or this widget number three this is where the quick links are which is also a menu item so you can change the title right here and then just select the menu and click save and that's how you're going to get this section right here so if you want to customize it with some other stuff you have all these widgets that you can select from you can delete these and then just add whatever you want to add okay so that's pretty much it and just remember if you do have a sidebar for your blog post page or any other page then you can also edit this one right here and if you want to add some widgets to the header you have this section right here where you can add a bunch of stuff and then you can add that module to the header builder so let me know if you have any questions about the footer or the header or these widgets and i'll answer them in the comments section below otherwise what we want to do now is we're going to talk about how to make sure your website is responsive using the elementor page builder and then pretty much that's it we might run through a transaction but i'm going to send you guys on your way with an e-commerce website all set up and built and ready to go so let's go back to the home page really quickly and talk about how to make sure your website is responsive so once we're back on the home page the last thing that we're going to do is make sure that our website is responsive and i want to show you how you can adjust it if you ever need to so what you want to do is turn on the elementor page builder and once you come to the elementor page builder just remember that you can always check out what the pages look like on different devices if you click on the responsive mode you can see right here we can see what it looks like on the mobile device the tablet device and also the desktop so you can see right here that the mobile device looks pretty good and if you scroll down you'll have all your different sections and pretty much this template is mobile friendly but i want to show you what you can do if you need to make any changes so let's say for example this image right here this background image maybe you want to adjust it so that it looks good for the mobile device because we already know that it looks good on the tablet and the desktop but we don't want it to cut off like it does for the mobile device what you can do is go back to the desktop and let me just show you guys so i'm going to close this really quickly if we click on the edit section in the advanced tab you're always going to see for each section and module this responsive tab if you open it up you can hide the section or the module on different devices right here where it says visibility we can hide the section on the tablet device if we wanted to but before we do that what i want to do is i'm going to right click and duplicate this and place the copy right there so now i have two copies of the same thing and what i'm going to do is in this first section i'm going to go into the advanced tab and in the responsive i'm going to hide this section on the desktop and the tablet device and it's only going to show up on the mobile device and what i'm going to do is edit this section so it looks good on the mobile device and what i want to do is i don't want to make this copy show up on the mobile device so i'm going to go into the edit section right here and then go into the advanced tab and in the responsive mode this section right here is hidden on the desktop and tablet but shows up on the mobile device and i want this one to show up on the desktop and tablet and hide it on the mobile device and you can do this for all your different sections so once you do that you can go back into the responsive mode and the grayed out one is the one that's going to be hidden when you show the website on this device so right here we have the mobile device and what i want to do is i just want to edit this section however i want just for the device it's going to show up on so if i click on edit section right here what i can do is go into the style tab and i know i have a background image and i can go into the positioning and i can customize this if i wanted to and if i drag this around what you're going to notice is that we can make this image move over a little bit just like that so now this is what people are going to see on the mobile device and if there were any other sections down here let's say that this one didn't look good we can make a copy of it again and we can hide it on different devices and make it just show over here and then we can customize it and you want to do this for all your different pages and that's really all you need to do to make your website really mobile friendly but again just remember this template already is mobile friendly so you shouldn't really need to do anything but if some text looks a little weird or anything like that you can always go into these sections and again you can make copies of them and then you want to come down to responsive and then you can hide one copy on certain devices and make it show on the other it's super super easy it does take a little bit of time but sometimes it's worth it just to spend a little bit more time to make sure your website is perfect and you can see when i actually hide this it's going to make that hidden section disappear and this is what the mobile device looks like without the product showing up because this is a preview screen alright so what i'm going to do is go back to the main page right here and i'm going to remove this and then in this edit section i'm going to change this back because i don't want to hide any section but if you do click on the update button to make any changes and again if you have any questions about responsiveness and the elementor page builder let me know but pretty much we have just learned how to create our own ecommerce website with wordpress using a free theme called the astro theme and the elementor page builder so let's look at the website one more time and maybe run through a transaction and then we're going to be done with this video tutorial so i'm on the homepage right here and i want to go and buy a product so i'm going to go to the shopping page right here and maybe we'll purchase this product right here this is the aging skin toner and we have our cool sidebar right there i'm going to click add to cart and once it's in the shopping cart i can see it right here we'll go and view the cart and once we're on this page right here if you make any changes you'll notice that this shopping cart button updates right there and everything looks good so i'm going to click on proceed to checkout and once we come to this page right here you can see that i already filled out my information and if you have a coupon code you can enter that right here and you can always go to the wordpress dashboard right here let me just show you really quickly how you can create your own coupon code so over here in the woocommerce section just click on coupons and you're going to come to this page right here and you can just create a coupon and what you want to do is just put in the coupon code up here so whatever that is and then you can change the discount type right here and then put in the coupon amount and you can put in the expiration for the coupon right here click publish and then you'll have a coupon code for your customers all right so i'm going to come back here though and i have everything filled out and you can see we have our subtotal the shipping rate and then the total right here and we integrated our website with paypal so i'm going to click on i have read and agree to the terms and click proceed to paypal and once you come to the paypal page you can see right here you can pay with your debit or credit card or what you can do is log into your paypal account and once you're logged in all you have to do is click on pay now and your order should be complete so you can see right here you have your receipt and if you want to we can return to the ecommerce website and you can see that we have the checkout page right over here so we have all of our information and we are good to go so as the e-commerce owner you do have a dashboard to see all of your orders and all of those details so let me just show you that really quickly so you can always keep track of everyone that purchases something so once you come back to the wordpress dashboard in the woocommerce tab right here you have orders customers and reports this stuff is going to tell you everything that you need about your analytics and the orders that you receive so if we click on orders right here you can see right here that we have all of our different orders and we can just click on this one right here and if you want to change the status of this to shipped or on hold or complete then you can do that and you want to click on the update button but you can see right here we have the billing information the shipping information and we also have the item that's ordered right over here and if you go into these other links you can see that we have customers so if you click on this you can see all of your customers that have ordered something and you also have this reports tab right here to show the number of orders and the purchases and all that stuff so i'll let you play around with these tabs on your own but you can see that you have these charts and all that and pretty much that's it so this is our tutorial on learning how to create an ecommerce website with wordpress so let me be the first to say congratulations on learning how to make your own e-commerce website for free using the astra theme and the elementor page builder i hope you guys enjoyed this video and if you did make sure to give it a big thumbs up and also make sure to subscribe to the nyc tech club because we're always coming out with new videos just like this thanks again for watching and i'll see you in the next video and there you have it congrats on learning how to make your own ecommerce website with wordpress i hope you guys enjoyed this video i really enjoyed it i thought it was awesome how we can just upload a template and customize it super easy and if you guys have any questions you guys know how to reach me leave a comment in the comment section below give this video a big thumbs up and also make sure to subscribe to the nyc tech club youtube channel thanks for watching and i'll see you guys in the next one

Channel: NYC TECH CLUB

Views: 8,738

Keywords: ecommerce website, online store, wordpress website, ecommerce, make a website, make an ecommerce website, create an ecommerce website, how to

Id: ZIqLjtvoUok

Length: 185min 7sec (11107 seconds)

Published: Sat Jun 05 2021