How To Customize WooCommerce My Account Page With Any WordPress Page Builder

in this video i'm going to show you how to take your boring uninspired woocommerce my account page which probably looks something like this boring right there's not much to it and with just a few minutes of your time and effort you're going to be able to make it look like this well this is actually what i made mine look like you're going to be able to make yours look like however you want to make it look because i'm going to show you how to unlock the my account page and you can use your page building tool whichever one that it is in order to create whatever you're inspired to create obviously this is what i was inspired to create uh it's kind of basic so don't judge it based on my design skills i'm going to show you how to do it all in this video and check this out these buttons actually do stuff i can click right here and see my recent orders and then your customers can click on view to see the order details and it retains this beautiful aesthetic and here's downloads i don't offer downloads but if i did i could have them right here here's contact info you're going to be able to do whatever the heck you want to do here i'm going to show you how i'm going to unlock this for you it's going to be super easy you're going to be surprised hi my name is adam from wpcrafter.com where i make wordpress tutorials like this for non-techies if you're new here consider clicking on that subscribe button click on the notification bell if you want to be alerted when i upload these types of videos and this is actually the third video in a series the first one i showed you how to completely customize the checkout page of your store then i showed you how in the second video how to completely customize the thank you page of your store and this time we're digging deeper we're going into that my account page right here now when i show you how easy this is to do you're going to say wow i should have thought of that now for me i'm going to be using the free elementor page builder but you could use any page builder that you have so i'm just going to show you some little snippets of code to add and then we're going to get to designing so at that point you can use your page building tool so this is where we're gonna get to but this is where we're going to start so first let's log into our wordpress site and here we are so we're gonna need to find out just a little tiny bit of information and they're called end points so what an endpoint is is when your customer clicks on dashboard or orders or downloads those are called end points it's super easy and you can actually customize those if you didn't already know so i'm going to go ahead and click on woocommerce choose settings it's going to be underneath the advanced tab and i'll scroll down and it says right here account endpoints so what this means is for this page here's the url it's my domain name slash my account but if i want someone to see the orders check it out it's going to change the url and add that orders to the end so it's my account but when i click on orders you're going to see now it says order so we just need to be aware of those end points when it comes time to start building links to where we want them to go okay so what we're going to do we're going to leave this endpoint page up i'm going to go here i'm going to click on edit page and i'm already on my woocommerce my account page so i'm using the astra theme and i want to set it up for page builders so i need to scroll down and there's some some options right here everything's a little different so you're going to just want to set it up for a page builder and that means full width get rid of the title all that kind of stuff so sidebar i'll choose no sidebar content layout full width stretched and i'm going to disable the title and then i'm going to click on update okay the next thing i'm going to do is click on edit with elementor and so now i'm going to be in the elementor editor now what we're going to need to do is take this little woocommerce shortcode this right here tells woocommerce to display all this information we're going to put that into our clipboard and i'm going to go ahead and just delete that whole bit there and next what i'm going to do is a search for short code right here and we're going to use the short code module and then i'm going to go ahead and paste the short code in there that's a better way of having this and i'll click on apply and you can see it's showing us all that kind of information now on this site i don't have elementor pro normally i do and what we need to do is take these two little lines of custom css and we need to add them to this page now if you're using elementor pro you would click right here on the module click on advanced and where it says custom css you'd be able to copy and paste these entries here but i wanted to do this intentionally for people that do not have elementor pro so what i'm going to do is i'm going to click on update i'm going to click on the hamburger icon click on exit to dashboard and then i'm going to click where it says my account and then i'm going to view the page now i'm just viewing the page again and you can see we have this edit with elementor option so where i'm going to add this custom css is in the customizer but like i said if i had elementor pro i would just add it inside of that interface so i'm going to click on customize and it's going to jump us inside of the customizer now this little bit of css is going to hide the navigation and you're going to see that in a moment and then this little bit right here is going to make the area right here take up the full width it's super easy so i'm going to go ahead and copy these into my clipboard and oops i'm going to go right here to additional css and i'm going to paste those in and you can see it got rid of the navigation which i wanted to get rid of and it made this bit of content take up the full width like i said if you're using elementor pro you just put it in there so i'm going to click on publish and now i'm going to get out of here and now i'm going to click on edit with elementor and we can start doing some really cool things okay so i'm going to click here click on apply and now you can see it's just that dynamic bit of information and so now it's time to start designing this and putting our links in so i first need a big kind of header hero thing that i want to do now on this website i have lots of different pages and they all have this same consistent header image right here where we have the page title and then a little bit of information and i want to keep it consistent so it's a really cool feature in elementor watch this i'm going to click on edit with elementor on this page and we're going to copy and paste that whole section from this page to the page i'm working on i love this feature so you can actually right click right there and do a copy and i already have elementor open up here i'm going to right click and i'm going to choose paste right here and then look it just copied and paste the whole thing in so i can just drag and drop this up and now i have that beautiful hero image where i can just go right here and start changing some of the text not feeling super inspired i said my account and welcome to your account page now if you noticed the example i gave you right here i'm using elementor pro and they have some personalization options so i was able to show the user's first name which is really cool all right so i have that there and that's looking good so now what i need to do start building out my menu that's going to be easy so right here i'll click on plus i will click on plus and i will add four different columns you can see my columns right there but it's a little wide for me i like to control the width and have it be a little bit more narrow so i'm going to go into the section settings right here and then there's an option for the content with i'll make this probably 850 pixels wide so you can see it's now a little bit more narrow which is exactly what i wanted so i'm gonna go and click on the dial pad and i will search for the icon box right here now it's probably going to prompt me to upgrade to the new icon library this is an elementor thing let me just go ahead and do that really quick on this site this was with elementor version 2.6 i have to click on upgrade and click on continue it should kick me right back in there and i'm upgraded it's a one-time thing anyways all right let me go here and click on apply now let's build out that menu system so i'm going to do that search again for icon there it is icon box and i'm going to drop that icon box right here and that's not looking how i quite want it but that's okay so right here i'm going to say orders or recent orders there it is and i'm going to get rid of this text you can do whatever you want design wise i'm just showing you guys how i did it so i did that i'll click on style and for the spacing you can adjust the spacing here i think i tightened it up there a bit and then i expanded where it says content and i i lowered out the spacing there so now it's kind of nice and tight that looks fine i probably want to change the color of the icon to something that might match this blue something a little deeper there we go that's fine uh that looks good and then what i'm going to want to do is style it a bit more but what i'll do is i'll style the column so i'll click right here to get into the column settings and for the style i'll click there and for the background type i'm going to choose white and then you're not going to see that but then i'm going to go down here to border and i'm going to put a box shadow in and you can see there it is doesn't look that great so i'm going to click right here for the color and i'm going to dial it down with this transparency dial there we go it's looking a little bit better there i mean you can see when i dial that down this number decreases that's good i like to round out the corner some so for border radius i always like to go with five for some reason so now if i collapse this you can see it's starting to look better it's a little rounded a little bit more friendly okay so i want to do some spacing play around the spacing a bit so i'll click on advanced and for margin i'm going to put 10 that's the space outside so you can see how it kind of sucked it in a little bit but i think i could use a little bit more spacing within the box so that would be padding i will do let's try 20 yeah 20 looks fine i think i'll go with 20 so let's go right here and see yeah that looks fine so we'll do that and then what i do is i'm a little lazy so what i want to do if i want to replicate this in these four right here i just right click and duplicate this four times or three times duplicate duplicate and then i oops duplicate and then i delete these empty ones i'll right click and then i will delete right click delete right click delete and there we have my future navigation i just need to click in each one and change the label and change the icon so what i want to do now is lift this up and then we'll change that and get the links in and test it out so i'm going to click right here for my section settings and the way we lift something up is we add what's called a negative margin so i'm going to click on advanced and here's margin so i'm going to click this this link right here to unlink it and then for the top i think i'm going to do maybe let's try minus 50 so i'm going to put a minus that doesn't look like enough at all so it's probably 60 let's see there's 60 70 70 looks right let's see that looks fine actually might look a little tall but that's okay all right so we have that in there so now let's get our links in so this can be our orders and we can change the dash the icon by clicking on it choosing content and then click right here it says icon library and we can choose another icon so if i did shop here's my shopping cart that's fine and so now we have a shopping cart and then right here we can change this and make it downloads like that downloads this is fine it doesn't really matter what you choose because you're going to want to choose what you want but then i'll change these labels real quick okay so i just took a sec to change these labels so now what we want to do is make it so when someone clicks on one of these it takes them to that piece of information and that is where that end point comes in so for recent orders let me go back into my re my woocommerce setting there it is so i'm going to make the first one go to order so i'm going to want to copy that into my clipboard and then let's go back here i'm going to click right here it says recent orders and there is an option to put a link and there'll be an option to put a link for each one of these so right here i will type my account and let's see it's going to pull it up i unfortunately have to my account pages there we go and it filled it out it's my domain slash my account and then there's a slash and that's where i want to paste in that slash orders just like that and that's perfect so then i want to click on downloads and i want to do the same thing i want to go back here i want to find out what the end point is and that's downloads so i'll put that into my clipboard and i'll go here and type my account like that and click there and paste it in just like that we'll want to do that for the rest of them okay so now this right here i want to style it up a little bit this is this narrow section i want to match the narrowness and add a little bit of padding so i'm going to go into that sections option right here and i could put in 850 but since i it doesn't quite line up actually it does look fine at 850 but it's a little too close to these buttons so i'm going to go back in here and click on advanced and i'm going to add a bit of spacing above and below and that's margin so i'm going to add 70 pixels there that's fine and so now we have a bit of spacing okay we're done actually by the way you just keep adding your links to your endpoints whatever you want you can add links to anything you want so now let's go ahead and get out of elementor and it's actually looking quite nice so let's go here and now i'm looking at the page and here it is i'll fix that transparent header thing in a moment that's specific to the theme but you can see here if i click here it's going to take me to my recent orders which i don't have any recent orders i can click here it's going to take me to my downloads which i don't have so let me go ahead and just jump right back really quick and fix that transparent header and then this tutorial is a wrap so i'm going to scroll down and for the astro theme it says transparent header i'm going to enable it i'm going to click on update and that was easy right now i'm going to click on view page and as they say viola here it is a totally custom my account page for woocommerce that looks way better than it did just what 10 or 15 minutes ago now obviously you'll be able to do this a whole heck of a lot quicker than i am because you're not narrating it for someone so i'm excited about this now there's this little tiny bit of custom css i will have a link in down below to it so if you're watching this on youtube it's in the video description box if you're watching this on my website it's just a copy and paste down below you can add it to your theme and you are off to the races like i was saying earlier if you had elementor pro you could do some additional things uh it's probably worth let me just show you that right now um so here is one of the things i did differently you can see i had added this personalization right here let me show you how that's done really quick i'll go to edit with elementor elementor pro allows you to have uh dynamic content and so what dynamic content is is if i want to say have some dynamic content inside of a heading i'll just drag and drop my heading there and you can see it right here and there's these options that say dynamic now when you click on it it gives you all of these options of info to have be in here dynamically so one of them is underneath site and then right here it says user info so i click on user info and then when i click this again i get to choose what user info do i want to add in here dynamically first name last name email whatever i want i can add it dynamically so i chose a first name and so now it's going to show me my first name but i can click it again oops i can click advanced sorry and add something before like the word hello and after like how are you today and you can also do a fallback if someone didn't put that in so if you're interested in elementor pro i'll have a link down below to that as well or you can visit wpcrafter.com elementor and you can check it out but that's just scratching the surface on what you can actually do with elementor pro it's a really amazing tool the pro version uh makes a lot of things easier makes your website a lot more dynamic but anyways that's not what this video was about it was about showing you how to customize your woocommerce check uh not checkout page or my account page now also link down below to the full tutorial on how to customize your checkout page for free how to customize your thank you page as well and that's a free tutorial and everything i use in it is free guys if you are a woocommerce shop owner this is the channel for you smash the thumbs up button if you found value in this subscribe and click on that notification bell because i'm just gonna feed you useful things like this to make your your uh your web store make more money look more branded look more personal and it's just gonna end up doing a lot better thanks for watching this video if you have a question ask down below i'll see you in the next video

Channel: WPCrafter.com WordPress For Non-Techies

Views: 245,659

Keywords: How To Customize WooCommerce My Account Pag, customize woocommerce checkout page, customize woocommerce checkout page plugin, customize woocommerce checkout page elementor, customize woocommerce checkout page layout, woocommerce “my account” customization plugins, woocommerce my account menu, add new tab in my-account page woocommerce, woocommerce tutorial, wpcrafter, cartflows

Id: IgdP7MnFjnI

Length: 18min 54sec (1134 seconds)

Published: Wed Aug 07 2019