DIvi Feature Update LIVE: The WooCommerce Builder For Divi

you you hello everyone and welcome to our DV feature update live today we're talking about the brand new WooCommerce builder for Divi so before we begin if you can hear me loud and clear please let me know in the comments box below we got live streaming both on Facebook and also on YouTube ok so I can see there's quite a few joining in now that's great it's one welcome John on Facebook thanks for tuning in and here we've got on face on YouTube we've got paver old Pavel row makers I think Wayne good to see you exonic RN ok looks like everything is loud and clear and everything seems fine fantastic now today I am really really really excited to talk about our latest feature and this is the WooCommerce builder now the way I'm looking at it is it's like a builder inside a builder because this is really powerful what I'm gonna show you today is going to blow your mind I mean it's just crazy over the weekend in fact yesterday I spent you know more than eight hours just playing around with it it's very addictive and for those of you that want to build online shops or your freelance designer and you'd like to build customized WooCommerce websites this update is the update that you really really want to take a look at it's amazing in fact this has inspired me to even build more commerce websites so I'm really excited to work to show you this and before we begin I'd like to say for those of you that's joining later on if you're if you'd like to watch this again this is going to be on our YouTube page and also on our Facebook page so if you miss anything can always you know watch the replay all right so Louie's saying hello from France good to see you Louise we also have Ludmila I think from Brazil good to see you Luca from Italy great we also have Giles saying hello awesome Harmon from Indonesia oh so wholesome so it looks like you guys are you know tuning in from different parts of the world this is very exciting we also have product mock mock from Switzerland excellent now some of these names to be honest I can't really pronounce but we have looked at here from Italy as well Raphael saying hello David from Germany awesome do we have anyone from the UK today I'm just curious all right Raphael from Malta Jelena from Serbia Wow and we also have but note from Belgium awesome awesome Michelle from India good to see you Adam from Australia Wow still known from the UK what is going on today a band from New York City and we also have Dan from Belgium David Brown from London now we can start the show okay I'm excited we also have David Reed here from Gloucestershire awesome awesome Robert from Croatia alright guys can't wait to get started let's dive in now and let's take a look at our latest features so what I'm going to do is I'm just gonna take a look here at a brand new website now for you to see these features in fact let me just enable my presentation assist so you can see where I'm clicking so in order for you to see these features what you want to do is to make sure you update to the latest DV install okay now sometimes you may not get the updates so if you want to make sure you're running the other the latest updates you want to come over here to updates click here and this will refresh your website and make sure you're running the latest and in my case as you can see here it says your themes are all up-to-date which is great alright so what I've done ahead of time is I've loaded WooCommerce so let me show you how to do it so for this to work you need to install WooCommerce and this is our comment this is our plugin that allows us to sell online products alright so to install WooCommerce you want to come over here to plugins and then click on add you and then over here you want to search for WooCommerce and this is the first one that comes up it's absolutely free and it's very very popular as you can see it's been installed in more than five million active installs and also WordPress is behind comments so it's it's well maintained and it's a very solid plugin so as you can see in my case here it stays active that's because I've already gone ahead and activated it so in your case you want to click on activate and that activates the plug-in now as soon as you've activated it you are going to see some entries here you're going to see would commence now this is where you go through your settings and set your payment settings PayPal stripe and so on but we're not gonna go through all of that otherwise this last trip is gonna be very very long okay so the most important thing here is for me to demonstrate is to show you where you add the products and here they are so you want to come over here to products click on add new and this is where you start adding all your products so for this one here I'm gonna call this brand new product oh it's called brand new ok and then over here this is where you want to add your product description so I'm just going to use some dummy text here lorem too so I'm just gonna highlight some dummy text here and then paste it ok let's break these right and then we're also going to need a short description so I'm gonna come over here and paste a short description now here's the thing this is a basic simple product so I'm just gonna give it a price here of $99 and if it's a sale price you can also add a sale price here but in my case yeah I'm gonna leave this as it is right so that's all you need to do and then finally over here on the product image this is where you want to set your image so in my case here let's say this product is let says this ring or maybe these earrings okay so let's say that's my main product I'm going to set my product and pretty much that's all we need to do our product has been set everything is great I'm gonna hit publish and pretty much this is how we've done everything in the past now what I'm going to do is I'm going to show you this page and this is what you're used to seeing before the Builder is actually implemented so I've just opened this on a new tab so if I take a look at this I'm sure all you guys that have built websites using WooCommerce can can agree that this is the page that you're used to seeing it's very difficult to customize very difficult to go in and make your changes to unless you actually use CSS and to be honest with the advancement of page builders now it's not really needs to go and hand code this to make it look you know the way you want so this is the default page that you get and to be honest I really hated it because I could not go in and customize it all right so now before I continue I'd swim to check and make sure we don't have any questions now if you do have any questions throughout this tutorial please just add them into your comments box below and I'll do my best to respond to your questions all right so oh project mark say is press the like button yes guys come on press the like button press the like button if you like what you're seeing here it's gonna make sure that on Facebook here I haven't left anyone out so we have quite a quite a few here so logging in from Facebook okay so I think you're on the same page for those of you that haven't built WooCommerce pages pretty much this is how you add all your products now here's the thing before I can actually show you how to customize this page there's also some updates that have happened onto our settings page so let me show you what these updates are right so back over here so on our settings here we notice that we have our page layout now if I click here on this drop down we also have left sidebar at no sidebar so you can actually decide whether you want to have this sidebar or not okay now back over here we can also add a product gallery here but definitely we're not going to do that okay so now that we've added all the information that we need here for our products let's now take a look at the brand-new builder and take a look at all the options so if I click here now on use the Divi Builder notice what happens this this is going to load up my difficult ER and now everything has been transformed let me just reload this I'm not sure why that sign came up okay so now everything now what Divi has done here this is very very clever what Divi has done is it has gone in and categorized everything based on whatever module it is in WooCommerce and by the way we have 16 brand new modules so all these now have been added in two different different different different modules and now we can go in and customize each and every part yes you heard me right each and every part of the page now let me show you what that looks like so now I can click here on build from front-end and this is what we're all familiar with we can come over here and start building our page from pretty much our landing page so as you can see this is the actual page right and I'm sure you can agree with me this is what we saw initially on this tab so now we want to go in and customize this so first things first this item here this notice we can go in by clicking here on the settings and if you're not sure what you're actually working on just take a look at the top here this says WooCommerce caught notice settings and these are the modules okay right so what you can do now is we can come over here now just like with any DV module we can start adding a background color boom just like that and let's say you want to make further adjustments to this you see we have a button here let's say we want to change that button we can go into that button use custom styles for button and now I can go in and change my color for the button so this is my text color I can add a background color here there we go or we could make it darker I think that looks much better we can really customize every single item here and this is very very exciting let me show you what else you can do let's say you want to change the the font we can come over here go to default let's say I want to use monster add I really like using that here we go it has my font here I'm going to choose it we can also make it bold and this text right here can also be customized so if I come over here default change that to monster right look at that I've just changed I can change my color as well so I'm just using my color and this is what you may want to do these would be colors from your your color palette so I've just changed that now I can save let's see what else can we do here we can go in here and also customize let's say this product title if you're not sure what it is just click here on this gear icon and it will tell you what it is now this is the WooCommerce title settings again we can go into design title text straightaway we can change this to monster ad we can make it all caps we can change the color save now let's say you want to change the actual price of this product we can go in click here on the settings design price text change that to monster ad make it custom and then we can change the color as well so let's say we want a really dark color here we can go with that and you can make it bold let's go with ultra balls because we want our no that's a bit too much let's go with bold okay so you can see here we can change the size we can make it bigger to really make it stand out so we can really customize every single item here now moving on let's say you want to change this button I'm gonna save this come over here click here on this gear icon and I can click here now on design button and we can go in now and change our button colors so all I'm doing here is to go in and really customize this and make it look the way I really want it to look so let's say I'm gonna go with this for my text color change my background color for my button let's say I'm gonna go with that let's have a look what works okay let's go with this the ride so we can remove our border we can also change our font for our button I'm gonna come over here change this to monster rad let's make this bold I think that looks look really nice okay I can also make customizations to this right here you know so I can go in here give it a background color like that and as you can see slowly slowly everything is now matching up I'm gonna save that and now let's say I want to work on this product image I can actually add some rounded corners here by coming here design let's go to border and let's say I'm gonna add eight is my rounded corners look at that I can add my rounded corners and pretty much my design is taking shape here I'm gonna save that and now over here on the bottom now if you recall back in back before this update this is the only place that we could go and make changes to and that's what made it really annoying so as you can see this is a massive transformation this is a massive addition to how we can go in and work on our product pages so in the description box below if you liked this update so far please give me a one if you don't like it for some reason please give me a zero and I'd like to know why but we still have a long way because there's a lot that we can customize here so let me see your feedback do you like what you see so and the amount of customizations that we can do two pages so please that add that in the comments box below all right so so far we've customized this so Oh actually I've missed our I've missed this text here and you know what it's looking for customized let me show you if I come over here now to my settings this will take me directly to this text here that this is the short description and again take a look at the top here word description settings come over here to design text changes to monster add boom I've changed my text I can make it bigger I can change my color I can change quite a few things here so let's go with that as my description color okay so save this moving on even this category text here we can still change that look at that I can come in here we can change the separator let's say you want to have it as something totally different you can come over here and a dash if you want to but what I'm mostly interested in here is coming over here to the design text and then changing this to my text and look at that change I can go and change my colors but you know I can't even make it smaller you know it's a bit too big I think that's better twelve is fine so you can see here we can go in and really really customize this now over here on the tabs again we can go in click here on this gear icon and we can remove this reviews tab if we want to we can leave it on we can remove the description completely but of course we do want that description on there over here on the design who keep going to the body text change this to monster add now as you can see I'm just making a big a great effort here to make sure that my page looks consistent okay so now with that I can also do it and change the colors of these tabs right let me show you quickly look at that active tab color we can add in our colors inactive tab we can also change our colors there look at that right active tab color you know we can add you know the the active tab color here and we can also add the active tab color background look at that right that could be my description right there but you know what I'm just going to reset this and just leave it as it was before but the most important thing is there is options to go in and make these updates I'm gonna save this for now and so I know what you probably thinking you're probably saying Mac on the right side we have that sidebar why do we have that sidebar and you know what let me go back in and show you how you can really change this page so let me save this first because we want to make sure we have all our settings set okay right so now if I come over here to edit product this is gonna take me back to my product page and notice this is our same product it's called brand new now over here we have new layout settings now these are Divi page settings if I click on this drop-down here notice we have left sidebar no sidebar we also have full width so if I set this to full width we can fully customize this and make it look the way we want let me just click update here so you can see what it looks like when it's full width right so I'm gonna open this in a new tab there we go so now this is a full full width page we can actually go in add some margins here on the left and do all that clever stuff but the setting that I highly recommend here or that I that I suggest you use is just the one which says no sidebar okay click on update and if I come back over here and refresh there is now the page that we have and look how clean this page is fantastic great alright so what I'm gonna do now is I'm gonna also going to show you a few things here look at that we also have this product content so we can build from scratch which is what we're doing right now or we can set it to default and this goes back to how how it is without the Builder and I don't know why you'd want to do that to be honest because we have this flexibility now now there's one thing that I haven't mentioned here which is really really powerful you can move things around as you're designing now let me show you how that works so you don't have to go with this standard layout that what commerce is giving us we can move things around so let me just hit update and then show you how you can do that so for those of you that prefer working on the backend you can just work on the backend builder here where you can just drag your items so here's the wool breadcrumb so let's say you want the bread card below this will cut notice you can just drag it like that and boom click update and then over here now this is the bread this is the bread crumb let's refresh oh yeah the notice needs to be here so that's why we haven't seen let me show you something that is easier to move so let's go to the front end so here on the front end let's say you want to have this ad to cut above the product description I don't know why you'd want to do that but if you do look at that just drag it and there it is right there on the top so now you have your Add to Cart right there and you have a product description here on the bottom and we can also add other items here and this is the clever part let's say you have a video that you want to add here to really emphasize what this product is about or you you want to give a video description of how this product can be used all you have to do here is to search for your video module select it and as you can see that module has been added and this is how you can add even more items more products and more modules on to your product page so I'm not going to do that this was just to show you that you actually can go in and do that on each and every page all right so I want to take a quick look now at the comments and see if we have any questions write these quite a lot of content here let's have a look we have quite a lot of ones here Louise has a plus one I like that I like that Robert has a one project project mark also has one Michael yes Wayne excellent Wow so we only have five ones really we have 59 people on this live live stream oh and only five six come on guys [Laughter] right okay let me just read some comments here we have coach for essays thanks max for all your tireless efforts appreciate it thank you very much for your feedback appreciate it Wayne says Oh more ones coming through yes that's what I'm talking about come on guys one one let me see those ones right mark says what's the difference between no sidebar and full width the difference between the two is when you use full width sometimes your product page goes way to the edge Oh the page so when you when your edge-to-edge on the page the trouble now is you have to go in and make extra adjustments by adding margins to the left to make sure you're not too close to the edges but it's just an option that's there with with no sidebar there the page just takes you know the the width of the row and that's where your content is gonna be so that's the main thing the the no sidebar takes though the width and the no sidebar just takes the whole page so everything becomes edge to edge I hope I've explained that clearly right we can see more ones coming through also also also right Jake says plus one fantastic where are dynamic fields for products yes I heard my colleague saying dynamic fields also works with this and this is something that we may need to what try at a later stage because that requires the rest of the plugins for us to add that okay stands for now has quite a lot of ones here also right oh I see someone here who has the exact same name as me and this is Agustin from Sierra Leone Wow awesome that's the first time I've seen this here Adam says can you create a template to be applied by default all new products yes and that's something that we were going to talk about and this is what this makes this a game changer so let's say you go in you add all your text you add all your colors blah blah blah if you set that as a global item next time you add a new page it will just take those settings and this will reduce the speed of designing your websites and this is why I'm not just saying this because it took quite a while for GV to release this but I guess the the attention to detail is what really took this so long to really put together okay Adam says well that's a plus one awesome Adam thank you chittim can't pronounce this but anyway the question is is there tutorial for adding PayPal and stripe yes this is something that we can add I can show you quickly how to do that Kristof oh I got more ones coming through awesome Michelle says more product review thumbnails modules are still missing not sure about that I need to double check that because we have all the WooCommerce modules so I'm going to show you that in a minute another great video always informative awesome big step forward yes excellent so I'm sure make sure that I haven't missed any any anything here on the comments or Lamy they say that's great now I can do whatever I want absolutely that's how our describe is now with these product pages you can do whatever you want really customize anything you want on the page and that's really really cool being up being Calvin says being able to update every individual element is great but is there a way to apply the design global setting it right I've just answered that can the modify design be set as a default I think I've answered that as well awesome uncle social right Oh uncle social welcome Nick wrote said in the blog post for this release there will be more woo modules coming after the in builder has released yep so that I mean right now yes we can be we are really excited about this update but there is also more to come we're gonna have the theme builder coming through as well and we will be able to go in and customize our product pages block pages no not product pages blog pages headers footers and all that great stuff so I think this is the main one that we're waiting for and I can almost guarantee you that when that one comes out it's gonna be huge it's gonna be a game-changer as well just as well as what we've done here with WooCommerce heywhy says you must be a Liverpool supporter that's why not reading my messages hey what's your what's the message I haven't seen it yet can you type it again so I can keep an eye on it sorry about that [Laughter] right let me see what's happening here on Facebook right on Facebook we have quite a lot of ones as well Ahmed says when will you release the free version the free version for what sorry I'm not sure what you mean by that we as far as I'm concerned there's no free version due for release Gary says can you show the sidebar working with wolf filters on the shop page alright I will do that also right bukoza says we want styling on default shop page you know what I've got you covered because like I say this is going to be a really took time to put this together you are going to see some amazing stuff here you know those pages that we had before which we couldn't go in and customize like the shop page the card page and so on guess what we can customize those too and that's what I'm gonna show you in a minute alright guys enough talking let me dive back in and let's work on other exciting stuff world of craft creativity says when we get Add to Cart button I'm not sure what you mean the Add to Cart button is there I mean we can do it you know separately and I'm also going to show this in a moment ays oh wait oh here we go aya is how can you add the template is a global setting I will also show you that in a minute you so awesome awesome yes those of you that have the lifetime license you are loving it definitely and for those of you that don't have the Lyle lifetime license I would say you may want to consider to update it because diri keeps coming with these amazing features alright guys let me go in now and let's carry on and let me show you how to customize this further right so I'm just gonna switch back over here to my product page alright so I think I'm done here I've shown you how to go in and customize all this add all your brand colors if you want to add videos you can go in and add your videos alright so for those of you that are just joining us this is the Divi feature update live show where we talk about the latest DV features we do a discussion Q&A and also show you how these updates can be used in your designs today we are taking a look at the brand new WooCommerce builder for Divi all right so I've just pretty much shown you how this works great I'm gonna save this now and exit so there was a question now in fact you when use when you first load WooCommerce it comes up with these pages look at these default pages right again pretty ugly ideally you want to go in and customize these pages look at this my account page right you want to go in make sure you go in add your colors designs whatever it is even the checkout page you want to be able to go in and you know really customize this so I want to show you something very very interesting here and I want to let me do it on the shop page was pretty much we can customize all this so on the shop page here in fact let me go to the actual page I'm going to go to dashboard pages all pages and I'm going to come over here to shop and click on edit now this is a page that previously we could not edit with Divi and as you can see here this is a default page from from from WooCommerce so first of all we have right side by side bar we're gonna say no side bar and then we can click here on edit with Divi builder in fact I did something wrong here let me just go back let me just go back to my page are supposed to have saved when I made those updates right so come over here to my pages shop click on edit right so we want to edit in fact let me update this first so we want to edit this page with Divi I think I've messed up this page already but anyway that's not a problem this is a product page I mean a shop front page so I'm gonna I'm sorry click here on build from scratch and let's have a single column here so first off there's something I forgot to mention here if you take a look at these icons you may notice that they have a they've been updated so here they are we have little icons on there now to show what these modules are and if the quickest way to access to your modules is by just typing whoo and then now you can see you have a list of all your products right there ok and we have 16 of them so if you want to customize your shop page just search for shop now this will bring all your products and over here now in fact as you can see this is what we had on the shop page so now when you add this module we can go in and customize this the way we want right so you can assign this to recent products you can say featured products sale products best selling products top rated products product category and so on so you can really drill down and customize this the way you want so let's say for my recent products we want to have let's say 4 products that's what we're gonna have and now you can go in and really customize this so check this out if I come over here to design I can start with the overlay I can add my overlay color here I can change the icon so let's say I want my icon to be this now you can see my icon is changed I can change my overlay icon color look at that I've just changed my icon overlay color and I can also change this actual overlay background color by coming over here and adding a bit of transparency and you can see now that that's looking really cool and this is just basic few steps now let's say I want to work on the product description I can click here and then come over here on default changes to monster add if I want to make it all board I can just click on that add a bit of letter spacing make it look a bit more classy and then for the price I can just click on this brush tool takes me to the price and then I can change my price colour in fact let's change it to this okay we can change our font for the price change it to monster add we can change this to bold let's give this a bit of letter spacing as well there we go so as you can see this is looking really really nice and we have really customized this and now we can save okay so this is now the redesign of the shop page so these ones are recent products so why don't we go in and add a text module and call these a recent products okay so now these are recent products as you can see I'm gonna drag this to the top okay so that's recent in fact you know what this needs to be customized a bit so I'm gonna go into default changes to monster add it's making all cabs let's make it slightly bigger let's add a bit of letter spacing okay so that's our recent products now let's say we want to add even more products so okay let's just let's do this quickly I've just duplicated that I'm gonna drag it below here I'm also going to duplicate this module here like that drag it below here okay let's give this the title drag the title above right so the top one here is recent products yeah now this one here let's see what we can do so instead of saying recent products let's say these are featured products now these will show if I've said them as featured products not sure if that's going to show anything no it's not because I haven't said any products as featured and let's say you want to save this as best selling again we could come over here and set your best selling products and there we go you can see now these would be best selling now the most important thing here is to make sure you rename the category and let's call this best selling so as you can see my shop page now has been popular popularized with all these different items right let me save this so you can see right so I'm gonna exit the visual builder and there we go so you got a recent products we've got best selling products here we can actually also have product categories so let me show you how you would customize your page to have product categories so I'm gonna go back into my visual builder and again using the same module because this module is very versatile and this is why I keep using it so I'm gonna duplicate this one more time go into my settings here and let's go to product category and let's say I want to show coffee and tea for our product categories so these are the categories now that would show from those products that I've just chosen okay and you can also go in here and play around with Addie or with the column layout design and so on so just to make sure I mean just to make this page look even much better all you need to do now is to add a new section and just add a sort of like a design on that section so I'm going to add a single column here and in that column let's we want to add some text and this is where you can go in and add a background image talking about your shop so we can come over here go to background add a background image so let's say the image we're gonna go with is let's go with this one here come over here to design spacing we can add a bit of mark I mean padding here okay so this is now your shop page so this is where you can add a description of your shop page and then these will be all your products on your shop page now do you see how amazing this is so before when we had that shop page which comes by default with with WooCommerce we can totally change that and have our own customized shop page and this is the power of using you know this brand new WooCommerce builder for Divi I'm going to take a quick look here and see if we have any questions before I proceed I boy says please update the contact form I think that's a topic that we'll cover later on right now we are taking a look at the WooCommerce builder for Divi party fitness and dance training says hey Matt here how how compatible is WooCommerce update with the Woo's own plugin for affiliate products imports now I'm not familiar with the with the W's own plugin to be honest that's something that I may want to take a look at and see if that works how to import demo designs created by you guys yes import adding demo designs is very straightforward and that's something I'm also going to show you today so hang on tight near all hang on tight right let's have a look here can we change the rating color absolutely absol we can change the rating in fact you know what let me show you that right now so let me switch back over here to my to my computer here so I want to save in fact I think this is saved already I'm gonna go back to my dashboard here and go to my products all products so this product here we say is brand new is the one that we're working on so let's say let's view this product page right in order for your ratings to show up what you want to do is to come over here to reviews and then you want to rate it so I'm going to give this a four star hit submit in fact I may want to add a review here let me go to my alarm text so let's say this is my review I'm gonna paste it in here so I'm pretending that this is a customer they've come onto this product and they want to give a review of this product so you just come over here give it a four star hit submit so now we can see we have this four star here so the question is can we customize this absolutely let me go now to enable visual builder check this out now if you mouse over this we can go into our module settings you don't even need to know what this module is if you just click you on this gear icon takes you straight away to the actual item click on design star rating look at that change the color I've just changed the color of the rating I can change the size I can also add some letter spacing they too close together look at that isn't that amazing so now I know what you're saying how do you customize this text which says one customer review okay so first of all we can actually come over here to elements we can disable show customer review account boom gone so all we have now is reviews but if you want to keep it that's fine you can keep it on there but we can customize it so look at that I'm gonna come over here to my text I can make it all caps if I want to but no let's keep it simple over here on default this change it to monster at let's make this let's change the color to that so it matches our design so that's gonna be my review in fact it doesn't need to be yeah okay I'll go with this so now we've totally customized this and you know what you can actually go in give this backgrounds if you want to you can go crazy with this look at that you can give this background but of course that looks ugly but the point is you can go in and really do whatever you want you can go crazy crazy with this design literally you can update anything on the product page and I and I stand firm by that I'm yet to see what I can't customize on this page all right let's see do we have any more questions here I'm still getting quite a lot of ones here that's also from Philip thank you very much near Alsace how to add a filtered on shop page yes now what I've done or this with this demo is just to add a default setting I haven't gone in and I haven't set in you know the pricing all the all the extra bits and pieces to really customize your shop all these questions that you're asking like the filter that is very easy to add as soon as you add all these module or all these items on your product page you can easily go in and customize it with with with Divi and as I mentioned we have 16 WooCommerce modules so every module that WooCommerce comes with pretty much its covered so you can go in and really customize it roxeanne says is there any limitation of product of attributes for WooCommerce variation products I'm not sure if there's a limitation yet I haven't really looked at that to be honest Vishal says when when setting will add I understand what you're saying here Vishal maybe you can try and rephrase that question rather Paulo says but that only changed the color in that product is there an option on content option to apply to all products now the rating remember is applied by the customer so if a product doesn't have a rating that rating won't show up but as different products have ratings being added to them you'll notice that they will also have the updates added to them now there's something here that I'd really want to go in and show you and I can see here you know what I'm really ah this is I'll try and pronounce the same Chetan Minogue Minogue or something Chinna Chetan Manoj just bought Divi and I'd like to say thank you very much for buying GV that's really awesome J says what's the easiest and fastest way to add responsive spec table in bulk I'm not sure is that related to this update of WooCommerce just going through here to see if we have any more questions let me switch over here to jim says this update is just incredible thanks for the hard work thank you very much Jim appreciate it this is Jim on on our Facebook page astrid says astrid say is copying settings from one product to other products i'm going to show you how to use global settings if you save a product starting as a global item does it affect the existing products okay so it should affect the existing products because that's how the global settings work but you know what this is a challenge you try this now because I haven't tried it myself so let's see if that actually works global settings so that's what we need to do now because a lot of you has been asking about this because truly if you're adding products you can imagine let's say you have a hundred products on your website how do you go in on an each and every page and update all the settings colors layout and all of that on each and every product that'll be crazy so let's see let's see if this actually works it hasn't been mentioned in the update but I'm sure that this is gonna work so so fingers crossed this is live by the way it's not pre-recorded so let's see how that works all right so I want to switch back over here now and let's do global settings switch over here to my iMac right so let's start with something like the pricing okay so I'm going to come over here to module settings click here on this global item design pricing text monsterettes font regular let's say bold okay right I've just made this global just the pricing just the pricing normally it comes in as blue as you know with with WooCommerce so let's see what happens here good all products so before hand I've gone in and I've set some of these products here so let's view this product and see what it looks like okay so what we need to do here in fact no I went in and customize this myself as you can see here let me look for products or let's add a brand new product that's that makes things easier okay let's click on add new product - let's copy our dummy text here okay let's call this 97 at our description here let's publish this page let us use the Divi Builder right it updates now let's go to product two and see what it looks like okay so I can see here this is monster at this is not the default font but it hasn't taken on our colors so I guess what we need to do here is to go in and customize this page is a global page and then let's see if that's gonna be applied globally okay so I'm gonna enable the visual builder here now this is going to be very very interesting okay so I'm gonna start with my product title here so I'm gonna click here on module settings click on the global item so I'm gonna come over here to design title text now I'm going to use a different font all together so we can see the difference so this is gonna be Poppins let's make it all caps let's give this a bit of letter spacing and the sizing let's just reduce this a little bit so this is a global setting for Wu would default as you can see there let's change the font weight here to let's say semi bold let's change the color to this let's save that are you sure you want to say yes okay that's great I'll save that now I'm gonna come to the pricing here surprisingly this was this has taken the monster ad font which I set up as a goal as a global but the color didn't change so more sure what that's about okay so I'm gonna go with this color here for my pricing changes from Monster right to poppins okay so that's gonna be my let's go with light let's see okay let's go with light because we want to see a difference here save that now let's go oh you know what happened I didn't change I didn't save this as a global item so let me go back in fact let me reset so when you start working on this you need to make sure that right away you go in and start working on it as a global item so I'm going to come over here design price texts change it for monster ads to pop-ins from bold to let's go with light sighs I think 28 is okay save that okay so that's done for the images here I want to add Ron did corners so I'm gonna come over here to design Oh in fact before I do that this needs to be global so we come over here to design border let's add some rounded corners here let's go with ten save that that's a global item save one more time let's do one more item here and then let's take a look and see if this has worked so again here on the text I'm going to change this from defaults to snow from default to Poppins text defaults changes to Poppins okay the size needs to be let's go with 14 save that and then finally let's just do something here on the button so we can see a change on the button so I'm gonna click here on design button in fact we need to go into the global design button use custom styles for button and let's add our button background color okay let's go with that and text color and let's remove the border width okay so I think we've done pretty much enough here for us to see if this is going to work so I'm gonna say yes save that and then I'm gonna save the page so fingers crossed let's see what happens now if we add a product so I'm gonna come over here to all products let's add a new one this one here is going to be product two let's give this a bit of description text okay let's price here so this one's gonna be 579 let's add some text in here product image so this one here is going to be that set my product image no sidebar so pretty much that's all we need okay so now I'm gonna hit publish let's see what it looks like okay so this hasn't taken on the design let me go back in I think I know what the problem is so here we need to change this to strange I can't find the option okay so we need to click on build from scratch here because that activates the Divi stuff so let's see now if this page is taken on our default global settings if not this is going to be disappointing yes this is words okay this is works you can see my font here is changed my title has changed I'm not sure about the pricing maybe I may have done something different here but the pricing the button here you can see the button has changed so this is what we changed here the image here we also added some rounded corners if you recall we added some rounded corners here I'm not sure why this price is not taking on the color to be honest so let's see if I go back in here on the global settings and change the pricing color what happens it's making a duck oh look it's not changing that's strange okay but you know what the most important thing is most of my items here have changed the button color this so I need to go back in now and really check and see what it why this color hasn't changed but as you can see most of my stuff has changed from the default to this design here now the other thing is if I go and open a another page it should take the designs now this one here I worked on it so I'm not sure if these updates here are from my previous one so let's try another page or another product that I've already added and this time I'm gonna go with yeah this random one here let's view it okay so if these pages here and this is what I've just noticed so these pages here that have the default WooCommerce template you need to go into enable visual builder okay and you want to make sure you change the templates so you want to come over here in fact when I change that you can see here that the colors have changed and this is taken on the global settings I'm not sure if you saw that if not I can just go in and open another page but just by changing this to build with Divi it has changed now my image has rounded corners there you can see my button has changed color this also has changed but the only thing that you may want to do is to come over here to edit product let me just save and exit and over here you want to make sure it's set to build from scratch and then to remove your sidebar just click here and say no sidebar so global settings actually works I'm really excited about this but the only thing is you would need to go in now and make sure that all your pages don't use are not using your default will Comus template and they're using the DVT wait so let me just cancel this so you can see here ah sorry about that so back over here when you look at the page you can see the button has changed our description text has changed text here has also changed and our image now has rounded corners so every time you add a brand new page or brand new image on the product it's going to have this these actual settings now I want to show you one more time because I think this went very fast and for some of you you may have not noticed this so I'm gonna go in and go to another product so I'm gonna click here on all products so I created some products here by a default so let's take a look at this one here so let's close these tabs because we don't need them so I'm gonna open this in a new tab and show you what what needs to be done so if you just go in and open it just like that it's gonna have the default WooCommerce WooCommerce layout so what you want to do is to make sure which one was it okay let's go on to this one as well it's getting confused okay so when you open your previous products in your WooCommerce shop they are going to have this layout here so in order for them to take your default template that you've just created what you need to do is to this is a leak Wham I think yeah this one here so what you want to do is to click your own edit okay and then first of all if you want to remove the sidebar just remove the sidebar like that and you want to activate the Divi builder okay so if you click here let me just hit update first because of the sidebar that I've just updated so what you want to do is to click here on use Divi builder so once you say use Divi builder notice what happens so this is the same product look at the name here okay that's the name and this is the same product so if i refresh the page now let me just hit update so if i refresh this page now notice what happens now we have rounded corners on our image our title here has changed our text here is right I'm just not sure about the color as I mentioned the button color here is changed so the global setting actually works so to be honest I was sweating because I wasn't sure if this was gonna work but it looks like it's going to work for sure you just need to make sure that you create your defaults first and make sure they said to global and then once you've done that initially you can then go in and every page you build after that is going to have those default settings but if you have an e-commerce shop that you've built before the update you would need to go back to each and every page and set it to use Divi if you do that it then takes those settings those global settings and apply them to those pages so yes if you have a hundred products or a thousand products it's gonna be painful but if you're starting off start by creating a product template a page template and then any page that you're going to build after that is going to be really really cool all right I can breathe now ha that was crazy let's take a look at your comments here right Fiorina says so if I have a hundred products I have to go in and activate the Divi Builder yes at the moment yes but I'm pretty sure once the the page builder that we're waiting for which is going to be a pretty much the final update final major update once that one is released its it will definitely make things easier because from how I can visualize it is you create your your product template and then they should be an option which says I'll apply to all products so if you even if you have five thousand products in your shop that template will be applied to all the products in your shop so that'll be the easiest way but at the moment yes you would need to go in and just make sure you change that setting to 2dv because that that allows Divi now to take all those settings from the global settings okay this was on Facebook let's see what's happening here on YouTube right right right right comments uncle social no side bar versus food that's confusing all right I think I explained this in the beginning but I can over can always explain it again when you say no no side bar what happens is the content on your product page takes on what is in the width so whatever width you've set on your page is what your product is pretty much bound by okay now full width means everything now all your all your content is going H to H so pretty much it's on the edge of the page to the end of edge of the page which means you need to go into your section settings and apply some padding to to make sure you add some breathing space onto the contents of your page so those are the main differences the no sidebar means your content will be within your section okay the width of the section is where your products gonna be for width means there is no section everything is just pretty much edge to edge hope that makes sense all right morale says that's awesome hopefully updates will make it easy to update created products as well yes project says why can't I see the dots from the list in the description or description field I'm not sure which dots you are referring to right can you expand on that project mo see if you can just expand on that please rattler says to see them the Wu modules do I need will Commerce installed yes absolutely if you want to see all the WooCommerce modules you need to make sure that WooCommerce is is installed it's a free plugin so first install WooCommerce and then you'll see all those modules show up I learned how says are you planning to give us more products more product templates to help us with the workflow that'll be nice yes there will be a lot of templates coming out which you can use for your shops and how long have we been doing this so far wow this is over an hour I think this is gonna be long as the longest live stream here I want to show you something that you may haven't thought about which now you're able to do and this is you can go to any page on your website and pull in products that you want to show on that particular page let me show you what I mean so hopefully I haven't missed any important questions here show us how to import your created demo yeah near all pay attention to this one because that's what I'm gonna do I want to import a template and then I'm gonna build on it okay so projects MOC I'm going to try and add the list onto the description and see if I can answer your question here okay let's dive in and let's work on this new of this new design that I'm going to work on okay so what I'm gonna do now is I'm going to create a brand new page so I'm going to come over here to page so I'm gonna add a brand new page so let's call this Mac page I'm running out of ideas now okay so I'm gonna come over here use Divi builder and pretty much for those of you that have seen my tutorials or use Divi this is very familiar I'm gonna come over here choose premade layout okay and then we're going to choose it layout it doesn't matter what layout you choose here it just depends on what you're working on okay so I'm just gonna scroll down here choose premade layout okay so I'm just gonna choose a layout to go with let's see let's go with the farmers one here right so with this one here does have any products yes it does so I want to go with this layout so I'm gonna click here on use this layout so now my layout for this page is going to be added on to this page okay so this is my layout it has been added on my page that is great okay so let me just double check and see what this what this is so this is the full width header settings okay so as you know with this you can go in customize this make it look the way you want so what I want to do now is I'm just going to delete everything here delete all these sections I don't need all these delete everything okay delete that delete that so pretty much all I need here is the main heading okay so what I'm going to build what I'm gonna build here is going to blow your mind check this out so let's say this product here is about jewelry so I'm gonna come over here let me change my background image here effect let me close this because my image I think is in here okay here we go I'm gonna delete that and add a new image and the image I'm gonna go with is let's go with this one here upload an image great so let's say this is about building a a product for a jeweler okay so we really want to change here let's just call these best wedding rings oh let's call this best rings for any occasion okay I know I could be better here with the deck with the title but that's all I can think about okay right publish this so let's say you have all these products on your on your on your shop but you don't want to use any of the layouts that WooCommerce comes with you want to create a completely customized page with your products that exists in your shop how would you achieve that that's what I'm about to show you now for those of you that are just joining us this is the DV feature update live this is a show where we talk about our latest features we'd go into detail show you how they are applied and also answer some questions regarding these updates today we're talking about the brand new WooCommerce builder for Divi so let's dive in and let me show you what I mean by this so I'm gonna click here on this plus button to add a regular section and in the section here section here I'm gonna add a layout and to be honest this is just something I'm building from scratch so now I want to pull the products that are already in my shop that I've already created ok so you need to have the products already created before you can start adding them here alright so here I'm gonna add woo so I need a woo image okay because this is going to show me the image so notice here on this drop down it actually shows me what products these are okay so I'm gonna choose I think it was product 2 which has my ring no that wasn't it I think it's this one here yes there we go so let's say this is the item that we are selling it's called product two by the way and these are the different names of the product so this one just so happens to be product - alright so that's my image right there now I want let's say I want to add a price for this image so I'm going to type in woo and I need woo price ok here we go and this is where now you can start using the the amazing WooCommerce modules so I'm gonna add my price day and you have to come over here and make sure you choose product two because you want everything that you're adding here to be related to there product here okay I'm gonna save that I'm also going to add another module this time I need word description so I need a description for this product so here's word description and the description is for product - so make sure you choose product - boom just like that save what else do we need to add here we need to add let's say the title okay so I want my title here to be on the top and not here on the bottom so I'm going to click this plus button here and a single column and then I'm gonna search for Wu title here we go Wood title and its product - there we go I'm gonna save that and now I want my title to be here on the top great and then I may also need here the Add to Cart button let me just drag this down here below and let me add my Add to Cart button here so again it's Wu Add to Cart here it is there we go so now as you can see as I'm adding all my products here they are also taking shape because these are that the fonts the colors that I said globally so as I'm adding this you can see clearly that this is taken on the global settings that I said previously okay so I've got add to cart here that's looking great I'm gonna save that so I can continue adding even more items here what else you are net would do what I want to add here let's add Wu okay so what do we have here Wu cut notice we have Wu breadcrumbs we also have a wool gallery so let's say I have a gallery I can add a gallery here I can also add roommate to tags were rating oh I love this but do I have a rating for that product I'm not sure anyway edit okay so if you don't have a rating for it it won't show up but I'll show you how to add the rating on there so we're just gonna add it anyway although he's not showing all the content so you can see here that I'm actually being content and I'm building a brand new page here and I'm just adding all my products which are already in my shop so I'm just pulling in all that data dynamically as you can see here so we have 16 modules like I said you can continue adding more so let's say let's see what else we can add so Wu reviews we can add reviews we can add tabs we can even add gallery cut notice Wu upsells so let's do a cut notice here just for fun in fact that looks ugly let's not add that okay so let's say you want to further design this page so what you can do here is we can go in to our section settings you can add our section dividers so all this stuff is stuff that you can do to our existing design so you can add dividers here if you want to but you know what let's just leave this to none for the sake of this live stream okay so we've pulled in a specific product a specific product here that goes with the titling that we have here and the settings of this page so let's see what happens when I save it and when I add it to my cart so I'm gonna exit the visual builder here add to cart notice that now it has been added to cart I can view my cart and all that good stuff now let's say I add a review and remember nothing was showing earlier on so I'm going to add a 3-star here and submit so now what happens when I go to my page oh it says I need to type of comment so I'm gonna go back to review add my review and you say no comment submit so now this product has a review so I'm just going to go back now to the product that I was building and I'm going to refresh this and now we see we have our review and if this had my my descriptions I mean my custom settings global settings this would have taken on those settings as well so now this custom page has now got this review and noticed that whatever is happening on your shop this will be dynamically updated and this is the really really really cool stuff here okay so I think you see what I mean here you can go on to any page on your website or create a brand new page and if you want to showcase a particular product on that page you can start adding the woo modules and start pulling data from the database to create all the pages that you need and this could be really cool if you want to highlight a specific product that's on a sale you can have a landing page for that product and people can add it to cart it will show the customer reviews it'll have pretty much the whole design that you want now there's also something I need to mention here and that is all these modules that we are talking about here in fact let me go back in let's say you you want to add some animations to to all these products you can pretty much go in and add your animations you can have all the exciting Divi stuff that we've always had and these now also work on on these modules so if I come over here to design animation and let's say I want to bounce this look at that so all that still has all our features animations you want to change colors you can do all that great stuff all right so I'm some take a quick look here at the questions let's see if I've missed anything here Wow we are almost approaching one and a half hours that's amazing [Laughter] Christine says can it be made with a sidebar because I won't want yes you can have the page with the sidebar if you want one that's not a problem in fact that's what can show up by default but if you don't want one that you can go in and say no sidebar right I had to clone this layout last month product variations yes you can add that but you need to add those in the actual product as you are building you as you add in your product on to WooCommerce uncle social says thank you for the extra long live stream it's hugely helpful at which et did more long-form videos pre-recorded or live awesome I will suggest that to them but I am glad you appreciate it to be honest I was a bit worried that maybe going on and on here and you guys getting tired but it's good that you guys appreciate it that's fantastic Vishal says when column top middle and bottom setting will be add not sure what you mean by that we can add columns to our page pages so I'm not sure what you mean by that Ashish I think says I'm facing issue when I insert a reviews module let me just do that quickly and see if there is a problem with that review module right let's switch over here so let's say I want to add a module here and it's [Music] woo-wee reviews so if I click on that see that's working okay save that and now let's view this page I want to save it and exit the visual builder so as you can see I've just added the review here the review item and it's there you can add a review and submit it so let's say you give us a five star you can then say another comment you hit submit and then over here you can see now you have two customer reviews and if you go on the product page hmm I think I see what you oh here we go so these are the reviews in fact my computer here is lagging because there's so much process is working here so these are where the reviews are so when you add the the review module it will show up here but as soon as you add the review it's it's I mean it's it's removed on that page itself because of a today review and then it shows down here on the bottom so here is the one I've just added it says another comment and this one here is the first one I added which says no comment so that's how it works okay and also by the way I forgot to mention this related products can also be customized by the way so you can go in and really customize these related products give it a background change the colors the size the fonts and all that good stuff okay so let's have a look here do we have any more questions sweet sweet Creed says you need to update Divi I'm not sure what you mean by that I'm running the latest DV update Polly fitness and dance training I'll take a look at that W zone plug-in and see what it does because it might be let me make a note of that now W zone I'll take a quick a look at this and see how this work eh-eh why oasis this is the default page and both both the page you were working on I've just created this page but you can apply all your products to any page that you have on your existing website suite cristes can we customize the shop yes absolutely you can customize the shop I've done that earlier on earlier on in the in the live stream so yes you can go in and completely customize the shop landing page JV jvj any luck with the attribute filter yes you can go in and customize all your settings in the products and once you add all your prices in your products as you're adding your products that's where you can have your attributes in there breathing design category will be great yes you can have product categories but you do need to create them in your website as you're working on your website so let's say you're adding different type of products you didn't have let's say teas coffees you can have shoes and so on so as you're adding your product so let's say you add this mug and it's part of let's say the cup category in your coffee shop you want to make sure that you add the products to that category that you've created so you need to first create the categories and then add the products of those categories and that's how they will show so if you try to go in and add all these categories they will not show by default because you haven't set them up so you need to set them up first and then they are going to actually show hope that makes sense Cal says where do I update you update DV in your in your dashboard so go to your admin dashboard and click on update and that's where you see the DV update um abou Nayeem says I have a previous version of DV how can I get the WooCommerce features all right in fact this seems to be something that quite a few of you are asking now let me show you how to do it right so what you want to do is to go to your dashboard of your website come over here to update and if you click on updates if you have the latest of if you haven't if you haven't updated it it will show up here this is where it will come up okay so that's where you need to check it out right and also we were talking about product categories if you want to add product categories this is where you come you come over here to products click on categories okay so once you click on categories this is where you can start adding all your categories so let's say you want to add a brand new one you can just give it your category a name here and then it will show up here so as you're adding all your products so let me show you quickly so if I come over here to all my products let me trash that so if I come over here to my products so let's say I click here on edit over here now this is where you can assign a category of that product so as you can see here this one here is on T and then you just hit update and that's where your categories will show up okay hope that makes sense okay so let's take a look here there any more questions I think I've answered this one here Ashish yes you can create a product template which will have all your colors and all your designs your layouts and so forth once you've set it up that's where every time you create a new product it will have those those colors the fonts font styles and so on I've also demonstrated it through this livestream so you may want to go back and just check and see where I've done that but yes it is possible breathing design I hope I've answered your questions about the product categories right so over here on Facebook let's see Christian says can you make a list of products yes you can and I've done that right in the beginning of the livestream but yes it's possible Roland says without being able to create actual products or page archive templates this initial WooCommerce feature release is kinda useless the upcoming theme builder is what he's supposed to complete it Roland first of all the product pages were in were pretty much impossible to go in and make updates to you couldn't change the font you couldn't change the colors you couldn't change pretty much anything because that was the standard that came with WooCommerce so in my opinion having this feature allows us to design and pull data from your database and create your custom pages that you need for your products so beat a product that you're highlighting you can add and remove specific items on those product pages and you can customize your related products and all that good stuff so yes I mean you're entitled to your opinion if you think this is kind of useless yeah that's fine but having used this feature now it gives us design flexibility and I think this is what is important if you really want your website to look a certain way having that ability to go in and change colors on a granular level is what this brand new WooCommerce update has given us and in my opinion that's great but of course if you are creating pages you won't be able to apply the design throughout the whole website and this is where the next stage of our release is going to come through but for now I think for those of us that want to custom designs with this update we are able now to go in and really design the page and change anything that we want on our WooCommerce pages a whoa I say Stevie rocks love it awesome a also says update amazing update great awesome thank you for that Michelle yes the the thumbnail scroll I mean the the slider thing yes it's added in the in the in the WooCommerce modules make sure you have the content that needs to go with those items for those things to show who bob says Rudolph says it'll be nice to see tutorial with the booking extension of WooCommerce with calendar yes now that this update is out we are working on quite quite a lot of tutorials behind the scenes to see how best you can use these updates so I will make a note of this Rudolph and I'll suggest this to my team and hopefully we can make this tutorial happen right guys I think I've covered quite a lot today I'm sure you guys also tired as well but most importantly I'd like to thank you so much for tuning in today for this update I know it's been really long it's overhauled and a half hours but I hope you had an insight to how you can use this brand new WooCommerce builder afford Divi and we will be coming out with more tutorials showing you how best you can use this so for those of you that participated in this I'd like to thank you so much for hanging in there and I see you can see most of you have been you know with me throughout this and we will be making some updates on this channel showing you I mean you know with more tutorials and so on so thank you guys for tuning in hopefully the and the difficult updates will be coming out soon and that's gonna be pretty much the the biggest update that we wake or that we're working for that we're waiting for so I can't wait to see that too but this for those of you freelance designers and for those of you that want to build WooCommerce shops this now changes everything go ahead try it out make sure you're running the latest DV if you have any problems just leave your questions in the comments box below and we'll do our best to respond to them alright guys thank you very much for being with me on today's livestream hope to see you again very soon take care you

Channel: Elegant Themes

Views: 11,760

Keywords: woocommerce builder, divi feature update live

Id: sjs00aInCHg

Length: 100min 37sec (6037 seconds)

Published: Mon Sep 16 2019