CODEWITHSUNDEEP
phpcsswordpresswoocommerce
Quinty van Dijk
Quinty van Dijk

Reputation: 75

How can i get my sale price to have a different color then my regular price?

He everyone, I was wondering how I can get the sale price to have a different color than the regular color. And have the regular price a stripe through it. Here is the link for the site: http://www.peachandhoney.nl/product/classic-chair/ but I also want it to show up in the product gallery list http://www.peachandhoney.nl/shop/. If had tried editing this with this code but it is not working it changes both the prices. Any advice on how I can achieve this?

    .product .summary .price .amount {
    color: #e78484 !important; }
}

Upvotes: 1

Views: 5421

Answers (5)

Claudio Ruggiero
Claudio Ruggiero

Reputation: 44

You can achieve that using only CSS like this example:

.sale .price ins {
    color: #ea1000 !important;
}

Upvotes: 0

André Kelling
André Kelling

Reputation: 1736

please consider to not use !important in your CSS. It's bad practice.

It would be better if you could change the template as you like.

Anyway, it should work with:

    .product .price .amount {
            color: #e78484 !important;  
    }
    .product .price .amount ~ .amount {
            color: #111 !important; 
            text-decoration: line-through
    }

Upvotes: 0

Quinty van Dijk
Quinty van Dijk

Reputation: 75

I got it to work with using

    .product .summary .price del .amount {
    color: #000000;
    text-decoration: line-through
    }

    .price ins .woocommerce-Price-amount {
    color: #d98159 !important;
    }

Upvotes: 2

Guga Nemsitsveridze
Guga Nemsitsveridze

Reputation: 751

Try to add other classes that change color:

.sale {
     color: green;
}

.regular {
     color: black;
}

then change the classes by JS;

Upvotes: 0

metaDesign
metaDesign

Reputation: 628

Target the <ins> tag in your CSS

.product .summary .price ins .amount {
    color: #e78484 !important; 
}

Upvotes: 4

Related Questions