New Divi Update - New Woo Commerce Modules.

divi has a brand new woocommerce update this update is so special because now with these eight new added modules you're going to be able to customize your woocommerce store however you want and most importantly this update will not slow down your website here's what i was able to do with this update we are now able to customize and design our checkout pages and cart pages and add pretty much any module that we need on that so without wasting a lot of time let's dive in and let's get started all right so i've gone ahead and installed woocommerce so you can see right here and also on the products i've gone ahead and added one product which is right here so normally when we use woocommerce it comes box standard this is what it looks like and i'm sure you can agree with me that we would like to add more details here more design to make this look very awesome okay so what normally happens here is when someone goes to the cart they'll click here on add to cart so once you do that your product is added to the cart so if i say view cart here this is going to show us what's in the cart so this is the page that we need to talk about and customize because this is where the update is so before we could not go in and really customize this page but with this new update we are now going to be able to do this so i'm going to start with the cart and then we're going to go to the checkout so let's start by enabling the visual builder here in fact let me open the checkout page in a new tab as well so that we can just design these simultaneously all right so over here what we need to do next we need to go into the visual builder so i'm going to click here on enable okay so now that the builder is open we are now ready to go in and start customizing all this so notice what happens now when i go in here and click i'm now able to go in and customize pretty much anything here so let's go ahead and do that so let's start by giving this a background so i'm going to go ahead and you can see that i've given this black and that is now our background but i can go in and customize this further and add any colors that i want so let's go ahead and just add maybe something like that but ideally you want to be adding colors that work well with your color palette next i'm going to come over here and give this some rounded corners so i'm going to go in and go to border and just add some rounded corners here so maybe you can go with six maybe even seven okay next let's give this some space inside so we're going to go into our spacing and let's give this about three percent so we're going to apply this both to the top and also left and right like that so now we have some breathing space in our design here next we're going to come over here and give this a color in here you can see now i'm completely customizing this and this is something that we were not able to do before and i really love the fact that now we can build our cart pages and also our checkout pages freely without any limitations with this new divi update okay so now that we have this uh notice that we can go in and also change the fonts so i love using pop-ins so i'm going to go in and change that now you can see that has been changed i can also change the colors here next we also have this text i can go in and customize all these links so this one here let's say this is poppins as well you can see it's been updated and i can do this to pretty much everything i'm going to change the text here to white and change the font as well there we go make this pop-ins and guess what here on the button we can also change this uh button right here so let's go ahead and activate it so uh let's make it okay let's let's leave it as that and we also need to enter the hover state so again we can go in enter the hover state okay so we've got that and we also need a border on hover so here we can go in and give this maybe one okay let's give it two all right so we have our harvest date so everything is looking good we can also go ahead and add an icon here so let's work on the update cart so this time this button here needs to be different so i'm going to give it a white text and then over here now for the background i am going to set it to this orange okay so that's going to be update cart but notice that this is only showing this way because it's hidden uh this will normally show up when you're actually uh updating the card next over here now on these boxes i just need to go in and give these some rounded corners but i can also go in and change the colors so you can see here that we have a lot of flexibility now and this is super exciting now just by a few clicks i was able to go in and update this part of this design now there's also more things that i can do here in in terms of the lines i can go in and further customize this now take a look at this we also have our uh cut totals here we can actually go in and do the same and customize this so let's go in and do that so for our background i'm going to go in and let's make this more prominent should you use red okay for the sake of this tutorial let's go ahead and do that all right so we're going to use that and then over here on the design we're gonna do something similar to what we did and that is let's give this uh some padding so we're gonna go with three percent on all sides like that and then we're gonna go in and change the colors here so now i can go in and change the labels i can also change the pricing here and the font as well notice that i can go in choose pop-ins now this is super exciting this is something that we were not able to do before and i'm really really excited about this so i'm also going to change my font here like that and this cut totals let's make this white and again let's change this to pop-ins now notice how much i can do in this update now we have this proceed to checkout we need to change this button as well and this one here we're going to change the color let's see if we use black for that and use yellow i like that it's nice and bright and it's very easy for our visitors to see so let's go ahead and do that for the border as well fantastic now let's go in and give this our font and this is going to be poppins as well so that's looking great now we've got proceed to check out nice bold and prominent so this is looking good i think finally now we can go in and give this some rounded corners so let's go to the border here and set this to was it six i think it was six so now this is looking really nice let's save that and here we have uh you may be interested in now notice that on this page we can add any more elements that we may need to add here now i'm i'm not interested in adding these um upsells so i'm going to delete that and add a video here i prefer to have a video so this is a video that could entice our customers to buy even more items or perhaps it's something that you may want to notify them about before they make the purchase so now we have our video here now what i usually do when i have a video i go to the overlay and add an overlay so this has to be something that works with your business so it has to be a video here or an image that works well so the image i'm going to add is this one right here so let's go ahead and do that so now we're going to see that our video player is going to have a really nice uh design here next i'm going to uh adjust my button here so i'm going to come over here to design and let's adjust the sizing so for our play icon in fact you know what we may actually change this play button here i prefer to have something like that look at that awesome right so let's adjust the size so i'm going to reduce this all the way down to about say 40. so you know what we can see that that is our button i'm going to save that and now this is our checkout page now you may be wondering why do we have these here now these are very important because these are notifications that show up when something goes wrong on your checkout page okay so you need to definitely leave them like that but we can also go in and customize this even further we can go in and change the background colors here by just clicking here you can see i can go in and change these colors the fonts in fact we might as well just go ahead and do this so look at that i can totally customize my page here i can also give this a background color that was the text color so let's make sure we're on the right item here so okay that's our text color so let's go to our background i'm going to customize my my colors here so i've just added this blue and i can also give this some rounded corners just to match with pretty much everything i have here on my design so to do that i'm going to go to border and then i'm just going to add maybe three i think that that should do and i can now go to the button here and customize our button so for our button this time i'm going to make this orange in fact you know what let's make it white text and an orange button here so we can keep our buttons consistent and we're also going to come over here to our button font change this to pop-ins now notice that my card page now has been totally transformed and this is now our own design let's take a look now and see what this page looks like after all these customizations so i'm going to exit the visual builder here save and exit wow look at that so this is now my card page we have my cut totals here we also have a custom video that i've added here to my checkout page now guys isn't that awesome now we can go in and customize our cart pages and now i'm also going to show you how to do this on your checkout page so to view our checkout page i'm just going to click here on proceed to checkout so this now is best to open it up in a new tab and here it is so like how we did before all we need to do is to enable the visual builder to go into the actual builder and then start making all these changes so again we have all our information here by default i would highly recommend you don't delete any of this because this is needed as your because this is needed when your customers come up come over here to buy okay so now to customize this i can just click here on this gear icon and we can completely go in and just go crazy with our design all right so over here now i think the first thing i need to do here is to just customize these messages uh change our font here to there we go and we also need to add some rounded corners to this so i'm going to come over here to border now don't worry if i'm going a bit too fast for you guys i am going to create a tutorial that goes through how to create your e-commerce store okay next i'm going to come over here now and customize all these labels make sure that they have my fonts so there we go let's do the same over here so here we have the form background color so we can change the form background color just like that and this is where we can start to really customize our design here so i'm going to go with that as my background in fact you know that's a bit too much uh let's use a slightly different color here okay let's go with something like that okay there we go now i can just go in and change my text color okay so let's go ahead and update all this so we can update this text as well so i'm going to come to the top here text title change this to white text change this to poppins there we go now ideally this also needs to be easier to read so let's go ahead and do that there we go so i think that that works great and also for these labels that white is a bit too much but notice how you can go in and really you know customize this you know pretty much to any colors you want i think this is very exciting guys now on these borders here i mean these boxes you can also go in and uh give these some rounded corners so uh let me find that option there we go so i can just go in and just soften these sides a little bit we can also go into the button here customize this button by activating here use custom styles for button and we can say text color white and then let's change our button background here to that orange okay so that's our button there updated pretty awesome okay so now i'm going to save this and we have really customized our area here now this checkout here i don't really need that because my page has a title already here and that is coming from my template all right so moving on you can see here apply coupon and login has been updated that's looking awesome we can also go ahead here and update all our fields so let's go ahead and do that so if i come over here i can go into the background maybe add a very light gray here like that just to make it slightly different so you can see how much we can change here all right so i've just added the background now i'm gonna go into the design and add a bit of padding so i'm gonna go with say two percent top bottom in fact let's go with three i think i've been using three throughout okay so i'm also going to add left and right and now that i've done that i can go in now and change these colors so i'm going to go in and let's go with poppings here so i think i'll leave the colors as they are i think they work well so let's go to the labels now change this to pop-ins there we go great so that's looking great now here on the top i also need to update that and the notice here okay let's just change it to that and the notice text color i think white is fine and then i just need to soften the sides a little bit by giving this some rounded corners just like that now over here you can see our gray background also needs some uh work so let's go and give this some rounded corners too so i think we went with six before so as you can see here i've just gone in quickly uh made my updates and this is looking unique so far now i can even go i mean a step further here and say okay you know what why don't we add a filled background color so we can make these even brighter now i've just changed this to white and i think that works even better okay now if you see that your padding is not enough you can always go in and change that by coming back over here let's see uh spacing and we can increase this to say five i think five works better all right so if i save that you can see now we have a custom page that we have just updated i think this looks really really cool so let me see if i can just copy all my styles here and add them on to the other one so i'm going to click here on copy module styles and then over here i'm going to paste it let's see if they paste okay so it looks like i can't paste the module styles now the reason why that is not working is because these modules are different okay so if i click here you can notice that this is a wool checkout billing setting and this one here is the shipping settings so that's why it's different but anyway no problem we can always go in and manually do this by clicking here on this gear icon and let's go in and start working on this so here for that different address i'm going to go in and change this slightly because we need a differentiation between these two so this is the normal billing and this is shipping to a different address so i'm going to add this little i mean this slide color here for that and on the design i'm going to give this some rounded corners let's go with six i think i gave it six to the other one and let's go to our padding and for our spacing here we added a padding of five percent okay so this just keeps everything very very consistent so you can see how fast i'm moving here we're able to go in and really make these changes super fast i'm clicking here on this paint brush tool and this is what allows us to move very very fast all right so now i'm going to add my fonts so that's shipping to a different address and again here let's change our fonts to pop-ins now we really want our font here to stand out in fact i think this this works now over here uh let's give our background color fields background color and let's make it white okay so we've changed the color here i think that's great but we may need to add a border on those fields let's see how that looks so currently there's no borders so if i add this right i think these fields really stand out so what i'm going to do now because the color here is very important so if we go with that gray for example i'm going to bring this all the way down to just something very very subtle just like that okay i think that looks better now and what i'm also going to do now is to uh go to the border here in fact we need to go to our fields and find the borders for our fields there we go and set this to about three so that just softens up the the edges and i think this is uh looking great in fact let's just increase the text color here in fact you know what the color is fine okay so there we go i've just gone in and updated this and this looks really awesome already in fact here we also need to change the colors of the background here that blue is not what we used before so let's add our own color okay so for our notices i want to go to the background here and change the color just like that i think this really stands out and i love this design it is definitely different to what we had before oh on the bottom here we also have the the the order itself so here we can also make some updates to the final order and that is just by going in again like how we did before we can just click here on this gear icon and fully customize this so i think what we need to do here the most important thing is the colors so and let's go in and add our font okay so this is going to be poppins like that and we also need to go into the rest of the items here now you can see here we have more items to play around with so we can go in here and add a background you know to uh to this just the box itself which is pretty cool so i really love um the fact that we can go in and customize that so if you don't want to use that you know we can just uh leave that as it is but you know what i think this looks better with the colors so i'm just going to bring this down a little bit just to uh make it different to everything else here on the page all right so now that we have this i'm going to go in now and update all my fonts so the body font here needs to be poppins so let's go ahead and do that and by the way you can also update the sizes as well so we can go in and customize the sizes but i think this is fine enough okay so now i'm going to save that so this is now our order and we also have the checkout information here which we can go in and also further customize so for this i'm not going to do a lot of changes here i'm just going to change the fonts so let's go ahead and do that so for the fonts here i'm going to change this from default to pop-ins there we go we can also do the same here for the tooltip okay so as you can see i can go in and really customize pretty much everything this is super exciting in fact i'm gonna be making uh quite a few templates here to share with you guys uh so you can you know save your time going in updating all this so that will be announced very soon okay so let's go to our font here our body font change this to pop-ins as well there we go so finally we have our button here where we can place our order and i want to keep uh the consistency here and just make sure our text color here is set to white and then our background to orange there we go and then finally oh in fact we've got one more step because we need to change the font so let's change this from default to pop-ins there we go excellent so now we have updated our page let's save and exit and see what this page looks like so there we go if this is on this is now our checkout page we're able to go in and make our changes here you can see our order updates we can by the way move things around if we wanted to and then over here it says ship just different address now this may not show the update yet but if i click here you can see now that's the form that we created earlier on and this looks awesome so after this now we have the the order part so what i would actually do here is go in customize everything and make everything match with your branding and once you have all this you are now going to be able to have customized checkout pages and cart pages as well as other areas of woocommerce all right guys thank you very much for watching and i'll see you in the next one take care

Channel: MAK

Views: 1,876

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: 7cwDEd-lCGQ

Length: 22min 38sec (1358 seconds)

Published: Wed Dec 08 2021