Divi Theme - NEW WooCommerce Builder Update Tutorial!😀😀

Key Takeaways

hey everyone my name is Darrow and today's the day that they be team finally announced that the new WooCommerce builder for the DV team has been released OOP hey we can you can finally clap there you know I think we're all happy about this and we've all been anticipating this release now this video I'll kind of walk through examples of what you can do I'm also gonna talk about how you can also decorate your cart and your checkout page as well it's gonna be good so this is my websites it's actually just the demo that I've been using that city gives they give tons of free demos really cool and here I'll go to my shop page so this is the landing page now I'm going to go to my shop page so this is my shop page and I have three products right here so I have Divi product one two and three now with this new update released you are now able to design the product pages so by default you can kind of see that the product page will look something like this right here now on this page right here I actually did also make changes to it very briefly you know very small but this is just a one example so you can see here I switch this around with Add to Cart nothing big nothing really crazy I'm just kind of messing around with it now I'll take a look at my other product over here now this is product two and this is pretty incredible this is actually your new product page so right here you can see that I have a product page I have the price we have buy it for now and also Add to Cart now the great part about this update is that you can actually combine the WooCommerce modules with the Divi modules as well you're not restricted to just using the WooCommerce module so you can be very very creative so what I did on this page right here is I actually just uploaded a template I deleted everything uploaded a template and I simply just added the Add to Cart button change a little bit of stuff around to make it a unique product page now also I have this page right here and you can see this page represents something a little bit more of the actual product and you can see here that I have a box shadow around this I've changed the padding right here so now you can see that we have this padding right here I added two images and no it's really funny that these images aren't even the images that I actually came with the product so I basically I use my own images and I just said hey I want to be as customizable as I want I want to take out the product image out of my own I want to add in a different price you can add in the different fonts etc now this right here is my cart page so along with this I actually made a custom cart page as well now you there are some limitations to this so you can manipulate this as much as you want so you can manipulate the columns you can lip it the color the transparency the text the font etc but specifically for the actual positioning of the car page such as this the car totals and this right here you can't modify that but you can modify everything around it to kind of manipulate it and make it look how you want it to look so here I have this almost done I've changed the actual background right here so you can see that you know I changed everything and it looks amazing now this is my checkout page and you can see here how I've actually added a box shadow around this I added quick details now you can also modify this as well but this blue background and I'll talk more about that in just the bits but you can see here that it is a great style check out page and I think that now that you actually have the ability to change your products you can kind of decorate all of them as you go so that's pretty cool so let's go ahead and just talk about the actual products I'm gonna kind of run you through how this actually works we'll be talking about the modules etc it's actually very very self-explanatory and there's a few ways you can do it you can actually go ahead and just kind of modify the product right here or you can actually just go ahead and delete everything and start over from scratch which is pretty cool so and I am hoping that Diddy Divi if you're watching this oh I'm sorry elegant themes if you're watching this give us some templates guys come on you showed them in the demos we want the templates everyone wants the templates that's that's what sells here okay so this is the actual product page right here and even the actual when someone adds something to the cart and WooCommerce displays the notice you can actually design that as well in fact on the other product page right here if I click on add two carts you're gonna see that this right here is black and has this other view to cart thing right here that was my designer she's actually making a thumbnail for me I'm picking this video whoops whoops anyway so right here we have the actual product and now you can kind of see that we can you know move things around so now I can go ahead and move this over here I can move that over there or I can go ahead and take this and I can move it somewhere else where I just you know I don't want it to be etc now we can also change this to a full width template instead or you can even have the sidebar so depending on what you want for your website you can take out the sidebar or you can have the sidebar so for example product three right here I just had to just take out the sidebar and if you want to know how to do that right here I'll click on edit product right here and I'll just kind of show you around the back end really quick before we actually jump into the visuals of this so right here we have product contents and we can build it from scratch you can go ahead and use the default style and just kind of modify things as well now you can also go ahead and change everything from the back end as well personally I don't like using the back end because I just can't see what I'm doing and I just prefer the front end as well but it's just another option if you want to go ahead and do that so right here under the page layout I'll put full width and right here built from scratch so I can have the ability to have a full width product page and make it from scratch or if I want to have the actual sidebar I can put the sidebar there as well for this example I'll just go ahead and use full width and then I'll go ahead and design the page now I've been messing around with this product builder for maybe around an hour and a half so I have made a lot of adjustments and everything so here I'll go ahead and go to view the product and right here I'll click on enable the visual builder notice how this is gone right here now this is all gone so I'll click on edit visual builder and let's go ahead and jump through some of these modules now I want you to kind of kind of think outside of the box here you're not limited to using just the blue commerce module as d-v provided you can use your own specific modules or your own templates as well for your product page so here we go so right here let's say I want to go ahead and add in something else so right here I click on the + new icon and scrolling down right here you can now see that we have the WooCommerce Add to Cart do commerce additional info the breadcrumb which is this right here we have the blue commerce notice WooCommerce description which is just the general description you can go ahead and move it around if you want the Wu gallery which is the image gallery when you add more images you have the Wu meta which is this information right here going to close that this information right here such as the category and the tags I'll go ahead and scroll down and also we have the WooCommerce price new commerce rating so if you enable writings on your products you can go ahead and add those to any part you wants WooCommerce related products now this is very interesting because before you can actually go ahead or before you can not really design it you know now you can actually design the upsells and the cross cells as well on your website so you want to add a box shadow round it you want to change the text for it you can modify all of that now with the Divi theme so over here we have woo ABB's the title and also the upsells so you can go ahead and kind of mess around these or just by simply adding in you know who commerce related products and here you can see that we have the route commerce related products now I'm not going to go through each specific one because actually it's just like the Divi modules each specific WooCommerce Product module has all of the options that all the other modules have so you can go ahead and add in a text you can add in a drop shadow to it so here you can see I'm starting to modify it you can change the position of it so you get the point here you get that you have the full functionality of changing everything that you want with every single commerce module so here it's a let's just go ahead and say I want to go ahead and add in maybe I want to go ahead and move in the Add to Cart right here and another great thing is that you can actually go ahead and you can modify the Add to Cart so just like the Divi button modules where you can go ahead and use the custom styles for it you can do the same thing right here so for example right here I want to change the button color to black and let's go ahead let's get customizable here let's go ahead and mess around with this adding a background never a good idea it's just not a good idea guys no don't don't get too creative you know just keep it simple I know you're excited because you can change stuff and everything let's just keep it simple trust me well that will work button radius so now I have a circular button letter-spacing we can choose a letter spacing as well buts in font so this is probably one of the more important ones to match the style and the core of your websites and then right here we can go ahead and add in a button or you can go ahead and disable it and the button text shadow as well you can even add in a tech shadow I mean there's no limitations on what you can do now and let's just say you're not happy where that is you're gonna say you know what's I want to put it right here you know I want to put it really close right there you know oh also for the number one right here you can also change the color of the background of this right here you can add padding you can basically do anything that you want so imagine you're making a page with Divi except you're using the blue commerce modules this is exactly the same thing over here as well so this right here is the WooCommerce this is the WooCommerce car to notice settings and again before with WooCommerce you're limited on what you can change now I could say I want it to look black I want it to kind of match the style and decor of my site so so here I'm gonna go ahead and and leave it like that use a background color yes we have to use a background color now also even the text right here we can even modify the text and for every module you can see that little pen that they have and you can just click on the pen and it'll automatically take you to where you want it to go so here I'll say I want a black and there you go so now you can see that we have this here let's make that let's clean this up a little bit during what are you doing let's go I'll take this out all uh there we go something like that or I don't know oh maybe we can add in something here I can even add in a we can even add in a drop shadow to the second to the second structure so over here under the teal icon I'm gonna go to design and go to the Box shadow and I want to go to column two right here so see column one column two so this right here is column two and I want to go ahead and add an eight box shadow around its voila now we have a beautiful box shadow but you notice right here how its kind of it's pushing in and doesn't look good you know what's up with that how can we change that Darrel well don't worry you're talking to Daddy daddy knows that a degree everything so right here we have the spacing and what we're gonna do here is we're gonna add 30 pixels 30 pixels and then over here Vlada in 20 pixels and then we'll add another 20 pixels something like that so now you can kind of see that we have a more cleaner image you know it looks a little bit nicer also right here maybe I want to go ahead and take this hoot I to title settings and maybe we can go ahead and adjust it right here so under the settings under the title text let me see spacing we can go ahead and added some margin and maybe we can even Center this as well I want to see if they actually have the other it is yeah they have that right there and then here you can kind of Center everything you got you get you get what I'm doing here we can kind of Center it and make everything look really nice and really clean so I'm just really excited this update came out I mean the possibilities are endless here now let's just talk about if you want to go ahead and make your own from scratch you know let's just say okay Darryl you show me how to do that I'm gonna go to let's go to our other product right here so I'm gonna exit the visual builder and you'll notice how it disappeared but right here if you click on Add to Cart it'll it'll appear right there so that's there you go yeah that's that's how you do it that's that's how you do it so here I'll click on home and what we're gonna do now is we're going to go ahead and make a second product page and this product page I'm going to actually use a template and I want to show you how you can actually create it from scratch instead of actually having to do all the hard work so I got a little creative here but this right here is my second product page right here and what I did here guys is I just went ahead and I added a template from Divi and then I just basically said okay I made a template from Davie and I'm just gonna go ahead and modify it and you know change things around to how I want it to look so right here under plus new I'll go to products and let's say for example you're making a product and you just want something brand new you know it's like alright brand new so right here I put Divi theme ebook okay and then right here I'll just go ahead and add in some dummy text I'll just copy this and we'll go ahead and add in some dummy text right here and some text right here but you know I don't even have to do this and I'll explain why in just a little bit so I'll just put in three hundred and two hundred we will go ahead and put this under flowers set a product image and I will go ahead and put in this book right here this is the book that we were selling and I think this is all good all right I think this is all this is all good right here so what I'll do is just I'll click on publish all right now again in this example I am going to make everything from scratch so I'm not going to use anything I'm going to use a Divi theme templates to help me so right here I'll go ahead and put no sidebar as well because I don't want a sidebar and I'll click on a view the product and then we will go ahead and edit it with the visual builder all right there we go view products and right here is their product now right here click on enable visual builder so remember this is still our product page but what I'm gonna do here is I'm gonna say you know what I don't want any this stuff I want to go ahead and I want to delete everything from this page and I want to create something from scratch so right here I'll click on this click on this this this and we are left with a blank template now right here I'm going to this plus busted right here now I'm just going to go ahead and kind of scout around now I want you to do the same thing because Davy actually has setups kind of already made for products and you just need to kind of insert your insert your information like the WooCommerce Add to Cart and everything else so what I did for this example was I just went ahead and I took something over here see even this would be a good product page you know right here be also a good product page as well so I'm just kind of trying to give you examples on what you can do so I went with this one right here and I use this layouts now the only thing I did here was I simply just swapped the Add to Cart button and I just put in I just made some changes so I'll talk about here on how you can combined all of the modules over here we have our ebook landing page now right here I'm gonna click on save and I want to make sure that this is full width right here so I'm gonna head and save this really quickly but again this right here is also a good product page but I really want it to be full width here alright so page layouts I'll go to full width and then I'll go ahead click on updates so when I click on update and I'll view the product here and there you go so now we have a signing page so right here I'll click on enable the visual builder now again this is where you can combine both modules together to kind of make whatever you want to have so for example right here I want to click on plus there we go and I'm gonna go ahead and scroll down right here to the blue price right here or - I'm sorry - the WooCommerce Add to Cart button right here and I want to modify this so I want to basically change this a little bit in fact I want to kind of mimic this button right here so for the background right here I'm just going to go ahead and put in oh not this color for the button styles for the button styles right here I'll go ahead and go to button use this for styles change this color we have the whites I'll go ahead and change the border radius a little bit and I think we are all set and ready to go I will change this to Montserrat's etc and there you go so now that I've done that right there all I need to do is click on this checkbox and I can just go ahead and even add in regular Divi module so I can put in stars I can put in pictures I can put in something that would basically alert them to kind of click on the Add to Cart so right here we have a Buy Now for $14.99 and you know I can say right now that this is my landing page like this is our my my Lenape this is my product page so if you want to go ahead and go this route where you can just go and upload your own template you are more than welcome to do that as well now right here I'll click on save alright and I will click on exit the visual builder now over here if I click on add to cart you will see that I will see this item right here now again right here we can probably already modify this as well we can put this where we want in fact we should do that right now before we go to the next section so I don't like how that looks you know I don't want it to be stretch apart like that and that might happen to you if you decide to have like that so right here I'll click on plus and I'll do the WooCommerce the WooCommerce it is the you commerce cart notice right here and right here I'll go ahead and change this section to something like black so for the design right here design it is the is it the button note it is the background right here so background I'll change this to something like black and then for the design for the text I will also change this to something like wait no the button that butts in right here the button I'll change this to something like block as well so now instead of having that big ugly arc go across the screen now you'll have it go right next to their little right next to the Add to Cart now there are also plugins where you can disable this feature with WooCommerce and then just have them go directly to checkout as well so right here I'll click on exit visual builder and now let's try this again so add it to karts and voila there it is and view the carts awesome awesome now also right here you can go is go ahead and decorate your page as well so right here oh if we're gonna edit the visual builder and you can always customize your checkout and also your car page as well with the Divi theme so here you can see that I decided to add in some text right here I just put in some simple text above it's and then right here it's loading the WooCommerce cart see this part right here you can't specifically move things around but you can manipulate the color you can manipulate the position of everything so you can go everything around it but you just can't modify the actual positions of that but that's okay you know so right here you can see that I put almost done you give us something like checkout or your you know are ready to ready something that's something like that and also right here I'll click on this little icon and over here in the design tab right here under the we have you can see right here how this is all highlighted so wherever toileted you can edit so right here you want to go ahead and change something you to click on it and now you can always change the text right here something like that's you can always move things around oh no you can not move them around but you can change the font in the text so yeah the fonts in the colors it's sorry also you can manipulate the position as well so the over here you can move this around and this around etc so you can kind of get the points here so I can kind of just knock things out out of the park right here and just get really crazy but I want to get that crazy you know that's that's just never a good idea but now that's how I manipulated the space and everything and then over here in the background what I did was I just put in a background right here so you can go is go ahead and you can change everything right here so this is just an example of what you can do is well and then also the check out right here as well so here same thing enable the visual builder and what I did was I just added a background on the back I just simply put in a text above it right here our quick details so right here under this blue icon I just placed the background color so background you can see I did a color right here and then also right here I just added a text module etc so you can have fun with all that stuff so I'm really excited this update came out if you have any questions about this feel free to let me know there is a link to purchase TV in the description below as well all these templates that I use are actually templates that come with Divi so I didn't make anything from scratch these are actually all custom made from from elegant themes so what I did right here again is if you want to know the details I made a a home page right here I link them to a custom shop page as well so here I have my products and if I click on the product right here I'll just click on TV product 3 it takes them to this right here adding it to the carts right here view the cards and I will be having a tutorial on this as well because this is a big breakthrough with Divi there is one small thing that they did not add here proceed to checkout and click details and I believe that is something where the product categories so right here you can see I have the shop page so I'll click on this product right here actually I'll click on this product right here and I believe if I click on the categories it will take me back to the original shop right here but I'll be talking about a plug-in and also some CSS on how to fix this it's a very simple fix until Davy actually releases that in one of their future updates so everyone so are you excited about this update I I sure AM I'm really excited about it I'm gonna I'm gonna have a video on a very soon I'm very I'm very happy that he's progressing I think we all are so again if you have any questions about what I did in this video or questions about Google commerce builder let me know in the comments below and I will see you all in the next video take it easy everybody