 Welcome back to the channel friends. In today's video we should be able to go to our variable products, click this button that we have here and we should be able to choose the different items we want to have on our plate. So let's do that. In our previous video we were able to add a model so that when we click this little button here we're able to see this pop up or what you call a model showing up whenever we are on our variable products. So if you go to the single products we don't have that. We just have this button that clicks and you add everything inside the mini cut. So what we're going to do is have our variable products so that when you click this model you should be able to see the particular variables that you have from your admin area showing up in that model and the variables that I'm talking about are these particular attributes that we have here the sizes and the accompaniments showing the different variations of the different pizzas that we have. For example this margarita pizza should be able to show us all the small pepperoni the small with olives and give us all those options for us to just choose from. Remember there is always good information in the description down below this video and you can subscribe to the channel if you think you get value every other video that comes out and turn on the notification bell to remind you of whenever new videos are out. Don't forget to like the video if you enjoy the content and you think you've got value for it. Let's go back to this particular development area and we shall dive inside the code that we have here. So the first thing that I'm going to do here is go to our and then go to our loop and we shall look at the ad to cut loop because that's where we're having this model being triggered and the first thing that I'm going to do is try to restructure all of this so that we are able to pass in our php much much easier. So I'm going to escape this php here and then I'll open the php here clean out the semicolon after escaping the php and opening it here we need to add our closing and opening tags in the php variables that we have here so that we can still have that dynamic data showing up so I'm going to get this php tag that we have here and I'm going to keep adding it in these locations where we had this kind of idea so I'm going to look for all these places open php there and then I'm going to look for these ends of course the first thing that I need to do is add a semicolon then close the php so that it works properly now all that is left is to select these pieces with our product and then we are going to add echo to them so that we are having that particular information echoed straight into our html so when I come back to the front end here and reload this we shall go to pizza and you're going to see that when we click this we have our model showing up now that was necessary for me because I'm going to now add a number of php lines in here that we need to be able to showcase so I'm going to come back here and I'm going to open php again and since we already have this global of product here we don't need to add it in here now the way we get our variables from our admin area is by simply using a couple of lines of code so we are going to just say vadam and inside this vadam we're going to use our product object that we do have and this object is over class it uses the wc product class and on that class it has particular methods for example we can get default attributes and since this is a method we are going to just pass this in so let's go back here reload and we have an error we have an unexpected semicolon and that's because in the vadam I don't need to pass that semicolon I just need to come back here reload and when we do our pizza click this we are able to see that we are now actually getting the variables that we have we have the small size and we also have the accompaniments which is giving us the pepperoni now this code that I put in gives us only the default attributes meaning that I am going inside this barbecue steak pizza in the admin if I go inside the barbecue steak pizza I'll go to products go to barbecue and then when I go down to the variations you're going to see it's only giving us this default the small and pepperoni which is good but we need to have all these other items so that we can use radio buttons or select or drop downs whatever you want to call it on our area here so that a customer can make a preference of their choice now what we are going to do is we're going to loop through the different attributes that we do have and we're going to get back that information so let's go back into our code we've been able to get our product defaults so I'm just going to save this and say let this be our default attributes I'll save this inside a variable and now what we're going to do is we're going to get a for each we're going to get a for each loop and we're going to be looping through all the available variations so what I'm going to do is duplicate what we have this and what we have here and I'm going to call it available attributes and I'm going to get this value and say for all the available attributes that we do have let us loop through each one of them and we're going to say as a variation values so we're going to be getting those as variation values down here now what I can do is I can just get this right here let me vadamp it so that you can be able to see from step to step what we are getting the thing that we need to do is we have to get a for each statement here because we're getting back arrays of data and we're going to do some crazy things inside here so for each and inside that for each statement we're going to get the variation values and for each one of those variation values that we are getting we need to get the attribute itself so we'll get attribute and we're going to say for each one of those as a key and for each here we are going to use our arrow function and we're going to say let us get the attribute from each one of those so I'll just get this vadamp here move it up let me see what I get in each one of those attribute values so copy this paste it here and I can say I made an error when I was duplicating this I made the same variable it's supposed to be get available variations so I'm going to get this and change to variations now we can vadamp to get to see what we get in both instances I'll first move this up here so that we can see the variable attributes that we are getting I'll save this and then at the next stage I'm also going to vadamp something different but let me first comment this out and let's see what we get from the variable attributes I'll come back here I'll reload go to pizza click this icon and you will see that we have an array of data now inside this array we have a number of things so we're going to look through this array look through this array and get to the attributes that we have here and we're going to see that inside this array of attributes we have attribute sizes and we have attributes accompaniments so when we come back to our code remember this is giving us the whole array that we are getting now we loop through this array that we get and then we shall be able to get the variation attributes that we have so these are the available attributes that we have here when we loop through we get these attributes that we are chaining here you can see I'm looping through each one of those values I'm getting the attributes from that and I'm saying let each one of those be an attribute value so the thing that we are tapping from here is this attribute sizes and attributes accompaniments so for each one of those attributes value what we are going to do is we're going to strip off this word called attributes underscore we're going to strip that off and the way we do that is we use the string replace function of PHP to do that so inside that string replace is going to expect a number of things inside it so in the string replace we are going to pass in of course we want to remove the word attribute underscore after removing it we don't want to give it anything so we leave that empty and we need to pass that as key because this is the thing that's giving us the information we need this is the key of that particular loop and it's giving us the information that we need so we pass it in here now what are we going to get after this at that point we're going to get what we call the attribute name so we'll save this as a variable now if you want you can still get the attribute name here and then you can and see what you're getting so if i come back here and reload got pizza and click this you're going to see that we're going to have all these different things that we are looping through and we have sizes here we have accompaniments there we have sizes again we have accompaniments here but we don't have that word attribute on each one of those ends okay so that's good step one accomplished now what we're going to do is we're going to say if that attribute name so we use this if statement we're going to say if that attribute name is equal to we'll use two equal signs and say if it is equal to what we call the targeted attribute now you're going to see that now we're introducing another variable that we didn't have here so i'm going to copy this and then i'm going to go all the way up to where we have the global here and i'm going to say if the targeted attribute is equal to sizes i'll tap that as a semicolon if it's equal to sizes at that point what we're going to do is we're going to say get the default value so we're going to get the default value which is so the default value that we want to get is equal to the product and remember that's a class that has a number of methods so we're going to get the get variation default attribute method and inside that we're going to pass in the attribute name so we get this attribute name from our if statement and then we pass it in here so i'll save that and we're going to add them to see what we're getting here so i'll get the default value copy this put this in here i'll uncomment this let's see if we are getting the sizes that we have here so i'll go back reload this come back to pizza i see we've broken something let's go back and see what's happening and we have a typo here this method should be attribute so i'll save this come back reload go to our pizza it's now not broken when i click this you'll see that we are now having small small small small those are four and then if we go here five six seven eight nine they're all small that we are getting here so that is a good indicator we're now going to get all the small items after getting this default value we're now going to say inside here if our default value that we get here which is small for now if we get that default value and we say it is equal to the attribute value which we got here so if it is equal to the attribute value we're going to copy this pass this here then we are going to set all the related variation IDs and make an array of them so we're going to say let's get the variation IDs and we're going to say that's going to equal to the variation values and inside those variation values we're going to just attach the variation ID so we're just going to make an array of that and then of course this should be an array so i'm going to set this variation IDs here as an array i'll copy it and vadampit at the end of the day so that we can see what's happening but we need to set this way earlier like we did with the sizes we need to set it here variation IDs and say it is equal to an empty array so that we don't get an error at the end of the day when i come back here and save this come to our front end reload got a pizza here and click this you're going to see that we have all these different things showing up so we have the integer of 24 and on 24 now we're changing on 25 and now we have changed on 26 and so on you're going to see we have 26 there 26 showing up and we have all the different IDs that we need to have our different variations now with those IDs we can be able to go and get the different products using these variation IDs that we have here so what i'm going to do is come out of this for loop of course i'll comment out this vadamp so that it doesn't give us other messages showing us the dump and we're going to say if now just to make sure everything is running right we don't assume that we have variation IDs let's assume our shop was broken and we don't have variation IDs so we're going to say if they count if we count the variation IDs and say if it is greater than zero meaning if we have variation IDs in our array then we should be able to do a for each and inside that for each we're going to be able to do our particular query of the product so for each of those variation IDs as as a variation ID i'm going to say the first variation that i'll get is going to equal to the wc and i'll use this method wc get product which will help me get the product and i can pass in the variation ID in here so that we can be able to use this so i'll copy this and then pass in this variation ID i am just going to vadamp that so that you can see what we are getting so let's get the variation by saving that come back to the front end reload come to pizza click this and you're going to see that now we're getting the different variations we have the barbecue pizza of course here and it has all the different items and things attached to it and when we scroll over and over and over again we have it also showing up we have the small olives as much as we had the small pepperoni showing up inside here so what we're going to do is get the different names of these and then put them inside selects so since we have each one of those variations we can be able to get the variation attributes from that so i'll duplicate this and we're going to say what we want to get is the variation attribute so if we're getting the variation attribute all we need to do is get this variation that we have here i'll copy this and i'll say let's get that variation and this has on it a method that's called get variation get variation attribute i'll save this i'll first copy this save this let's see what we get as a variation attribute i'll reload this come back to pizza click this and you'll see that we have small pepperoni we have small olives we have small cheese which we automatically had before here so we have small pepperoni small olives small cheese and we have that showing we have medium pepperoni and all this we shall be able to get all those if we want to get them so i'm going to come back here and then of course since we have this we are able to dump them in particular html that we want to use but before we do that i also want to be able to get the variation price so i'm going to get this variation i'm going to say let's get the price and of course i want to make it a little bit obvious i'll say variation price the variation price is going to be equal to the variation and the method that we are looking for there is the method is get price so on that variation we want to get price and that's the method we want to use i'll copy this variation price from here put it here serve this and then come back to the front end go to this reload what we have here i come to pizza click on this and you're going to see that we have this price of 6.0 we have 6.2 and we have 6.5 just like we did in this particular area so 6.10 and then 6.2 then we have the 6.5 right here now that means we can be able to chain something like this we can be able to escape the php here open the php again and we can introduce html in this particular location so for example i can add what we call checkboxes for example so the first thing here that we'll need to do is add a label so we'll open our tags add a label and that label has a four statement which is equal to something and that's usually the name of the input that we have here so i'm going to say input i'm going to put an input it will have a name and then it will have a value it will have an id and then of course it will have the type of checkbox so i'll say checkbox here and close this off so the one thing that we want to put here is the variable attribute so we can copy this variable attribute and then put it in php tags here php echo variation attribute i'll copy this here test it here add it as a value add it as a type and then i'm going to save this let's come back and reload and see what happens on the front end i'll reload this come back to pizza click the plus sign and you're going to see that we have these different checkboxes showing up here now the reason why they don't have anything is because i forgot to add the closing of the label and inside that label i should have put that variable attribute showing up here so save that reload pizza click this and we have this as an array now we need to remember that this variation attribute was actually an object so i'm going to add this i'll come back to our front end reload come to pizza click this and you will see that we have the attribute sizes and the attribute accompaniment so we need to copy this and copy the accompaniments and what that is going to help us to do is we can be able to get a full name for example i can say the full name of the product is going to equal to the attribute sizes i'll also copy this accompaniment paste it here and what i'm going to do is get the variation attribute object pass it in here and say what i want to do is get these attribute sizes and i'm going to chain onto it the variation attribute and then of course that is part of the array i need to put that in brackets and in here i can put some space put a dot and then put two with a space and that would be the full name so i can get this full name copy it from here and then i can use it to replace all these parts replace them with full name serve this and then of course on that on that i don't want to forget the price so i'm going to get the variation price copy it from here and then just attach it to the name so i'll do the same thing paste this here and then copy this and put it in here save of course add a semicolon here save and then come back to the front end reload here on the front end go to our pizza click the plus sign and now you will see that we have the paroni it has the price of that and we have our small labels showing up here so we can add small divs to allow that to break out say breakpoint of that reload this and click this so we have someone clicking on this and getting whether they need to do this now remember we wanted someone to be able to just choose whether they want a pepperoni or whatever it is we want them to be able to choose the more orders they make that's okay for us that's what we need to have so we have the small pepperoni small olives we have extra cheese we have all of this now if i want to be able to allow all the different things that we do have here if we want to get all we just need to take out this default value is equal to the attribute variation i'll just close this out for now save it come back to our front end let's reload what we have here i'll go to the pizza click on this now you see that we have all the different items showing up here someone can be able to choose this and then they have the pricing now i know this looks a little bit waft so what we can do is we can change the input to come before the label now of course we would like to add the currency symbol here and then also move these checkboxes to the beginning here so i'm going to come back to our html and the thing that we need to do first is to get this input above the label so we'll get our label here cut it put it before the break tag we'll save after rearranging come back to the front end reload this you'll see that we have this showing the way we want it to show of course the pricing is not yet with the symbol and what we need to do there is just come back right here where we have the global product we're going to check also for the global wukamas and once we have that global wukamas showing up there we can be able to use one function of wukamas and that is the function which is called get wukamas currency symbol and we can access that there and we're just going to chain it on here i'll save that come back reload go to pizza click on this and you'll see that we have our dollar sign showing up here and we are able to choose any one of these items here and then we are able to add them to our cut this video has really gotten so long so in the next video i'm going to show you how you can actually add this after selecting this then you'll click the add to button and that will send your items to the mini cut so thank you for watching the video i hope you enjoyed it give it a thumbs up oh don't forget to subscribe to the channel if you're getting value for your time thank you and enjoy your day