Customize Ugly WooCommerce My Account Dashboard To Look Like Amazon

one of the most boring ugliest parts of woocommerce is that my accounts dashboard that you give to your customers i'm talking about this one right here it's not really that inspiring or modern or anything like that so the other day i was doing some shopping on amazon and i thought wouldn't it be nice to have it look a little bit more like this this is what everybody's used to anyway so i spent a little bit of time and i came up with this design and what's nice about this is you can actually design it however you want to design it you're going to learn that in this video and if you wanted this design if you stay to the end of the video i'll tell you how you can get a copy of this design you literally just copy and paste it right on over to your website and also a very important part of this tutorial is what is it going to look like when someone goes to the dashboard page and they're not logged in this right here is what they're going to see and you can also customize some things right here on this page as well i'm going to make this so simple for you to get done on your website after all this is the wordpress channel for non-techies we try to make this stuff super easy so if you're ready to learn how to customize your woocommerce dashboard page this is the video for you the first step is to design your new my account dashboard now you're going to be able to use any builder tool for this i'm using the wordpress block builder because it's going to produce a faster page it's very simple to pull off and i'm also using the free cadence blocks add-on package that doesn't cost anything and i'm using it because it has some visibility settings we're going to need in step three and it also has it so it's really easy to add a little tiny snippet of code in there that we're gonna need in step two however you can use any tool that you want to use here's how you get cadence blocks the tool that i'll be using it's free on your website go to plugins and then hover over where it says add new go ahead and click right there and then on the search box type cadence blocks here it is it's the first result just go ahead click on install and activate and then it's going to add all of these enhancing features to the wordpress block builder so typically when you install woocommerce it's going to automatically create your my account dashboard page and we can see it's right here and you can see off to the right it has this thing here that says my account page basically it's saying this is what you have told woocommerce is that my account page i'll go ahead and click into it you're going to see the design that i created right here but i'm going to remove this and we're going to start from scratch but what you're probably seeing on this page is just this right here short code and this is what tells woocommerce to display the normal stuff that it would display on a my account dashboard so what i'm going to do is go ahead and just delete everything off of this page and start from scratch and this right here is probably what you're seeing on your my account dashboard now one thing you're going to want to do is get out a notepad because we need to copy some links and these links are what we're going to put in those boxes that we saw so we need to have the direct link to the dashboard page the orders page whatever you want in the navigate the new navigation we're designing so you want to copy this link to a clipboard the downloads addresses and my account details and also the log out link you can just right click and then copy this you'll want to have these all in a notepad because we're going to essentially get rid of this navigation here and we're going to put our own in that we custom design okay now i'm going to show you how i designed that my account page that you saw using cadence blocks it's actually very simple to do so first i'm going to just get rid of this and start with a blank page i'll click on the plus here on the top left and i want to put a row in and for this row i'm going to select three columns and i have to just click it again and now i've got three columns here so in each one of these columns i'm going to put something in it called an info box or an icon box let's see what does it call it i n f o there it is it is the info box and when i put that in over here on the right it has a couple pre-designed layouts and you can see this is the one that i use where there's an icon or you could use an image off to the left so i'll go ahead and click on it and there you can see it's already starting to take shape we just need to customize some of the style of this to make it look how we want so we have all of these styling options here on the right so first let me change some of the text so all you have to do is click here and i'm going to type dashboard and then here i'm going to change this text as well i just put some silly text in there this is your account home now over here on the right you first thing we see is the link and this is going to be the links that i just told you a moment ago to save to your clipboard because we want it when someone's visually seeing this design we want them to click on this and have it go to a specific place on your website that's why we save those links and this right here is where you're going to enter that link in so i have that link in side of my clipboard right now i'll go ahead and i'll paste it in right there and then i will click there and now whenever someone sees this and clicks anywhere on this box it's going to take them to this link right here which is the home for the my account page now we're going to go through some of these settings to just customize the style a little bit so for the container settings i don't like that thick border so right here i'm going to maybe reduce that to one or two pixels that's fine for me and then the border radius that's how round this is i think i'm going to go down from a 20 down to a 15 i think i just like that design style a little bit better okay and then you can control the colors this would be the background and this border color and you can also have something different when you hover over it or when the user is hovering over it it's up to you what you want to have in there then we have the container padding that's the spacing between all of the content inside here it's set to 24. i think i'm going to go down to a 20. it's all just making it how you want okay and then i'm going to click right here it says media settings and so this is where we're going to decide what is right here the icon or if you see right here it says media type you can put an image number whatever whatever you want or have nothing if that's what you want so i could just go right here and there's a bunch of icons here they're actually quite nice and we can increase the thickness we can change the colors of them so we have all these options right here and all you have to do is find one that you like and then you can click on it so uh i'll just choose this little home right there that seems fine to me and down here we can change the icon size at 60 it's kind of big i think i'll go down to like maybe 30 like that make it a little bit smaller and more condensed and then here's the thickness of the lines in the icon so you can see it's getting thicker right there so let's go back down it was set to two i think two works for me and then the icon border it's this circle right here so you can see it's set to five but i can make it less thick just like that so basically we're just styling and making this how we want to to look and that's all we're doing here and then we can control the colors right here all that we want now for the title settings i'm going to decrease the size of the title there i don't think i want it as large it is it is i think i'll go like 18 something a lot more compact like that okay and then down here is the text settings and for that as well i think i'm going to go with something like 15 something like that now the space between these two if i scroll up this is where the title options were and i change the title size but there's this bottom margin underneath the title i'm going to change that to a 5 and it just kind of tighten it up a little bit more just like that so there's additional options here but those are the only options that i think is what i wanted and it's looking fine for me so next what you want to do is duplicate this so i can go right here and i can click on duplicate and then i can click right here i can go on duplicate and then i can just drag and drop it into these other columns right here and then start customizing them now um what you can also do i think i had six so let's go and duplicate it so we can just kind of see what this is going to look like right there duplicate so you're basically going to want to go to each one and change out the text and the icon and you're also going to want to make sure you change out the link to where that's going to go now i want to show you a really quick tip if you change your mind on how you want something to look so for example i've already duplicated it six times but i'm like you know what i want to maybe change the border color so instead of manually changing that or maybe you want to change the size of a font instead of manually changing that you can change it to just one so let me go ahead and do that so that's my container settings and the container border i'll just do something very obvious like this blue that's not how i would want it but anyways let's just say so then you can click on it and there's this icon here that says copy paste style so i can click here copy styles and i can go here and then i can paste the styles and i can paste the styles just like that and it makes it really easy to copy and paste your styles across to these as you're making different design changes now the next thing i want to do is add that woocommerce short code in that i showed in the beginning so the first thing i want to do is put in another row just like this and i'll choose this and then i want to put that shortcode in so i'm going to click on plus and here it is the options for shortcode but you can just type it in as well short just like that and then paste that in the reason i wanted to put it inside of a row is because this is going to give me some styling controls so by default it's going to take the full width but i want it to be a little bit more narrow so let's go ahead and go into that row container and adjust it some if i click on the three lines right here it's going to show me basically a navigation list view of everything that's making up this page i want to click right here to the row layout and then over here on the right it says the structure settings i'm going to scroll down and so it says right here the custom content max width i'm going to go to 800 just like that let me get rid of this navigator and so it's just not going to take up the same full width let's go ahead and click on update and then click on view page there's going to be some styling tweaks that i'm obviously going to want to make but it's already starting to take shape let's go back okay so the next thing we want to do is to hide the normal woocommerce navigation we just saw that let me go back i shouldn't actually here let me go forward and i'll show you this is that normal woocommerce navigation we're going to go ahead and get rid of that it's super easy and this is going to be adding a tiny snippet of custom css i'll have a link to my website and it'll take you to this page and here it is you just literally need to highlight and put it into your clipboard and then on your website you'll want to put that where you like to put custom css now i'm using cadence blocks and they make it really easy so i want to put this custom css right here inside of this container so i'm going to click on the three dashes to show me this list view i'm going to click right here where it says row layout and then if i look over here on the right there's an option here that says custom css and then here it is so i'm going to paste in that custom css just like that and then i'm going to click on update so now when i click on view page you can see i got rid of the normal default woocommerce navigation there now the next thing we need to do is we need to make it so this part right here is not viewable when someone is not logged into the website so if i go here and watch i'm going to pull this up in an incognito window this is what it looks like when someone's not logged in you don't want them to see this navigation that we've designed you only want them to see this form right here so i'm going to tell you how to get to that and this is actually step three in this process it's super easy so what i need to do is let's go back to that list view and i'm going to click right here where it says row layout that's the container that all of this stuff that we created and designed is stored in and when i scroll all the way down on the options right here there's one that says visibility settings and right here is some options to have something just not show if someone's not logged into your website so it says hide from logged out users so if i toggle this on and then i click on update this entire container all of this is not going to be visible unless someone's logged into your website and this is one of the reasons i went with the free cadence blocks to build out this whole solution is because it makes it easy for the custom css and it also gives us these visibility settings so now when i go to view the page you're gonna see it let me actually go in that incognito window so that you can see what it looks like and here it is you can see that that whole navigation that was there it's only viewable now if someone is logged into your website so this is entirely up to your own interpretation your own design of how you want this to look i wanted to go with this real clean layout and i'm going to show you how you can get this as easy as copying and pasting it across now you can build this and design this in any tool that you want the only thing is the tool must have an option for that visibility setting to show it or not to show it when someone's not logged in so your login page looks nice and clean and you can tweak the responsiveness everything out exactly to make this look exactly how you want it to look so if you're using elementor there's many free elementor add-ons that include this visibility option if you're just using the free elementor i'm sure you're already using an add-on pack and just check to make sure that add-on pack adds this option for visibility so now let me show you how you can get this everything i did for free and it'll just be like a copy and paste across and everything that i designed will be on your website within a matter of just a minute or two let me show you how to get that so if you're on my website already to get this little snippet of css code just scroll down a little bit and it says here you can get a copy of the page design so just click on this button here that says download and i might deliver this differently but for now it's just going to give you the bit of code i might make it copy and pasteable directly on my website so you just want to highlight this whole bit and then put it into your clipboard and this is one of the coolest things of using the wordpress block builder so let's go back here and you can see the design that i made in this video i'm just going to delete the whole thing out i'll click right here and just control v to paste and did you notice that the entire design is there oops i think i got this messed up mixed up there we go and there is the entire design all you have to do is copy and paste it across and then click on update and you have it right there on the front end of your website that exact design that i created the only thing you have to make sure you do is change the links because these links when someone clicks on these boxes they're gonna go to the url that i put in so when i click on this box you can you gotta change this link and the same thing for your orders you gotta change the link all you have to do is change the links it'll just take you a minute now if you could do a favor for me i need you to hit that thumbs up button right now so youtube will show this video to more people who can benefit from it and i'll only just take you a second so if you could just go ahead and click that for me if you have any questions about this you can ask me down below and i'll do my best to respond to you and if you want more tutorials like this for non-techies just go ahead and hit the subscribe button thank you for watching this video and i'll see you in the next one

Channel: WPCrafter.com WordPress For Non-Techies

Views: 11,602

Keywords:

Id: gS3xSFBEw5w

Length: 17min 45sec (1065 seconds)

Published: Wed Aug 25 2021