 So, in our previous video, we were able to add the add to cut button inside the different products that we do have here. And when we click on the different places, we're able to click add to cut. But we're not able to see our items because we've not themed our page very well. So, in this video, we're going to add the mini cut here so that people can see what they showed and it automatically goes to this section. So, let's jump into the code. Now, inside our editor, I'm just going to expand it so that we have full real estate. We are going to similarly use this WC get template and we're going to apply it to our front page in the section where we're supposed to have our mini cut. So, in here, I'm just going to overwrite this and then I'll close off my PHP. I'll tap this to make it just look a little bit nicer. And the template that we are looking for in this particular case is the one when you go to WooCommerce, go to templates, go to cut and then you're able to see the cut.php but we also have mini cut showing up here. So, we're going to reference the mini cut. Now, if you're not sure what's happening here, you can go back to the previous video or you can just open up your plugins directory on your server and then check your WooCommerce drag it and drop it to your editor and you'll see that we have the templates folder in there and in there we have the different files. So, in the templates, we are looking for the cut then we are looking for the mini cut and that's what we're going to have there. So, I'll save this, come back here, reload and you're going to see that now we have our mini cut showing up here. So, we have the images, we have how many of these do we have? We can view cut, we can check out and if I click add to cut here you'll see that we've just added five more roasted pumpkin. Let me just add a drink. I want some soda. Sorry, fresh juice, I'll click add and you'll see now we have fresh juice. Let me add this chicken kabab. I'll click add and you'll see that we have our chicken kabab showing up here. So, the shopper can have their experience right on this page by you just modifying and throwing this inside your theme. Now, for now you can see that we are depending on the template that is in the particular Wukamas site but we can also get this very code of the mini cut right here, copy it and just drop it inside our own folders here. So, in Wukamas we are going to create a new folder call it cut and then we are just going to copy the mini cut from here and then paste it inside our cut. So, paste this and so we'll have the mini cut so that if we want to make any change to our mini cut for example, I'm going to just add an h1 tag here to just show us that we are working in the right file. We are going to shout out mini cut right here and then I'll just come back to our preview, reload this and you'll see that now we are working from our own theme and we can make changes to this without the worry that whatever Wukamas does with their own particular file we are safe and our website is not going to change or break or customers have an experience that they do not know about which we have not implemented maybe we upgraded the plugin to a different version and there are changes in that template file those changes will not affect us because we have added that template inside our own theme so we have just this one line of code add this little file in here and everything is working out great so all we need to do is just style up these different sections and then we are going to be having our shop look like what we have here so let's jump into the bootstrap section of this and then just style everything up so that it looks really good so I'll start off here by adding a div with a class of raw and then inside here I'll just add a div with a class of core dash 4 and then I'll just duplicate that and then get this to be with 8 so in here in the individual sections as well add the different pieces so our image I'll push it up to here and of course we need to write some old tag for this so I'm going to add PHP here and then I'll allow us to just echo so we'll add wp get underscore attachment and we're going to look for the caption and the post id we want to get of course is get the id so I'll copy this get the id so that we can always just use the caption to name to give someone an id of what's happening let's say they have challenges with the visuals so you have to work with also people who are visually impaired so we can have our screen reader just read out the old tag so we can get from the attachment caption that we name inside our admin when we go to that particular image let's say this image when we are uploading it or when we're in the media library we can give it a particular caption in here so they can read that so we'll go back to the front end here and then we'll just clear up these last pieces so on these individual pieces inside this shell and then clean up whatever we need to clean up here save come back reload this and you'll see that now this is looking a lot better I just need to move our add to cut in the first side so I'll just do the same I'll duplicate this here and I'll change this to have something like 1 we'll make this 7 and then we're going to have our add to cut in this section then we'll just cut this template that we have here write PHP tags for this and then just dump it in there and then go and check out what happens so save this come back reload you'll see we have our add to cut showing up here and it's starting to shape up and look like what we wanted to have here so the only thing missing is the price and we can get that also from our on template so if we go back in here and check who comes if you look inside the templates again you're going to find that in the loop we have this price and it just shows you a span with a price and it gives you the HTML of that we don't need to rewrite that so all we need to do is come here to the loop just need to copy our price from the loop go back to our templates so in wukamas we create a new folder call it loop and then inside loop we're going to paste our loop right there of course add to cut is supposed to be in the loop so in my bag I need to fix that so that it's in there then we'll modify we'll get a chance to modify it so that was an error I did before so we have the pricing in there and then all we need to do is just close up all these things come back to our front page copy this PHP line we have here I'll duplicate this and then since we're working with the pricing file or the template we're going to change this to price and then save this when we come on the front end here and reload you'll see that now our customers can see the price the beginning price we go to pieces like pizza where you have differences in prices you're getting all this information and you can quickly add to cut or you can even remove from the cut and of course that's taking ages because we've not triggered the Ajax to work directly from our mini cut right here on the front page so let's fix that and I'm going to use a different method of bringing the mini cut where we just use the wukamas mini underscore cut function of wukamas and that's just going to bring in our mini cut so I'll save this come back here reload and then let me just add a few more items to our cut when I click to remove this however when I go back to my code in here and then I do a div and then add a class of cut content I'll tap this inwards and then I'm going to add another div with a class of widget shopping cut content and then I just move my mini cut in there so I'll move this option move the tab tab it to make it work and save then come back here reload this I'll just try to remove this quickly when you click it you see this is responsive in terms of our actions very well this is a little trick that I found that it helps remove the cash in the fragments and so on so it makes it quick for you to just do these little pieces of things and then your mini cut is working and you have a one page experience so the whole goal of this is so that your customers can shop from here do whatever they need to do then hit checkout and they are able to quickly go and do whatever they are supposed to do so in this case I don't want people to view the cut because they have already viewed the cut here and they can also sort of edit it from here so I'm going to remove the view so of course I can hide this with CSS to make it disappear or I can use some of the hooks embedded in wukamas to make this disappear the easiest would just be get the forward button so I would just display this as none and that would take it away but then choose the one that has checkout and make it display block so we'll have that showing up and having it go away the reason why the wc4 and made everything disappear is because the class is attached to both of these particular buttons so we can have our mini cut just having our checkout so that when you click checkout here we're just going to go to our checkout page which we're going to work on next now of course with the fixing of our mini cut you don't have to worry but you cannot change the template if you come to your mini cut inside your theme here you can still make changes to this and then when you come to your front end and reload they are still effective so just because on the front page we used this new method instead of using the template we can still work with this function to show our cut and still make our changes effective using just the simple function that we have here and these few classes attached to that particular page so let's fix our checkout page and its fields and some CSS to make our template look a little bit better don't forget to like the video if you've seen something new that you love and subscribe to the channel if you are new here otherwise see you in the next video