How To Create A Custom WooCommerce Frontend Dashboard

now one of those areas that I asked about a lot in the comments section of many of my tutorials is how can I make a front-end dashboard for commerce this is a great question but it's pretty limited when it comes to finding a solution but today we'll be taking a look at a recent addition to one of my favorite board press plugins ACF front-end forms pro now you may have seen my tutorial on creating a front-end user dashboard for WordPress if not I would recommend you take a look I put a link in the description below to that deep dive it's highly recommended now this tutorial basically complements and expands upon that topic by adding the ability to manage WooCommerce products now there is currently a limitation on the types of products we can edit but I'm assured by champey the developer the downloadable products and variable stroke complex products are coming very very soon however the topic and the skills that we'll cover today should be easy to expand upon once those extra features are available I mean absolutely no doubt whatsoever that I'd be coming back to them and covering them in a future tutorial ok so let's just start with a warfarin and get stuck in and take a look at the end result we'll be working towards so let's kick the beginning this video off with taking a look of what we're going to be creating now if you've seen any of my other tutorials on creating things like front-end dashboards customizing the account section of WooCommerce you're kind of going to be familiar with this layout this is totally free if you want to have access to this I'll put a link in the description below so you can download this template and you can just then edit it to do whatever you want it's all completely using just standard tools that a part of elemental Prohm so what we have is currently two sections the add item and edit item the rest I've already covered these kinds of things in their own dedicated tutors as I've just mentioned so we can ignore everything else that's on this page but if you want to learn how to do it I'd recommend taking a look at the other tutorials and I'll drop links to all of those in the description so you can check them out okay so we've got add item and we got edit item click to add an item it's going to take us over to a new page that allows us to add a new product so you can see we have product name product description featured image images short description and so on now before we go any further there are a couple of limitations in what we can achieve right now now I've talked to shabti the developer of the plugin that we're going to be using and he's told me that it is in works that we're gonna have full access to things like variable products downloadable products and so on at the moment we can only realistically work with simple products so bearing that in mind this is showing you how to use it and when these new features come up which I will cover when they're released you'll see how easy it is to create something like this and then as the plugin expands you can then use those extra tools of facilities to expand what your front-end dashboard can do when it comes to working with products and WooCommerce ok so that's how we'd add a new product in and right at the bottom we're gonna have submit for approval and depending on how you set this up I would generally set this up if I'm allowing other people to use it and have access to this I would set it up so they have to be submitted for approval then they get approved by an admin via the dashboard of WordPress before they go on the site but obviously if you were using this for a client and you didn't want to have that you can just have these published immediately that's just one of the options and we will take a look at that as we go through the process of setting this up okay so that's the adding a new product if we come back to our dashboard we also have edit item or edit a product so we click on that and that will then show us all of the products that are associated with me being the logged in user so these are my products now this is the easiest way of working with this because it means it's linked through to the end user that logs in if you have no products nothing will be listed if you have lots of products they'll all be listed but other users won't be listed you could bypass that you could easily create a loop like we'll see in how to do this you could do that with no restrictions whatsoever but you just have to be an admin or an editor whatever you want to sort of setup to allow people to log in with that user level and then maybe see all of the products it's up to you it just comes down to how you query and how you filter the data you want to display at this point but as you can see there's our products we've got all the products listed inside there so currently I have about three pages worth and I can simply click on edit product that will open up a nice modal window and you can see all the same information is available as we had in the adding a new product just this time obviously prefilled out because we've already created a product that we're editing so this is what we're going to be creating now let's take a look at the tools you'll be using to create this first up we have a CF front-end form Pro and this is the core to this toolset this is the core to how we create these custom front-end dashboards at the time recording this there is a lifetime deal going on so you can grab yourself a lifetime deal if you want to for one site multiple sites or unlimited sites take a look at that I'll put a link in the description below so if you want to see how to use it and you want to grab yourself a copy you can do that next up we have advanced custom fields this is just the free version we also have advanced listings which is dynamic post queries for Elementor this is a free plug-in by the same developer as a CF front-end forms Pro this opens up the ability for us to filter data on more unique and more comprehensive sort of information so we want to limit things based upon the use of this logged in the author things like that this free plugin comes in really really useful I've covered this in its own dedicated to torus if you want to take a look at that in more detail than some of the other things you could do with it I'll drop a link again in the description pretty much with all these things check out the description because there's gonna be tons of really useful links inside there for you classic editor because I don't like guttenberg elements or custom skin the free version because we're going to create a custom loop and if you're not sure where a custom loop is I'll show you how to use that and how to create it and where it is and again this links in the description to check out not only the plug-in but also the tutorials are created on this elemental an elemental Pro we need elemental Pro because we're going to start working with theme files and so on so you need to have that bull commerce obviously because we're going to be creating a front-end dashboard for WooCommerce and that's pretty much it you don't need anything else whatever theme you want to use you can use that so with those things set up the next you want to do is start creating the pages that we need so the first thing we need to do is create a couple of key pages and like I say we are keeping this really simple this is just going to focus on the editing and add in new products to your database so we're gonna create three pages first I'm going to do is gonna be our dashboard so we're just gonna call this woo dashboard you can call this whatever you want this is just going to be the sort of homepage for your dashboard what we are going to do is change the visibility over we're going to edit that from public and we're gonna set this to private now this is not the ultimate solution for privacy this is just basically going to keep users that don't have the administrator or the editor roles out of these pages I would highly recommend if you use this on a production site to increase this kind of security you want to have custom login with custom redirects and limit who can access these dashboard settings it's beyond the scope of what I want to cover in this and because this isn't really a beginners tutorial I'm sure you'll be comfortable creating your own login pages but you want to find out how to do that kind of thing I do have a dedicated tutorial but if you want to find out more about these kinds of things let me know in the comment section below so I can take a look at creating specific content for your needs so let's just publish this page we'll save that hurt once you've done that we're going to add another new page and so we'll add a new page and this one's going to be to add new product now I'm giving these longer names because I've already got some test pages on this copy of WordPress that I don't want to have any issues with so we'll do the same thing again we'll change this visibility to be private click OK and hit update and then finally we'll add one more which is going to be list products and again we'll do the same thing so visibility private ok update so we've created what we need now we've got those three key pages all set up ready to go so the first thing want to do is go ahead and create the dashboard for the sort of the home page for our dashboard so we're going to come in we're gonna edit that let's just scroll down come to our dashboard and we're gonna open that up and we're gonna start editing so I'm gonna edit with elemental we're gonna open up the elemental editor and if you don't have the design that I've got available to you installed you need to install that and it's very easy to do let me just quickly show you all you need to do we're going to choose the option for template so we click on that this will open up all the predefined templates and the third option is my templates we're gonna click on there and you can see I currently have a couple of templates including my dashboard template clean so we're gonna use that as the basis now if you haven't got this installed all you need to do is click this little import template icon at the top we'll click on that you simply drag and drop the file you can download from the website just unzip it or you can leave it in the zip file if you want to select that and that will install it for you and then you'll have access to it so without being done all we need to do is come back out of this and then we can just open up what we need so gone ahead and installed the basic WooCommerce front-end dashboard template and all I need to do now is I can click preview to check it's the right one so in click preview it'll open up a new tab and you'll see that will then load in the dashboard for us provide I'm happy with that then I can just say that I want to insert that and we'll say yes to import the document settings once you've done that we now have our new dashboard template loaded in ready for us to start creating things and linking things through to all the different pages that we need ok so we've got two different sections we want to work with for this example you can basically ignore anything else that's available on this page there just extra bits and pieces so add product and view product these are going to link through to those two pages we've just created so we need to setup those links first of all so let's start with the add product option we'll select the icon and then we need to put the link in now you may see one little problem I start typing in for example ooh which I know is going to be in there you can see it doesn't show up it doesn't show us at all reason being is because we've set these dashboard pages to be private which means they won't show up inside this link section easy to get past all we need to do is have another tab open and I have all our pages listed I don't set these in the order of the date so I can see the latest one so you want to add a new wall product so what we're gonna do is we're just gonna copy the link for this so if I click on View you'll see that will open up a new tab and there's the link at the top which you can't see unfortunately cuz it's off my screen blowing I do is copy that link over come back in and we're gonna drop that inside there and there's the full link now if you don't want to use the full link you can quite easily get rid of anything that comes before the four slash after your domain so for example we've got this whoop-de-doo Pete Pro website calm and a forward slash well I could get rid of that and I could just have the forward slash and then the name of the page this becomes a relative URL I mean in other words it doesn't care what the domain is so if you move this somewhere else or you were setting this up on a test domain that you were gonna move over to the live domain this is the best way of doing it because it means that you don't have to worry about updating all the links throughout your entire site depend upon what tools you use but that can be a bit of a pain so this is what I'd recommend we're gonna do the same there when I click on add product we're gonna come back to the URL and drop that inside there we'll get rid of the domain just copy the shortened version and we'll do the same thing for the add products we'll drop that inside there so we've now linked this at this one that's all I need to do now is the same for the view products option so I'm going to quickly do that then we'll come back and move on okay that's now done let's just test that out to make sure everything is working so we'll just hit preview changes and from there now we can test these two links that know obviously the pages have nothing on them we can check we're not getting any 4 or 4s you know messed anything up there so we'll hit add product that takes us over to our add new product page and we're gonna come back at this and we'll do view products and again takes us over to our new product page so we've got those things set up we know they work in we're now ready to start creating the content for each of these different sections so we're gonna start off with the add product because that's probably the easiest and the quickest one to set up so we need to do is come back at our dashboard and we're gonna go back into all our pages and from there we're just gonna say we want to add a new product and we're gonna click to open that up and then we'll open this up with Elementor so we can start working with the ACF front-end form Pro I'm going to do is type in ACF at the top and you can see there's the front-end form options we're gonna drag and drop that onto our page and you see this now pulls in the basic layout for us know what we need to do is start to configure this you can see we can set this up to multi-step if we wanted to so if you wanted if you had a sort of really long complex form you could go through and set this up into multiple stages to make it a little bit less unwieldy for the end user probably not so relevant at the moment for something like the WooCommerce side of things but if you use it Ness to create you know custom forms and custom layouts then you could use that option the actions is where we start configuring everything so you can see the main action is set to edit post and you can see that it says at the top we can change that to any of these options now if you're using the free version of this plug-in which is pretty heavily featured I must say so if you wanted to test this out before you bought the pro version to see if it kind of works the way you want I'd highly recommend taking a look at the free version just to get a real feel for this but you can see we can do things like edit post new posts and so on what we want though is we want to have the new product option so I'll click on new product we then have submit actions in other words what do we want to do when you hit that submit button you can click on there and the option we have currently is emails so if you were setting this up for a user for example you may have an editor that you wanted to be able to add new products and you wanted to make sure that you would notify every time a new product was added so you could then log it the dashboard and confirm it then you can set the emails up if you click emails a new tab at the bottom will open up and in there you can set up the email shortcodes who the emails go to and all those kinds of things I'm not gonna go over that because in all honesty it is super self-explanatory you just fill out the details and that'll fire off the email to whoever you specify it goes to so gonna come back up I'm going to remove that action from there you then have redirect after submit so once you submit this form what do you want it to do so from there we can choose to reload the current page we can have it to go to a custom URL or we can send it through to the new post URL so once you create the post and submitted they could then get forwarded straight over to the page that would show them that particular post product whatever even if it hasn't been confirmed they could still see it but because it's the particular product so that's quite useful so what we're gonna do is we're gonna send this over to a custom URL and then underneath you can set the URL that you want so we're gonna do is we're gonna send them back to their dashboard so I'm going to click inside there and I'll drop the dashboard short code or the address so that in NCSL would dashboard so they'll add a product it'll then be sent over we can specify if it's going to be automatically added to the site and so on once they've done that they'll get redirected over to the route dashboard at which point they could then decide what they wanted to do add a new product list their products and all those kinds of good things you can set if you want to URL parameters so you may be doing things with more advanced URLs and you want to add additional parameters on you can do just that so you can see and click you can specify keys you can also use dynamic tags and you can also specify the value and again use dynamic tags we don't need that in this example but it's there should you want to get a little bit more advanced in in what happens after a form is submitted submit message you can see this will come up after it's been submitted so you can see your post where we want to change that to your product so now that makes a bit more sense your product has been updated successfully we're going to change that as well to submit it but you can set this to whatever you want okay so once we've done that the next thing we have then is the form structure the form structure is a simple way of just configuring certain basic aspects of the form that's going to be used the title which in this example says edit post which obviously isn't correct then the form ID if you wanted to use it you can choose ACF fields if you use an advanced custom fields alongside anything you're submitting via this particular plug-in you can link things for there and so on so we're not using ACF fields but you could if you wanted to combine ACF feels alongside commerce fields and you can still use this plug-in to edit update and add content to both of those areas so that's pretty cool we're going to do though is get rid of and it posts because that makes no sense I'm gonna get rid of that completely and I'm going to change update to submit for approval so at least people know when they click on the submit for approval button it's not gonna automatically get added straight in to the site then we've got the product and this is where we've got the basic product details the key product details and again like I said you can use ACF fields if you want to and there's a little bit of information below there about how you would do that now there's quite a few other things you can set like product title as the default product image and so on but what I'm more interested in is the product status now you can see at the moment it says published we click and expand that we have four options draft private pending review unpublished and this is basically when you hit that submit button this is the status that this product will be placed into so if you are doing something where you have third-party members of staff or so on adding content you may want to make sure that set have to be pending review whereas you may have people that you fully trust at which point you set that to be published I'm going to set this to be pending review and you can see that's that done next step you can use the product terms if you want to and you can assign this to typical product categories and things like that I'm not gonna worry about that right now what we're interested in though is the next set of options which is the basic field entries that you go in to see so these are standard things like the product name the product description the short description and so on and you can specify whether these are set to be required or not so let's just enable all of these it's very easy to do you can see it says none or custom click on there we can say default product description and I click on that and you see the product label and any instructions we may want to add into it if you want to set to be required we can do that and you see you get the little red asterisks next to the name just to tell you that this is a required field so we can uncheck that we obviously want to make sure that the the label is set to be required and there we go there's one other thing I want to quickly go back to the set as slug if you want to you can have this set up to be the default slug for the product the slug is just basically the URL the bit that comes after your website address and any other subsections you may have it'll be the name of the product up to you if you want to set that or whether you want and let WordPress set that as default for you in the background so we can go through and we can just enable any of these or all of these fields so main product image for example we can do that if you wanted to have a product gallery you can enable that if you want to a short description you could enable so you can come through and enable anything you want your categories if you don't use tags you don't need to include the but if you do your tags you can just set those to be default so you can see that now has increased our entry form considerably we now have a lot more options available so that's all the basic options we have we just come in and we'll just close this down we're to come down to product data and inside here we have an additional set of fields and again these work in pretty much the same way these are switchable so you can use them or ignore them so obviously you'd want to put a price in there for most products so will enable that you can see we can change the label and we can drop in instructions and also set the required and the width so let's just set this width to 50% this time and we say you want to put the sale price and enable that as well and we'll set that to be 50% now if we scroll down we'll see that we've got the sale price of the price next to each other if you use SKU codes you can drop that in there and if you manage the stock status and whether you want to force people to only be able to buy this product in individual items you can enable that so you can see everything is set up down there for us we can change any of the widths and so on move it forward so that's the basics of the form now I've been speaking to shout to the developer and in conjunction with what we were talking about being able to add in sort of more complex variable products and so on further down the line which hopefully shouldn't be too of too far away from my speaking to him it is pretty much in the pipeline and hopefully will be with us very soon now another usability feature that I've been speaking to shadi about is the ability to drag and drop to reorder these fields because currently we are restricted to those only being displayed in this specific order which for most people isn't going to be an issue in the slightest but there are times where you may want to reorder these to make it a bit more logical for a particularly use case so again that is something that I understand is also in the pipeline so it'll be great when those little productivity enhancements come out next that we have the options for permissions and how we can allow people to see different aspects of the site and interact with different things inside this custom dashboard you can see at the top we have only logged in users but we can change that to one of three different options only logged in logged out and all users now because this is a front-end dashboard that we want used to be logged in on we now see me to make sure this is the own logged in users can see it next up we've got the Select by role we can click and any roles you have set up will be available inside here so you can choose who can access this based upon being logged in and having the correct role now it's worth noting that because we've set this page up as a private page doesn't matter what role you set if it's not an administrator or an editor they won't have access to this they won't see the information inside you so you have to bear that in mind and this is why when I say at the top of the video if you want this to how better level security and more control you want to look at something like controlling exactly who can access pages based upon being logged in setting up a custom login and all those kinds of useful things and if this is something you'd like to see me cover in more detail then let me know in the comment section and I can take a look at that if enough people are interested in take a look at that information so what I do is when I set this to be editor and administrator then you can select a specific user so you could restrict this to only specific users if you want it to based upon the user name and they you know the email address and also by their role so I never restrict this based upon the user I just want to make sure only administrators and editors can actually access the content and be able to submit these forms finally we have dynamic selection now this isn't something we need to worry too much about because this is more when you want to filter things and you know so you use things based upon the list of posts the lists of products and so on of the specific logged in user so we will take a look at that we'll use that in the next stage where we take a look at create a new listing where people can then go in and edit their own existing products I hope that makes sense okay you can choose to use the word press upload it or not you can have just basic input fields entirely up to you how you want to work with that I'll leave that as the WordPress uploader the limit submissions is quite useful too this is something that if you were making people pay for this and there are some beta versions of this where you can use both stripe payments and PayPal payments so you may have people uploading products uploaded information and you want to make them pay you can do that with those extra features I'm not worried about that in this example this is just for a dashboard for work through commerce products so you can see we can limit people various different things now currently is set to subscribers we could change that over them we could say that if you're a editor for example you can limit the number of submissions they can do so we could say we only want to allow editors to do five submissions so we could change that over to editors as well so there we would now restrict any editor to only be able to put five submissions in we could limit that by role and by user like we saw earlier on with the permissions so that's quite cool or you could just say you want to limit everybody and that will limit anyone no matter what to only allowing five uploads but if you want to create multiple tiers for editors and subscribers and for you know authors and so on you could add keep on adding until you hit that limit and you know you're good to go with that kind of thing so I want to do is we're gonna just change all that and get rid of everything inside there we're not gonna worry but making any changes to this we don't put any limitations in there and then finally we have display options and here we can just go through or we can configure how this particular form is going to work in this example we're gonna leave it as it is we're not gonna change anything in the next example we are going to take a look at using the modal option because it streamlines the way that the page loads and how we interact where we have multiple different products we can choose from to make edits to but for now you can leave that as is but you can do things like hide field labels hide the required field mark choose where your instructions go whether they go above or below the field and you can drop in separators to put separators in between each of the individual items in your form but apart from that that is the basics of what we need now we can come into the Style section and we can easily come in and we can configure and style all the different things like the buttons the form feels all those kinds of things to make sure that everything looks in keeping with the dashboard that we use in now this is one of the limitations of the free version you don't have access to the styling option so if you want to get in style things that's important to you you would need to look at the provision like we are using in this example but with that being said I'm not gonna worry about styling everything that's something I'm sure you could do yourselves at any problem whatsoever we'll click on update to update this information and that's our add new product page all set up so let's quickly take a look at that we move on this is back into our dashboard we've linked everything that we created that add product so we click to add a product you can see that takes us through now into a form automatically pulls in the nice editor so we've got those extra things we could format the information to do with the product description we can upload images put in a product description put in any of the categories add tags price sale price SKU codes stock status etc so you can see everything is working the way we need it to and that's the first part of things done we've now created that adding a new product in the next thing we need to do though is come back in now and we're going to create the view product section there's two parts to this we've created the page that's going to hold the listing of our products what we need to do now is create the custom loop to display the information that we want for that product so let's take a look at doing that next and to do this we're going to come into the theme builder of Elementor Pro we've got elemental custom skin installed and you'll see once you install that you have a new entry called loop so we're gonna click on loop and from there we can create the loop item and this is basically a template for the individual product that's going to be used inside the Edit and throughout product section so currently we have nothing inside there so let's take a look at doing that now what I do is add a new loop in and we're just gonna name this so we're gonna call this edit product loop dashboard just so I know exactly what this one's all about create our template and we're gonna do now is we're going to pull in the relevant information to display just what we want for a product to make it easy to distinguish what product it is and then we can use that to go in and edit things so let's just close this down we don't want to use a predefined template we're going to build this ourselves so going to create a new section we're gonna set up one row one column section and inside there we're going to now pull in all the things that we want for this so the first thing we need to do is drop in the image for the actual product itself now we're not going to use things like featured image we've got actually going to come in and we're going to just drag in a standard image drag and drop that inside there from the placeholder we're going to come over we're gonna click on the dynamic tags option that allows us like before to jump in and pull in those details that are stored as part of a product and so on click on it we're gonna come down until we get to the WooCommerce section so now what you're seeing at the WooCommerce section is just WooCommerce related shortcode data so we've got product image and category image because this is an image widget it knows to filter things out to only show us the fields that relate to images so we're going to choose product image you'll see well nothing appears and that's because currently it doesn't really know what to display we can rectify that and make our lives a little easier so we can see exactly what it is we're working with by coming down to the settings option in the bottom left click on there and choosing the preview settings to open that up it says preview dynamic content as and this is gonna tell it to use some predefined dynamic data to populate this template so we can see what we're working with so we're gonna do is first of all tell it what type of data we want to use we're dealing with WooCommerce so we want a product next up you can see it says all so we're gonna click on them we're gonna just start typing in something that I know is in my database so we've got hoodies so you say hoodie with zipper is fine and then we'll say apply and preview that will then reload the page refresh things and you can see now we have one featured product or one product we can use the basis for building our template a toeloop template so in the Clickbank on this we're going to make this a little smaller we don't need such a large image we'll set that to be centralized that's perfectly fine and now we can go through we can setup all the extra things that we need so the next thing we want to put in is going to be the actual name of the products we're going to come back out to our widgets drag a heading widget inside the center that h2 is perfectly fine you can set this to whatever you want actually will set this to h3 okay so we're gonna do the same as before we don't want the title we want a dynamic piece of information pulled in from the products so we're gonna click on the dynamic tags option scroll down until we find full commerce and from there you can see we now have a range of different tags we can pull in this one we want the product title which is the name of the actual product itself and there you go you could eat with zipper we're gonna repeat the same thing again so what I do is I going to quickly duplicate this so we'll just click duplicate I'm going to change the data inside there we'll change this to h4 to make it slightly less important and weird says product title we're simply gonna remove that from there and we're gonna click the dynamic tags option again scroll down this time we're gonna choose product price and you see that will then pull in the price at which point we can style that and do what we want so using this method you could easy just keep on adding extra information in so you can make sure that anybody that's taken a look at the products they've added can see all the key information for that particular product and then leave it at this point because I don't think I need anything more in there for now well we are going to do is we're gonna drop in the option to start editing this and we're doing this inside the loop item because we need to have this edit option on every single item when we take a look at that listing inside our custom dashboard this will all become evident when I show you when we've actually put this together and you'll see what I'm talking about in more detail so I'm gonna do is we're gonna do a search for ACS there's our front-end for we're gonna drag and drop that underneath and you see this now pulls in pretty much what you saw earlier on the only difference now is that this is the edit option and you can see it says the post title is hoodie with zipper so it knows it's editing so it's gonna pull in a pre fill out those fields with the relevant data so we can now use basically the same kind of logic to go through and configure this so actions we don't want to edit post we want to edit the products are gonna come down and we're gonna say edit product again you've got to submit action so if you wanted to email someone when this is edited you could do that and you can also control what happens after you've made that edit I'm going to leave this to reload current page or post because it's just gonna reload the listing of the products so that makes more sense but you could use any of the other options if you wanted to and what we're going to do is we're going to scroll down until we get a form structure so we're gonna change this from edit post to edit product so it makes a little more sense or you can just delete that from there completely if you don't need it which is what we will do the button then you can see we've got update so we're going to say update product and then we got updates in real time over there and then we can go through the same we did before so our product you can see you got a product title default image and so on the product status so we can set that to whatever one so you may find that if someone edit something you may want to force that to go back into pending review or leave it as published now this is something that again I speak into shouty about to see if this can be expanded to take into consideration the published status of what you're editing at any given point and then either allow you to set that to stay in that particular status or to be updated to something different based upon various different things like the user role so if you're an editor you may have full access ways you may be an author at which point if you make a change to an article or content you've written you want to make sure that I get spending review those kinds of things so hopefully that'll be something that shall TV will take a little look into and hopefully it'll be something that'll expand this aspect of it for now we're just going to say we'll leave this as published product to edit current product or select product if you chose select product it will allow you to manually select the product you want to edit which obviously doesn't make sense in this example so we're gonna leave that as current product delete product options up to you if you want to allow people to delete if you do you can enable that and you'll have an extra button that allows people to delete a product I'm gonna keep this to just editing but the delete option is there should you want it then we've got the product feels so this is gonna work in exactly the same way as before we're going to come through and we're just going to enable the relevant fields if you want to set any of these to be mandatory fields you know you have to choose them and you can do adjust that so I'm going to come down we're going to set all these up just to make sure everything is in place and then we'll take a look at the final option which is for the product data so you can see now when we scroll down everything is all prefilled out from the sample product this hoodie with zipper so we'll come down we'll set these and enable all these as well I'm not gonna whatever it's set in these styling and so on on these you can do that like I said to make sure everything looks nice and neat and tidy for me I'm just showing you how it all works permissions this is where it becomes more important only logged in users administrators and editors like we said last time get rid of this select my user but what we do want to set this time is the dynamic selection so we have set this to be post author so this will just make sure that only the postal water will see these pieces of information and be able to edit this particular product so close the permissions down you can limit your submissions if you want to and again you display options all we're going to do in the display options this time is because obviously you don't want to end up with this kind of listing where we've got massive form underneath every single product so we can set this to show in a modal we click on that and then what we end up with once this reloads is just a section that has the Edit post button when you click on edit post that modal window will open up and then you can edit that form inside there and that's pretty much it for this section so we're gonna hit publish on they don't you what about any kind of conditions we're just gonna say save and close and that now is our loop item setup ready to be inserted into our edit page so we'll do that next so let's open up the in this product section and from there we're gonna edit this page now in Elementor we're gonna create our listing so once that's loaded in we're just gonna create a new section make a little bit of space above and below for this just so we've got a little bit of room to play with left on the bottom there we go okay so what you do now is we're gonna drag and drop in the posts widget so gonna drag and drop that into the now we need to do is just set up a couple of things first let's come down to the query I'm from a query we're going to change this from posts are going to bring it down and we want to choose products to choose products and you see that now just pulls in all the products but well that's doing that's showing all of the products using the default layout so we can't edit anything so the first thing we need to address is making sure this only shows the products related to the logged in user and this is where the advanced query options plug-in really comes into play so let us say this is a free plugin and it is worth its weight in gold for a lot of reasons you can see underneath the query search we've got a new entry called advanced query options I'm gonna click on there we're gonna choose dynamic user once we do that you can see it says dynamic user dynamic user options will open that up and we're going to choose post author is current user click on that and that's now we're gonna take a look at hi dinner's and check if I have any products associated with me and then list those products that office Lee all of the products currently are listed and associated with my account so this going to show all the products but this is filtering that I to only show things when I'm logged in it has logged in as another user that had no products I'd see nothing here but I could go on our products in using the add product option and then everything I add in once it's been approved will be listed inside there for me so that's the query side of things then let's drop in the pagination now because currently we only see six individual products I know there are a lot more so they simply drop in some pagination and you can see that puts that in there for us now come back to our layout though because you can see this is using the default layer and not what we've set up with those edit buttons and so on so what we need to do with their skin we're going to click and we're going to change that to custom and from there we now get an option that allows us to choose what custom template we want to use and this is our loop template we've just created so click it open that up and we're going to choose the Edit product or loop dashboard which is the template we just created and there are our products with our edit post option as well so now we've got that pulled in we can we filter things that we've set it up so only the logged in user can see their own posts let's hit update on there and we've basically done what we need to do so we can come over now into our test site we're going to go back to our dashboard will refresh this to make sure it's using the latest version and then we've got our view products options so let's open that up that'll take a sooner to our view products page and there's our products we can click on edit post for our WordPress pendant for example or pennant example click on there and you can see there's our WordPress pennant all the relevant details so I can easily come in now make the changes that I need inside there times descriptions change images and so on once I finished I can hit update product that will update it with the relevant key information so let's do so let's give our test let's change this from WordPress pennant and we'll just put update at the end of it and we'll just scroll down I will hit update product will have that refresh itself and you see WordPress pennant update as simple as that now obviously you still need to be careful because some of these products in this example be things like external affiliate products or they going to be very products and so on so they are gonna be some little quirks in there until that full feature site thing is released but if you're working with simple products at this point in time or you're watching this a little later where that update has already happened you will have access to be able to work with those more advanced different types of products now a CF front-end forms Pro makes complex front-end dashboard type design much much easier and personally I can't wait for the new features to be released if this is piqued your interest and you'd like to learn more about the plug-in at some of the use cases and check out the playlist next to the video and take a look at the deep dive into creating a custom front-end dashboard as always all the applicable links for everything I've covered in this video or in the description below managing 4c until next time take care

Channel: WPTuts

Views: 23,229

Keywords: WPTuts, woocommerce frontend dashboard, woocommerce frontend, woocommerce frontend manager, woocommerce frontend product manager, dashboard wordpress, woocommerce add product frontend, creating a custom wordpress dashboard for your clients, custom wordpress dashboard, custom wordpress dashboard for users, wordpress dashboard, wordpress user dashboard in frontend

Id: PCBUun10OV4

Length: 40min 50sec (2450 seconds)

Published: Fri Jun 19 2020