How To Create An eCommerce Website With Wordpress 2021

what's up party people my name is daryl wilson and today in this video i'll be showing you all how to create an ecommerce website with wordpress step by step now me and my team have been spending weeks making this ecommerce tutorial so both beginners and all wordpress users can create professionally commerce websites that look great that you can fully customize in this video you will also learn how to use the elementor page builder and all of its features which is currently the number one most popular drag and drop page builder for wordpress we've also prepared a detailed marketing guide to drive traffic and help you get your first sale for your ecommerce website all for free so sit back and relax and let me show you guys what we will cover today in this ecommerce tutorial alright so today i'll be showing you step by step on how to create an ecommerce website that looks really professional yet modern and the great part about this video is you don't need to know any sort of coding or html because we will be using a drag and drop builder that makes it really easy to build your ecommerce website and as you guys can tell this website looks great and you will also receive this template for free just for watching this video so today i'll be showing you how to design and customize every part of the website to fit your business needs now you can sell any type of products you want on your ecommerce website you can sell clothes fashion products jewelry animal supplies you can sell anything you want on your ecommerce website with no restrictions in this video i'll be showing you how to create your ecommerce website with wordpress and elementor the popularity of wordpress is growing wordpress now powers more than 42 percent of the entire internet powering more than 500 million websites worldwide in fact wordpress is used by popular websites like mercedes-benz walt disney playstation and even the angry birds so you will be using the most popular platform to build your ecommerce website elementor is the leading drag and drop page builder for wordpress it is now used on more than 5 million websites worldwide because it's super easy to use and completely drag and drop so after learning elementor you can pretty much make anything with wordpress here are some users who watch my previous videos and have now created their own personal ecommerce business using the same page builder and platform that i'll be showing you how to use today in this video so with all that said let's take a closer look at the website that i'll be showing you how to make today in this video alright so this is the ecommerce website that i'll be showing you guys how to make today in this ecommerce tutorial i'll also be giving you guys the demo images and this whole layout for free to help you guys follow along in this ecommerce tutorial now the top left we have our logo and this is where you can put your logo for your ecommerce website if you guys don't have a logo don't worry about it i'll be showing you a really cool resource on where to get a logo for your ecommerce websites and then here we have our pages you know like the home the about the contact the my account and everything and then on the right side we have the customer login where they can log in and see their orders and on the right side we have this cart where they can click on it and view the items in their cart now here the user can click on this and they can go directly to their accounts dashboard so from here the user can see their recent orders they can manage their shipping and their billing information and they can also update their payment methods on your ecommerce websites next we have our landing page and this is just a really clean landing page we have this nice image here to reinforce what we're selling we have this text where you can you know change this to big sale or whatever you want to change it to and then we have this shop now button where users can click on this and go directly to their you know to the shop page and then scrolling down here we have product categories so let's say for example you have product categories like men's women's and children's you can categorize your products where if they click on this they'll be redirected to that specific product category so i'll show you how to set that up let's go ahead and keep scrolling down here and then we have just our basic products so this is just our products that we are listing on our sites so you know i'm selling leather jackets green shirts and stuff like that so you can kind of see how users can you know click on this and then they can add this to the cart and then this will update in their carts so next we have testimonials and testimonials are very important because this gives you social proof letting people know that like you know you're not a scam and people are actually buying on your store and stuff like that so those are always good to have on your sites and then here i just added this like flash sale so if you want to run sales where you're basically telling people that this is only good for a specific amount of time i went ahead and added that so i'll show you how you can you know add this for your ecommerce website and then keep scrolling down here we have just some icons so these could be like your brands like for example if you're selling nike shoes or adidas or pumas i don't know if they sell those anymore but you know you can you know you can add those to your store you know just to give them an idea of the brands that you sell and then below that we have this video where users can click on this and have a pop-up of a video you know to display your products and showcase them a little bit more in detail and then here we have some some icons just to reinforce the buyer you know like money back guarantee delivered in 24 hours you know free shipping you know all that good stuff and then at the bottom here we have this really nice footer where we have this um you know our footer at the bottom with our subscribe box and then we have this instagram widget where we have our instagram here where they can click on this and go directly to our instagram and then we have these credit cards here at the bottom just to add some more you know style and decor to the website now i did mention that we are using a drag and drop builder to build out your ecommerce website so for example if you wanted to make changes to your ecommerce website you would just click on the text and then type it in so here i'll type in big sale today and then i'll scroll down here on the left side we'll have these elements tabs and we can drag and drop these elements onto these columns so for example i can drag and drop this heading text and then change the text and then we can keep dragging an element so i will take an image module and here i can put in images so if you have images that you want to upload to your website you can just insert them directly onto your site and then keep dragging and dropping elements onto your ecommerce website so here i'll drag in a button also for those of you who have youtube videos you can use this video elements and then drag it directly on your website and then users can go ahead and play videos right on your ecommerce websites now your ecommerce website will be fully optimized for all devices so we'll first optimize your website for the desktop and then we'll optimize your website for all tablet users and lastly we will optimize your ecommerce website for all mobile devices so anyone visiting your website on an android or an iphone will have a good shopping experience on your ecommerce website now this demo website is available in the description below this video so if you guys just want to go ahead and check it out you're more than welcome to like here is the about us page where we're going to go ahead and walk you through how to set up an about us page on your site you know it's really clean it lets people know what your site's all about and i think when people see about us pages they get more connected to your brands and saying all right you know these guys worked really hard creating this product and you know we really appreciate that and then here we have the contact us where users can go ahead and send you messages which i'm sure you guys will love support you know emails but you know everyone has to have it so you can put your uh or your visitors can put their name their email and then send you a message and this will go directly to your email inbox and then here we have a address of where we are located and some frequently asked questions this is really good to have because this can actually save time with emails because um you know maybe they're asking about a specific product you can just say yeah the product is you know this or we offer refunds or we don't offer refunds so you can add this to your you know your contact page and then here again we have the footer at the bottom of the website so next let me show you guys our shop pages now we have created four free shop pages for you guys so no matter what kind of niche you're in there's definitely something for you here's our first shop page and we added these products right here and then we have our favorite products on the right side and they're kind of highlighted here to kind of maybe increase engagements for your ecommerce store we also have our best-selling items and then below that we keep scrolling we have product categories so let's say for example you know they just didn't find out what they're looking for they couldn't find it not to worry we finished it off with some product categories here at the bottom the next shop page is shop page four where users can just get greeted with this banner and if they click on shop now it'll take them down to the products and on the right side we added just a lot of upsells and testimonials to kind of increase engagements for your store you know maybe people they see these testimonials from twitter or something they're like oh man that's cool i want to go buy it now you know like who knows like you never know you know and then here we have the subscribe newsletter where they can subscribe while they're shopping on your store so it's a nice shop page the next is shop page three so this is the next shop page and this is more geared for people who have a larger store so i'll go ahead and click on shop now on the left side we have filters so we have filter by price we can filter by color they can also search for products if you have a very large store and they can also search by product categories here on the left side and then scrolling down here we have some product categories so this can be something like again like you know women's children men or iphones or something so they can shop by product categories by just clicking on this and shopping you know directly for categories on your sites so let's go and take a look at the next page so next we have shop page one and this is scared more for uh directly selling certain products so here we're just kind of showcasing these products we're really trying to upsell them saying these are our best products we have how many were sold and then we have these icons here reinforcing it saying like yeah delivered in 24 hours money back guarantee so you can just add your products here and just kind of highlight them on your ecommerce websites and then below that we just added some more more products here below that just in case that they wanted to keep browsing around okay so now that i showed you guys the shop pages let me quickly show you all the product page let's go ahead and click on one of these products and this is one of the product pages and on the left side we have like the title of the product we have the price and then we have some description we also have like sku numbers and the categories that are in and in the middle we have the product where we can kind of get like a better view of it and then also if you have different images of the product you can add more for the product gallery on the right side we added this little upsell banner where users can kind of take a look at it saying all right buy with confidence you can talk about your refunds free shipping cash back and also support and then also we added some social icons here right below that and then below that we added some description for the product and just additional information and this could be something like you know made in you know india or made in america and then below that we have related products where we have products that are related to the current product that they are viewing next we have the original product so this is just another product layout and this is something a little bit more ideal right so we just have like the title of the product we have the price we have some description you just can just click on add to the carts and then just add the product directly to their cart and then they can share this as well to their favorite social network and then below that we have some more information like additional information uh we can see reviews for the product and just some general description about the product and stuff like that and then we finish it off here with the related products there at the bottom so now that we added this product to the cart let's take a look at it it's going to click on a view cart so this is the shopping cart and this is a custom shopping cart that i'll be giving you guys for free in this video and we have these steps you know we have step one the shopping cart step two check out and then step three order completes and then below that we have a list of all of the products now you guys can also create your own coupon codes and you can apply the coupon codes and give them like a 50 discount or a 20 discount or whatever discount you want i'll walk you guys through how to create coupon codes for your ecommerce websites and then below that we have like these credit cards and you know ssl protection just to kind of you know reinforce the buyer about our store and then i'll click on proceed to checkout okay so this is the last step and this is the checkout step so you'll see that we are currently on the checkout step and the next step is order completes and if we scroll down we'll see our billing information on the left side so here they can input their you know their name they can put their address they can also put their phone number and email address they may also ship to another address like if it's like their girlfriend or something and they want to send it to someone else they can always do that on the right side we have the payment method so they can pay with paypal or credit card so here i'll enter in my credit card my real credit card i'm just kidding guys it's it's it's a test you know it's a test mode you know i do get emails from users saying uh that i left my real info on youtube and i was like no it's in test mode so once the user inputs their card information they'll then click on place order and that's it so now your customers will be brought to a thank you page and here they can see what they've purchased uh the product and also they can see the tax and shipping and total now once the user has purchased a product on your ecommerce website both parties will be notified via email so for example i'll go to my email so your customers will automatically get a confirmation email notifying them of their purchase or they will see what they bought and they can see their billing and their shipping address and you will also get an email notifying you of a new order so it'll tell you that someone has purchased something on your website and then you might want to ship the product to their shipping address well party people i hope you guys enjoyed what you saw you know it's a really clean e-commerce website it's really simple to navigate it comes with a free starter template and we'll be making this website with free tools so on a more personal note guys you know off the script and everything we worked so long and hard on this video we spent weeks making these starter templates and also creating an outline that's step by step that's also really easy to follow so i really do hope you guys enjoy this video we've also created this tutorial for both free elementor users and pro users because we realize not everyone wants to upgrade so we will be showing you how to use elementor free version yet we'll also be showing you how to use the pro version just in case you guys decide to upgrade so you guys ready let's go ahead and create your ecommerce website with wordpress so we are going to build your new ecommerce website in six simple steps and we will use this checklist throughout the video to help you follow along in this ecommerce tutorial alright so for step one we will get our domain and web hosting a domain is the web address for your ecommerce website so for example yourecommercewebsite.com or petsr us.com then we'll install wordpress onto your domain and then adjust the general settings step 2 design the website we will design and customize your new ecommerce website with the elementor page builder now we have geared this video for both free and pro users we will first start out with the free version of elementor to help first time users build their ecommerce website then later in the video i'll show you how to use the elementor pro version and all of its features to extend the power of your ecommerce website step 3 will create products after you get comfortable with the page builder we'll move on to step 3 and we will start adding products to your ecommerce website i'll show you how to price your products create categories add product descriptions and also upload your images step 4 the theme customizer i'll introduce you all to the theme customizer and plugins there's a ton of free plugins that can help enhance your ecommerce website to convert more sales so i'll cover some of these in the video and step 5 an intro to elementor pro i'll be introducing you all to the elementor theme builder i'll show you how to build custom headers and footers custom shop pages and custom product pages that you can fully customize step 6 the woocommerce settings woocommerce is a free plugin that can be used to accept payments handle shipping and taxes for your ecommerce website i'll show you how to automate your taxes set up shipping and accept credit card payments from anywhere around the world step 7 marketing so after you get your ecommerce website up and running we'll then go through the marketing guide on how to make your first sale with your ecommerce website now there is a link in the description of this video and this will take us to step one which is to purchase web hosting and welcome to name hero.com now i've been recommending namehero.com for years and people love it in fact this month alone we have had zero downtime with name hero so you will have a really reliable website and also our load time is under one second so we do test these servers to make sure that the websites are fast and uh reliable so you guys will have a really good deal with namehero.com now once you guys get here go ahead and click on get started now now we have four different plans we have the starter cloud the plus cloud the turbo cloud and the business cloud now it really depends on your budgets but i recommend the turbo cloud because with this you can host unlimited websites you also do get access to the new nvme storage which just gives you a little bit more performance for your websites but uh go ahead and just select the package that works best for you obviously i'd probably go with the turbo cloud because you do get more performance but if you're on a budget you can always go with the starter cloud or the plus cloud as well and once you guys select the package you'll go ahead and scroll down and then you'll click on order now all right cool so next we're going to enter in our domain name so a domain name is the web address that you're using so for example name hero.com you can see here i was kind of messing around with this so we have a dronezarus.com you could put anything that you want so this would be the name of your website for your ecommerce website for example i'll just do elementor tutorials the z and search hopefully it's available there we go yeah so you guys also do get a free domain with name hero so that's pretty cool you guys save yourselves another i think it's like 14 bucks a year uh once you guys select the domain you know give it some thoughts i know it's you know it's personal it's your website so give it some thoughts and once you're here you'll click on continue all right next we need to select our building cycle now personally i recommend one year one year you still get a large discount and this will also help you decide if this is for you or not so go ahead and select one year or a billing cycle that works best for you and we're gonna scroll down here now there are some upsells and personally i don't think you really need any of these upsells a lot of these are available with free plug-ins and stuff like that so i wouldn't recommend any of them we do get a free ssl with name hero that's pretty cool and we do need that to accept credit card payments on our website so that's another pretty cool reason to sign up with name hero here i'll click on continue on the right side now this i do recommend i recommend getting the id protection and this will protect your personal information from spammers and companies trying to sell you all sorts of stuff trust me guys if you don't have that checked you're going to get emails for viagra from seo companies from all sorts of really crazy companies so i recommend the id protection once you select that you'll click on continue and for a year of hosting with name hero depending on your package you can see you're paying less than a hundred dollars for the entire year so you do get a really good value with namehero.com and here you can see we have the hosting package we have our domain registration and you guys did save quite a bit of money uh using that link in the description of this video now once you guys are here we'll go ahead and scroll down and you'll need to create account so you'll put in your first name your last name your email your billing address all this good stuff i'm sure you guys have seen these screens many times on the internet now one thing i do want to mention uh try to write down your support pin this will actually help verify um once you need like help or something they'll ask you for your pin so they'll verify that it's you who's making the phone call or messaging them on live chat and also keep scrolling down here you can pay with credit card and paypal and coinbase ooh cryptocurrency and also a credit card looks like they have it twice here but yeah it doesn't really matter so you'll go ahead and select a payment method that works best for you and also you'll go ahead and fill in these payment details and make sure to enter in your social security number i'm just joking it's a joke there's no social security needed and once you're done with that you will click on i have read yada yada yada i'm sure you guys will read the terms of service right and once you're done with that you'll click on the checkouts and i will meet you in the customer portal all right and welcome to your new dashboard so this is your current dashboard as you guys can see i have many different packages many domains and i also have tickets with name hero and they really help me out with all of my problems so this is just your interface on the left side you can see your hosting packages these are your current domains you can always register a new domain also billing so if you want to see your payments or you want to add funds or you want to adjust your payment method you can do that here and also the support so if you guys run into something weird i know with websites things just kind of get weird sometimes you guys can always open a ticket here and they will help you out with all of your problems and they are pretty fast i mean i think maybe under one hour they can help you guys with all your problems so once you guys are here let's go ahead and install wordpress onto our new domain you'll first click on my cloud now here we have hosting packages now you should probably only have one here so just go ahead and click on your hosting package and next we're going to see this log into cpanel go ahead and click on login to cpanel all right cool so now we're going to go ahead and install wordpress onto our domain so up here we'll type in wordpress here we go we have wordpress manager by softaculous we'll click on this all right and from here we're going to install wordpress you guys can see i have many installations of wordpress already but right here you'll click on install and now we're going to look for the domain that we purchased so right here you have the choose domain section so you'll probably see your domain that you purchased i'll just go ahead and select this one but you're going to select the domain that you purchased and for the protocol make sure this is https which is the ssl now for in directory make sure nothing is here all right i don't know why that's there by default but oops whoops but make sure nothing is there because that will install your domain onto like yourwebsite.com something and you don't want that there yeah just don't have that there make sure that's make sure that's empty now for the admin username go ahead and give yourself an admin username and a password and this is what we are going to use to log into the website so whenever you want to build your website you're going to use these login credentials so make sure you write these down i'll just put admin never put past guys make sure this is something unique i'll just put paddywhack and your admin email make sure that this is an email that you have access to because when you forget your password they will send this information to your email so i'll put in my my gmail account here my famous pc order which i do get tons of spam and below that you can always select your language we can always adjust the language as well inside the wordpress dashboard and i'll show you how to do that in just a bit and we're going to keep scrolling down here to the bottom they have these other themes they want us to use but we're not going to use these and right here you'll click on install yeah they said three to four minutes that was not three to four minutes right now here we have install wordpress and this is the administrative url administrative url so just go ahead and click on this link and this will log you in to your website all right awesome so now we have a wordpress installed and our website is now live on the internet and if you want to see what your website looks like right now on the internet at the top left right here you'll just click on visit sites and this is the current theme that they are giving us and it is really bland really boring ugly but not to worry we'll make it look really good so to go back to your dashboard go ahead up here and click on dashboard now that we have our website online now let's go ahead and adjust some of these general settings the first thing we want to do is go to users and click on a profile now in the future if you guys ever lose your password if you want to change the color scheme this is where you're going to do it i think for this video we're gonna use midnight i just like midnight it's really easy to see these other ones are just really really tacky i mean this that's way too much you know so yeah i think we're gonna go with midnight i just like that it's a lot easier to see and we're gonna scroll down here now you can always adjust your email so you can always change your email and remember this is important because if you get your password the password will be sent to that specific email so you can always adjust that at any time and below that we have a new password this is where you're going to uh change your password so for wordpress if you ever want to change your password this is where you're going to do it and once you've made all the changes that you want you'll go ahead and click on update profile now let's say for example you guys speak a different language on the left side right here we have settings we'll click on general now here you can enter your email or you can update it at any time so if you get a new email address and you want to update it you would do that right there and below that we have the site language now if you change this this will actually apply to the backend so you can put any language that you speak so if you speak spanish portuguese arabic hindi whatever you can adjust the language for your backend options and below that's we'll go ahead and click on save changes the next thing that we need to do is we need to adjust our permalinks on the left side you're going to see permalinks now here we have a few options but you want to select this as post name and the reason why we do this is because when you go to a website you see like you know yourwebsite.com shop right not like all this you know numbers and it just looks really cluttered and ugly and the post name option is the best for seo purposes so once you select the post name you'll scroll down and click on save changes all right now let's say for example you guys want to log in and lock out of your websites maybe you're at a friend's house and you want to you know mess around with wordpress first what i'll do is i'll log out so right here i'll go ahead and click on logout so right now i'm logged out of my website and there's no way for me to enter it so whenever you want to log into your website and make changes you'll go to your address bar and type in dash wp-admin and press enter from here you guys can enter in your login credentials that you guys use to install wordpress so i believe mine was admin and it was paddywhack right paddywack we can always take a look here remember me and login so that's how you guys can log in and log out of your wordpress website so you can pretty much work on your website from any location all right and the next thing we're going to do is we're going to install a wordpress theme so on the left side we have appearance and themes let's make it let's make our site look a little bit better because we have this default green it's just it's not working you know it is not working on the top right here you'll click on add new and here we'll display a list of wordpress themes now essentially what wordpress themes are is they are kind of like the structure of your websites however with today's page builders a lot of these themes are becoming less and less important and the page builders are doing most of the work so you guys like i know you guys see all these beautiful demos but most of this is done with the actual page builder but the theme that we're going to be using for this video is astra so this is it right here it's astra you can also search for it by typing in astra and it should display right here astra there we go so go ahead and click on this you guys can see it has a lot of positive reviews it's actually the most popular free wordpress theme because it's it's pretty simple it's really lightweight on the top right here you'll click on install so now we're installing it onto uh our wordpress website and then we'll click on activate all right cool so now we have installed astra onto our website and if you want to see your website on the top left you can see visit sites and you kind of see here how the entire website has sort of changed and adjusted depending on the theme that we picked now the next thing i want to do is we want to create some pages so that we can start using the page builder right so let's create some pages on the top right here under plus new we'll click on page now this is pretty basic so what page is this well i'm going to close this little welcome box this is our home page and up here i'll click on publish and publish now let's say for example you want to make another page i'll click on this little wordpress little dash and here's our current pages so you can see we have the home page and we also have these other two pages that were created by default but i don't want to use these pages so i'm going to go ahead and click on these and we're going to move this to the trash and delete it so that's how you guys can always delete pages now up here we have add new let's create the about us right so this would be like the about us and on the top right publish and publish and let's do that one more time now let's make the contact page contact us and publish and publish all right cool now we need to assign these to the menu so if you notice on our website we don't really have a menu so if you see it we don't have a menu or we do have a menu but it's just not really adjusted well i mean the home is on the back let's now create a menu let's go to our dashboard and under appearance we'll click on menus so go ahead and give your menu a name i think menu 1 is just something you know you guys can see main menu for website whatever it doesn't really matter this is not visible to anybody and i'm going to click on create menu here we have those pages that we made you can see all of them under view all go ahead and add all of these i know we see two home pages and that's okay i'll explain that in just a bit and i'll click on add menu so this is a custom link and this is the default a link that it creates for us when you install wordpress so i want to get rid of this so whenever you want to like get rid of something on your menu just go ahead and click on this drop down arrow and then remove it and now we can adjust this by dragging and dropping like that and this is the primary menu so i want to select that and i'll click on save menu all right cool now let's go to visit site and now you can see that we have our pages so we have the home page the about us page the contact us pretty cool now what i want to do next is i want to assign the home page as a home page because if you notice we go to our website right here and we press enter it brings us to this random page and this is not the home page so let's now assign the home page as our home page on the top right here we'll click on customize this is the theme customizer and we'll talk more about the theme customizer a little bit later in chapter believe it's chapter three we'll talk more about the theme options but we just need to make one small setting here under the home page settings at the bottom go ahead and click on this and i want to select a static page and here i want to select the home page as our home page and then i'll click on publish and now we can close the theme customizer next let's move on to the next step and let's install the page builder in order to build out our ecommerce websites now there is a free version and there is also a pro version of this page builder and i'll explain the differences between both in the next section now there is a link in the description of this video and i'll take you to a page to purchase the pro version you guys can also get there by going to durawilson.com elementor now this is an affiliate link so it does give me a small commission and helps me and my team make these layouts for you guys all for free because there's a lot of work behind our behind our templates now i'll go ahead and scroll down here and explain these pricing plans so they have five different pricing plans and the biggest difference is that uh they're for a specific amount of websites so the essential is for one website there's also the pro it looks like they they kind of hit it but um that is three websites for a hundred dollars and there's also the expert plan now one thing to note guys that this company does give you a 30 day money back guarantee for any reason whatsoever so even if you buy it and it doesn't work out for you not to worry you can always get your money back now with the pro version of elementor you can create a custom shop page like this so you'll see that the demo here we have this really nice custom shop page we've actually created four custom shop pages for you guys and you guys can check this demo in the description of this video also with the pro version you can build out this custom header at the top and also have a custom product page so you'll see that this is a custom product page that we specifically built for you guys for this video now if you guys do decide to use just the free version that will still work out pretty well because you can have a shop page that look like this where you just have a list of the products and then also you can click on the product and this would be just the default free version of elementor so it still works you can still build an ecommerce website with both the free and the pro version however i'll be installing the pro version on the websites i would probably go with the expert plan because that gives you enough websites and 200 guys is really not a lot of money you know because look how much starbucks i drink every day i spend probably 10 bucks a day on starbucks so but go ahead and purchase a plan that works best for you i don't think the studio or the agency is you know ideal for beginners definitely not that's a lot of websites and that's more for people like me who manage various websites so go ahead and click on buy now all right and then you'll go ahead and fill out your information your billing information and all this stuff and yeah i think you guys can pay with a credit card or something i don't have a discount code so they don't really give up discount codes for elementor pro unfortunately but you'll go ahead and put in your credit card or you can pay with paypal right here and then i will meet you guys on the very next page all right cool now once you guys purchase elementor you guys will be brought to your uh elementor dashboard and you guys can see i do have a lot of different websites here so you know the plan for me you know i obviously host a lot of websites but once you guys get here you can just go ahead and click on this little download button and this will allow you to download elementor pro so go ahead and click on elementor pro and i'll save this now let's go back to our website and let's upload elementor onto our website so first let's go ahead and go to dashboard and then we'll go to plugins and then we'll go to add new now if you're looking for the free version of elementor you'll go right here and type in elementor and this is the plugin that you'll need to install so you can click on install now and then you'll click on activate all right so there is elementor now for those of you who want to go with the pro version you'll then go ahead and click on add new upload plugin browse and then right here we have elementor pro so i'll go ahead and open that and install now all right so now we'll go ahead and click on activate plugin next you might need to connect your elementor pro license so right here just go ahead and click on connect and activate they're just going to link your account that you created with the website so you'll see that this just connects to their websites so i'll click on activate all right awesome so now we have installed elementor pro now there is two more plugins that we need to install so go back to plugins and click on add new essentially what plugins are guys plugins are like applications for your website so you know how for your iphone you guys have an application for your bank or for uh you know if you want to have a better camera filter or whatever there is an application slash plug-in for pretty much everything for example this one can migrate your website this one is security you know a lot of these plugins guys i haven't really used a lot of them but they do have tons of plugins now the plugin that i want you guys to install is this one right here called lightspeed cache you can go ahead and go up here and type in lightspeed cache every website needs a caching plugin a caching plugin essentially makes your site a lot more faster go ahead and click on install now and in case you're brand new whenever you make changes on your websites you might want to cache your website because then that will actually make sure the changes are saved or just appear to be saved you'll get it later but go ahead and click on activate and i want to install one more plugin go and click on add new and here we're going to type in essentials this is the plugin that we're going to use and go ahead and click on install now the essentials add-ons plug-in are just basically giving you a lot more elements for elementor so it just gives you a lot more more modules to use and it just gives you a little bit more uh you know playing room with your builder so go ahead and click on activate now there's this short setup wizard so let's go ahead and just click on next now there's just one thing that we need to add here and this is mainly for the free users so right here click on product grid and click on next here we're just going to click on next we're going to skip this and we're also going to skip this these are just additional plugins that they want us to install they're trying to sell us but uh yeah i don't want to use those and then i'll click on finish all right so now we're ready to build our website let's go ahead and go back to pages and click on all pages now we first want to design the home page so this is our home page i'll click on edit and now we're finally ready to use elementor on our site so at the top right here click on edit with elementor all right party people get your thinking caps on because i'm going to go ahead and explain to you how everything works with this builder now one thing i want to go ahead and get rid of this right here this is their little upsell thing just click on don't show this again and click on submit they're just trying to get us to buy stuff we don't we don't want that all right congratulations you guys now have your domain and hosting it's pretty simple right now we can go on to step two where we can start designing our website using the elementor page builder it's really easy to get started after probably 10 minutes of using it you'll you'll get the hang of it so let's jump into it let's first talk about the page builder and how everything works let's say for example you want to create columns right so click on add a new section and then we have specific columns so we have one two three four and you can just click on like for example the three column row right now we have three columns and then we'll click on these little elements tab and now you can drag in elements in these boxes so for example we have this heading text click on this again we have this text editor and then also we have a button here like that all right so you can just kind of like see how this works you guys can drag in a video you can also you know drag in whatever now these are pro elements so if you didn't purchase the pro version you guys can use some of these pro elements like animated headlines where it has that little animation and then they do have uh some other ones like the call to action called actually is pretty good you can just kind of drag it right there with that little blue thing so that's how you can kind of drag in elements now the plugin that we installed was called the essentials add-on plug-in and if we scroll down right here you're going to see essential add-ons so these are the additional elements that you get with elementor and you guys can use this you know if you want to you know explore and mess around maybe like the info box they have like an info box and they're just different elements and you know they just all have a unique style because i just want you guys to have a little bit more control with your ecommerce websites um here we have like a tooltip box i don't know what that is see you know a lot of these guys i don't even know what they do i'll be very honest but that's just the basics of taking elements and dragging them on to your page now i know this looks terrible but not to worry so let's say for example i want to delete an element i'll right click on this pencil and delete it right right click and delete right click and delete now i can also duplicate elements by right clicking and clicking on duplicate right and it'll just go ahead and duplicate that uh here duplicates and then duplicates and then we can also take these elements and drag them around as well so we can just click on that little pencil icon and then just drag in those elements pretty much anywhere we want now let's say all right darrell this looks terrible let's just uh let's get rid of all this we'll click on this little x bar at the top and that will delete the entire section so go ahead and click on delete section all right so that's just the basics of elementor that's how you would drag in modules now just to be clear every module has three different sections we have the category i'm sorry the content section which actually controls the element itself then we have the styling tab which controls the actual style of this element and then we have the advanced tab the advanced tab will actually change the position of the specific element so for the motion effects you can add in animations like fading in and you can kind of add these for your elements and every element you can do this so it doesn't really matter which element that you use there is these options for every specific element so just to be clear every element has the same tabs uh for example the button we have the content where you can change the you know the text the style which changes the actual color and then the advanced tab which changes the position and also motion effects and just other options like if you want to have a border or something like that so that's just like the basics of the page builder now let's go ahead and build out this page right here so with this page we have a two column row right we have one column and two columns and we just have a very large uh background image so let's go ahead and do that so first i'm going to click on this little add a new section and then i'm going to click on this two column row right now what i want to first do is i want to click on this element tab and i want to drag in this intersection like this right here okay now i want to delete this one column because we have two columns i only want one right like that the reason why i use the intersection was because you'll see a little bit later the intersection gives us a little bit more control like we can change the height and everything but for this tab we don't have those options so that's why i'm using the intersection okay now first i want to add in a background image now there is demo images for all of you guys in the description below of this video so first let's click on this edit section tab which is the six dots for this big section and then we'll go to style and then we have the classic and then we have image so this is where we can upload images as our background you may also go ahead and adjust the specific color if you want to use just like a one color you can do that but i think most people today use images for their backgrounds right so i want to go ahead and get rid of that by just reducing the opacity like that so for image i'll click on choose image and here we can go ahead and upload files so you'll click on select file and there's this image folder right here called image folder and what you can do is you can go ahead and click on all these images right here and upload them to your wordpress websites so you'll click on all the images and then click on open now all the images are being uploaded to your website so you can use any image that you find on the internet and you can also upload your images to your media library alright so the images have finally uploaded let's go ahead and add in a background image first so we'll scroll down and find that guy with the red shirt this one right here i'll click on insert media now you might notice here how this background isn't really stretched so i want this to kind of be full width so what i'm going to do is go to layout right here and then for the content width i want this full width and i also want to fit this to the screen so you'll see height right here says fit to the screen this allows this to basically fit to the entire screen for all devices now you might notice that when you upload your image it's kind of hard to position it so this is the image but i want to position this in a specific manner so for the size i want this to be cover and if you want to adjust your image you can move it around like this or let's see let's see here there we go like that you can also do custom and move the image around to where you want just depending on you know if you do upload an image and you want it in a specific way you can go ahead and upload it right there like that so that's just basically how we can have a background image for us to work with now let's add in some elements so we have these two elements tabs right here uh what i first want to do is add in a divider module now you'll notice right here how we have two columns now this is a divider module a text module a text module and then a button module so let's add those in so i'll go ahead and go to search widget and just find divider right divider and i'll put that in now i want to click on this little text so i just want to give this some design you know because i just don't want to start putting in random text i want to kind of introduce this section so that's the whole point of all this so let's go back over here so for the text i'll put in something like best 2020 collections and then for the style now we can go ahead and adjust the style here so for the color i want to use a specific color code now i'll leave this color code in the description of this video but the color code i'm using is ad000 and it's just this really subtle red color it's not like too red but it's just like a very small faint red and for the text section right here we can go ahead and adjust this text so for the color i'll leave it as some sort of black you know just like a very faint black and the topography this is where we can change the fonts now i personally recommend to use maybe one to two fonts on your website do not use more than that because then the website looks very tacky you'll see on this website how i'm only using one font i'm actually using two so this is enter font and then this also is entered font but this right here is poppins font so it's very you know it's very faint it's very subtle but you can kind of if you look at it closely you'll see the differences but your first glance you probably won't be able to you won't be able to tell so over here i'll put in enter enter this is the font that we're using and i'm going to make this 12 pixels it's very small you know and then the weight now the weight is this like the fatness of the actual uh you know of the of the font so we can make it skinnier and fatter or something like that and for the transformation i want this all uppercase so i want to make sure that these are all uppercase and then we can adjust the line height here so you can see how we can kind of mess around with the line height i'm going to put 1.5 and then for the line spacing we can also adjust this as well so you can add in more spacing like that and i want to add in just like three i kind of want to like stretch it across a little bit just to give it some you know design and stuff like that now for the position we can actually move the text in a specific position like that to kind of just you know give it some decor you know actually for that line height we're just going to leave that blank you know i think that looks a lot better yeah let's leave that blank now let's go back to the content section so now i want to adjust the width of this line because it's just too long right so let's go ahead and reduce that something like that right that looks a lot better and now i say that's about done right so let's not in the next section so i'll go ahead and click on the elements tab and now i can add in either a heading text or if i'm using the pro version i can use the animated text which essentially just allows us to add two different colors so that's just the main difference between both of those but we can just use a standard text for for now to get started and i'll just type in i don't know big dazzle after dark and we can adjust the alignments of this however we're already kind of aligning to the left so we can just leave it there and for the style i want to keep everything consistent so i want to keep this like a subtle black right and i want to use enter font again so over here we'll change this font family again to enter right enter but i want to make this a little bigger so let's let's just kind of push it up just a little bit we'll do like 98 pixels and for the weights i just want a little bit more fatter right just a little bit more fat all right so i think that's pretty good now one thing you might notice that this is actually kind of scrunched right this text is all the way to the left side and also this row is just not really working out well so we can actually adjust the actual uh width of everything so let's go back over here and click on the edit section tab and go to layouts and i want to keep this boxed you know maybe we should have done full width so now it's more of a box layout and i also want to go ahead and give this more space to work with so let's say for example i want to have even columns or uneven columns i'm going to go ahead and put this up to like 60 you know 63 or something there we go something like that so i think that does look better now the next step we're going to add in this little text now what this does that this just gives it kind of something to work with you know so we don't want just big text we need that filler text so let's click back on the elements and drag in a text editor now we can add in you know if you want to copy more text you know just to kind of give it some more you know more i guess you want to say i like to call it filler text you know because we're just using it just to kind of fill in space you know just to give it some structure and now we need to add in the button and this is also a divider now this is more of an advanced strategy so if you are using elementor for a while this will be sort of something that you might not have known about let's click on these little elements tab and i'm going to first drag in this button now let's first go ahead and design this button now this link we can link later on to our shop page but for now what we'll do is i'll just put in something like shop now right shop make sure it's uppercase right uppercase shop now and i want this extra large now you can adjust this button at any time in the advanced tab but let's do that a little bit later i don't want to jump into the advanced section because you know a lot of us don't really need we don't need to go there but click on the style tab and then we have topography so i want to keep this consistent let's change this back to enter right we got to stay on track here you know enter we'll keep it going and then we can do something like 600 a little bit fatter and here we can adjust the the text of it so i'll just put something like i don't know 16 or 15 or something like that so that looks pretty good and you want to use the same color code so remember when you're making your website the colors that you introduce on the home page you need to carry this throughout your website this is your brand right so our brand color is black red and this gray color and if you go through this website we kind of just carry it throughout the entire site and even when you when i scroll fast it just looks like it's the same website because a lot of amateurs they tend to use a lot of different colors and that's a quick way to make your site look really tacky so just be consistent with your colors right so here we go i'll do a do zero zero zero zero or a d zero zero zero zero zero all right and there you go so there's our button now there's one thing that we also need to do as well and i wanna add in a divider now i'm gonna go ahead and duplicate this because i'm lazy you know i don't want to make that from scratch all over again there's no reason for us to do that so i'm going to take this and i'm going to drag it here now elements are by default doesn't allow us to stack elements next to each other which is kind of a bummer however we can do that in the advanced options now this is an advanced tactic and this is something that you guys can use if you want to stack elements together so first i'm going to click on this button and go to the advanced tab and for the positioning i want to make sure this is inline auto all right now i'm going to do the same thing for this divider so click on the divider advanced and then positioning with inline auto there you go so now you'll see that uh it's kind of scrunched you know we need we need to do a little bit more work but overall you can see how this is now kind of uh closer to the button so let's click on this little divider and let's go to contents now i want to really adjust the width of this because we need to kind of you know just give it more breathing room so click on the pixel and let's see if we can kind of push it across there we go like that so this is percentage and this is pixel or pixels yeah so next let's change the alignments so click on style and text and i want to change the position of this to right like that very similar to what we have right here now you guys might notice here that it's not 100 the same and that's just because maybe we're off a few pixels but overall it's the same exact structure but uh here i'll just put in something like 50 off right 50 off and maybe that's too much width now you know we can reduce that and we can also probably make the text bigger you know because the text is a little bit too small so we can adjust that in the style section topography and just make it a little bit more bigger like that all right so that's pretty much it guys the landing page is done now you guys have probably seen this and you know this is a great looking landing page and i'll explain why we did this you know we added the divider just to kind of give it some uh you know give it some style and decor and also introduce the brand because this brand we're now going to introduce it on to several different sections throughout the websites now if you guys are using the pro version you can use the pro element right here of the animated headline and this is essentially the same thing so what i did right here is i just put big dazzle and then after dark and what you can do is for the after on the style tab for the headline for the was it the animated text you can change the actual fonts and color of this so for the text color you can just kind of change it to something else right there so i think we use like 80 80 000 right and for the shape we can do something like underline you know something like that and we can also change the color of that underline as well so we can do like ad000 again and then we can adjust the font as well so just remember the style tab is where you can adjust the topography so here you'll just go ahead and adjust the text as well and then you guys get the point so we can just uh you know change the colors and everything and also remember uh you can change the alignments to left so that's just if you're using the pro version and you want to have access to that specific color so that's how you guys can kind of add those different color brands to uh your homepage so hopefully that was clear right pretty sure you guys with me still everything's still good all right let's move on to the next section and i'll be very honest with you guys when we made this part of the website we did not realize it was too advanced for beginners so what we decided to do instead was we actually made you guys a new section that you guys can edit and customize now you guys will also get this for free in the layout that i'll be providing you all but i'll do that a little bit later now in the image folder that you guys downloaded there is a json file so let me show you guys how to import layouts so here you'll see this add template button and first let's talk about blocks maybe you guys might be interested in some of these blocks now with elementor pro you do get access to all these blocks so let's say for example um i'll click on this call to action section right now i don't know why they're black and white guys you know i wish they were colored you know it's just it's just i don't know why they did that it's really ugly you know it's just it's just something they did that just i don't know it just whatever you know but you can go through these categories here and they have specific blocks that you can choose and all you need to do right here is click on insert and there you go so now it inserts that block right here and you can change this text to to whatever you want now you've already kind of get an idea of this so now you can go to the style tab you can change the colors and the fonts and also if you want to change like the animations or the padding we can do that right here now we'll talk more about padding a little bit later that's just adding in space but i'll give you some ideal um you know ideal instances of when you would want to use it but i'll go ahead and delete this and those are the blocks so just keep in mind that if you do get stuck with design and you need some help they do have some blocks that you guys can use and these blocks are they do have some blocks that are free as well and they do also have pro blocks but uh yeah i just wish they were colored and you know that's that but let's say for example you want to upload a layout so right here you'll see this little import template tab click on this and click on select file now this is the file that i gave you guys it's this called um it's going to be called the about section so that's that's it right there for some reason it just looks like that but you'll click on that file and click on open all right so this is called the middle section i'll rename it in the folder for you guys don't worry here i'll click on insert and click on yes all right so let's go ahead and scroll down here and there we go now we have this really nice section now you notice here how we kept this brand consistent we added in this divider section and here we have three different categories so these are going to be for your product categories let's say for example you're selling shirts glasses or you know shoes or yeah shoes you can go ahead and link them later to your product categories now you can adjust these images by just clicking on the column tab and going to style and here you can adjust the actual image so if you want to have an image of a product you can go ahead and do that now this section is very unique we use the background overlay right here to kind of add in this black you know overlay so now you'll see that we have this white text but if we don't have this overlay what happens is the text just looks really bland and it's really hard to read so for example i'll just click on background overlay here and just give you an example so here you know i'll just go ahead and get rid of it and now you'll see this text is really hard to read right so we added in this really subtle overlay here and you can kind of control it to just kind of help the user uh read the text better because we don't want to add black text because black text on these kind of images just doesn't really look well so the black overlay did look a lot better and let's say for example you want to link your products on here now you notice that these are not buttons so this is actually a text module right so this is a heading text however you can link them to another part of the website so this would be like your products page you know or like you know www dot you know darrylwilson.com and this now turns into a link so you'll see how the cursor now has this link button so that's how you can use pretty much any element to link them onto different pages now remember there's really no right or wrong way to use these elements whatever look and style that you can achieve that's really all that matters all right so have fun with this you know but uh yeah that's that now let's move on to the next section so let's go ahead and scroll down past this now we're going to insert this little brand the thing we got going on and this right here and also the title this title i'm using a different font but that's just something that i just did you know just because but uh let's go ahead and right click on this and duplicate this so we got two of these now we need to enter a new section here so let's go ahead and click on new section now this is a two column row right we have one column and we have two columns so let's add in a two column row right a two column row go ahead and delete this column here and now i'm going to drag this remember i'm really lazy so we're going to drag in this elements like that now we can also do the same thing for this text you know if you're really lazy and you don't want to you know add in the colors and the fonts again we can just go ahead and duplicate this as well and we can just drag this element down using the mouse cursor and this will be like new arrivals new arrivals and then just adjust the text as needed so obviously this text is too big so we can just make it a little bit more smaller and i do like the pop-ins you know that's definitely a note on web design but i just really like the pop-ins i just feel like it really stands out and also here we need to kind of adjust this width right there like that so i think that looks a lot better now we're going to talk about padding so you'll notice here how this is just too close to each other you know it's too close and we need space now let's talk about padding so first let's click on this little six dots and we'll go to the advanced tab so padding is space right so let's say for example i want space on the top section i'm going to unclick this linked values and now we're going to add padding like that and maybe what's what's a good padding 90 100 i don't know 100 100 good right what do you guys think you guys can let me know so yeah that's that and over here uh this is actually an icon so um let's go back over here to the elements tab and i use icon however you guys can use anything that you want so i used an icon box like this and i just kind of altered it a little bit so i just use an arrow so with this icon box you get access to all these different icons and i just typed an arrow like that and i got rid of this subtext you know we don't need it right and here i just put in browse all collections so i'll just type that in browse all collections and you might notice here how we need to adjust this so i want this to be on the right side like that all right and then from the style tab now we can go ahead and design the color and everything so we have this like i guess you want to say like oh no we have the red sorry so 80 0 000 and then also for the content as well we can adjust this with ad000 now obviously this text is a little bit too big so we need to reduce the size of also the icon and the text now the description we actually got rid of that so we're only using this just to kind of add some you know just add some design and everything to our page so here i'll go ahead and reduce this right maybe like 10 pixels 12 and then i want to have letter spacing so i just want to really stretch it across to kind of you know give it some design right and then we need to do the same thing for the icon box because the icon box is way too large now so we can go ahead and reduce the size of the icon box by going over here to size and just kind of making it look like that you know something like that now also you might notice that this is kind of not aligned properly now there's two ways we can do this we can add in padding however if you add in padding it'll have some responsive problems with different devices so you want to use the column section so for the column section for the vertically align maybe you can put at the bottom here right i think that works right or you can adjust it in the middle or you know they have they have a few different options but i think bottom works the best just remember if you add padding and margin to stuff like that it could look a little weird on specific devices so now that we've actually done that part let's click on update and save our progress now just remember just like we link the text to a different part of a website we can click on this little pencil icon and under the content section we have this link section so we can link them later to our shop page once we create it so we're not necessarily creating buttons but we're just creating different styles of buttons i guess you can say to kind of add some more decor because i don't want to have big buttons everywhere it doesn't look good you know looks kind of weird now let's go ahead and move on to the next section and let's finally make some products it's pretty simple right after you mess around with elementor for a little bit you'll get the hang of it so now that we've finished step two let's go to step three and now let's create products for your ecommerce store now we're first going to create a simple product and then we'll jump in what creates a um a variable product which has more variations after we create products we will then jump back to the website and we'll finish designing the rest of the homepage 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 example of why you'd want to have a variable product all right so let's move on to the next section and we're going to now create products for our e-commerce website you guys ready finally let's go back to here and go to exit to dashboard now we're going to install a free plugin and this free plugin is incredible it gives us the option to have automated taxes to have shipping to add coupon codes and all sorts of good stuff over here under plugins we'll click on add new and we're going to search for a plugin called woocommerce many of you guys probably already know about this plugin it's the best one you know what's really funny this plugin does what shopify does for free in fact on shopify's pro plan for 300 a month woocommerce says all that for free those poor souls they don't know they don't know but it's our secret you know don't tell them you know we got we get the free stuff that other people pay monthly so go ahead and click on install all right and once it's done you'll click on activate now when you first activate the woocommerce plugin they're going to prompt you to fill out this wizard however we can skip all of this because we can fill all this out in the woocommerce options so scroll to the bottom here and click on skip setup store details if you choose to allow personal data you can do that i'm going to put no thanks all right so now this is our i guess you want to call it the woocommerce store online headquarters now one thing guys is they change this interface a lot so if this screen looks different for you know a few months from now this tutorial is still up to date they just tend to move stuff around and adjust their interface quite often now we can just skip all this we're going to talk more about this in the settings tab so here we have the woocommerce settings and this is where you can enter in like your store address you'll see all the products so whenever you create products you can adjust like the product section here shipping this is where you can adjust the shipping rates payments this is where we can adjust payment gateways like stripe paypal and other you know stuff like that i'm going to click on no thanks get rid of this these guys are really annoying you know they're they're always asking us to leave reviews and stuff and then this is the accounts and privacy i'll talk more about um privacy policies and stuff like that where we can add we'll add it on the theme a little bit later in the theme customizer section this is emails and i do have videos on how to make customized really nice emails we'll talk more about that a little bit later but uh yeah that's just a quick little rundown of the woocommerce options we'll come back to this a little bit later in like the last chapter i believe but let's create some products so here we have products and we'll click on all products now whenever you create any products they'll be listed right here however we don't have any products so let's go ahead and create a product click on create product all right so go ahead and give your product a name so this is going to be men's dress shirt for me i'm going to dismiss this this is just a setup wizard now this right here is the long tail description this will display actually right here at the bottom so you'll see we have these tabs that displays at the bottom right there so this would be something about like maybe your material or something that's really not that you know they need to know like dimensions material something like that so i'll just put in some demo text for now here i'll put demo right and we're going to scroll down and now we have two products now for this part of the video we're first going to create a simple product in the next step we will then create a variable product there are other products that we can create but i do have a full another video on woocommerce and i will leave that in the description below of this video if you guys want to check it out so first let's put in a price right this is uh 50 bucks but we can schedule a sale so uh right now it's on sale for forty dollars and we can select a sale date so this is on sale from the 19th to the now let's say for example you guys are also selling digital products here you can click on virtual and downloadable oops let's go ahead and open that up and then you can add a file here so let's say for example you're just selling like a pdf or something you can click on add a file choose the file and then upload that specific file to the product but i'm actually selling a physical product so i'm gonna go ahead and uncheck those that's just if you are selling uh digital products next we have inventory so here you can enter in your sku number right and here we have manage stock now manage stock will show the quantity of the products so for example right here we have the product now if we turn on the manage stock it'll tell users how many products we have in stock so that's just a tactic of if you want to create like scarcity or something but i'll just put 20. do you want to allow back orders for this product i'm going to say no no thank you here we have shipping now you can enter in the weights and dimensions of the product if you choose to do that i'm not going to just because it's a shirt and this video can get really complex you know for shipping refrigerators or something like that but i'm just going to leave that blank link products so next we have upsells and we also have cross cells and i'll explain the difference between both an upsell is a product i'll give you an example here scroll down an upsell is a product that you recommend when someone is viewing a specific product all right so when someone clicks on this product we can recommend additional upsells amazon.com does this they offer various upsells when you purchase something or add something to the cart a cross-sell is something that you recommend at checkout for example here we have this image and you'll see right here how we have what you may also be interested in so when the user is checking out you can recommend additional products at checkout it might be something that you might want to offer to accommodate specific products for example if you're selling a shirt you might want to offer pants or a belt so that's an example of what a cross sell is it's recommending products at checkouts attributes we're going to skip this because this doesn't apply to simple products advanced you can leave a purchase note saying thanks for the order right this is just a purchase note when someone purchases it it will display a purchase notes you can also enable reviews for products so just like we have on our other website here i'll go ahead and go to our our shop page so here we have our products and you can see we have reviews enabled so if you want to have reviews enabled you can have this checked if you don't want reviews enabled you can have it unchecked now this is the product short description the short description will display right here now this is the primary description of a product so make sure it's important make sure that it stands out and make sure you do fill it out because this does get picked up by search engines so just make sure it looks good you know here i'll go ahead and just put in just some demo content next we need to add a image for our products so on the right side you'll see product image click on set product image and i'll just put in an image of this guy right here set product image now also let's say for example you have additional photos of this product here we can add more photos to the product gallery and and this one here oh wait so we got this one and this one can i hold shift or control take that one off so we got these two so i'll just add these two as a photo gallery click on add to gallery and we'll scroll up and there's one more thing that we need to add we can add tags tags are essentially ways where users can find product easier so this will be like shirt right and also i'll do like men's so here we go shirt and then men's right you can add these tags now we need to enter product categories now product categories are very important because we can display specific categories on different pages for example we have this shop page right here and you'll see on the left side how we have product categories now if i click on this hat category this will then display all the products with hats so that's why you'd want to categorize your products because then this helps users navigate easier so for example we have sunglasses or clothing so this could be something like men's women's kids or whatever you can also even have filter by color so there's just a lot of different ways on how you can implement a product categories on your sites so right here we'll go ahead and put in men's and we'll just do shirts and we'll add this new category and that's it i think we're all ready to rock and roll so once you are ready with your product you'll then click on publish and we have just created our first product so let's go ahead and take a look here here we'll click on view products all right so here we have the um i guess you want to say breadcrumbs at the top we have the title of the product we have the price then we have the description now remember the description will display down here okay so this is the short product description right and then we have the in stock available and this is referring to this section right here at inventory okay and then below that we have the screw number and then we have the description here at the bottom this description is displaying from here okay so that's where basically all that is referring to now also we've seen that our sale is not displaying because it looks like i didn't put the correct dates because i think it's the 17th today right so or for me but i'll just put the 16th so this will make the sale live right so now i'll click on update we'll go back to our product i'll refresh the page all right so now we have the product on sale and we also do have this little sale banner so that's pretty cool now this product right here we have a lot of empty space and it's also to the left so we can adjust that in the astra theme customizer so go back to your product and we'll scroll down here now for the astra settings we can have no sidebar right and we can also change the content layout now i just want this to be like a like maybe box you know you can kind of go through each of these and see how big it makes it or how it fits your store but i'm just going to select box right now and go back and click on updates then we'll go back to our products and we'll refresh the page so i'll refresh this page and there you go so now we have this product it's in the center it just looks really clean you know also if it did not change you might need to clear your cache so that's why you installed this caching plugin and here we'll just click on purge all sometimes when you're working on your website and things don't save it's not necessarily the website it's a caching problem and that's probably the number one biggest problem is people think that um the website's being weird and i said no man it's the cash you've got to clear the cash so this is an example of creating a simple product so we don't have any options but it's something very standard it also looks really clean now let's move on to the next product and let's create a variable product so let's go over here to plus new and we'll click on product we can add a product and pages from the plus news section or from the back end it doesn't really matter let's go ahead and close these boxes and this will be men's jacket now here we can just put in some description right now for the product data we're going to select a variable product this time and you might notice the price disappeared not to worry you know we'll mess around with that in just a bit we can also go through these other options again but i think now you guys kind of understand a lot of these however i do want to add upsells now so now we have products right to kind of add upsells so i'll put was it the men's shirt something like that men's dress shirt now we don't have any other products for cross cells but hey why not i'll just put in men's again just to give you a visual of what these are and how they will look on your store next we're going to go to attributes so we need to add attributes and essentially attributes are something like color and size right so let's add in some attributes here i'll click on add and this will be size now under the value i'm going to put small and large no no medium all right we got no medium we just have a you know just small and large and uh we're going to click on use for variations and click on save attributes next we're going to enter in color so if you have different colors of your product you can enter that here by clicking on add color and we're going to do blue blue and brown now this button right here i'm sorry this little bracket this is above the enter sign and you need to hold shift and press that bracket sign i'm not sure why but that's what we use to basically uh i guess to make new values so that's what woocommerce wants so i'm just the middle guy here you know i just i just report whatever they they tell me to do so now that we have that we'll click on use for variations and click on save attributes so we have size and color now we need to apply the variations to these attributes so click on variations and under the variation we'll click create variations from all attributes and click on go just say yes just say okay they're like are you sure you want to do this yeah we're going to do it all right so now we have four different attributes or variations we have small blue small brown large blue and large brown right so for the small blue we need to enter an image right so for the upload image you'll need to put in a blue whatever right this is the blue one and then you'll go ahead and put in the price and the sale price for each individual variation now i'll be very honest with you guys variation products take the longest to make and they're very annoying but uh you might want to hire someone if you have like 100 products then you might want to hire someone to do this because it can be very time consuming but i'll just put the regular price of 100 right and that's pretty much it now if you do not have a price guys the variation product will not work okay so you must have a single price or a regular price or else the entire thing the entire pyramid falls down all right just to be very clear and then you'll do the same thing for the small brown so you need to have an image and then you need to also put in a price as well just like that and then large blue here i'll put in a blue right or no did we enter the brown did i mess up here no no oh yeah here i did oh but small blue right small brown right small blue okay 100 bucks or large blue there we go and then also the large brown large brown okay and then 100 bucks now this is where you're going to enter in uh the product short description next what we'll do is we will add in a product image right now the product image will display on the shop page okay so um this is going to be like you need you need an image to basically represent the product so we're going to select this product image now let's say for example they click on this product right which image or which value do you want to display by default well we can display the lar or the small blue or the large brown so you can kind of go through here and set what you want by default so this is the default value when someone clicks on the product and then for tags we'll just put in jacket i don't know right jacket and this is a jacket so we'll create a new category for jacket and i think we're all ready to go so let's go ahead and take a look at this product let's click on publish and let's just hopefully everything went good if anything goes wrong with variation products or variable products usually just won't display so let's go ahead and take a look at the products i'll open this in a new tab alright so here is an example of the variable product man it's really annoying we gotta we gotta change that back we gotta we gotta keep doing that here uh and we when we create a custom shop page guys we won't have to do this all the time but for the free version uh if you are using the free version uh you'll need to do this uh for each product so we'll do like a box right okay and then we'll go back to update and now let's just refresh this page give it that better clean look and voila looks really nice so let's take a look we have the products now we have small blue because that's by default right now we have large blue and large brown so now you'll see how the image changes right and people can kind of you know zoom in on the guy and you know stuff like that and you'll see how small brown also just displays you know like that's so yeah that's an example of a variable product this is probably the most difficult thing to make for beginners i totally understand but uh yeah it just takes a little bit of practice now let's say for example we scroll down here now we have the upsell but you may also like so that's an example of an upsell let's say for example we add this to the cart so i'll add this to the cart right and click on view the cart this right here is an example of a cross sell so we're recommending products at checkout all right so you might want to strategize your cart and kind of you know strategize your products based off of what you are selling so if you're selling a jackets you might want to sell jacket cleaner or buttons or something you know that people can use with the jacket so congratulations you guys now know how to make products now let's add these products to the rest of the home page which we were designing from the start so let's click on the home tab now we'll click on edit with elementor alright and we're going to scroll to the bottom of the page here we're working on and right here we're going to enter in a new widget so let's click on add a new section and we'll just enter in this full section click on the elements tab and now we'll type in products and here we can enter in the products now this is an elementor pro widget so we'll take this and we'll drag it and now you'll see that we have our products being displayed and you can adjust the columns and also the rows so if you just want like a you know three columns and three rows we can adjust it also the pagination so let's say for example you have many products and you don't want to display all the products we can display like a little uh a pagination here at the bottom where they can scroll to different pages and see your products under the style tab we can now style these products let's say for example you know by just like you guys probably know already we can just you know adjust the the color and we can go through the font as well by changing this to like enter right enter and then we can go ahead and customize the ratings we can adjust the star size the spacing the price and also the regular price as well so you do have a lot of customization and options and i'm not going to go through this you know all the way because i think at this point you guys know how to customize this and design it to your liking now if you are using the free version of elementor you can actually use the essential add-ons grid so we'll type in grid here and this is the product grid and i got to be very honest personally i do like the product grid a little bit more because it has a little bit more of a style to it so i'll click on the plus and click on the little uh one row right and we'll type that in one more time grid and then i'll drag in this element now the reason why i like the grid more i just feel like it just looks a little bit better you know and there are different layouts that you guys can use like there is a list grid and there is also a view grid and there's also masonry which is kind of like a really blocky choppy style and then here you have different styles so you have like reveal style uh there's a bunch of different presets here you know you guys can kind of go through these and check these out like that's presets eights i do like that it's kind of hip and remember you can design and customize every single element so for example the add to cart you can adjust that by going to the style section and then you can adjust all of this right here like the button the sale badge style of the color and topography so you can adjust everything to your liking and you know there is a little bit of work that we probably need to do to make this look exactly like the demo but i think you guys now know a little bit about this to kind of go on your own you know your merry christmas way and you guys can design this to your liking so personally i do like the um i do like the essential add-on a little bit more i just feel like i like the presets they are pretty cool and uh that's just my personal opinion on that but you can use either so this is the pro element and if you are using elementor the free version you can go the essentials grid route all right so that's pretty much how you can add products to your home page all right so now that we are comfortable with adding products and you guys have some experience with the page builder let's go ahead now and import the demo content so now i'll be giving you guys the home page the about us page and the contact us page and showing you how to import them correctly onto your website because i think at this point you guys have experience on how to use the builder and it might just be practice that you all need and you guys can probably you know just fiddle around with stuff and you can get the hang of it but if you guys go to my website i'll leave this link in the description of this video there is a product called the finley free elementor ecommerce layouts now this is completely free it's a digital download and it has a zip file that you guys can download look how many comments i have here 10 000 comments you know like i mean they're pending you know i just haven't approved them yet so you'll go to this page and you'll add this to the cart and then you'll go to view the cart and you guys can download this product for free and then you'll just go to proceed to checkout and then you'll place the order now remember this is completely free so this layout does not cost you anything at all once you do that it'll say all right cool you have the layouts and here is the downloads you'll just click on the finley right here and this will download as a zip file for all of you so i'll click on ok now once you guys download the layouts all you need to do is open this zip file you'll just double click on it and then you'll see finley so i'll go ahead and double click on this now this contains all the pages for all of you so it has the home page the about us page and these are the other pages that we'll talk about in just a little bit when we talk about the theme builder but all we need to do is import like the home the about and the contact us so let's do that let's go ahead and make this a little bit bigger so what i'll do is i'll click on this little folder and we can upload this and i'll select the file go to my desktop open the findlay and then i'll select the home page and then i'll click on open all right so here is the home page i'll probably fix the title there i'm not sure why that stuff comes up but i'll mess around with it make it a little bit more cleaner but uh here i'll just click on insert and now we're going to insert the home page onto the website all right and here is the website so we'll go ahead and scroll down now this is the demo that i created for all of you now this right here is available because i have the pro version installed if you have the free version installed some of these titles and also boxes might not display so you'll just need to go ahead and enter in like the heading text and then just go ahead and edit it there because this is using a pro element so this is the animated headline so this is only available for the pro version but you can substitute it with just a normal heading all right so you can still use the layouts don't think like oh i forgot about the free users like no we made it for both free and pro users and here is the new arrivals we have our products and right here also if you guys are using the free version uh these will not display because these are the reviews however you guys can use the essential add-ons reviews so for example they have wool reviews and other reviews that you guys can use to substitute it alright so i just want to make that clear because i don't want anyone to leave me nasty comments saying when you just want you just wanted us to buy the pro and i said no i made it for both people here we have the countdown and we have this other little section uh for free users as well this may not display so you'll just need to go ahead and go to the countdown and then just put in the countdown widget right here and then you can adjust this in the style tab to give it that specific look that i have all right so i'm so nice i thought about free and pro users how about that and we'll scroll down here and everything looks good so yeah that's your whole new websites now what i can do is i can go ahead and delete everything now i know that's a big waste of time but uh you know we already have everything so i'm going to delete this i want to keep this section i'll show you guys how to drag and drop sections uh this section here i'm going to delete it and i'll delete this section and delete this and that's pretty much it now let's say for example i want to take this section and i want to drag it down we can click on edit section and hold this all right i'm holding it and using the mouse cursor and i want to drag it right there and now we can see that it's below there so you can use this section to introduce your product categories or you may use this section to introduce your product categories so that's how we basically created this section and now you have a whole layout all for yourself now you might notice here that this guy's head is kind of chopped off but uh it's actually not we just have a transparent header on the other website so we'll talk more about the header in the very next section but that's pretty much it so at this point you guys now have a fully completed home page that just looks great and you also have products on your home page now let's do the same thing for the about a section so next let's go to the about us page so we can actually exit to the dashboard and then we'll go and we'll import the layout for the about us page so let's go back to the wordpress logo now we can actually use the finder but we'll talk about that in a little bit we actually needs to edit with elementor first but uh here we'll see the about us page and click on edit and then click on edit with elementor and now we'll do the same thing here so we're going to click on this little folder icon and then we'll upload the json file there we go and i'll click on select file and i will import the about us section and now i will insert the about us page and click on yes all right perfect so now you'll see that we have this about us page it has imported correctly you guys can kind of go through this design see how we did everything and then kind of mess around with it i'll have other videos that are a little bit more advanced but i just didn't want this video to get too long because we do add some really cool techniques and styles to make this specific about us page now if you are using the free version you'll just need to replace this heading text so you'll just need to put it in right there and then you'll just need to place the text because this again is a pro element so uh yeah you'll just need to add heading text not too much work we did everything for you guys just replace the text so next let's click on update now let's say for example you want to scroll through pages without closing everything you can actually use the finder right here under finder for example if you want to scroll to the home page i'll just go to home and then click on home and the finder will actually go and jump to the home page so this way you don't have to keep closing everything and opening everything back up you can say oh i want to go to the home page and then i'll go to the about us page so the finder is actually pretty helpful now to get the pages to show up in the finder you first have to edit the page with elementor so we should be able to find our about us page but if you go to contacts it will not be available because we need to first edit the page with elementor so let's do that that's just a shortcut you know i'm sure you guys are probably seeing these and like oh what is this stuff so let's click on contact us and we'll click on edit page at the top and now we'll click on edit with elementor alright so now let's go ahead and import that layout so let's click on the folder icon click on import templates select file and now we'll import the contact us and click on open next we'll go ahead and insert that layouts and click on yes alright cool so now we can take a look at our contact us page everything looks good everything looks clean and yeah everything imported correctly so i hope you guys really enjoy this layout you know we spent months or weeks making it actually we spent two weeks making it just for you guys now there is one thing that i do want to talk about and that is the contact form now if you were using the free version unfortunately the contact form is not available however you guys can actually use a plug-in called wpforms to create a contact form on your website now this applies to both free and pro users so let me go ahead and just show you the contact form really quick here i'll click on exit the dashboard and go to the wordpress logo all right so from here we're going to go to plugins and go to add new now this does apply to both free and pro users because sometimes with the elementor contact form depending on just random server settings sometimes you may not get the email or may go to spam so over here just type in wp forms and now you can install this plugin here it's called contact forms by wp forms just go ahead and click on install now the great part about w forms is it integrates really well with elementor in fact they do have an integration that works specifically for elementor so go and click on activate now on the left side you'll see wp forms just click on all forms now i think they created one for us by default actually no they did not so just click on create a form and you can just enter a simple contact form you know i'm not going to go through the basics and the advanced part of ap forms but you can essentially build your own contact form from scratch so i'll just click on use template for this simple contact form and here you can kind of drag in elements like you can add a phone number here you can put check boxes and stuff like that like this would just be like a phone number right phone a number number there we go and then we'll just click on save and then we'll just exit this because we actually added everything we want and then here we have this little short code but let's just go back to our sites under visit sites and then click on the contact us now we'll click on edit with elementor and we will scroll down and i'll just add the contact form maybe i'll just add it down here you know so if i type in forms you will now see wp forms widget so this works specifically for elementor and i can take this and just drag it down here and for the form i will then select the simple contact form that we created so i'll put in my first name so here we go howdy and then i'll submit the form so there is the simple contact form notification and there you go so now we have received that email from our website now one small thing that we also need to add to our menu is the pages that we created so now that we have the home the about and the contact when we install the woocommerce plugin some of the pages were automatically created for us so now we need to assign those to the menu you know like your shop page and your category page and your my account page or whatever so let's go over here to the appearance and click on menus now here we have pages right so for example their accounts you know the checkout the cart page you can now assign these to the menu i think just maybe the my account and the shop page is good enough right so let's go ahead and put the shop right there and then maybe we can even put the my account there now one other thing too is i want the a capitalized just because in you know in web design that's what we do i don't know why it's just how everything works so i want to go ahead and click on this arrow and i want to capitalize that a you can also change the title for your pages so let's say for example your page is about us you can change that to just about if you want to you know if you want to approach that route and then we'll click on save menu alright cool so now we have the home the about the shop the my account and the contact so if i click on this your users will not have full access to the shop and they can click on my accounts and this is actually created automatically for you so now you can see the orders they can see their account details and this is created automatically for all your customers where they can see their orders they can update their payment methods and all that really cool stuff okay so now that you guys have a good understanding of how to design your websites i do want to talk about the my accounts the checkout and the cart page as well we do also have templates for you for those specific parts now when you install the woocommerce plugin it'll automatically create your cart page and your checkout and also your my accounts now i just want to walk you guys through really quickly on how to design this page now you can design and customize all of the pages and we do have templates for you guys as well in the uh in the folder that you guys can now during the download of this video as well elementor pro released a new feature for the my accounts i'm sorry for the cart and the checkout and i'm going to just show you guys the feature just so you guys understand what it does but first off let's go ahead and disable this title on the bottom right and click on update now if you want to edit the cart page all you need to do is at the top you're going to see edit with elementor go ahead and click on edit with elementor and this will actually allow you to start designing and customizing your cart page and you can do the same thing for the checkout and also the uh my accounts so here we have the cart page now i'm using a a template that i used so for example uh the template that i gave you guys in the folder you guys can upload it here by just going to upload select files and doing the same thing we did before so you'll see here how we have the cart page and this is the checkout and also we do have the my account there as well so i can just click on open and insert this onto my cart page so here we go we have the cart page wait no here it is cart page insert and i'll click on yes all right so this is the cart page and and of course you guys can fully customize this like for example if you want to stretch this section full width we can say it wants to stretch this section all the way and then it'll be a full width uh shopping cart also we do have that other previous shopping cart and you guys can go ahead and delete this and delete this and delete that and delete that because we already have this now i do want to point out something else that a lot of people don't know about elementor is you can actually change the fonts and the colors within the shortcode so for example if i click on style here you'll see text color right i can change this text color to like green or something right like a green and you'll see how this all changes to green now remember these are controlled by the theme customizer okay so to change the button and the fonts for the products you'll do that through the theme customizer and also here we have the topography you can go ahead and change this to whatever you'd want now while you're working on it i'll be very honest it does get a little glitchy you know it does kind of hide it sometimes but here i'll change this to bold so you guys will get a better example here we go bold and i'll just like click around just click on the website and then it'll re-propagate so it does that sometimes and if it does that just click on it and then you can change it so this is how you can go ahead and change the fonts and the colors for the cart you can also do this for the my accounts and also the checkouts i also do want to talk about the checkout page as well so you can go ahead and customize the checkout page the same way you customize the cart page so i'll go ahead and click on proceed to checkouts and this will bring you to the cart page now sometimes guys when you are using or you click on edit with elementor and nothing happens you actually need to click on edit page here and this is the way to actually edit the checkout page i know it's a little weird but there is some sort of bug sometimes where you click on it and it doesn't work you'll just click on edit with elementor here once you click on edit page and this will then allow you to edit the page with elementor also make sure to disable the title at the bottom right that will get rid of that it'll get rid of this checkout checkout title so i'm going to click on updates and i'm going to edit with elementor okay now just like we did before how we can change the fonts and the colors for the cart page we can do the same thing here for the actual checkout page by going to style and then again we can adjust the colors and we can change the fonts here now you guys um the free users can have this feature so you don't have to be a pro user in order to change this feature however elementor pro does now have a cart widget as well so here they have a new cart widget and just remember this is in beta guys so they're having like a sticky right column uh they're adding in like a bunch of different features where you can you know add colors to this section or this section or this section so you will have a lot more customization with the cart page so for example just like we did before the cart totals you can change the cart totals to something else you can change the text and you know you can kind of mess around with these options here on your own free time now i'm probably going to make another video dedicated to this because we can talk about how to make a really nice checkout form with this probably in another hour but i don't want to make this tutorial too long and also this is in beta at the time of making this video so i don't want to touch base on it too much because it's not yet in a stable release so i'm just going to skip this but i just want to introduce you to this that this is going to be available for pro users so i'm going to go ahead and delete this section now and then i'll click on update all right in this part of the video i'm going to quickly touch base on mobile optimization now mobile optimization is very important because there are more mobile users than desktop users so you really want to make sure that your website looks good for all mobile devices so let's go ahead and run you through on how to optimize your site for mobile first click on edit with elementor and now we're going to optimize this site for mobile so now we have these icons here at the bottom and this says responsive mode so let's click on responsive mode now this is what your website looks like on a desktop view what it looks like on a tablet view and this is the view from a mobile device now the layout that we created for you guys we have optimized it for mobile so it'll look good for all devices you can see that everything looks really nice everything looks really clean and yeah you'll just need to go ahead and go through this and make sure that everything looks really nice now let's say for example your site is not optimized for mobile and i want to show you guys quickly on how to adjust things and how to change things for your mobile devices so the first thing is let's optimize this site for tablet so let's go back to the site that we were creating on and we're going to click on responsive mode so now i want to click on tablets so you'll see here how this looks pretty clean however the 50 off doesn't really look good in fact it's broken we can actually hide specific elements for specific devices because sometimes you just don't need to have specific elements on mobile devices i'm going to go ahead and click on this on the pencil icon and i just want to hide this i want to hide this for tablet users only because i just feel like this just doesn't really you know we just don't need it to be honest we just want the the shop now button so to hide in elements for devices click on the advanced tab and then we're going to click on responsive and i want to hide this on tablet and i probably also want to hide this on mobile as well so now you'll see that this has that gray out field where this will now not display for the tablet or the mobile let's keep scrolling down here so this is actually not bad i mean i think this section looks good i mean for tablet users it's definitely not bad and i think that this looks just fine this section right here might be a little bit too big you can see all these sections might be too big in fact we probably don't even need this section because we already have the product categories here so let's hide this entire section now i'm going to click on these six dots right here go to the advanced tab go to responsive and i want to hide this for tablet and we're going to come back to mobile i don't know how it looks yet on mobile but let's just go ahead and optimize it for tablet first and then we'll come back to it so now you'll see this whole sections grayed out and that makes a lot more sense now let's say for example you guys want to change the position of this i'll click on this pencil icon and then for the alignment you can see tablet is selected and we can change the alignment over here you know to the left side to the right side now remember we are adjusting this only for the tablets when we are in responsive mode so this will not reflect on the desktop version so next we have this section here and we have a few options on how to optimize this for mobile number one we can just disable specific boxes you know for mobile devices or we can stretch out these two bottom rows to make it look more you know more structured and more proper let me go ahead and show you guys how to extend these rows really quick i'll click on this little column here and now you'll see that for tablet we have this tablet devices selected so now we can kind of push push this to kind of you know make them have like more of a you know more of a structured style so here you'll see for tablet as well you can push this and just kind of leave it like that so you do have an option to make it you know make it look a little more structured or you're going to say you know what zero that just doesn't work out for me i just want to hide this again so we can go ahead and hide these columns by clicking on the column and doing the same thing as before going to responsive and we can go to hide on tablet as well so that's just an option if you know if if if you're making a website don't think that you have to disable options you can change the position you can kind of change the size of the text as well to make it more responsive now also really quickly i'm going to click on edit intersection here and there's an option where you can inverse sections so here we have the inverse tablet where we can inverse stuff and this is actually pretty useful if you guys have images with text that are that are stacked up against each other sometimes you can switch it around and see if that works out for you so that's just an option that i just want to introduce you guys to and then just keep scrolling the bottom of the page and just kind of keep looking for fixes on your ecommerce websites that you can optimize for mobile now we went through the tablets let's go ahead and go through the mobile device so the mobile section is a little bit more important in my opinion because there are more mobile users than there are tablet users but let's just say for example you want to edit a specific section you can now see that we have the um the mobile preview selected so you can adjust the alignments for the phone device also if you click on style and go to text and topography you'll then now see that we have the option selected for mobile so you can change the size of the text for mobile devices so if something's like too big which happens a lot you can adjust it here on mobile so you're just going to go ahead and scroll down now we went ahead and we disabled that background image because you can see here how the background image just doesn't really fit well because it kind of stands out alone so we went ahead and we hid that we also hid the 50 because remember earlier how it just was below the button and it just didn't make a lot of sense now i can actually put this maybe above the button and then maybe center align it and um enable this you know on the website again but i just felt like this was just a lot more cleaner and it just looks a lot more friendlier you know we have the shop now button so over here as well we can now see that these are stacked on the top of each other and this looks clean you know it looks pretty simple but this section right here you know it's a little confusing you know it doesn't look well so we can adjust this so let's click on the pencil icon here and uh you know there's a few ways on how we can do this you know we can align it to the center and maybe we can even change the text or the width you know like that or we can say you know what's um you know i want to change the text to a different size you know maybe we can you know push it like that but if you do that you want to change the width as well so just remember that when you are optimizing it you have this mobile preview here and this allows you to just optimize it for a mobile so i do think that is a lot nicer than what we had before all right and let's keep scrolling down here we have this section now we disabled this for tablet devices because it just didn't look well it was too big but i think this looks a lot nicer you know it's more structured it's more compact and i do like the like the the way this looks uh this section as well looks pretty good you can see this section is a center of line that looks a lot nicer we could also you know center align this section as well for mobile devices so i'll click on the column icon here and for the vertical align i want to put this as middle and also center so now that kind of centers it for the mobile device and let's keep scrolling down and i think that's everything you know i think that looks good everything else is uh these are all structured really nicely i do like that so there's just some small modifications that we could have done to make this a little bit better but overall i think you guys get the points i think you guys can understand how to optimize your site for mobile i'm gonna go ahead and make this a lot larger now by uh i'll first update this and now let's go back to responsive mode so let's just take a quick look at the site just to make sure that everything is still correct uh right away you'll notice that the best 2020 collections is still on the left side however for the mobile device we put it in the center remember so it only reflects on the mobile devices we'll keep scrolling down sometimes guys i got to be honest sometimes when i'm working on elementor in rare cases it'll actually mix up the um it'll actually mix up the mobile and the desktop if that ever happens just go back and change it again sometimes it might be weird but overall you should see it work just fine so now if you guys are still not sure if your site is properly optimized for mobile google actually has a mobile friendly test where you can insert your url and you can get tips from google to see if your website is optimized for mobile so what i'm going to do is i'm going to copy this and i'm going to paste this here and let's see if our demo website passed the test all right cool so now you can see that the website has passed the google mobile friendly test so it says that this page is easy to use on mobile devices and guys that's very important because there was a new algorithm update that says if your site is not mobile friendly they will push you lower down in the rankings so you really want to make sure your site's optimized for mobile devices i really hope you guys enjoyed this section i showed you guys how to customize the cart the checkouts and also the my accounts i've also showed you guys how it's to optimize your site for mobile don't forget to like this video and let's go ahead and move on to the next section all right so your website's coming along you know it looks good we have products and uh we're progressing here so let's move on to step four and let's go ahead and introduce you all to the theme customizer and i'll also touch base on what plugins are now the theme customizer controls parts of the website that the page builder might not so let me go ahead and show you guys a little bit about the theme customizer alright so in this section i'll be talking all about the theme customizer i'll also be touching base on plugins so to access your theme customizer you'll click on customize here at the top now in short the theme customizer controls parts of the website that the page builder normally does not for example we have this header and we can adjust this header using the theme customizer it also controls parts of the blog and also the shop page as well but let's just go ahead and dive into the header first so here we have the header builder and here we can go ahead and build out a custom header for example if you want to go ahead and add a widgets you'll click on this little plus and you have some widgets to go through now this is the free version of astra they do have more elements in the pro version but you don't really need to buy the pro version to be honest let's say for example you want to add a button right so i'll take this button and i'll uh here we go i'll drag it over here behind the primary menu so now you'll see that we have a button here and we can design this button by just clicking on it and here you can change the text and you can also put a link maybe to your shop page right so for example this is my website and here i have the shop page i'll just grab shop page one this is my demo websites and i'll copy this and then i can go ahead and paste that link there like that now you can always design this button as well you can design the text color the background color and you can also give it a border radius so you can have it a square or also a circular style if you want to go that route and these are just design options so you can kind of design the padding make it larger and stuff like that so let's say for example you want to add another element you'll just click on the plus section and then maybe here we can add in like i don't know like social icons or whatever and we'll place that uh right over here right yeah i mean whatever you know you guys get the point and then if we click on the specific elements we can then go ahead and add in more social websites and then we can design this as well under the design tab so you can design and customize this any which way you want and for the design i'm sorry the general you can always add in more social i uh i guess want to say social media websites or social apps or whatever you want to call them so yeah you can go ahead and go through those options you can also do something like show label which i believe it shows the actual uh website so instagram twitter facebook and stuff like that now this actually might be more helpful on a different row because you can see how this row is just too cluttered so i can take this and drag it to the top like that and what that will do is that will create a new row and then also you can design and customize each row color so for example we have this top row now right if i click on this gear icon right here we can go to the design section and here we can design and customize it with the background section now let's say for example you want a transparent menu very similar to our demo here so let me go back to our home here we have this transparent menu so there's nothing there right we can do this for our our menu right here so if you click on the backgrounds all you need to do is reduce the opacity of the background to zero so for example i can take this and drag it all the way down and now you'll see that we have these icons here and now this is transparent and you can do the same thing for this middle row so for the middle row under the design tab you can go to the background and just make that zero again now you might notice how we have this little tiny border and that is from this here so you can just change that to zero and that gets rid of the border so now there is no border so you can do that for the first one and also for the second one by just removing the border like that and if we look at the website now you'll kind of see that it looks very similar to our other website just because we moved the image a little bit but overall it's pretty much the same exact thing now if you do want to add in a gradient on your background you can click on gradient here and let's first go ahead and turn this color back on here or the background color the opacity there we go you can add in a gradient which essentially just uses like a two colors you know so you can see here how now the menu is gradients so you can add in a gradient you can also add in an image however uh you might have to have a really good image that'll work because uh it'll just look really stretched out and really ugly but you still have the option to do that let me go ahead and change this back to zero that is just not working ugh there we go and actually let's just change it back to white i like white i think white looks a little bit nicer here we go change that back to white and also well we'll go ahead and show this and we'll do the same thing for the second menu right here and we'll change that also back to whites like that so yeah you guys get the idea now here we have site logo a site title and logo now this is where you can upload your logo now i do not recommend getting free logos you might have seen videos saying get a free logo you cannot use those logos legally because you cannot copyright them and uh yeah so they're pretty much useless i recommend going to websites like fiverr.com you guys can go to uh my affiliate link right here i think i do have a discount code i think i'll leave it in the description it's like 10 off your first order but you guys can get logos for little as five dollars so do not use free logos because you cannot use those uh in the real world they're just kind of like for fun go ahead and get rid of that but uh here i just type in logo right and then you can actually set your budgets to something like uh zero to ten bucks right and these guys are actually really good you know to be honest i got my logo from these guys and you can see that they make some really nice logos for as little as ten dollars and just make sure that it's a unique logo make sure they're not giving you that they've you know a logo they've given to a thousand other people because then your logo is really not unique so yeah you can go ahead and check that out it's a great resource to get logos and actually get help for your website as well so now that you guys understand a little bit about the menu we can go ahead and go on to the next sections so these other ones are just very you know very i guess you want to say like uh ideal like blog you can adjust the blog here we're not going to really cover the blog in this video because that can really make this video another one hour long but we're just going to skip the sidebar and the blog but i do want to talk about the footer and also the woocommerce section which is the shop page so first let's go to footer builder so when we click on footer builder it now takes us to the bottom of the page now you notice on this website right here if we scroll to the bottom we have this is our footer now this is a custom footer that was created with the elementor pro version and we will cover the theme builder in the very next section so we can have custom headers and footers with the pro version however you can also use the theme some people decide to use the theme whether you're a pro user or free user you can still use the astra for uh your footer so for example you know we can put in html1 and this is just text don't let html scare you this is where you can just put in text like here i'll just grab in some demo text and this could be like about us right so this can be something about your company or whatever you want to talk about you can also align it like that and then here you can add in another widgets or a html so a widget is essentially blocks now so there was a large update with wordpress and they are now kind of phasing out uh widgets with blocks or they're calling them block widgets now but they're essentially blocks so let's click on got it now blocks are just basically widgets except they're using sort of the gutenberg blocks as well but let's say for example you want to add in something here like an image you can just put in an image here maybe this can be like a link to something i don't know you know whatever you know there's there's a lot of widgets and stuff like that and also you can keep doing that through other various parts so here widget two and you can go ahead and add a block and this could be like a paragraph maybe something like about us right or i don't know something like that so about us and then you can talk about your company or whatever you want to talk about stuff like that now there are other various widgets that you guys can use like there's a facebook like box there is a lot of other widgets that you can download for free in the plug-in section so that's kind of why i introduced these at the same time because they kind of go hand in hand but yeah just like you did with the header you know in the footer you can add widgets and stuff like that so just kind of mess around with this on your own free time get comfortable with it but that's how you can design the footer with the astra theme now let's talk about the actual shop page so let's go ahead and go back and we have woocommerce and if we click on woocommerce let's go ahead and scroll up let's click on product catalog so the theme customizer also allows you to customize the shop page if you decide to use the default shop page so you can take out reviews for example we have like these ratings you can take out the ratings the add to carts you can move that around to somewhere else you can have a specific amount of columns you can also disable the sidebar if you don't want to have a sidebar so there are just some few options here that you guys can kind of go through and check out uh for your shop and also it works for single products so for single products as well if you click on this you can disable breadcrumbs so you don't want breadcrumbs you can go ahead and disable the breadcrumbs which essentially was just these links right here above the title so there's just so just a few options here that you might want to go through also store notice this is actually pretty cool let's say for example you have a sale you can enable the store notice and this would be something like gets 20 percent off 20 off uh the store with coupon code daryl right and you can add a store notice here at the top now let's go to the cart page so with the cart you can enable or disable cross sells if you choose to do that but let's go to the checkouts now so the checkout is the last form that people go to and there is a few things here i do want to talk about you might need to add in a terms and conditions page so for example if someone buys something on your website you might want to create your own terms and conditions page and also a privacy policy page as well now there's two websites you guys can use you can use this one it's a free terms and conditions generator and all you need to do is just input your information i will leave links to these in the description of this video they're free resources you just need to make sure that you enter in your information also the privacy policy you can go ahead and input your information and it will generate your privacy policy so once you create your privacy policy and also your terms and conditions all you'll need to do is assign that page to this specific part so i'll go ahead and create a page really quick all right i'll go to plus new and page and then this will be like my privacy policy or maybe even terms and conditions and i'll just paste it in there like that and then i'll publish and publish and now if we go back to our privacy policy page we can then assign the privacy policy page to this so what that means they'll have to actually check mark that they've actually read the privacy policy and they'll have to check mark as well the terms and conditions page and uh yeah so that's just a few things that you can add to your ecommerce websites i think you might really want to think about your terms and conditions because if someone buys something and then they have a problem you know maybe you can say well in the terms and conditions we don't offer refunds or or that's really up to you and your business now these other options right here are pretty much just not really needed too much because again the page builder controls most of the work now one thing also as well i didn't really upload my logo now right here under select logo i can upload the logo in the images i gave you guys i use this logo that we created right here and i'll just select that and we can crop that image but i kind of want everything to display click on crop and now we need to adjust the size of this logo because it's a little bit too big so let's go ahead and reduce the size of that a lot smaller that's perfect and then also we will take out the display site title so we don't really need that as well and then we'll click on publish so in a nutshell guys that is pretty much the actual theme customizer just go through some of these options see if they apply to you but essentially this controls the shop page it controls the header and footer and also the archive pages which is like the blog archive and your categories and stuff like that now let's go ahead and talk about plug-ins really quick so let's go and close this so in short guys plugins are basically applications for your ecommerce websites however i do want to give you a word of caution do not add too many plugins because that might cause conflict and errors try to keep your plugins under 10 per so for example under search plugins i'll type in notifications and there are tons and tons of integrations with woocommerce and plugins like for example we have this floating notification bar which adds a bar at the top we also have a push notification so you ever been to a website where you have to accept push notifications well you can have that on your website also this one right here notification x this will allow sales pop-ups on your websites and we can click on screenshots to get an idea here you guys ever been to those websites where it says like oh hey you know someone just purchased something you can see here how this plugin will actually add that to your website so there are just tons of plugins to go through now some of these plugins they also add widgets so when you install a plugin it'll create widgets for you as well but um really quick let me just go to live chat really quick if you guys want to have live chat on your website you can also just type in live chat and there again is tons of plugins out there with live chat tidio chat is probably one of the more popular ones also talk this is also a really popular one and again this adds live chats to your websites now there is one plug-in i do want to talk about really quick and this is the email customizer now to be quite honest the default emails with woocommerce are very very ugly and you guys can use yay mail this is a really cool plug-in that i found and you guys can install this and use this on your website so what this will do is that this will take your boring ugly woocommerce emails and it'll turn them into something a lot more modern and nicer and the great part is you guys can fully design and customize the emails that are sent to your customers so for example yay mail i'll click on start customizing now you don't have to do this i'm just giving you a brief kind of example of how all this works so here is our current email and this is what's being sent to all of our customers and with this plugin you can go ahead and change like the background color to kind of match your brand so i think we're using like that ad0001 right or something like that i think i think that's it right this one or is it that it i don't know it's something like that so we can kind of modify and design and customize our uh our email box so for example if we want to add in like an image we can drag an image there and then upload it maybe here we can you know change the image add something and you know it's a drag and drop builder so you guys can kind of understand how all this works and then align it and it's very similar to elementor now we can click on that and then maybe even add in you know a text list or something so i'm just introducing you all to this plugin because i think that these default emails are pretty ugly and with this you can change the fonts you can change the color and you can customize the emails to match your brand so that's just something to look out for so plugins are very helpful they're a big part of wordpress and with no plugins wordpress would be very limited but there is more than 50 000 a wordpress plugin so there's usually something to me for everyone's needs all right party people hope you guys enjoyed this part of the video now in this next section we are going to introduce you all to the elementor theme builder let's go so your website's coming along pretty nicely let's move on to step 5 where we'll be talking about the elementor pro version now if you guys do decide to purchase elementor pro we do have a link in the description of this video if you guys do decide to use it it does help us to continue to make these tutorials and layouts for you all for free so for the elementor pro version we'll be first creating a header and a footer and then i'll be showing you how to create a custom shop page a custom product page and also a custom product category page for your ecommerce website you guys ready let's get started [Music] so let me explain the theme builder every theme 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 alright welcome to the elementor theme builder tutorial now in this part of the video i'll be explaining how to use the elementor theme builder we'll be showing you how to create custom product pages custom shop pages and custom headers and footers for example you'll see here how we have this header with a transparent menu now notice if you go to another page here how it's now a white background so this was all done with the elementor theme builder we actually have two specific headers on this website also if you go to our shop pages i'll just go to shop page three you'll notice that this is a custom shop page so here we have our products we have this custom sidebar at the end and uh yeah and we do have a few shop pages so this is shop page three this is another shop page that we created so you'll see that we have products and we have this really cool sidebar right here not necessarily filters but we just decided to add in promotions for this so it just really depends on what the user wants so you can either have the sidebar widgets or promotional sidebar also the product page so the elementor theme builder can create custom product pages as well and we will actually give you guys these templates for free in this video just to help you guys you know follow along and also it's like it's appreciation for you guys watching this video uh this far so uh yeah you will receive two different uh product pages and also uh four different shop pages now in order to get the elementor theme builder you guys will need to purchase the elementor pro version so if you guys go to any of their plans and you purchase them you guys will get access to the theme builder so the theme builder is included in all of their plans you guys can use our link in the description and it does help us to continue to make these tutorials for you guys all for free and give you guys free stuff you know and free free designs and you know web design is not cheap guys it's really not but let's go ahead and just jump into it so here we go we'll first go to our dashboard and the first thing that we're going to do in this video we will first create a custom header and a custom footer using the elementor theme builder all right and we will scroll down to templates and click on theme builder now we're first going to just make a standard header and footer and what i want you to do is click on this um new theme builder this is like the old one it's depreciated and it's been depreciated for about a year already but they still have it but just go ahead and click on try it now all right so now you'll see that we have this header and footer and all of these different pages so the theme builder essentially will create a specific style for specific pages let's just first start with the header so i'll click on this plus icon now we also have access to a lot of these really cool templates that elementor has provided us so they do have quite a bit here and you guys can just kind of go through some of these and check it out now what i'll first do is i'll just keep this very basic i'll just uh click on insert and i'll just give you a brief overview about the theme builder and how it works so now you'll notice that we have this specific header right now you can design and customize this just like we did on the current website so you can click on this and you can go to the style tab and you can change the colors the fonts the padding you can add in animations just like you're building a normal websites except now we can do it for the menu which is uh which is pretty cool now also when you're using the theme builder you will have access to new elements you'll notice right here how we have site logo site title page title and also a nav menu now the nav menu is pretty important so this is the actual menu so i'll delete this and let's say for example you created a menu right and you want to apply that menu to the actual header now you'll see that the menu that we have created or that i have created in my website is now available now if you have different menus you can display different menus for your uh header you can also have specific headers for specific pages if you want to be very dynamic so you know we can change this to vertical i don't think that would look good yeah that would not look good here you know but uh you know we can change it to uh over line i think that's where it goes above you know yeah that doesn't really work out maybe just underline and then change the color to our brand right something like some sort of red oh that's that's the hover option so here we have hover and now we got to change that to like black or something that that looks just terrible so that looks a little bit better right so you can see how we can you know design this and stuff like that now also here we have this button and this can go directly to your shop page now if you don't know how to do that we can go to our demo website here and uh for example just pull up a shop page that i created and uh you know i'll just copy this link and then you just go ahead and paste that link in there like that there we go so that's pretty much it and then you can paste that link and then if they click on it they will then go to this specific shop page on your website now there is one element here that i do want to talk about i'm going to quickly go ahead and delete this and this this is the menu cart now let's say for example people are shopping on your ecommerce website you really want to make sure that you have your menu card available because when people add something to the carts they'll get this really cool little like pop-up here and they'll kind of notify them of what's in the cart for your ecommerce store and just remember you can fully customize this there is tons of options here to make it you know bigger to change the position and also you can change the style you can make it bigger or smaller and all these other cool options so that's just a quick little rundown of how to use the the elementor theme builder for your header now let's say okay well we created this how do we actually apply this to the website well let's do that on the bottom right here we have publish so go ahead and click on publish now when you click on publish you'll get this display conditions so where do you want this header to be well we can go ahead and decide where we want this header so here i'll click on add condition so here we have the entire site right or you can say i want it only on the woocommerce pages so for example i want to take this header and apply it only to the shop page and then we can create an additional header for the landing page or whatever you know so there's a lot of different ways on how to approach this however i will just go ahead and put on entire sites and click on save and close and there is our new menu now of course we need to make some changes to it we need to add some padding to the top and the bottom because it's too it's too thin right but if we go to any page on our website we will now see this menu across the entire website so yeah you can basically add a custom header and then we can also add a custom footer which we'll do in the very next section so let's go to the dashboard here and it's the same thing you know so for the theme builder we'll go and click on that and for some reason we have to keep clicking on try it now i don't know why guys sorry that's it's out of my control you know i'm just the messenger here and then we'll click on footer and click on little plus so now we can go ahead and use some of these footers right here so they have a lot of different footers and all you would need to do here is just go ahead and insert that footer onto your site and then do the same exact thing for the uh the footer however i did create a header and footer for all of you that i would like you guys to import to help you know make your site a little bit more consistent with the brand so right here we have this little import right and we'll click on select file now in the folder that i gave you all you will see a header and a footer builder jason so go ahead and click on open now we see the footer so go ahead and click on insert alright and here is the footer that we have created for you all so we have these columns and we have an email subscribe we have some social icons we have this really cool section here which is call to actions and what we did to be really creative is we did not want to use a plugin so we kind of used a call to action here and we added in the um i guess you want to say the call to action hover so when you hover over it it will then show the specific element now what you can do here is you can link these to your uh your social uh i guess your social profiles by going over here to contents and going to link right so here you can link your social profiles so that's just a really creative way how we thought to introduce you know social platforms without using a plug-in now there is one other thing too so we just use icon list here and all you need to do guys is just go ahead and link them to that specific page so remember earlier how i said there's really no right or wrong way to do this it's just really all about what gets the job done we use the icon list because the icon list is the most responsive we use the text modules but when you have a bunch of text modules stacked against each other on different devices it doesn't always come out the best so that's why we use that specific module so yeah i know we're really really creative there but uh you're welcome and here we'll click on a publish here at the bottom and the same thing you know i just want to display this on the entire website i don't think people would want different footers on different parts of the page that really just wouldn't look good now we actually added this to the bottom of the website but i also do want to use the template that i created for you guys in the header so let's do that let's go back over here to dashboard let's not look at the website yet i wanna i don't want to show you let's let's make sure let's add the both header and the footer and then we'll we'll uh we'll take a look there so here we go try it now and then for the header option what i'll do is i'll go ahead and delete this because uh this is just just it's just it's just not working out you know it just looks bad we're not it's not working instead we're going to import that header template i created for all of you and uh yeah that'll look a lot nicer than the current one so here we go i'll click on import templates select the file and select the header theme and then open it now we'll go ahead and go to the uh where's it the header and insert that all right and next we'll just click on publish and we will add this on the entire websites save and close all right now this looks a lot like the demo right i mean the header would just made such a big difference so now we have this landing page here at the top and we also have this really creative footer here at the bottom i'll probably fix this guy sorry i don't know what that's about some you know something weird you know but you guys get the point you guys can easily just delete that or change it or whatever so now that we've created a custom header and footer now let's go ahead and create a custom shop page right so we go to our shop page we'll now see that we have the header at the top right here and we also have our footer here at the bottom but the problem is this just doesn't really fit well now it just doesn't sit well we need to kind of make it look more modern and need to kind of add in like the style that we're using right so let's go ahead and go to dashboard and then we'll go to templates and theme builder and we'll go to try it now now just like we did for the header and the footer we can now do this for the shop page so let's click on add new and we will see it's called the product archives that's what they call it the product archives so go ahead and click on product archives now elementor does give us some default templates that we can use from however you know for this part we're not going to use their templates these just don't really look well i think they're not as creative i'm not trying to brag i'm just saying i think the templates that i made look a lot better than this so let's go ahead and upload the templates that we created so here i'll click on imports select the file and the one i use is the uh we'll use shop page three i mean their shop there's four shop pages here i'll just grab three you know why not and here we have shot page three and i'll click on insert all right so this is the shop page three and all you need to do here is you can go ahead and just design and customize this to you know whatever whatever you want to add so you'll see right here that this is an edit menu anchor and i'll just go ahead and just give you a quick overview about this so a menu anchor let's say for example you want someone to scroll to a specific part of the page when they click a button right you'll go ahead and put in like a number right so a number sign and then maybe 56 or something like that now over here you will then change this to 56. so that means if they click on this button it will then drag them down to the shop page so that's what i did right there i added this menu anchor so when they click on shop right away it automatically takes them down here where they can just go ahead and start viewing the products also on the left side you notice how we added in the product categories we added a filter by price so over here we have product categories right product categories so we use the product categories and also the filter by price that allows people to filter by price and uh yeah so you can kind of add specific elements or widgets to this page if you choose to do that so i hope you guys enjoy this shop page you know we did create four for you all so on the demo website here this is the current shop page and it just looks better when there's more products now also you might notice how these categories have images if you go to your products and you go to categories you'll then see a list of your product categories from here you'll click on edits and you can actually assign an image to that specific category so for example right here we'll just add in a category or an image like that and then we'll update it and then from there when they see that specific category on your website it will then display so that's how we achieved that specific style and look we added images to each product category just to give it some more design and decor because um you know it's a really nice looking shop page we just wanted to really emphasize it and just make it look as good as possible now let's say for example you want to add another shop page on your store for maybe a different product category right let's do that so you guys can go ahead on your own free time and just go through these shop pages add whatever you want again we have created a few for you guys so we do hope you guys enjoy these free shop pages but let's go ahead and just go back here before we go on to the next section let's just publish this so here i'll publish it and i want to add a condition so for example right here this is going to be our shop page and that's it that's pretty much all we have to do and then click on save and close and now we can go ahead and go back to our website right here and now if we go to the shop page you will then see that this is our new custom shop page now whenever you create products automatically they will be displayed right here now there are some few touches that you might need to do and this is controlled by the theme so for example uh on the theme you might need to change this to a specific um of a color just because i don't want people to say this wasn't what you showed me in the demo you know so under the global under the color section you can actually change the color palette here to black and that should change all the buttons here uh to that color so that's how we achieve that so in the theme customizer if you're using the widgets you will need to go ahead and adjust the theme color to kind of match that style so now let's say for example we created our shop page right however we also have different product categories maybe you want to add in a different page for different product categories for example if i click on jackets here it's actually going to revert us to the old default uh category page because we haven't assigned a product category page to these specific products so we can do that for all of the product categories or you can go ahead and assign a specific shop page for every single product category and be as customizable as you want so let's do that let's go ahead and go to our dashboard here and we'll go back to our theme builder and let's go to try it now again and from here we're going to go to product archives and just click on plus under product archives now instead of using these templates we'll go ahead and use the templates that i provided you all so let's go ahead and import one of those templates select file and we'll just use uh i don't know shop page shop page 4 this time why not all right and then i will insert shop page 4 at the bottom okay so we have shop page 4 and this is going to be our new shop category page however there is one thing that you need to do in order to modify this layout to meet your specific needs we first need to click on the products here and we need to actually add the category to this page so this is going to be the jackets category right so over here we have include by term and we're going to enter in jackets jackets product categories jackets there we go so what this means is whenever you add products to the jacket category all those products will be displayed right here for you guys so it'll automatically sync up to your store and it will automatically upload those products to the correct page all right so let's go ahead and click on publish here and now we're going to add a condition so now it says all product archives however we don't want product archives we want to have product categories this time and i want to select jackets right because jackets is our product category for this specific page or whatever so here we'll click on save and close now let's go ahead and go back to our websites and first let's just go to the shop page right and let's clear the cache make sure you know make sure everything refreshed now let's say for example we are on this page right and now we'll click on jacket we will then see that this is our new jacket page and all of the products that we create for jackets will be displayed right here automatically so you can mix and match shop pages or you can use the same shop page for your entire website and then maybe just change the title to jackets or to shoes or whatever for each specific product category i did that last year but this year i decided to actually just create four different shop pages just in case you want to have some diversity over your shop pages so now that we know how to create a custom shop page and a custom product category page let's move on to the next section and create a custom product page let's go back over here to the dashboard and now let's create a custom product page so let's go under templates and theme builder i'll click on try it now so next we'll create a single product so here we have single products and we'll click on the plus icon and here they give us some templates to choose from and these are actually not bad but the fact that they're only cupcakes just kind of makes them weird but i'll just go ahead and just give you a visual example of how to create your own custom product page and then we'll use the demo again and i'll dissect it and explain how i did everything so the first thing i want to do is create a two column row right and now that we have the theme builder open for the products we now have new elements so for example we have the breadcrumbs which are these right here so i'll go ahead and just add in some bread crumbs right some bread crumbs next i'm going to add the product title so this is the title of your product right so men's jacket it does give you a good visual next i'll enter the price so here we have the product price so this is the price of the product and then we need to add some description right so over here let's click on this and we'll find the product description so the short description i'll actually put that above the price and then below that we'll add in the add to cart button so this is the add to cart we can also add in the product rating so product rating maybe we'll put that uh right there so if you do have ratings uh they'll be displayed right there and remember you can adjust all this like the star color the fonts and everything else but i'm just giving you the overall structure next i want to enter in the metadata i believe that's what it's called right the metadata like this is like the category and the screw number and all that stuff and on the right side i want to insert the featured image so let's click on these dots and here we have product image so this is going to be the image of the actual product now one thing is that uh this is too close to the top of the screen so under the edit section we'll click on the advanced tab and then we'll add in some padding here to the top so make sure to unlink this and let's add some padding here to the top i don't know maybe 100 i think 100 is good right and then we'll also add maybe some to the bottom we'll add like 50. all right cool so now that we have this this looks pretty good and then maybe below here you can even add in the elementor widgets for example you can see on this page we just added like a social icons so if you want to add in social icons you can do that drag that there and then maybe you can add in like a an image of like your shoppers approved or something or whatever you want to add in but yeah that's that now in this next section i want to add in uh some additional information and also the upsells so here we have additional information or we can even enter in product data tabs product data tabs and that'll also display additional information and then below that we can enter in the upsells right which are recommended other products all right cool so that's pretty much it at this point this is a custom product page and you can customize everything so you can drag in elements you can mix and match elements you can change the background color to anything that you want you can even use gradients you know and this can be your new product page so that's just an example of how to create one from scratch i'll go ahead and clear that now once you're ready you can go ahead and click on publish so now i want to assign this specific product page to our current products so for added condition we can select products or we can even do a custom product categories so for example products in specific categories we can create a template for that but i'm just going to you know just select products and i'm not going to get too crazy i just think that we should only have one layout for all the products and i'll click on save and close now let's go ahead and test this out so i'll open up my website in a new tab i'll click on shop and i will click on any product and there you go so now we have our custom product page and it looks great of course all we need to do here is change the fonts and the colors but everything is appearing everything looks really good so we have our description now we don't have the additional upsells and that's probably because we don't have enough products on our on our e-commerce websites but once you added more products and you assign them they will display at the bottom very similar to this right here you'll see at the bottom uh we have our related products so just make sure to add in upsells and then the upsell products will be displayed at the bottom of the page now let's say for example all right darryl this looks nice but uh i want to use one of the templates i'm glad you guys asked let's use a template we'll delete all this and we'll use one of daryl's templates so i'll click on add a templates and i will insert this next i'll click on select file and i'm just going to select we have two right i'll just select the first one okay and this is our product page now i know it looks a little weird but that's just because there's nothing to propagate yet but uh here we have the product title right we have the product rating we have the product images and then the product price we have the short description so that will display here and then we also have the add to cart and then the product meta right here we have the product images now you might notice that this section right here is grayed out so you'll see that this whole section is grayed out we grade out specific sections because on mobile devices it just doesn't display well so for example let's say you have a section that just doesn't fit well with mobile devices yet you feel like it looks good on desktop i'm going to click on edit the intersection and under the advanced tab we'll go to responsive so you'll see here how we hid this on the desktop yet it only displays on tablet and mobile so you can basically hide specific sections for specific devices just in case you feel that it's not really suitable for like either the computer or for tablet or mobile but that's how we created this section it's a three column row we mix and match elements using some of the elements from the home page and then we use this short description and then we added in this icon list here at the bottom and if we scroll down here we added the additional tabs right the product data tabs and then here we added the product related so let's go ahead and assign this to our page so i'll go to display conditions and i want to add this to all of the products and then i'll just find any product it doesn't matter which one i select because the product template will be assigned to all the products and there you go so now we have the product here we have the title the price everything looks really clean it looks really nice so i do hope you guys enjoy this product page here's the description and then also if you do have upsells they will be displayed right there you can feel free to take the upsells out or you can add anything you want in there so that's how you guys can create a custom product page for your products on your ecommerce websites alright party people hope you guys enjoyed that part of the video hopefully it wasn't too boring but now you know how to fully customize your shop and also your product pages as well feel free to use any of these templates to help get you guys started with your ecommerce websites now let's go ahead and move on to the next section where we're going to talk about the woocommerce settings so the elementor theme builder allows you to build really nice shop pages and product pages on your ecommerce website so now that we talked about the elementor theme builder let's move on to step six where i'll be talking about the woocommerce settings the woocommerce settings is where we adjust our shipping our tax and also we can add coupon codes and all sorts of stuff i'll also be showing you how to implement payment gateways onto your ecommerce website so you can start accepting credit card payments on your website you guys ready let's get started okay so in this part of the video i'll be explaining how to adjust the woocommerce settings so i'll be going through tax shipping and also how to accept payments on your ecommerce websites so first let's go ahead and go to our dashboard and we're going to go to the woocommerce setting options so woocommerce and click on settings so i did just get this notice i guess they moved coupons around so i'm going to remove this coupon menu they added coupons somewhere else but we'll talk about that a little bit later so i'll click on settings here first let's enter in some general information about your store so where is the store located if you are a brick and mortar store then you want to go ahead and select a location based off where you're from now where are you selling to you have a few options here you can sell to all the countries you can sell to all the countries except or sell to specific countries now since i'm a business in the united states i want to sell to specific countries only and here you can list a list of the countries you want to sell to so for example if you only want to sell to united states you can say i want to sell the united states and then also i want to sell only to canada right canada and also mexico because they are the closest to my shop and here you have shipping locations now if you want to ship to specific countries or all the countries you can select that here as well so i'm going to say you know what i want to ship to specific countries only so i want to only ship to the countries that i can sell to right i mean that makes the most sense so i'll put uh we'll put canada here canada and i'll select that so i can sell only to these countries and then i can ship to only these countries now if someone tries to buy something that is not in these countries they will be blocked and this is a good idea because if someone really far away maybe from united states likes in uh i don't know lithuania or something they try to buy one of our products that shipping is just way too much to deal with so i just choose not to do business with them so that's why you want to select specific countries and then here we'll go ahead and scroll down you want to make sure that you enable taxes and also enable the use of coupon codes because i'll be showing you later how to set that up and then scrolling down we have the dollar right the currency you can select your currency here i'll leave mine as dollar and then click on save changes this notice is really annoying guys and there's nothing i can do about it basically they're just letting me know that coupons moved over here to marketing and for some reason they just keep displaying this notice so just bear with me there's nothing i can do about it but now let's go to tax so next let's click on products from the products section you can change the measurements and you can also enable reviews on your products if you choose to do that and that's really up to you if you want users to vote on your products you can do that we're going to skip tax for now and we're going to go to shipping we'll come back to tax a little bit later all right now the first thing that we're going to have to do is we need to add a shipping zone so basically what do you want people to pay for specific shipping zones so let's add a shipping zone and this one i'll just put to united states for this shipping zone united states and for the region this is going to be the us so for me what i'm saying here is this is going to be the cost for shipping in the united states and i will add a shipping method now we have a flat rate free shipping or local pickup for this example i'll select flat rate and click on add a shipping method next we need to apply a price for the flat rate so how much does this cost let's click on edit and we have the flat rate right and is this taxable i'm going to put no and then the flat rate for shipping in the united states is five dollars and then i'll click on save changes so now you'll see that we have united states as our shipping zone and then we also have this other option which i'll talk about a little bit later but uh you notice here how we don't have mexico or canada so we need to add them to this because we allowed shipping to mexico and canada so let's click on add a shipping zone and for this section i'll do mexico and canada why not this will be mexico and also canada and now i will add in a shipping method a flat rate fee and we're going to charge them i don't know what should we charge them let's charge them 10 bucks so they're going to be charged 10 for shipping that is not taxable and i'll click on save changes okay now let's take a look at our shipping zones again all right so at this point you can see what's going on we're usa is being charged five dollars and then mexico and canada are being charged ten dollars now let's say for example you are selling in nevada and somebody from nevada buys your product right maybe you don't want to even charge them shipping because the shipping fee will be a lot less so let me show you all how to assign free shipping for specific regions so i'll click on add a shipping zone and for the zone name i'm going to put nevada for the regions we're going to select nevada here and then i will add a shipping method and here i'm going to select free shipping let's click on add a shipping method then i'll click on edit under the free shipping so free shipping requires whats we can set specific conditions for free shipping for example a minimum order amount that means the user must spend at least fifty dollars on our store if they hit fifty dollars then we will give them free shipping you can also do a minimum order or a coupon or both it's really up to you we'll create coupons a little bit later but you can create coupons for free shipping but i'll just select a minimum order amount of five dollars and then click save changes all right now let's go ahead and go back to our shipping zone here all right so now let's clarify so people in the united states will be charged five dollars right people in canada and mexico will be charged ten dollars for shipping however people in nevada will get free shipping if they spend a little bit of money on our store now let's say for example somebody buy something maybe on the tip of mexico or maybe somewhere around the country that we didn't set the options for and there was some sort of accident right we can select the locations not covered by your other zones so let's click on this right here now for flat rates i'll click on edits and i want to select a cost of eight dollars so what this means is let's say for example someone buy something on our store that we didn't assign they will be charged eight dollars as a flat rate because sometimes accidents happen you know sometimes it does happen it's going to click on shipping zones and that's it so our shipping is now configured now shipping could be very dynamic you know you can ship based off of weight off of quantity and there are other plugins like the woocommerce table rate shipping plugin and i have a full tutorial on that in the description below it's about an hour long and it talks about how you can ship based off of weights off of quantity off of dimensions i mean it gets really really advanced but this is kind of like the basics of shipping so that's how you guys can kind of assign shipping to your ecommerce website next we have accounts and privacy in here you can allow guest checkouts or you might want to allow users to create an account on their my account page or during checkouts also you have account erasure requests and this is like removing personal data from your store and then also inserting your privacy policy and your checkouts forms here as well so that's what that is referring to so next we have email notifications and i did recommend the plugin called yay mail which can help you customize your emails for your ecommerce website instead of using the bare html because it's really not suitable for beginners and most people will have no idea what they're doing so i recommend using the yay mail plugin in order to customize your email forms so the next step is we're going to install some plugins for e-commerce store like payment gateways and also a plug-in to automate our tax now if you're in the united states we can have automated taxes on our websites yet we can also set specific rates uh depending on what country we're dealing with and i'll talk about that in just a bit but first let's install a few plugins so let's go to plugins and go to add new and under search plugins we're first going to enter in stripe so we're going to install some payment gateways and we're also going to install some plugins for tax so this is the plug-in it is called the woocommerce stripe payment gateway go ahead and click on install and activate all right and then go back to plugins and add new and now we're going to enter in paypal just type in paypal now paypal is probably the most accepted payment merchant in the world so you can be using paypal from any country now i do not recommend the new extension woocommerce created before this video i tested it out for about a day and there was just too many glitches and errors with it and as you guys can tell people are just not happy about it and i really just don't even think it works so what we're going to do is we're going to install this plug-in here it is called the paypal express checkouts by web toffee so let's go ahead and install and activate this plug-in okay and we need to install one more plug-in so click on add new and we're going to type in woocommerce shipping woocommerce shipping and this is the plug-in that we need it is the woocommerce shipping and tax and it does have a lot of active installs so it has one million active installs so go ahead and activate and install this as well now when you install the woocommerce shipping and tax you will need to sign up with jetpack jetpack is a free service that will automate the tax calculation and also help you print out shipping labels for your products so let's click on activate jetpack and connect all right so you might need to make an account with jetpack and i already have an account so just go through the process of creating a free account with jetpack and then it'll bring you back to your dashboard all right so now that we have those installed plugins we are now ready to go back to the woocommerce settings so let's go to woocommerce and click on settings all right now we'll click on tax so if you were in the united states we can now add automated taxes now these are provided by an api from taxjar.com and taxjar.com will go ahead and automatically configure the tax rates for whatever store you are working in so you'll see right here how it says your tax rates and settings will automatically be configured for nevada united states now even if you are in another country and you have a client that you are working with you can use this plug-in to help automate their taxes for them however let's just say for example i don't want to have automated taxes and also people watching this from other countries might want to create their own tax rate so let's do that here i'll click on standard rates so the first option is country code now you can find your country code by just clicking on that link and it'll give you all the country codes so you have some for aruba which is aw you have them for bangladesh india cambodia costa rica and here are all of the country codes so no matter what country you're selling from you can just insert the country code there and that will assign the tax rates so yeah that's where you can find the country codes however i'm just going to enter in u.s for united states now if you're in the united states you can actually set a specific tax rate for specific states as well now depending on where you're from you need to either charge tax base off where you are or where you are shipping to but i am not a legal expert on this so you might want to consult your accountants about that and all that uh mumbo jumbo but uh let's just say for example i want to have a five percent tax rate for the united states do you want to add tax on top of the shipping do you also want to compound that as well well i'm just going to say no so i don't want to tax on top of shipping and then i will click on save changes all right cool so now we have a tax rate for the united states but let's say for example we also want to have a tax rate for mexico and then the tax rate for mexico is going to be eight percent and i don't want that to be on top of shipping and then i will save the changes all right so now that we have a tax rate of eight percent for mexico and also a tax rate of five percent for the united states so this is how you can assign specific tax rates for specific locations and you can even go in more detail and go based off of states and even zip code or specific cities if you want to do that but that's just an overview of how you can add taxes to your ecommerce website next let's integrate some payment gateways so let's accept credit cards on our website now there are two websites that i recommend for this this is stripe and also paypal as well now if you're in the united states or europe or even south america stripe is accepted everywhere so first go ahead and go to stripe.com now stripe.com is a free service it's free to sign up and it does not cost you anything at all to get started there is a transaction fee of around 2.9 percent but i believe that is standard for all merchants in fact uh shopify charges at least five percent so you are getting a large discount if you use woocommerce also make sure to sign up with paypal now with paypal you will need to have a business account so there was a recent policy change where personal accounts can no longer accept payments on e-commerce websites and you must have a business account in order for this to work and there is a monthly fee for paypal so if you want the free alternative you can go with stripe but just remember that paypal is accepted worldwide so a stripe is only accepted in specific regions but you might want to add both to your website just so you can accept payments everywhere so first let's add stripe to our ecommerce website now we'll go over here to payments and since we installed the plugin we will now have some options for a stripe so this is it the stripe credit card and then here i'll click on manage now stripe is probably the easiest to get set up with i mean it's you just have to copy and paste uh copy and paste stuff and that's pretty much it so we want to enable stripe and then here we have the test mode and then we also have live mode so let's say for example you want to run test transactions you'll click on enable test mode if you want to enable live real transactions you will uncheck that and now this will accept live payments on your ecommerce website so go ahead and go through the process of creating an account with stripe it does take a little bit of time you'll have to create an account you'll have to link your bank account they don't really ask for any sensitive information except of a place to transfer the money to because they're holding your money so they need a place to transfer it and once you are done with that it'll bring you to your stripe dashboard so this is my current dashboard and you'll see that you have payments here and it'll just give you all the information that you need about your store but first let's click on this test mode here at the top right now this is test mode and for developers i'll click on this developer tab on the left side we're going to see api keys now this is the publishable key and also the secret key that we need to copy and paste this onto our ecommerce website so first i'll go ahead and take this publishable key and i will paste that but first let's make sure this is in test mode all right there we go and then for the secret key it will reveal this and i'll copy the secret key and then i'll just paste it in there next we need to add a test web hook secret so just go ahead and click on this link right here that says stripe account settings and it'll bring you to this page right here so next we have webhook endpoints now all you need to do is just copy and paste this i'll copy this and then click on this link and this link will open up a new browser in your window so it'll bring you to the developer section first let's add an endpoint so click on add an endpoint and then paste the url they gave you right here and we're going to basically say why we're using this web hook so this is used to capture payments cap whoa whoa whoa whoa capture payments next we need to select an events so select events and this is going to be charge so we're going to click on charge and i want to select the charge captured so basically i'm saying uh this is going to be used to charge credit cards and charge um you know so we make money so what i want to do next is scroll to the bottom and click on add events and then we're done so click on add endpoint all right next it'll say signing secret so click on reveal and this is what we need to copy and paste on our ecommerce websites so we'll go back to test web hook secrets and then we'll paste it in there also this is the statement descriptor so when they buy something from your website you might want to tell them that this is your store right so this will be daryl designer store so this will appear on their credit card and i want to make sure this captures immediately so we want to charge them right away now this is also an inline credit card form it's just another way to display the um the way to capture payment so they do have two different forms you can use here we have enable payment requests so you can use apple pay and also google pay if you prefer that or you can disable those if you choose to but i'll go ahead and scroll down here and then i'll click on save changes alright so at this point i think we're ready to run a test transaction so let's do that let's go ahead and buy something on our store and i'll just click on shop i will add this to the cart view the cart proceed to check out now this is for test purposes only so people have messaged me saying hey darryl uh you put your credit card on the uh you know on the website but you'll answer this for test mode enabled only and then we'll scroll down i will save this and click on place order alright cool so this is the checkout page now this is the page that your customers will be brought to after they have purchased your product you can always go ahead also and check your email and you will also get this thank you for your order where you will see the product that they have purchased and the price and the billing and the shipping address next let's go to our stripe account to see if the payment has been captured let's go over here and we have two payments successful but a quicker way to look at this is just going to payments here and going to succeeded and now you'll see that the 47 dollar payment has been captured and everything is working and it's connected with stripe so that's how you can integrate stripe with your ecommerce website now when you're ready to take live payments all you have to do here is uncheck this test mode and then you'll go to developers and you'll do the same exact process so go to api keys and then instead of copying and pasting the test you will do this with the live so let me go ahead and run you through that really quick before we jump into paypal so here is the payments for stripe so under the payments tab we will then uncheck test mode now we're going to enter in the credentials for the live transactions so i'll go ahead and copy and paste this just make sure test mode is not enabled and we'll do the same exact process reveal the live key and then also we're going to do this one more time so i'm going to copy this open up these tripe account settings and then we're going to do this one more time i'll add an end point just to make sure you guys get it i don't want you guys to be like well darryl you didn't show us how to do this for the live one you know which which i do get i get nasty comments sometimes but i understand it can be frustrating uh you know when you when people leave steps out so uh but this will just be uh used to accept payments right and for the live events we'll do the same exact thing we'll click on charge and charge captured and then click on add events and then add the endpoints once that's added we will then reveal this and we will copy and paste this onto our website and we are done so at this point your website can now accept real live credit cards on your ecommerce website and uh guys please don't buy anything i get a lot of people who actually really use their credit cards and they buy stuff i don't know if it's a joke or not but people really spend money and i have to refund it and it's like it like you know it's just for total purposes so please do not buy anything so that's how you can integrate stripe onto your ecommerce website and there's no monthly fee it's all free they just take a small transaction now let's integrate paypal onto our ecommerce website so let's click on the payments tab again and we'll scroll down and we're going to find paypal express i'm going to click on manage now i do like this plug-in a lot better than the a lot better does that make sense a lot better no i like this plug-in better than the default one because it's this was a lot easier all you need to do here is just copy and paste your credentials it's really really easy to do this so for the environments let's just do live mode right and now it's saying get your api credentials all you need to do is copy and paste your three apis into these boxes and you are all ready to rock and roll so let's click on the sandbox now you'll need to first log into your paypal account so they can redirect you to the correct settings so let's click on a login to dashboard and i will log into my paypal accounts alright so this is my current paypal account you guys can see i got some i got some cash there we got seven seven g's so we'll go to the woocommerce settings now make sure that this is under live mode and click on the live api credentials now i'm going to open this in a new tab all right and now it should redirect you to your api credentials now all you need to do here is click on the show and then it'll show your username it'll show your password and also your signature so for example for the username i'll go ahead and copy this and then i will paste it right there and then you'll do the same exact thing for the live api password and also the live api signature once you do that you'll go to the bottom and then you will click on there we go save changes and that's it now you can start accepting payments from paypal on your ecommerce websites now they do have a pro version i'm not really sure if you want to check it out but if you guys do i will leave a link to it in the description below of this video so let's quickly summarize we went through all the tabs we went through the general the tax the shipping the payments the accounts so i think at this point you're a little bit more familiar there are some other things that you want to check out like for example your orders tab so this is like the general overview about your order so you'll see that we have this shipping information you can change this to pending payments or processing or completed whatever you want to set that to and then you'll click on update and that'll kind of let your other admins know that all right the status is done the product is now complete everything's good to go also if we scroll down here you'll see the order notes the price you can add a private note and also you can even refund the order right here by clicking on the refund button and since this is now connected with the api you'll just click on refund and it should refund the purchase so that's how you know refunds are dealt with people ask me about that quite a bit also if you need help with shipping labels you'll click on create a shipping label and it can actually help create a shipping label based off the dimensions and based off the origin of the address now this is probably set for another video guys i'm not going to go through the shipping labels because we can talk about this again for another hour and i want to speed this video up as much as i can because i don't want this video to get too long but that's how you would create shipping labels for your ecommerce websites you also have the reports and the reports will let you know about if someone has uh purchased something on your site you'll see that uh you know we have some sales here it looks like this is being replaced by woocommerce analytics um that's going to be something new so maybe when that comes out i will talk about that now you'll see this marketing tab and they recently moved the coupons to marketing so just go ahead and click on marketing and coupons and we'll create our first coupon so go ahead and give your coupon a name i'll just put daryl now which kind of discount does this give you can have a percentage discounts a fixed dollar amount discount or a fixed product discount so this is a dollar so for example this is a 10 off coupon that's what the fix cart discount means however if you want to offer a percentage this is now 50 off your entire order and you can set this to allow free shipping and also give this an expiration date so this expires on the 26th the usage restrictions you can have the minimum spend so that means they must spend at least 25 and you can exclude this or enable this for specific products for specific product categories and so on usage limits how many times can this coupon be used well i'll just say 100 times how many times can this be used for a specific item you can select that specific item there now also how many times can a specific user use this coupon i'll just say like uh two times that's it that's all you get you know and once you create your coupon you'll click on publish all right so we have a hundred dollars in the cart and uh here we can enter the coupon code of daryl and then click on apply coupon code now this should apply a 50 discounts to the product and there you go so now we have 50 off the coupon so party people that is the woocommerce settings in a nutshell just go ahead and mess with the settings but overall i think you'll get the hang of it now in this next section i'll be showing you all how to market your ecommerce website and how to start making money with your sites let's go now let's talk about how to market your ecommerce website so it can help you make money i'll be breaking this section down into five different chapters and giving you steps for each chapter don't forget this blog post is available on my website so feel free to refer to it at any time but i'll be talking about the most important steps to follow for each chapter chapter one focus on your website optimization first don't rush to marketing strategies right away if you ignore your website then you're just wasting your money on marketing you will not be able to convert anyone if your website isn't optimized properly ask yourself this question if you bring 1 million visitors to your website tomorrow what would they say how many of them would actually buy something or would your customers leave because how your website looked step one proofread your site's content you might think you can get away with typos and grammar mistakes but the worst thing that can happen is that you miss out on a sale just because you spelled something wrong this happens just double check your website and make sure it looks good step two make sure to link all of your social profiles for free engagement what you can do to amplify the reach of your website is to bring all your social profiles together and share your content on all of your networks as much as possible this is a great way to build trust and establish your ecommerce website step 3 start your on-page seo the on-page seo is probably the most important factor when optimizing your website optimizing your website tells users what your website is all about and represents your business in the google search engine i do have two videos with ranked math and yoast that will show you how to submit your website to google and also index your website in the google search results for free this is a must do for all e-commerce websites step four capture emails it's free money emails are a great way to communicate and sell to your audience that already have an interest in buying your products always add a subscribe box to your ecommerce website so you can remarket to those customers who are already interested in your products i have a full video on email marketing with mailchimp and i will leave that in the description of this video step 5 keep your website load time under 2 seconds how dumb would it be if you lost money because your website was slow nearly 70 percent of customers admit that page speed affects their buying decision in fact the probability of balance rates increases which means people leave your website by 32 percent if the website loads from one to three seconds longer make sure your web pages are under three megabytes for each page for optimal performance chapter two the golden rules before creating a marketing campaign rule number one start with free organic options it's very easy to get sidetracked and start spending money on marketing campaigns that you have little experience with relax and start with all the free organic options first before you think of spending any money we will talk more about this later rule number two growing your business takes time you should never expect to make millions of dollars overnight it's unlikely that you'll be able to gain tons of traffic and hit six figures in a week growing an ecommerce website takes time but as long as you're consistent with your business the sales will slowly pour in rule number three avoid burnout and take breaks although it's important that you continue marketing your ecommerce website that does not mean you should do it 24 7. if you're feeling drained and burned out take a break your website will always be there and you want a strong head to manage your store rather than feeling burned out next let's jump into chapter three how to start your organic trafficking marketing campaigns the right way step one create and establish your social presence spend the time to create social profiles for your ecommerce business completely fill out all the options available to establish your social presence that includes all social networks that you think are relevant to your business remember even if there is no one active on your page or engaging with your business at the start that's perfectly fine the point here is to show that your business is alive also you might want to create an active community that will attract the attention of other customers step two find as many classified and listing websites as possible listing your website and classified and listing websites would give people who are interested in what you're offering a chance to find out more about your ecommerce websites this also helps give your website more exposure and helps users at the same time step 3 register on review websites for higher exposure review websites have high domain authority and appear high in the google search results this is why you should take advantage of them and list your website when a review website lists your website in their directory you also gain high quality backlinks that helps boost your online presence step four start content marketing on your blog the main advantage of content marketing is that it has long term benefits when you create quality content for your blog search engines will naturally boost up your ranking and organic traffic will start to increase in the long run this is the easiest way to make sales remember there is no better traffic than organic traffic step 5 sign up with affiliate programs to get people to sell your products for you affiliate marketing is finding websites that want to promote your product or service in exchange for a commission for example if you're selling a product for a hundred dollars on your ecommerce website and a blog recommended that product and converted the sale the partner referring that product would get a commission of five percent you would receive ninety five dollars and the referring affiliate would get five dollars you can also set your own commission rates as well this is a great way to get established blogs with high authority to start talking and promoting your ecommerce websites and this can ultimately help boost the popularity of your ecommerce store you can find affiliates by going to sharesale.com cj.com and also clickbank i'll leave those links to those websites in the description of this video step 6 negotiate a referral system with other websites a good strategy that more ecommerce websites are doing is reaching out to websites that sell related products or services and offer discounts for each other for example let's say you're selling men's dress shoes men who purchase dress shoes might also be interested in briefcase since you can't sell briefcases for whatever reason then you should reach out to a briefcase website or business and offer to exchange links and even a coupon code to work with each other working with other websites to get backlinks and help get the word out for your ecommerce website is a great strategy on how to bring long-term sales for your business chapter 4 paid marketing strategies now once you have exhausted all possible means to market your store organically then it's time to maybe consider using some paid marketing strategies however you should only consider paid marketing once you have made a hundred percent effort into all the free methods as possible step one off page seo the truth is you can do seo yourself and avoid spending anything but to be honest on-page seo takes a lot of time and effort and you're better off paying someone to do it for you as for finding someone to do this for you it's quite simple go to freelancer.com or upwork.com then find an seo company preferably from india pick 10 to 15 keywords including your business name negotiate the payments and then wait for the results i have more information on how much to spend and also what keywords to use on my website step 2 influencer marketing influencer marketing is all about product reviews influencer marketing is when a popular figure talks about you or your products and shares it with their audience this is an ideal tactic and is often very effective you may need to look for someone who is well known in your target market you can also check influencer marketing platforms like upfluence heapsy and mighty scout to find an influencer that best fits your needs step 3 google display network campaigns this is great for branding ever been to a blog and seeing those image banners on websites that recommend a service or product that you may have visited this type of marketing refers to the space on websites that you can find display marketing for all sorts of things google will show these images on random blogs throughout the internet and is a great way for branding google display ads are pretty cheap and they're great for branding purposes step 4 facebook ads but start slow facebook ads can be very inexpensive and is a great way to reach customers that are interested in your brand facebook allows you to search based off interest and demographic data just don't spend too much money start with the budget of five dollars a day just to get started next let's move to chapter five and we're going to talk about marketing platforms that you might want to avoid let's talk about how to protect yourself remember these advertising platforms don't care about you this is business so let's talk about some platforms with poor conversions that you might want to avoid number one banner ads on websites these are those annoying banners that you see on the sidebars of websites people who use these ads are usually from large corporations with massive budgets to waste banner ads have the worst click-through rates usually less than one percent there are just better ways to spend your money number two avoid google adwords and go with google merchants most beginners burn through their budget in seconds and weighs hundreds of dollars with google adwords it's a quick way to go through your budget without getting any conversions if you want to run some ads on google you should better use google shopping ads instead these will display your products the price and reviews in the search engine it's a more visual way to advertise and i do have a video on how to set this up and i'll leave that video in the description of this video number three just avoid twitter i do believe some businesses should have twitter accounts it's a great way to communicate with their audience to let them know about announcements and updates however when referring to paid marketing twitter has some of the lowest rois in the market out of the most marketing studies twitter's had the lowest return on investment compared to any social website on the internets twitter is mainly geared for war and people like to rage and rant on this platform it's just not the best place to spend your money with such low rois and finally let me give you my personal opinion should you list your products on marketplaces i know it's tempting to go the easy route and just list your products on marketplaces like amazon you may think it's not a bad idea and you don't stand to lose anything by doing this but the truth is these marketplaces are very competitive you will find yourself racing to the bottom with prices because large sellers who buy direct from manufacturers can offer super competitive prices for example amazon will charge you a 15 fee for selling electronics or watches so if you're selling a similar product at a hundred dollars the most you can make is 85 bucks but also remember you need to include shipping which makes it even worse now the main reason why i don't like these websites is because they hide you and they hide your brand they suppress your store and don't give you visibility because users may then just go visit your website instead of buying from amazon i think you should focus on you and your store instead so don't start with marketplaces and just focus on building your brand all right congratulations on your e-commerce website see i told you guys this stuff was easy but man we spent weeks making this video uh we were going back and forth with the design and with my designers we were like changing images and fixing stuff uh so i really hope that this ecommerce template really helped you guys out also i really hope this video brought a lot of value you know we also made this marketing guide with our content writer and we really went step by step to really uh you know nail everything to make sure it was perfect also let me know how i did you know was this tutorial fast was it too slow was it all over the place let me know in the comments below i i don't take it personal guys i really don't take anything personal over the internets uh also make sure to like this video and uh until then i will see all of you party people in the next video guys take care

Channel: Darrel Wilson

Views: 54,004

Keywords: ecommerce website, online store, how to, make website, create website, wordpress, wordpress website, ecommerce wordpress tutorial, how to make an ecommerce website using wordpress, ecommerce tutorial, darrel wilson, ecommerce website wordpress, how to make an ecommerce website, how to make online store, how to make ecommerce website, create ecommerce website, how to create an ecommerce website, ecommerce, free ecommerce website, elementor, elementor ecommerce

Id: MV1RAob4duE

Length: 197min 42sec (11862 seconds)

Published: Mon Nov 08 2021