Reply 341701 to: Variable product page remove from before price
Tony Rodriguez
Support staff
December 17, 2022 at 06:19
Hello, @trambussen,
Actually, there is no option in the theme for this but you can achieve this using a custom CSS code. If it is global I can share the code with you but you want it from the specific so you have to make it on your own. Let me tell you how?
First of all, you need the price class to apply the CSS code to it. This is the CSS class of the price “.product-content .price”
Now, If you add your CSS code to this class it will hide the price from all the websites. But we need it from the specific product. So for this, we need to product id because the id is unique. See this image to know from where do you get the product id: https://postimg.cc/0zsr0krP so this is the product id “#product-9209”
So we have the product id and the price class now. Now, you are ready to apply your CSS code to it. You have to first write the product id and then the price class to hide the price from the product. But as you know that there are two prices and the class is the same on both so using the price class will hide both prices. But we need to hide only 1. So for this, we use “nth-child()” after the class name.
Alright, let’s make a code with the help of product id and price class.
product id = #product-9209
price class = .product-content .price
We need the nth-child too
We have to merge them. So that the code will be look like this: #product-9209 .product-content .price:nth-child(2){}
See this is the CSS class in which we will hide the price. To hide the price we use the display property of the CSS.
