Hello,
You have set the colors in the Advanced Typography for the single product and for the variable product https://prnt.sc/pz58s8 and it works properly for the single and variable products, however, when a product on sale, the default colors are applied.
If you want to change it only on single product take this custom CSS:
body .price ins .amount {
color: red;
}
body .single-product-page .price ins .amount {
color: red;
}
If you want to change it on a product grid as well, take this code in addition:
/* STYLE OF FIRST PRICE */
.product-grid-item .price .amount:first-child {
color: red; /* COLOR */
font-weight: 600; /* FONT WEIGT */
}
/* STYLE OF SECOND PRICE */
.product-grid-item .price .amount:last-child {
color: blue; /* COLOR */
font-size: 16px; /* SIZE */
font-weight: 600; /* FONT WEIGT */
}
body .single-product-content p.price .amount:first-child {
color: red; /* COLOR */
}
body .single-product-content p.price .amount:last-child {
color: blue; /* COLOR */
}
Best Regards
.
