Customize WooCommerce My Account Page | Elementor & JetWooBuilder

so let's just take jet move builder from croco block and use that to create a custom woocommerce account dashboard we're going to go from this [Music] to this design ready to get started awesome let's go so we'll be using general builder as the key component to create our custom my account section for our site once you've gone ahead download it and install that and we're then ready to go to get things started we simply need to come down to croco block which should be inserted into our dashboard and we're going to come into the wool page builder inside there we can now create our first template and this template is going to be the holding point for all of our dashboards so we're going to do is create add new we can choose then what's the template for we're going to choose the option for my account and we're going to give this a name we're going to call this croco my account okay so we'll create that template that will create a template and open up elementor for us and we can start working now this is elementor free you don't need the pro version to start working with this you can just use elementor free now with jetblue builder installed inside elementor we have a new section now on the left hand side called jetblue builder as you can see there are quite a few different options not all of these are applicable to working with my account as you can see we have things like categories grid products grid and so on however anything with my account proceeding it we can use that as part of the my account setup we have two areas inside my account the account section where you'll see things like your addresses your orders and those kinds of things and we can also if you want to create a dedicated page that can be used for new users to register or for anybody that already has an account to log in and we'll take a look at that in a little bit okay so let's just start building out our my account section first of all let's just drop a heading in at the top and we're going to just name this welcome to my account and now we can do underneath it we can just do a search for my account and we can just drop any of these relevant pieces of information in so we can say things like my account dashboard and this will give us the normal kind of welcome that you have with links and everything so you're probably used to seeing this as part of woocommerce's my account dashboard and now we can if we want to we can just configure this any way we want so we can start styling things we can adjust for some padding inside there we can say we want to put the margin of 50 pixels above and below so you can start to get things set up the way you want to fit in with the styling of your my account and your website but you can also see this is picking up some of the styling which is great to see but if you want to style any of these elements you can do that completely you can see we have a full complement of various different options for the typography colors and so on so if you want to customize this in a slightly different way you can do that next on the agenda we're going to want to put something like our orders inside you so let's come back to our widgets we'll do a search for my account and we're going to grab the my orders drop that inside there and then any orders that we have as part of this particular account will be displayed and as you can see this again picks up all the styling but we have full control over every aspect of this you can see if we look on the left hand side we can control things like the headings the cells the buttons navigation and so on so we can say let's just hop over to the button and you can see if we wanted to we could adjust that inside there so you can change your background colors your hover colors everything that you need to control all of this you can adjust the cells which is basically each one of these cells that we have the order number the date status and so on so you can control those you want to color code those do whatever you want with it so full control over all of the styling aspects inside here next on the agenda we need to do things like control the registered address the delivery address those kinds of things and we can do that again inside you we can just drag over my account addresses drop that where we want you see that pulls in the relevant information we want to drop another heading inside here we can drop that in so we can have some kind of separation and we'll just put in there my registered addresses there we go so we now have i think it makes a little bit more sense to what's going on and as you can see you can build this up and you can style this and you can do whatever you want with it so once you finish that side of things how do we actually go about using this well we say we're happy with this for now and we will come back in a moment don't worry and make this a lot more sort of in keeping with what we would want we'll publish this once we've done that we now just have to head out of elementor and we're going to go into woocommerce and into the settings section now when you install jetblue builder you have a new tab entry called jet rule builder underneath the settings if we open that up this is where we can come in and we can override any of the predefined templates that make up part of woocommerce or if you want to make other changes we might want to change a template later on down the line we can do all that inside here as you can see this gives us control over all of the key pages that make up woocommerce we're interested in this example though if we're going to come right the way down to the my account page section we're going to enable the custom my account page and then we have two entries the my account template and the my account login page template we've already gone ahead and created the template for my account so let's just expand that you can see there's croco my account we just created so we'll activate that and we'll save this then we'll come back take a look at this account login section in a moment let's just scroll down save our changes on there hop over to the front end of the site and take a look now at our new custom layout for my account so this is my account page and as you can see this is the normal way you'd expect to see it as part of woocommerce if i refresh this page we'll now have our customized version of this so you can see there's all our layout all the styling everything inside there is all laid out there's a couple of things we want to deal with and we'll take a look at those a little later on by removing things like my account and so on but you can see it's very easy to start adding these layouts in here really simple so let's take a look now at how we do the login and the registration page and then we'll come back and take a look at how we can make this page just a little bit more useful so come back into the woo page builder and into a croco block section the dashboard and we're ready to create a new template just like we did before we'll hit add a new template we're going to change this again to my account and we're going to call this croco my account login once you hit the create button we're now into elementor and we're ready to start building so we're going to do is we're going to create a simple two column layout going to make a bit of space around this like we've done before we just add some margins above and below and now if we come back into our widgets search for my account now we can deal with the account login and also the registration form so we're going to grab the my account login form drop that into the left hand section and you see that styles have a login form and again we have a full complement of controls to control every aspect of this but we're gonna leave it set as it is that's perfectly fine i think you can probably figure your way around making some changes to the look and feel of this without my intervention and we'll do the my account registration on the right hand side and again you can see this now gives us the register option the only thing i'm going to do is just select this entire section and just put a little bit more space around it there we go that looks a little better hit publish on there and that's our template created so now we just need to head back into woocommerce back to the settings section and into jetblue builder now if we scroll right the way down to my account section we can set up the my account login page so all we need to do like we did before is just choose the relevant template use that option and hit save changes we've now created our registration and login page so let's take a look at that i've opened up an incognito window where i'm not logged in and we're back onto the homepage of the site so now if i click on my account you see this now takes us into the login or register section and again all styled up looking pretty sweet so it's really easy to use jet will builder to create not only your my account dashboard but also the login and registration pages now that all looks pretty cool but if you want to make things more functional and smoother we do still have just a little bit of work left to do with that in mind let's see how we can use another of croco blocks plugins to give us the ability to work with tabs and switches we're going to be taking a look at jet tabs now you don't need to do this section you could just as easily spend a little time building things with the tools i've just demonstrated and just a little bit of creativity but if you want an easy way to organize your my account dashboard this is a great option to check out if you want to follow along with this just make sure you've downloaded and installed jet tabs i've already done that and we're ready to go so we need to do is hop over into the dashboard this is the login page in the registration page we just created in the first section we're going to use that right now because we've already seen how to set this up so with that in mind there's a couple of things we need to do there's a little bit of a work around it to get this to work the jet move builder my account widgets only work inside the jet will builder templating system and we're not going to be using that to create the tabs and so on so how do we get about going around that very easy all we need to do is make sure we have this window open where we've already dropped in the login and registration and we'll replace those a little later so we're going to do first of all is just copy this so select it copy it and now we can paste that into a separate location so we'll head back out and we'll go into the elementor templates go into saved templates and inside there we're going to create a new template we're going to set this to be a page and we're going to call this my account login create our template and then we just need to paste that widget contents inside here so we'll right click choose paste and there's our login now don't worry about the look of this the format has kind of gone all the part that will be ignored and it'll go into the way that we wanted to display correctly when we use it inside the actual template we're going to create next so we'll publish this and that's that first one done we just hop back out of here and we're going to create a second template so again save templates add new choose the option for page and this time we're going to call this my account registration i'm going to repeat the exact same process so we'll create that page we'll hop back over here we'll copy the register hop back over in and paste this inside here so hopefully you can see what i'm doing here i'm just literally switching between the two different locations and we're creating the template that we're going to use inside for this example the switcher let's publish this and that's our two templates created let's go back to our dashboard and once we're inside the dashboard we're going to come back into croco block and come back down into the wool page builder we're going to open up our template that we previously created which is the login we'll edit that with elementor and we're literally just going to delete everything off that page we no longer need these entries so we'll delete that and now we're going to use one of the jet tabs options so we're going to do a search for switcher and this is part of jet tabs so we're going to drag and drop that into our page make a little bit of room like we've done before so we'll just add a little bit of breathing space above and below and you can see this puts the switcher for the disable and enable so in other words the switch is the two switches we have on there so now let's just select that and you can see we've got items we can choose between templates and the editor itself now we don't want to use the editor we want to reference one of the templates we just created so now if we come down into the template section underneath and the first one is going to be for our login so we'll do a search for login and there's the my account login page once you set that you can see that now pulls that directly inside there and as i said it keeps the format in that we wanted enabled we can edit the template directly from here if we want to which is a nice quick way to round trip but that's the first one then let's hop over now to the enabled option and we can come to enable and again we can do is we can choose template and we're just going to do a search for registration and there we go there's our second template so now we have our register and our login templates being used so now what we need to do is style this to make sure that everything is laid out the way we want so disable and enable makes no sense so the disable is going to simply be renamed to login wrong way around that's going to be register go to disable and we'll set that to login that now makes a lot more sense so we'll update this and now we've created our login and registration page using the switcher model let's go back over now into our incognito window and this was the page that we had set up originally let's refresh that and we now have our switcher between the login and the register already looks a lot more slick so now we can take the same kind of principle and apply that to the actual my account dashboard so the principle now is pretty much exactly the same for the rest of the actual my account so we're gonna do is open up the my account that we created earlier with all the different widgets inside there edit that with elementor we're gonna use this then to copy and paste the various different components over into the relevant templates so first of all let's just grab this top section which is our kind of welcome our dashboard so we'll copy that from there hop back over into the dashboard i'm going to come back into the template section and from the save templates add new and we're just gonna again call this page we're gonna call this my account welcome create our template and then we just simply paste that inside there we're done we'll just publish that so i'm just going to quickly repeat that process for all of the different widgets creating a template each time there's a page template then we'll take a look at how we can set this up with the tabs okay so in the elementor template section you can see i've now got pages for registration login welcome and everything else that we need so those are the templates created we can now just hop back over into the options for dealing with crocker block itself and we can delete everything that's inside here so let's just remove this entire section so we're starting with a blank slate now we can just do a search for jet tabs and there's our tab section we're going to drag and drop that inside there and again we're just going to give this a bit of breathing room and now we can just go through like we just saw and style these but also just drop in the relevant section so if we come into the layout and we'll just make sure that we've got the tabs selected you can see we have tab entries inside you we can now choose whatever template that we want so we start off with for example we've got details well welcome let's just do a search inside there for welcome there we go so we'll drop that in and there's our welcome section so that's pretty cool we can leave that there if we want to now we can just close this up a second we can come into the next one so we can just come in template is perfectly fine we'll do a search for orders there we go there's our orders so we call it the tab two there's a list of all our orders and i can just repeat that process so i'm gonna quickly do that and then we'll take a look at how we can configure all of this to look cool there we go there's all our tabs inside there we've got a welcome message sitting outside our tabs and now we have our template set up looking pretty cool so now we just need to refine this a little so tab one doesn't make any sense whatsoever so let's just change that from tab one i'm gonna call this my orders already looks to make more sense the next section then is going to be where we've got the addresses so we can just change this to address book and the final one we're just going to call this my details so now we can switch between them and you can see everything looks a lot slicker we can also just con configure this and set this up the way we want so the one with the tabs are sitting at the top but you might want to sort of put those on the left hand side you can do that and now you can switch between those you can see pretty cool we've got the various different things so you can have these two change on hover which personally i would find would drive me absolutely at the wall you can change the way the show effect is you can do a fade for example however you want to sort of set that up and you can see you've got auto switch no active tabs use it ajax loading for templates up to you how you want to set those up and then we can jump over to the styling tab so we can control that inside there so let's put these back to be across the top looks a little bit slicker across the top there and then we can do is we can just come in and fine-tune the control of this so all your padding your margins all those kinds of things are available so you can come in and we'll say we want to set the alignment you want to set the container alignment you can see that's pretty cool we can stretch those out if we want to now we have those set to be right across the top stretched out tab control items you can just set all the different styling up inside here so i'm quickly going to go ahead and just apply some style into these just to make them look just a little bit cooler and then we'll take a look at this on the front end there we go just taking a little bit of time to sort out the styling add some different icons in some hover effects and so on add a bit of space in and you can see very quickly using jet tabs we can quite easily create something that looks absolutely awesome and in keeping let's just hop over now and take a look at this on our site so this is where we started if you remember let's just refresh this and now this is where we've ended up you can see we can switch between each of the different sections and everything just looks way way better way cooler now you've seen how to customize your woocommerce account dashboard take your creative skills further by watching this video next and if you enjoyed this video why not hit the subscribe button to be notified when i release more content like this in the future my name is paul c this is wp test and until next time take care

Channel: WPTuts

Views: 15,240

Keywords: customize woocommerce my account page elementor, customize woocommerce my account page, customize woocommerce my account, woocommerce my account page customize, my account page, woocommerce my account menu, customize my account page woocommerce plugin, my account, elementor design, woocommerce tutorial

Id: -yPTy9uyryQ

Length: 16min 56sec (1016 seconds)

Published: Wed May 19 2021