Complete woocommerce tutorial | Woocommerce Divi

having an online shop for your business is really really important because customers can buy products even while you're sleeping so in today's video I'm going to show you step-by-step how to build a fully functioning ecommerce website from scratch so I'm going to be showing you pretty much everything that you need to know you would not need to see any other tutorials out there so let's take a look at what I'm going to be designing so over here this is going to be our landing page now the skills I show you in this video pretty much translates to any type of e-commerce website right so if I scroll down here you can see it's a simple design no fancy stuff going on here and you should take a look at our products here they neatly laid out we also have a footer here which I'll show you how to create step-by-step as well so let's say I go into this product here so if I click here it's gonna take us to the product page now on this product page again we have a nice simple layout now I don't know if you've noticed this but in this layout we have beautiful colors pretty much we've branded our online store so this is what makes our stores the professional and I'll show you how to add all those colors and pretty much everything you need to do to make it look professional alright so moving on so over here now if we take a look at our products if I scroll down here we also have a related products now there's also something I added here let's say you have some stock and you want to tell people or show people how much is left now on this product here we don't really have the stock option added so notice what happens when I click on this product here and also all our products follow the same sort of structure which means we have a very good consistency layout going on here so all products have this pretty much basic layout so over here you can see it says 10 in stock now this is very important if your shop has items that you need to take stock off as people are buying them ok so here we also have related products which is really good so let's say people want to take a look at the items which are on sale now here's what happens if I come over here to the sale page it's going to show you pretty much the items on sale and if I scroll down here it only shows us products on sale so this may be a page that you may want to have and promote on social media it's really really important that you have this and I'll show you step by step how to create it as well right now back over here on the product if I click here on this let's say on this product here again we have pretty much the same structure the same layout now if I add a product to the cart notice what happens if I click on add to cart now this we have this area here that shows us our products that we've just added to the cart and I think this is a very good visual representation of what is going on as you're shopping alright so if I click here on View cart now it's gonna take us to our page where we can take a look at the products that we have in the cart okay so let's say we remove everything from the cart this updates automatically and I can return to the shop or I can just go back to my home page and continue shopping or I can start all over from the beginning now what I've also added here is also the ability to have some coupon codes now coupon codes are very important because you can have this on let's say special days like let's say Black Friday and you can specify a coupon code like for example black 50 for 50% off so what you would do is you create a landing page which has all those details now notice what happens if I click here on add to cart and then view cart right so you can see here this product here is 60 pounds I mean if you're in the US or whatever you can add your own currency that is also very easy to add and you can see here my coupon code has been added if I click on remove I can pretty much remove it like that and you can see my price now is still at 60 but let's say I want to add my coupon code now here's black 50 apply coupon notice what happened to the price minus 30 total 30 fantastic now if I proceed to checkout pretty much now I'm on my checkout page all I have to do is to add my details and if I scroll all the way down here this is where I can use PayPal but of course you also have the option to collect payments through credit cards so this is a fully functioning system so before we begin I'd like to go through I that we're going to need and also talked about my offer so as you can see throughout this I use Divi now I have a special offer for you if you buy Divi using my affiliate link I will give you access to my web design formula course a course that teaches you how to design professional-looking website with Divi all you have to do after you've bought Divi using my affiliate link head over to funnels to income calm on the bottom right there's a chat bubble send me your receipt number or send me an email include the details in the video description below and then I'll give you access to the course when it comes to hosting again you're gonna need a beautiful hosting which doesn't give you a lot of headache these two companies that I highly recommend it's flywheel and also side ground now links to that are also in the video description below and appreciate it if you use those links to purchase your hosting and then finally when it comes to registering your domain names I use Harvard comm that's H o ve R comm to register my domain names again I'll link that in the video description below so pretty much that's all we need to get started so I'm gonna start off this tutorial and a stage where I've just installed a brand new WordPress install and then pretty much I show you step-by-step how to create this so without wasting a lot of time let's dive in and let's get started alright so right now we have a basic WordPress install installed so as you can see here we don't have any page builders this is purely just from registering my domain name and signing up for my hosting all right so let's login and let's take a look at our admin dashboard and start installing all the plugins that we need so I'm just gonna hit enter here add my username and email address and password sorry right so I'm just gonna check for updates now it's always a good idea that we few I have any updates on your website you can just go ahead and update it because that's the source of hackers to get into your website alright so everything is all set now the next step is to start installing the plugins that we need so I'm gonna come over here to plugins and then click on add new so the plug-in that we're going to need here is what comments plug-in now this plug-in is absolutely free so go ahead and search for it and install it as you can see here this has been installed over five million times and the makers of this plug-in are wordpress themselves them automatic the company that makes wordpress so it's very very solid and it is well supported alright so next i'm gonna hit install now so what it's going to do now is it's been to install WooCommerce which is the plug-in that we need in order for us to run our online store so this sometimes takes a while it just depends on how fast your internet is but usually doesn't take time as you can see here mine is installed so all I have to do now is to hit activate so once activated it means pretty much we are ready now to set up plugin alright so what we're gonna do now is we're going to go through the steps so to be honest sometimes you don't really have to go through this but I'm just going to go through this anyways so you can see the process so I'm gonna say yes please so this is going to be our step by step process of setting up our store so it's always a good idea again as well to add your number I mean your address and details over here so I'm just gonna go ahead and add that I'm gonna hit continue right so this is asking me to sign in so to be honest I wanna do that so I'm just gonna say continue okay which industry does your store operate again you can just choose any industry here so our website that we're going to be building is a fashion one so let's go in and choose fashion there and hit continue what type of products will be listed so here normally what I'd like doing is to set up physical products and download so the reason why I'm doing this for the store is because you may want to also include maybe PDF which shows you like a fashion guide or something like that that you give away for free as people are buying your products but if you're selling physical products then you can just make sure you select physical products there okay right next I'm gonna hit continue and this isn't taken to the next step how many products are you planning to display so here you can just add how many products so I'm just gonna go with eleven to 100 currently sitting elsewhere I'm just gonna say no now the reason why I you need to set this up is because let's say you're in your own country like for example I'm in the UK I can set my company here as to deliver just within the UK but it's international you can just go in here and you know apply wherever you're going doing a sell - alright so next i'm gonna click continue here right so now this is setting up all my pages it's going to do the final steps now of setting everything up okay so now you can see it's asking us about themes so it's asking us to add theme that we want so pretty much I mean I don't need to use any of these because the theme that I highly recommend is Divi so we're going to skip all this come all the way to the bottom here and click on skip this step and then it's asking us to add jetpack to be honest I don't like jetpack at all it gives you some stats and some notifications about your website but I feel that it just drags your website makes it really slow so I don't like using this at all so I'm gonna say no thanks so we're almost there so now I'm just going to continue and now we are ready to add our very first product now at this stage this is where I just keep here I just go to skip store setup because I want to do this you know myself myself step by step now it should take a look here right now I'm on the WooCommerce tab this is beautiful it shows you how much sales you've made your net sales orders pretty much everything on this dashboard and this is really cool because every time you go on your website you want to see how your story's performing and now I'm just gonna come back over here to dashboard and just clean this up a little bit because right now as you can see we have quite a lot of things going on here so I'm first of all I'm just going to close these I don't really want these here dismiss everything okay and dismiss this one as well now this welcome here I'm gonna get rid of it site status we'll leave that as it is so if you want to further customize what is here on this main screen you click here on screen options okay so quick draft I don't usually use that news WordPress news nope activity it's fine at a glance let's get rid of that as well alright so let's get rid of activity as well I don't really use that all right so now I'm just gonna drag this into position drag the word for commerce reviews and by doing that I've just cleaned up my dashboard so every time I log in the first time I the first thing I see here is my stats my site health and the reviews in fact I'm just rearranging this so that I have it pretty much the way I like it so I like seeing how much I mean how much I'm making over here as soon as I log in okay so pretty much I've installed WooCommerce that is looking great the next step now is to go in and set up our menu now before I go into that our menu perhaps you'd like to see what our store looks like so far so I'm gonna come over here click on visit site but I'm gonna open this in a new tab so now you can see here we have the card to check out my account sample page and shop now these are the links that were automatically added when I set up woo commerce so what we need to do is to go in and set our pages now so I'm gonna start off by adding a brand new page but first of all let's see all the pages that we have here so ok so we have these default pages here so first of all I want to delete this sample page because we don't need this so I'm gonna hit trash ok so that's gone next I'm going to add a brand new page and this is gonna be the home page so I'm gonna click here on add new right I'm just close that and then I'm gonna give this a title and I'm just gonna call this home and then publish when I hit publish one more time and then I'm going to go back to my dashboard now once our home page is there we need to set it up correctly so that when people come to our website they land on that particular home page so to do that you want to come over here to appearance click on menus so what we're gonna do now is to create a brand new menu so I'm gonna call this one here main menu ok click on create so this now is going to create our menu so next I'm just gonna click on View all I want to see all the pages here so I can add them onto my menu so as you can see all I'm doing here is to just select all my pages add them to the menu and then I can arrange them in the order that I want so of course you want to have your home page as the first item and then you want to have the cut right at the end I have the shop here but we're gonna go we're gonna come back here later on and rearrange these as we add new pages so once you've added your menu pretty much that's it we're almost there now we need to go in and let WordPress know which page is going to be our main home page so let's go ahead and do that right so to do that you want to come all the way down here to settings and then you want to click on reading so here it's a static page you please make sure you select static page and then your home page is going to be home Save Changes and now we have a specific home page so now if i refresh this you can see here this is the home page but as you can see this this theme here is really ugly ideally we want to have a theme which we have full control and snout the next step is to go in and install our theme builder okay so back over here I'm gonna go back to my dashboard right so the theme I highly recommend is the Divi theme and this theme is really powerful it has a lot of features and you can also customize your landing pages your product pages and so on it's really really powerful I've been using this for a very long time and I highly recommend that you choose that all right so what I want to do now is I'm going to come over here now I already have an account on elegant themes mine is unlimited which means I have a lifetime license I pretty much get all my updates every single time so once you log in what you need to do is to pretty much download the Divi theme and here it is I'm just gonna click here download Divi theme and this will download the latest ok now why are we here the next step is to get your API key now this is very important because when you add your API key on to your website your this is how you get your automatic updates and you can also get support through that alright so to get your API key you want to come over here to account so I'm gonna scroll all the way down here and find API keys I go I'm gonna scroll down and here is my API key when I click to copy and then back over here on my website now we're going to go in and add our theme so I'm gonna come over here to appearance pick on themes add new now remember we downloaded the theme onto our computer so all I have to do is to click load choose file then I want to go to my downloads folder double click on TV and then click on install now so now it's installing the Divi theme which is fantastic I'm gonna activate it make sure that this is the one that is working on our site now once this is activated there's still a few things that I need to do here so let's head over all the way down here now you see once you add Divi you are going to have this entry here called DB on the side here this is where you have all your settings so the very first thing we need to do here is to go to theme options so theme options allows us to go in and add our API key and to do that you want to come over here to update click all you username so I'm just gonna add my username there and then I'm gonna paste my API key in here click on Save Changes and then I'm gonna hit Save Changes one more time I don't know why I do that to be honest because I've already saved the changes all right cool also I need to mention that with this API key you're also able to roll back to the previous version so let's say sometimes you were running your store and you make a mistake you upload something that breaks things he'll always roll back and this is where you have this feature here ok great so now that we have this all set the next step now is to add our branding colors now I know a lot of tutorials out there don't teach this but it's very very important to have your branding colors for your store and the website I use is called coolest here we are so I've already gone ahead and chosen my colors so my first color here is black so I'm just gonna hit copy to copy the hexadecimal value so back over here I'm going to go to the first tab which is the general tab and add my first color so in fact my first color here is black anyways so I'm gonna move on to my next one click on my colors I'm gonna copy the hex now the cool thing about this is I only need to do this once and once I add all my colors I'm good to go right so let's go in and add the third one back over here paste it in fact you know I made a mistake I should have moved on to the next one here I forgot to do that but anyways it's fine okay so now it's time to add the fourth one so I'm gonna come back over here choose my color and just gonna replace this great so I think I have one more to add and that is white back over here okay so I've added all my colors now what I normally do now is I just go in and add a few variations of gray and normally I use great for my text sometimes so I'm just gonna go in and do that I'm gonna add a very light grey here but of course you don't have to do this this is so that I don't have any extra colors on my color palette so these are the main colors that I'm going to have so I'm pretty much happy with that so I'm gonna scroll up a little bit and click on Save Changes so now we have all our branding colors and as I mentioned this is very very very very important it just makes the design workflow much much easier okay so now that we have this let's take a look at our page and see what it looks like now this is what it looks like without the template or without the theme so we'll have refresh here B again now to see that pretty much this is what it looks like so let's go further and customize this I'm going to come back over here so what I'm gonna do now is I want to add my images for my shop so I'm gonna come over here to media library so I've already gone ahead and downloaded the images so all I have to do is to click here on add new select files and my files here take a look okay there we go so these are all my images so I'm gonna hit the shift key and select all my images here click open so this is going to add all my images that I need into my media library so it makes it easier for me now to go in and choose them as I build all my product alright so pretty much these are the products this I mean I just chose shoes but of course you can choose whatever you want it could be watches it could be food itself whatever it is but the idea here of setting up this website is pretty much the same alright so now that I have this all set the next step now is to start adding all our products so I'm gonna hover over here which is products click on add new right so I'm gonna say product 1 so you can name these specific but I'm just gonna call these product 1 2 3 and so on all right so that's product 1 now what I'm gonna do next now we've already gone ahead and edit our colors so I'm gonna use no room to for my dummy text because to be honest it just takes me way too long to go in and type all my descriptions all right so I've copied my paragraph there I'm gonna come over here and paste it and then I'm gonna go further here and let's add our information so the price is going to be let's go with 9 to 7 and if you want you can also add your sale price so let's say this one here is going for 87 okay you can also add your inventory so let's say you want to specify how many items you have in stock you can go in here and say ok you have 10 in stock and as people are buying it will pretty much subtract from your stock quantity and once everything is gone and your low stock threshold let's say you can send it to but in this case let me say 1 and once you get to 1 it gives you a warning to let you know that that product is not available and if a customer buys this on the front end of your website and they visit their website they want to buy that product and pretty much there's none in stock it won't allow them to buy so as you can see this is a really powerful feature I really really like this alright so I've set that up it's looking great the next step is shipping so here you can also add your way you can add your dimensions and so on and you can also add your shipping class but in this example here we're not gonna do that but it is possible to add your shipping class here because it varies with at different countries how you do it so these extra plugins that you can use to add that alright so over here you can also add linked products so you know how you have your main product and then it also tells you this customer or most people also like these and then there's also other products this is where you add your upsells and cross-sells now we are going to add this you know later on so we just won't leave this for now I'm not gonna add any attributes on the advanced here we can add a purchase note but again you shouldn't leave this as it is alright so moving here we also have the ability to add a short description so I'm gonna go ahead and add this as my short description now before we leave here we want to make sure that we set our product image so I'm gonna come over here select files now remember in fact I don't need to select files because I've already added them to my media library sometimes I forget it's crazy so let's start by adding our first product so I'm gonna add this shoe here and set my product image so pretty much I'm happy with that now over here you may also want to add your categories so I'm just gonna add my new category here and I'm just gonna say on shoes now I'm just adding this categories here so that you can see how easy it is to add your categories because if you have a shop which doesn't have categories it pretty much means everything is under one item so this makes it easier for people to find their products which may be in different categories so fun shoes and then I can either say add category and then I can say casual ok I could say heels alright so let's have three categories so my first one day I'm just gonna say fun shoes and it can also tag them if you want to but leave that as it is now if you want to add a gallery because sometimes you can have several images of the same product here so this is where you can add a product gallery so when people go to that product they can see different versions or different angles of that particular product but again we're not gonna add that here but this is where you would add it okay great so I'm happy with that next I'm gonna hit publish so pretty much that's how you add all your products so instead of you watching me adding every single product here I'm going to pretty much do it one more time and then I'm gonna let you add you know the rest in this tutorial alright so I want to come back over here in fact before I do that let me just click on view products also to make sure that the product is actually there so there we go so we have our product here product one we have the price and you know because the sale price you can see there's a badge there and also it crosses out the price there which is really nice here we have our description our short description over here and then it also tells us these ten in stock so as you can see this is working as a fully functional online store alright now let's go back to our dashboard so now I'm gonna add another product so to add another product you can just come over here to products add new so this time this is product - okay we're gonna add our description and this one is let's say five hundred ninety nine but we're not gonna add a sale price this time inventory let's add let's say there's 15 in stock oh I forgot to mention you can also allow back orders if you want over here so if you don't have the items in stock customer can add their information and then you can send it once the products are available alright so let's go ahead and add on a short description here okay and then over here we're gonna add our image and we're gonna go with this time is let's go with this shoe here okay now I'm gonna add my category and this time I'm gonna say casual and pretty much that's all we need to do okay great I'm gonna hit publish so as you can see this is very easy to add so I'm gonna pause the video here or fast-forward it so that I just add all the images because you saves you time watching me do the same thing over and over again alright so I've added all my products or eight of them so if you want to view all your products all you have to do to come over here to all products and this shows you all the products in your store okay so that's great we have all our products in there the next step now is to just customize our store in fact I'm going to show you the settings for WooCommerce because this is very very important all right so let's click here on the settings tab so we can just go through it alright so here is our side title so this is where you want to come in and add your site title if you haven't done that already and we also have a tagline here by default it just say it's just another WordPress site but of course you can give your site a tagline so in this case I'm just gonna say okay so that's gonna work as my tagline and my site title I'm soon leave that as whoo that's fine okay I'm gonna hit Save Changes and the next thing I'm gonna do is to hover over here where it says WooCommerce and I'm gonna go to settings so these are now the settings of comments so the very first tab here shows us our store address so this is where you have all the details of your store and you can also enable coupon codes now this is great if let's say you're running promotions so let's say it's a Black Friday and and you like to sell products and discount you can add coupon codes and I'll show you how to do that as we go now over here on the currency this is where you can add the currency for your store so all you have to do is to search for your country so here I mean the United Kingdom some search for United Kingdom alright so here on the currency tab this is where you need to assess the currency in your country so I'm in the UK I'm gonna search for pound sterling and here it is so I could set mine as pound sterling but if you nest in America we can say yes US dollars that's fine okay so next once you've done that you can use here to save changes and that'll save all your changes next you want to come over here to the products tab now here on the products by a tab this is where you can specify your shop page and it's already added by default it's called shop but we can go in and customize it and you know set it to whatever you like and then here you can also go in and enable product reviews but if you don't you can just uncheck that and you won't have product reviews but to be honest it's great to have product reviews anyways that helps with selling a few products alright so moving on I'm going to shipping now this is what I mentioned earlier on where you can add your shipping zone here and there's also shipping options you can go in and customize this until you're happy with how you're going to perform your shipping all right so I'm gonna leave that as it is for now next I'm gonna come over here to payments now this is also very very important because you want to make sure that your payments are set up otherwise if people come to your website they won't be able to buy your product and pay for them all right so there's PayPal so you can set up your PayPal here you hit setup and this is where you can go in and I normally use PayPal standard to be honest you can add your paypal email address there now they want the one thing that I really like about WooCommerce is you can also add stripe which means you can accept credit cards or debit cards okay so all you need to do with that is to just add a plug-in that does that and that plug-in this tree as well okay cash on delivery I mean if you have a brick-and-mortar store you can always do that as well check payments to be honest I I'm not sure if people are using jigs so I don't know about that one and then this one here direct bank transfer you can also use packs in your transfer so it's quite flexible and as I mentioned there are also a lot of plugins that work well with WooCommerce all right so now that we've got this next step is account and privacy all right so so over here if you guest account you can allow customers to place orders without an account if you want to do that account creation I highly recommend this if you select allow customers to create an account during checkout it means that they can have their own dashboard where they can see the update of the orders I know and what is going on in there and also with their consent of course you can have their details in your database and send them emails when you have promotions and any of that stuff going on all right so pretty much that's that's what we have here we also have the privacy policy so you may want to create a privacy policy page here and then link it with the page so here we have the page but we also need to add the formation alright so once we're done with that you can just hit Save Changes and then over here we have the emails so here on the emails this is where you get your email about new orders canceled orders filled orders and so on and then over here you have your integrations so you can add Google Ads and also the really cool thing about this as well is let's say you have an email autoresponder like let's say convertkit you can link it all up so when someone buys a product they're added onto the mailing list automatically now the reason why you may want to do that is because it makes it easy for you to send emails out and manage all your emails now what I've noticed here is when I set it up it has MailChimp here by default that was very naughty of of WooCommerce I would rather have people choose their email provider of choice rather than just set it up for them so maybe it's because I missed that step maybe I could've just disabled it but I don't know all right over here the Advanced tab let's see what is here so pretty much here we have our page setup so we have our cart page checkout page account page terms and conditions we can click on this drop down and choose our terms and conditions page if you haven't created it we need to create it and then it's going to show up here on the drop-down and once you select it it then becomes your terms and conditions okay so checkout endpoints to be honest you do need to worry about any of that I'm gonna hit Save Changes and pretty much this is what the settings of WooCommerce look like great so we have all our products all set we've gone through all this the next step now is to really customize our shop front and make it look like a real you know shop so right now if we come over here and refresh you can see that it doesn't look really good very nice so let me show you how to design this page and really make it look awesome right I'm gonna come over here enable visual builder and again you're going to see the reason why I highly recommend to use a page builder now if it's the first time using Divi it's gonna give you this tour tour guide now I just go ahead and just click start building because I don't need to go through that now for this pages well I'm gonna build everything from scratch so I'm gonna come over here okay so here it goes so the first thing I'm gonna do is to have a nice main hero image so I'm gonna clicking on this plus button and full-width and I'm gonna add a full width header right so usually when I work with Divi I like snapping this over to the left so I have all my controls here and then everything else is over here on the right okay so button here let's say let's call it start shopping okay so start shopping is is going to be our text for main button here now once this button is selected the next stage is to just make sure that you link button 1 to a link this case it needs to be to the shop page so I'm gonna add a blank link for now okay right so back over here I'm gonna go into the text so it says your title goes here now this is where you want to go in and add your specific text and this is gonna say let's call this what can we say here okay I'm just going to say quality designer shoes okay and then we're going to need a description here so this is our main description I'm just gonna use that lorem text to be honest but you don't want to use a lot of it because you just want a basic description here there we go so I'm just gonna add you know a short line now this is where you can decide whether you're gonna have this centered or you're going to have this on the left side but we're gonna make that decision as we are working on this page next I'm gonna come over here to background and I hey this is where I can add my my background colors and so on but you know what before we can add any of that I'm going to come back over here to my design and I'm gonna go to layout and go to full screen okay so basically our main hero area here is going to be full screen now back over here on the content this is where we can go back and start adding our colors or in this case I need to add an image so I'm gonna come over here at background image and these are the images that we have so far so let's try this one here see how that looks hmm I think it looks okay okay let's try another one now it's always important to you know play around with different images here and see which one looks better this one looks quite nice to know what I'm gonna do I'm in trouble now alright so okay let's work on the background because as you can see here the background is really really bright can't really set out I mean our text is not very easy to read I mean to read so what we're gonna do is we are going to set our background image blends to multiply okay so you can see here it's gonna be dark but it's not what we want so I'm gonna come over here to our colors and let me add this color right here and this is from our color palette by the way now if you want to control how much of that color is showing you just drag this down a little bit until you're happy with how it looks and to be honest I think that looks great we can try different colors as well now of course that one doesn't work this a bit too crazy let's try black black could work as well but you know what I'm gonna go with this I prefer having this bluish color here all right there we go right so that's one way you can do it now there's also another way you could do this and that is by adding a gradient so to add a gradient we just click here and it's at our first color here so I'm gonna go with the this color here then I want to add my second color so you can see there but to be honest this doesn't look really nice but I'm going to show you how you can play around with this and make it look the way you want there we go so that's one way you could do this but I don't think this color here looks really nice to be honest so let's try that okay so that could work as well so you can see here on the side it's really dark and you can also play around with this so you can show on bottom here that's that's the part that's doc so you can choose pretty much how you want to have it you can do it this way and have a little bit showing here on the top and then you can go in and Center all of this so let's go ahead and do that so I'm going to come over here go to our layout and Center everything so now everything is centered it's time now to go into the text and really customize this on and click here on this little brush tool so this will take us directly to our heading 1 text so I'm gonna start off by adding my font here I like using puppets you know I mean a long time if you watch my tutorials you're going to notice that that's what I use all the time but that doesn't mean you don't have any flexibility of what types of fonts to use you can use pretty much any fonts you want okay so here's where I experiment now and see what looks nice so let me try light increase that lets go with 36 perhaps then I'm gonna add a bit of letter spacing I think that looks nice so let's add increase the size a little bit alright so while I'm here I just wanna see how this looks on the tablet so make sure you click on this little icon here and then we're gonna go into tablet so in tablet mode we can see here that our text is doesn't have great line height so I'm gonna fix that so I'm gonna come over here to line height that's just a little bit let's go with 1.5 that goes 1.6 ok and let's go to the phone and the phone I'm gonna reduce my size here a little bit okay right so over here on the phone I think I'll just leave it at that that looks fine alright so back over here on the desktop I'm going to come over here to my description text and that definitely small so let's increase the size a little bit so let's go with let's go 22 and it's add some line height then let's make this bold okay you know what Chris decides a bit more so maybe balls might be a bit too much so you can see what I'm doing here I'm playing around with different settings and this is what you would do in your design process so now I'm gonna go and choose my font and there we go so let's go with regular because what's happening now is my description text is stronger is much stronger than my title here so I need to fix that so I'm going to reduce my body text here let's go with 20 and let's increase our main description here a little bit alright so I think that looks better so while we here might as well work on the button so I'm gonna click on this little brush tool and let's activate use custom styles for button so straight away we can go in and add our background colors and so on all right so I'm gonna come over here and add my background color I want to color that really pops so that it's a clear call to action all right so now that we have our color I'm gonna also change my border color here just to match it with my background color and then button border radius to be honest I'll leave it as it is lettuce spacing now but we're going to change our font and make it match with what we have here okay so we're gonna make it all caps and we gonna make it bold right so that's nice and bold and I'm really liking how this is shaping up now okay so I'm gonna go ahead and save this now and I'm gonna drag this to the top like that now as I'm looking at this I can see here that our heads are cut off here so that's not look good thing let's go ahead and fix that I'm gonna come back over here and go to background so over your own background we need to do is to go to our image position and go - let's try top-center save it and that was smart that looks much better okay so we have the heads all in view alright so pretty much that's our main page let's move on and let's start adding all other areas that we need all right so the next step now is to add our products to the main page so to do that we're gonna click here on this plus button at a single column and here we're going to need the shop module so I'm going to go ahead and select it so straightaway you can see it's added all my products on there and this looks really really nice and this is why it's important to add all your products first now we can further customize this and this is also really really cool now let me show you what you could do so you know we used Poppins here as our main font you can also do the same here just to make everything look consistent so what we gonna do here is he right now is showing the recent products okay but you can also click on this drop down and say okay I want to choose my best-selling products but of course this will show once your shop it's been up there working and as people are buying particular products this is what will be shown here so I think is an algorithm or something that works behind the scenes to show that all right so product category you can also choose by product category now remember we had those categories and here they are we could fund shoes casual shoes and so on so we can say for example casual shoes so if we want to only show casual shoes this is what shows up here and this is what we have so all you need to do now is to add a title there that says cardinal shoes so as you can see this module is very very powerful you can do quite a lot of things here all right you can also choose fun shoes if you wanted to and this will only show fun shoes now over here you can do a product counter you can show only for for example and there we go we have our fun shoes now what you could also do is to click on this drop down and and show your sale products so if you want to really highlight your sell products you can just go ahead and choose I mean show or everything that's on sale this may be a good idea so for people to know what's on sale so you can have maybe a specific page that has pretty much this module which shows a sale product so there's a lot that you could do with this all right so what we're gonna do is gonna keep things very very basic I'm gonna go with the recent products and we just want to have this module show our recent products here but I wanna show 8i don't overwhelm this main landing page by the way so show 8 now let's go in and really customize this so let's go to our description text here so I'm gonna come over here and first of all change my font to pop-ins I'm gonna make it all caps and let's make it bold I'd really want yeah in fact semi bold is fine now I'm gonna add my color so I'm gonna go with one of my colors here for my color palette so pretty much I'm happy with that next I'm gonna come over here on the pricing and I'm gonna go in and change my font as well poppins and change our color now as you can see this color here doesn't really really stand out so what I'm going to do is I'm going to click these three little dots and I'm gonna choose a color here from our color manager so I'm gonna go with this one here and now that is much better I may also want to increase the size a little bit here to about 16 so that when people come over here they can really see our prices easier okay so now that I've added that I'm going to change my font weight as well and let's make this bold so it's easier to see now I may want to go into our product here and increase the size as well so let's go with 18 okay let's reduce this a little bit sixteen all right we're gonna go with the 15 all right so that's looking great what I could also do here on the image is to come over here on this little brush tool it's gonna take us to our image and I'm going to give you some rounded corners so I'm gonna go with four just to it'll polish it up a little bit okay I don't need to add borders here but you know what you know when I hover over it you can see here we have this icon and I don't really like that so I'm gonna come over here to my overlay and only change my icon color first of all so I'm gonna make it orange or that bright color there great next my overlay color let's and this color here but as you can see it pretty much covers the products but we don't want we don't do that so we click here and on the color and you just drag this down and let's test it now and see how it looks we just want a slight hint of that overlay and to be honest I think I like that yes this looks great now this icon here can also be changed we don't really have to have that icon so what I can do here is to just use maybe this one right here okay that arrow so I'm gonna use that as my main icon and then safe so pretty much our homepage is done so all I have to do now is to add some padding here to the top I normally go with a hundred and then I'm going to click on this little change so that that value is also added here to the bottom and we've created our main page now what you may also want to do is to go in and add another row single column and let's add text now the reason why I'm adding this is because I really want to add a title to this main page and we can say recent products okay so that people know at least where they come on the page what they're looking at so I'm gonna come over here to design text and gonna make this Poppins and we're gonna make it all caps increase the text a little bit to about let's say 20 and let's change this to semi bold and I'm gonna use one of my colors here for my color palette and save all I have to do now is to drag this at the top just above my main products so we can do it this way have it like that and pretty much that's it but if you want to have maybe a line below it and go ahead and do that but you know what I'm gonna leave this as it is so we've worked quite hard now we have a home main landing page we have our products so what we're gonna do now is gonna save this and then we're gonna do a quick preview and see what this page looks like now you recall in the beginning I did mention that I really like using the Divi page builder this is the flexibility that I was talking about all right so you're gonna exit the visual builder now and this is our page so if I scroll down here these are all our products and this is looking really really nice okay so we're gonna hit start shopping this will take us to the shop page all right now let's see what happens when we click on the product itself so if I come over here it's taking us to the product page but I'm sure you can agree with me that this product page doesn't look great at all and this is where now I'm gonna take you into the theme builder okay so we're gonna change all these products the way they look into something that looks really really well-designed let's go ahead and do that alright so I'm gonna come all the way down here to dB click on a theme builder so this is where now we can click your own template and the template I'm gonna go with is our product here we go all products create template so my template is gonna start mainly with our custom body here so I'm gonna click on custom body build custom body I'm normally like doing this from scratch so I'm gonna go in and do this from scratch right so I'm gonna click build from scratch and I'm going to start off by adding my for with let's go with full width header okay so here we are going to click on this little icon here because we're going to have some dynamic links and what we need here is the post archive title okay so this is going to bring in all our information about that particular product and then here on the description to be honest I don't want any description there so I'm gonna go ahead and delete that I also don't need the button so I'm just going to leave the text there so pretty much all we have is the title there so I'm gonna go in now and change my font to Poppins and I'm also gonna make it all caps yeah and pretty much that's okay next I'm gonna go to my background now so I'm gonna click on content background and I'm going to change to this color right here in fact let's go with gray and then on the third tab we're gonna add our image but the way we're gonna add our image we're going to add it dynamically because we want our featured image to then show on that area right there okay so that's our featured image there so what I'm gonna do is I'm going to come all the way down here to my image blend and click on multiply all right so that's looking great now I'm gonna save this and then I'm just gonna delete what we have the on the top so this is going to be our main part there at the top right so the next step is to start adding all our elements that we need to show this page correctly so I'm gonna click here on this plus button I'm gonna go for regular and to be are just going to go and have let's say two columns here on the Left column we're gonna add our image and I'm just gonna click here on boo images so already it said to this product which is great and then all I need to do now is to go to design and then I'm gonna click on image give this rounded corners I'm gonna give this four okay so I think that looks fine so that's gonna be my image save that over here on the right I am going to add my title so I'm gonna go with my search for my text module here now we're going to need a few of these to be honest because we're going to have the title description as well so I'm going to duplicate this twice and then go back in here and this is going to be our title so make sure you click on this dynamic link and then choose post archive title click on the design tab text and then we're gonna change this to Poppins we're gonna make this slightly bigger let's go with 25 here you may want to change color here a little bit so let's go with this really dark one now in fact it doesn't work let's go with right let's go with that right so let's add a bit of line height as well right so now let's go to our description text so over here I'm gonna click on this gear icon and we're gonna click here on this little icon again it's dynamic and let's choose our product description and there we go now we're gonna go to design text change our text here to Poppins we're gonna increase the size a little bit okay and now let's can crease our line height and that's looking great I really like the way that's looking but you know what I want to come back over here and increase that a little bit okay so let's save this and then I'm gonna come back over here and increase my text size now you may be wondering here why am i doing it this way so this is a template by the way so this is going to apply the changes pretty much across the whole site okay on all our products so now that I have that let's adjust our line height and you know what onna make this bold so I want that title to stand out there we go right so I'm gonna save that now we're also going to need another module and this time is going to be the pricing so let's search for a new price there we go so I'm gonna add my pricing there and this make sure it's said to this product and then we can go in and customize it now so I'm only change my font here make sure it's Poppins make it bold and we're gonna change the color as well nope let's go with this in fact you may want to change it up a little bit okay let's go with that and notice that these colors work great because all these colors are from our color manager increase the size a little bit maybe about 20 to about 30 now now that we have the price we males need the act cart so I'm just going to search for and to cut there we go so now it's set to this product which is great so now I can go in and customize this so I'm gonna go ahead and use custom styles for button and it's an our background color here now remember on the main page we used this bright color here this bright orange and that worked really well so we want to keep that consistency throughout our design now for our text color I'm gonna set this to white and then finally you need to make its all-caps changes to bold and change our font to Coppins right now that is nice and bold I really like the way that looks finally I'm gonna come over here and let's change this to white as well oops filled text color make it nice and bright like that or maybe we can go with the grey I think let's go with the grey so what I'm looking for now is my color here I mean my font and that looks great we can also go in here and customize here our colors and size and so on so for that only change my font okay regular is fine here I'm also going to do the same I change this to Poppins make it all caps yep I think that looks great I'm gonna save that now what else do we need here we're also going to need perhaps maybe the reviews so let's go ahead and add that so let's go with reviews add it right here and then I'm just gonna go in and change my font here to Poppins customize our colors you can see here it's very easy to go in and choose the item I need to work on so I'm gonna go with some rounded corners there when I change our fonts so this is going to be Poppins you're also gonna change our description here in just two Poppins as well but we're gonna make this light gray okay cuz you don't just really stand out all right so now that we have that all set that's looking great I'm gonna save this for now and then I want to come over here to a product now remember this is what it looks like now if i refresh this in fact when you just save this first I'm gonna save this save it one more time and then we are going to exit here and save one more time so all this time we've been working on this all products template okay now let's refresh this page and see what it looks like and now we can see that we've totally customized our page we have our reviews here we have our Add to Cart with our product description and so on and this looks really really nice it's nice and simple but as I'm here on this page we can see here that this things doesn't look great over here you may want to go in and really customize this and make it slightly darker so I'm gonna go back over here and this is what you can do if you want to go in and customize your template you can just go back into your template go into my module settings and then go to the background alright so this is where we added the background so I'm just gonna go into my color here and you may want to use a darker color and then just drag the slider down until we stop seeing some information they want to save that I'll save this one more time and then we're gonna exit out of here save all changes and now if i refresh this we're gonna see what this looks like that looks much better now so this is pretty much a design elements we're not really meant to show this product right here okay so I'm just thinking okay what what else do we need to do here so we have our product here we have our description ya bar Add to Cart so that looks great we may also want to add a related products here on the bottom so let's go ahead and do that so I'm gonna go come back over here to my template click on this pencil icon and it's time we're gonna add by clicking this plus button gonna add a single column and I'm just gonna search for my module here and I'm gonna call it Google related there we go so these are gonna be my related products so this time I'm gonna give this some rounded corners as well let's give this for let's change our font here from default to poppins they're gonna change the stars change the pricing let's go with the popkins as well and let's change this to bold okay I'm gonna leave the price as it is because I'm gonna do something a bit different here and add a background okay all right so that looks great I'm gonna save that now as I mentioned before I'm gonna come over here now and add a background color just to make justice just distinguish all of this from what we have there so I'm gonna come over here to design click on border and I'm gonna give this some rounded corners as well so I'm gonna go with 4 but as you can see all my products here are pretty much close to the edges so to fix that we're going to scroll down here and we are going to go into spacing so the padding here on the left on the right we're gonna set this to 20 see how that looks okay let's increase this a bit more so let's go with the box okay we're gonna go with 40 and then top and bottom we're gonna go with the 20 okay I think that looks great but I may want to go into the background one more time and just juice its down a little bit just adding a bit of transparency to this there we go so I'm gonna save that save this one more time now back over here when i refresh and scroll down look at that isn't that amazing so this is all done on our template and this is looking really really nice I'm really happy with this okay it looks like I forgot to add my pricing here on product 5 so I'm gonna go into it and fix that alright so here on the reviews I can see here our button here is not done but that's something I can go in and fix so let us take a look at this page now so if i refresh this right so we can see now this looks really really nice we have our product title here the description we also have the pricing Add to Cart and we have a beautiful image right here and if I scroll down you can see everything is all customized and most importantly if you take a look here the related products you can see here that this looks really really nice but you know what I forgot to do one thing if I if I take a look at this we can see that we still have this blue and we don't really have the colors that we had before on the hover State so why don't we go in and fix that so I'm gonna come back over here to my builder and then I'm just gonna go in now the reason why I'm doing this is because I pay so much attention to detail sometimes it even bugs me alright so now that I'm here I'm just gonna click on one of these images here and then I'm gonna go to overlay which is right here so I can overlay color I'm gonna go with that I'm gonna add my arrow and then for my background color I'm gonna add this blue and then I'm gonna add some transparency to it just like that and save now are we here in fact you can see here that this is working out now while we are here we also need to add another section here now this section is also quite important I'm gonna click on a regular and I'm gonna add a single column and in that column let's add a walk-up notice so I'm gonna go ahead and select that right so this notice is very important because it lets us know what has been added to our cart so now I'm gonna go in and customize this so I'm gonna come over here to fact let me just close this let's work on this particular section here so I'm gonna go in and first of all I'm gonna go into design then I'm gonna go into spacing now right here I'm gonna remove my padding and and a background color here so I'm gonna go to my content click on background and let's see what color we can use here perhaps you can go with that I think that works okay so I'm gonna go with this is my color save that next I'm gonna go in here into my or your settings and I'm gonna start by saying in fact this product is fine and next I'm gonna go into design spacing so here I'm gonna remove the margins both of the top and the bottom and then I'm also going to remove the padding there we go and then next I'm gonna start working on my button here so I'm gonna click on this little paint icon click on use custom stars for button and then I'm gonna add my color here so I think I'm gonna I'm gonna add white as my text color and then I'm gonna add this is my color for my button okay now we need to customize the size and the font so let's change the font here to Poppins and we are also going to reduce the size because the textures will be too too much because we don't the button to be really massive so I think 17 hero works okay and then we want to remove this blue background here someone come over here to background and there we go I've just clicked on transparent and now that it's gone so finally I'm just going to come over here to my text and changes from default to Poppins and I was gonna make it smaller because we don't want this to be really dominating there we go and I'm also going to change the color and I think that looks great Save Changes okay so this is notice I just added this you know just in case this is something that you may want to have in there let me go into my row settings here and also remove spacing I noticed that we still have padding in there okay so now what I'm gonna do is I'm just gonna add a little bit of padding so I'm gonna go with say let's go with 10 there we go alright so I think I'm happy with that when it's safe and that is looking great so now when anytime our visitor wants to take take a quick look at the card they can just come over here and view the cart excellent wanna save this okay great now what I may also want to do here is to see if there any other modules that I can add here so I'm going to click on this plus button and just type in the room so you know we had our stock feature so I'm looking for stock so I'm gonna scroll down there we go so I could move stock and this will tell us how much is in stock and I'd really like this by the way so this product is fine I'm gonna come over here to design so let's work with our text here so I'm gonna change this you okay let me just take this here something go directly to our font and gonna go with Poppins and 15 stock that's looking great now let me see if I can just go in and work with my colors here the light gray I think that's fine I can go with that now let's see what happens if I try to add a border around it so I'm gonna come over here to border right so the border goes all the way and hmm I don't like that you know what I'll just leave this as it is so finally all I have to do now is to go to spacing and I'm just gonna add zero to the padding and zero to the margins right so now as you can see when I added zero to my margin here it was too much so I'm just gonna bring this down to about 10 pixels manually add it in there and that looks much better now so I'm gonna save this and I'm gonna save this one more time so pretty much we have our main product layout I'm gonna save this and close out of here now let's take a look at our product here so once again I'm just going to refresh this and there we go so if I choose let's say this product here you're going to notice that all our products now have a similar layout so you can see here this is looking really really nice so we have here 10 in stock but if we have a product which doesn't have the stock number it just won't show so if I come back over here you can see it's not showing but let's try and click on Add to Cart and let's see what happens up here so you can see now this is where this information now shows and then I can click on View car and here we can see we have all our items in our cart and that's looking great all right so oops let's just go back here there we go alright so the next step now is let's work on our footers as you can see here this foot it doesn't look great we ideally we just want to quickly create our footer and make it look really nice on our page so let's go ahead and do that now all this work is being done in the theme builder so I'm gonna come back over here and you're going to notice that when I add a template it's just gonna be on one area but it's gonna be applied pretty much across the whole website all right so I'm gonna come over here to add global footer build it so I'm just gonna do this quickly I'm gonna start from scratch here and I'm gonna have a single column and in that column on add text module right so I'm gonna start by adding all my links and I'm gonna start with my let's go with special offers and what else can we have here become a member right so all I need to do now that I have all these I'm just gonna highlight it and add a URL now in your case this URL needs pol that directs you to the page so i'm gonna click over here and add my blank URL like birds do the same thing here now there are several ways you know you can create your footer your footer links but I'm just doing it this way alright so add another one there and then finally become a member add my link there we go alright so now I have all my links in place that's looking great now we need to stylize this so let me just save this for now so we can add a background color first so I'm gonna come over here and let's go in and add black as our background color for our footer and then what I'm gonna do now is I'm gonna sterilize my text so let me save this and then come back over here so I'm gonna click on this gear icon design and then I'm gonna go to text and this time is the links that we need to take care of so I want to come over here change my font here to Poppins I'm gonna change our pink color so we're gonna go with that text size let's bump it up a little bit to 15 and then what I'm gonna do here is in fact online I just fine I'm gonna leave that as it is it's at a horror state so right now on the colors you can see that we don't have any hover States there so if I click on this little arrow here click on behalf a tab I can add this orange color here as my harvest state so you can see when you hover that's what's gonna happen all right so that's looking great I'm gonna save this now just save me a lot of time I'm just gonna go into my row settings here and then I'm gonna duplicate this a few times okay so I've done it twice there I mean I've done it a few times now I can save this and then I can go in here and then just add more links so I can start here with the shop this one here can be cut and this one here let's go back and let's see my account so I'm just basically adding the links that come by default with WooCommerce and then check out okay so check out is the final one here there we go so now I've just added all my links I'm gonna save that now here what we can do is let's just add an email opt-in okay there we go no email opt-in here and so what we're gonna do here is we're just gonna say get 10% off okay so that's our main text there then we're gonna have some description text which I'm going to just grab over here on lorem too then we add it here so that's going to be our description and then you will account here what we're gonna do is let's go to fields first because we don't need the last name okay great so we've removed the last name and then next what we're gonna do is remove the background as well because we don't need this background let's just use its parent but what we're gonna do is we're gonna go in and give this a border right so why don't we do that right away I'm gonna come over here to design then I'm just gonna go to border and you're gonna give this a full border like that's let's go with - all right so for the border color and color like that and then now I'm gonna come to and stylize by fields background colors okay so again I'm gonna remove the fields background color there let's add a border around that as well there we go just like that right so we're gonna go with gray but this is a bit too bright so I'm gonna bring this down a little bit that's okay now let's go up on the button and we want to stay consistent here with our button so I'm gonna go in and give our white background I mean text color and then I'm gonna give this this orange color then for the border radius I'll leave it as it is and I'm just going to add my border color and let's change the font here to poppins and I'll leave it as this to be honest and let's go into the text here change this to poppins we're gonna make it all caps and we're also gonna make it bold right thanks we're gonna come over here change our font as well and we can also gonna change our color and that's looking great so I'm gonna save that now we don't need this anymore so I'm gonna delete that so that becomes now our call to action and I'm really pleased with that so let's save this and also let's give this some breathing space so let's give this about a hundred there we go top and bottom save that so now if we come to our product here notice this is what we have and I'm sure you can agree that this looks really ugly if i refresh this page now notice what happens oops that didn't work that is because I need to close here Save Changes and then refresh it there we go so now this is our new footer so you may be saying well Mac what is happening here we don't have the the forum items well that is because you need to go in and link it up with an email service provider like a MailChimp or mailpoet and stuff like that so let me just come over here and fix a few things you know this area that we have here I want to make it slightly bigger so I'm gonna have this structure right here that looks much better now okay so now I'm gonna go in here and let's connect this so in fact before I do that on our button here you say subscribe I just wanna call this get offer there we go right that looks better and we also want to change this 10% make it bigger okay now it's looking more like a call to action alright great so what is it I want to do here oh okay we need to connect our form so to connect our form we come back over here to content and then we're gonna say email account so let's say you have MailChimp in fact by the way there is quite a lot here we have convertkit Emma and so on so let's say it's convertkit you wanna make sure you click on add and then you add your account name so let's say - mag then over here is where you add your API key API secret and then hit submit now once you hit submit what will happen is your form then gets connected with convertkit or whatever email account that you have then once you hit save you notice that that time I made the very same mistake I'm gonna close out of here save and exit okay we're gonna save the changes once more one more time and now if i refresh this you notice that now we have our email opt-in and we also have our links and when we hover over them you can see here that this looks really really nice all right great so this is looking really nice and I may also want to add you know what maybe you don't need to write so we have our footer we have our product page here and this is looking really nice I like that now you know what I was thinking we also we have an office page why don't you create a specific page for the office but before we do that I want to fix this because the links that we have here are not correct so I'm going to come back here and now let's go to appearance menus and we need to assign these links here to our primary menu we're gonna save changes and then want to go in and adjust of our fonts here so I'm going to come back over here and this time we need to go into customize so if you don't want to create a header from scratch using the theme builder this is how you can do it I thought I'll just show you this way as well because you may be interested to know how to actually use the existing header so this is how you would do it so I'm gonna come over here to general settings in fact you know I need to go to edit navigation so we're gonna go to the primary menu and I'm gonna make this old cap so you can see right here I'm going in and I'm customizing this theme font now this time you have to go all the way down to opens now all these are Google phones so you can use these you know whenever you want right so where is it hiding somewhere here okay thank we close now there we go right so that looks very consistent now active column I'm gonna come in here and I'm gonna go with one of my colors that I have from my color palette and for the background color now you see this is up to you you can go in and change the background color here but you know what I'm gonna keep things very simple so for my text color here I'm gonna go in and give it this color and make sure we don't have transparency all right so that's looking great I am now going to publish this and pretty much I've made a few changes to my header and by the way this is mobile friendly as well which is great so I'm gonna close out of here so now if I come to my product and i refresh this is what we have in fact you know what we need to make it bold let's go back sorry about that guys so let's go back to customize and our navigation and we're gonna go to primary Raheja and okay there we go bold excellent we can also increase the size here let's go up a little bit and set it to about 16 there we go I like that so I'm gonna publish one more time and by the way this is what happens when you design sometimes you may need to go back and into different menu items alright so now that we've saved this on a refresh and as you can see this is looking much better now so let's move on to the next step and that is to go to our discounts page or our sale page now for our sell page we need to actually create it so I'm going to come over here close out of this and let's add a brand new page so I'm gonna click on page I close out of here then I'm gonna say sale use Divi builder now for this I'm gonna build everything from scratch right so I'm gonna build this from scratch and then and a single column and in that with an add a text module then we're just gonna say huge sale exclamation mark highlight all this go to my paragraph said this to heading one and we also need it centered and we also gonna customize it but before we do that I just want to save this and add an image in the background so I'm gonna come over here click on the third tab click on this plus button and huge offers I'm gonna go with this image here upload an image and I think this one looks great and like that so now I'm gonna go back over here and add black add a bit of transparency there and then I'm gonna go back to my image tab and set my blending mode to multiply alright so now let's work on our text so I'm gonna save this go into my text settings design heading text now this is heading one I'll go to my font here choose poppins I'll make it all caps and I'm just gonna make this ultra bold make it white increase the size here make it really big and then Center it alright so that's looking great I'd really like this now I sort of make sure that when I go to different mobile devices it's gonna have nice size okay so over here on the phone we just going to reduce this a little bit to about let's say 50 okay otherwise everything else looks great right so now that I have this in place I'm gonna save this then we just add some padding here so let's go into our section settings design now we need to go into our spacing so let's start by adding let's say 6vw okay so that's not looking much let's go with 10 VW now if we take a look at the image here we have the same problem that we had in the beginning which is the heads are cut off so let's go back over here click on background and then on the image tab we're just gonna make sure that this is top center okay there we go so now you can save this alright now it's time to add our product so I'm going to click here on this plus button and we're gonna add a regular section and let's add our items that are on sale so here we need a shop module so I'm gonna go ahead and select it ok so but the one we need is not the recent products we need sale products so this page is only for items on sale right there we go so we have three items and our product count let's add three alright so column layout we're gonna go with three as well and now they're nice and big so when we add these we still have to go back in and customize them as well so let's go in and do that quickly so I'm gonna come over here and add four to around at Korres now we're gonna work on the texts we're just gonna make it bold I'm in all caps Poppins and let's make it bold there we go the pricing we're gonna change this to Poppins as well and we're gonna increase the size a little bit then color so I really like that that's looking great now the sale badge can also be changed here so sale badge color Oman add my color like that and then I'm gonna change the font as well now do you see how precise this is I can really go in and choose the exact same style that I need for each and every part of this layer and this is why I really like using Divi page builder okay look at that that's looking great next I'm gonna add a description to this so let me add a single column here and go for the text and then I'm just gonna say products on sale there we go go to design texts we're going to change this to Poppins we're gonna make it all caps increase the size a little bit and we're also gonna change this from regular to bold and let's add color and save now I'm just going to drag this above there we go items on sale and then remember all my sections here have a padding of hundred both to the top and the bottom and that is looking really really nice so that's going to be our sale page save that okay now we need to add the sale page to the navigation here on the top so what we're gonna do is you're gonna go back go to hard dashboard right so to change that we're gonna come back to the appearance menus and here's our sale page we're gonna add it to the menu there we go so now it's there let's add it over here to the sale now the shop to be honest I don't really like that let's remove the shop because our main landing page is gonna work as our main shop page anyways so I'm gonna leave it at that so I'm gonna save my menu and if i refresh this page now here we go if we got our sale page if I click on it this is what we see okay all right so so far so good but you know what I'm on this page I think I may need to increase my iPad in here so we can see more of this page so I may go back in right so I'm just gonna drag this to about let's go with 15 okay so now let me check the different views that's looking okay and that's looking okay too all right fantastic so now I can save this and then exit the visual builder right so there's a few things that we may need to do here and that is to go in and set up our coupon codes because you may want to add coupon codes on your promo page so I'm gonna come over here to dashboard right so we'll come over and hover over here it says WooCommerce and then click on coupons so to add a coupon code it's very easy all you have to do is to click on add coupon and then you want to give this coupon code a name so if it's Black Friday you can call it black 50 if it's 50 percent discount you can add a description here like that's a 50% discount okay now this is just for you to know what this coupon code is for alright so now that I've added here the next step is to come over here so this is where you can decide whether you want to have a percentage a fixed discount or fixed cut discount or fixed product discount so I want to go with percentage and set it to 50% and then you can also add your coupon expiry date so let's say mine expands from the 30th of June and then over here you can add usage restriction and that is minimum spent so you can have a notice on your website that says if you spend more than let's say $100 or 100 pounds you get the 50 percent off the Black Friday code but if you don't then if you don't spend more than 50 that you won't get this discount so it's up to you how you're gonna tie you in a position that and then over here you can say individual use only or you can exclude a sale items as well so that means you know that page where we have the sell items you can exclude that page or any products in that and then over here you can also add a specific product so if I start typing here you can see all my products are showing so I can exclude products if I need to and I can specify which products go on sale as well so this is how this work and then over here on usage limits you can say usage limit per person you can limit this to one and you want that to be used only once and pretty much you know as you can see this is really really powerful so you can decide how you want to use this so if I hit publish now that means on the checkout we're going to get the option of this coupon code all right so let's test this and see how that works so I'm gonna go to let's say the home page here right so I'm gonna scroll down and let's go this product here take a look at this Add to Cart okay so if I click on View cart there we go so now we have the coupon code so if I click apply coupon in fact I need to add the coupon code first right so we said like 50 now notice what happens here when I applied the coupon code so over here it says it's 99 I mean it's 198 because we have to beg let me add one okay update right let's add my coupon code again like 50 if I apply the coupon code you're gonna see the discount coming over here so I click oh yeah and so here now over here you can see coupon code black 50 then saves - 49 50 and then the total now is 49 so this means my coupon code is working and that is really really really cool now as we look at this page here you can see it's not really consistent with the design that we have now what we can also do is enable the visual builder here and really go in and customize the layout of this page so if I could say use existing content you're going to notice that I can go in now and really customize this so let's start by adding a background color here I go in and click on background so I'm gonna give this a very light gray okay like that and then next I'm gonna come over here to design border and I'm gonna give this for now as you can see everything is way too close to the edges so what I'm gonna do here is I'm gonna go down here - in fact I'm looking for spacing alright so I'm gonna give this some padding let's go with OVW right so I'm gonna have this all round okay so that's looking good so far save that now I'm gonna go into this area here and customize pretty much my waka mascot and as you can see this is a shortcode but I can go in and play around with all item so if I come over here to cut totals for example I can go in change my font to Poppins just to make it custom okay so I want to use my own colors here I don't want to use the colors that come in with commas here so as you can see I'm just going in here changing my colors now I'm gonna go to the button here says proceed to checkout and for that button I can increase my size in fact I can change this from regular to bold and then over here as well I'm gonna change my fonts to poppins and it's changed colors there we go so as you can see here I've gone in and I was able to customize all my items in here but you know what you know that background color I've just added I don't think that looks great so let's go ahead and remove it so I'm gonna go here to background make it transparent and then I'm just gonna add a border right so my border here is gonna be one pixel that's my border color and this is how we'll have the design save that so pretty much this is what you can do to go in and make your shop look very consistent with the colors and also with fonts all right so now I'm gonna save this now there are also other pages that you may want to look at and that is the my account page as well so over here let's go to our site and if you go to the my account page you can also do the same thing then go in change things around here change the fonts give us some background and also remove the sidebar if you really need to and on the cart page as well in fact this is the one that we've just worked on you can see here it has update card should proceed to checkout and so on and you can also customize your checkout page by coming over here you can see here this doesn't look great so same thing enabled a visual builder use existing content and then I can go in here by clicking this gear icon so I can start by working here on the top and changing my font here to Poppins so you can see pretty much everything has changed here which is great right so my first name last name I think that that all looks fine I don't really need to change much here yeah I'm happy with that so if I can just see where I can change the background that'll be great so I'm gonna come back over here to content yeah in fact this is gonna be my little background so I'm not gonna mess with that just gonna save this say this one more time right exit the visual builder all right great so pretty much you can see here that we have a fully functioning ecommerce website so let's go through this one more time so here's our main homepage and what we've done here is we've gone in and add all our products and if I click on any of these products we can have a product page that's pretty much consistent throughout we also have the related products here and if I click here on this product you're going to see that all the products have a similar layout which is really really cool so you can see here as I'm going through this everything has a consistent layout now if we add our product here to the cart you can see here product 6 has been added to the car so this is notifying us that we've added approach to the cart and we should click here on View cart we are going to be able to see what is in our cut and you can see here we have product 8 and product 6 if I need to remove it I do that and if I have a coupon code I can add my coupon code here proceed to checkout and then finally I can go in add my information here and then I can just pay now right now I have paypal but you can add a stripe which allows you to use your credit card and debit card and then once you click here on the privacy whatever proceed to checkout and you're good to go and this is a fully functioning shop and I've got to mention that we also added this footer here to our design and pretty much this is how you set up your ecommerce store all right so if you liked this video please give me a thumbs up and don't forget to hit the subscribe and bail by doing so you'll be notified when I release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: MAK

Views: 63,118

Rating: 4.9387307 out of 5

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, make online courses, online courses, online course tips

Id: nvcsnygvm5s

Length: 97min 6sec (5826 seconds)

Published: Sun Jun 21 2020