Woocommerce Product Page Design - Woocommerce Divi

so if you want to sell products online where you have total control using wordpress is the best option now one of the plugins that's used to create an online shop is woocommerce but out of the box the design doesn't look that great let me show you what i mean so when you first install woocommerce this is the layout that you get and it doesn't look that great so what i'm going to do in this video is i'm going to create a custom woocommerce product page now this page is going to give us a beautiful layout and in fact let me show you what that layout is going to look like so here is the design that we're going to come up with so i'm going to scroll through here so you can see here we have a hint of our image here in the background and by the way whatever technique i use throughout this can be used for any type of website so it doesn't have to be a website about watches you can apply these techniques to any type of woocommerce website okay so i'm scrolling through here we also have our related products and we also have our reviews now you may be thinking well maybe this design only applies to this particular watch well that's not the case because this is a template that works on all the products on our website because we're going to be designing this as a template so a template applies this design to all our products okay so now let's take a look here when i click on a different watch so i'm going to click on that now take a look at that now we still have that design here in the background and when i scroll down here we also have a hint of it over here now as you can see this design is pretty much much better than what we had before so this is what we had and this is what we're going to have after we designed this now before we get started i'd like to remind you that if you buy divi using my affiliate link you'll get access to my advanced web design course called web design formula this course teaches you everything that you need to know about web design including how to design these pages that you can see here on the screen all right guys without wasting a lot of time let's dive in and let's get started all right so the first thing i'm going to need to do is to download all my images that i need for my shop now in your case you may have images that you've already taken of your product so let me show you where i get all my images so right now i'm on this website called pexels.com so all you have to do is to search for your products so in my case here i am building my website which is going to sell watches so these other watches i've already gone ahead and downloaded them so the next step is to add all these images onto your website so to do that you want to come over here to media click on library and then you want to click on add new click on select files and this will open up your browser and this is where you can add all these from your computer but as you can see i've already gone ahead and added all my images now the next thing is to go and set our categories our categories are going to be very important because we are going to be able to create sections on our product page which for example we have our related products and this will make our page look really beautiful so let's dive in and let's go ahead and add our categories so to add our categories what you need to do is to head over here to products and then click on categories so by default you're going to get this uncategorized category so normally what i do with this is i just go in and edit it and give it a proper category so i'm just going to rename this and call this offers or sale so it doesn't really matter how you name it so now that i've renamed this i'm going to click on update and to add a new category that's very easy all you have to do is to go back to categories here and then you want to click on a new one so here you can see it says add new category you can add a new one here so once you type it it's going to be added over here so i've already gone ahead and added offers latest and watches okay so now that you have your categories the next step now is to add our products and to add our products we're going to come over here to all products so right now i have apple watch added so i'm going to click on add new so i can show you how to add new ones so i'm going to come over here add my description and i'm just going to use a bit of this text here as my product name because i'm going to add quite a few products and by the time i finish adding them i'm going to run out of names but anyway this is going to be oh let's say this is going to be our product name this is our going going to be our description now over here on the right you notice that we now have our categories so we can choose offers we can choose latest we could just choose whatever we want here so for this i'm going to set it to the offers so i'm going to select offers and again on the price here i am going to set my price to say 3.99 and then after the offer or the sale price now is going to be 299. next i'm going to add my image so i'm going to scroll down here and my product image can be found here so i'm going to click on set product image and this is going to be our watch set product image next we're going to add a short description so i'm going to paste my short description here in fact i'll just copy these two lines and paste them over here but in your case remember you have to go in and add your description of your products okay so this is just some dummy text for the purposes of this tutorial all right so now that we've added all this all i have to do now is to hit publish so i'm going to do one more product and just to show you the process one more time so i'm going to click here on add new paste my description and i'm just going to copy a bit of this text here and use this as my product name next i'm going to come over here choose my category again this is going to be offers and i'm also going to add my product image and this is going to be my product image i'm going to set it put my price and this is going to be 7.99 so notice that for the offers i'm using this sale price so that it shows clearly all the products that are on sale now that i've added that i'm just going to add a bit of a description here on the bottom and pretty much we are good to go now if you have any extra images you can also add a product gallery here but for this example we're not going to bother with that so now that we're done here you can just hit publish now to see all your products you want to come over here to all products so i'm going to click here on all products so i'm going to go ahead and add a few more products and then we're going to come back and continue with our tutorial okay so now i've added all my products onto my website so the next step now is to design our product page which is going to act as a template which means every time we add even new products they're going to have a similar design so let's dive in and let's design our template all right so to design our template what we need to do is to go scroll all the way down here to divi and you want to click on theme builder so now that we have woocommerce installed uh what's going to happen now is when we come over here to add a new template we are going to now to see all the templates for woocommerce so we can see here we have woocommerce pages we have woocommerce products we have projects and so on but what we need right here is the all products because we want our product page to look really really awesome so i've selected all products i'm now going to create a template okay so by default it comes with this footer which we have here so the area we're going to focus on right here is the custom body okay so let's add our custom build body so here i'm going to click on build custom body and i'm going to build this from scratch okay so let's start off with a single column and then i'm just going to close out of here next i just want you to uh take a look and see the reason why we really want to design this product page in the theme builder so right now when we take a look at our product it looks very basic you can see here this is pretty much as basic as we can be and it doesn't really have a fantastic design so this is what you get by default when you install woocommerce but we want to transform this page and make it look really really awesome so that is why we're designing everything here in this template okay so the next step now is to add a featured image on the background so let's go ahead and do that so i'm going to click here on this gear icon so this is going to take us now into our section settings i'm going to now come over here to background so on the background here i need to add an image so i'm going to click on the third tab click on this dynamic link and the image we need here is a featured image so i'm going to go ahead and select that okay so now our featured image has been added to the background of course this is not the real image but this is where the image is going to be next i am going to add some sort of an effect so i want uh this image here not to be really as bright as possible so i also want to add a color to that so i'm going to come over here now to my background and add a really dark color and then i am going to come back to my image and scroll all the way down here to blending mode and i'm going to change this from normal to multiply so what's going to happen now is it's going to show a little bit here in the background so to adjust that i'm going to come back over here to my main image and then i'm just going to drag the slider just slightly so we can just have a hint of our featured image over here okay so that's all i need to do for now i'm going to save and then now it's time to go in and start adding all our elements here so the first thing i'm going to add here is our title so i'm going to search for a text module i'm going to select it so what i need here is also dynamic so i'm going to click here on this little icon and what i need is my post or archive title now it's time to customize this so i'm going to click here on design click on text change my font here to poppins i'm also going to make this all caps and change the color in fact i may want this really white so let's just drag this all the way here to white okay so that's much better there we go so next i'm going to increase my size here i'll go with maybe say 22 and i'm also going to add some letter spacing so i'm just gonna add my letter spacing here to maybe about 10 pixels and i'm also going to change my font weight from regular to bold okay so that looks okay i'm going to save this okay now it's time to go in and start adding all our elements that we need for our product page i'm going to click here on this plus button so this time i need two equal columns so i'm going to select my columns here and the next step is to go into my row settings i'm going to click here on this gear icon so what i'm going to do here with my rows is add a background color so i'm going to go and add this dark color here okay so now that i have my color in here i'm going to come over here to design and i'm going to go to sizing and select my custom gutter width and set this to 1. so the gutter width is the space between the columns so i don't want any spaces in there and i also want to equalize column heights and then the next step is to add some rounded corners to my design so i'm going to come all the way down here to border so here i'm going to set my borders to about five pixels just to run them off a little bit now that we have this all set it's time now to add all our information so i'm going to save this i am going to come back here and make a few adjustments but for now i need to add all the elements that i need in here so over here to the right i'm going to add my wool image so i'm going to search for woo image okay so i'm going to select it right so as you can see my image here is going edge to edge so i guess what i may want to do now is to make sure everything is all flash okay so to do that i am going to uh save this for now and then i'm going to go into my row settings second column design and i want to come over here to spacing so i'm going to set my padding here to zero so that's both top and bottom like that i'm gonna go back and i'm also going to go into my design here spacing and do the same make sure i don't have any spaces here so that's looking great i really like that so i am going to now save and start adding all my information over here now to the left so the first thing i am going to start off with here is my product description so i'm going to search for wood description i'm going to select it okay so that's going to be my description right here so now i'm going to come over to design text change my font here to poppins and i'd like to adjust the color here so i'm going to go with my color palette here that's generated by divvy so i want to choose a color here that is not too bright so i think this works okay but as you can see now uh all my text is way too close to the edge so i'd like to fix that so let me just save this for now go back to my row settings so as you can see i am going back and forth so this is required in order for us to really have our design the way we want it okay so now i am in my design tab i'm going to go to spacing and i'm going to add let's start off with 20 all around so let's add another 20 for the left and right okay maybe let's add a bit more so let's go with 26 okay so now we have a bit of um breathing space around our text here which is really nice okay so now i'm going to save this save one more time so i'm going to now continue adding all the elements that i need so i'm going to click here on this plus button so this time i need my wool pricing so i'm going to search for woo pricing there we go so that's my price right there now i need to customize it by coming over here to design price text and let's change this to pop-ins and the color here needs to change so i'm just cycling through to see which color works best here you know what i'm going to go with this and i'm also going to customize this change this from regular to bold so we want our price here too nice to be nice and bold and as you can see we have things way too close to the description here i'd like to fix that by adding some margins so i am going to come over here to spacing and add a bit of margin here so let's go with 12 pixels i think that works great all right so that's looking all right i am going to save this now we need an add to cart so i'm going to click on this plus button so again it's just woo and then there we go add to cart so i can now go in and customize this so first of all we can see that our button here doesn't look great so let's go ahead and fix that so i'm going to click here on this uh paint brush icon activate use custom styles for button and now i can start adding my button elements so let's start off with our button text so i'm going to go with that dark color there and let's add our background so let me play with this and see how that looks so actually you know what i think white is better here for my text okay next i'm going to go to my borders and just add my border as the same color as the background so that we have a really nice button there next we're going to change our font here from default to pop-ins there we go so that's looking much better already so now for the add to cart we can decide either to have all caps or in fact all caps is nice because that is really making us focus on the text itself so i like this but i may want to reduce the size a little bit so 20 is a bit too much so let's bring this down to about say perhaps maybe even 18 or 17. okay let's go with 18. all right so next i'm going to come over here on this quantity so on the quantities here we have our fields background color so i'm going to start off with this color here and then i'm just going to lower the opacity all the way down until i have my design my desired color so i am going to go with that and i also want to change my font here just to keep the consistency set this to pop-ins so that's looking great okay so i am going to now work on the colors so i'm going to come over here we're going to change our font here to pop ins change our color and we're going to make it all caps and the size looks okay i don't think we need to change our size here next i'm going to come over here to my options and i'm going to change my font as well to pop-ins here we go right so that's looking better i also want to add space between my price and this section here so let's go to let's go to our okay so let's go to the spacing and i'm going to add a bit of margin here on the top so i'm going to go with 12. maybe for this i'm going to go with 20. okay so that's looking great so i'm going to come back over here to my content and let's give this a background color so for my background color i'm going to go with that so this is just to make sure that our content here is just focusing on that area where we can choose our color and our size so i'm going to further customize this by coming over here and adding a bit of opacity okay so i think this should work okay now i need to give this some breathing space by coming over here to design spacing so let's start here with uh say 20 okay that's not too bad let's add another 20 here on the left and the right and that's looking all right and finally what i need to do now is to give this some rounded corners i'm going to come over here to border and set this to four okay so that's looking clean now i really like the way it's looking now we could further go in and change our colors here in fact let's go ahead and do that so for our background color let's uh play around with some colors here okay i really like that so i'm gonna leave that as it is but my font here needs some work so let's go ahead and fix that now i really need to look for where my uh text is okay so that's going to be the focus text there we go all right so again this is a bit too much so let's lower this down a little bit because we don't want that to be the main focus so you can see here i'm playing around with all these transparency options uh i really like this in my design workflow because it allows me to uh go in and choose the colors that i like okay so i'm pretty happy with what i've done so far in fact you know what i may need to go to the background here and make it slightly darker so i'm going to go back and add a bit more transparency there okay so i'm happy with now with how things are looking i'm going to save this now and this is what we have so far next i'm going to come over here now to my section settings and add some padding so i'm going to come over here go to spacing and let's add 7vw so we're going to add this both the top and the bottom uh let's increase this a little bit okay let's go with 10vw for now so that's looking much better in fact you know what that's a bit too much so let's just drag this down a little bit to about seven what we originally chose now for my text here i can see that if we have a long description we're going to have a problem here because this is way too close so we're going to go in and adjust our line height so i'm going to come over here and set my line height so let's just increase this a little bit to about 1.4 or maybe even 1.5 okay great now i can save this so let's take a look at our design and see what it looks like so far so i am going to now save this and close out of here save and exit so now this is how our product page looks like so if i refresh this we can see now that we have this beautiful design here so that's looking great so far but we need to go in and further customize this i'm going to come back go into my custom body here so straight away i can see that my width which contains our product information here is a bit too much so i'm going to go in and fix that and come over here to design sizing so from 80 let's bring this down to about 72 percent so that looks much better now i am going to now save this and we also need to do the same here on the top change this to 70 so i'm going to come over here to sizing there we go okay great so now that we have this all right so the next thing we're going to add here is our reviews so i'm going to click here on this plus button search for woo reviews and here we go i'm going to select it so right now we don't have any reviews but it's always a good idea that we go in and add our reviews but in fact the more i look at this it doesn't really look nice uh below this so i'm going to uh save it anyway but i'm going to drag it out and add it just below this area here so let's go ahead and do that so i'm going to click here on this plus button and add another column i'm going to save this and then i'm going to drag this over here to the bottom like that okay so this is where we're going to have our product reviews so what i'm going to do next is i'm going to adjust my size here so i'm going to go to design sizing and change this to 66 and save okay so now that we've adjusted our sizing we need to go to the background and add a background color so i'm going to come over here and give this a background so i'm going to go with this color right here so this is just going to show us that this is where our reviews are next i'm going to come over here to design spacing give this a bit of padding so i can separate the two so let's go with 20 right so next just to continue with our rounded corners here i'm going to go to border set this to five and then i'm also going to give this some breathing space inside here so i'm going to now go to padding so for our padding i'm just going to scroll all the way down here until i in fact i think it's up here okay there we go spacing and we're going to go with a padding of 20 all around so let's add another 20 here activate my chain and that's looking much better so what we're going to do next now is to save this and then we're going to go in and make some customizations to our module here so the reviews this needs to be set to this product which is fantastic now let's go in one by one and customize our colors so i'm going to start here with my review count font change this to pop-ins and we're also going to change the color so let's go with something that's easier to read so i'm gonna go to my color palette here and choose a color that works better okay i'm gonna go with that next i'm gonna come over here to my image and i'm gonna give this 100 vw i want this to be circles so when someone leaves a review it's gonna it's gonna be coming up here as a circle i like that next i'm gonna come over here to my colors so my star rating we're going to change the color here so let's see what color works best here so sometimes you have to cycle through these to see which one is better so i'm going to keep this one here from my color palette next i'm going to adjust the sizing so first of all let's add a bit of space between them four pixels is fine and i'm also going to adjust this to about 16 and then i'm going to go into the text now so the meta font this is gonna be poppins let's go ahead and select that but the color here is a bit too much so i'm going to add a bit of transparency to it there we go and then i'm going to go to my description again i'm going to change my font here to pop-ins and let's change our color again that's a bit too much so we are going to lower this up to about there okay great so i really like uh how it's looking now so i'm going to come over here again to add a review change this to poppins change the color so i may need something that's a bit bright here so let's go in and make this brighter there we go i think that works and now i'm going to come over here and let's start working with the field background color so i'm going to come in here choose my color and i'm also going to change it a little bit here by adding a bit of transparency there we go i think that works great next i'm going to give this some rounded corners so i'm going to come over here and look for my rounded corners set this to 5. there we go so as you can see i have my consistency going on here which is great now let's work on the button the submit button i'm going to activate use custom styles for button and let's work on this button here so let's set this to about 18 and for our button color we're going to make it nice and bright and then for our background color we're going to choose a color that works well okay so we're going to go with that dark color there okay so we need to do the same for the border and now it's time to add our text so let's change this to poppins okay that's looking great i really like the way that's looking and you can see here that all my colors here are quite consistent which is really good okay so i'm going to save this now save it one more time and we're going to take a look at our design by coming over here doing a quick refresh so this might not show because we don't have any reviews at the moment but at least you know we have uh this uh right here okay so we are going to decide whether we're going to keep our reviews here or we're going to move it further down here so time is going to tell as we're designing this okay so now that we have this initial design the next step now is to uh add our related uh information so i'm going to click here on this plus button uh add a regular section and we are going to start off with um okay let's start off with say a single column so let's have a text module in here selected so we're going to call this related products and then it's time to uh design this so i'm going to come over here to my design tab we're going to go to text and change this to pop-ins we're going to make it all caps change my color here and we're also going to make this semi-bold okay i think that looks great and we're also going to increase the size a little bit to about 16. all right so now that we have our related parts section here i'm going to save this and we're also going to go in here and change the width so i'm going to come over here to sizing change this to 66 and save okay so let's duplicate this one more time and this time we're going to add our products in here so i am going to add a background color to this so i'm going to come over here go to background and let me choose my color here again i'm going to go in and add some transparency like that maybe a bit more let's go in and give this some rounded corners so i'm going to go to border set this to 5 and we also need to give this some padding so i'm going to come all the way down here in fact it's all the way to the top and let's add a padding of 20 pixels and this is going to be around like that okay save that so what i'm going to do next now is to just delete this because the one we need to add here is the woo related [Music] so there we go related product and this is what it looks like so what i'm going to do now is to uh specify how many i need in here so maybe we should go with three and for my column layouts it's going to be three now we can go in and customize this text and also everything else that's inside here so i'm going to start with the text which says related products we're going to change this from default to pop-ins we're going to reduce the size a little bit okay to about 18 pixels now let's go to the images give them some rounded corners great now we're going to go to the description here change this to pop-ins and as you can see the size is a bit too much here so we're going to bring this all the way down to about 16. our colors here for our ratings we're going to change that to something that stands out so we're going to also space them out a little bit and also adjust the size so i think 14 works fine and let's go again and add our price here so for our price we're going to change this to poppins we really need to make this bold and we're also going to change the color okay so i really like how that looks so far so let's save this so i can see that this here comes with its own um title so we don't need this anymore i'm going to delete that so now we have our related products and you see this review here let's bring this down to the bottom there we go so i think that looks much better now so let's save this and see what this looks like so back over here we're going to refresh okay so now we have our related products and this looks really really nice i'm sure you can agree with me now that this looks much better and we also have our reviews here on the bottom so we may need to give this you know a bit of space because there's a little bit of space there on the top so let's go and fix that and perhaps maybe even give this uh more space over here on the sides so again these are the sort of things that you need to do time time to time go in make further adjustments until you're happy with the spacing and how things look on the page all right so we're going to go back over here so we're going to start with our related products here and go in to our module here design and we are going to go into spacing this oops we need to go into spacing so let's give this a bit of padding to the top so i think 20 looks great and let's also do left and right maybe give this a bit more let's go with 36 and save we're going to do the same here click on design spacing and we're gonna go with 36 on the top and then 20 on the left and the right okay so that's looking much better we're also going to adjust the size here this is a bit too big so let's bring this down a little bit so let's go with 18 but this time i'm going to make this all caps in fact all cap doesn't look nice all right so we're going to leave it like that but let let's make this stand out a bit more okay so let's save that so we can see here that this space between these two is a bit too much i mean too little so let's set this to about 40 and also we may want to give this a bit of a padding so let's go into our section settings here design spacing and we are going to add you know some padding here let's go with 100 pixels so let's add that both to the top and the bottom so this is great to give this uh design some breathing space so now i'm going to save this now as i look at the top here i'm not really happy with the spacing that i have around here okay so we need we might need to go in and adjust that so i'm going to go in to our design spacing and let's add our padding here so we're going to start off with say 7vw it's going to be both to the top and the bottom save that save it one more time so we're really getting closer now to finalizing our design so i'm going to come back here and refresh and this looks much much better i really like how it's looking now so our related products here we also have our review so you can go in and leave your review over here which is great okay so as i look at this this might be a bit more information that we may need to add here so let's go ahead and do that so back over here so we're going to give this some breathing space by coming over here to my row settings design spacing so for my padding here i know i set it to uh zero in fact i'm adjusting the wrong thing here i need to go to my first column so you need to go back and then go into your first column design spacing and now we can adjust this a bit more so i'm going to add say 36 and 36 as well okay we're gonna save that save it one more time all right so what i'm also going to add here to the top is our bread crumbs so i'm going to um add another module here so let's search for it woo bread crumbs so the reason why we're adding this is it just makes it easier for our visitors on our site to navigate through our product pages and also our website easier all right so this is our breadcrumb so we need to go in and customize this so i'm going to go into design text so let's change our color here or in fact let's change our font first and our color as well so for this to stand out we need something a bit different here so i'm going to go to my color palette and see which color i can use okay so i'm going to go with that as my bread crumb and we're going to make it all caps and let's give this some little spacing as well but not too much so let's go with two and what we may also need to do here is to make it bold in fact you know what it looks okay the way it is okay so i'm going to save this and back over here i can see that my line height is not great so i'm going to go to design text increase my line height there we go in fact that's a bit too much all right let's go with 1.8 right so i'm going to uh save changes so this is looking much better now i really like the way the design looks um so that's the only information i am going to add here on this page and over here on the bottom we can see we have our related and our reviews now what i'm also going to add is a design element because this this here looks way too plain so what we're going to do is we're going to add an image here to the background so i'm going to come over here click on my image here so again we're going to use our featured image as our main image but we want a hint of the image on the left okay so we're going to add a gradient so um for our gradient here we're going to set our second color here to white and i'll start and no in fact our gradient direction needs to be 90 degrees now there's going to be a little bit of a back and forth that's going to be needed here because we're not sure how this is going to look so let me add this to my page here so you can see where my gradient is going to end and for our color here we're going to set this to white but we're going to add some transparency so let's go ahead and add our white in fact we're going to go with this color here but we're going to add a bit of transparency so we can see a little bit of that image that we're going to have in here okay so let's save this save it one more time and take a look and see what this looks like on our product page so i'm going to refresh this okay so this is our main area here i'm going to scroll down right so uh our image here is in the background but it doesn't really look nice at all so what i may want to do now is to go in and adjust this related products here because i've added a bit of transparency to it so this is going to uh change how this looks okay so let's go in and fix that so on my related products here i'm going to go in and go to my transparency here and bring this back up okay let's save this all right so we're almost done here with our design the next step now is to add an overlay to this image here so i've clicked here on overlay so when i mouse over here we can see uh that the color that we have here on the overlay doesn't look that great so let's play around with that so so far i've gone in and changed my icon and i can also uh change my icon over here but the one i have i think is uh fine okay now let's go to the background overlay so i'm going to click here and choose my color so as you can see here it's a bit too much so i'll need to add a bit of transparency to it so let's see what it looks like so i think that looks great i'm going to save that save this one more time and let's take a look at our final design so over here now this is what we started off with so you can see that this i mean this design doesn't look that great i'm sure you can agree with me but over here now let me just refresh and let's take a look at our final design so let me just get myself out of the way here okay so this is our final design so as you can see here this looks way much better than what we had a few moments ago and this looks pretty cool now let's click on one of the related images now you can see our overlay is really showing here so i'm going to click on that and here is the next image and it looks beautiful here in the background and we also have a hint of that over here as well and this design here is pretty much going to be consistent throughout that's the final design thank you very much for watching don't forget to hit the subscribe and bell notification 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 take

Channel: MAK

Views: 5,067

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: IG9cSF61N8Q

Length: 40min 46sec (2446 seconds)

Published: Tue May 25 2021