How To Make an eCommerce Website With Wordpress and Elementor 2021 [Elementor Tutorial]✅

what's up party people my name is daryl wilson and today i'll be showing you how to make an amazing and professional ecommerce website step by step now we spent weeks making this video so complete beginners can learn how to create professional e-commerce websites that you can fully customize plus you'll also learn how to use the elementor page builder and all of its features which is currently right now the number one most popular page builder for wordpress so by the end of this video you'll be accepting credit cards and payments on your new ecommerce website so go get a drink pull up a chair and let's get started today with this ecommerce tutorial so i'll be showing you step by step on how to build and customize your personal ecommerce website that will look super modern and really professional plus the great part about this video is that you don't need to know any sort of code or any html because we are using a drag and drop builder that makes it really easy for you to build your ecommerce website and as you can tell the website looks really professional yet simple so i'll be showing you how to design and customize every part of the website so you can walk away today with an ecommerce website that fits your business needs now you can sell anything you want on your website you can sell clothes electronics animal supplies phones you'll be able to sell any type of product you want on your ecommerce website with no restrictions so i'll be showing you all how to build this ecommerce website with wordpress and elementor wordpress controls more than one third of the internet it powers more than 455 million websites and is by far the most popular platform for making e-commerce websites it is used by popular websites like sony bada ebay mitsubishi and even staples so you will be using the most modern and up-to-date software to build your ecommerce website elementor is the number one most popular page builder for wordpress it powers more than six million websites because it's completely drag and drop and really simple to use plus i will be providing you all with pre-made starter templates that you can easily import with one click to help you get your ecommerce website up and running quickly so with all that said let's take a closer look at the ecommerce website that you'll be making today in this video okay so first let me show you all the home page now this is an amazing landing page so notice at the top we have this header and we have our location we have an email and you can also put your phone number on the top right we have our social profiles where you can put your facebook your twitter or your youtube below that we have a shop button so users can click on this and go directly to the shop also they can click on the account and users can go directly to their own personal dashboard where they can access their orders they can update their address and payment methods and on the left side we have a logo now if you don't have a logo don't worry about it because i'm going to show you a website where you can get a really nice logo for really cheap and in the middle we have our pages so we have the home page the about us page the shop page the my account and we have this drop down with the checkout and also the cart and then we have the contact where users can send you messages if they have any questions about their orders so let's scroll down now this is just an amazing landing page so landing pages are crucial for conversions and making sales on e-commerce websites if you have an ugly website no one's going to buy nothing so this is just an amazing landing page so at the top we have this 50 off banner we have a summer sale notification we have this 50 off to really increase conversions and sales for your ecommerce website and then we have the starting price with this little red squiggly line under it to kind of emphasize the price and then we have this shop now button where users will click on it and go to the shop page scrolling down here we have a banner section so if you have specific product categories like women's men's or kids you can categorize your products into different categories so for example i have women's i have new arrivals and i have men's so i'll be showing you how you can categorize your products in this ecommerce tutorial and below that we have just some icons like free shipping quick payment and also you can offer anything you want you can change this text and you can change the color to anything that you want below that we have our products so for example i have some products on sale right now so this used to be 50 and now it is only 20 bucks what a deal now you can change the colors you can change the sizes you will have full control over your products so i'll just click on add to cart and then these will be added to the cart where your users can go ahead and purchase this on your ecommerce website so scrolling down here it's beautiful i know and then we have this banner so you can just have like a big product like you know your newest product and then you can you know tell people to go ahead and purchase it on your website and then we also have these sale products which is really cool so this is kind of adding scarcity saying oh these products are only on sale for a day you got to go buy it and then users can add it to the carts and they can go ahead and purchase it now you can change this timer to anything that you want and i'll go and cover more about that in the video scrolling down we have a newsletter section so your users can actually go ahead and subscribe to your website and get notifications about new products you can send them coupon codes you can send them offers for your ecommerce website and then scrolling down we have just some logos like you can offer like who we work with and then we have this really nice footer where we have this red bar and also an email subscription just in case they want to subscribe to your email list so before i show you the shop page and the rest of the website let me just give you all a brief overview about how the elementor page builder works now we are using a visual drag and drop page builder so at any time you want to make changes to your website you can just double click on it and you can visually change anything that you want if you want to change the price of this you can change that also if you want to swap columns around you can go ahead and just swap it around of course that does not look good so i'll put it back and then you can change these category text to anything that you want so instead of men's i can put boys products and if you want to swap columns around you can go ahead and do that also on the top left we can just drag in any element so if you want to add a button to your ecommerce website you just drag and drop it and there you go and then you can customize this and i'll show you how to do that in this tutorial but i'll go ahead and delete it now i did mention that you have full control and customization over your product so for example i want to change the color and the topography of my products i'll click on style and then under the color i can change this to something like red and then for the topography we have a huge amount of topography fonts here so you can just go ahead and click on one and then change the topography of your products for your ecommerce website so this is going to be a fully functional ecommerce website that you can customize any which way you want so next let's go to the shop page so i'll click on the shop page and now we have this really beautiful banner so we have this 50 summer sale and it starts now and then scrolling down you'll notice on the left side users can filter by price we have product categories we also have this really nice sidebar with products and we have the reviews for those products and of course users can just click on add to cart and add these products to their carts scrolling down we have a video of our products if you want to add a specific video to your products you can do that as well so i'll go ahead and click on a product i'll just click on these black gloves so here is our product page now on the left side we have an image of the product where users can zoom in and view the product we have a title we have the description then we also have this specific category that these products are in we have the price we have the quantity that users can add to the cart now also if your user want to share this to their favorite social networking website they can share it with these social sharing buttons below that we have reviews so you can enable this or you can disable this depending on what you want to do for your ecommerce website so users can say hey i love this product it's amazing and they can submit their review and then below that we have some related products so if users are shopping maybe you want to recommend more products so they can go ahead and say maybe i wanted to check out the belt as well so you can add upsells on your ecommerce website so in this video i'll be showing you how to create variable products so for example we have this product and we have the size and we also have the color so for example if we have a specific size users can select the size so maybe they want a medium and they can also select the color so we have medium blue and also medium white now if i select white you're going to see that the image changes because i selected medium white so if you want to have variable products on your website i'll be walking you through on how to add that to your ecommerce website now your shop page will be fully customizable so this is a custom shop page and i'll walk you through on how to make the same one and you can change the color you can change the fonts you can add to this so you'll have full flexibility design over your shop page for your ecommerce website so next we have our about us page and you will get this template for free in this video that i have personally created for all of you so at the top we have the title of the page we have about our company and then you can give some description about your company maybe even link them to a profile or the contact us page on the left side you can add a picture of a building or your boss or your dog or whatever you want to add in right there below that we have our team so you can list your lovely co-workers which i'm sure you all get along with right here and then if they hover over it it'll show the name and they can even contact that specific co-worker as well and then below that we have a call to action where you can link them back to a specific part of your website and then we finish this off with a footer at the bottom next we have our contact page and you also get this template for free in this video so we have a title of the page contact you can even change that to something like contact us and then below that we have this form so users can submit their first name their last name their email their phone and give you a nice message about your website or an inquiry about a product you can also list your personal info such as your time that you're open or anything that you want to put on the left side on your contact us page so next we have the my account dashboard now every customer that buys something on your website will have their own personal dashboard where they can go ahead and check all their orders they can change their address they can change payment methods and so on and so forth so on the right side you can see that i try to buy something and it failed so i can update my payment method and then i can continue with the purchase also when i purchase something you'll see that i can view the order so i can see when it was purchased and i can check the tracking information on the left side we can update the addresses we can update payment methods and also account details as well and below that we have upcoming products so if you want to advertise specific products for people who have already purchased something on your website you can add that in their my account section so there is some strategy here to making sales and i'll talk more about that in this ecommerce tutorial so this website is a live ecommerce website that can accept payments and credit cards so what i'm going to do is just imagine i'm a customer and i'm just going to purchase something on this ecommerce website and this will be the same experience that your customers will have on your ecommerce website so i will click on shop now and then i will scroll down and i want to purchase something like the gray bow tie so i'll click on the grey bow tie i will add the gray bow tie to the cart i will click on view the cart so this is your cart where your customers can increase the quantity they can add coupon codes they will also see the shipping price and the tax as well on your website now let's say for example they want to add more so i will add in one more bow tie and update the cart so the cart is updated now the total price is 85 dollars but i do have a coupon code for 50 off so i will type in darryl 50 and apply this coupon code and look at that so now you'll see that the price drops by 50 so i'll show you how to set up shipping coupon codes and also tax for your e-commerce website so let's click on proceed to checkout and lastly we have the checkout page so on this page your customers can fill out their billing information like their address their phone number and also they can give you their email address on the right side users can check out with paypal or with credit card now if they are a returning customer and they buy a lot of products it will automatically store their credit card on your website so they don't have to keep entering it all over again so what i'll do is click on use a new payment method and i will put in a credit card number and i can save this for future purchases and i'll scroll down and click on place order and then we have these stickers at the bottom just telling them that this is secured and they are protected so congratulations you now have made a sale so the website will take your customers to the thank you page where they can review the order details the billing address and also the shipping address now that credit card was in test mode so i just want to give you all a demonstration of how the checkout process works on your ecommerce website so after the customer buys products on your website they will have access to them in their account so i'll click on my account i'll scroll down and on the left side we have orders so i'll click on orders so right here you'll see that we have the order it's processing and i can click on view so here is a product that i purchased i can see what i bought and how much i spent and i can also update my shipping address and you as an admin you can approve the sale you can reject it or even refund them in case there's a problem with their order or they want their money back now whenever someone purchases something on your website you will automatically get an email notifying you that you have a purchase on your website so you'll see that the gray bow ties were purchased we can see the quantity it shows them the cost and also we can see the shipping address so we can ship the products to their address now at the same time your customers will also get a purchase receipt for the products they purchased on your website so you'll see they purchased the gray bow tie we have the quantity it shows them the total amount and their billing address and also their shipping address so it's very convenient when someone buys something on your ecommerce website so party people i hope you like what you saw now this is going to be a complete e-commerce tutorial so after watching this video you will have a fully functional ecommerce website that accepts credit cards and payments on your new ecommerce website now i just want to give you all a boost of confidence here this person with no experience watched one of my videos and now has a fully functional ecommerce website that is making thousands of dollars and i have personally purchased products from their their website so if they can do it you can do it so with that said let's get started today with this ecommerce tutorial so we're going to build your new ecommerce website in six simple steps and we will use this checklist throughout the tutorial to help you follow along in this ecommerce tutorial so step one we are going to get fast web hosting and install wordpress onto your new website step 2 we are going to start designing your website with the drag and drop page builder using elementor pro step 3 we are going to start adding products to your new ecommerce website step 4 i'm going to introduce you all to the theme customizer and we'll also touch base on what plugins are step 5 i'm going to introduce you all to the elementor theme builder which allows you to have custom headers and footers custom shop pages and also custom product pages that you can fully design and customize and step six we will talk about the woocommerce settings where we will talk about taxes and shipping and i'll also show you how to integrate payment gateways where you can start accepting credit cards on your ecommerce website now there is a link in the description of this video it'll take you to a page to purchase discounted fast web hosting and this is name hero.com now namehero.com performed as one of the fastest web hosting companies and also one of the most reliable now how do i know that well i actually tested name hero against 22 other web hosting companies for 90 days a name here performed as one of the fastest and one of the most reliable web hosting companies out there so you can be searching that your website will be fast and it'll be very reliable so through my link exclusively you guys will get 70 off all of your plans if you go to the website normally you're going to pay a little bit more because the discounts only 52 so through my link you guys do get a special discount and the company gave me this discounts just for my viewers so we have four different packages and personally i recommend the plus cloud i think that's suitable for people getting started out with their e-commerce website you also do get a lot of space a lot of bandwidth and you do get a free ssl with your package so you'll scroll down and you'll see order now so you can select any package that you want but if you guys get longer than one year you do save a little bit more money so one year is 449 a month two years is 419 and three years is 389 so go ahead and select the year i'll just put one year just for this tutorial now go ahead and register a new domain name so this is going to be your new web address so for example mynewamazingwebsite.com i'll just do tutorialdomain.com so you can do something like you know my drone ecommerce website or whatever you want to do and once you make your decision you will click on the continue button next we will scroll down and they do have some add-ons that we can add to our plan personally i don't really think you need these but it's up to you if you want to grab them but i'm not going to because this is just for tutorial purposes so i will click on continue now this is something i do recommend so we have three different options and i highly recommend the id protection the id protection will protect your personal information from spammers and people who are trying to get your personal info so that is pretty important so select the id protection and then click on continue so look at that for the entire year of hosting you're only going to pay 70 for the entire year which is it's a very good deal i got to be honest uh so once you uh go through and you review your checkouts you will click on checkout so this is the checkout page so you'll go ahead and put in your personal information your billing address and also your support pin you will need that in case there is a problem so for example if you get a technical problem they might require that you have a pin to verify that it's actually you you'll make your password and i'm sure you guys have seen this page before right on various other websites you can even pay with bitcoin how cool is that i thought that was dead apparently not so you'll go ahead and select your method of payments and you can click on i have read to the terms of service and payment policy and you can read through those i'm sure you all will and once you're done with that you'll click on complete order and i'll meet you all on the very next page okay so once you make the order you will get an order confirmation you can also give them a review saying hey this was a very easy experience or whatever you want to do once you do that you'll click on continue to client area next it'll bring you to your client area so it'll show you your domain it'll show you your web hosting packages now this company has great support so if you have a problem with something you can just go to their tickets you can submit a tickets also you can click right here on get in touch with a superhero and you can go ahead and ask them anything that you need so i just had an issue one time with my domain and they got it fixed in like literally like 20 seconds so it's an amazing company and their support is really really good so now that we have the domain and we have our web hosting package let's now install wordpress onto our domain so you'll click on the client area and then you'll click on cloud web hosting next we have our products and services so we have the plus cloud package with the domain so right here where it says active go ahead and click on that click on active next on the left side you'll see login to cpanel okay and this is where we're going to install wordpress i'm sure you've all heard of wordpress before in fact if you are uh young and you are in college wordpress is great to have on your resume because a lot of businesses today use wordpress you know i don't even think universities even teach wordpress in schools which is pretty sad i mean my college experience i thought was wasted because i just learned a bunch of like just stuff i didn't need like corporate theory of marketing and just i don't know i feel like it's all outdated anyways uh once you scroll down you'll see software and you'll see wordpress manager by softaculous click on wordpress manager by softaculous next on the right side you will see install now so click on install now and we have the version of wordpress so make sure that's default we have the current domain which you set up now right here where it says in directory make sure nothing is there okay i don't know why there's something there by default but make sure nothing is there also on this left side you'll see http make sure you select https we are going to select and set up our ssl on our domain to make sure that it is secure so right here we have site settings you can give your site a name and don't worry you can change all this later so you can just put something like ecommerce websites my new websites and here we have the account the admin account so make sure you write all this information down you will need this when you log into wordpress every time you want to log in and make changes to your ecommerce website so i'll put admin and uh we'll do paddywhack and on your admin email make sure you have an email that you have access to because what's going to happen is if you forget your password it's going to send your password to this specific email that you put on file next you can select a language so if you speak arabic or albanian or bulgarian you can select any of these languages i select english of course so i'm going to leave it as english and you'll keep scrolling down and we're going to ignore all these ugly templates actually they're not that bad but we'll make our site look a lot better so once you have select everything and you select your password and email you will click on install so now it's installing wordpress onto our domain and just like that wordpress has been installed onto our domain so right here it says administrative url you can click on this link and ta-da we are now in wordpress and this is your new wordpress website so getting your website set up with wordpress is really fast and easy so on the top left you see my website and you can click on visit websites and this is now your new current wordpress website so it is live on the internet and we also have that green padlock and that was included in the web hosting package because we got a free ssl so that is pretty cool now before we go ahead and start building the website we need to make some small changes okay so now that we got all the technical stuff out of the way now we're going to go into the general settings which we'll talk about things like password and just general things that you might want to change before you start building your websites so next let's go to general settings so let's say for instance you want to go ahead and change your password or change any of your personal information so you have these options on the left side under users you'll click on profile so here you can go ahead and add some different color schemes so let's say for example i like midnight i like this color scheme but you can choose anyone that you want oh that is ugly that is ugly but i like midnight i think midnight's just easier to see on the eye and also you can change your email and anytime you want to change your password you can click on generate password and then you can go ahead and change the password and once you are done with those settings you will click on update profile all right next we need to go ahead and change the permalinks of our website so i know that sounds technical but it's really not so just go to settings and you'll see permalinks now we have all these different options so you want to make sure that the permalink settings are under post name the reason why you do this is because you see these urls so for example yourwebsite.com about us right dash shop not you know 208 all this stuff so you want to make sure that your permalinks are set to post name and once you are done with that you will click on save changes and then you can click on dashboard next let me show you how to log into your website so in the future if you want to make changes you can just log into it and work on whatever you want to work on so i'm going to log out so to log out over the admin i will click on logouts so if i visit my current website it looks like this and you notice how we can't log into the backend to make any changes so whenever you want to log into your wordpress website you'll go to your domain and type in dash wp-admin and then press enter it'll bring you to this page here so you'll go ahead and put in your username and then you'll put in your password so once you enter your username and your password you can click on remember me and then click on login and voila you are now back to your wordpress website where you can edit everything and make changes next let's go ahead and make some pages so if you've noticed on our website we don't have any pages i mean we have the sample page whatever this is so let me show you how to make pages for your website so for example the home page the about us page the contact us page so you'll go to pages and then go to all pages we're going to delete these pages these come default with wordpress and we don't really need these so to delete pages i'll click on all of them book actions move to trash and click on apply next we will add some pages so under pages under add new i'll go ahead and click on add new this is the block editor so they're just showing us like you know how to do stuff and everything but i don't really even use the the default editor so this is our home page so i'll type in home and then click on publish so we made the home page let's make the about us page so i'll click on the wordpress logo and then under pages again i'll do add new and then same thing so this is the about us page and on the top right i'll click on publish and publish and we'll make one more page so i'll make the contact us page so people can send us emails with anything with any questions they have you know support everyone loves support so all right so that is the contact us page and if we click on the wordpress we can now see that we have these pages so if you want to see these pages you can just go over here and click on view now we don't have the page builder yet so i'm just showing you an example of what this looks like it looks ugly but not to worry we're going to make it look really really good next let's add these to the menu so let's now create a custom menu so under the appearance section we'll go to menus and under menu name just do like menu or main menu and i'll click on create menu next we have the pages so you can see the page that we created so i'll go ahead and select the contact us the about and the home and add them to the menu and i will want this as a desktop horizontal menu and then we can rearrange this so i'll put the home first the about and then the contact us last and then click on save menu once we've done that we can go back and visit the website and now we have a menu at the top right so once we get the page builder we can actually edit this whole page so we have the about us the contact us and the home page next we need to go ahead and assign the home page as our home page so go ahead on the top left and click on customize now every theme has a specific theme customizer and we'll talk more about themes in just a bit but for home page settings you want to go over here and under the home page displays under a static page i want to select the home page to home so basically what i'm saying is that when someone visits my website what's the first page they want to go to well probably the home page right so we'll select home and now we'll click on x and there you go so now you can see our domain and now we are at the home page by default okay so the next step is now we need to purchase the page builder that allows us to build and customize our website so there is a link in the description of this video it'll take you to purchase elementor pro you can also get there by going to darrellwilson.com elementor and pressing enter now this is the number one most popular page builder for wordpress it powers i think more than six million websites because this allows you just to do some amazing things to your ecommerce websites now for this specific video we're not going to be using the free version we're going to be using the pro version because we need that in order to create an ecommerce website that allows us to have custom shop pages custom product pages and also the theme builder which allows us to customize any part of the website so you'll have to pick from the personal plan the plus plan or the expert plan now i have the expert plan because it's a very big gap between three websites and a thousand websites but for those of you just getting started out i'd personally go with the plus plan because you might want to build more than just one website so go ahead and select a specific package you can either select the personal the plus or the experts because it includes the theme builder and also the woocommerce builder which is what we need to build our ecommerce website so we cannot use the free version for this specific tutorial so sad but don't worry 50 bucks 100 bucks guys i mean how much money do you spend at starbucks anyways you know like it's really not a lot of money and it's a great investment because it's for the entire year so go ahead and purchase it and once you do i will meet you in my account because i already have this specific page builder all right welcome to the elementor club so now you have elementor which is the leading page builder for wordpress so once you go to your account on the right side you'll see download plugin click on download plugin next it will want to save it onto your computer and it's a zip file so just click on ok never read the warning sign just always click on ok and at the top right you can see that it has downloaded so i'm using firefox i used to use chrome but to be honest i just get a lot of problems with chrome and i'm just i don't know i'm just moving away from chrome so i now use firefox so what you want to do is you want to upload this to your wordpress websites so what we're going to do is we're going to go back to our websites and go to dashboard next we'll go to plugins and add new you're going to love plugins plugins are basically like free applications for your website you know like the iphone has apps you know there's an app for you know there's an app for everything you know so there's an app for pretty much everything with wordpress as well so what you'll want to do is you want to upload that plugin so on the top where it says upload plugin click on upload plugin click on browse and then go ahead and upload the zip file that you downloaded from elementor.com all right so here is the file i will click on open and then i will click on install now so now it's installing elementor pro onto our wordpress website so it's all done i will click on activate plugin so it's letting us know that we need to get the base version of elementor so where it says install elementor now go ahead and click on that it's now installing the base version of elementor and it has successfully been installed congratulations next we'll click on activate plugin alright cool so welcome to elementor so now we can go ahead and build our website and make it look amazing so let's go ahead and close this okay so you might get this really annoying welcome to elementor pro so they want to make sure that your license is currently activated so you get supports and update for your website so if there's ever a problem with the page builder this company will give you support saying hey we'll help you out or if you get a weird error you can go ahead and contact them and they will provide you support because you purchase elementor pro so go ahead and click on connect and activate all right so it wants to connect our website with elementor so i will click on activate all right party people we are all ready to rock and roll your status is now active and we are all set now the first thing that we'll do is we'll install a wordpress theme so over under appearance you'll select themes so under themes we'll click on add new and i will click on a popular now essentially how wordpress works is it uses specific themes for its for your website so there's pretty much a theme for everything and the theme essentially is just controlling the header and the footer of the website so it controls the top section and also the bottom section and the page builder kind of controls the entire page of it now you can switch between themes at any time you will not lose your progress so let's say we use one theme and you want to change it later to another theme which a lot of people tend to do you can go ahead and do that but the theme that we're going to use for this specific video is called astra so astra and this is the theme that you'll need to install right here so under astra click on install this is actually the number one most popular and the most used theme for wordpress it has a lot of features and i find that it has everything that you need for the elementor page builder so click on activate and your theme is now activated pretty cool now if you want to see what happened to your website you can go over here to my website and click on visit science and you'll notice how everything kind of changed a little bit so we have this different menu and now we have this just kind of different structure of the websites so what we'll first do is i'll click on home and now we need to go ahead and edit the page with elementor so let's do that so first i'll click on edit page will click on close that block editor is pretty annoying now before we actually edit this with elementor we need to select the page settings so this is where the theme comes in handy so for the content layout i want that full width stretched and i also want to disable the title so that means i don't want the home page to be displayed on the page that we're working on so once you do that you can click on updates and then click on edit with elementor and we are now going to begin building this website with the elementor page builder exciting stuff all right guys so we are now going to build the website with the elementor page builder now i want to go ahead and say some things before we go into this so number one leave me a like and also leave me a nice comment and let me know how i'm doing also please watch this video all the way to the end because there's gonna be a lot of things that we're gonna talk about and i know a lot of people tend to skip around and they miss it and they're like hey girl you missed this and i said no i didn't it's there also at any time i'm going too fast you can slow the video down or if you feel like you have got the section down you can go on to the next section but with that said let's go back to the tutorial so if you're brand new to elementor let me just give you a crash course so whenever you want to add in a specific section you can just click on this plus section and now we have these columns and essentially you can just pretty much add any column you want so for example let's just say i want to add in a three column row i'll click on these dots right here which will basically bring us back to these elements and then we can just go ahead and just drag and drop so i want a heading text you see where the blue line is i'll drop it in there and i'll just put you know this is my title and then i'll go back i'll grab a text editor which is just like smaller text and then i'll go back and then maybe i can just grab a button like that and then we can rearrange this so let's say we want this on the right side i can just click on the title and i can say you know what i want this on the right side also at any time you want to style any of these modules we have this style tab so i click on the style tab now i can change the color i can do this i can do that we have topography we have a bunch of different fonts so i think the font i use in a lot of my videos is poppins i just find it like really i don't know it's just really friendly i guess you want to say and then here you can change the the weight of it and um you know same thing here so we can go ahead and say uh this this is the best tutorial on youtube right yeah and then under style we can change the alignment to rights and then change the color something like black and then typography again we can change that here to some uh uh what was that what was that this is like a robotic i don't even know where this i mean every font has a purpose you know i just find that poppins is just something for like you know web agencies and stuff like that um for the button itself we can also align this now when it says link like we can put a specific link there so for example i can put my website darrelson.com and if someone clicks on this button it will then take them to this specific website and under the settings icon i can have it under open a new window so that means if i click on it they won't leave the website it'll open up a new tab you know so they don't have to leave the website so that's just you know some options that you might want to consider we have an icon so elementor has tons of different icons that you can have so maybe you can have this like a you know i think this is the wechat or i don't even know wechat or zoom or something like that uh you can have an icon next to your button or next to your text i meant and then we'll go to a style and then we can change the actual topography to kind of keep the color scheme of the actual website now there's a lot of shortcuts i'm going to introduce you all so you don't have to do everything you know all over again because that can take a lot of time but for example we have the text color i might want to leave that as white and change the background color to me like black and you know that would probably be the end of it and if you want to add a background to this we can click on this little edit column and under style we can go to background type we can have like a gradient color or you want to add something to it we can do that for each specific block and that's how you can actually design the background now what i'm going to do is that's just a quick crash course but we're going to go ahead and upload a block and then we're going to work off that block instead of manually creating every single one all over again but just to show off and brag here i'll just show you you know you can delete these columns and then duplicate and duplicates you know there's a lot of different things that you can do with this builder so let me just go ahead and just go back to the basics here so i'm going to delete this section so whenever you want to delete a section you can click on this x button now we have this folder right here so click on add templates now we actually have a lot of pre-designed blocks and templates that we get because we purchased the pro version now where it says pages these are essentially templates that you can use now you don't have to use the whole entire page what you can do is just kind of use sections from each specific page if you want to do that however there is also the blocks tab which i find that might be a little bit more suitable for people that are just kind of looking for specific blocks so what i'll do is go over here to category and i will find hero hero section so uh for those noobs out there hero just means landing page that's it hero equals landing page it's just a fancy word these designers give it just to sound more complicated you know how it is you know so this one right here is called the sound of the future and what i'll do is just click on insert okay so now we have sound of the future we have some text now you can see it's already structured for us you know everything's kind of coming into place already we don't have to do a lot to it we just need to make some changes to it so looking at my demo website let's go ahead and kind of compare and contrast how i did this so this is a text a text a text a text a divider and then we have a special text and a button so let's go ahead and try to re recreate this using this section here in the description of this video i have a link to demo images now those demo images are going to basically allow you to use all the images that i use on my video or my templates to help you follow along so you don't get lost so let me go ahead and minimize this and it is in the description and it's going to allow you to download this zip folder once you open the zip folder you will then get this folder called elementor ecommerce images so you can double click and there are a lot of images that you can use on this video to help you build out your ecommerce website so you can see i use this one right here and there are various other ones that we're going to use and you know i just use these to help you follow along to make things easier so we're both on the same page so what i'll do is i'll go ahead and open this up so go ahead and download those images and then now let's go ahead and upload them to your websites so you see these six dots click on the six dots got it and then we're going to go ahead and upload a new background because i don't want this background so we'll click on style and now we see image so we can actually change this image so i'll click on choose image and now you can go ahead and upload all those files that i gave you so the the folder is elementor ecommerce images and you can just hold shift and just download all of them or sorry upload them all at the same time so there we go and i will click on open now it's going to upload all the images that i gave you guys in that specific folder so give it a few minutes here alright so my images have finally uploaded and i will go ahead and upload the background.jpg image and click on insert media now one thing to note guys is that i've already made this whole website for you all and i will give it to you as a template but i want to go ahead and teach you how to use the page builder not just upload templates so don't worry i got your back i have a lot of goodies for you a little bit later so uh first things first i don't want this so let's delete this i'll right click oop right click and click on deletes also if you've noticed that we have sort of a dark overlay now you can choose to have this on your website but i want to get rid of the dark overlay so on the bottom right here it says background overlay i'll click on that and for the color i'm just going to make this transparent because i don't want an overlay next what we'll do is i will change this color to black because we have white on white and as a designer guys you don't want white on white because people can't see the tags i mean that's pretty self-explanatory so for the um for the text here i'll put new e-commerce experience you can put anything you want you can put my new amazing websites under the style i will click on the text color and change this to black click on black there we go yeah black there we go and then typography i want to leave it as poppins that's my standard font of course you can choose any font you want so you can go through these and have fun and you know invite your friends over and pick fonts and you know have a good time so that looks good to me next we have sound of the future now what i want to do here is i want to go ahead and duplicate this so right click and click on duplicate i'll explain why we did that in just a bit but for this section where it says sound of the future i want to change this to summer sale wow wow i cannot even spell dural wow wow okay and uh next i want to change this a little bit so i want to change this to black right so for the text color i'll change this to black now i want to use a different font this time because i don't want it to be all the same font that looks really ugly and you can just tell what with by the eye it just doesn't look good so under topography under the family we're going to type in a g there it is agufina script and i can make this a little bigger you know something and yeah leave it like that yeah i think the the weights will do yeah 600. so you can go ahead and customize and go through these you know you can have it like italic or oblique so there's a lot of different options on how you can design your specific fonts so uh we've changed that now let's go ahead and go to this one and i'm just going to type in 50 off and what i'll do under the style topography or sorry text color black you guys are getting this yeah so you guys are already becoming professionals already pros you guys can like the video and be on your way i'm just kidding there's a lot to learn there's a lot to learn so uh the next we'll do is uh under wait we'll go to bold and you know i want to make this bigger i want to make it like fat you know like really i want to push it out there i really want people to know they're getting 50 off uh one thing i noticed too you see this text color i don't think it's 100 black no it's not there it is there we go that looks a lot better and this text obviously is too hard to read so i will click on it and change this to black right change that to black see sometimes when i click on it it doesn't work so you have to actually use this you know sometimes you know sometimes it happens you know that's what you get you know so next what we'll do is i want to add in this little divider right here i think this divider is really cool now that's a specific style i added to my website you can add any style you want but let me just show you on how i added that in so i will go to the what do you want to call this from the rest of the tutorial i guess the nine squares the nine squares i don't know the elements tab the elements tab there we go and i want to find the divider i'll take the divider and you see where it's blue i'll drop it in and we have different styles so we can make this dotted we can make this curly we can make this squared oh that's cute oh that's cute that's really cute zigzag so you can kind of see here how there's a lot of different ones on how you can add so you know you can add a different style to your website and don't think that there's not a reason there's always a reason and a way on how you can achieve these you know these patterns even though they might look ugly you know look at this one you know this one or the parallelogram i think that's the one i chose is the um no i chose slashes so i chose the actual slashes and yeah i mean right now it looks a little awkward but you know once we actually kind of add to it we can actually you know change the width of its you can add a text in the middle so you can put like hey what's up you know you can kind of customize things and just see what works out you know kind of like you know just mess around with it you know it's all about trial and error for the style we can change the weights so that means it's just thicker so i think i did actually change the weight of this so i think the weight that i use was around let's see so the weight that i used was around one so just leaving it at one and yeah that's pretty much it so that's pretty much all i added to it now this next section you notice that there's no way we can add like two sections so let's now add a column in this section so let's go back to the elements tab and we have this intersection so whenever you want to add more of a more columns in a column go ahead and drag and drop the elements tab or i'm sorry the intersection and we have the button and you know this button it has some work done to it i don't want to get rid of it you know it has some work so i'll take this pencil which is taking the elements and i want to drag it inside of that so that's that and also i want to reduce this padding so see this edit column go ahead and click on that and under the advanced section i'm sorry we have the the pencil icon the pencil icon and under the advanced section you see how it says padding go ahead and take that to zero so see how it's making space it's now we're deleting the space there you go sometimes there's padding applied to a specific module and it's hard to know if it's the actual column or the actual elements but it's the same result so you have to just click on both sometimes so we have the button there now let's add in the other um the other uh text i added here now this one's a special pro element it's not like the free one so we'll click on the elements tab we'll go down to the pro and we're gonna find the animated headline and uh yeah so i'm gonna put starting at and then 199 so for the style you can have it as rotating or highlighted and you can change the shape to curly underline double zigzag double underline you know i'm sure there's a way on how to use all of these i use the underlying zigzag so you can kind of go through and mess around with it see what works out for your website now for the style we need to change this because it's kind of faded and we don't want green you know green's ugly you know it doesn't work out this is it's it has to go oh that's really ugly black so i want to change this to something like red you know because the red it kind of takes away from the black and white you know there's too much damn black and white on this page but just adding a hint of red here and there throughout the website it'll make it look a lot better so um yeah that's that's now for the headline for the text color i'll change this to black all right now for the animated text i'm going to change this also to black but i want to make it a little bit more bold guys you know i want to make it like a voila you know i want to make it really kind of stand out there so for the weight i want to put it as bold and i think we can go ahead and do something like uppercase i'm sorry here we'll do poppins there we go there we go that's that's what works out so poppins bold so now you see how the price kind of pops out and pushes out at people and it just looks a little bit more engaging now this doesn't make any sense read more come on we're at shop we're at a shop ecommerce website this is not a blog so what we're going to do is we're going to edit this button so to edit the button click on the pencil and uh under style or first we'll go to content so we'll change the text so what do you want to say shop shop now right and then you can link them to the specific the shop page so maybe later this will be like uh your websites dot com slash shop so we can put the permalink later so we don't have the shop page yet but we will get there trust me i will not leave you guys hanging and for the icon we can add in an icon so let's say you want to add in that looks like the doctor disrespect icon doesn't it i think it does looks very close to it but let's say it's like a call us or something like that you know i don't know whatever you want to do there's there's an i'm sure there's a check mark here you can probably search check mark so you can insert that and now we have that little icon there which is really cool and the icon position you can have it before or after and then we have style so at this point you kind of know what the styles tab is the styles tab for every element it changes the color topography and also it adds text shadow and various other things the advanced tab it adds margin and padding and also different things like motion effects which we'll talk about i'll talk about that later that's way too much but for example if i want to add space you can add space if i want to add space to the other side we can add space to the other side et cetera so that's exactly what the advanced tab is so for this style we have normal and then we have hover so i want to change this i want to change the the text color to whites okay and i want the background to black there we go black it looks like there's a bug there right someone tell i'm going to fix that right so uh now that we've done that the hover i don't want it to be like that you know that doesn't look good in fact for the hover i don't even think that we need a hover so for the background color for hover i'll just leave it as black so what that means is that when i hover over it it's just going to stay the same and that's about it now we do have hover animation so we have grow shrink and you can kind of go through these and pulse grow and we have pop oh and then we have sync that's weird that's a really weird animation but you can go through these and uh see which one works out for you i will just leave it as grow for now and um yeah i mean that's pretty much it but for my websites i just left it as you know chopped now that's pretty much it and i just have a larger text so for the topography i'll make the text a little bigger and i will make this a bold and i'll also change this to poppins something like that so i mean it looks pretty similar so there are some probably a few changes i need to make but overall it's pretty much the same thing i did make the button a little bit smaller so let's go ahead and show you how to make the button a little smaller so i'll click on the the pencil tab and now you see we have padding so for the padding we have 45 to the right and 45 to the left so let's change this to 15. so you can see here how padding equals space there we go padding equals space remember that write that down padding equals space and then change this to 15 and then i'll click on updates and congratulations you guys now have you know you can of course make some changes to this but you guys now have a landing page that you can work off so there are some things that probably i might want to do i might want to make this text a little bigger but as you're building your website you can kind of go back and see how does this look girl does this look good does this look bad and don't worry guys i am an amazing guy so i will give you this full template a little bit later um as we go along but we'll talk about that and i'll show you how you can use that template a little bit later but let's keep going here let's keep going party people so we have this section we have women's section new arrivals and new men's products so this section what we can do is we can link people to specific product categories so for example let's say you have men's shirts you have new arrivals and then you have the woman section i'll be showing you how you can link these to each specific product category but first we need to create these uh sections so let's do that so i'll scroll down i'll open this again we'll scroll down and now let's just use the page builder let's let's kind of like i don't want to rely on templates 100 i kind of want to teach you a little bit like a strategy here so under new section we'll go to the three columns i will click on the elements tab i will grab the heading and there you go so we have a heading and now we can go ahead and click that again and you know this time i can probably grab the text editor and i'll do it one more time and then i'll grab the button the reason i grab them all at once is it kind of helps your eyes understand okay so this section woman section this is this and this is this it kind of helps you understand the structure of it so the first thing is i'll put this to the right and i'll put women's women's section and then i'm not going to link that because there's no reason to link it for the style i'll change this to black and topography we'll change this to bold or i'm sorry the pop-ins and then text shadow you know text shadow guys that's like you know if you want to have some different like style and different uh here you guys can probably see what this is so it just adds a little bit of stuff at the back and um i do like text shadow but not for this specific section so i'm just going to go back to default and um that section is pretty much done i do want to make it bold though however so for the um the weights i'll make it bold all right so i think that section is good and of course you can go through here and you know you guys can go through whatever you want you can underline it you know underlines cool but you know whatever you want to do and the next section i'll change this to something we'll uh we'll change this text that's way too much text i'll put like a check out the summers the summer deals right the summer deals and style now i know when you're building the website it looks really bad at first but you have to make the changes to make it look like good you know so uh don't panic when you're first building i think oh it looks terrible you really have to kind of mess around with it so change this to black and then for the topography we'll do poppins all right and um yeah i mean that's pretty much it check out the summer deals and maybe just make this bold right actually nah let's let's leave it as defaults you know let's leave it as default and now one thing i want to note is you know guys i'm a lazy guy i really am lazy so we've already made this button here right so what's the point of doing that all over again you know i'm a lazy guy so i'm going to go ahead and right click and click on duplicate this button i don't need it you know it's just it's ugly it's outdated didn't make the tryouts so we're gonna go ahead and oops oops oops right click and click on delete now i'm gonna take this button and just drag it and drop it and there we go and then for the alignments i'll put it to write so that's pretty much it now one thing also is that um you know it doesn't look like the other the other uh the other part of the website so i need a background image so i'll click on edit column style and then we have background type we can have gradients you know but gradients are really hard to carry throughout the website trust me i've i've been down that road it's it's hard to carry gradients so for the image i will select this beautiful girl and click on insert now i do want to kind of adjust this you know i want the image to be inside of this you know so we have these different options we have like the position you can center align this specific image you can put it wherever you want but for the actual size i want to do do cover so that means i want it inside you know i want people to see it and um you know you can change the format so when you're adding your own images you have to just do this trial and error you know just just kind of like see what works you know contain this contain work okay cover okay i want it to be to the top left see there yeah top left bottom left you know just see what works out so the position is positioning the image itself and um you know it just takes time to just kind of find out what works for your websites uh center left sometimes it doesn't really even move it that well so something like that you guys get the idea now i need to change this to something like uh whites because this just doesn't really look good so let's change it back to whites and then this one change it back to whites and there you go so one thing also is i want to have this woman's at the top and section at the bottom on this text so i'll show you all a quick trick on how to achieve this so anytime you want the text to go on the next line you can type in this brackets br and then n brackets and now we have the this section on the bottom and i'll make this a little bigger you know it's too small so under topography i'll make this a little bigger something like that right there and that looks actually a lot better right so also for the shop now one thing too is i want to add that red hover so remember how to do that so just click on the button style hover background color and just make it like red you know there you go so now we're kind of carrying that red a little bit more so one thing also is i want to add just a little bit more space you know i think it's just it's too close to the wall right there see that so under the um i'll click on the the edit column and under the advanced section we can just increase this padding a little more so i want like maybe 30 15 30 and 15. just to kind of add a little bit more space so it's not so close to it now guys remember i'm a lazy guy you know i'm very lazy so i don't want to do this all over again that's a lot of work we just spent you know a few minutes doing that so let's duplicate this section so i'm going to right click this column and duplicate and duplicate and this section i will delete it and i will delete this and there you go uh one thing too is that i want to stretch this you know this white space sucks you know it sucks so let's add some space let's stretch it you know let's let's stretch all this stuff so edit section the content width i want that full width so now i'm saying i want it to be stretched all the way across and voila now we have this beautiful section which looks very similar to this section you know just probably some more padding we could have added but ultimately it's pretty much the same thing so there's a lot of women here you know we need to we need to add some men you know it's too much woman you know so let's add in some men so i'll click on this little edit column style and under the image i'll put the man all right and uh for this section i will you know we have to adjust it so i'll put something like a new arrivals right new arrivals and we can center this and we can also center this as well and we can also center this as well and maybe for each section instead of shop now you can put something like shop arrivals or you know shop women shop men you can you know go change the button and you know whatever works out for you and your your little website you can you can do that now i chose to put the text in the middle because the right is just it's too much you know and also i don't think this really looks good now there's a few ways on how we can change this we can either change the text to black or we can add in an overlay so let's add in an overlay why the hell you know what the hell not let's do that let's get crazy so um i'll go ahead and click on the edit column and under the background overlay we can just add in like a hint of black just a hint just to take away from all the white you know we need to add just a little bit so the let's see here background type and under the color we can add in sort of like a hint like that you know just a hint of black you know something just to take away from the actual color you know being there so you can you know change this to any color to kind of emphasize the text or if you want you can go ahead and just you know uh add in black text it's really up to you at that point it's your website but i'm just giving you a strategy on how you can do that so uh i'll go ahead and change this to black all right it's black and then also we'll do this as black just to kind of you know keep it keep it consistent and um the image we might need to put this in the middle um or you can adjust the image wherever you want so remember to adjust the image we'll click on that and for the actual um background we can have the position you know center left default center center and you get the idea so you can kind of put it anywhere you want i'll just leave it uh you know for tall purposes i'll just leave it there for now it's just it looks standard you know it looks it looks okay yeah the text is in the front but don't worry i'll give you guys i'll give you guys the whole template a little bit later with every single detail now also this section i want to push everything to the left side you know it's just it's too to the right so left and then style left and also left how beautiful is that your first ecommerce website is going to look a hell of a lot better than mine that's for sure so uh let's see button contents left and also for the background image we will add in this gentleman right here and uh i think that looks good you know you gotta change that to something like men's you know men's section right men's men's section and then you can go ahead and change it but ultimately guys it's a really clever way to uh wait wait wait wait wait that what what is that daryl what is that that is ugly make sure you never do what i just did so ultimately it's just a clean way to present your products you can go ahead and mix and match and kind of see what works out for your websites but i think that you guys are getting the points so next let's go ahead and add in some beautiful icons so let's go and add in some image boxes so i will click on add new section and we're going to add four columns this time and we're going to do the same thing we're just going to make one and then we're just going to duplicate it across to make things a lot easier for us because we are lazy and we want to get things done as fast as we can because everyone in 2020 has a very small attention span because of social media but anyways let's go ahead and scroll down and we will find image box and i'll drag that in there so for the image i've given you guys the images and i add i have these little things a little cute truck for you guys and uh this might be something to encourage purchases something to encourage um confidence and people buying your product so free shipping that is always that is always something that people like to see free shipping you know and uh we want to be honest so orders over what 200 bucks we'll give you guys free shipping whatever you want to do we'll talk more about shipping and uh payment methods and payment gateways and all that stuff towards the end of the video once you guys are ecommerce pros so for the actual um the image position we can have it as left right or top but i think this is good you know i think this is standard i think that this is suitable but we need to change oh yeah also for the image size we can change it but that's up to you for the style we can have different spacing or you can leave it blank but i'll just add in just like i don't know three pixels for the width we can go and mess around with that but that makes things a little crazy we can also add a hover animation but i think that's just uh you know the less javascript guys the faster your website will be so don't go too crazy with the animation because there's more javascript javascript for noobs is essentially anything that makes your website flashy you know like that is pretty much it so let's go to content and what we'll do is we will change uh let's see yeah i think that looks good right there right but we'll go ahead and change the color so that color is really ugly and we want to keep it consistent right so we have poppins right poppins and i want that to be bold and then we have the orders over so next we have the color and we have that section and um yeah i think uh the topography i think that looks pretty good we can go ahead and change the line height to make it look a little bit closer you know just a little closer to that because it's too far on defaults yeah default is like right there so we'll leave it like that i think that looks really really uh really sharp and uh again remember guys we are lazy so i will right click and i will duplicate the column duplicate and duplicate and then i'll delete these empty boxes because we don't need it so we'll go ahead and delete all those bad boys now one thing to note just by looking at this is this section obviously needs a lot of space so you can add padding to the top and also to the bottom so now you kind of understand where padding comes in so remember how to add padding i will click on this section remember these little i guess you want to say light blue whatever these control the actual entire row so i want to make this full width and under the advanced section i want to add in like maybe i don't know let's try 50 you know 50 and then 50. so i think that's suitable you know i actually think the full rope doesn't the full width doesn't work so let's go back and take off the full width it doesn't work out it's just it's too stretched and it doesn't look good so we can just do boxed i think boxes i think that looks a lot better right now on my demo website i did this little quick strategy of i just added borders to the right side of them just to add some design because it's too much text so i'll show you how to add borders to pretty much anywhere that you want so first i will click on the edit column under the style we have border and on the right side you see how it says right i want to add in maybe like two pixels of border and the border type i want to be solid now it gives us options to design it we can have a different color so i'll just do like a gray color and um you know that's pretty much it so you guys can see now how we have that border it's hard to see because of the actual line i want the border to be only on the right side so for the width i will type in two and change it to gray now you can't see it really well but if you actually click away you can see the line now so you see how there's a border so that's just a way on how you can add you know just some sort of decor to your website you know the small things are the big things so let's add it again to this one so again style we have the border and we have the border type as solid and i want to click this and add it to the right now remember you can add it to the left you can add it also to the top so you see how there's border everywhere you can do that and maybe you can make some abstract design or something like that so that's just uh that's basically what borders are and um you know they come in handy and you don't have to use them way they give it to you you can you know the sky's the limit here is if you want to get creative and you want to you know you want to drink and then make your website and who knows what you'll make then that's what that's what happens you know like that's how uh like newton was like isaac newton found gravity an apple hit his head right so um let's go to this one go to style and for the border again we will just do it to solid and then we will do to the right and there we go great so that looks a lot cleaner it just adds a lot of design and um see i think overall it's just nice to have so you might want to go to each of these and change the image and then obviously you will add in whatever you want remember you you can add in you know quick payment you know i just use these for tall purposes but of course you can add in any text you want and use any image that you want next let's add in this section right here that says new arrival so you might have noticed earlier how we had this divider and how we can add in text so i want to carry the design throughout the website you know i don't want it to just be some random bar i kind of want to use that to kind of design my and you know my design and add the core to my whole website so what i'll do is i will go ahead and add a new section now i just want one row that's it one row and i will go ahead and click on the elements tab and we will find the divider module so it is that i pass it yep divider module and what i'll do is for the style we will do the the slashes right the slasher should be the name the slasher and then for the text i will put in new arrivals now of course you can add in anything you want i'm just you know i'm just giving you guys some ideas you know stuff like that so for the weights you can of course change the weight of this and you can make this look however you want however all i really want to design here is the um actually i want to go ahead and reduce the amount of amount we have right here something like that is better i think i don't know i'm just picky you can change the amount of lines you want for the text i want to make this a little bigger and we need to change this to our fabulous poppins font so we have bold and we have the size so you can change it to whatever you want i'll change it to 50 and i want this to be black so ultimately what this does is that it just adds some design you know as the core and it also introduces our new section so it's just something to just kind of you know look good and just looks clean now the next thing we're going to do is finally we are going to add products see i told you very easy right so now that you know a little bit about the page builder let's go ahead and move on and make some products that you can sell on your website so let me explain the difference between a simple product and a variable product a simple product is a product with no selection there is only the add to cart button there are no sizes or styles available this is an example of a simple product next we have a variable product a variable product allows you to have multiple variables such as size or color for your product for example you might be selling a t-shirt that t-shirt might come in specific colors or sizes so that is an example of why you'd want to have a variable products now in this video we're going to be creating a simple product and also a variable product so let's go ahead now and install a free plugin that will allow us to add products to our websites so let's go to my website dashboard and we will go to plugins and click on add new so for the search plugins in fact it's probably on the front page we're going to install woocommerce woocommerce woocommerce it just has it's it's like the best it's like the best ecommerce plugin you can get out there it's amazing so this is it woocommerce and i will click on install now woocommerce personally is better than shopify it's better than those paid websites because you just have so much more flexibility and control over your website with woocommerce than you do with those other platforms alright so now i will click on activates and it should bring you to some sort of wizard and i'll guide you through on all the settings for the wizard so it's saying get your store set up quickly with our new improved experience now i think this is the latest version of woocommerce so i'm going to click on yes please now one thing i want to note is that if this changes in the future the video is not outdated it's just they change the interface a lot sometimes so just work with it you know see what you can do so i will click on yes please all right so tell us more about your store so i'll go ahead and put in my home address now this doesn't have to be your business address it can be your personal address or just some sort of po box if you want to do that so i will click on continue now they're just asking you if they want to if they can collect the usage tracking information to improve woocommerce sure why not it helps them know about errors and all that stuff so what industry are you in well for this specific video i am in the fashion apparel however you can select anything else you want and if it's not listed here you can click on other oh look at that they have weed marijuana as a as a category i guess that's really famous click on continue i don't smoke weed i i think everyone used to like back in like the day like high school and stuff and college but yeah i haven't i don't so we have physical products and also downloads so i'm going to leave it as downloads and physical products these are actual plugins that you need and i actually have separate tutorials on these plugins but you don't need any of these because these all cost a lot of money and they're very expensive but physical products and downloadable products are for free so i will click on continue so how many products do you plan to display i don't know one to ten are you selling anywhere else no no i'm not all right so i tried to install the plugins and it just didn't work so the other plugin that we actually need is the actual jetpack which will give us the automated sales tax that's the only one we'll need and the other ones we don't need at all so what i'll do is i'll click on continue without installing and for those of you just click on continue and don't don't add the check mark because we don't need those plugins there are a lot of sales gimmicks like google adwords plugins and things we just don't need for our ecommerce websites now i have the astra theme activated so i will click on continue with my active theme now this is what i'm talking about these two plugins will really help your store so this will give you automated sales tax it'll also help you with shipping and it actually is pretty useful so click on yes please okay so it should take you to this page right here now what we're going to do is we're going to make a free jetpack account and then it's going to bring us back to our website now the reason why we're making an account is because this will give us automated shipping and taxes so we don't have to calculate the shipping and the sales tax it'll all be integrated inside of our ecommerce website now normally shopify charges you 300 a month for this feature and woocommerce will give it to you for free so go ahead and make an account and i will meet you on the very next page alright so i will click on create your account so now it's just authorizing our connection all right so once it's done it'll bring you back to your wordpress website and we now are in the back of our dashboard so i will click on continue so this is your little woocommerce dashboard you can see that it's showing you the sales you can see the stats there's also notices so they'll give you some notices about something that might you might want to know about and on the right side they have finished set up by saying add products setting up payments set up tax and set up shipping however we are going to do all this at the end of the video because setting up payment gateways and everything can take a little while so for now we're just going to create a simple product and also a variable product so on the left side you'll see products click on add new and we're going to create our first product so first we're going to create a simple product now a simple product has no options it's just a product with no options you just add it to the cart and that's the end of it so i'm going to type in something like women's shirt next we have this description here so let me go ahead and go to my demo website and briefly show you where everything will be displayed so you will know you know you'll have a little bit of a better understanding so this is an example of a simple product we have the title we have the description of the product we have the category it's in we have the price people can add it to the cart and they can also share it to their social network they are in or wherever they want to share it also at the bottom we can add some description about the product like down here you might want to add something like uh polyester or it's uh made in a certain country or to a certain weight or whatever details you want to put about your product you can put down here so whatever you put down here it's going to be right here so let's say for example i want to put in made in usa 100 cotton and uh i don't know just details that people don't really need to see that much of you could put something like i don't know like nine ounces right whatever you want to do so next let's scroll down and we have simple product so we have different products and for this video we're just going to be focusing on simple and also variable now i do have another video that goes through every single option of the woocommerce settings but i'll leave that video in the description below where we talk about group products and also affiliate products but let's just keep it simple so first we have a simple product now how much does your product cost well let's say you're selling um whatever and i'm selling just a woman's shirt so my product cost a hundred dollars now is your product virtual or downloadable my product is not so i'm just going to leave it as uh you know as i'm not going to check those boxes now do you want to schedule a sale for your product if you do you can put a sale price of fifty dollars now when you want the sale to start well you can click on schedule and you can actually set the specific dates of when you want your sale to start and when you want it to end so for example i want this to start on august 27th and i want it to end on the 31st and then once that sale is over it'll go back to its default price of 100 inventory do you have a sku number if you do you would put it here do you want to manage stock now what this does is this is sort of a sales tactic this is going to tell people how much inventory you have so if i put 50 it's going to tell people that i only have 50 available do you have back orders so that means if you don't have it in stock you can still allow people to purchase it but you don't have it in stock and it might take longer for you to ship it to them you can you know also allow back orders but notify the customer but i'm going to put do not allow and if i put do not allow that means when it's sold out it will no longer be available on my shop so that's something you might want to have or add for low stock threshold this is when you want to be notified of when you start running low on the product so it's like all right you know i only have uh after five or when you only have five left you're gonna get an email from your website saying hey man you're running low on this product uh what do you want to do you know and then you can work it out from there shipping you can put the weight and the dimensions of your product here linked products we have upsells and we also have cross-sell so you're basically just recommending other products when they're viewing their current products a cross-sell is when they actually add it to the cart and they're going on checkout and then they want to go see those other products so just remember that an upsell is recommending products that when people are currently looking at a product it'll recommend other products and a cross-sell is recommending products when they are checking out so once you have more products you can search for those products and add them there attributes we're not going to use this yet we're going to use this next and advanced so if someone purchases your products do you want to give them a note like high five hi wait hi five and you can also enable reviews so those are pretty much all the options for the basic product now this is where you might want to add some real description about the product so the product short description so this is this information right here so i can go ahead and copy this and paste it there next let's add in a image of the product so we have product image and let's click on set product image so whatever image of the product that you have or you want to sell you can put it right here so i have a women's product so i'm just going to grab this shirt right now let's say you have different images of the product like different angles or whatever you can add it in the product gallery so add product gallery images and scroll down and simply go ahead and just select different you know different angles of its you know stuff like that now um we have the astro settings but uh we'll go ahead and leave that standard for now and then we also have categories now this is pretty important we want to click on add a new category and i will type in women's women's is that right women's with the a-n-s right or yeah i think so so we have a women's category and i think we we're all ready to rock and roll so let's click on publish now and let's just see where we're at with our product okay so i created a product and now let's click on view products so here we go we got a beautiful product we have our products we have the other images so people can uh go ahead and scroll through them they can even click on the magnifying glass and just you know get better get better uh perceptions or better views of it now you can edit this product a little bit with the theme so let's say for example i want this full width you know see how we have the sidebar here i'll click on edit product and we can actually make this full width so whenever you want to adjust it you got to use the astra settings so for the astro settings i don't want the sidebar so i'm going to put no sidebar and then i'll go back up here and click on updates so let's click on view product and see what that did to our product so if you like something like this then we can go ahead and do that however later on in the video we're going to use the theme builder which allows us to create a custom product page so that you can have full control over it and i'll teach you how to make your own product pages so you can design it any which way you want but for starters we're just using the default theme settings so this is what your product page would look like by default so that's why we purchased elementor pro but uh anyway so we have the title of the product we have the price we have the description we have just some other stuff you can see availability 50 in stock we have category of women's if i scroll down you'll see the description made in usa 100 cotton and 9 ounces and then there's also reviews you can enable those or disable those at any time also if people are shopping on your website we added categories so when they click on the categories it's going to display all of the products that you put in that specific category right here and i know this looks bland and boring and don't worry we'll make it look really good and really amazing in just a little bit so that's an example of how you can create a simple product so next let's create a variable product i'll do something like men's variable men's variable shirts and uh here i'll just do like a made in let's give a country a shout out you know we'll do i don't know made in uh vietnam and ghana i wanna do that made in vietnam and gone i don't know just giving shout outs to vietnam and ghana and i'll i'll give you guys i'll give another country shout out a little bit later so people people like when i do that and then i'll do like this is six ounces oh actually no we got india i got a lot of a lot of people that watch me in india so you know and india all right so this has been in vietnam ghana and india okay six ounces and uh leave it at that next we have the product data and we're going to change this to a variable product all right now this can be a little little hard but don't worry so the first thing that we'll do since we've already done this and i've showed you all is you're going to click on attributes all right so i'm going to click on add so what is an attribute well it's a characteristic it's basically a certain feature so i'm going to put here size so what size do you have well i have small now the next button it's above the enter sign so it's above the enter sign it looks like a bracket you need to hold shift and press the button above the enter sign and it's a bracket like that so i have small and i also have large that's all i have i have no medium you can add medium you can have as many variables as you want in fact maybe i should add in three just because that's a little bit a little bit more a little bit more uh you know reasonable and then again between large and medium but the bracket sign so now we have small medium and large all right so i will click on use for all variations and save attributes okay so what other variations do you have maybe you have something like color right maybe you have different colors of the same product so under attributes i will click on add and now we'll do color so i will select white and again the bracket symbol and then i'll put blue so whatever colors that you have you can add it here and i will put use for all variation and click on save attributes right so once we've created our attributes let's go ahead now and apply them to the product so under variations we will click on add variation create variations from all attributes and then we'll click on go they're saying are you sure you want to do this are you sure you want to combine all of them yes yes i'm sure yes i am okay so six variations were added okay let's do that so we have a small white a small blue medium white medium blue and a large white and a large blue so let's first click on the first one i think they moved it over here oh yeah they did then the update so we have uploaded an image so okay so what does the small white one look like well let's upload it so i'm gonna click on upload an image so i'll scroll down and i'll just grab something that resembles the product so a white shirt you know there we go now how much does this cost now this is required guys so you need to put the price for every single variation or it will not be displayed so how much does the white small shirt cost 50 bucks all right 50 bucks that sounds like sounds about right now under this little arrow i will close it and go to the next one the small blue what does the small blue look like i'll put this one and uh i guess the small blue i don't know cost 50 bucks 50 bucks and the next one and so on and so forth are you getting it are you getting it guys you know you're doing you're doing it peter so uh 50 bucks and then uh i'll go ahead and close that and medium blue so this is probably the most tedious thing you'll ever do on an ecommerce website is create variable products i used to create variable products for stores with like five to 500 to a thousand products and it was hell and half the time i just hired someone from fiverr or some sort of website to help me with this because it was too much you know it was too much it was too time consuming for me but a silly me i didn't put a price so 50 make sure i put the price for all those 50 and here we go 50 there we go yeah you got to put the price for every one or the product will not be displayed so that's just how it goes but you know what for the large blue the large boot cost a thousand dollars you know that's it maybe maybe we'll get a sucker you know maybe some sucker will come in and buy one of our products for a thousand bucks now i'm gonna go here and just grab some demo text our dummy text for our product so we'll go ahead and grab this and uh i'll just paste that in paste that bad boy in there all right and set the product image so i'll just leave it as uh i'll just leave it as white you know and uh yeah that's pretty much it so one thing to note here is that this option right here is saying okay what is the default you want to set it on do you want to set it as the white or the blue so i want to set it as the white medium as default so if you want it as the blue medium you would select blue medium right so that's that and uh we don't really need to add any product gallery images because people can actually see the images as they check the different sizes so i will add this to the men's men's you know what guys i think it's women's with the e you know so let me know in the comments let me know in the comments if i mess up there you know i i kind of snooze through english class so now that we have created this let's click on publish and let's let's see what happens here let's let's hope let's hope for the best and here we go so we have size medium white is by default so uh small small blue there we go it changes it's 50 bucks remember now remember we're looking for that sucker so we're gonna have large blue cost a thousand see that so there you go so this is an example of a variable product now you can add as many variables as you want you can knock yourself out you can go crazy you can have 100 variables uh whatever you want to do and remember whenever you want to change this uh this product you can actually have it full width now the reason why i chose the astro theme is because the astra theme gives you this option so i don't want a sidebar a lot of other themes don't give you any option other themes might give you more options but i think for the most of us you know this is something just basic and you know normal we're not trying to make the next victoria's secrets like this is something that's suitable for everybody and if i click on the men's it'll then display any category or any product in the men's category now you've noticed it says 50 to 1 000 and the reason why it says that is because remember it's going to display the cheapest price to the highest price and since we have a product that costs a thousand dollars it's going to list that so just keep that in mind and they can click on select options and then they can go select the variable that they want for their specific product so that is basically how you create a variable product so we now know how to create products for our websites so let's now add it to our home page and then i'll show you after we make the home page how to add the shop page to our menu and have a whole shop page and make it look amazing so first i'll click on home and i'll scroll down and i'm going to go ahead and turn on the elementor page builder okay and we'll go ahead and scroll down now we're going to go to search widget and type in products so we have a few different products that we can add but the one i selected is this one here so products so take this one with little shopping carts on it and we're going to put this in the little box right here all right awesome now we have different rows so you can choose to have you know how many rows do you want or how many columns how many rows so for example if you want to make it like a you know like a high-end kind of style you can have less rows you might need to have really hd beautiful images for that just so just keep that in mind but i'll just do something like three three columns and maybe just like two rows so what that means is let's say you have 30 products it's only going to show two rows and that's it doesn't matter how many products you have so and then of course you can go ahead and mess around with this you can style this however you want so you can change the column gap you can change the row gap you can change the alignments you can have a border for the image so there's a lot of different settings that you can have for this and you can kind of go ahead and knock yourself out so i think we want to keep it consistent here so we want to keep it as poppins right poppin's bold poppins bold and also for the star color we'll go ahead and leave those as black stars right and then empty empty star color would be black as well and then we have the price so i'll leave that to black and topography i'll also leave that to pop-ins and then the button we can always design the button so text color do i say that weird i know people always told me i say it weird i think i think i say pretty pretty normal background color change to black and topography you know it by now you guys know it you guys are pros poppins so now it looks a lot better it kind of matches the style of the core of our website and that's why we're using elementor because if we use the default settings we really can't edit a lot we can't change stuff so um yeah and then of course you can change the if you have a sale for the product there'll be like a little like you know this is on sale right now and then you can go ahead and design the sales badge when you have certain sales so i just note that this style section will design your product so go through all these options i'm not going to go through each and every one of them but go through the options have a good time and then you can design your products and have a jolly old time next let's talk about query so let's say for example i only want specific products on the home page right so let's say i change this to new women's arrivals i don't really want the men's products on this page right so so to add in a category of for example all different women's products or only all of your men's products what you'll do is under source you'll click on latest products now under include by you're going to type in term you'll select term and then you'll select the category so let's say for example i only want the woman's products being displayed on the on the front page so i will type in women's and see how it says product category women's now all of the women's products will be displayed here automatically so whenever you create a product it's going to push it on the front page right here so that's just a quick way on how to add product categories which i think a lot of people do and i think that's like kind of standard in e-commerce world so i will click on update and that's it for the products so now we know how to add products onto pretty much any part of our website all right so now that you guys kind of get a basic understanding of how to make your website and how to add products let's now speed up this tutorial so you guys can go to my website darrellwilson.com and you guys can now download this whole entire layout so what you'll do is you'll just simply go over here to add to cart now this link is in the description of this video this is a free layout so it's not going to cost you anything you will need elementor pro to use this layout but you guys all already have elementor pro so i'll click on view cart and then you'll just go to proceed to checkout uh this doesn't cost you anything i made this just because it helps speed these tutorials up and it also gives you a beautiful website so click on place order okay and once you've done that you'll see the elementor ecommerce template zip you can go ahead and click on elementor ecommerce zip and it's going to download it onto your computer so you'll click on ok and your file should look something like a zip file so it should say elementor ecommerce template dot zip so let me show you all how you can now import templates and also export templates on your website and this will make things a lot faster when you're actually building websites and you want to transfer it to another website so what i'll do is i'll go ahead and make this a little smaller now i have the zip file right here so i opened it and now i have this specific folder so i'll go ahead and open this i'll double click and you're going to see json files so you're going to see the home page the about us page the contact page the my cart the checkout and also my account so i made all these pages specifically for you guys so we have this little folder right here so go ahead and click on add a templates now we'll click on my templates so it's saying here that we don't have any templates saved so we have no templates so what we can do is we can import the templates so click on import templates now we can also drag and drop those files so you see where it says the actual home page we can just go ahead and drag and drop it and uh that's it it's now going to import the home page for us okay so here it is the home page ecommerce elementor so i'm going to click on insert now and i'm going to say yes so i want to override any of the settings that are restricting the template from being loaded all right it's cool so you notice i'll make this smaller and now we have the template fully loaded on the websites amazing amazing so now we don't have to do everything from scratch and if you're something that you didn't want or you want to change you can just go ahead and change it at any time so what i'm going to do now is i'm going to say all right well you know what i don't need this section no more you know so i'm going to delete it i know all that hard work i'm so sorry guys we're going to have to delete all of our work so what i'm going to do now is i'm just gonna use uh my templates and i'm going to rearrange everything you know to you know to what i like so for new arrivals i'll put it there and i will delete this one because i already have it and there you go so now we have the product there we have a little banner section and i might need to change this you know this is what what is wrong with me why do i do that guys you know don't don't dislike the video all right it's just it's an accident i swear so i have men search sale and then also we can go ahead and put more products so what i'll do is under this section i will i can duplicate it right so right click duplicate now i want to take this section and i want to put it under in sale products like that and then this section i'll delete it and then there you go so now we have sale products and then you can go ahead and change the category of this at any time so there are some you know modules that we haven't covered like this one right here so this is the countdown module so if you go over here and you type in countdown you will see that we have the countdown so what i did essentially was i just kind of used this to kind of add scarcity saying hey guys this is a a quick sale you got it you got to buy it now and this will actually encourage people to purchase your product now one thing i want to talk about is the form so we didn't cover the form but the form is essentially a module so if you go over here into widgets and type in form you can go ahead and just drag and drop this and you can add a specific form now i've already pre-created this so that it actually integrates really well with mailchimp i've made all the settings for you guys so all you need to do is add in your api key for mailchimp and you can now start accepting emails on this little newsletter now if you don't if you're not familiar with mailchimp whatsoever you can make a free account and i do have a full tutorial on mailchimp with a lot of views i will be updating it but it's a very standard a very good tutorial on mailchimp you can see it has 350 around 350 000 views a lot of likes and engagements so it is a very in-depth tutorial on mailchimp so for those of you who already have mailchimp you can just go to your api section just copy the api key and this will automatically connect your website with mailchimp so i'll go back over here and go to mailchimp and go to api key so under mailchimp you will see api key just go to custom and you can just go ahead and paste your api key it will then go ahead and find your audience and it'll select the packages so or select whatever audience that you have so yeah that's a quick way on how you can integrate mailchimp to your website so you can start accepting emails right away and again if you guys don't have mailchimp don't worry mailchimp is a free service for your first 2000 subscribers it doesn't cost you anything at all and all you need to do is just copy and paste the api key and now you have your website integrated with mailchimp so congratulations so i'm not really going to go through the whole options of mailchimp in this form because that can take a long time but i just note that i have a tutorial on it i'll leave that in the description below of this video so i will click on updates so now that we actually have this template you can then go ahead and modify whatever you want so you can go ahead and modify this section you can change it what you want you can you know you can go ahead and customize different parts of the website and just change it to fit your criteria you know right here for example maybe you can add an image of a baby you're selling baby products or you can have a dog product or you can add in whatever you want so that's why i made this these templates specifically for you guys to kind of help you design your website to fit your needs so now that we have the home page fully created let's add the shop page and the cart and the checkout to the menu so what i'll do is make sure that this is on update make sure you update your progress guys i hate it when people uh you don't update it and then like your website's gone and everyone's like oh my god daryl my website's gone and i'm like well you got to click on updates so uh let's go ahead and add the items to the menu so let's go to our dashboard and we'll go to appearance and go to menus now when you installed woocommerce it automatically created the shop the cart the checkout in my accounts so you see here where it says pages let's go ahead and add these bad boys on the menu all right so we have the shop so i'll put the shop right here and uh we can adjust this and we can also have drop downs like for example i don't think we need to have a menu for cart and checkout so we can make it as a sub menu or a drop down menu so i'll put that right yeah we'll put the about towards the end you know the shop is always like number one you know we want to put the shop as close as possible so i'll click on save also if you guys want to add product categories to your menu on the left side we have product categories so remember how we made products for men's and women's if someone were to click on this it'll take them to the woman's category woman's product category so that's actually really useful so i'll just put that as an example and click on save menu and then we'll go back to visit sites okay so we have the home the shop we have the my accounts and we have the checkout and the cart now the great part about woocommerce is that it automatically creates the account for them and it creates the the checkout experience for them and it also creates the cart so when they add something to the cart it's going to show that there's an item in their cart let's click on the women's and now we have all of the products that are available in the women's section pretty cool pretty amazing right so um yeah our website is coming along pretty well so next let's go ahead and use the templates and finish the rest of the website before we get into the technical parts so let's finish the about and also the contact us page was going to be really easy because we already have templates for them because i made them for you guys i'm amazing right so right here you'll click on edit page when you click on the about so click on edit page you know guys i'm not i'm not on a script i i just know this stuff really well it's it's pretty i maybe i need a hobby or something so uh for the content layouts remember full width stretched disable the title and we can click on edit with elementor now so we want to use the templates for the about us page right here folder my templates upload select file or we can go ahead and drag and drop it whatever you want to do it's it's they're both it's both way on how to do it and we have the elementor about us page dot json open so now it's importing our uh our uh about us page okay so we have the about us page and we can click on insert all right cool let's take a look at everything make sure it's all uh it's all good so we have our team everything looks good and of course you can go ahead and edit any part of the websites to fit your needs so pretty cool all right so we have now completed our website now there are some options in elementor pro that you've probably seen that i didn't talk about now i've already created a full video on elementor pro that goes through every single option and i didn't want to include it in this video because i've already done another one and i didn't want to make this video like like five hours long so i'll leave that video in the description below so in this next section i'm gonna talk to you about the theme customizer so the theme customizer controls parts of your website that the page builder normally does not i'm also going to be talking about some plugins that you might want to have on your wordpress website so let's go to that section alright so these are some options on the left side so we have the header we have the breadcrumb blog sidebar and other various options now with wordpress it's kind of hard to keep up to date with a lot of these themes because a lot of these themes they tend to add features they tend to change things so the themes i like personally is astra and also niv or neve it's also a really good theme so if you guys are using astra you don't like the features that they have you can always switch to something like neve or another theme and see what they offer so for everything usually you'll see you have the option to click on the header and let's click on the site identity so for example if you want to go ahead and upload your logo to your website you can just click on select logo and then you can go ahead and upload your logo so i did use this specific um logo right here just for total purposes where i want to go ahead and show the wordpress like that's crop the image and then you'll notice at the top left we have the logo and it's huge so let's go ahead and reduce the logo width to something a lot smaller like that right there we go and then we can go ahead and even add a site icon so a site icon is the icon that displays at the top so when you're using google chrome the site icon will actually like be displayed on the browser tab so you can go ahead and add in a site icon so for example um you can just add this in like the big w or something like that like let's see okay like that yeah so it's a little bit too small but you guys get it so you see here on the google chrome how the w appears so this image will display when people visit your website so i'll click on crop image so let's keep scrolling down here and now we have the site title so we have my website but i don't really need that because we already have the logo so i'll go ahead and say you know what i don't really want to display the site title i don't need it also if you guys need a logo you guys can go to fiverr.com i'll leave a link below to fiverr it's a great website that offers a lot of very services for really really cheap so uh for example you'll go here and just do um oh let me go ahead and just go to logo design and you'll get a lot of freelancers that'll do really nice work for really cheap like you can get a logo as cheap as five dollars and i personally use this website and my logo darrellwilson.com i got it from this website i got it for around 10 bucks back in the day you can go ahead and search by budgets so let's just say you're on a budget and you want to get a professional logo that looks really nice you can get it from one of these freelancers and you can see some of their work so you can get like an idea of some of the designs that they offer but if you do need a logo i highly recommend going to fiverr.com they offer tons of services like photoshop and stuff that i personally use today so it is a very helpful resource when you're building websites so now we have some other options with the the site identity but i think that's pretty much it we uploaded our logo you can always change the logo with as well uh primary header you can have different layouts so you can have the actual menu in the middle you can change it to the right side like that if you want to do that and then you can go ahead and change the width you can spread it all the way across but i think most of us just use something like the standard layouts um you can change the the color of the menu of the background so you don't have to have it as a white color you can change it to pretty much anything that you want you can also add space so if you want to add more space above it or below it you can add like a border padding which will allow more space you can just you know you can go through some of these options and take a look at them and just see what works out for you and your website so you can also have transparent headers so if you want to have transparent headers which is basically um you know like just a transparent uh menu you can do that as well now you might need to kind of adjust it for a transparent menu so maybe right here i'll probably get rid of this black bar and then it'll just be a transparent menu with nothing there so you can have that on your websites and you can also activate it for specific pages which is really cool but i don't really want a transparent menu i think that's um you know just something that i'm interested in we have the colors in the background so you can change the background you can change the site title the menu also the submenu so that means when someone hovers over that and there's a sub menu you can change the font and the color for pretty much every part of the header of your website so you do have full control over your header with the astra theme now again there are a lot of other themes that you can choose just for this video i find that most beginners like astra because it's fast it's easy and it just you know it's just really simple to get a website started with astro also we have the footer so if i scroll to the bottom and i click on footer you'll see that we can have footer widgets and here you'll see that i have four little columns so we have footer widget one two three and four and if you want to add a cool little border you can do that so for example if you want to add like a little red border you can do that you can change the background and also you can have the different contents when people hover over it you can change the link color so that means when someone hovers over this and their cursor cursors over it we can change that to have a specific color when they're hovering their cursor over a link so there's just a lot of various options that you can go and check out and um if you want to you can go ahead and and go crazy and mess around with all these settings so let's go back and let's say i want to apply a widget to footer area one so under footer widget one i will click on add a widgets and this could be something like a text widget you know just the text widgets just like about us and then like how our company got started and then you can just go ahead and have some demo contents you can just put in uh you know something that you want there to you know talk about your business if you want to do that i'll click on publish and that will save the progress then you can go over to footer widget 2 and you can add a widgets and then you can add in anything you want you can add in products you can add in product categories so if you want to add in a list of your products your products will be displayed in the footer section as well so whenever you upload a product you can see them here and you can upload specific products you can have different on sale products you can kind of you know get customizable with this and pretty much um you know add any kind of products that you want there and you can also have a certain amount of products to be listed there if you want to do that as well now there are some options over here that astra offers that are unique that some other themes don't offer so for the woocommerce we have the cart page i'm sorry the checkout page so with the checkout page uh what you can do for the checkout page is if you have a terms and conditions you can have people check that little box that says i agree to the terms and conditions you can also select a privacy policy page so let's quickly go ahead or i'll go ahead and quickly create a page a privacy policy page in terms of conditions and then i'll just go ahead and assign it just to give you an example of how that works so i'll just paste some demo text in there just saying these are the terms and conditions upon you know buying our products and their returns are this and if you want free shipping it's that so whatever rules that you have upon purchasing the product you can list them on the terms and conditions page and the same thing for the privacy policy you can just go ahead and add in a privacy policy about what we do with your information we won't sell it to third parties or we will sell to third parties or whatever you want to include in your privacy policy so now going back to the woocommerce and the checkout under the privacy policy i can set that page and also for the terms and conditions i can also set that page as well so that's just something that you might want to consider when you're making your website also you can have specific lines required or not required so do you need their phone number if you do need their phone number you can leave it as required if you don't really need it just put it as optional and maybe later you can add them to some sort of email marketing list or some i don't know telemarketing list and you can call them saying hey man i got a good offer for you or whatever you want to do with your ecommerce website so now i selected woocommerce and i selected the product catalog so with this you can kind of decide what you don't want to show and you can kind of customize this to your liking so for example for the shop columns you can have three columns if you want to do that you can have two columns you can decide to display specific information about the product so let's say for example you want to hide the ratings you don't want to show the ratings on your websites you can click on that and it will disable the ratings if you want to disable the categories you can click on that and you can also disable the category so this section right here has total control over the shop page so go ahead and go through some of these options on your own time and see what's good for you and your website so that is pretty much it for the theme customizer now the theme that we're using is free however it does have a pro version so if you want to upgrade to their pro version i'll leave a link below to purchase astro pro i do have an exclusive 10 discount off any of their plans so the pro version includes things like different page layouts different options for woocommerce site layouts custom layouts and more options on how to design the footer and also the header one big thing that i find that people the reason why people buy astra is because of their starter templates so they actually have a large amount of templates that you can use for free for e-commerce websites so over here i'll go to agency now these right here are a bunch of e-commerce websites that you can use so for example if you want like a t-shirt websites they have a one button click importer that will import the entire website onto your wordpress website and i find that's people probably buy astra pro specifically for that reason because they have a lot of templates and once you buy this once you get access to all these templates so it is a lot a lot of stuff that you get with the astro pro so i think that's why it's like the number one most popular theme is because it just offers so much as far as the pricing goes you do have a few options so they have an annual plan so this you'll pay every single year and you'll get the astra pro you'll get 20 of their starter templates but the mini agency bundle you get access to pretty much all other templates you also get access to all of the pro features and you can use this on unlimited websites also you can use the agency bundle which you get access to all of their plugins and all of their future plugins and you get premium supports you get access to a lot of their interesting plugins that they have so they have a lot of plugins that are actually really useful i haven't gone through all of them because there's so many so just keep that in mind also they have a lifetime plan so if you don't want to pay every single year which you some of us i gotta be honest some of us might not you can use the lifetime so the lifetime you can get the same thing so if you get like the hd bundle one time and you'll never have to pay for it again and you get access to all their future plugins and also access to all of their future templates so that's just something to consider if you want to upgrade to their pro version i find that templates are very helpful for beginners especially if you don't know design i mean you're going to have a team of designers constantly making you templates and they upload a lot you know they upload quite a bit so that's just something to consider if you're building your website but now that we've talked about the theme and the theme customizer and all those all those upsells that i was selling you on you don't have to get them you don't i'm just i'm just trying to be helpful here you know i'm just i'm just trying to be helpful like like the video you know let's now talk about uh some plug-in features and things that you might want to add to your website so if you want to add more functionality to your website like a facebook messenger button and also a translator there are various plugins that you can use that can actually give you more features on your website and a lot of these plugins are completely free like for example we have this translating plugin so if you want to translate your entire wordpress website there is a free plugin that you can use so if i click on chinese you can see the whole website translates to chinese now i do have a free tutorial on this and the plugin you can actually can download it for free it doesn't cost you anything now i'm just trying to give you more features and things that you can add to your website so i'm gonna change it back to english because obviously i can't read chinese there's other things too like a facebook button where you can go ahead and message your um you know your you can get messages with facebook also instagram feed so if you want to have instagram feeds on your website there are a lot of plugins that you can use with wordpress that give you these features so let me show you some of the plugins that i use and then you can use them on your website and remember these are all free so this was done for free this was done for free and this was done for free as well so i'll go back to the demo website and go to the dashboard next we'll go to plugins and add new now plugins are going to be your best friends you guys are going to love plugins just one word of advice don't install too many because it is a quick way on how it's to get your website to be very slow because the more plugins that you have the slower your websites will get unfortunately so for search plugins just type in something like instagram you know instagram feed and to be honest a lot of this is going to be trial and error on your part so you're just going to have to go through some of these plugins and just try them out guys it's there's i mean there's over 293 instagram plugins i i don't know which one's the best i usually go with which one has the best rating and the most active installs like this one right here the smash button social photo feed so let's try it i'll click on install now and we'll just simply try to add this to our wordpress websites so i'll click on activate so now it wants us to connect our instagram feed so i'll click on connect and instagram accounts and i have a business and a personal but i'm going to select personal for this one so i'll just do connect and i'll click on continue now it might ask you to verify your api it might ask you some other things i've already logged in with instagram before so it does recognize me so it's uh easy for me you know so now that i've done that there's other options like customize where you can go ahead and customize it you can add stuff to it now all these plugins always have a pro version because these developers they want to make money so that's just how it goes so that's just something to consider if you really really really want to upgrade to their pro version you can go ahead and purchase it from these developers so i will go ahead and under widgets i'll type in instagram feed and there it is so i'll scroll to the bottom maybe somewhere we can add this and here actually i'll just i think we can just drag it i think we just drag it'll work all right and then here i'll say follow us on instagram now when you're using these plugins sometimes it doesn't display when you're editing the page but after you apply it and update it and then close the window normally it will display all right so let's scroll down and see if our instagram feed displays and there we go so now you'll see that i have pictures for my instagram so i have my dog me i have chinese new year and also kobe bryant and then i have a video right here that i was hiking so i just posted my video of hiking so what you'll do is just go ahead and go and you know mess around with these plugins and seeing what you can add to your websites that's pretty much it for the the plugins and everything so now that you guys know a lot a bit about plugins and the theme customizer let's go ahead and move on to a little bit more of the advanced section like the theme builder all right guys so your website is pretty much done now in this next section we're going to talk about the elementor theme builder now this is something a little bit more advanced but it's pretty simple and i'll walk you through it the elementor theme builder allows you to have a custom shop page and also a custom product page using the page builder so instead of the theme actually designing your shop page and product page we can use the page builder to design it to help you match the the style and criteria of your current websites so at first it might be confusing but don't worry i'll walk you through how to do this so let's go back to the tutorial so let me explain the theme builder everything for wordpress has a preset style for your shop page and your blog and other various parts of your website you cannot edit these normally and these are pre-built by the theme that's why there are so many different type of wordpress themes however the elementor theme builder allows you to build each page with the builder from scratch regardless of the theme settings basically you can completely build any page from the ground up overriding the theme settings just in case you want to fully customize every part of the website with no restrictions i find many people tend to do this because they want to match the color scheme and the design of the website so it all matches up in the end all right party people in this next section i'm going to show you all how to use the elementor theme builder which will make your website look a lot nicer than it normally comes so for example we have this menu now with a theme bowler we can have a custom menu that we can fully design making it look a lot nicer also this is the base version of the shop so without the theme builder this is your current shop you can't design it you can't customize it so we're going to turn it into something like this where we have this really nice banner we have this really nice sidebar and we can customize and design every part of the shop page also i'm going to show you how to use the theme builder for products so this is the default product now we're going to turn it into this where it looks a lot nicer we have dividers and people can also share it to their favorite social networking website or wherever they want to share it to so the theme builder again it's very popular and it allows you to have a lot more control of your website than you normally could without it so let's go ahead and get started so i'm going to take this base ugly website and we're going to convert it into the demo website which looks a lot nicer so first you'll go on over here to dashboard and we'll scroll down and we'll go to the templates and then you'll click on theme builder now elementor just created this interface and i love it it looks a lot nicer so we have different parts of the website like the header the footer the single product and also the product archive which is the product categories so for example if you want to have a different header like this you will go ahead and say okay i want a different looking header so you'll click on the plus icon so now you can see that we have a large selection of different style headers that we can apply for our websites so just to get started i'll select this one that says i think this is like modal they're just using a bunch of demo you know demo logos and stuff so to insert a header just click on insert and now you can see that we have the header right here so now we can go ahead and just build out the header normally like you would build any rest of the part of the website so i want to stretch this out i think that looks a little there we go so we'll go ahead and stretch this out also we have this really ugly purple you know what's what's that about you know so i don't want the purple i don't think the purple looks good so i'll go ahead and just click on the any logo or anything in the menu and then it's going to bring up the actual element that we're editing so this is the nav menu and we have the style so i can click on the style and then you can go ahead and design and customize this normally like you would any part of the website so under topography i want to use poppins i think poppins is uh you know it's what we're using it looks good also we have the hover so the text color i don't want to change the text color you know i just want to leave that base you know i don't wanna you know i don't wanna here we go i don't wanna touch that and then the pointer color i wanna leave it as red right we're using red throughout the website so now when i hover over it we just have that red look to it okay my bad my bad for text color we got to make that black guys so whoops i won't even edit this part of the video i'll just leave it in there just to let you know that everyone makes mistakes including me so uh let's go ahead and take a look so now it looks good and uh yeah that's all said and done and then we have our logo there and everything looks good also we can go ahead and edit this button so now you know how to do this right style background color and then maybe something like black you know there we go so remember guys i'm lazy you know i'm very lazy and if you notice we have this other header and we have these other cool things on the top but i don't want to have to remake all that from scratch because then you'll have to click on plus and you'll have to make the whole new structure all over again so what you can do is kind of go and mix and match other blocks and add them to your header so for example i will click on this add templates and then i will scroll down and i will pick on this one okay so we have this header now i just like this black bar you know i don't want this other stuff because we already have this menu that we created so i'm going to delete this and say you know what i like this let's just put it on the top you know hold on put it on the top right there there we go put it on the top and there you go and now we can go ahead and use this and customize it and design it to kind of get this style so what i'm saying is you can kind of mix and match different header parts just because one header doesn't have what you want you can always grab other parts of other blocks or whatever you want and add it to your header so now you know a little bit about how you can you know design this and customize it let's go ahead now and apply this to our wordpress websites so i will click on publish on the bottom left where do you want to display this well since this is a header i want to display this on the entire website right so right here we have entire websites now you can also apply it to specific pages so for example we have singular and then maybe i want to put this on pages and i want to only on this uh about us page you know i only want this header on the about us page so that's an example of how you can set conditions for specific headers so virtually you can kind of have any header you want on any part of the websites now that's for really picky annoying clients so if you have those clients i feel very bad for you but what we're gonna do is just apply this to the entire website i think we only need one header for the entire website right that makes a lot more sense so um the entire website and then i will click on save and close all right it's updating you can see on the bottom left it's updating congrats your global site is live so what we can do is let's just go back to our websites and i'm just going to refresh this page so i'll just refresh this and voila it appears on any single page so the about us page the contact us page it's going to carry and go throughout all of your pages so that's pretty cool so that's an example of the theme builder and what you can accomplish with it so let's go back to view page and also don't worry about the demo websites because i'm going to give you a package with the header the footer and all of the pages that you need because i am amazing and you need to like this video i'm just kidding that that sounds a little desperate there so i'm not i'm not desperate so so let's go back to my website and go to dashboard and we'll go down to the templates and go to theme builder all right and if you've noticed we lost all this other stuff you know so now we're kind of you know we're on our own but that's okay just click on the footer it's saying no templates found do you want to create one yes so you can click the plus icon here or you can click the add new there it is the same result it takes you to the same page guys so yeah don't don't panic don't worry it takes things to the same area so now we have blocks that have been loaded so the same thing that we did for the header you can do for the footer so it's like all right cool which header do i or footer do i like here and i chose this one you know i find that the red was already i kind of cheated you know i cheated guys i'm a cheater so i took the design because it's just simple it already matched with the red so i'm gonna click on insert and there you go now we have this uh footer also if you get these little weird symbols just click on the pencil and yeah there we go it's all fixed and it's all good to go now the footer might be a little different and might be a little tricky so you kind of have to think outside of the box here so for example we have the uh you're gonna put like the the contact us here right contact us and then maybe this can be like the the shop page right so we have the shop the about the contact and then you can go ahead and put whatever you want there like for the social media icons so what you'll need to do for the footer is you'll need to go ahead and link whatever you're typing to that specific page manually so for example um over here on my on the same websites i have the contact us link so i'll click on contact us and i'm going to copy this go back here and for the contact us when it says link i'm going to paste that in there so what that means is when someone comes to the footer and they click on the contact us it's going to take them to the contact us page right so there is a little bit of work that you might need to do you know so it's not like you know all strawberries you have to kind of get your hands dirty here so for the about us you would do the same thing so you'd have to go to the about us let's go to the about us we will copy this and we will go ahead and paste that link right there and there you go so what i'm saying here is when they click on the contact us it'll take them to the contact us when they click on the about us it'll take them to the about us page now so on and so forth so now you can go ahead and click on all of these and you'll go ahead and say okay for resources i want to put the link here for the resources once you are done with your footer you'll click on publish and then we will click on add a condition and the same thing so where do you want your footer well probably on the entire website right now there are instances where we're going to use these other ones like for example the shop right so yeah for the head of the footer generally it's going to apply everywhere on your website so you want to keep it consistent so let's click on save and close and if i scroll down to the bottom now we have this new one and look at that if i click on the about it takes us to the balance if i click on the contact us it takes us to the contact us page so now that you know how to use the header and the footer let's now go ahead and go back and let's do something a little bit more complicated like the actual shop page so it's actually not complicated you know i just like to sound like i know everything but it's it's not it's the same thing guys so the uh the templates and click on theme builder okay so we have the header and we have the footer that we created next let's create a custom shop page so on the left side you're going to see product archives click on add new for product archives so there are some product archives that you can select with elementor and you can see that uh we can select this one or this one or this one now they don't really have a lot to be honest so that's why i created a separate one because i feel like this is it's just not enough you know it's not enough for you so we're going to go ahead and build it from scratch so instead of actually selecting anything i'm going to click on close so now we're going to build the page from scratch so what we'll do first is i'll click on add a new section and i'll click on the plus icon so taking a quick look at our other websites hopefully you guys can tell what this is so this is a text a text and another text and that's it and then i just added a background image so let's go ahead and make that so what i'll do here is go click on the elements and for the basic i will grab a text and then i'll duplicate this and i'll duplicate it actually no don't only duplicate it once because we're going to grab the other the other special text which is under the pro element which is the it is the did i pass it guys see the animated headline there we go there we go so animated headline now i know this looks ugly but don't worry because it just takes a few seconds to make this look really good so for this one i'll go ahead and click on it and align it and the same thing so for the text color i will click on this and make it black and then we need to kind of design it so this will be poppins right good old pop-ins and the weights will be bold and then i think i put here see yeah i put here let it begin actually i think i use it thin so yeah let it begin wow can't even spell darrell wilson there we go let it begin and for the topography i think i did make this a little lighter you know there we go i made it around like 200 just just to kind of you know not be so close to this other one also you might tell that i made a little bit bigger and i think i added some letter spacing so just a little bit of letter spacing you know just uh just a little bit just to kind of give it some distinction so i think i set it at one now i'm not really reading off the script guys so i'm just visually looking at this to see what it looks like but i think you guys can tell yeah it looks like that looks similar right next we'll click on this one align this to the center and we will change this also to black and we will change the topography to pop-ins and the weights will be bold right and then i put 50 percent summer sale so here 50 50 summer sale you know a quick tip uh for web designers i don't know why but we always capitalize the first letter of every word it's just how it is so i don't know why we do that so there we go and then of course you can you know if you want you can go ahead and do uppercase or whatever you want to do you can also design this you know mess around with that also i think i did add somewhat of a text shadow here so i think i did add just a small blur just a very faint blur you can tell it's a very faint blur just to make it just to give it something and then i put on the bottom starts now so here is starts now you know to make it look all cool and i think it underline zigzag that's right and let's go to style color we'll do red let's do it the brighter red there we go and for the headline we will do the text color as black and then we will make this one also black and we will make this one a little bit different so for the topography we'll also change this to poppins and i want this a bold you know i want it to stand out from starts from the different ones so i'll make this bold and for this one i'll just change it to poppins but i'm not going to make it bold so it's just going to say starts and then now looks you know like that so what i'll also do is make this bigger like that and you know i could do also i could make this yeah let's make this a little bit thinner so for the starts we can make this just a little thinner just to give the you know a distinction between the both so that looks pretty good right now the only thing we need to do is we need to add a background so i'll click on edit section under the content layout i'll put full width style and classic and i want to add an image so the images i gave you in the folder should be there so go ahead and select that specific image it's kind of hard to see because it's a blank square so i'll go ahead and insert that is it cover yeah i think cover was the one i selected yeah something like that that'll work you know now one thing to note is i want some more space you know i want some more space on the top here so i'll click on these six dots i'll go to advanced and i want to add some padding so now you're going to understand what padding is all about so i want to add maybe 30 pixels of padding on the bottom and on the top so 30 pixels so now you'll see that there's space so now we can kind of breathe here you know so here you can see the space and also this space this section i'm going to give you in the template and it is a little hard to make it does take a little bit of time so i've given you that and the templates to save us some time in this tutorial so the next thing that we'll do is we need to add the products now we also need to add a sidebar as well so what we're going to do is we're going to have a a two-column row and this section is going to be small and this section is going to be a little bit bigger with all of the products so let's go ahead and say all right i'll add a new section and now we have structure so now you can see all right now i kind of understand why there's why there's different structures right so the structure that i selected was i believe it was this one right here and remember you can always go ahead and say you know what i just want this to be a little smaller you know so maybe 25 of the page and on the elements tab we will find sidebar all right sidebar so we don't really have a sidebar yet you know we don't have one but uh for right now i'll just do woocommerce sidebar and then we'll go ahead and add widgets to the woocommerce sidebar and then over here i will select in products and then drag and drop those products those bad boys over there and then we can go ahead and customize it and design it just like we did the on the homepage so that's pretty simple in fact maybe you even want to copy and paste it you you want to save those as a template and bring them over here whatever you want to do so uh the same thing for the style we can go ahead and say all right the contents this i'm sorry the style you know we can just mess with these really quickly and uh you know topography we'll keep it up the pop-ins don't copy my font guys all right you gotta use your own fonts you know it's my font people are really like that's my font man and i'm like okay like monster at everyone's like create about monster and roboto like come on you know i can use whatever i want so we have the uh you know we have the products and then that's it so basically what you did on the home page you can do on this page as well so it's the same exact thing guys it's the same exact thing that's why i kind of wanted to touch base on the front page because now you know how to design all of this from the actual um the shop page so the star rating we might need to have a color right and then also the empty color you know right and then we have the button which we can also have it as uh we'll have the texas whites right and the black ground as back and then remember if you want to uh create different categories you can do content but i don't recommend it on your shop page i don't so don't don't actually uh put categories on your shop page if you want you can but we're going to create separate categories for that specific page so yeah click on publish now let's say where do you want to display your template click on add a condition now elementor already recognizes that this is going to display in the product archives so we want to put it as our shop page so this is shop page all right so click on shop page and click on save and close and voila now we have a custom shop page that we created it's already looking beautiful now we need to add a sidebar because it looks so naked without it right so let's go ahead now and add a sidebar so let's go ahead and go back here and exit the dashboard and i'll click on dashboard so on my demo website i have filter by price they can also filter by popularity and all these other things we also have product categories and products and also see our product where i have a video of a specific product so i'll show you how to do that so first let's go over here and say alright so number one filter products by price remember we have that so we can go ahead and take this now there's also i think a default one of filter products by attributes by rating and these other ones so you can kind of check all those out i have product categories and we also have let me go ahead product categories we also have products so we have products on the bottom you have to scroll down and just drag and drop it and then we also have a video so what you can do is just link a youtube video and then put it in there so i'll take the video and i'll leave it there all right so now what we can do is say all right we have all these filters we have all this stuff let's now take a quick look and see what we can do to our or see what happened to our website so let's go back to our let's go back to our main website and now i will refresh this page and now you'll see that we have some stuff on the left side so now we have filter by price product categories and we also have products so if you might have noticed that these are blue and the page builder cannot edit this however the theme customizer can so click on customize and now we're going to use the theme customizer to customize those specific widgets because remember these are actually part of the wordpress theme so you see how that works so it kind of with a tug and pull right there so i'll click on the uh filter by price and now you can see that we have the woocommerce sidebar so this is currently using the wordpress theme but if you want to change the color and everything we'll go ahead and go back we'll click on global and colors for the base colors i want the theme color to be black and then i want the link color also to be black and then i think that's pretty much it yeah so now you'll see that this is black and now that makes a little bit more sense and now we'll scroll down and now you can see that we have a beautiful page that looks great and you can see you can add more widgets you can just go through here add more widgets you can add more custom filters and you can go ahead and have fun and knock yourself out okay so now that we've made a custom shop page let's now create a custom shop page for the specific product category so if you've noticed over here we have men's shirt and if we click on men's and we click on the archive the men's page still looks like this now this is going to be actually really quick so all we're going to do is we're going to just go ahead and take a copy of this and then we're going to use that for all of our product category pages so what we will first do is click on edit with elementor and then we will click on the products archive page so this is one way to do it so on the bottom left we can click on save as the templates and we can do the main shop page templates templates and then click on save i'm just giving you guys a few ways on how to do this just in case sometimes when you're using elementor things might be glitchy it might not work out so for the main shop page templates you can click on this and export it so this is how you can export layouts and use them on different other websites so for example if you want to make another website you can take this layout and then upload it to your other website so i will click on save file and here is the file so this is the json file that i need so now let's go ahead and go back to the theme builder and let's make the men's category page so let's go over here to the theme builder so right now you'll notice that we have the header we have the footer and then we have the elementor product archive so what i'll do is i'll click on add new and i want to do the product archive so we have the basic blocks but we can go to my templates and we also have the main shop page template which is the products archive or you can go ahead and upload that json file that you downloaded either way i just want to show you that sometimes when you save templates they don't always display properly and that's just one weird thing i found with elementor so just keep in mind this theme builder just came out with this new interface so if you do come across bugs and glitches don't panic just work your way around it so this is the main shop page template i will insert it and click on insert and say yes override overwrite all the settings all right awesome so instead of the 50 summer sale i will put men's product men's products and here i probably want to only list the men's products so i will click on this click on the query and include by term and then also have only men's so now i'm only saying i want men's products to be displayed on this specific page now one thing to note is that if we shrink this sometimes your page will not be displayed all the way so you want to make sure that your page is always full width so let me just quickly show you how you can change that without having to go back to the edit page and everything so on the bottom left we have this gear that says settings for the page layout you want to make sure this is always under elementor full width if this is under default it's going to display this as a box so let me see if i can see if i can show you there so yeah it's not doing it but if i save it it'll be boxed so just make sure the page layout is elementor full width i just want to be very clear because there are instances where you upload it and sometimes it might not be full width so this is full width i think that's all good to go so now we can go ahead and publish this page so i will click on publish so where do i want to display this specific page well i want to add a condition and under product archives i want to have it under product categories and i want to select it under men's alright and i think that's all good and then i will click on save and close let it save all right awesome so now it's saying our website should be or the men's category should look like this so we can go back to our websites i'll go ahead and view the page go to home so now let's imagine i'm going to the website again and going to the shop page okay 50 summer sale however i want to go see the men's products men's products i will click on this now you'll see how it says men's products and only the men's products are being displayed here really really cool now we need to actually do the same thing for women's but i think you get the points i think you understand now how to do that so i'm not going to do it for women's but you will need to do it for every category so if i click on women's it's just going to be this really ugly default page so you need to go ahead and add in that same uh specific product category template now that we've shown you how to do the shop page and the shop category pages let's now talk about products so if i click on a product it looks default there's not much we can change now this is not bad this really isn't bad at all however let's say for example we want to make a custom product page let's do that so let's go back to our wonderful theme builder so under settings we can click on theme builder that's a quick way to get there instead of having to exit out and go back to the beginning so we have these templates here so on the left side we have single product let's click on the plus for single product so here are some templates that you can use to speed up the process so we have this elegant wedding cake and we have all these other ones but i want to go ahead and show you how to do it from scratch just in case uh you might not want to use a template you don't really know what you're doing so what i'll do is click on close now let's go back to our product here and i'll go to my demo website and simply click on a product so let me explain what all these are so right here we have the breadcrumbs we have the image title so let's go over here and i will select a two column row two columns and i want this layout to be well let's leave it as box i think box is okay we'll click on the elements tab and now we notice that we have these different little elements so we have like you know product images breadcrumbs product title so these normally aren't available when you're building the page so we can do is use these to build out our product page so we have the breadcrumbs put the breadcrumbs at the top the text color i want it black the link color also black and i want to make this look a little bigger so for topography we can make the size a little bigger if you want to do that and then also under the advanced section i can add some space so i want to add a little bit of space here it's just a little too close to the too close to the top right there so i think that looks a little better and then on the right side we have the product title so product title drag and drop and then we can go ahead and design this make it look beautiful like the other ones so pop-ins and then i'll make this bold all right and then of course we'll make this bigger could that's yeah there we go we'll do 30 something like that and then maybe i want to add some padding as well so i will add them some more padding also you can add padding to this whole column to make it look a little bit more even but if that's you know something you want to do you can do that so for example i can click on this box and just say i want padding for the entire you know for everything so if you want to do that you can add padding but i'm just giving you an example next let's add in the product image so thinking what to do now right product images we can go ahead and select product images and there you go so we have product images and then we can add stuff like the border type we can add other stuff to it so yeah that's something that you want to add you can go ahead and customize this even adding a border radius i think a border radius makes it circular let's see here does that work yeah see how it's like circular yeah so you want that look you can go for that look i think that's hideous so i'm not going to add that so next we have the uh woman's white shirt and then we have this divider so what i'll do is just grab the divider and saying all rights i want to put this under that and then this is a little bit too long all right so make that look a little bit uh you know make it look a little bit closer to like that and then this title you know we got to make it bigger guys it's it's too small so i'll go ahead and make this a little bit bigger there we go and shirts i will take the short description and drop it in there and there you go we have the short description now remember your products will all dynamically update so when you do this for one product it'll apply it to all of the products so you will not have to do it for every single product i just want to make that clear so you might think oh that's so much work no it's really really not so next we need to add in the category so what we'll do is under the product meta we'll select the product meta take that and drop it in there so the product meta will just show the sku number it'll also show the category as well so if you want to have that information on there you can have it you can also change it to stacked or table i think table it looks like uh yeah sometimes when you when you go through these you have to save it and then look at it from the outside because sometimes it won't update but uh i think that looks good right i think that looks clean can add a divider to it make it look nice and then we have the price and then the add to cart so we'll go find the price we have the product price which is there and then we can update this we can make it look cool and the topography we can change it to pop-ins and then we can do bolds is that updating let's see here so oh that's the sale price so sorry so this is the one right here so yeah pop-ins and then we can change that to you know bold or whatever you want to do and then we will add the add to cart button so simply find the add to cart and drag it down there all right and then since this is a variable product it recognizes that and it's putting it right here for us so pretty cool now also on the bottom we have social icons so just like you guys build a normal page you can just grab it some social icons put it below it and then align it and then you can style that however you want also if you want to add things like the reviews and additional information you can add that to the bottom of the page if you want if you don't want to you don't have to but you know you can just kind of go and add whatever you want now so product stock we can add stock then i will add in something like the additional information and we can also add in something like the uh let's see at this point we just want to get creative upsells and then we can add in something else we can add in the product rating or something like that so you can just keep adding to this and you can keep grabbing whatever you want and you can keep putting different stuff here so product tabs put the product tabs on this side and there you go so you get what i'm saying here is that we can fully customize every single product page so this is how you would decorate your product page if you want to do that so what i'll do next is i will click on publish so where do i want this to be displayed well all products now you can get a little bit more complicated so for example if you want specific product categories to have a specific product page you can do that as well you can go crazy with a theme builder there is no limits on what you can do but i'll just say you know what i like this product page i want to p i want it to be displayed for all of my products so i will click on save and close so this right here was our current product page remember now i'm going to refresh the page and voila now we have this different product page and it looks beautiful now let's go to our shop page and what you'll see is it'll actually dynamically update so if i click on women's shirts it's going to dynamically update so women's shirts and everything is good so it works for all of our pages pretty amazing so what you can do is you can go through here check out everything that you want and just whatever you want to change you can go ahead and do that so i think that concludes this part of the video so now we have a custom shop page we have custom category shop pages and we also have custom product pages so that is a tongue twister now also in the package that i gave you guys i do have a pre-made template for all the products and also for other parts of the website like the checkouts and also the card page as well so you can actually design the checkout and the cart page now the checkout and the car page that is with elementor and that is not part of the theme builder so let me go ahead and just quickly go over that so what i'll do is add this to the cart i'll view the carts so this page right here is the cart page now the theme builder doesn't control this part of the website now sometimes if you click on it with elementor it does not work so you'll need to do is click on edit page this is like the work around you know and i've i've just learned this discovering elementor and then we'll close this and then i'll click on edit with elementor so now you can go ahead and customize the cart page so for example if you want to change the style of the cart page like the topography you can go ahead and say you know what we're using pop-ins so i want to select pop-ins so what i'll do is i'll click out there we go so sometimes it gets glitchy but uh if you wanted to design the text and everything inside of the cart page you'll use the page builder also if you want to add in something right here like a coupon code you can put in like you know use use daryl 10 for 50 off and then we can center that and then of course you can design this and you can go crazy and knock yourself out so i'm not gonna not gonna go i'm not gonna go too far into that because we can spend another hour on this page easily guys so yeah but that's an example of how you can design your car page now one thing to note is that we have this cart and that's really annoying and we can't get rid of that now this is part of the actual theme so if you want to get rid of this you'll click on edit page and right here on the bottom right just like we have the other pages you'll click on disable title because this is just considered a page according to wordpress so i will click on updates so that's pretty much the theme builder in a nutshell so now you have the power to design the product page all the pages that you want so it is very powerful it does allow you to do a lot more things sorry if this section kind of dragged on i know it's a little tedious but i just wanted to make sure that you guys fully understand everything about the theme builder so enough about the theme builder let's go on to the next section all right party people you now know how to design your website and make it look great you know what themes are and also plugins are so in this next section we're going to talk about the woocommerce settings and also how to integrate payment gateways so you can start making money let's go all right guys you made it to the end so in this next section we're going to talk all about the woocommerce settings and all of the payment gateways and all the stuff that you might need in order to make money now one quick notification that you guys might want to check out so you might want to add your account page to the menu so this will allow people to see their current account so they can view their orders they can check out their downloads or their payment methods or whatever else they want to edit now this is included in the package template that i gave you all so the default account page is very limited so you might want to upload the template that i gave you but that's strictly up to you and remember you can edit the my account page at any time you want by going to my account page and clicking on edit with elementor just like we did the cart and checkout so without further ado let's go to the dashboard and let's go through some of the woocommerce settings so first we'll go to woocommerce and we'll click on settings so this is the general tab and in the general tab you'll just see things like your store address you'll have these options of which countries do you want to sell to so you can set to all countries all countries except for or only sell to specific countries for example if i only want to sell two what's a country to give a shout out to we'll do lithuania all right so for example if i only wanted to sell to lithuania on my website i would have that checked so that's just an example of those options and then we have enable taxes so if you want to enable taxes you can do that also enable the use of coupon codes which is i highly recommend because we'll talk about the coupon codes in a little bit and then we have currency so you can change your currency to whatever you want so depending on what country you are in update your currency so let's click on the next tab which is products so we have our shop page assigned to shop now a lot of these settings we're really not going to use because you know a lot of these settings personally they're used for themes that are very very limited and like you need actual woocommerce settings to make it work so a lot of these settings we're not really going to use except for the review section you can choose to enable reviews on your products or not enable them if someone has purchased the product it will then show a verified owner label on the customer reviews and then you can enable star ratings on the reviews or whatever else you want so that is the shop pages and then we'll go to tax so this is the tax section and now taxes can be very complicated however we already turned on automated taxes so if i want to enable automated taxes i will click on enable automated taxes well i think it's really annoying but uh yeah so for most of us you want to enable automated taxes because it can be very complicated now if you don't want to enable automated taxes you can just say disabled automated taxes and it will not calculate your tax in checkout you must set it manually here we have calculate tax based off of customers shipping address now this also does vary depending on what state you're in certain states will require that you pay shipping i'm sorry paying tax based off of where they are from some states recommend paying taxes where you are currently located now i will leave a link to taxjar.com so taxjar will tell you if you have to pay taxes where you are from or where you are shipping to so it is a free website and they do offer a lot of free sources they have paid services but i've never even used them to be honest but they do offer a lot of helpful information for states and the state laws with that so you can go ahead and check that out but i think enabling automated taxes would just make your life a lot easier because they are using the tax jar api so essentially it's the same thing here we have display prices in the shop excluding tax which is most people do and then display prices during cart and checkout excluding tax you might want to have that including tax to show them the tax so i will click on save changes now there's also standard rate reduced rates and zero rates now i do have another video on that that can get a little complicated where we talk about different um like basically they're categories of taxes and i'm not really going to go through that because i've already made a video on it so i'll leave that in the description below most of us might not use this it's really advanced that it's very limited people actually use that so let's go on to shipping all right so shipping can be can be complicated but it's actually really simple so the first thing you'll want to do is add a shipping zone so next we need to set up shipping zones so for my shipping zone i'll put united states and then right here i will go ahead and find united states so i need to say okay for people in the united states how much am i going to charge for shipping so i'll add a shipping method i can add a flat rates and for the flat rates i will charge them five dollars is this taxable well that also depends on what state you're from but i think for most of us we just put no and then click on save changes so as of right now i have free i'm sorry i have a flat rate of five dollars so that's for people in united states so you can actually go through each specific state and charge a specific shipping rate for each specific state if you want to do that let's go ahead and add one more shipping method so i'll also add free shipping and then i'll click on add a shipping method so for free shipping free shipping requires what's so we can say look if the minimum order amount hits like 50 bucks then they're gonna get free shipping or we can do other things you know coupon or anything else that you want to offer so basically what i have the settings so if they spend less than fifty dollars we're going to charge them five bucks if it is more than fifty dollars then they will get free shipping so that's a little bit about shipping and then you can make multiple zones so let's say for example you finish this section and i want to make more zones you can do you know mexico you can do other countries and you can charge each specific country each specific shipping rate now also we have this one and this is by default so what this means is let's say you went you went ahead and you charged a bunch of shipping rates for a bunch of different countries but you forgot one you know let's say we forgot uh let's say we forgot a specific country let's say somebody from uh albania buys one of our products for default purposes uh if we didn't include them on the current shipping rates anyone that we didn't include will be charged 10 automatically so this is for locations not covered so if we did not cover it by default it's going to charge them 10 so that's an example of how you can set up shipping i do have other videos where i have one on table right shipping where we can ship based off of weight you can charge shipping based off quantity it's actually a very advanced tutorial takes about an hour so if you want to check that one out i will leave that in the description below but this is base and this is ideal for a lot of us so i think you'll be fine with just this shipping zone settings so next let's go to payments now these are the payment methods so there are a lot of different payment methods that we can have on our ecommerce websites the ones that i recommend is stripe because this is a free account you don't have to pay for anything and you can accept credit cards through stripe and since we have the ssl we can use stripe so that's just one of the requirements to use stripe with and also paypal so i do recommend stripe and paypal now we're going to do this last so we're going to keep going here and go through these other ones before we go back to the payment methods so let's go to account and privacy so these are just some general options that you might want to consider so allow customers to place orders without an account which is guest checkouts or you can make customers create an account during checkout so just go through some of these options and see which one works for you also you can remove personal data from orders on request and then you can also remove access to downloads on request and then you can you know check all these out or whatever privacy policy we already had a privacy policy for the theme however if you want to add it through wordpress i'm sorry woocommerce you can go ahead and add it here if as well if you want also the the fight in the war goes on about personal information so you can actually delete personal information over a certain amount of time if you want to do that i am in no position to give any advice on this so you can just leave it as uh blank or you can manually delete info from clients whenever you want so that's just something to consider and it's an option in woocommerce that i'm not really too familiar with to be honest so it's just you know how long do you want to keep their information for let's click on integration integration we're going to skip this this is nothing well it's something but we're not going to really use it and then advanced we're probably never going to use this either these are web hooks and also just waypoints and i don't think we're going to use any of these endpoints so uh one that i do want to talk about though is emails so whenever someone buys something whenever any of these occur you are going to get an automatic email telling you that hey someone has uh completed an order uh when you refund an order if someone buys something which is new order canceled order or they reset their password so these are all of the emails that are automatically sent by woocommerce so this is all automated so you will not have to do anything on your own however if you want to go ahead and just click on something like the new orders you can go ahead and take a look so for example the email heading will be new customer order you can add some additional content like hey that's so annoying right like it's like go away now there is a plugin that i want you all to download it's a free plugin and it'll make your emails look a lot better so you'll go down to plugins and go to add new so by default the woocommerce emails are really ugly they're really really ugly so on the search plugins type in cadence i've recommended this plugin for years it's great and it is the cadence woocommerce designer woocommerce email designer so you'll go ahead and activate that and once you actually install and activate it if you go to woocommerce you'll notice you have this email customizer so go ahead and click on the email customizer or tell you about it because the default with woocommerce is really ugly and if you see them you're going to be like wow that looks terrible so this is the default emails that are sent out to your customers and you also get these emails and personally they're just really ugly and they're just really not decorative so you can actually use this plugin to kind of design stuff like you can add a header image like a logo at the top you can change the header style you can change the color and you can go through these options and kind of mess around with it also for the contents you can actually say you know what i want some padding i want to change the content color background and all of this cool stuff however you can also select the pre-built templates which is what i recommend so they do have pre-built templates that they have designed that you can just go ahead and grab so this would be something like for industrial this would be scroll up this would be something for like you know i don't know some sort of shop but i do like this one so i want to go ahead and click on this one and then i will go to the bottom and click on load templates and i will say okay so now i'm going to go ahead and upload this sort of template to all of the emails instead of this one and voila so now you have this email going to you and your customers and then you can go ahead and change all of the settings you can have different background colors you can go with the header style and you can go ahead and change the container and all of this cool stuff they do actually have another one this free fluid template and you can download that from their website it's free and i haven't seen it yet so if you want to if you're curious and you want to go check it out then you can go ahead and download it on their website it's free now let's talk about money we're finally going to talk about money it's about time daryl it's about time so we're going to go ahead and turn on paypal and we're also going to enable stripe so right here it says enabled you'll see that we have the little purple switch on so we have paypal set up and we also have stripe so for paypal just go ahead and click on setup so right here we have paypal standard enabled now paypal is a free service and i don't know if you guys have paypal or not but paypal is extremely popular their stock in the stock market is going up rapidly i know that because i own paypal stock so this is not a i'm not trying to sell you on paypal but it's a free service and it's amazing so what you want to do is when you sign up with paypal you're going to sign up with an email address so you can go to their website paypal.com and then you can go to sign up when you go to sign up you can make a business or a personal account now whatever one you create you're going to use a specific email so let's just say a personal so for the email right here once you are done making a business or a personal account you are simply going to take the email that you used to sign up and you're going to put it right here so mine is mr wilson email.com if you guys want to send me some cash feel free you know i'm i have no problem with you guys sending me donations you know but uh yeah so you just want to make sure that the paypal email is the one that you signed up for and that's it your website is now connected to paypal so the only con with paypal is people who do not have paypal will have to go and use their debit card on paypal and that might make people a little uneasy they might be like you know i don't know this websites you might get some grandma who doesn't know what she's doing and she doesn't feel comfortable spending grandma's money on paypal.com so we're going to also enable stripe but i do recommend having both payment gateways as an option so once you're done with that you will click on save changes and you are done there is no more action needed the website right now is connected to paypal so that is a really quick integration super super easy so next go ahead and click on payments again and on the bottom right we have stripe go ahead and click on manage this is also a very very easy one to get set up with so i'm going to enable stripe and we have credit card i'll just say pay with credit card pay with credit card that's it they always say via stripe because they want recognition but i don't really want to tell my customers who my merchant is it's none of their business really so i'm just going to leave that out you know so right here we have the test publishable key and the test secret key so you guys can go to stripe.com it is a free website and you can make a free account there is no background checks there is nothing all you need is a bank account and that's it so the website is stripe.com and it'll take you to this page now this page looks different in a little bits i'm sorry you know but that's just what happens they update their site a lot so on the top right you'll see sign up or log in so it's going to say sign in to your account and if you don't have an account you can click on sign up so you'll go ahead and go through the process of making an account on stripe so you can select your email your name your password and confirm all your information now i already have a stripe account so what i'm going to do is i'm going to go to my account and i'm going to show you how you can integrate it with stripe now remember this is a free service and there is no credit check it's completely free and it's really easy to use you're literally going to copy and paste some code it's really really simple so this is the current home tab all right so let's say for example you got your stripe accounts you connected your bank account and everything is all done and ready to go so what you're going to do is you're going to see developers you'll click on developers and then you'll see api keys that's it you're just going to copy and paste this so right here under the publishable key i'll copy that i'll go back to my websites and then i'll just paste that in there and i'm done and then go over here secret key copy this and then i will go to the secret key and paste it and then i'll go to the bottom and save changes and we are done our website is now ready to accept credit cards from anywhere around the world now one good thing to know is stripes free they do not have any monthly services and they do charge a three percent transaction fee i think it's like 2.9 you can get it lower if you talk to them saying hey guys you know i'm affected by the coronavirus can i get like a one percent you know or do whatever it is you want to do to see if they can give you a lower rate but i think by default it's like i want to say it's 2.9 by default i'm not really sure so that's exactly how you connect your website with stripe so now your website can accept credit card payments from anywhere around the world let's go ahead now and buy something on our website let's just pretend that i'm a random customer and i want to buy some products so let's go to my shop page and let's say i need this great bow tie i'll add that to the cart and i need these black gloves too i'll add to the carts i'll click on view the carts now there were some other products that i was messing around with earlier so you know i don't want them in shirt i change my mind i don't want that and also the women's green shirt i don't need that maybe my girlfriend broke up so i'm just gonna you know that's it so we have the shipping so we have the flat rate of five dollars and we have free shipping so we have free shipping option because remember how it's over 50 bucks so hey we got some free shipping and then i will click on proceed to checkouts all right so the customer has now put in some information we can pay with credit card or we can pay with paypal either one now i'm gonna go ahead and pay with credit card so let's use my secret credit card here there we go and uh one two three i will save this for future purchases and again this is in test mode so don't worry and i will click on place order so now i am purchasing the product and awesome so the order has been received i now see this screen it shows me what i purchased it shows me the shipping and all of this really cool information now i can always go ahead and go to my account and see what i have ordered but let's first go to the stripe to see if this is connected and it's working so let's go click on payments and there you go so now you'll see that 140 has been processed and the payment is complete so we just made money congratulations we just made some cash so that was a very quick way on how to accept credit cards on your website so when you're ready to take real payments on your website i'll go ahead and show you how to do that so right here we have viewing test data now i don't want to view test data no more so i want to accept real credit cards on the internet so i will click this little orange check now we have publishable key and a secret key so i'll go ahead and copy this under publishable key now right here i will click test mode so essentially right now i am saying i am ready to take real credit cards on the internet so i will go ahead and paste this and then i will go to my stripe i will reveal my live key copy this and for my secret key i will go ahead and paste that right there so this is the customer's dashboard and just remember that the customers will have their own personal dashboard where they can check their orders they can update their address and also see their payment methods and account details so for example i will click on orders let's say i went to the website and i bought something they will have a record of the actual purchase right here so always remind your customers to check their account in case there's a problem or if they want to update payment methods or they want to change their address okay let's quickly talk about mobile optimization now your website looks great on desktop but maybe it looks really bad on other devices and you don't even know it so on the bottom of the screen you'll see responsive mode so what we're going to do is we're going to optimize our home page for the tablet and also for mobile users so what that means is anyone visiting our website on a tablet device this is what they see so you'll see that on the home page that this text is way too big and this fifty percent off is way too small so what we can do is we can adjust our website specifically for people who are viewing our website on a tablet device so what i'll do is i'll just click on this little pencil and under topography i can reduce the size here so something like that and then for the fifty percent off i will go ahead and click on topography and now i'll increase that like that so i think this looks a lot better for tablets and as you visit your website and you check everything out you can make any changes you want and this will be what your tablet users will see so you just want to make sure it looks good for all devices because even when i first started web design i only focused on desktop and then people were like hey man your site looks terrible and i said what are you talking about bro like it looks great and that's because they were using different devices so for example right here i think maybe we can center this so the newsletter and also this 30 off so what i can do is click on this pencil and then right here for the alignment make sure it's under tablet i can center that and also the same thing here i will center this so for the text editor i don't know why guys but it's in the alignment right here under the style so i'll just enter that and that's it so now click on update and we are all done so going back up to our website we can see that our website looks a lot better for people who are viewing our website on tablet devices now let's go ahead and take a look at mobile so these are for people who are using cell phones so what i'll do is i'll scroll to the top of the page and you can tell this website does not look good so we have the text is way too big right here and we have this text and it just kind of drags on it makes the homepage look terrible so let's go ahead and fix this so i'll click on the summer sale under topography i'll then make sure this is under mobile and reduce the size like that and for this text i don't think we need this text but we can make it smaller so right here i'll do style and then topography and then i'll reduce the size like that now sometimes you might not need specific parts of your website for uh mobile users so for example you know do we really need this section for mobile users there's a way we can actually disable certain sections for certain devices so what i'll do is i'll click on these little dots under the advanced tab that's right the advanced section i know scary stuff will go to the responsive and here i'll see hide on desktop hide on tablet and hide on mobile so what i can do is if you're trying to make it mobile responsive and it's just not coming out the way you want it to and it looks bad you can just say look i tried my best but we're just going to disable this on mobile because it just doesn't it it's just not for mobile users you know and then you can do the same thing for uh tablets as well so let's keep scrolling here and just take a look if there's anything else that we need to change um you know we can probably get rid of this section i don't think we need it too much so the same thing here for the responsive we can hide this on mobile it didn't look bad for the tablet so i think i'll leave it and then we can keep scrolling and i think everything else looks pretty good so you can go ahead and keep going through your website and making sure that it is mobile responsive and also responsive for tablet users now also we have this home page and you know i think that we don't need this background so you can adjust backgrounds for specific devices as well so i'll click on these six dots i'll go to style so right now we're in mobile preview so for mobile preview i find that just putting in a solid color just works pretty easily so what i'll do is just click on choose image and i just want a white background here so what you'll do is just go ahead and find some sort of white background or some sort of flat color so i'll just use this one now i know there's images here but the users will only see the the white background because this is only for um phone users so now users will see something like this so you'll see something where it just looks clean it looks simple so this is the current image for mobile however if i go back to the tablet the desktop it will be this image so you can have certain images for certain devices you can use images for specific colors depending on the part of the image you can just kind of work whatever works for your website there's a lot of creativity when you're designing your website but making sure your website is mobile responsive is very important so go to your website go through every page and just make sure that your website looks good on all devices because i've had viewers tell me that the site looks bad for other people and i says well you got to make sure it looks good for all devices so what i'll do is click on updates so we didn't really cover the contact us page too much and that's just because i don't want to waste a lot of time talking about the design because i think by now you know how to design and add stuff to your website but to add a contact form you'll just simply take the form widget and drag and drop it now i already have one here so i'm not going to do that and then i'll click on the pencil icon and then we have some actions now i might make another video talking about every single action with the contact form because it is pretty advanced you have conditional logic and everything but if you just want to get emails to your email inbox you can click on email and then where it says to you can just go ahead and put your email there now right here it says from and this is the default wordpress so usually what it does is wordpress does is that it'll actually email wordpress and wordpress will actually send it to your email inbox that's generally how it works so for two you'll just go ahead and put in your email and then you should get emails that go directly to your email inbox now if you have any problems with this contact the hosting a lot of the times it's because of the hosting there's a small specific setting that might not cause the emails to go to your email box or you actually might get them to spam which is a very common problem so if you have problems with your emails just make sure you contact your hosting and they should be able to help you out or show you plugins that might be able to fix the error so let's quickly talk about coupons so if you want to have coupons on your websites it's a very easy thing to get started on the top you'll see plus new and you can select coupon so the coupon spot has moved recently so on the left side it'll say marketing and then you'll click on coupons but uh let's say you want to apply a coupon code so let's just say i want this to be daryl 10 darrell 10 is my coupon code for the discount type you have a few options a percentage discount so for example 30 off your entire order or you can do something like a fixed car discount or even a fixed product discount so for example this would be something like ten dollars off your cart no matter what now there might be some conditions they have to meet but you can set that but i'll just do something basic something like a percentage discount so how much is this percentage discount worth well i'll say it's worth 10 but maybe i should change this to 50 right to if i want to do 50 let's do 50. so does this allow free shipping if it does we can check that box does this coupon expire yes it does so this coupon is only good till i don't know how we feeling today let's just do august 30th usage restrictions so minimum spend so do they need to spend a certain amount so yes they need to spend at least 30 bucks the maximum spend we should probably not ever check that's i mean why would we want to why would we want to restrict people from purchasing products check this box if this cannot be used in conjunction with other coupons so what that means is can they stack coupons with this one so i don't want that and then you can also do it for specific products you can exclude products from this coupon you can include specific categories or you can exclude specific product categories if you want to do that usage limits so usage limits per coupon so how many times can this coupon be used well to my first 100 customers they can use it limit usage per specific item so you can go ahead and say i want to have this limited for a specific item you can also say limited per user so what that means is let's say for example can the same person use the coupon 10 times well sure it's up to you you can put uh two or three or whatever you want to do but uh you get the idea so what i'm going to do now is go to publish and now i'm going to publish this coupon so now let's go ahead and test out the coupon so this is my current carts i ordered a lot of stuff so the total order amount is 240 now i'm going to use the coupon code darryl 50. now this should bring it down to what 120 dollars since it's 50 off right so apply coupon and look at that so the coupon is now taking off 120 because it is 50 off so you can easily apply coupon codes to your website and when they go to proceed to checkouts we can see on the checkout page that the coupon has been applied still so the most they'll be paying is 120 because we apply the coupon code so that's just a quick tutorial on how you can apply coupon codes to your ecommerce website so that is pretty much it for this part of the video i think we've covered everything and i think by now you guys have a fully functional ecommerce website so congratulations congratulations party people go get yourself a drink or some beef jerky because you now know how to build ecommerce website so congratulations and if there's anything that i missed or if you want to ask me a question or if you want to let me know how i did please feel free to let me know in the comments below also i do have many other tutorials that you can use to help you with your ecommerce website like dynamic pricing like you know buy three get one free or table rate shipping or something like that but those videos i do have in my channel so feel free to go scout around and take a look but again congratulations on your website i wish you the best my name is daryl wilson and i will see all of you party people in the next video guys take it easy

Channel: Darrel Wilson

Views: 539,733

Rating: 4.9211268 out of 5

Keywords: how to make an ecommerce website with elementor, how to make an ecommerce website with wordpress, elementor, woocommerce, woocommerce tutorial, how to make an ecommerce website with wordpress and elementor, create ecommerce website, elementor ecommerce website, elementor tutorial, ecommerce wordpress website, ecommerce website, elementor pro ecommerce tutorial, elementor woocommerce tutorial, elementor pro tutorial, how to make an ecommerce website, how to make ecommerce website

Id: ai4A7s27iDI

Length: 193min 10sec (11590 seconds)

Published: Fri Sep 04 2020