How to set price colors and size individually in woocommerce at sale?

Hello creamdesign,

This can be done simply using CSS as each of the prices is included in a different HTML Tag.

The original price is in a <del></del> Tag.
As for the discounted price it is in a <ins></ins> Tag.

Best,

• This reply was modified 3 years ago by ibrahimibrahim.

Ok unfortunately I cannot code… :/

Ok unfortunately I cannot code… :/

Try this in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS.

This code changes the original price color to red, makes the text bold (like the “sale” price), and changes the default strikethrough color to match the red text color. Feel free to remove any of these that you don’t want.

del span.woocommerce-Price-amount.amount {
color: red;
font-weight bold;
text-decoration: line-through;
}

And if you want to change the color of the “Sale” (ie discounted) price too, use this code below. Note that I used the Rebecca Purple color only as a placeholder: change this to whatever color rocks your boat :-D:

ins span.woocommerce-Price-amount.amount {
color: rebeccapurple;
}

Standing by for feedback!

Thanks you, so I am using the following Code right now:

/*** change discounted and original price size and color ***/ 
del span.woocommerce-Price-amount.amount {
color: #ff001e;
font-size: 35px;
font-weight: bold;
text-decoration: line-through;
}
ins span.woocommerce-Price-amount.amount {
color: #2dc403;
font-size: 25px;
}

Thank you so much for the help already. This is working except that the original price (which is crossed through), does not really become red, but rather orange. By default, the font is greyed-out, I’m there is some kind of filter on top of it that is affecting the color. Can anyone provide me with the Code to get rid of that and have the actual color displayed?

can anyone help me still to change the original price color as stated above?

Sorry, I’ve been away from the intertubes!

the original price (which is crossed through), does not really become red, but rather orange. By default, the font is greyed-out, I’m there is some kind of filter on top of it that is affecting the color.

Indeed… there’s 50% opacity applied elsewhere that’s affecting this.

Try:

.woocommerce div.product p.price del, 
.woocommerce div.product span.price del {
opacity: 1;
}

Thank you, it is almost perfect.

One Last problem: These effects were not applied to the product page. While my old price is now red without lowered opacity and the discounted price is green on the product page, This is not the case on the shop page! How to I also apply this code onto there?

Thank you!

• This reply was modified 2 years, 11 months ago by creamdesign.

Sorry I meant: these effects were not applied to the shop page*

Can anyone help?

Hello @creamdesign

Sorry for being late I saw that you haven’t fixed this yet so here is an updated code for the one provided

This will change it on both the product and the shop page:

.price del span.woocommerce-Price-amount.amount bdi {
color: red;
font-weight bold;
text-decoration: line-through;
}

.woocommerce div.product p.price del, 
.woocommerce div.product span.price del {
opacity: 1;
}

.woocommerce ul.products li.product .price del{
opacity: 1;
}

Replace the old code with this one hope this works for you.

• This reply was modified 2 years, 10 months ago by ibrahimibrahim.

Thanks King, very grateful for you help. It’s working! ??