How To Create A Custom Woocommerce Divi Cart Page | Divi Tutorial 2022

Hi guys welcome back to my youtube channel, if  you are new here my name is Stephen welcome to my   channel, in today's video i'm going to be showing  you how you can customize your Divi Cart page   this is what your difficult page will normally  look like by default and you can see that this   is really basic and really boring we're going to  transform this page from something like this to   something like this so if you're interested to  see how we created this cat page go ahead and   smash that like button if you haven't subscribed  to the channel already go ahead and do so let's go   ahead and get started with the tutorial the first  thing you need to do is to login to your wordpress   website if you are watching this video i already  assumed that you already have a Divi website now   you are looking for a way to customize your cart  page so if you are looking to customize your shop   page instead i do have another video on that you  can go ahead and check this video out this is a   short page that we customized in the video i will  leave the video in the description box below you   can go ahead and check it out but for now let's  go ahead and get started with your cart page so   once you're on your dashboard you can go ahead  and scroll down all the way to divi over here   and then click on theme builder so we're going  to be creating this cart page inside the theme   builder inside here you can see all the templates  that i've created already inside my theme builder   if you don't have any template yet that's fine  you're going to see this button right here that   will allow you to add a new template so from here  all we need to do is go ahead and click on add a   new template and then we are going to select what  we are creating the template for so in this case   we are creating the template for the cart page go  ahead and select the cart page and then click on   create template so now that we have a template  for our cart page we can go ahead and add a   custom body for that template so from here you can  copy a template from your other pages or you can   add from the library but in this case we want to  create a custom body so go ahead and click on that   so from here if you hover your mouse over here you  can see that we already have a section created for   us go ahead and click on the setting icon for  this section and then we can give the section   a background color a background image in this case  over here we have a background image so we can go   ahead and do the same so let's go ahead and give  this section a background image so we select the   background image option here go ahead and select  your background image if you don't have the image   yet you can go ahead and grab it and drop it  right here but in this case i have some images   here so i'll go to my library and grab this image  and then click on upload so from here you want to   make sure that the image background is on cover  and then the background position you can go ahead   and choose the position that works back for you  and then the background image repeats make sure   that it's on no repeat and then the background  image blend we're going to change this to overlay   so once you change this to overlay come back here  and go to the background color tab and then select   the background color overlay so let's go ahead and  select this black color right here and i click on   the color and then we're going to use this slide  right here to reduce the opacity of the black   color so you reduce that to your liking in this  case i will leave it just like this you can still   see the background image that we have a little  bit then i'll click on the check mark to save it   and i head over to design tab click on spacing and  then here we want to add some padding in here you   can see that this is really small compared to what  we have over here we're going to add some padding   in here so let's go ahead and give this maybe like  100 on the top and also 100 at button so go ahead   and click on the link button to add 100 here as  well so that is a little bit small let's make it   150 maybe okay so i think this is good that's 150  right so we have 150 pixels here and 150 pixels   here go ahead and click on the save button right  here and now the next thing we need to do is to   add the title and also add the steps that we have  right here you can see that we have the shop page   we have the review page and we also have the  checkout page so these are pretty much links   if you click here you can go back to the shop page  if you click here you can go to the checkout page   and then the review page is currently the page  that we are working on you can see you finish   your shopping now you're on the cart page  and then the next one is the checkout page   for example if you go to the checkout page you can  see that the icon becomes bigger right that means   we're currently on the checkout page and then if  you go back here to the cart page you can see that   the icon becomes bigger right so let's go ahead  and do something like that so the first thing we   need to do here is to add a row so we're going to  add a one column row we select this one right here   and then inside the row we're going to add a title  in this case we're going to use a dynamic post   title so go ahead and select the post title right  here so basically what this is going to do is that   it's going to pull the information from this page  it's going to use the title of the page but in   this case we don't need to see the featured image  and also the metadata for that page so we're going   to go here and disable this and also disable the  featured image so the only thing we need here is   the post title right so we show the title select  the title and then you can go ahead and customize   the title we can change the font from here we  change this to poppins and then the font weight   we can change that to maybe board and then we can  center this to the middle and then if you want to   make this all capital letter we can do that from  here as well and we can change the color as well   we change that to white and then you can also  increase the size from here as well and that's   pretty much it for the title let's go ahead and  click on the save icon here so the next thing we   need to add here is to go ahead and add a divider  you can see here that we are using a divider to   actually achieve this so what we need to do now is  go ahead and add that divider so we go in here and   click on the black pencil icon again and search  for divider we select the divider icon you can see   the divider right here so let's go ahead and make  the line a little bit thick so the divider color   you can go ahead and choose whichever color that  you want you can see here that we have two colors   right we have this color here and we have another  color over here so because we have two colors you   can do that with one divider right unless if you  just want to have one color then you might be able   to do that with just one divider so we're going  to be using two dividers i'm going to show you how   you can achieve that so let's go ahead and give  this divider a color maybe we'll give it a white   color for now and then click on the sizing over  here and then the weight maybe we want to change   that to maybe two or maybe three for now so we can  see what we are working with and then the width we   are going to change this to 50 percent so because  we want it to be half and half so we change this   one to 50 percent so let's go ahead and click on  the advanced tab right here and then we are going   to scroll down to position and then from here  we want to change the position of this divider   from relative to absolute so now that we have  it on absolute you can see that it's very very   close to the title so what you can do here is over  here you can play around with the vertical offset   and we can also use these boxes here to move this  to wherever we want it if we want that to the   right we can move it to the right if we want that  to the left we can move it to the left so in this   case we want this to be right here on the left  and then we're going to use the vertical offset   to move this a little bit down so we're going to  add maybe not too much maybe 35 pixels in here   we add 35 pixels i think that's good enough or  maybe 40 so whatever you want you can put in here   let's go ahead and click on this button right  here to save and then the next thing we need to   do is to go ahead and duplicate this so we make  a duplicate of this and then we open the second   one that we just duplicated we can just open any  of them pretty much and then let's go ahead and   change the position for the second one so that  we can see what we're working with let's go to   the advanced tab and then go to position again and  then change the position for the second one to the   right side so we change that to this one now you  can see that we have two over here you can see it   because they're exactly the same color so let's  go back here to design tab and then let's click   on the line and change this color to red like this  now you can see that we have two different colors   here obviously you can change this to whatever  color that you want but for now i'm just going   to use red as an example or maybe i can just use  this color as an example now you can see we have   two colors here right so let's go ahead and add  these icons that we have right here let's click   on the black icon again to add a module from here  this time we're going to add a blob so go ahead   and type blob so this is the one that we are going  to need so right now you can see that we have this   image here and that's not what we need so let's  go to this one maybe over here you can see that   we have shop and then we have cart page and we  also have the checkout page so let's go back here   and change the title so this one we want to make  this one the middle one so we type review in here   we type review in here and then we don't need  any paragraph here so let's go ahead and delete   this and then we have the review here let's  go ahead and select it and change the color   but we can change the font to maybe bold and then  the color we can change that to white and then the   size maybe we can make that or capital letter as  well and then the size maybe we can change that to   20 so 20 pixels here so that's what we have and  then maybe let us spacing we can space that out   a little bit like this and then the text alignment  we can align that to the middle just like this now   let's go back to content right here so go to image  and icon so this one we don't want to use an image   we want to use an icon instead so go ahead and  select use an icon and now go ahead and select the   icon that you want to use you can see over here  we are using the cat icon so you can use the same   icon or you can use any other icon that you want  so let's go ahead and look for the cat icon here   so go ahead and search for that so here is the  options that we have for cat icon so let me go   ahead and select this one right here but we have  the icon let's go back to the design tab right   here and then we can click on image and icon so  this is where you can customize the icon so the   icon color is currently this color right now so  maybe we can give this a white color like this   and then maybe we scroll down here the background  maybe we can use this background like this   and then the icon placement we want that to be on  top if you put it on the left it will look like   this and then the text will be right here so we  want that to be on the top just like this so that   the text will be right under the icon and then the  icon width we can reduce that to maybe something   like this i think maybe 45 or 50 is fine and then  the alignment we leave that in the middle that's   fine and then the rounded corners you want to add  100 all around so we type 100 here so now you can   see that's going to add 100 all run so that way  we can get like a second background and then let's   go down here to padding and then inside here we  want to add maybe 25 pixels we add 25 pixels on   the top and also 25 pixels on the bottom and then  we add 25 pixels on the right and also on the left   so that's going to make a perfect circle like this  you can see what we have so this is looking really   nice and you can also see that this divider  is showing on top of this icon background and   we don't want that right so let's go here to the  advanced tab let's go to position and here we have   dc in desk so with the same index we can push this  forward what we can do here maybe we can add like   10 or 15 let's add 15. so by adding 15 pixels in  here right now you can see that we push this icon   on top of every other thing on this page so that  way all these dividers will be behind the circle   right so that's exactly what we want so now that  we achieved that so since we're already here let's   go ahead and click on the position tab right here  so let's go ahead and select absolute position   here and with that absolute position selected  we want to make sure that this is in the middle   so now that we have that the next thing we're  going to do is to go back here to the design tab   and then scroll down to spacing and then maybe  we can add a negative margin right here i think   this is perfect maybe 60 minus 60. but i think  that's looking good so far so maybe we can add a   little bit more space here so let's go ahead and  click on the wireframe mode so that we can see   everything that we have here so we have the post  title we have the divider so let's select the file   divider and then let's click on the wireframe mode  again to see what we are working with now let's   go to advanced tab and click on position and then  from here let's increase the vertical offset that   we have here so that we can have enough space  between the post title and the dividers that we   have here so i think 65 is perfect let's go ahead  and do the same thing with the second divider so   click on the setting icon click here again to  see what we are working with go to advanced tab   click on position and then change this to 65  all right so that's perfect you can see so   now that we have the middle one like this to  grade these two is really easy all we need to   do is to duplicate this one so let's go here and  maybe we can duplicate this one twice like this   now we have three let's click on the second one  let's click here to see what we're working with   again let's go back to advanced tab let's go to  position and then now let's go ahead and change   the position of this one to the left so once we  change that from here we can change the horizontal   offset maybe we can make this uh let's slide this  and see i think we can make this maybe 540 pixels   so 540 pixels so we do minus 540 pixels so let's  go ahead and change the vertical offset as well   let's change this to maybe 116. so you can see  that that's looking perfect right so what we need   to do now is to go on mobile and make sure that  everything is responsive as well so make sure that   everything is responsive on mobile and also on  tablets so it's looking good already so the next   thing we need to do is to go and reduce the size  of this one you can see that it's exactly the same   with the middle one but we don't want that we want  it to look like this a little bit smaller and then   exactly the same size with this one so let's  go back here and change that let's click on the   icon right here and then from here we have the  icon weight so we want to reduce that a little   bit maybe we change this to 15 15 pixels and then  let's go back to the advanced tab again click on   position now we want to make sure that everything  is exactly in the middle so let's go ahead and   add more pixels in here so the next thing we need  to do here is to go on the horizontal offset and   click on the mobile version right here to make  sure that everything is looking good on tablet and   also on mobile so go ahead and hover your mouse  over here and click on this responsive mode here   and then click on tablet option right now  you can see that we can see this because   of the screen size right so we have to reduce  the pixels that we have in here maybe we can   add like maybe 26 pixels in here but once we add  that you can see that we can see it right now   and then if we go to mobile phone mobile phone is  also going to be like 26 pixels if we want to add   more space in there maybe we can do something like  this so we change that to 46 here on tablet and   also change that to 26 on mobile phone so that's  looking good let's go back to the desktop tab here   so the last thing we need to do with this icon is  to change the title right so maybe we change this   one to shop but we change this one to shop it's  going to look exactly like this and then from here   what we can do is to go ahead and customize  the last blob here or we can just delete it   and duplicate the second one that we just created  because the next one we are trying to grate is   exactly the same size and then we click on the  selling icon here and then let's go back here   to see what we are working with now that we have  the sending icon here what we can do is to go back   here to the advanced tab go to position and now we  want to change the position from left to right we   change that to right over here now you can see  we have exactly what we are looking for right   so we just created that and that's very easy to do  right and then you can go back here to content and   then from here we can change the text to check out  but for this example i'm just going to leave these   ones like this but you can play around with it  and get the exact colors that you want so for now   let's go ahead and add this section of the page  so you can see here that we have all this product   on the cat and then once you're scrolling on the  page you can see the card totals right here will   stick to the top but it's going to stick until we  get to this section of the page and then it will   start scrolling with the rest of the page so let's  go ahead and do that so from here the next thing   we need to do here is to add a new section but  we're going to add the regular section and then   inside that section this time we want to add a two  column row because here you can see that we have   a bigger column here and then a smaller column  over here so let's go ahead and select a column   that looks similar so maybe we can go with this  one right here or maybe this one even but let's   go with this one for now so let's scroll down all  the way to the bottom and go to the wool modules   and then from here let's go ahead and add the wool  cut products and then let's go inside the second   row let's go ahead and add the wool look at totals  so here's the one that we want we want to add the   look at totals and now that we have that here  the next thing i'm going to show you is how to   add all this background color right here so let's  go ahead and customize this let's click on that   let's say if you want to customize this shoe icon  here you can click on the pencil icon right here   and then it will take you right there and then you  can make all the customization that you want to do   so for now let's go ahead and change the color  of the product title so click on the pencil icon   it will take you right here from here you can  change the fonts we can change that to poppins   and then we can change the font weight from here  i will leave that on regular for now and then   the color we can change that to any color that we  want i will change this to red for the sake of the   tutorial and then the table is the table that we  have right here if i click on the table like this   and then the table background we can give  that table a background color like this   and then the text that we have inside the  table which is the table header right here   we can give it like a white color like this so  this is pre-self-explanatory i'm not going to   spend a lot of time customizing this for you guys  you guys already know how to use dv if you don't   know how to use the view already you can go ahead  and check this video out i explained everything   in this video so in this video you'll learn how  you can customize pretty much anything in divi   so it's pretty much the same process all you have  to do is to click on what you want to customize   and then we get all this blue pencil icon here  so you can click on this one to customize this   particular button you can click on use a custom  button and then from here you can customize the   button you can change the text color to whatever  you want we change the text color like this and   then the background color we can change that to  red if that's what you want we change the text   back to white and then we can change the border  width to zero so it's the same process for pretty   much everything including the card totals you can  do the same thing with the cartoons here and the   buttons that we have here so i'm not going to go  in details on how you can do that so for now what   i'm going to show you is how you can add all this  box shadow here and how you can also make the card   totals to stick to the top once you're scrolling  on the page so let's go ahead and do that so to do   that go ahead and click on the row setting icon  here and then we're going to select the first   column and then go to the design tab and then  scroll down to the box shadow here let's go ahead   and add a box shadow to this one and then the box  shadow maybe we can add like a 30 pixels for the   block strength and then maybe we can add like  minus 10 pixels in here for the spread strength   something like this and then let's go back here  to borders and then maybe we can add the rounded   corners maybe we can add like maybe 15. we add  15 pixels all round something like this okay so   that's not looking bad so let's go back to columns  here let's select the second column and then let's   do the same thing with the second column let's  go ahead and give this second column a background   color maybe we give it a white background color  and then we go to design tab and add a box shadow   so this one we need to add some spacing in here so  let's go ahead and click on the spacing tab over   here maybe we can add 25 pixels here on the right  and also 25 pixels on the left and maybe we can   also add on the top as well we add 25 pixels and  also add 25 pixels at the bottom as well so that's   not looking too bad right and then maybe we can  add rounded corners as well let's add 15 pixels   all round and then the box shadow you can play  around with it to whatever you want i can change   this one to 30 and then maybe change this one to  minus 10 as well and now what we need to do is to   click on the back arrow right here to go back here  to the raw settings and then let's go to design   tab and click on sizing and then from here we want  to change the goda weight you can see the amount   of space we have in between here we want to change  that to custom go to weight maybe we can add two   pixels in here so that will look exactly like this  and that's looking a lot better and then if you go   back over here you can see that we have this row  overlapping with the first section so to do that   we go back here so since we're still inside the  row setting we can go to the spacing tab and then   from here we can add a negative margin here maybe  we can add like minus hundred so that was close   maybe we can add minus 150 so that's looking good  you can see this one right here we can see true   because we don't have any background color here so  what we can do is go back here click on the first   column and then we go to the background type here  and give it a background color we can give it a   white background color now you can see we have a  little bit of problem here because we don't have   enough space in here so what we can do is go back  here and add some spacing in there we can go to   the design tab go to the spacing tab and then over  here we can unlink this maybe at the bottom we can   add more space in here at the bottom like this  so this is just an example obviously play around   with it once you get it exactly how you want it  so now that we have this here the next thing we   need to do is to go ahead and try and make this  sticky so let's go back here to the row setting   and then go to the second column from here let's  go to the advanced tab and then let's go to the   scroll effects and then from the sticky position  option we want to change this to stick to the top   and then maybe we can add a sticky offset maybe we  can add like 10 pixels and then the next one we're   going to change is the bottom sticky limit so  let's go ahead and change this to the row so we're   going to change this to this row so this row that  are working on so once they stick to the page and   then scroll to this section of the row and then  it will start scrolling with the rest of the page   so now let's go ahead and click on the save button  right here to see our results so far so click on   the save changes here as well now let's go ahead  and refresh the cat page so now you can see our   cat's page right so this is looking really nice  already you can see that we have the sticky cat   totals right here if we scroll up you can see that  this section will stick to the top right so that's   exactly how we achieve this and you can see that  this is looking really nice already so the next   thing you need to do is right here you can see  that this is not a button right so it can't really   take you to anywhere so let's say for example we  want this button to take us to the checkout page   what we need to do is to go here and copy the  link for the checkout page we copy this link   so now let's go back to the team builder and go  back to the template that we are grating so from   here let's go ahead and click on the wireframe  view so that we can see what we're working with   let's click on the last blob that's where we want  to add the link so once we're here we can scroll   down here to link and then the module link we  can go in here and paste the link so go ahead   and click on the save button right here to save  that now if we go back here and refresh the page   but once we refresh the page and click on this  button you can see that this button is not a link   you can do the same thing with this one do the  same thing with this one as well but for now let's   click on this one right here and this is going to  go ahead and take us to the checkout page right   so that's pretty much how you can create a custom  cart page for your dv shop page just like every   other david page you can add any dvd module that  you want on the page so that's how we graded this   section right here if you want to grab something  like that you can go ahead and grade that i'm not   going to be showing you that in this tutorial we  also have this template for you you can go ahead   and download it and use the template i will  show you how to download the template you can   go ahead and use the template you don't have to  grade this yourself i know for some people this   might be a little bit difficult or maybe a little  bit technical for you guys to great that's why   we grated the template for you guys already you  can go ahead and download the template for free   and then you can use it for your cats page we  also have the shop page included and also the   checkout page included as well so you can go ahead  and check that out so to get the template all you   have to do is to go to this website shop.wp  forward slash freebies so go to this website   i'll leave the link in the description box below  so once you're here you can see the woocommerce   dvd team builder 10 plus 2022 go ahead and click  on click me to download and then go ahead and put   your name and email address click on this button  to submit so once you submit that you're going to   receive an email go ahead and check the email  address that you entered here and then on that   email you're going to see a link just click on  the link and then the template will automatically   start downloading it's going to say dv woocommerce  team builder templates 2022 so once you unzip the   folder you're going to see these json files right  here go ahead and grab the dvcat page so this is   the difficult page 22. go ahead and grab that  so this is the template that we have right here   let me go ahead and close that so to use the  cat page all you have to do is to come back   here inside the team builder go ahead and click on  this portability icon right here and then click on   import and then from here make sure you uncheck  this so that this will not override whatever   you have inside your team builder already and  then go ahead and grab the cat page 22.jsm file   and then drop it right here like this and then  go ahead and click on import div team builder   templates and now you can see the template that  we just imported you can see that it will say   cat page number two you can go ahead and change  the name maybe for example i'll change this to   maybe i'll change this to sample cards page and  also you don't have to change the name but i   like to rename my template that way i can stay  organized and know exactly what the template is   for so now that we have this in here we can go  ahead and click on save changes so just to show   you that this template actually works let's go  ahead and click on the custom body right here   let's go ahead and customize it this is exactly  how you can customize the template right so once   you're in here just like the example that we did  before you can go ahead and customize anything   that you want here you can go ahead and change  the colors you can click on the selling icon   right here click on the pencil icon to customize  anything that you want to customize but for now   we're not going to be doing that let's go down  here and just change the background color right   here so let's go ahead and change the background  color for this row right here let's change this   to yellow we change it to this color right  here let's go ahead and click on save changes   the reason why i'm changing the color is that once  we refresh the page so that you guys can see that   this template actually works so that you guys can  see the template that we are working on right so   because i know it might be a little bit confusing  because we have like lots of templates going on   so right now you can see the cat's page that we  have the one that we just grated together right   so let's go ahead and click on save changes here  so once we save changes here remember this card   page is not assigned to anything so let's go ahead  and click on the selling icon here and then scroll   down here and assign this to the cart page so it's  going to tell you that this is already assigned to   a template don't worry about that go ahead and  click on save changes so once you save changes   it's now going to go and assign the cache page to  this particular template let's go back here and   click on save changes again and now let's go back  here and refresh the page awesome now you can see   once we refresh the page you can see the cache  page that we just imported and this is looking   really really nice guys so this is exactly how you  can create a custom cache page for your dv website   so if you like the video and the video was helpful  one way or the other you already know what to   do go ahead and smash the like button and if you  haven't subscribed to the channel already go ahead   and do that and click on the post notification  icon so you get notified whenever i upload a video   like this thank you guys so much for watching  this video and i'll see you next time bye

Channel: WpLifestyle

Views: 3,956

Keywords: divi theme, woocommerce tutorial, divi theme tutorial, divi theme woocommerce, ecommerce wordpress tutorial, divi woocommerce, divi theme builder, divi theme 2022, woocommerce tutorial for beginners, woocommerce tutorial wordpress, Divi Custom cart page, Divi cart page, divi cart page design, divi cart page layout, woocommerce divi cart page, divi theme ecommerce, divi theme tutorial 2022, Stephen Iloka, WPL, wp lifestyle, woocommerce tutorial 2022, divi templates

Id: jxPEijA4aH4

Length: 25min 44sec (1544 seconds)

Published: Tue May 03 2022