Divi Woocommerce builder - This is a game changer!

hello everyone and welcome in today's video I'm going to do an extensive review of the WooCommerce builder for Divi now this was recently released so I really want to see how this is a game changer and how far we can go in and customize our product pages it was a very big frustration for me using WooCommerce because I could not go in and really customize my product pages and also the default pages that came with WooCommerce so let's dive in and let's see how deep we can customize our pages and also if this update is really worthwhile so before I dive into the review if you buy Divi using my affiliate link which is in the description below you automatically get access to my two bonuses the first one is the Divi blueprint course which teaches you how to design professional-looking websites using Divi the second bonus is the Photoshop for web designers course now this is a course that teaches you how to use Photoshop and how to customize your images for your website all you have to do is to buy Divi using my affiliate link and then drop me an email and I'll be able to give you access to those bonuses all right so without wasting a lot of time and let's dive in and let's take a look at the new WooCommerce builder for Divi so the first thing you want to do before you can actually see all these updates is to make sure you're running the latest Divi Update so to just to double check you want to make sure you come over here to update and this will refresh and show you if you have any outstanding updates right here secondly you want to make sure you're running the WooCommerce plugin so to do that you want to come over here to plugins click on add new and this is a free plug-in by the way so you come over here you search for WooCommerce okay so make sure you install it now in my case I've already gone ahead and installed it that's why it's active so in your case you install it and then you activate it now once you do that the next stage now is to start adding all your products so over here you'll see this entry which says WooCommerce now this is where you'd go and do all your settings your payment gateways and so on and this is where you'd add your products and this is where we're going to focus Oh our tutorial on so over here now you want to come on add new and I'm just going to call this product Mac product alright so over here you want to add o your description for that product so I'm just gonna add some default lorem text here over here we're going to add the short description for my product for this example this is going to be a simple product and then for the price here I'm just gonna say $6.99 and sale price I'm gonna say $4.99 now here on the right side this is where you want to add your product image and in this case I'm going to use this chair as my image click on set product so now I have my image you may also want to go and add your categories here if you have quite a few products that you want to add but in my case I'm just gonna leave this as it is so once you hit publish your product now is ready to be viewed so I want to open this page in a new tab and the first time you come to this product it looks like pretty much the old will comments that we're used to and you may find this quite shocking or quite frustrating but of course I'm gonna show you how this changes so if I take a look here I've also added some product so this is why we have related products and so on so this is pretty much what we're used to when we use WooCommerce so where does this update really come in so let me show you how this update integrates so what you want to do when you set your product here is to click on use the Divi Builder so once you do this what happens now is Divi takes over the structure of WooCommerce and then gives you the ability to make changes to your website so now that we have this I want to go through a few items here which are very very important if you take a look here at the right at the Divi page settings you notice that you have a page layout here which has a right sidebar by default if you click down here you'll notice that you have a full width and no sidebar and also a left sidebar this gives us flexibility in how we want our pages to look so you may want to have a page with a sidebar where you have related products and or any other widget that you may want add but you can also have a page which does not have any sidebars and this is why we have this flexibility and I think this is a very good addition to what we have now in WooCommerce so back over here I'm going to come over here and say no sidebar because I don't want any sidebars here but notice what happens here all these things that are showing here means we can go in and really make custom changes to this and all these are the WooCommerce modules so you can see here what title were rating would price would description and so on so I know right now we can't really see what is going on I'm just going to hit update here and then we're going to build this on the front end and this is what a lot of you are familiar with ok so now that this is saved I'm going to click now on build on front-end now let's take a look at what this looks like so at first it looks like okay we still have the same sort of fonts the same customizations but as soon as you add your mouse over any of these modules you notice that you can go in and customize this now let me start by coming over here on the product item now if you don't know what this is it doesn't really matter because if you click here on this module settings it shows you what this is so here when you come to design and here's the title this is wool titles you can actually go into this title and now change the font so let's say I want to use Poppins for this font I can select it here and let's say my turtles needs to be all caps I can just change it here now it's all caps and maybe this needs to be semi bold and let's change the color for that as well so I'm going to change my color for my product so I'm going to save this now let's say I want to change the price I can go into my module settings here we are making changes to the wooh price settings so I can click here on design price text and I can change this to Poppins and notice now my price has changed and I can also go ahead and change the color now look at that I can change my color of my pricing and let's say I'm happy with that I'm just going to close this now we now here we have the old price and the sale price now this is what I was really looking forward to seeing because with this it now shows us that you can really go deep and customize a particular item on your product page and this is what I'm really really excited about so as you can see you can really go in and make those changes so over here on the old price you can go in and set your font here let's say Poppins and here is well let's say this is regular and let's say we want to add a color to this so let's say this is the color of the old price the size is going to be okay I'm gonna come over here to the new price and I'll notice here it's set to bold and I also want to set my font here so the new price is bold I can also change the color here if I want to as you can see there so I'm gonna leave it with this color right here okay great I'm gonna save that moving forward now this product description I can also go in and change the the font so look at that I can come over here change this to Poppins and save this moving on now here I can also change this button here so if I click on this gear icon it takes me to my add to cart settings I can come over here to design and I can since this is a button that we need to make changes to I can click here on button use custom styles for button and now let's change the look of our button so first of all I'm gonna add my background color here and I also want to add my button text color so for the text color I'm gonna go with let's go with this and my border width I'm gonna remove that as you can see we have access now to the Builder itself so I can actually go in here if I need to add any animations I can come over here animation I can make this bounce if I need to so pretty much we are open to pretty any customizations on this page all right so I'm gonna save this and let's say you want to customize this this text right here you can go into the meadow settings design and also change the text from default to poppins and I really really like that you can also go in and change the colors if you want to change the color now I've as you can see I've just changed that so the reason why you want to go in and make all these customizations is you want to end your you add your brand colors onto these pages that we are designing so as a designer now this is giving us flexibility and you know what this is a thumbs-up for this update so far I've really really liked what's going on here so what can we do here with the image now same thing you can come over here to this gear I can't go into the image now with the image you can go here and let's say you want to add a background to this let's go back over to contents we can come to background and add a background or this product if you want to leave it transparent it's up to you you can just add a transparent color we can also go into design we can add things like rounded corners so let's go ahead and add that so I'm going to come over here to border and I want to make this ten pixels okay so this is gonna give us a rounded corners on our images I'm gonna save that over here everything can be customized and I'm really excited about this now look at this if I come over here i can change this background color to match our design look at that that's looking really nice even this button I can go into that particular button activate use custom styles for button and we can add a background color and let's go with something dark and then for our text let's go with maybe we could go with this so that's looking great and also not forgetting the font let's change the font here because we want everything to look really nice so look at that so my message now for my card has changed so I can pretty much change everything here let's say you're done with this you know everything looks great what can you do here with the related products now you know what you can still go in and customize the related products now look at that I can click here on this gear icon and this will take me to the product I can set how many products I need here I can set my columns background colors here on the design I can go to the image and let's say on add 10 pixels to have my rounded coolest look at that I have my rounded corners and what about the the the titles the fonts and everything now look at that I can come over here change this from default to poppins and now I have my title right there and let's say my product titles here needs to be changed as well I can come to my product title changes to poppins reduce the size a little bit 16 is great and I want to change my mind color like that I can also add line hides look at that I can really drill in and make specific changes to this page now this is looking great I can save now in fact you know what I can easily change the price here so the customizations are great I can choose my font here my colors I think I'm happy with my colors right there let's see okay let me go with that save this now as you can see we've gone in and we've customized this page to make it you know the way we want now let's say you want to move things around now this is the power of the Builder now so I can change this ad to cut put it above the pricing maybe that's what you prefer so now that I've shown you how to do this I mean this items here we can also drag them let's say you want to have the product descriptions for the related products you can also go in here in fact let's change the font here because it doesn't look great so body texts change this from defaults change it to Poppins look at that so as you can see we can fully customize the product page and as it says on the tin absolutely agree with this it really works you can go in change the product page now what else comes with this update in total we have a 16 WooCommerce modules and this is really really powerful 16 new WooCommerce modules so these are the icons as you can see here now let's say you want to find your modules easier so you can just click on this plus button now what I normally do or what I found was very useful here is to just type in woo and then it just shows you all the WooCommerce items like that so you can add your tabs you can add your stock so let's say you've created all this the product page but you also want to show the stock you can just click this button here and they need to add your module and this will be added to the page alright so I'm just gonna save this page now and let me show you other items that we can do so now that we have this if we go back into our dashboard in fact into our page page settings I'm gonna edit the product so over here as I mentioned you can see here that the product content is set to build from scratch now this is what activates the Divi builder and this is what allows you to you know to work with this now here's the thing let's say you have some products that were on your on your shop previously before this update how does that update with with with the new WooCommerce builder so what you'd need to do if you have all the products is you need to go into that product and activate in fact let me show you what it looks like so let's say I go to my old products here and I come to product 3 and I click on View so again everything is going to be the same nothing's going to change even though we have the builder installed on our website so what we need to do to activate the builder is to go into each and every product and act and activate the builder on that product so let me show you what how that works so if I come over here and enable visual builder ok so now that I've activated you notice now I can go in and make my customizations and now if I go to edit product I can save and exit and if I need to remove the sidebar I can go on to that particular product and then over here I can just click on no sidebar and then click update one thing that you you'd need to do is imagine let's say you have customized you know your product page let me refresh this this is the one that we were working on so let's say I've customized this everything everything is looking great and I'm really happy with this if I go to another page notice that it has the default settings that come with WooCommerce now this can be very very annoying because ideally you want your page to have the updated fonts the colors and you know the layout that you've spent so much time working on so how do you make sure that your future pages that you create have a consistent layout here this is where your global default comes in and this was a feature that was released a few weeks ago which allows you to set global settings for anything on your website in this case we can actually go in and set global settings on our product pages so that next time we go in and create a a new pages they just take on the settings of that product page and I think this is a huge it's gonna save you a lot of time so let me show you how that works if I come over here and click enable visual builder so I'm just gonna do one change here so let's say you go to product 3 click here on this gear icon let me snap this to the left so to go to use the global settings you want to come over here to this little icon here I'm gonna click on it and now I'm in global settings so if I come over here to design and then I click on title text which is exactly what this is let's make it all caps and let's set this to Poppins as well so this time I'm gonna make my color that black and I'm gonna make this bold so this black here is for my product now what you need to do is to make sure you go to each and every item and set it as a global for this to actually work so now that I've set this as my global if I save this page and let's say I need to create a new product I'm gonna come over here new product and let's call this product 5 use Divi builder let me add the product image so the product image could be that set as product image and then what I may also want to do here is to remove the sidebar and we can update so let's take a look at the product title and see if that title has that black title that I've just created on this new product so if I click on update and let's view this product okay look at that so my product now has taken on the settings that I set as a global so this is what you want to do so my advice is if you're creating a brand new WooCommerce job first create your product page and make it glow and make all your global settings there so every time you add new products they will just adopt all your settings that you either you've set in your default product so that's the way forward alright so now that we've established that we can actually go in and set these defaults what happens now to the other pages that come by default with WooCommerce so previously we were unable to go in and make edits to those pages all right so if I take a look here at this shop page we noticed that again if this is the default shop that really came with with Divi I mean with WooCommerce so let's see if we can customize this so I want to come over here to my dashboard and go to pages and this is my shop page I'm gonna click on edit so what we need to do now is to go here and click on use Divi builder edit with the Builder click on build from scratch and now what we can do is let's add a single column here so what we can do with this shop is to create our own layout so if I click if I type in shop notice what happens I can choose recent products from here I can set how many products I need so let's say I need only four products here for this category and notice that you can have quite a lot of these categories here you can just click here on this drop drop down so you can show featured products sale products best selling top rated products and so on so we have great flexibility now so if I save this right and then I go into this module again I can go in and customize this as a global item if I need you so let's say I come over here to design image I can add rounded corners to my images and notice that all of them have been added with rounded corners I can add borders if I need to so for now I'm just gonna leave that as it is now I really want to change these product names so if I come over here again I can change from default do poppins I can change my color I can also change the pricing just by clicking this brush tool so I can go in change my font here to poppins and change the pricing as well so look at how beautiful now this now looks I can also add a background color so let's say I need to add a color to this look at that that is beautiful I can go in add my background colors and also let's say I need to add an image my hero image here I can also go in and let's say I want to add my text module I can add my text module there make sure this is set to Poppins I know I'm doing quite a lot of customizations here but of course you can you can do quite a lot here so let me add a background image to this so I'm going to click here add a background image and let's say this is the image I'm gonna go with I'm gonna add that now let's add some mod some padding and you can always customize this text you know however you want so look at that now we've transformed that default shop page that comes with WooCommerce and we've managed to really go in and customize this page change it to whatever we want now previously we were unable to do this and this was very very frustrating for me to a point where I had to go in and build my own shop page so now we can go into these pages and make customizations to them now let me show you what else you can do so I'm gonna save this and look at how beautiful this pages really love this I've really loved the way you can go in and make these changes right so let's take a look at the my account page so these again are pages that we can't go in and make any changes to you'd need some CSS to really customize this text but now we can go in and make changes to this so again here we can enable the visual builder and we can really go in and look at this it says use existing content now this is huge I really really love this if I go in and use the existing content look at this now we have the Builder I can go in here and I can go into the design text I can change in fact let me snap this to the left I can really go in here change my font from default to poppins look at that I can change my color so now I want my color to match my branding if I need to underline them I can go in and over here all my links can be changed I can change this to this color here if I want to or I can change this color and add an underline look at that and let's say I need to increase the size I can come over here increase the size a little bit and I can also add some line height and I can save this I can go back here and I can add a background color if I need to so let's say here I need to add this into a design which is slightly different I can add that say 30 pixels here just give this some breathing space and then I can come over here and come to background and add a background color now that one's a bit too not so good but let's just do that and I can also go in give this some rounded corners so you can see here it's highly customizable look at that now that I've added my my account page I can also add another section here and in those sections I can add videos I can add pretty much anything that I want so now you can have a totally customized my account page and this also applies to the cart the checkout and so on so as you can see this update is huge I wasn't expecting this to be honest now we can go in and make customizations to our product page we can go into our pages that come by default with WooCommerce and customize those pages too and make those colors match our branding and in design this is one of the most important things so overall I would give this update a 4.5 out of 5 the point five really is ideally and I know this feature is coming out ideally let's say you have a shop which has a thousand products now it would be not feasible to go in and change each product to use the Divi template right so that's a lot of work so imagine this if you had a page that you build as a template and then apply that template to all the products on your on your on your shop now that will just apply this throughout the whole website and this will take less than five minutes so this is the feature now we're waiting and this is going to come in with the theme builder so I know that feature is coming so it's not really a big deal for me right now the most important thing for me right now is and now I can go into my WooCommerce job and customize my product pages I can customize all my default WooCommerce pages so all in all I think this is great and I I highly recommend that you use it so if you're a freelance designer now you can build really customized websites if you are intrapreneur and you have your own website you're working on again you can make your website look really really really nice so that's my take on this let me know what you guys think and I know I haven't covered everything here this is because this is just a quick review but I'll be doing quite a lot of tutorials coming up showing you how you can really customize your commerce website thank you very much for watching and don't forget to hit the subscribe and the bell notification see you in the next video

Channel: MAK

Views: 60,708

Keywords: How to make business website with wordpress and divi, Augustine mak, divi 3.0 course, divi 3.0 training, divi 3.0 theme tutorial, WordPress website tutorial, Divi Woocommerce builder, Divi builder woocommerce product page, Divi theme

Id: osIkwFsge1o

Length: 24min 47sec (1487 seconds)

Published: Mon Sep 16 2019