Change Price Colors Everywhere

Hello Elise,

I think you have posted a wrong response as my question is not about changing the Font or Font Size

It is about changing the color or Price Displayed on Product Page and Products shown in widget

Can you please go through what i have mentioned again as i have described it properly what i am looking for and I have shared links of screenshots

Regards,
Pritam

Hi Team,

We tried to edit color changes as you suggested using Advance Typography for Product Grid Price & Single Product Price but i do not see that change reflecting

I have tested in my test environment locally

I am shared the details for you to check as i saw you fix similar in other post using the code i shared but that updates color only for woo-commerce shop page or sections where products are display in grid but not on single product page so need your assistance

Details shared in Private section

We are using a cache Plugin so If you make any changes you may need to go to “Performance” Tab in Left side of WordPress dashboard and click on “empty all caches” for the changes to reflect on the website

Let me know if further information is required

Please do not share my Website URL or any snapshots Publicly

Regards,
Pritam

Hi Team,

I still cannot see any change i thing you have just tested it and reverted it back again

But How have you enabled the Advanced typography styles to work now.

If they are working you can guide me and i can do it it it is working now or you can edit it as mentioned in private section

I have shared the details in Private section once again

Regards,
Pritam

Dear Team,

Thank you for your help but how did you enable the Advance typography as it was not working before ?

Even after you fixing this i was not able to change the color of the Sale Price displayed on Single Product Page , remaining all i was able to update as per my requirements

Client saw the incorrect color and requested us to remove the access as he is moving the business to production

If you want i can share login details for our test website ? is that okay where you can check what is wrong and then guide so we can make the required changes

Regards,
Pritam

Hi Team,

Thanks, this works now on Shop Pages and Single Product Page for Products having Original Price and Sale Price

But if a Product is having only Original Price and no Sale Price this code is not able to change that color not even on Shop Page or Single Product Page

Need similar code for that as well

Attached snapshot for reference

Regards,
Pritam

Hi Team,

Can you suggest what parameter to use to update this price as we have tried using below in Advance Typography

Product old price
Single product price
Variable product price

Still the color does not change for Products having only Original price

Please have a look on attached snapshot

Regards,
Pritam

Hi Team,

As suggested i have tried to make a single rule for Single Product price but it does not work

I observed that all other price options work if used but only Single Product Price is not working if used

Please find attached setting snapshot

Regards,
Pritam

Hi Team,

This is now working for Price shown on Single Product Page but this has the below issues

1. Products having only Original Price still shows old color on shop page where products are shown in grid (I have attached of staging website URL for reference)

2. When this new code is used, all products show this color on single product Page

Below is the code in use now and what is happening, i am sharing live links in private content

body.single-product .price .amount bdi {

    color:orange

}

body .price del .amount {

color: yellow;

}

body .price ins .amount {

color: blue;

}

Also sharing login details for our test website where you can take your time and check what is working for all

Regards,
Pritam

Hi Team,

What I mean to say is the new CSS you shared is affecting the earlier CSS

Below CSS is changing all colors on a single Product Page:

body.single-product .price .amount bdi {
    color:orange
}

example: if yellow color is used , the Original price becomes yellow , Sale Price becomes yellow, and related products shown on single product page also have yellow price

Below is the requirement and same requirement is with shared in private Content with website links so you can have a look:

1. Sale Price should have RED Color
– It should show red color sale price on single product Page & on shop page where products are shown in grid

2. Original Price should have Green Color
– It should show GREEN color Original price on single product Page & on shop page where products are shown in grid

3. Products having only one price which is original Price should have GREEN Color
– It should show GREEN color Original price on single product Page & on shop page where products are shown in grid

Your shared CSS code as below was correct for Products with Original Price & Sale Price, only products having single price where a problem

body .price del .amount {
color: red;
}

body .price ins .amount {
color: blue;
}

and You shared another CSS code for products having single price which is overriding the earlier shared CSS code

I have mentioned these same details along with our demo website login so you can test

Regards,
Pritam

Hi Team,

Thank you Team , Appreciate you support on this issue

Just to summarize only below code is required in Advance CSS and Advance Typography for “Single Product Price” & “Product Grid Price” is required and all is working as we wished for

body .price del .amount {
color: red;
}

Thank you once again

Regards,
Pritam