Developer forum

Hi Smári,

You can achieve this using CSS Decorations. That way you don't even need an upgrade nor a Developer (assuming you know your way around CSS) 

Best Regards,

Nuno Aguiar

Just insert this CSS to your custom CSS file and adjust the color to your liking:

.item_swift_productprice .text-decoration-line-through .text-price{
    color: red;
}

Hey guys,

It's actually a bit more hassle than using CSS, because I want to target the text that doesnt have strikethrough. In some scenarios, products have discounts and others dont, meaning that if I try to target the second .text-price element, it will also be applied on products that have only one text-price span if you know what I mean. (So it kind of works, but not really when products dont have discount)

I think that we might need to add custom JS in order to make this work?

My CSS example should only affect the before price - so if a product does not have a before price, no colors will change. If it is just coloring, I am pretty sure you can do it with pure CSS.

BR Nicolai

Hi Nicolai,

Thanks for thr answer - but yes I am actually trying to color the _AFTER_ price. I understand that its easy to target the strikethrough price but unless I am mistaken its a bit more hassle to target the actual new price since this span is present both on discount products and non-discounted products?

Best,
Smári

Hi Smári,

Is this what you're looking for?
.item_swift_productprice .text-price:not(.text-decoration-line-through) {

    color: blue;

}

That basically is only applying the css IF the element does not have the .text-decoration-line-through css class

BR,

Nuno Aguiar

Hi Nuno,

Yes and No :-) This works fine to display "blue" on the new price. However, this also results that regular products will receive blue color that dont have any discount. Meaning that the plain original price will be blue. I appreciate your help on this though.

Best,
Smari