Divi Feature Update LIVE - WooCommerce Cart & Checkout Customization

[Music] [Applause] [Music] [Applause] [Applause] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] [Applause] [Music] so [Applause] [Applause] [Music] [Music] [Applause] [Music] hello and welcome to our dv feature update live today we are talking about uh cart and checkout up to my face carton checkout optimization for woocommerce so um this feature update was delayed because of our black friday and cyber monday promotions but you know what these updates are so important and i would like to show you uh what changes we've done so for those of you that use woocommerce or want to uh use woocommerce for their online stores this is going to be super super amazing for you so uh i can see already now we have quite a lot of you tuning in um please let me know where you are tuning in from so i can see here we have box office africa um he says i trust uh mac will make it uh swell and entertaining as usual awesome awesome we also have uh best entertainment uh saying i'm a i'm a dizzy i'm a divvy lover awesome awesome awesome all right guys so as i mentioned we have uh feature update live today we're going to be covering all the updates so we have uh eight new modules i mean that's a lot of modules so what this allows us to do is to completely customize our checkout process from the product page all the way to the checkout page so we are able now to go in and design our woocommerce store the way we like it using divi so no longer are we now using those old school pages that really looked uh very weird so now we are uh going to be able to design these pages in a really really awesome way and i have a demo to show you and i will be showing you step by step how to do this so let me go through the cut module so we have the cut products module we also have the cut totals so you know that totals that shows up when you're on the checkout page we're able now to go in and fully customize it we also have cross sales so if you want to do cross sales we can also customize that we have a module for that we also have our checkout billing we also have checkout shipping because you know you know on the checkout page where you have your shipping information that was quite difficult to go in and customize but now we have the ability to go in and do that we also have checkout information and check out payments so the payment item where you choose to add your credit card or paypal we can fully customize that as well so for this to work you need to be running the latest version of divi so make sure you're running the latest update of tv so let me show you how this works uh we also have side hustle uh side hustle boss from south africa good to see you uh steve perks from scotland awesome awesome awesome all right guys so let me show you uh how to uh set this all up so i'm gonna go to my website here where i um where i set up a basic installer of woocommerce so this is the site hopefully uh my internet speed here is going to be great so i'm just gonna log in and uh so you can see how quickly you can install woocommerce so for those of you that haven't used woocommerce yet all you need to do is to come over here to plugins click on add new and search for woocommerce over here click install activate and you're up and running so once you have it activated uh you'll see an entry here on the left which says woocommerce and we also have products here where you can go in and add your products so for this to work ideally you want to add a product so let me show you quickly how to add a product so you'd come over here click on add new and give your product name so i'm just going to call it x you type the product description here so i'm going to say text goes here my typing is super bad right okay text goes here look at that there we go and then over here you can set your price so let's say it's 55 dollars we can also set our shipping information we can also add our short product description and then finally you add your product image over here on the right so you can just click here on product image if you have any images in your library you can just choose it from here so let's say it's this laptop i can just say set product so now everything is all set you publish that and then when you come over here to all products this is where you get the list of all the products on your shop so at the moment here you can see we have quite a few uh demo products let me just trash this we don't need that anymore okay and the other thing that you also need to do to your woocommerce store is to set up your payment options so there's quite a few you can choose uh and this is why uh woocommerce is very very powerful when it comes to uh selling products online so to do that you want to come over here to settings and go to payments so here on payments i've activated cash on delivery you can also activate activate paypal there's also stripe so you can accept credit cards and so on and we can also do bank transfer or check payments so if you activate that you know that's it you know that's all set up and now we also have uh paypal stripe as i mentioned and we also have woocommerce payments as well okay so now that we've done the payments the next step now is to see what these pages look like so we want to see how the checkout page and the cart page look like because this is where we're going to go in and do all our customizations okay so to do that we want to come over here now to uh website so i'm going to open this in a new tab right so when you install woocommerce you get your shop my account checkout page card page installed by default and if you go on any of these pages you're going to see like the default uh design that comes with woocommerce for example this is what you this is what would look like if i go to my checkout page this is what it looks like so i'm sure you can agree with me that this checkout page does not look very attractive you know so we want this to really look nice so to customize this now our update allows us to go in and make our updates so now i can click on enable visual builder while i'm on the checkout page and i want you to see what happens now because before it was just a short code which we could not do much with but now check this out so if i go in our modules are actually loading and by the way you may be wondering okay so with all these customizations what is going to happen to my website is this going to be slow is it going to be affected by this update well the good news is uh these modules will only be added or shown when they need to be used so they're not going to be taking up a lot of memory or or have an impact on your website so this is why this is super powerful all right so back over here now you can now see that we have the ability to go in and customize everything now let's go in one by one and see what we can do okay so over here this is a returning customer now i highly recommend you don't delete this because these are all dynamic uh these will show up as your website is working so for example if this is a returning customer they are going to see this message but anyway let's go in and see how we can customize this so in here now i can go in and make changes to all of this so let's start here with this top bar so i want to give this a different color oops so that was the text color let's start by changing our font so i'm going to change this to pop-ins okay the color is yeah i think we need to change the color here so let's go in and do that so i'm going to come all the way down here and first of all i need to go to my border and give this a bit of rounded corners there so let's go with four okay and the color as well i think i could um change the color if i need to but you know what let me just leave the color for now next let me come over here to this part so i can also go in and give this form a background color so if i did that you can see this has totally um changed my background color but you know what this is a bit too much so i'm going to go in and i'm just going to use basic colors here i'm going to play around with some grays because i don't want to turn this into a design design class okay right so now that i have my color let's bring it down a bit more okay next i can go into my button here activate use custom styles for button and i can change my button color in fact let's change the text to white and then the background to that we also need to go into our border great so i can see here that my font needs to be updated so let's go ahead and do that so i'm going to change this to pop-ins great now all this text here needs to be updated so let me go in here change all this to pop-ins because ideally i need my text here to all uh be consistent now check this out i can go in and also update the colors so you can see there i've gone in i've changed that and while we're here let's go into text titled texts let's change this to uh poppins i think we also have more text here body text there we go change this to pop-ins so as you can see i have the ability to go in and make all these changes now if i want to make all this drastic i can just go in here make it all white and then i can now go to uh the background change that to whatever color i want so you can see here as i'm updating this this is you know changing to whatever color i want i can also add form padding so let's say i need to add 20 to the top and bottom here and then i can do left and right so it's up to me how i want to design this so as you can see we have full customization here and this is on our checkout page so i know here this is uh not very exciting because we're not seeing like major major differences right so anyway this is the part that i've just done now all these fields here i can also go in and customize these so you know what i think i need to go back in here that blue can be changed i can also go in and change the background right so let's change this to a different color there we go okay so we're gonna go with that i'm gonna save it so this is for our returning customer now this is the checkout page so i again i think i want to go in and give this um in fact you know what let's go back and do that later all right so let's move on to the next part and uh this time i want to work with uh this area here where we have our billing details so what i'm going to do here i'm going to do something a bit different so i want to show you like different ways of customizing this so for this here i am going to add a background color to the whole form so i'm going to make it light gray like that there we go and then in the design i'm going to go to border and give this some rounded corners so this is going to be about eight now let's give this some padding so let's go with three okay let's go three percent there we go three percent there we go right so i've just given this three percent to both sides because i wanna i want this to have some breathing space so what i can do now is i can go in and this was my rose by the way i can now go in and start customizing all this so in here i wanna give this um another background but this time this one here is going to be darker so the reason like i said i'm doing this is because i want to i want you to see uh the possibilities that we have here as we design this so i can also come over here to design spacing and for our padding here let's give this two percent just a little bit there we go so that's for our billing information now i can go in and and customize all this so for notice background i can change the color here to whatever color i want and i can also go in and adjust the font so you know what font i'm going to use i'm going to go with poppins and this is a bit too much the size is a bit too big so let's bring it down to about 16 now i can go into the billing details change my color here and also change the font so this would work really nice if you had all your colors for your branding all in one place so you can go in and change this to the colors of your brand okay so let's add poppings here as well so you can see now that this is starting to take shape and i'm also going to go to my text field color here great so i can also further customize what's in here but so far i think i've done a great job of just going in and giving this the the colors that i need and also the fonts next i'm going to come over here to border and just soften up the sides a little bit here give this maybe about four and save right so you can see so far that i was able to go in and fully customize everything here this is really really amazing so now we also have this information here this is our shipping information i can go in here and also make my customizations so for the shipping i want to give this a different background color so let's go with something different okay so let's go with that and i also need to give this a bit of spacing so let's go with two percent just like how we did with the other one okay so i've applied two percent to both sides you know what let me just try maybe four i am going to come back over here and do the same as well right so now i can go in and change my fields just like how i did before change my font first and i'm going to set it up to poppins and we also need to change the color there we go now it's easier to read on a dark background we have a notice here change the color change the font let's go with poppins there we go and the size is a bit too big let's lower this down to about 18. excellent so this is looking great oh there's one thing i forgot to do i need to go in and uh give this a bit of some rounded corners there to soften it up a little bit so i'm going to come over here to where is it is it's borders okay there we go so i think four will do yes that's gonna work and just to make these uh look similar i'm going to go back in here and uh give this also four percent so i'm gonna go to spacing and i'm just gonna move these to four percent just like that so now these two look very similar so as you can see in my example here i was able to go in and change the the container background color to gray i was also able to go in and change all these fields the billing information and so on and so forth i know i'm not using the right uh color palette here this is just for demo purposes only but in your case you would need to go in and make sure that you use the colors that work with your branding now if you're just joining us this is our dv feature update live today we're talking about uh woocommerce checkout uh updates uh this is the complete uh woocommerce and checkout optimization we can now go in and customize all these fields and this is super awesome if you want to run an online shop or if you currently have an online shop make sure you're running the latest version of divi this will enable you to use all these features okay so let me see if we have any questions here right yeah there's a lot of action going on here steve perks says i'm about to start learning woocommerce from scratch for an upcoming project that is super awesome this is the right time uh steve because we have full customization now we are now able to go in and really really uh design our checkout pages and our also our card pages to whatever design we want in fact we can also add videos in here we can customize the header part in fact i am going to do this uh throughout this tutorial right uh tad's gaming says uh all looks nice all you need uh now is to copy and paste the styles oh yes [Laughter] you know what i use divi all the time and you know what thanks for that tads uh i should have just copied and pasted you know the styles this is ridiculous thanks for that anyway um let me see any questions guys any questions i can see quite a lot of you are tuning in from uh all parts of the world we have uh uh shuhei from india we also have sk nasmu from bangladesh awesome we also have daniel saura from barcelona uh we were actually in barcelona a few years ago was it 2018 i think yeah we're in barcelona loved it beautiful beautiful city uh let's have a look here is it possible to rearrange the checkout fields right let me get back to uh that that one uh that question uh ah i can't pronounce the name but anyway you know what uh from hungary from hungary but the name can't pronounce it i'm really sorry but anyway awesome all right guys let's go back in and uh let's um let's continue designing here right so back over here we have our fields next we also have this additional information we can also go in and customize this now let's say we want this to really stand out right we can also give this a background okay let's do something a bit different now let's give this blue okay i know at the end of this it's going to look like a rainbow but we're just showcasing how we can design this okay so for padding let's okay let's go with four so everything is uh consistent here okay so uh now that we have this we can go in here change the colors as well so for my text color here it needs to be white right let's go poppins here i could just use extend styles but you know what i don't want to confuse um anyone especially for those of you that are beginners this may seem like way too overwhelming if i do too many shortcuts all right so here we need the border so we need four on the borders here okay and we also need this to be white and making sure that i have the right font here there we go update okay great so we have our additional information all this now is almost done now we have our order so this one here is also very exciting we can go in and customize these by themselves or we can [Music] start by working on the background so you know what let's go ahead and do that so i'm going to come over here let's go to the background oops you know what why not use the same styles uh was it steve that gave me um that tip to uh copy the styles let's go ahead and do that so i'm gonna now uh copy row styles then i'm gonna come all the way down here to my rows right click paste row styles did that work did i copy okay let's go back i'm sure i missed something right copyrose styles and let's paste there we go you know what this was about to embarrass me this is this is uh this is not good you know all right so let's go back in here uh let's give this a bit of padding or margins on the bottom so let's go to spacing and margin bottom let's just go with 20. okay 22 will do okay because these are way too close together over here on the bottom right so now we have this uh grayish color now what i'm going to do is i'm going to make it slightly lighter so let's go in okay we need it very very subtle like that all right so now i can go in and customize all this so let's go in and now i can say okay for the background for my order here let's give this let's let's see what we can do here okay let's go with something like that and let's give this some spacing so i'm going to come over here so let's go with four percent so we're gonna do this to top and bottom and we also need to give this to the left and right as well okay great now we can go in and uh totally customize what's inside here so let's start here with the text okay so let's give this poppins there we go i think the size is fine we also have a border in here we can also change the border color and the table background color so look at that we can actually go in and change the table background color this is super awesome i really love this update now um for our checkouts let's also give this okay this is five so we also need to go to the border here and let's go with four so now you can see it's really nice and clean we can go in and also change our fonts here uh we can also go in and do collapse table gutters and borders look at that right so we can also do vertical gutters i mean there's so much we can customize here but uh i'm not going to go through each and every single item because uh we will spend so much time here so look at that we can also go in and give this a border but you know what this it's unnecessary we can also give this some drop shadows so there's a lot we can do here right so let me go all the way to the top here and let's go into the body text because we need to make sure everything is consistent here font wise so i'm going to change this to poppins as well there we go so this is looking really nice i can also change colors here for if i needed to say change my font colors so check this out i can now change my colors i'm not sure if you can see this on this live stream but i am changing the gray like that so let me save that because i'm pretty happy with that next we also have uh the checkout options here again we can go in and really really customize this so let's start with the button here to place the order so i can activate use custom styles for button text color let's keep it white background color let's give it red there we go and the border as well now i am going to go to the font and set this to pop-ins right there we go so we can also add our icons here there's uh so many icons we can use in fact let me just show you by clicking over here now this was the latest update we had a few weeks ago where we can use all these icons here on our shop and on our buttons as well all right so i've just activated my button here i can also do the same for my message so for the notice here let's change this to uh let's go with uh something like that i know i'm adding all these crazy colors but that's just to show that we have the ability to go in and customize pretty much anything on our site all right so now that i've added that we also need to change the text because the text doesn't look good let's make it consistent by adding pop-ins here and we also need to change the uh you know what the form background color is not looking great um should we leave it at that okay let's leave it at that right also look how deep we can go in and customize this i can actually go in here and also change the button radio um fonts so we want to make sure everything here has the same font there we go so now that's looking great even here where it says pay pay with cash upon delivery this can also be customized we can change the tooltip background color i mean this is this is amazing look at that i can go in and change the color like that i mean we can go with black but for this let's just make it a gray right and for the tooltip font you know what i'm going to use right right let's go with poppins there we go and we also need to change the color now it's easier to read let's go ahead and save awesome now i can save the page and if i now exit the visual builder we can have an idea of what this is going to look like there we go so look at that we have totally customized this we changed the colors we added all the colors that we um that we wanted to i for now click on place order this now goes to my cart page which we can also go ahead and customize so of course i need to go ahead and fill in all this uh all this information but this is how it works now if i have a coupon code uh set up in woocommerce uh the coupon code area here will show up and i'll be able to go in and add the coupon code look at this shipped to a different address i can go in here enter the details to the different address enter some notes and pretty much this is super awesome this is very very good so i can customize this but you know what let's say you want to give this page a nice title uh make it look different what you can also do is to let's go back and enable the the builder here so i can show you how to do that so if you're familiar with using divi all this is going to be very very easy to customize so i want to add a new section here so let's go ahead and do that so i'm going to click here oops so i need to add a new section so i want to come all the way down here to the bottom click on this plus button and it's going to be a regular section single column and in that column we are going to add text and let's make this dynamic text we're going to click here on these little um items here and then choose page archive title and save okay so while we're here let's give this page a background color so i'm going to go with say black i'm going to save that and for our checkout here i can go in and customize the text and go into design text and set this to poppins like that and let's increase the size to [Music] and also make it all caps there we go so we go go with uh 48 i'm going to save that now i need to drag this to the top so i'm going to come over here to my layers drag this to the top okay so now that i have this i'm going to close the layers uh item and you see here we have this checkout i'm going to delete that because i don't need it anymore so all i have now is my checkout here on the top i can also increase my padding here and to the top as well so now i have a custom checkout page exit the visual builder so there we go so we have checkout and look at that this is now our checkout page next let's take a look at our cart page and pretty much it's the same process we can go in here and customize everything so uh before i proceed if you if anyone is just joining us this is the divi feature update today we're talking about the uh the new update or it's not very new because uh this came out about a week ago or just over a week ago uh but this is for our woocommerce modules that we've just added we've added eight more modules we're now able to go into the cart products cut totals cross sales uh check out billing check out shipping uh check out information and uh check out payment we can now have those modules customized the way we want them so now we have a full process uh where a customer comes on our website so the experience is going to be amazing from the product page all the way to the checkout it's going to be super customizable with divi and this does not have an impact on the website performance as well because this is going to be loaded up when it's needed so this is super super awesome okay so i'm going to take a look here at um the questions there's quite a lots of uh information here says i'm excited with the new divi updates awesome i'm super excited as well and uh by the way you can export these pages if you need to so you can share these you can sell them in the marketplace i mean there's so many opportunities now we can do with divi and this is why uh i really love the dv builder we have super updates and we even have more coming up and this is what makes divi a very very powerful uh page builder we are able to go in and customize pretty much you know anything we want now in woocommerce all right so um uh steve says this is an awesome dv update yes i i agree steve uh the default install woocommerce install is so bland and you know it just doesn't work so now we have the ability to go in and do all these updates super awesome ah fitz adams is from birmingham uk that's exactly where i am i'm pretty sure you know where the custard factory is uh that's where the studio is so uh good to see you fitz adams right um uh easy code say so basically uh have a shop page as normal and all products are to be inquired about rather than add cut to buy now etc yes yes that's absolutely correct uh do you know how we can make a form payment page with with a choose the amount i'm not sure i um i understand that the nimpo i'm not sure i understand your question please rephrase it and um i may be able to uh respond to that right let's have a look here uh uh says any update any upcoming updates with woocommerce module i'm not sure what you mean we have uh this is the update that we're talking about this is the update that has eight more modules so uh before we had uh modules where we could go and make changes to our product pages and so on but this now this update now gives us even more modules that we can go in and customize so yes i think this is what you definitely need okay so um let's go in and let's continue so we're on the cut page so here the same thing this is the bland one um so this is what you get basically when you install woocommerce and it doesn't look very exciting so let's enable the visual builder now and see how we can customize this all right so all our modules have open now and if you wanted to have these in different uh in different sections you can just drag and drop them wherever you want so now you can see when you have a coupon code this is where uh it will show up here but you can go in and design this if you uh if you wish now over here it says you may be interested in this is another module that shows up on on the card page we can delete this if you don't need it and instead replace that with a video or whatever it is that you want on this card page so just like how i did before you can just go in and customize this the way you want so let's say for this card card page i want to have two columns so i can go here in my column structure and let's choose two-thirds one-third there we go so what i want to do now is i want to have the cut totals and this proceed to check out on this side here so let's go ahead and do that so i'm going to drag and drop it here oops that didn't work you know what let's go over here to our wireframe view and just do it from here boom okay there we go uh cross cells like i mentioned this is a an extra module that we have that we've uh added to this update we can delete this if you don't need it but uh let's leave it for now so here we have our post title we have a woocommerce notice uh woocommerce products so i don't need this post title get rid of that okay so we never will notice here and you know what the notice can also be added on its own so i'm gonna add a new row for that so i'm gonna click here on this plus button add a new row and in this row i'm gonna add the notice just like that and this notice needs to be all the way at the top so i'm going to drag and drop it here to the top so now we have our woocommerce products and our woocommerce totals here excellent uh now this cross sells let's get rid of that okay so now that we have this all set i can now switch over to the desktop view so now you can see our notice is here at the top and our products is here at the bottom so what i'm going to do now is instead of going in and adding the backgrounds to to [Music] the actual modules i want to do this slightly different by going in and adding these to the actual columns so i'm going to go to column one and give this my background like that but this is a bit too much so let's go with the dark gray okay so that's gonna be my background and then over here on the design i need to uh also customize the border here give this some rounded corners okay there we go so i can also go in and uh give this uh some padding by coming over here to spacing so let's go with four percent and i'm going to do the same top and bottom left and right all right great so this is a great start i can save this now and i can also copy item styles let's paste this to the right as well okay there we go but on the right i'm going to change the color so let's choose a different color here okay how about we go with that okay save that save one more time now i can go into each and every one of these modules and make further customizations so here let's start with um coming over here to the design and let's go to the text right so we need to make this easier to read so we're going to set this to white now notice that this is our table header background so all this can also be customized which is really really awesome so i'm going to leave that like that let's change the font here so we're going to keep our fonts consistent throughout now this is set to bold i don't think that needs to be bold so let's go with medium and we're also going to reduce the size a little bit there we go next we're going to come over here so the coupon codes the buttons you know all this can be customized okay so let's make the text white the backgrounds red and we also need to change the font itself and here it is i mean the first time you do this you know there's a lot of customizations to do but you know what once you're done with this you'll be super happy because this is a complete this is a complete design now here we also have the update button we can also go in and customize that so let's make this white and for the background here let's change that and also the font okay so let's go in and give this pop-ins now this button here is disabled okay so look at that so so far things are really taking shape so let's go in and change here the the sweater color here the color doesn't look great so let's change this to white and also set this to pop-ins great so now we have our colors we can also go in and update the pricing okay so that's the price now notice how i'm going in and changing each and every item here this is super amazing so i can now change this to pop-ins as well so let's go ahead and do that so the price now has been updated i've added my color and also these uh boxes here where i can add the numbers uh i can also uh give this let's give some rounded corners yes so i think three is perfect for that and i think this that looks great it's just that the background here should we change it nah let's leave it okay so let's save that so now we have an updated uh area here which shows our products now over here on the right we can also do the same thing uh let's go in and update this so we're gonna start with the cut totals so we want this to stand out so let's give this our color here set it to white change this to uh pop-ins so ideally we want people to really see that so let's give this all caps and let's make it bold okay so this is our card totals we want this to be bold and next we're going to come over here so we have all our subtotals we can also go in and change our column label font to pop-ins like that and we can also change the colors so that's a bit too much let's bring this down a little bit there we go so a slight gray now let's go to the pricing again we can change this to uh pop-ins now notice how quickly i can go in and make all these updates so now we can change our colors now to the pricing as well but i'm going to keep things simple uh i'm gonna leave that at white and proceed to check out definitely needs to be changed so let's activate use custom styles for button and add our color here so i think if we and let's just make it red you know keep things simple there we go so proceed to check out this whole area here has been updated and this looks great okay oh i forgot to change the button color here i mean the font so let's go ahead and do that we want things to be consistent here right let's go ahead and select that okay looks like the size is a bit too big but we can always customize the size but you know what i'm going to leave it like that because that looks like the right size now these boxes are too far apart so we can always go into our row settings go into design sizing and we can now activate use custom styles i mean use custom gutter width and you can see here i've set it to two so now it's much closer and looks much better all right so now if i save that and save it as again this looks really nice now so let me exit the visual builder look at that now this is a custom cart page so here i can add even more items and then click on update card now you can see it's gone to 87 and if i have a coupon code i can apply it here so let's see now this is our messages so you can see this can also be customized so this coupon code does not exist we can customize this and make it look uh super nice by following our colors for our color from our color palette so once you're done with this you can now proceed to checkout and this now takes us to the payment page which we can also go in and further customize so in fact you know what this is already customized so you can see this is our checkout page that we worked on earlier on so once you're happy with that it shows you your cut total here and i think this is really nice as well because this is giving the customer all the information they need so now they can go in enter their details if they need to ship to a different address they can just activate this ship to a different address shows them their total and now they can place the order and this will now either take you to paypal stripe or whatever it is that you set this to so on this cut page as well you can add things like videos you can add testimonial videos just to enhance this page and in fact you can do this on any page so let me just show you quickly how you can do that so i'm going to go in to my visual builder here guys if you like what you see so far please give me a thumbs up uh i'll greatly appreciate that okay so we are back over here on our cart page so this is our notices right so we can go in and customize that but you know what we're not going to do that um yet so let's add okay two columns so if you wanted to add a video on the um cut page you can just go in and add a video module it's gonna head and do that so i'm going to save that so i can just show you how easy that is to just add pretty much anything to this okay so if i exit the visual builder you can see now we we've just added a video on our cart page isn't that cool so this can also help uh anyone that might be having second thoughts on buying you know whatever product it is over here so this is super cool so over here on the checkout as well we can add testimonials on the checkout page this also helps with conversions so let's say you um you go in here and choose a section or a position on this page where you want to add this information let's just add the visual builder here enable it and so i can show you how you can add your testimonials here right so ideally in this situation i would want to have this section here or oh yeah this section all the way at the top how about that because right now it's all the way at the bottom so i'd rather have people see what they need to pay for and then go ahead and purchase it so i'm gonna drag this and bring it up here okay so this is our notice so this is on this is now our information so i'll check out details check out payment so what i'm going to do now is i'm going to come over here and okay let's add a column here to the right i'm sure you can see what i'm doing here so once now i've added this i can go in here and add my testimonial like that right so let's go to the front end because i can't see what i'm doing here okay so here's our testimonial right here so author okay let's let's give this a different name okay let's say this is jack um company x y zed okay and for the body text here i'm just going to say happy with product okay so that's going to be the message now we can go in and further customize this by adding an image so there we go he looks happy he's happy too all right so let's go ahead and upload this there we go so now we have a testimonial on our checkout page isn't that cool let's go ahead and further customize this i'm going to go to the elements now i don't like that quote there on the top so i'm going to get rid of that let's go to our background and make this stand out a bit more it's a bit too subtle okay or maybe all right so i think that's better okay now let's go to the design and give this some uh rounded corners so we are consistent with our design here i think it's four that i used for our border styles let's add one let's go with the yellow here in fact let's go with uh this orange here and then we're just gonna bring this down a little bit so it doesn't really stand out too much okay great so now that i have this i can go in now and customize my text and guess what our body font is going to be poppins there we go and i can center this i mean in fact this could do with more information here but you know what i'm just uh lazy so i'm just going to leave it like that save that let's save this one more time now let's exit this page or exit the visual builder now look at that we now have a checkout page that has a testimonial and we can have quite a few over here on the right going down or we can have them as a slider so people can see what people are saying about this product isn't that cool man this is amazing this is amazing so this is our uh information here it's telling us our order so we have our sweater times three and then we have our details here and then if you place order you can see here we have this information that has not been added in or filled in this is where we need to come over here fill in our first name last name if we're shipping to a different address we come over here we add all our information and pretty much we are good to go okay guys any questions so far so let's take a look wow uh there's a lot going on here uh let's have a look at the questions okay so how do i add the cut button to the shop page okay um i will show you how to do that in a moment so box of box office africa says so can uh videos be added to the product page absolutely you can add whatever module you want on these product pages or any page um on your woocommerce store i mean you just uh you just saw that i just added a um a um testimonial on that um checkout page we can pretty much do anything we can also add a video on it i mean there's a lot we can do so this is why this is super exciting uh mb says uh what about the cash in these pages is it possible i'm not sure what you mean by that but if you're talking about caching if you're using say wp rocket you can go and specifically remove this page from the from the from the caching so that is possible yes you can customize uh gregor you can customize the thank you page to whatever you want all you need to do is to use the different modules that we have in uh in divi all right so add two cards on the shop page let's uh let's see how we can do that so okay so we're here on the shop page so when you say add to cart on the shop page i'm not sure what you mean here because the shop page is pretty uh pretty much displays all our con all our products so if you click save for example on this one you have your add to cut on that particular product so you don't want to have an add to cart on the shop page here but of course if you want to have it you can in fact let's go in i'm going to now enable the visual builder and this shop page needs to need some work done okay so sure why this is not loading it's super slow oh in fact you know what this shop page um is a template in divi so this needs to be customized from here so i'm going to come over here to the theme builder okay and then i'm going to click here on templates come all the way down here to woocommerce select my shop page and create template okay so this is the now the shop page i can go in now and build a custom body okay so let's start adding our modules so i'm going to add my shop module here where is it so let's find okay so that's our product so with this as well i can go in and pretty much customize how everything looks and then over here the product view i can decide whether i want to have the latest products uh for this particular module so pretty much i can do you know whatever i want here so i'm going to now say for example in fact you know what let's save this now to show that this is slightly different to what we have let's give this a background okay so we've given that a background and then over here in the design give this some borders and we also need to go into spacing so let's go with four percent here do the same for the left and right all right so everything is now all spaced out and looking much better so i'm just gonna do this fast so you can see um how flexible this is so let's say now i need to add the add to cart so here is the wu add to cart there you go so now i know you're asking you want to add add to cart here on on this page you know what let's give this background color so we can see what we are talking about here so this is our add to cart okay let's uh also [Music] just do a bit of work here and we also need to give this borders and spacing all right so i'm going to come over here to spacing so again i'm going to say four okay let's do this five okay so this is our add to cart so i'm going to save this close out of here save changes all right so now so you can see now my shop page has been updated it has the add to cart and also the product so now if i exit the visual builder and i come all the way down here this is our add to cart so now the question is what are you adding to the cart ideally the way you want to do this although we have the module we have we do have the add to cart module i would use this when you're building a custom product page where you're you've added your image you've added your product description you've added uh perhaps maybe the star rating and then add the add to cut button so that's how you would do it as a module but on the shop page like this this is not where you want to add the um add to cut button because it doesn't really make sense here the add to cart is usually on the product page so if i were to come here like that this is where you have the add to cart button and this is its own module okay so if i click on add to cart so you can see now this has been added to the cart so i can view the cart and that's how the workflow goes so now we are here now on our cart page and now my product here has been added you can see nike shoes and this is right there i can you know cancel it out if i needed to but that's how it works you don't want to have this on a shop page that's not where the add to cut button goes it doesn't go on the shop page i hope that makes sense uh if not you can just update your question all right let's see here uh michael here says i believe they're referring to the typical shop page where you can add to cart like any hmm am i missing something any shop page maybe i'm missing something can some uh michael can you give me an example please uh so i can have a look at uh perhaps what you're trying to um what you're trying to say so michael please give me an example uh this is quite confusing okay um oh bypassing the product page so so thomas if you're bypassing the product page what are we adding to the cart that that'll be my question now in fact guys you know um just give me an example so i can see what you guys mean i may be missing something here all right so for those of you who are just joining us this is the dv feature update live today we're talking about uh the extra modules that we've added to woocommerce and they are a total of eight so these are the cut products the cut totals uh the sales the checkout billing the shipping uh the checkout information and the checkout payment so these are all the uh modules that we've just added and we're just doing uh quick examples here of uh how we can apply them how we can go in and customize them and uh with this video here if you're just joining us now we are going to leave this uh on the youtube channel so you can always go back and watch it it's also going to be on our facebook page so you can always go back and uh check it out so the example i had today uh i'm doing today is how you can customize your checkout and cart page okay now this gives this gives us limitless uh design options which really is awesome because we can make our pages look the way we want okay so uh shamir i'm not sure if we can add svg icons it could be that we can already do it but i'm not 100 sure don't don't quote me on that one but uh once i find out i will let you know in uh in this slide in the comments box okay himalayan driving school i'll uh i'll check out multi in fact why don't you do that now let's do that now so i can see what that looks like so let's check out uh multi-e-commerce i'm sure this is a child theme in our oh yes it is a child theme so let's go in and take a look at okay so we need the shop page okay so here we are on the short page so where is the add to cart okay so this is how you'd normally do it add to cart okay is this the pop-up uh you guys are referring to is this is this the pop-up you're referring to um send me a response to uh okay guys is it is this the uh the pop-out thing uh you're referring to or is it something else because uh if i go to the shop page here it's pretty much similar to how i was doing it here so i would go to the shop page like that okay so that's the shop page it has all the products oh okay you mean the add to cart button over here now i i think i see it okay is that is that right let's check it out right so this add to cart here just takes just uh just takes this to this pop out okay but if you click to add to cart this this would go to this would go to the product page like that and then add to cart i think all right let me see the comments right okay uh shop owners want that clients add products without entering the product page okay like um like they add more stuff and older blah blah blah okay i get it now okay right so himalayan driving school says you got it okay so i guess this is what we're talking about so if you want to achieve that pop-out thing that comes out right there's a plug-in um that allows you to do that in fact let me show you uh let's go to our plugins so it is called uh what's the name again i think i have it here somewhere okay cut pops i think let's activate this now i haven't set it up properly so i'm not sure if this is going to work right away so let's skip this it's called cut pops so enable cut pops enable chats no uh delete no okay so let's enable that now let's see if this is going to work so i'm going to refresh this there we go so now it's showing over here like that so let's see now what happens when you go on the shop okay we need the add to cut button on the shop so it goes directly okay now that makes sense that makes sense so maybe that's something that uh could be in the works having the add to cut button on the shop okay now i get it okay that took a while but anyway um what i will do is um i will find out if this is in the works or um or this is something that can be uh added maybe in future updates but i see what you mean now so instead of just clicking on the product on the shop and then going directly to the item then having the add to cut here in the shop yes now that makes a lot of sense all right guys is there any more questions because i think i've covered quite a lot here uh is it doing hoff says i have a php snippet for this oh please do share that uh here in the comments box i'd really appreciate if you can share that uh share that php snippet with us and also tell us where it goes that'll be super awesome yes please share please share that with us and perhaps we could do a tutorial you know for those that want to use this feature on their on their shop on that shop page okay wow this live stream was about uh one hour almost one hour 20 minutes all right guys i think um we've covered quite a lot here and um if you have any uh questions any more questions please add them in the comments box below and uh we'll be uh sure to go in and respond to those but in a nutshell this update has given us the ability to go in and make a lot of changes on our checkout page our cart page and pretty much any or most aspects of our woocommerce installation so for this to really work in a beautiful nice way you need to make sure that whatever colors you're going to be adding to all the various parts of your site or of your checkout pages or or [Music] or cart pages they need to be consistent with the rest of your website that will really make your website look beautiful so we do have uh some some templates uh please check our check out our website and i've also included a link to the post that we released which has all this information about this new divi feature update so go ahead check it out and we are going to be doing a lot of uh tutorials articles regarding this update so please uh stay tuned keep an eye on our blog and also on our youtube channel if you haven't subscribed make sure you hit the subscribe and bell notification uh by doing so you'll be notified when we release new tutorials all right guys thank you very much for uh for joining me today really appreciate it see you again in the next one take care bye you

Channel: Elegant Themes

Views: 2,506

Keywords: elegant themes, divi, divi black friday, divi black friday 2021, divi cyber monday, divi cyber monday 2021, divi sale, divi coupon, divi wordpress, divi theme, divi layout, divi child theme, wordpress black friday, wordpress cyber monday, divi 2021, divi tutorial, free divi theme, free divi, divi header, divi footer, divi landing page, divi theme builder, divi product template, wordpress tutorial 2021, wordpress sale, wordpress 2021, black friday, cyber monday

Id: ZNG_XF0Bo84

Length: 79min 48sec (4788 seconds)

Published: Mon Dec 06 2021