Hello friends amnesiac from doctor.com entry in history, I’ll. Teach you how to professionally design your single product page using Elementor. Now this is the page, or this is the style that we want to achieve in this video.
As you can see, at the left hand side, he have nice image over here. This is your product image and when you hover over that image, it automatically gets zoomed. In now the right-hand side. You have this title nice and big title.
Oh here you have your price and, as you can see, we have used this color as a primary color, and you will see this color throughout this page. So we have used this red color as our primary color, and obviously this product design is 100 % mobile and tablet friendly.
Then, after that you’ll see. This is the short description and after that we have put some static content over here. So this thing this thing will show everywhere on every single product page, so we are providing free shipping estimated delivery.
FIRST STAGES OF MAKE PAGES:
We are giving all this detail over here. Then you can add this product in the cart and again at the bottom. We are providing some more static details like 60 day money back, guarantee, 24/7 support and easy payments.
Then, when he scroll down, you will see the description tab. You will see your description or your some additional information and some reviews then at the bottom. You will see this option related products, so all the products related to this one so basically product from the same description or product with the same description or product from the same category or product for the same gender same color.
So those type of products will show at the bottom now. This is the design that we’ll, be creating in this video, but let me show you how the regular design looks like, so this is how the regular single product layout of single product design looks like this is the 2020 theme.
So whenever you install WordPress on your new domain name, this is the thing that you will get, or this is the default design that you get if you’re using some other theme like ocean WP as trough some other theme, your design might look Totally different, so basically most of the times when you’re using a free theme or some other theme, your product page design, does not look really great, like in this case.
As you can see, the product title is so huge and the price you know the price title or the price text is so small. In fact, in this case, if you see the description text is even bigger than the price text, and also if you see the Add to Cart button is so weird-looking, so big and this thing is also not properly aligned.
THEME AND PLUGIN INSTLATION:
So whatever theme you are using, it does not matter. You can watch this video and you will create this design, but I guess now let’s start creating this product design. So, first of all, this is how it looks like now.
We have to come back to our dashboard. Let’s, see so. First of all we need few plugins, so you will need element or plugin so hover over plugins and click on. Add new and oh, you’re under search, plugins search for element or you will get this plug-in.
Make sure this plug-in is installed and activated, and with this we also need the element of pro plug-in, because if you want to create a custom header, custom, footer, custom product design, custom archive design, you need the element of pro plug-in.
So if you want to get that plug-in open a new tab and type in block to.com, slash elemental, in fact, you don’t even have to type. In this thing. There is a link given in the video description below click on that link, and you should be redirected to this page, so you need this pro plug-in as well.
There are three different plans. You can choose any one. Basically, if you want to use this only on one website, you can just start with this 50 dollar plan, and with this, as you can see, you get 50 plus premium, widgets 300 plus templates page builder, and this is the important thing that we need theme builder And WooCommerce builder, these two things are only available in premium version, so whatever plan you like, you can select that and after that we can start creating this thing.
So once you install and activate Elementor and also element a pro, you will get this option at the left hand side. You will see this templates option, however, that and click on theme builder. Now here you have to click on, add new and you have to choose this option single product because we want to create a custom single product design and under template name.
You can name it anything. I’ll, just name it demo, product design, then, after that you can simply click on create template. Now, when you do that, as you can see, there are few options which are automatically created for you now.
These are pre-made designs which are which are present for you, so whatever design you like, you can select that, for example, if you like there is this design, or maybe this design, if you and if you want to achieve this same design, you can simply click on This insert button, and now, as you can see, the entire page is now in front of you
CATEGORY OF PAGE:
Now I don’t even have to design anything. If you just publish this thing, this will ask you to add a condition if you want to add a condition right now. If you want to all the products designed to be same, you can select that or what I want to do is I want only a particular product category for this design.
So I’ll, select this option product by category in category and which category may be blazer category. So I’ll search for blazer. I’ll click on save and close. Now, if I go to my website, if I open any blazer product, let’s see this is a blazer.
If I open this option now, as you can see, this is how your product design looks like just by importing that thing you will get this design now. Obviously, according to me, this looks really bad, so I don’t want this design.
So what I’ll do, is I’ll, simply cut everything from you. I want to create my own design from scratch and we want a design like this, which I have shown you earlier. Let me open that design in one page yeah.
This page has this product has that design? We want to create this type of design, okay, so, first of all what we need is we want. This must section that you see on his screen then, after that, when you scroll down, we will be creating this section.
SECTIONS OF THE PRODUCT PAGE:
Okay, this bottom section. First, we want to create this top section now, if you see top section, is divided into two columns. At the left hand side you have this image at the right hand, side. We have this text this title and everything.
So for this we want to create a new section and to create a new section. You will click on this plus button and you have to select how many columns you want. So we want two columns. I’ll select this two.
Now, if you see the demo website or if you see their demo template the left, design or the left column is a little bit smaller and the right one is a little bit bigger. So what I’ll do, is I’ll? Select this option edit column.
If you follow my cursor, you will see this black color thing. If you click on that, it will be edit column. I want to make the left column, 42 percentage and right column will automatically become 58 percentage.
Okay, if you click on that, as you can see 58, so left one will be 42 right. One will be 58 now, at the left hand side we want this image. First of all, so we’ll click on this nine dots icon to Kate. Get back to elements and from here you will see this option: product images drag-and-drop this product images at the left hand side all right.
So, as you can see now, it will display all your images we don’t have to do anything with the images now at the right hand, side. First of all, we want to display the title, so we’ll come back over here, we’ll, select this option product title, drag and drop this thing at the right hand, side – and this will basically this will by default, get you The default style of the theme and because this style of the team has this type of design, as you can see, the title of the product is so huge.
It will get you this design. If your theme design is something else, it will just follow the theme design and we have to use element or to override this design. So let’s. Do that. So, first of all what I’ll do.
STYLE OF THE PRODUCT PAGE:
Is I’ll, go to style, I’ll change. The text color to two three, two, three, two three: basically black color, but a little bit lighter shade of black color. Then, after that, I’ll, also change the typography.
Basically, I’ll change, the font family. This does not look that great, so I’ll select this font family. So I select this font family, and here we have to search for open sans. If you search for open sans.
This is what you will get and I also want to decrease the size. I want to make it 30 pixels. Okay, now, as you can see, this looks so much better now, after that, what I have to do, if you see properly, if you look properly there, is this very thin border at the bottom at the bottom of this title, you will see this border or you Will see this divider so to add, this divider will again come back to elements and we’ll select this option.
Divider drag and drop just below this title, and this is how the default divider looks like very dark. As you can see black color. I want to do some changes over here. First of all, I’ll, go to style, I’ll change, this black color style.
I’ll clear this color and I will type in f1f1f1, will get very light. Gray. Color now, if you see very light gray color – and I also want to get rid of this extra space, so you will see this gap option, make it too or just zero, now make sure to click on update.
Then, after that, we have the price, as you can see, this is how the price will look like so to get this price option again, we’ll, go back to elements and let’s see here. It is product price, drag and drop it over here now.
This is again using this same theme design. I want to change this thing. First of all, I want to change the color, so I’ll change. This color click on clear to clear this. Color and I will type in ef3 – F 4 9.
This will give me this red color. Obviously you can choose any color you want now. I also want to change this size and typography for the font family. So I’ll. Select this pencil button, and for this I want to select Latu so under font family just type in Latu.
Now you can see the changes at the right hand, side. I also want to increase the size of these options. I’ll, make it 30 pixels, and I want to make it bolder. So I’ll, select 800 weight. Okay now this is how it will look like now.
I have noticed one thing: if you see this website, if you select this option, there is very little space at both left at both top and bottom, but here at the bottom there is a lot of space and also at top.
So if you want to get rid of this extra space, you can go to advanced and you can decrease or you can minus some space at top and bottom and to do that under advanced option. You will see this margin option now by default.
If you add anything, for example, under top, if you type in 50, this will add 50 pixels margin from all sides. So, first, what I’ll do is I’ll type in zero here? First, we need to get rid of this thing.
This is linked, so we need to dealing this thing or we need to unlink this thing, so click on this button. Now, what I want to do is, I want to type 25 or 20 at top. Now, when I add 20, this will add extra space at the top, but I want to get rid of extra space.
I want to decrease 20 pixels from top, so what I’ll do is before 20, I’ll, just type in minus, so this will make it minus 20. And now, as you can see, this is shifted towards top now from bottom. Also, I want to get rid of this bottom space so under bottom I’ll type in 35 and just below a just before 35 I’ll type in this minus, so it will become minus 35, and now this looks better.
Now, click on update, then, after that we have the product short description. This is how it looks like and to get that short description. You will come back to this option and this is the short description, drag and drop it over here.
This is the default style of short description. Again, we’ll change. This thing text color will be 2. 3. 2. 3. 2. 3. So you can just click on clear and type in that option. 2. 3. 2. 3. 2. 3. You will get this color will use.
I’ll. Just I’ll, just call it black color. From now. Now let’s change the type rafi for this as well so enter typography. I’ll. Select this pencil button now for this option for the font family, I want to select monserate M o NT s e double r 80, and you will get this very nice very simple, looking font style and I want to decrease the height of this or size of This I’ll, make it 15 pixels, and this is how it will look like now.
Click on update now for description. Also, I see there is some extra space at bottom. Top is fine, but we have some extra space at bottom. So again, we ‘ Ll, go to advanced, will, select this margin and under bottom I’ll type in 25.
I’ll, just make it okay. Now this looks better click on update. Then, after that again we have this option again. We have this divider, so I’ll, simply go ahead. We have already created this divider, so right, click on that top divider click on copy come over here.
Right click, paste and this divider will be present at the bottom, so we don’t have to do it again and again. We can just copy and paste this thing. Then, after that we have this static text. So let’s, see.
Let me just copy this text from here. Let’s come over here and for this we will be using this option. Text editor, so I’ll. Just drag and drop this thing at the bottom. Just below this divider and over here, whatever you want to type you can just type in that thing, so I want to type this option: free shipping to India via China, whatever you want to type and estimated delivery 27 to 40 days.
So whatever you on at, I just copied this text from Aliexpress. So this is how it will look like now. We want to style this thing, so we’ll, go to style. We’ll change, this color to again black color to 3, all right 2.
3. If you just type in 2 3, I’ll. I think you will get this color now for the font, family and everything I want to decrease the size of this. I’ll. Select this typography and I’ll, make it open sans so just search for open sans select this option.
Now, for the font size, I’ll make it 14 pixels now also want to do one thing: if you see right now, this is how it looks like. If you see the demo website, there is nice amount of space between the lines.
This is first line. This is second line, and that is decent amount of space between these lines. So, if you want to you, do that thing, you can select this option. Click on this pencil button. You will see this line height.
You can type something like 1. Oh point, 5 or 1.8 all right. I think it is not increasing. Let me see let’s update this page. Let’s. Try to refresh this page. Sometimes it does not happen. So you can refresh this page again.
Click on this pencil button go to this option. Okay, so we ‘ Ll fix this thing, just let it be 1.8. For now we ‘ Ll fix this thing, click on update now. What I want to do is I want to make this thing bold.
Oh, this thing will be default, which is fine, and I want to change the color of this bottom text. So to do this thing, you will go back to content now we want to use. We want to first of all, we want to make this thing bolder, so I’ll select free shipping and I’ll select this bold click on that and, as now as you can see at the right hand, side free shipping is Now become bold, oh and now what I have to do is I have to click on text right now.
CREATE VISUAL VIEW OF THE PAGE:
You are under visual. You have to go to text, and here you have to do few things. First of all, I want to add line height or I want to add extra line after each thing. You will understand this thing. So after free shipping, now we are doing some basic HTML over here.
So after free shipping before to India, I’ll. I’ll. Just do one thing I’ll type in this thing. Br under these brackets. It will add this line and again before this estimated delivery. I’ll type in this same thing that you see on screen and again this will add this line over here now.
This is looking much better, but I want to achieve one more thing. I want to make the color of this text lighter. So you can just leave this thing if you want, or if you want to you know, get this thing, you can do some basic HTML like before this text you can type in span and also after this text you can type in spend like this.
You have to close this span after text so before this end after this is basic HTML. If you don’t understand that you can just leave this part. Okay, you can leave. This span span part now. What I want to do is I want to change the color of this, so I can after span I ‘
Ll type in style is equal to okay, like this, we, whatever you see on screen color and whatever color you want. So I want this. Nine, nine, nine, nine nine nine color. Now, if you see at the right hand side, the color is changed to this light.
ADD CART BUTTON:
Now let’s. Add that space. So, for that you will go to advanced and under padding left only for padding left will type in 20 pixels. Now let’s, see now. As you can see, this looks so much better. Just click on update now, once you have done this thing after that, we have the Add to Cart button.
So let’s, go back to elements and let’s search for Add to Cart button, which is over here, drag and drop. This thing at the bottom and by default again, as I said earlier, this is just getting the theme style.
I want to change this thing so, first of all, I want to change the text add to cart’X. This is pretty huge. I want to change that thing, so I select this option. Typography click on this pencil button.
For this I want font family monserate, so I’ll search for monserate and I also want to decrease the size or the height of this. So I’ll, make it 12 pixels over here now, as you can see, this looks better.
I want to change the padding, because at top and bottom also there is a lot of padding, oh yeah. I want to make it all button like this. One so I’ll. Select this option. You’ll, see here, it is padding if you just make it 0 left and right.
This becomes zero, but top and bottom is not become zero, and that is because of this option. At the right hand, side you have this quantity option. It is also giving this same height to the button. So what we’ll do, is we’ll, add padding of 12 pixels for top and bottom and 30 pixels for left and right, okay, so under top 12 right 30, bottom 12 and left 30.
Now, after that, we have this option text and gronckle. Oh so text color will be this white color and background. Color will be that red color, which we are using again and again. So that is e. F3. F4.
9. Okay, you will get this color, this red color. Then we have to go to quantity, select this quantity now right now, if you just update this page and if you remember again, if you click on this b-besides that update you will see this up arrow.
If you click on that, and if you see the display conditions, this style will will be a will, be applied only to Blazers click on save and save changes. If I go back and if I open any Placer, this is a blazer.
If I open this product now, as you can see, this is how it looks like now. We need to change, make changes to this quantity option so select this quantity option, and here it is, as you can see, quantity related options now.
First of all, I want to change the border color. This border color is very light. I want to make it black, so here it is at the bottom border color as like, maybe not black. I’ll select this color lighter shade of black, and I want to get rid of that extra padding because of that we, our button, is looking very weird right now, so here it is padding just dealing this padding and now, as you can see, Your button is fixed now I just want to add padding left so under padding left.
I will type in 20 pixels click on update. I want to make the button circular. So again we have to go to button, and here you will see border radius type in 50, and now your button is also circular. If you update this page come over here.
If you refresh this page now, as you can see, this looks so much better. The color of this border is become black, and this button is looking like this now. What we have to do is, after this again we have to add this divider, so we can just copy this divider from top right click copy right, click paste.
This divider is now present. Then again we have some static content, so we have to add this final static content at the bottom. To add this thing, what we’ll do, is we’ll use this option? First of all, we’ll, have to add multiple columns at the bottom and to do that, we have to use this option.
Inner section drag and drop this inner section at the bottom by default. This will add two columns for you. We want six columns because in column one we want this icon, then in column, two text, all three: I can column four text column five.
I can and column six text. So we want six columns, so just right-click over here under edit column and click on, add new column and just make sure to add six columns. So one two three four five, we need one more okay.
Now we have six columns. Now let’s. Change the size of each column, because, right now, all the columns are of equal size. Now, first of all, I want to select the first column and for the first column width I want to make it four percentage.
Okay, second column will be twenty nine percentage. Now, basically, what I am doing is 33 3333 will make it 99 percentage. Okay, so four plus 29 is 33. So, similarly, for the third column also, this will be four for fourth column.
This will be 29, then fifth, column will be four and final column will be 29. Now click on update so for four percent with is for this icon and twenty nine percent with is for this text. Let me show you will understand everything once we start doing this thing now in the left column, we want to add the icon.
You know some padding and margin by default, so we have to get rid of that. Padding and margin for the column, so we’ll. Select this option edit column for the first column, go to advanced, make padding, also zero margin, also zero.
Now you can see that changes were here and now that column or now that icon is just under that column. You can see that option click on update now, for the second column, we want this text. First of all, we have this first text, so I’ll copy it from here come back over here.
We need this option. Heading option drag and drop this heading over here. Paste in your title go to style change this color to again that black color now change this typography to open sans, and obviously this size is pretty big.
So we’ll change this to twelve, and I want to make it bolder. So I’ll select 700, because if you see the first, a line is bolder and second line is just normal. Now we can do one thing: we can just right.
Click on this text and duplicate this thing. Okay, this is how it will look like now select the second text and change that takes two money back gaurantee or whatever text you like, and we want to make it normal so go to typography.
Instead of weight, 700 make it 500. Okay, normal click on update. Now, if you see for the first text below our first text, we have a lot of space so select first text again and let’s, get rid of that extra space at the bottom.
So select first text go to advanced and let’s delete some margin from bottom, so I’ll delete 15 pixels just type in 15 and before that type in – and this is how it will look like and padding also can be – Zero, if you want, you, can make all the padding zero now click on update.
No. What I want to do is, if you see this thing right now, this icon is towards top. I want to make everything in center. If you see over here, this icon is in the center in the middle of both this text.
If you don’t understand this thing, let me just do the changes you will understand it. You have to click on this option, edit inner section and vertical align set this to middle now. As you can see, this icon is now become, or this icon is now in the middle now.
Similarly, you can do one thing: you can right. Click on this icon click on copy paste it over here paste it over here now, right-click on this edit column, click on copy don’t have to paste it just paste this style, so right, click on this column and select paste style.
This column, paste style now copy this text. One paste it over here copy text paste it over here. Similarly, text 1 copy paste text to copy and paste. Now you just have to change the content, so select the second icon, and we have to change this.
To this handshake, I can so click on this icon, search for that handshake, icon, which is so here at the bottom. Select this option click on insert now, as you can see, I can change now. We just have to change this text to 24/7 guarantee.
So, as you can see, we have saved a lot of time over here click on update now this was the most important and a little bit trickier section now for the bottom section. With this, our top section is completed now for the bottom section.
It is very much easier so to add a new section or maybe let’s. Do one thing: there is a lot of space at the bottom. So let’s, get rid of this extra space and to do that, we’ll. Select this option this, which you see at the top edit section click on that go to advanced, and we need to get rid of this extra padding and margin from the bottom.
So we’ll, make the padding and we’ll, make the margin 0 and for bottom we’ll, add 50 and just add minus before that. So we’ll, make it minus 50 and for padding also will decrease all the padding or, if you want, you can make it minus 70 or 75 or hundred.
If because there is a lot of space at the bottom. So if you want to get rid of that extra space, you can do that now, click on update. We need to do one more thing. If you just hide this thing, if you see there is very little space between this image and this text, and oh here there is nice amount of space in between.
So if you want to do this thing, you can do select this option edit column, one click on edit column go to advanced now, dealing the margin and dealing the padding same thing for the second column, also dealing margin and padding.
Now all the margin and padding is become zero, and this is touching this thing now we need to do one thing. Select this edit column. Now let’s, add some padding from left and right so from left and right.
You can add 20 pixels for image. Also select this image left and right. 20 pixels like this okay, now, as you can see, this is how it will look like now. We can just update this page.
CREATE BOTTOM SECTION:
Now let’s, create let’s start creating the bottom section.
So to do that, click on his plus button, let’s. Select let’s, see how many columns we just have one column. So we’ll click on this single column. Now inside this, I think we have decreased a lot of space from top.
We’ll fix that thing. First of all, inside this we have this option. We have this description tab, so to do this, we will be using. I guess this option, Product data, tabs, drag and drop. This thing will show you can see this option and now again it is just copying this same style of your theme.
So let’s fix this thing now, first of all, let’s start with the color, so we want to change the color of this text to that black color. Alright, now, as you can see, color is changed now for this text.
So select this typography click on this pencil button. I want to make this text open sans’here. It is select open sans. I want to decrease the size a little bit, so I’ll, select this option 16 pixels, and we want to make it a little bit lighter.
So we’ll select 600. Okay. Now, as you can see, this is a little bit lighter now for this text, this description text and all the other text. Alright, so we’ll select this option panel change this text, color, if you, if you are fine with this color it’s.
Fine, if you want to change this text color now for the typography number 1 select this pencil button make it monserate select this option. Font family make it monserate here it is select this option now, as you can see, the style of this thing is changed.
Now. Let’s, change the size to 14, and now, as you can see, size of this is changed to 14. Now select the second option: typography number 2. This also will be monserate but size of this. This description text will be bigger.
So I’ll, make it 25 like this. If you want, you can make it to lighter, you can make it 500. Now, as you can see, this is how it looks like now. There is one problem where here we have changed it this to default.
We have changed this to monserate, but this is not become this content that you see at the bottom. It is a long-established fact this text it is not become monserate, so sometimes this happens. I will show you how we can fix this thing.
Click on update, first of all. Now, if you come over here refresh this page now, this is not become on sorry, you right-click on over here, and if you see this is not become inserted. If you want to make it a monster at what you can do, is you can you have to click on this option? If you hover over this, it will select the entire section, like you see, on your screen with all the padding’s and margin, so click on that now, at the right hand, side you will see this option.
We have changed this. We have made it monster it, as you can see at the right hand, side font-family, monster head, but the changes are not taking place over here. So you can do one thing: you can click on this plus button and after that you will see.
You can just add P over here. I think you won’t understand this thing, but I’ll. Just give you this code, you can just copy and paste everything now here I can type in this than that thing. Font family, which is so here now as soon as I typed, the font family.
You will see those changes on your screen now, if I select monster it, as you can see this, the changes are taking place on the screen. I am searching for monster it. Ok now, as you can see, changes have taken place on this screen, so I can just copy this.
This much copy like this go back to this screen, go to advanced under custom CSS. I can type in this thing, so if you want you can just copy this. I’ll, just zoom. In this thing you can copy type in this thing under custom CSS.
You will see this text click on update now at the bottom. We just want to display this related products, so for that what we will do is we’ll, select this option. We’ll, go back to this option and you will see related products at the bottom.
Let’s. See here it is product related drag-and-drop it at the bottom. This is how it will look like now. First of all, I don’t want this big title related products, so I will go to style. I’ll. Select this option.
You’ll. Select you’ll, see this heading. Make this thing heading just hide this heading. Now I also don’t want to display this big Add to Cart button. So, first of all, just click on update now again to change that Add to Cart button.
We don’t, have any options over here. So for that also we ‘ Ll have to use CSS, so I will come. Oh, you’re refresh this page. You have this Add to Cart button right, click on that and click on inspect.
Now, when you right click on this button and select inspect now at the right hand side, you will see this option. Ok, font-family Roboto font weight to 500. Now, just below that, if you add one more option display none now, as you can see, button is now hidden now, once you hide this button, you can just copy this text or copy this much from here copy it come back to your screen.
GO TO ADVANCED LEAVEL OF THE PRODUCT PAGE DESIGN WITH ELEMENTOR PRO:
Go to advanced! Go to custom CSS paste in this thing over here now, as you can see, that button is now hidden click on update. Now we need to change this title and we need to change the style of this title and this price text.
So, to do that, we’ll, go to style, we’ll search for product. We have this box, so go to product, and here let’s search for title here. It is title. Let’s, change this color to first of all that black color, two three two three two three all right and let’s change this typography.
I want to make it open sans, so I’ll search for open sans, which is over here. I want to change this size to 17 pixels all right now. Let’s, change the color and style of this price tag. So here it is here is the price color change this price color to that red, color e? F3.
F4. 9. Now let’s change the typography for price. This will be lat 2. If you, if you fine with this font, you can just leave it. I won’t light over this. Now, as you can see, changes have taken place.
I want to make everything Center aligned. So if you go at the top, you will see alignment Center click on update with this. Your entire product pages now completed. If you come over here on your page and if you refresh this page now.
Finally, I just want to see how this thing looks on a mobile phone. We are very important so at the bottom left you will see this responsi option click on mobile and this is how it will look on mobile phone.
Let’s, see from top everything looks fine. This is also looking good. Add to Cart. Button is not looking good over here, but don’t worry. This is just some problem with Elementor on your original page.
It will look good. Let me show you if I see this in mobile phone and if I see the Add to Cart button here as you can see it looks perfect. We just have to fix this thing this I can option so to fix this thing.
This is the one what we can do is we can change. We can simply change the content of this. We can select this option edit column for first column. We can make the width of this 15 percentage and for the width of second column, we can make it 85.
Let’s, see now. It will display like this, and we have to repeat this process with off the icon. Column will be 15 width of this text. Column will be 85 again. Width of the icon column will be 15 width, not 1, 85 15 and width of this column will be 85.
Click on update rest, everything looks perfect, so this thing now looks perfect on mobile phone. Also on desktop. Now we can cut this thing if you want this style for the entire website. For all the pages on your website, you can just go to display condition and just remove this thing: click on add condition and just select products, click on save and close.
Now this style will be applied on entire product. All the products that are present on your website Raika, so with this we have completed this tutorial. I hope you find this tutorial helpful