Compare at price, wrong colour - Minimal Theme

[insideout_aus]

 

Hey team,

The compare at price is coloured correctly on the collection grid page, but is showing the opposite colours on the product page. Please see below:

Collection grid:

Product page:

 

Can you please help me to correct the product page colour to:

Price = Red 

Compare at Price = Black (with strikethrough)

[oscprofessional]

@insideout_aus 
Hello, Can You Please Share Your Store URL? I Will Check and Provide a Proper Solution

[insideout_aus]

Thank you!

https://insideoutvintage.com/collections/new-arrivals

[PageFly-Noah]

Hi @insideout_aus 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
#ProductPrice {
font-weight: unset;
color: red;
}

.product-single__sale-price {
color: #5b5754 !important;
}

 </style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[insideout_aus]

This worked partially, but now my non-sale item prices are red

[oscprofessional]

Hello @insideout_aus 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->timber.scss.css>Add this code at the bottom.

.product-single__prices span {
    color: red !important;
}

[insideout_aus]

That also made my product prices red, to clarify I only want items on sale to be red so:

Compare at Price = Black with strikethrough
Price: Red

Single Price (without compare at price) = Black

[PageFly-Noah · Accepted solution]

Hi @insideout_aus Please help me to replace the code above with this new one:

<style>

#ProductPrice {
font-weight: unset;
color: red;
}

.product-single__sale-price {
color: #5b5754 !important;
}

 </style>

<script>
const pfInterval = setInterval(()=> {
const price = document.querySelector('#ProductPrice')
const comparePrice = document.querySelector('#ComparePrice')
const obj = comparePrice.childNodes

if(Object.keys(obj).length == 0){
clearInterval(pfInterval)
price.style.color = 'black'
}
},100)

setTimeout(() => {
clearInterval(pfInterval)
},5000)
</script>

[insideout_aus]

Thank you @PageFly-Noah this worked perfectly