Overview Of The New Divi WooCommerce Modules/4.14 Update

hey everyone it's nelson miller here with pa creative today we're looking at the new divi update version 4.14 it is new woocommerce modules for the cart and checkout and there's some other changes as well so in this video i'm just going to walk through it i'm going to take a look at everything that's new show you some of the things that i've noticed and yeah just give you an overview everything is new what to expect for you so you can dive into this all right let's get started here all right and if you're watching this on youtube you know the drill the link to my actual blog post is in the description all right so let's take a look here summary of what's all new now the first thing i noticed when i updated is the new interface for adding the modules to your layout so what we're going to do actually i'm going to just i'm going to use a demo site here now this is how it looks without updating notice how i know i have woocommerce installed of course when woocommerce is installed that's when these modules show up so anyway here are here is how they were before 4.14 all right everything's in a list it's just everything's there so what i'm going to do i'm going to update and show you what happens all right so i just updated now when i go to insert a new module as i scroll down notice how all of them are combined into this woo modules like it's like a module but it's really when i click on that then we're like in an inner list here which is really cool it's like reminds you of like when you're editing a module right so then there's all of these items and um the first thing yeah that was the first thing you notice the user interface how they're grouped together like that okay um now even if you were on this home screen if you start typing like woo something they show up there on that home screen it's not like you have to go into that you know what i mean if you're like looking for a certain module i know i'm i'm going to add add to cart right there i just type and it's right there so so don't worry about that um anyway i that was the first thing i noticed now the other thing i noticed was everything kind of has like a like a word at the beginning now so like product car or checkout so there's new cart and checkout modules before they were all mostly on the product page so it kind of makes sense that you know now we would say woo product title or woo cart details or you know what i mean something you're saying like woo and then where it belongs like a designation and then the module so a couple of them don't follow that so anyway most of them do so that's another thing so you'll notice a list of name changes so like the shop module just just throw this out there this is going to be tricky the shop module is now just woo products you know we're so used to calling it the shop module so if i say shop there's nothing right nothing comes up but if i say products wow there's a lot of products but if i just say yeah woo products there's cart products related products but just woo products and that's going to appear as like well it's the shop module it is woo breadcrumbs is the same woo title is now with product title right wheel images will product images kind of makes sense um and on down through with all the things on the product page uh let's see yeah we'll upsell we product upsell woo cart notice is now woo notice and you'll you'll see why now as far as the actual new modules there's eight of them and they're all related to the cart and checkout i'm a little disappointed i was hoping to get some like you know for the account page um but apparently they yeah apparently not um maybe in the in the future i don't know anyway there's there was 17 modules related to woocommerce in prior versions and now there's 25 total so 25 woocommerce related modules is is quite a lot uh we're gonna we're gonna we're gonna look at them one thing i noticed is is this product offset number so there was some some features that were like kind of snuck in there right here it is so again this was like the shop module they added the product offset number now you may be familiar with this in the blog like let's say for example i wanted to highlight one post and have it like a horizontal layout and then three more or something you could use the offset number and put it as one and you'd skip that first one in your second module i know that's confusing anyway for our divi carousel maker plugin so when we released this we wanted to be you can put any modules into this we wanted it to work with woocommerce obviously to show a carousel of products so let me show you that here's here's a couple demos so like each one of these products is actually a separate shop module or products module now and we did this using the offset feature so we have quantity of one and then offset so each so the first one is zero offset then one offset then two offset and it allows you to use individual modules right i'm not sure why they added it um but i'm i'm just gonna take credit for it that they added it because of we did um yeah maybe that's crazy but um i can't really think of a good use case other than our plugin to be honest um yeah anyway um let's see so there's different modules we're going to talk about that one later and let's get right into the new modules let's get to it so basically um the product page not a whole lot changed i looked through all the modules i did not really necessarily see anything major that changed um i there i think there were some things here and there so let me know in the comments i'm probably missing it i did not go through every setting absolutely not i just looked through like the obvious stuff now let's get to the cart and check out pages so let's say i'm looking at this product and i add to cart all right so then you know we get this notice which again this was the woo cart notice now it's just woo notice but if i say view cart now we're on the cart page and it's lovely isn't it no i'm just kidding it's terrible so this is how it looks this is how it's always looked and when you would go up here and enable the visual builder what would happen is then you'd have one shortcode that would display it was the woocommerce cart shortcode okay that was prior to 414. now let's look what happens when i enable the divi builder on the cart page let's take a look now just look at what's here just look at what's here so you have the cart and you have like this table and like the totals and the sidebar so and this is kind of what would happen on product pages it converts everything to modules so now where it says cart well now well now that's a post title module makes sense this notice is showing like some preview things of some various notices now it's the wu notice module but the page type is set to the cart page now if back on the product page when it said hey your product is added to cart and then click clicked view to cart it was set to product page same module so it's in a sense we're gaining yeah almost like any new modules but um and then it'll be on checkout page for the checkout so anyway that one's there the next one is a new one also um a new one it's called the cart products now this has a lot of settings see how we can have like the the button there we could we could uh turn off things turn off the update cart button right there product featured image see i don't know why you wouldn't do that but anyway the layout we can choose horizontal or vertical oh interesting did not see that before okay that could be nice huh and then there's just all kind of design settings um remove icon yeah like when you hover over the icon here watch this see it puts that orange see what i'm doing there oh there's just lots of design setting let's keep moving this is a new one brand new one cross styles whoop cross cells so again in that shortcut that used to be there if you had any products linked as a cross sell in woocommerce settings they would appear here so now you'll have to you know remember to put them here but now you can up you know edit this it's it's very very similar to the shop module the products module it's almost the same thing it just doesn't have the options to choose products obviously because they're just cross-sell they're cross-sell to whatever's in the cart the next one here is just cart totals and again we have lots of design settings here i'll put it on the side i don't like it on the side but for showing you might be better like uh column labels body text see how it highlights i'm pointing to my screen uh table row yeah let's just see that uh table cells wow so that's kind of the same you can you can design anything you want now button so yeah like if i wanted to you know like style the add to cartwheel and all that so everything that you're seeing on the page can be adjusted all right let's get out of here all right we're going to save those changes because yeah that's exactly what we want um let's proceed to check out all right and here is the wonderful checkout page it's beautiful it's highly converting i'm kidding obviously now yeah i don't even know why they have the sidebar here but again in in prior versions you enable the builder one shortcode would get added when you enable the builder now let's take a look so we have the post total module again here we have a whole bunch of notices and just not to freak you out but like it's just showing you possible things like returning customer well then there's things and have a coupon here coupon does not exist they're not all gonna show it's just a lot of these things on this page in particular they're going to show depending on things um on various conditions so like again like if you're if you're not logged in it's going to show this login let me just show you real quick like some of this stuff has like these input fields um the background color i could the the placeholder color uh the focus background color when you click the type right you know i could change that anything here the margins paddings border radius of these fields buttons any buttons even this little thing here the field um i saw i forget what that oh and even like these asterisks that's this one here the asterisk that's great yeah here's the actual labels anyway you get the idea everything can be adjusted now let's move on um the next module is the for the details when you're filling out your billing information this one's billing and this one's shipping there are a couple interesting settings like layout now i can choose full width notice how there's pointing to the screen again first and last name i could say all full width or all two columns all right or default words like certain ones are full width certain ones are not but just look at these settings i i do have to say something as much as i was like not not like crazy excited about carton checkout modules they've done a great job of adding settings i looked through there i spent some time and went through these settings and i can't do that or this video would be forever long but i was i was impressed i had to admit that yes even though it's like not a glamorous part of your website design like you know what i mean now it can be why not have think about conversion and and yeah um but i was just impressed that the team really did think through things um just for example like down here in this there's more modules here the checkout details again you can you can mess around with everything here play around with it the idea is that there's just a setting for everything and that's great but like payment details i know on our site like if i choose stripe or paypal there's like this even like a little they call it a tool tip like there so there's even settings for that like where it l tells you a little thing about paypal or a little thing about stripe or like the radio buttons like if you're selecting one or the other so that's that's really great um they've they've thought of all these conditions and they're not showing here because i don't this is just a blank site if i had some of those other you know payment options and stuff added on um but yeah go ahead and just browse through and see if you come to that same conclusion as me where it's like they've done a good job of thinking through settings you know i do this for a living with my own products i sit and think through what settings are needed so i can kind of say you know as someone who does this for a living you might say that that they've done a good job now over here on their blog post they have some examples in fact you can actually view their demos here so you look at look at what you can do really nice and of course yeah obviously don't forget you can you can combine other modules now you know obviously but um yeah that's the nice cart page they kind of put these like blurbs down here yeah now this is a little gimmicky it almost makes it look like there's multi-step checkout but it's not really this is just happens to be the design on this page and if you were to go to the checkout page which is linked they're just changing the icon and stuff but still not sure about that yeah that it that's it that's all i found um i mean it's great it's a yeah it's a great update um yeah let me know what we missed i kind of have a sneak peek here at the bottom uh i was expecting more i guess i was exp because i was expecting more things like um you know add the product or view product buttons or short description on the on the shop module product module stuff like that i don't know i guess i was expecting like improvements to the existing modules as well but which leads me into i have at least a dozen maybe 15 or so woocommerce related tutorials coming up right here on the blog i'm not sure when i'm going to start them i have them all ready to go i'm thinking probably pretty soon december or january for sure for definitely um but uh uh keep watching for those i'm gonna i have a lot that are gonna be pretty good related to divi and woocommerce so while we're on that topic let me know in the comments which tutorials you want to see all right great so i'm going to stop that's my take on the new update hopefully it was at least helpful if you're not playing around with it you can watch the video if again if i missed something i'm sure i missed something i did not look over it um i'll update the post uh let me know in the comments i'll update the post so yeah you know overall what are my thoughts it's i've said it but like i guess i was expecting more but at the same time it's also really well done what they did do so um and hey it's the season of thanksgiving let's be thankful for what we get right um yeah thankful for the fact that devi cares about woocommerce i know so many of us use woocommerce all the time for for products uh for clients and stuff so let's just be thankful for that that they really do care and the fact that we can add these other modules so easily now into the cart and checkout pages and let's let's ask them for uh some some account modules or an account module or something right like don't we need something there uh yeah i'm pretty sure so anyway every tuesday we do a tutorial this one's a little different more of an overview sometimes when elegant themes releases an update i do an overview like this so otherwise uh we're having tutorials every tuesday right here so if you're subscribed that's what you'll get alright we'll see you all in our next video [Music] you

Channel: Pee-Aye Creative

Views: 1,368

Keywords:

Id: bUv_hbgqGN0

Length: 18min 4sec (1084 seconds)

Published: Tue Nov 23 2021