Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Change dynamic full price color next to sale price in Woocommerce

I am reaching out for a little bit of support.

I have Woocommerce products which display two prices side by side – full price & sale price.
Both of them use the same css styling in black. I would like to make the full price in lighter grey color.

The span:

<span class="woocommerce-Price-amount amount">312.00<span class="woocommerce-Price-currencySymbol">€</span></span>

<span class="woocommerce-Price-amount amount">51.00<span class="woocommerce-Price-currencySymbol">€</span></span>

I will be very, very happy if you can assist me how to adjust the CSS of the full price.

Thank you so much in advance.

Tags:

2

Answers


  1. 0

    Please not i added style color.

    <!DOCTYPE html>
<html>
<body>


<span class="woocommerce-Price-amount amount" style="color:grey;">312.00<span class="woocommerce-Price-currencySymbol">€</span></span>

<span class="woocommerce-Price-amount amount" >51.00<span class="woocommerce-Price-currencySymbol">€</span></span>

</body>
</html>
    Login or Signup to reply.
  2. 0

    here i add class name for each price

    <html>
<body>

<!-- fp stand for full price-->
<!-- sp stand for sale price-->

<span class="woocommerce-Price-amount amount fp">312.00<span class="woocommerce-Price-currencySymbol">€</span></span>
<span class="woocommerce-Price-amount amount sp" >51.00<span class="woocommerce-Price-currencySymbol">€</span></span>
</body>
</html>

    on the .css file

    .fp{
opacity: 0.5;
}

.sp{
opacity: 1;
}

    if your stylesheet is inside HTML, or you don’t want .css file use this

    <html>
<body>

<!-- fp stand for full price-->
<!-- sp stand for sale price-->

<span class="woocommerce-Price-amount amount fp" style="opacity: 0.5;">312.00<span class="woocommerce-Price-currencySymbol">€</span></span>
<span class="woocommerce-Price-amount amount sp" style="opacity: 1;" >51.00<span class="woocommerce-Price-currencySymbol">€</span></span>
</body>
</html>

    you also can change to more or less gray by changing the opacity.

    here I made you the simpler one because it has same effect

    <html>
<body>

<!-- fp stand for full price-->
<!-- sp stand for sale price-->

<span class="woocommerce-Price-amount amount fp" style="opacity: 0.5;">312.00€</span>
<span class="woocommerce-Price-amount amount sp" style="opacity: 1;" >51.00€</span>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search