How To Customize Woocommerce Dashboard My Account Pages & More!

let me ask you a quick question do you use WordPress and WooCommerce to build online stores for yourself or for your clients if the answer is yes chances are you've probably come across that frustration of you can customize the way the front-end looks to a large extent but when you've got your you know customers logging into their little dashboard looking through account and all kind of looks very much the same little bit boring little bit old hat well today I'm going to show you two different ways how you can rectify that the first way we're going to dabble with some code we're gonna get stuck in and make some changes might sound daunting but in all honesty this is pretty the quickest and the easiest way to make changes to those simple things like names and text and so on however if you want to create something truly unique the second half of this video we're gonna be taking Elementor Pro and building a completely bespoke custom dashboard for our customers so if you just didn't this join me as I'll take this with an entire process of building those things right now now once you log in this is a typical dashboard you'd expect to see as part of WooCommerce it has all the basic things there in this example if you are using a theme like Astra which is what we are doing you'll see that the icons are missing from the next to the actual different sections however depends upon the theme you use it they may configure this slightly differently over this first part we're kind of gonna get delving in to that code side of things now you might be a bit daunted by this but don't be because I'm gonna give you all the code you need to copy and paste and we're gonna go through how you can change things so you'll have a good understanding of exactly what's going on but what I would always recommend whenever you're gonna mess around with the functions dot PHP file is use a child theme don't use your main theme so you've always got a backup of the original files all in place and any changes you make are only being done to that child theme so if you have to restore things or something goes wrong or you run an update you've almost got the original files already and always take a backup okay so with all those kind of warnings out of the way how do we get stuck in and start configuring and changing into all these cool things we need to do is go into the actual site structure we need to go in and start editing files now I do not recommend going in through the dashboard of WordPress I'll show you how you can do it but I really don't recommend doing it so we come back into the dashboard we're going to do is we're going to come into appearance and we're gonna come into themes I'm going to come down to theme editor at the bottom I'm gonna click to open an app we'll say I understand on this warning message and read this because this is important we're gonna say I understand look at the top right hand side making sure that you're going to be editing the correct theme you can see in this example it's the Astra child theme and we need to come down and choose functions.php that will then bring us into the PHP file section and then we can start making changes once we've made those changes we can hit update and providing everything is working okay we'll be taken back into our site and we can see those changes but like I say the reason I do not recommend doing it this way is because if you make a mistake you could lock yourself out of the dashboard of WordPress then you're gonna have a problem and you're gonna have a gold-digger on for the files to find the file to make the changes to put everything back to where it was so please try to avoid this wherever possible the better way of doing it is to do it through the sort of file manager you can do this through FTP if you have a piece of software like FileZilla you could use that or if you're using something like site ground or using a host with cPanel all those kinds of things you should have a file manager as part of that now I'm using site grounds I'm going to come over to my site ground dashboard on the left hand side are all the subdomains so you don't generally gonna see this we're gonna take a look at just the site that I want which is this pods dot 30p Pro website com now inside there you'll normally find a pile of different folders the only one we're interested in is the public underscore HTML folder and expand that out and inside there that's where all of the wordpress files and everything to do with wordpress is located what we're gonna do is we're gonna come into the wp-content folder and from there we're gonna come into our themes folder as you can see there's all the themes we currently have Astra child is the one that's currently active and one we want to edit so we're going to go into that and from there you can see we've got the function it's not PHP file a style dot CSS file and a screenshot jpg file now at the bare minimum you should always find these three files inside a theme fold at home I should say a child theme folder you may see more but you should never see so whether you we want to do is open up and edit the functions.php file and you can see this is exactly the same file as we just saw go to the dashboard of WordPress now what we need to do is make a bit of space underneath and we're going to just copy in a big block code so I'm going to paste this in and like I say this will be available to you so check out the description below so you can copy and paste this and do what you need and let's quickly take a look at it what we're doing is we're basically creating a function and a function just allows us to tap into the core of wall commerce the core of WordPress and so on via our theme and make changes this could be visual changes they could be call code changes lots of different things you can do with these you don't really need to understand exactly what's going on just what you need to change or edit to get the effect that you want so we take a look at it we can see we've got function my account menu order in other words this is all the different sections you'll see inside the account of WooCommerce and if we jump back up into that you can see there they all are dashboard through the log out come back at the site tools dashboard through the customer log on see all there so let's just say you want to change something what we need to do is come over to this second section and you can see inside parentheses we've got dashboard orders might downloads and so on these are just the text labels that have been associated these inside the dashboard so if we just say we're going to just change this to my orders and we'll just hit save well come back onto our dashboard and refresh this and you can see now we've got my orders and anything we made change the order of will be changed inside here as well so it's very simple to make text changes to these and if you obviously wanted to take something out all you need to do is simply select the line that you want to remove will cut that over there and then we'll just save that and we've now got rid of my orders it's gonna come back into my account will refresh this and my orders has now gone alternatively if we don't want to cut something out we just simply want to move it all we need to do now is close that up close a spacing up and we'll drop exactly where we want so we'll just save and put that underneath there we'll paste that in will now resave this and we've now changed the order of exactly what's going on inside here so it's super simple to make these changes they could say this is just the order the labels and so on so if all you wanted to is take something out for example downloads may not be applicable to you if you don't sell digital products well you can simply remove that using this method so hopefully what you can see is this is actually pretty simple so that we've seen those basics we're ready to just go just a little bit deeper let's just say for example we wanted to add a new section in maybe we were offering a reward to our our customers or loyal customers we wanted a section inside their dashboard the display down let's take a look at how we can add that new endpoint in so we're gonna go back into our file manager which still got the functions.php file open and all we've got is what we left off with in the previous section we've just got those different sections inside just the first thing we need to do is register the endpoint now the endpoint is just basically the page that you're going to go to that actually contains the data for in this example the rewards page so first thing we need to do is we're gonna copy this little block of code in underneath the functions for our menu so drop that inside there let me just quickly go through what's happening now you don't need to really understand this too much you just need to know what you need to change if you want to create a different page so we're adding an action so we're telling it to initialize an action and that action is to create a my account new endpoint so it's gonna register a new endpoint then it tells it the function how to actually do it and then we've got the add rewrite endpoint now the only thing that we really need to take a look at is what's inside these parentheses as you can see its rewards that's the name of the page the endpoint we're going to create so with that being done we're going to save this page and then we need to come back into the permalinks in our site and all we need to do is scroll down and save the changes that will then refresh everything and make sure that that new endpoint has been registered and all the cash has been clear to make sure that's in place so that's the first part that's created the endpoint the next thing we need to do now is go through and create the door tells it tell it where the endpoint information is going to be stored so again we're just going to simply copy and paste this block of tech this book of code in and let me just quickly go through this again we've got another action saying WooCommerce account rewards endpoint so the what is the name of the new section we're adding in so again if you want to create a different name just make sure you update anyway where it says in this example rewards - whatever you want to call it next up again we have a function that says record endpoint content that's going to create that function and reference it and do it that we need and then underneath we've got template part this is the name of the template that we're going to use so that we need to create this PHP file what you're gonna do in the next step but to make sure that we don't make any mistakes we're gonna copy this and then we've basically got our file name in place so we're gonna simply copy that now again remember if you change this to something else you might have my account and it could be my account coupons my account wishlist it could be a million or one different things make sure that you update that and you create the file using that name that makes sense so we've got the next part done so we're going to save this are we going to create that new file now to do that we're going to come and create a new file we're gonna paste in that name we just said my - account - rewards and we're gonna put full stop PHP so that's going to create a PHP file now so we can run PHP code on this page should we need to we'll click confirm and we've now created that page so what we need to do now is just put some content into it so we're gonna do with it open we're gonna drop in just a little bit of text it's gonna drop that inside there so we've got something just to say this content on this page we'll save that page and we'll close it down okay so we've done most of it however if we go back to my account and we refresh this we don't see any link through to that new rewards section so that so that's the next thing we need to take care of come back down into our functions PHP file and there's all our links so what we need to do is drop in the right link for that new rewards section now I've already created but you could just as easily copy this and change what you need so I'm gonna make some space above the customer logout and we're just gonna paste in the rewards section let's just line that up so you see rewards is the name of the end point we're referencing with your creatives down here there's our rewards endpoint your rewards is the name that we could all the text we're going to use inside the dashboard inside the account I should say and then WooCommerce because it's a WooCommerce function so providing everything is now in place if we save that and come back over to my account page come back to our dashboard we can refresh if you want to but you see there is our new section called your rewards click there's my rewards section so that's the contents of that PHP file now obviously you can put whatever you want inside there and this is beyond what I want to cover in this how to create these kinds of functions this is just how you register that new feature inside you and then you can reference that any kind of content could be placed inside there so that's how we can customize the My Account menu so we can take things out rename things add new sections in but what about if we want to change some other things let's just say for example we've got this dashboard it says hello Paul C which is the name that I've created inside this account you know and there's a list of different things underneath it how can we change that let's just say like we're going to do in the next stage we're gonna create our own completely customized dashboard how would we go about changing that it because we still need to use this portion on the right-hand side because that's where all of the information when you click on any of these endpoints will be listed so things like your addresses your orders and so on so let's take a look at how we can do with that next now to do this we can't edit the functions PHP file we need to go in and edit an actual WooCommerce file now the most important thing you do here is you take a copy of the file or files you want to edit and you put a copy of those into your theme folder don't edit the original files inside WooCommerce for two key reasons if you make a mistake you can kill WooCommerce not a good thing the second thing is once you have an updatable congress which comes out quite readily any changes you made to that file will be overwritten and replaced with the default so you'd have to go back in again edit the file and so on which is not the best way of doing it so let's take a look at the right way to do it first so first things first we need to create a new folder inside the root of our theme so we usually asked a child that's exactly where we are right now as you can see we've got the functions file and so on we took a look out earlier we'll create a new folder inside there and we're going to call this room commerce and we're going to confirm that and now we can copy the file or files you want to edit into that folder so we need to do now is go and grab the file and recreate the relevant structure to be able to make a full copy of it and start editing it so to do that we're going to come back up to the plugins section inside our website and from there we're going to come down to open up wall commerce where the scroll through until we find the templates folder and inside templates we've got another folder called my account if we open that up there's the file in there called dashboard dot PHP so what we need to do is copy this folder and the dashboard PHP file now the easiest way of doing things inside you is to recreate that folder and then copy the file over so first of all let's select the dashboard PHP file and we're going to say copy then we're going to do is we're going to come back down into our Astra and open up we'll commerce and from there we're gonna create a new folder and we're going to call this my account and click confirm so we've now created that folder now please note you do not need to create the templates folder inside WooCommerce that is basically being ignored my account it knows you're editing the template files so from there we're gonna open that up and we can just right click now and we can say paste and there's our dashboard dot PHP file in place so let's click to open that up and edit it ok so let's just take a quick look at what we need to do inside you if we scroll down a little bit you can see there's two key blocks of text inside here the first block inside the PHP parameters is the sort of welcome message the hello so-and-so name you know you can log out and all these kinds of things if it's not you so you come back over into a dashboard and refresh to make sure we've got everything in place you'll see it says hello Paul C not Paul C logout and then we go in Savanna for underneath so the first little block is what we can see inside there so if what we want to do is make some changes maybe we don't want to put holo we want to put Cola or high or something else you can change that but we want to get rid of that completely before we do it let's just take a look at the second block this says from your account dashboard you can view blah blah blah and do other things then we've got three endpoints underneath and remember back to the previous section endpoints is just basically the different parts of the that my account your dashboard for orders addresses and all those kinds of things so you can see there's three things inside you orders edit address and edit account come back in you can see this is where you've got your recent orders shipping a billing address which is addresses and then your edit passwords and account details so there's three end points so if you wanna make changes you could do that inside there but all we want to do is remove this first section because when we take a look at creating a more custom dashboard use in Elementor we're going to be getting rid of that left-hand section and we don't want to have this welcome message because it's basically going to be repeated at the top of our custom dashboard now we could if we wanted to use this little bit of information but we're not going to we're going to use some of the built-in functions as part of it Elementor now we're pretty safe making changes to this because we are just editing a copy of this dashboard PHP file so let's just grab this little block inside the P for paragraph section so this is just an entire block making sure you only grab the right code we'll delete that from there and we'll save this page we come back to my dashboard and refresh we should then find that that opening welcome has now gone so that's the first part of this done okay so that's how we make those changes now this is this section where we delve into code and so on inside WooCommerce I finished with this section now we're not gonna do any more in here but hopefully what you've seen is there is a lot of really cool things you can do to customize the way WooCommerce kind of works and the different things you can do if you want to end at this point by all means do but the next section I'm going to take you through and show you how we can take elemental and how we can build a completely custom dashboard how we can reference those endpoints and how we can create something a little bit more unique so before we move on let's take a quick look at what we're going to be creating as you can see this is now our new Account dashboard it looks a lot nicer than the standard default way of working we've got our custom endpoints across the top section we've got a welcome message we've got our nice avatar picture if we scroll down we've got the normal message that you have as part of commerce and if we click on any of these for example of view orders you'll see that underneath that section will show us any orders the same goes with down account details and source we click on account details we'll see that this section now opens up and allows us to customize our account information so what we're doing is we're creating this custom search and inside a custom dashboard and then we're kind of using the built in functionality there's part of WooCommerce to pre fill out this information underneath so it's a nice way of combining the two different things and in the first part you saw how we could create more complex okay we can customize different things this is taking it to the next level and combining the two of these I think gives you an amazing opportunity to create much more unique WooCommerce experiences for your customers so let's take a look at how we could create something very similar to this now first of all I want to say that if you want to download this layout you can have access to that I'll put a link in the description below so you can just download the template file for this all the links are basically relative links so you shouldn't have to change anything and say this if you follow along with what we're doing and you don't change any of those endpoint details all this should work straight at the box you can just customize a way to your heart's content okay so let's just come back over this now and let's just take a look at rebuilding this for ourselves so this is where we are right now let's change all that okay so the first thing we need to do is just pull in that template now obviously if you don't want to use my template you're more than welcome to build so they don't scratch yourself but this should just give you a good starting point we're going to do is we are in the Save template section of Elemental Pro gonna come in to import templates and we're just going to simply drag and drop this file and then import it and this is just called the full commerce dashboard and you can see there's the WooCommerce dashboard so we're going to do is we can just open this up if we want to or we could just simply come in and create a new page editor page whatever we want to do so we're gonna do it's gonna come in two pages and all pages and inside there we're gonna take the default WooCommerce my account page and use that as the basis it just makes our lives a little bit easier because we don't have to mess about with rear efference in things as part of the settings inside Google commerce so there's the my account page we're going to click to open that up and you'll find that all that's really in there is a simple short code which is WooCommerce underscore might underscore account now there are tons of short codes you can use for various different things and once we open up edit with so you'll find what happens is it'll just create a shortcode widget inside there which we can use if we want to and that's what has happened we've got the shortcode widget in it okay so with that all done what we can do now is we can load in our template so let's just come down to the template section at the bottom click on there and from there we're gonna come to my templates and there's our WooCommerce dashboard we're going to insert that we'll say yes to all that and we'll let that insert into our layout now we'll see we use in the Astra theme so things are a little bit different in size here so you may find you have to play about and tweak a few bits and pieces to get it to look the way you want what you could do if you wanted to if you want to get rid of this sort of top section or you want to create something a little bit more unique you could easily come into the settings section choose the element or canvas and we'll do is we'll hide the title make sure as well hidden as well and we then end up with a simple clean page and that's what we're going to work with it's up to you how you want to do this because you could be using any multitude of different themes okay so we're we've got this little shortcode what I'll do is I'll show you how to use that let's get rid of this this in there so he's gonna exit that we'll do a quick search on widgets for shortcode well drag and drop a shortcode into that area and then we're just gonna simply come up to this top section copy this little block copy that from there and we're gonna drop that into the shortcode okay so you can see that now refreshes and shows us the information which we'll deal with in a moment let's now get rid of this top section okay so you can see we have a little bit of an issue we have our welcome message which is perfectly fine but we also have all the information down the left-hand side the navigation which we don't need because it's basically replicated when we have up here and kind of makes it a bit redundant so the easiest way to deal with that is with a simple bit of CSS code we can just hide this section on the left hand side and then we can make this full width so let me just show you how to do that so we come up the Advanced tab making sure that the widget is selected scroll over the bottom we've got custom CSS now we can assign custom CSS to this particular widget so all we're gonna do is we will drop in this little bit of code first of all so let me just go through that so this is just saying there's the selector for it which is WooCommerce - my account navigation and again all this information will be in the description below so you can just grab all this code and just paste it in there and we say display:none so that just hides it but you can see where it does is it also leaves this left-hand section evident so we need to deal with that as well so another little bit of CSS code I'm going to just drop that inside there and again you see this is using that selector this type is targeting the content which is this main section it just tells it to make it with 100% so we've hidden the left-hand side and maximized the right-hand side simple as that that's all it is to do let's hit update on there and we've now set everything up so we've got this all configured and set that we want now let me just quickly go through these different sections so you can see what we've done because I don't think I need to tell you or show you how to create something like this you can either use my template or you can just simply build something yourself but I just want to quickly show you how these different parts are set up to work so each of these different links that's the icon the view orders and the order button itself all linked through to the same location and if we take a look they use in the endpoints now all of the endpoints start with my dash account unless of course you're using a different layout but I would recommend doing it this way just for simplicity and keeping everything in line so that's the first part of it and then the endpoint itself for example orders comes after my account and the reason I do it this way is because if I want to use this template on other sites obviously the domain is going to be different for each different site so if I put the full domain in for every one of these different links and there's three on each one of these different sections I have to come in and change it every single time and that would be just a bit of a pain so by using it this way you basically be creating a relative path doesn't matter what the domain is it's gonna work for you unless of course you put things into a subdomain at which point you'd need to edit these and put the subdomain in and the full URL and it would you know it's up to you sure you can figure that side of things home so that's all what they do is you can see this will go to the end point for orders this one to the end point for downloads this one for the end point for edit your addresses and finally the end point for edit account so if you're ever unsure of any of these when you create or when you sort of take that left hand navigation thing all those end points are listed there you copy those into a separate text file you know create a list of those somewhere just use those then to link through these different sections so that's how we create those different parts of it this section at the top is just using some simple dynamic data so let me just show you how this works so the avatar if we click on that it's just an image file that's all it is but it references the Avatar is being used for the account to do that let me just close that down I'll just quickly show you how it's done there's the image we just drop an image widget in there we're gonna clean got that click on the dynamic tags option to open that up and from there we're gonna come down to we get the author information so you can see we've got author profile picture or user profile picture now we're gonna use the user profile picture I'm going to click on that and see that no pulse in the avatar that's associated with my account so when I'm logged in that's the avatar I would see when someone else is logged in as long as they've got an avatar that set up through Gravatar then that would be listed inside there if not it'll just be a placeholder it's very similar on the welcome message that kind of does the very similar kind of thing so let's take a look at that if we click this is just a simple heading that again is referencing dynamic tags so if I wanted to get rid of that let's just close that down so you see that just puts the plain a placeholder text in let's click on the dynamic tags now from there it we want to grab the user info so we're gonna scroll down until we find under site we've got user info now this is associated with the user that's currently logged in so once you set this kind of template up where the logs in will see the relevant data to them when they're logged in so you click on user info now you can see that nothing happens what we need to do is click on this little wrench icon and those allows us to choose exactly what user info we want a reference so under the filled section we'll expand that out and we're gonna choose display name but you can see there's a ton of other info in this if you wanted to create a more unique welcome message with other information you could do just that we're just gonna say display name once we do that you can see it now just says porcine that doesn't really make a lot of sense if we open up the advanced option you can see we can put text before and after and put in a fallback so we can just say hey let's be hate poor see so we just put a space after that and then afterwards we'll put a comma how are you today there we go so now you can see it drops in that message and we just created a custom welcome message now what if someone doesn't have a sort of a name associate with them they haven't updated that they just have a user name we can drop in a fallback so we can just say hey shopper and then if there's no name in there then it'll just replace where it says palsy and their which is my name with shopper so you just creating some simple logic that's all it really is so other than that there's nothing else you really need to know because it's just a normal page that we've created as part of Elementor we can update this let's come back into my account now we'll refresh this so we can get rid of all this extra stuff we'll see now we have our fully customized set up as you can see hey palsy how are you today if you come down we can save you orders and we'll have that section then we'll update and show us any orders we've got associated with our account if you're going downloads you can see that shows our downloads so on and so forth so we've now created a fully customized dashboard for our account holders anybody that logs in will now have a much nicer user experience and I think this is a great way really gaining start to customize the whole way in which we'll commerce works so hopefully what you've seen throughout this entire video is there's a ton of things you can do to get really creative know what comes down to how experienced you are how comfortable you are getting interchanging these things oh realistically what you want to do if you want to keep it simple stick to just doing it through Elementor Pro you when you get your hands in get a little into it you with it and fiddle with a code get stuck in and take a look and messing about with the functions PHP files and all those kinds of really good things so if you've been using this combination for any period of time and you want to take it to the next level and learn even more check out the videos you can see on screen right now they're gonna give you some really great ideas on how you can customize the WooCommerce websites as always all applicable links in the description below if you've any comments questions or feedback drop those in the comment section - report see this has been WP test and until next time take a

Channel: WPTuts

Views: 86,528

Keywords: WPTuts, customize woocommerce dashboard, how to customize woocommerce dashboard, customize woocommerce checkout page, customize woocommerce checkout page elementor, customize woocommerce checkout page layout, customize woocommerce checkout page plugin, how to customize woocommerce my account pag, woocommerce my account menu, woocommerce my account page customize, add new tab in my-account page woocommerce

Id: iEfrFSTPCSQ

Length: 28min 39sec (1719 seconds)

Published: Tue May 05 2020