‫hey whatsup guys and welcome back.
‫So in this video, we will be working up with the product slider so you can see that as I promise that
‫I will show you how you can add a product slider here.
‫So instead of the latest products, you can add or show a product slider or if you need any product,
‫say, a slider for a specific category, you can definitely show that to be will be working up for that.
‫And you will be amazed to see how easy that is to create.
‫So let's go to let's get started.
‫First of all, all you have to do is to go to the dashboard.
‫And now you have to go to the plugins and then you have to hit ad new.
‫Now, here we are.
‫So now what we have to do is to search for a product slider and a product slider mean we want to use
‫a product, Corozal.
‫So what we have to do is to just come up here and now we have to search for product Corozal over here.
‫And it's going to give us the results right here.
‫So you can see we've got this, but it has got four star reviews.
‫It has got three started views.
‫But this one is right here and it has got 20000 active installations.
‫And it was updated last two days ago as well.
‫Well, it's not untested with the WordPress version that I'm using right now, because that is the current
‫version.
‫So it will be just tested later on.
‫But you can see that it was tested two days ago and it has got more star views.
‫So what you can do is that you can click over here and you can see and you can read their documentation,
‫too, as well.
‫So you can see we go down.
‫We have got these stuffs that they are giving right here.
‫And some like this, you can go to these screen charts so that you can see how they are giving us these
‫these things over here.
‫So here it's kind of really great.
‫So what we're going to do is we're going to hit install now.
‫And it's actually installed.
‫And now you have to hit activate to activate this right here.
‫So now I can see that it's activated and here is no settings, which means that we have to look for
‫something here.
‫So it's right here.
‫It's a W CPS that stands for RU Kamalesh products later, but they're writing here pick plugins anyway.
‫So let's just go ahead and let's click all WCP.
‫And here we are.
‫You can see this is how it's looking.
‫It sees no WCP is found.
‫And we've got this all WCPS layouts as well.
‫And it sees no WCP is found first.
‫Just go to all WCPS and let's hit add new.
‫And you can see now we're right here.
‫So it says that you have to create a layout first, then you will be able to do that.
‫So what we do is that we will have to create layout.
‫And once he will hit, he will be taken to all WCP s layout.
‫And now you are in the add WCP as layout.
‫So what you can do is that you can name it as layout one.
‫And now you have to basically decide that what are the things you want to add to your this particular
‫layout.
‫So first of all, we will be doing the start element and then we will be adding the thumbnail.
‫So thumbnail is basically the image of the product.
‫And then we will be adding the product title.
‫OK.
‫And after that, we're going to be adding the product category.
‫And then we will be adding the product price and the rating as well.
‫So if they have any rating, we will be adding it before the product price.
‫And then we will be adding the add to cart.
‫So that's all.
‫And then we will hit wrapped end.
‫And so once you do that, you will see that there will be your layout preview, which means that it
‫will show you how your layout will look like.
‫So what you can do is that you can hit publish.
‫And once this is published, a layout will be updated.
‫And this is how your product will look like.
‫This is kind of really big.
‫But don't worry.
‫It will be much better when you are viewing it.
‫It's on your theme.
‫So this is how your products will look like.
‫No, let's go ahead and let's basically click add new to this WCPS
‫So once you will click, add new over here, you will see that.
‫Now you will have a layout.
‫And this says layout, one, which means that this is the layout that we have created.
‫So now what we have to do is to just add this and we will be adding here latest.
‫OK.
‫And then which you have to do is to just go to the slider option.
‫So now you have to basically just tell this slider that how many products per row you want to add.
‫So per column.
‫So.
‫So we'll say that we want to show five products per column.
‫And the reason for that is because we are showing five right here.
‫OK, so we are showing five right here.
‫So we will be adding five here.
‫OK.
‫And then for the tablet and small desktop, we will show four.
‫And in a mobile device, we will show two.
‫That's all.
‫And now we have got these stuff.
‫These stuff is something that we will be talking later on when we are done with the products later.
‫So now let's go ahead and let's go to the Equidae products.
‫So any here you're going to decide that how many?
‫Maximum number of products you want to get from the database and you want to add to the products later.
‫So you can decide.
‫I would recommend you to use this 10, 20 or.
‫It totally depends upon your needs.
‫Now we have got this product, taxonomies.
‫now taxonomies is something like crap product category and product tag.
‫So what you can do is that you can decide which product categories you want to add in these things.
‫So since we're talking about the latest products, which means that we want to show every single product
‫that we add to our website.
‫So what we will do is that we will come up here.
‫We will click over here.
‫We will press control our command.
‫And we will select every category that we are adding over here.
‫So we are going to select every category here, which means that any category that we may add in the
‫future, we want them to be added directly onto the slider here.
‫And then what you have to do see system like this seemed like this.
‫You have to go to these product tags as well, and you have to select every product tag from here,
‫because anything that we're going to add in the future, that's going to be added right here.
‫Now, here we've got the taxonomy relation.
‫So what this is, this means that either if a product in this particular category or if a product and
‫this particular tag, we want to show them right on our slider.
‫So this means that and if you select and then this means that the product should be in the category
‫and the tag, too, then we will show the product.
‫So there is a difference.
‫You can see that.
‫So we're going to be selecting this or.
‫We are showing the latest products.
‫And then you have to go down.
‫Now you have to select query order.
‫So first of all, we will be setting this two query order to be descending.
‫Okay.
‫And then which we have to do is that we have to drag this date above because we have to descend them
‫with the date of the product that was added.
‫So now we have to set this to descending.
‫So that's all we have done.
‫And now what you can do is that you can go down.
‫And here we've got a event that you want to include out-of-stock products.
‫But you want to include feature products for the you want to include on sale products.
‫And so this is right here.
‫So we want to just select no check here and we want to basically exclude those products.
‫Okay.
‫And now what you can do is that you can come up here and then you can go to the style.
‫And here you can, , for these stunning as well.
‫So let's just go ahead and let's go to the shortcode over here.
‫Let's get this shortcode.
‫Let's copy it and let's hit publish over here.
‫So once you do do publish, all you have to do is to just come up here and here for these latest products.
‫We will be adding that code.
‫So what we have to do is to click edit for the elements here and now here for the latest products.
‫Okay.
‫For this particular thing, we will be adding that WCP s okay and very going to hit update over here.
‫That's all you have to do.
‫And now let's go ahead and let's view the Web site.
‫Let's see how does our Web site look.
‫So here we go.
‫This is our Web site is looking at this is kind of looking a bit ugly.
‫This is really very big.
‫This is something good.
‫But these dot are coming and they're not differentiating that which dot is currently selected.
‫So there are some things that we still have to do seem like this this these things, this title.
‫This is just like very much smaller.
‫And we have to make it a little big.
‫So we have to do some changes over here.
‫So let's go down.
‫Let's do that.
‫First of all, you have to go to the slider and you have to go down, down, down here.
‫And now here we will do is that we will break with this thing.
‫This is you can see this is right here.
‫So we're going to make the inside color to be white.
‫So what we have to do is to go to the slider navigation style and here navigation text color.
‫We will said this to white.
‫Okay.
‫So this is set to wait.
‫Now, here you can choose this flat semi downed around flat are border.
‫So we're gonna just do this as round here.
‫And let's just go ahead and let's hit update and then let's see how does our product slider look like?
‫So one of the drawback is that you cannot actually see what you're doing other than just refreshing
‫the page every time.
‫And you do some change over here.
‫So you can see this is.
‫Oh.
‫Now it's looking and it's kind of good.
‫Seems like this.
‫You can go ahead and you can choose any other stuff here.
‫You can choose a border.
‫So I'm going to be switching to semi around because we have not seen what it's going to look like.
‫And we're going to stick to it.
‫Okay.
‫So now let's go down.
‫And here we've got this slider dot.
‫So it just it is just asking you whether you want to show these lighter dots or not.
‫So it totally depends upon you if you want to show it.
‫You just have to select a true.
‫And if you don't want to show it, you can select it to be false and it's gonna be gone.
‫Seems like this.
‫You can work with the active color and you can said this to white.
‫So this will actually make a big impact.
‫And if you will come up here and now you will refresh this.
‫Then you will see that.
‫Now we have got this right here.
‫So this is how it's kind of looking and seems like this.
‫You can click over here and you're going to be taken to the next page as well.
‫So if you think that it's not looking good, then you can go ahead and you can get rid of that.
‫So we're going to get rid of that.
‫So now we are actually done with the product slider over here.
‫So the slider is totally done.
‫And this is how it's looking.
‫But what we have to do is to work, with, this thing that is inside here
‫So for that, what you have to do is do go to the layouts that you have to click, manage layouts.
‫But first, let's just go to the style over here and make sure to go to the item style and select this
‫text aligned to center so that everything is aligned to center and then they will look much better.
‫So let's just see.
‫Here it is.
‫You can see that now everything is aligned to center and it kind of looks much better.
‫The rating is right here.
‫And this is not a line to center.
‫So we're going to be doing that manually.
‫So we're also going to be adding some padding to the every site so that there is actually some spacing
‫between the products as well.
‫So then it's Phil look much better.
‫So let's see.
‫So this is right here.
‫Now, let's go ahead and let's design this for the design.
‫You have to get to the layouts and then you have to basically click edit over here and he will be taken
‫to that particular layout.
‫And here we are.
‫So first of all, what we have to do is that we have to change the title.
‫So far, your title, you have to click title.
‫And here we've got the color.
‫And you can select the colors.
‫I'm going to be doing a little distinct.
‫And we're going to be increasing this.
‫So since this is actually 14 pixel.
‫We're going to be doing it 16 pixel.
‫And here everything is perfect.
‫Now, what you can do is that you can go to derating and you can align this to center.
‫So that's all you have to do.
‫And I have to update.
‫And now, if you will come up here and you will refresh that Web site.
‫You can see this is how it's looking.
‫But the rating is not working.
‫So basically, in order for the rating to work, this is basically a bug.
‫And you can see it's not working.
‫So all you have to do is to just instead of this margin, all you have to do, say right here is zero,
‫be X zero, be X zero, B, X.
‫And then you have to right here.
‫Seventy five pixel to this mean top right, left and no top right down and left.
‫So this is all basically going over top right down and left.
‫So this is how basically every margin works.
‫So when you add 75 pixels, it will add 75 pixels from the left side.
‫And now it will be aligned to center.
‫There is one more thing that you have to do is to make sure that you go to every thing, every title
‫is this will and said this to center.
‫And then you have to go to the product category and said this to center.
‫And then you have to go to the product price and said this to center.
‫And then add to cart and it's already in the center.
‫So that's all you have to do.
‫And then maybe you will hit update and you will come up here and you will.
‫refresh the Web site.
‫Then you will see that it will be fully aligned in this center.
‫And this is our basically it's working.
‫So that's all for right now.
‫You can see that everything is working perfectly.
‫Now, there is one thing.
‫Let's suppose that you want to design this and this would the elementor.
‫So what you can do.
‫Let me just show it to you.
‫And then we will.
‫And this video.
‫So if you want to design this, what you have to do is to basically add a heading.
‫OK.
‫You have to add a heading here.
‫That's all.
‫And then you have to right here categories.
‫And then you have to write the category short code there.
‫So let me just show it to you.
‫All you have to do is just type in here.
‫Categories.
‫You have to align this to center just like that.
‫You can see how it's working.
‫And then what you can do is that you can come up here.
‫And then you can get a text editor and you have to drop it right here.
‫So once you've got the text editor, all you have to do is to just come up here.
‫And then you have to copy this.
‫And now here you have to paste this text editor.
‫So you can see that now we've got this particular category right here.
‫Now, what you can do is that you can hit update and then you can visit the Web site.
‫And now here you can see this is how it's looking.
‫So this is now already design.
‫Now what you can do is that you can go ahead and you can do these for the latest products and then you're
‫going to add the shortcode.
‫You're going to do that for the feature products.
‫And then you're going to add the shortcode and you're going to do it for everything that we have over
‫here.
‫And then it will be totally done.
‫So stay tuned, guys.
‫And babye.