ACF WooCommerce Products Custom Product Pages | Elementor Pro

so we take advanced custom fields to the elemental pro to templating system and WooCommerce we have a great platform for creating more unique online stores and in this video I just wanna tell how we can use those three tools together to create something just a little more unique so this industry stick around something you're gonna really enjoy what we cover in this video my name is Paul Z and welcome to wptouch the channel where I help you create beautiful WordPress websites if this is your first time on the channel please consider subscribing and clicking the bell icon below to become part of the notification squad okay so if you've ever fancy taken WooCommerce just out one step further and add your own custom information in you may have thought well how would I do it and while --whoa college gives us some control there's a more flexible way unless using advanced custom fields in this video I want to demonstrate how easy it is to start using advanced custom fields with WooCommerce and then combining everything into a custom template with the ability of using elemental pro to point those template builder so hopefully what you'll find by the end of this video is you'll have a good understanding of how to use these three tools in conjunction to create something just a little bit more unique a little bit more bespoke so let's just jump over into WordPress over at the dashboard and take a look at how we start working with these three tools so to follow along with this video you're going to need to make sure you've got a couple of things downloaded and installed into your WordPress first of all you need advanced custom fields now this can be the free version for this example but if you want to take advantage of all the extra things there is a pro pack available that gives you extra features you can use alongside that we need to make sure that we've got WooCommerce downloaded installed and the basic setup done you can just use the wizard on that I've got videos on the channel that'll take you step-by-step through for this demonstration I'm not too worried about how you do that just that you have it installed also you need to make sure you've got elemental pro 2.0 at least or whatever the latest version of version 2 is that it's available so we can tap into the templating system rather than that we pretty much are good to go now for this example I've just already gone through and installed ocean WP is the theme I want to use on one of the predefined layouts that's mukombo centric to make sure we've got a good starting point and this is what you can see this is a product page so you can see is a custom layout and we're gonna kind of override that with and create our own custom layer we're gonna use the information that's already been set up as part of this particular template okay so we're pretty much good to go first thing to do is jump over into our dashboard and we've come down to the field group which is part of custom fields so once we've done that we can now go through and create the first set that for the fields themselves so we're gonna click on add new we're going to do is we're gonna put in here we're gonna put custom product details now you can name this whatever you want this isn't particularly important from my example this is more a case of just a sample obviously when you do this make sure you name it something that's going to be sort of representative of the content you're going to put in and once you've done that the next thing we want to look at is the actual location rules we'll come back in a moment to create in the fields themselves but the location rules specify when and where this information will be displayed inside the admin section of will commerce itself so the first thing you want to do is to tell it when and where we want to use it so we're gonna do is we've got post type you can see we expand that out and we have a ton of different options available in there and what we want to do is you want to choose the post type now you might think well when I do a post we deal with products but products basically are a custom post type that have been set up as part of all commerce so we take to use a post type is equal to and then you see by default it'll say post we click and expand that out when we've got WooCommerce in store we now have additional options available for it so the rules we can use so we're gonna say we want this to be applied to products so this by default will now say any post type that is equal to a product show the fields that we want to create and that's great if you want to apply a globally to every single product inside your wall commerce store but if you wanna be a bit more specific which is something that I want to do I can set up a second rule which says that it also has to adhere to this second rule before this content will be displayed so you click on and at the end and you can see now this brings that post type is equal to again and we were all the same options in me this time we can choose a second rule that has to be sort of met a second condition to work in conjunction with the first and for this we're going to choose the post taxonomy it's going to click on there say is equal to and you as testimonies at the moment we don't want that but now if we open that up we have a lot of different options and if we scroll through you can see we've got all different kinds of things tags product visibility product categories product tags and so on so you can set this to whatever you think is relevant to you but for me for my particular example I only want this to be applied to men's clothing anything this helps I'd the men's clothing category when a product is inserted will be ignored it won't show these custom fields so you'll say men's clothing and that's the condition said that we've now told it what we wanted to do it has to be a product and it has to be in the category of men's clothing so there's what we need to do if we scroll up the settings now we can go through and we can customize this we can specify the position we could put a description there we can hide and toggle all the different kinds of pieces of information that are part of the actual post type in this example the product we can do what we want in there I'm going to leave those as as they are for now I'm going to do is gonna click and add in a field so this time we're going to come in and we're gonna say really simple we're gonna say product material go to the next field you can see that ultimately fills that out next that we have the field type text is fine we're going to leave that as is and if we want to apply instruction specify its required and default values and so on we can do that if we want to we'll leave that as is for now we can come back at any point if we want to and adjust an edit and add new fields in it's very very flexible when using advanced custom fields so next step we're gonna come in and add another custom field in for the second custom element that we want for this we're just going to put product fit now these are just examples like I say it's just to give you an idea of how this works okay so we've got that in it click in the next field you can see it already pre fills that out feel tight we can leave that as text if you want or we can keep on going through this as much as we want until we get all the different elements that we want in me I'm gonna leave it at that that's enough for what I want to do to start off with the final thing I need to do is just go through and save this now so to come back up and we're gonna go for publish because it's the first time we've made any kind of save for this that's now added that in so our field group is set up with the conditions you want to use and the different custom fields so that's the first part so let's just take a look now to make sure that everything is working the way we expect it to let's cover twelve product section and go to all our products once you go in there you can see we have the first item is under music category as a test category everything else is underneath the men's clothing so let's open up this ultra skinny fit suit first of all which is categorized and music not under men's clothing so click on it and we come in you can see those custom fields and nowhere to be seen we've just got the normal fields we have plus the ocean WP settings section which is specific to the theme that we're using however if we come back out of this that we go back to all our products and we open up a different one which is in the men's clothing section and click to open that up you can see we now have our custom product details so product material and product fit so they are in me now if we just change this and take this out of men's clothing just disable that you can see they immediately disappear because the criteria we set up hasn't been met if we could just select music or uncharacterized then nothing will show up but once we enable men's clothing those custom fields will now show up okay so let's just disable those so we now know that that all works perfectly well exactly as we want okay so now that we've covered off using advanced custom fields we've set the basics that we're now going to move on to the templating system with Elementor pro 2.0 and how we can set this up to start to display the custom fields that we've added in it's very very easy but also incredibly powerful once you get used to it so let's just open up the templating system and start building at our first template we're going to do is going to come down onto the left hand side we look at the element or I'm gonna go to my templates once you go to my templates section you can see any of the templates we have created will be listed at the moment there is only one we can also then sub categorize them and filter them based upon all these different options which are different types of templates so we could go in to single product for example and start working there or we can click on add new and that'll do the same thing just allow us to choose which particular type of template we want to work with so let's go down that road let's just say add new you can see we can now choose the type of template and all these sections match exactly what you saw the different tabs in the previous screen we're gonna come down and say we want the single product we're gonna give this a name and we're gonna say custom men's clothing so we know exactly what this is going to relate to once we hit create template that's notice we can go in and choose a predefined template we want to which we use the base it and starts customizing it all we can start from scratch completely for the ease of use we're gonna choose one of the predefined templates that are part of elemental pro 2.0 so let's use this first one just click to add that in there it'll show me a preview what's I'm happy I just click on insert that'll load all the assets in and it's ready to start working so you can see this is the layout that we're working with so everything is pulled in into this predefined layout now we not seen any of the custom fields that we've just created so we need to start adding those in now obviously if you wanted to you can start completely from scratch and use any of the different widgets on the left hand side and I've covered this in a previous video so if you're unsure how to start working with this check out that how to create custom pages with WooCommerce and Elementor pro 2.0 that'll give you a good head start but I'm just going to assume that you've already covered that and we're at this point now okay so we've got the template set up the next thing I want to do is start adding in our custom fields now for this example we're going to use this right hand column you see it's got things in there like single button blazer and so on let's just assume it didn't have that information there and we'll take a look at change in that later what we need to do now is put in our custom fields it's very easy to do if we come over to the left hand side to the widgets we're going to close the product in the WooCommerce auction we're gonna come into the basics section I was sitting in a dragged over a text editor position it where we want which is going to be above the price that will then just drop in some placeholder text which we can very easily change but what we're interested in is this dynamic option and the dynamic dynamic option will allow us to choose where we pull data from to display on the page once we click on that you can see it pulls up a list of all the different pieces of information we can pull in so you've got custom fields you've got post ID terms and so on if we scroll right the way down you can see we've got a CF fields which is our advanced custom fields if we click on the a CF field the very first option you can see that pulls in the ACF fields option but it doesn't actually show the fields that we want if we click on the little wrench icon you can see it now pulls up the key inside the key we can expand that out in any of the custom fields that we've created will now be listed for us to choose from so the first one we've got is product material then product fit so we click on product material we probably advanced and then we can print some before and after text if you want or a fallback option so before we're gonna say product material come on Alice pace after we leave that as is now you're gonna see that nothing actually displays on the page and the reason for that is because currently we look at the product that doesn't have that particular information in me so how do we change that so we can view it it's very very easy if we go to the left hand side and we just click on the preview option you can see we have settings if you click on settings you can see that now brings up the preview settings using the ultra skinny fit suit if we expand that out we can now start typing in the actual page that we want or the actual postal product we want to use as the basis for our template building so let's just put in the actual entry we want so we want to use this slim-fit tweed blazer click on me and we can click on apply and preview I'm not an update and providing it meets the criteria and has some information they will start to see it being displayed so you can see product material 100% cotton so we can now come in and we can duplicate this and we'll just do exactly that so we'll just say duplicate now obviously the second one's gonna be an identical duplicates we just need to make some changes to that so we gonna come to the ACF field for that one choose the key and say product fit and they just change the actual before and we'll just say for like fit and there we go now the next thing with this is we can also use HTML code in if we want to so let's just expand that out you see the mobile product fit it doesn't really stand out very well so we can do we could simply put in strong at the beginning and the end of that and we now specify that it's going to be in bold where is the slim fit which is the actual text afterwards comes out in normal font and that's very very easy to do so now if we wanted to we can create as many different custom fields as we want and then build those into our template system so that's the template set up now how do we apply it to only work on specific products well let's take a look at that next so then we created a template the final thing we need to do to make sure this works in the right way is to that the custom conditions that we want these custom conditions basically say when is the template going to be used and when is it not going to be used the beauty of this is you can use it in two different ways you can use it to only display your custom template when it's required and then fall back to the default template that's part of your theme or you can use it with multiple different conditions and you can have different templates for different parts of your world commerce site and then use different conditions to call them up at the relevant point it's a very very flexible system but also incredibly powerful so to create a condition for our template is very very easy with elemental pro all we need to do is come down and click on the publish button once you do that it says where do you want to display your particular template so we click on add a condition you can see it says include all products well this would apply it to every product which is not what we wanted to do so we can do if you can click on there and we can say in a category simply click on that and you can see currently it says also we expand that out we can now start typing what we want in there so we know this is men's so we start men's clothing and then select that so there's the condition set up only display this template in the category when it matches men's clothing you can also use exclude so let's just say for example you wanted to have you had tons and tons of categories and you only wanted to apply this to a specific one you could use exclude so it doesn't apply to anything other than that one there's lots of ways you could use this and if you want to you can build up multiple conditions in the same way you could do that when you usually advanced custom fields at the beginning so once you get used to conditions they're very very easy to work with okay so we've done the basics let's click on publish and that's our new template created ready for us to start working with that particular category okay so now that everything is in place let's take a look at this in action let's open up our test site and just take a look at how the template works and how it displays the custom information from advanced custom fields using our custom template we'll all those tablet conditions we've applied to it so this is a demo site and as you can see at the mall we look at the ultra skinny fit suit and as you can also see it doesn't display the information that we've just said that was part of our template the reason being is because this is assigned to a different category this is assigned to the music gallery and not men's clothing so if we simply come back at our collections which will show all the different products we have we can then go through and find the product that we know has these particular custom fields and this custom is based applied to it so we scroll down and we'll find there's our slim fit tweed blazer if you click on there to go inside and as you can see if I scroll down there's our custom field information inside the template so those conditions are now working to make sure that it's displaying the information we want on the relevant section of our site and any way that doesn't meet those criteria won't display those custom fields now well this is a really simple example you could take this way further and start to create much more complex pages that have custom fields for the relevant different sections to make sure that the ecommerce store with WooCommerce really is as flexible as powerful as possible ok so there we go that's all the things I wanted to cover today hopefully worse Dennis is giving you a great understanding in how you can use advanced custom fields in conjunction with the templating system Elementor pro - andrew commerce to create more bespoke more unique websites for you or your client if you did enjoy the video please give it a thumbs up and smash that subscribe button become part of the notification squad and we notified every time new content is added if you didn't enjoy the video give it a thumbs down but please let me know in the comment section why you didn't enjoy the video of why you didn't find it useful speak in the comment section if you enjoyed the video please let me know in the comment section below any comments questions or feedback on this video or what you'd like to see covered in future videos again please leave those in the comment section below well - you pour see this has been WP test and until next time take care

Channel: WPTuts

Views: 54,431

Keywords: acf woocommerce products, acf woocommerce, acf woocommerce product page, acf woocommerce product pages, acf elementor pro, acf wordpress, acf wordpress tutorial, advanced custom fields woocommerce, advanced custom fields, advanced custom fields pro, advanced custom fields wordpress, how to, advanced custom fields wordpress plugin

Id: Yw1IdgaBv6c

Length: 17min 6sec (1026 seconds)

Published: Mon Oct 01 2018