 Welcome back to the channel. In today's video, we're going to continue with our theme that we've been building and So far we are able to add new items into our cart. We can remove them We can be able to remove everything else that we have here and have our total calculating and Then we have the two buttons here that allow us to view the cart or to check out Now the one thing that is really missing is having buttons that can be used here so we have these items that are actually Variable in nature and that's why we have to click the select button and we see that this takes us to a 404 Now this should be a one-page experience for us And we are going to turn these select options that we have here into a little button like we do have right here So let's see how to do that And then we'll be able to click that button and then have a pop-up of the different variables That we can add to our cart Now of course when we go back into our dashboard and mean you'll be able to go to some of those products For example, when we see the barbecue steak if we choose to edit it You're going to see that down here. It's a variable product and it has different variations like small pepperoni That is with a different price from all the others and we have things like large pepperoni or large olives showing up So let's go into our theme and see what's going to happen as we change this So I'll open up my editor here And the first thing that we shall do is go now front page PHP and when we scroll down We'll get to the section where we are showing our different items Now the first thing that I'll do is I'm going to reduce this to about two I'll change this to eight so that this takes up a larger space and then I'll duplicate this one that we have here So that I can separate the price and also separate our actual Add to cut Item so I'll click this and then I'll save this now You'll see that we have our loop and add to cut PHP that is inside our newcomers here So I'll go into newcomers Check our loop and then I'm going to look at our add to cut now inside here. You will see that We actually have one a tag Checks if we have an add to cut URL it checks the quantity checks the class the attributes and add to cut So after editing that let me save it come back here And when I reload you see that things are starting to look a little bit better and tighter So in here, I'm going to change this select options into a plus button That will trigger off a model that we can use to have all our variable Items so let me go back into our code in here and let's check the loop to cut in here to see What triggers off those different items you realize that this particular code is the one that's echoing out They add to cut button or the select option So what I'm going to do here is I'm going to check if we are dealing with a variable product So I'll add this in quotes and say if we're dealing with a variable product And the way we are going to get this is by getting the product from this global that we have here And we're going to use the get type method that is attached to that and Once we get that we'll be able to know whether we're dealing with a variable or not and for now I'm just going to echo Va to allow us to see what's happening and if it's Not a variable. Let's say it's a grouped or it's a simple product then we shall have this else statement and we shall bring this back so that we don't break anything and So I'll save this Reload our front end. I'll come back to pizza and you can see we have a VR over right here So what I'm going to do right now is just change some things What we want to do ideally is what we have here in bootstrap When I come to these different pieces that we have here I can see a live demo and when I click this button You're able to see this model that is actually here So I'll copy this text that we see here Come back into this section. I'll switch in for what we have for Va I'll paste in this HTML Save it Reload what we have here when we come to the pizza You will see we have the launch demo here and when I click it we have our model Actually showing up right here So what I'm going to do next is actually adjust dynamic data and probably change this button that we have here Into what we want it to look like So the first thing I'll do is change this button into an a tag So we'll have it as a link and we're going to wrap it around a Font or some icon and this icon is going to be a plus circle So I'll save this come back to my functions And then I will enqueue a new style which I'll call font or some CSS with this ID I'll then add this CSS link and then Attach that there are dependencies. It's a version one And it will be allowed on all kinds of media If you skip the video on how to enqueue scripts and styles, please watch it It's part of this series then I'll save everything that we have here I'll come back to our front-end reload and when I come back to our pizza You're going to see that we have these big blue icons showing up here So when I click on them, we still get our model But now it's looking a lot better like we want it to be Okay, so the next thing now we need to do is just add our dynamic data in here We're going to clean up some of these things like the save changes and close We don't want that to be so we are just going to use the X After we finished adding or buying our items. So I'll come back in here. We have this Close which is the dismiss button I Remove this model footer and then inside here is where we shall add our body and then we shall also add an ID in here so that we have different and unique product IDs showing up here So let me save this and let's see what we're actually going to get when we've add up this product Right here. So so what I'm going to do for now is just come back to our front page And then allow this to become eight so that we can see more of that our changes to one Serve it so that we can see what's happening. So in here, I'm going to look for one thing I'm going to look for the slug which will act like our ID because it's unique Come back here and undo what we did to make sure that all our pages are working. Well, come back here I'll get this example model And what I'm going to do is add some PHP To it by adding these small Quotations and then coming here adding product and then our chain on the slug And once I have that I'm going to save it Come back here. Reload what we have here I need to get rid of this Vadam so that it stops showing up. So comment this out Save this reload When we come back to pizza and hit this We'll see we have that when we close will see that we have all of this showing up And if I inspect the element, you're going to see that we have Different things showing up all together. So we have barbecue pizza And then we have this model of barbecue pizza right here. If I come to the margarita You'll see that we have margarita pizza We have the model for it and we have all the different information showing up here So we can be able to put all our different items in the model that we've just made and then Check it select it add to our cut and then we'll be out of there So in the next video, I'll show you how we can implement All of that inside our model right here if you enjoy this video, please give it a thumbs up let me know what you think in the comments section below and Don't forget to subscribe if you're new here and if you want to support the channel Please check in the description how you can be able to do that. Otherwise enjoy your day