Change Price Colors Everywhere

Hi Team,

I need your support to share custom CSS to update the Product Prices Everywhere (In Product Widgets and on Product Pages)

I need to update Sale Price Color and the Original Price Color and the Strike Color present on the Original Price

I have tried using below code but it only changes the Original Price Color and the Strike Color that too only on widgets, it does not reflect on Product Pages

Also Note I need to use color code instead of color name

.product-grid-item del .amount {
    color: red;
}

.product-grid-item .price del {
    color: black;
}

I have attached snapshot with marking for which i need to update colors using custom CSS

Regards,
Pritam

Hello,

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

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

Hello,

This instruction was not sent by mistake: https://gyazo.com/c351dc8be823e19221002dfe5186fcf8

Please check the drop-down and you will find almost all the price types to set the color, if you do not find the proper item, you can create a custom selector and take any price from anywhere. If you need help, please provide page URL and screen of what price you want to change.

Best Regards

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

Hello,

I have set the styles in the Advanced typography and they work now.

Please provide the screen of what you want to change and provide the page URL.

Best Regards

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

Hello,

You asked to v place any screens from your site, that is why I changed and left for checking.

Please update the credentials I cannot login to show you.

Best Regards

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

Hello,

I was a bit confused, I changed the regular price and it worked.

Please add this code to the Theme Settings > Custom CSS > Global:

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

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

Set the colors as per your needs.

Best Regards

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

Attachments:

You must be logged in to view attached files.

Hello,

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

Please use Advanced Typography for this purpose.

Best Regards

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

Attachments:

You must be logged in to view attached files.

Hello,

You should take the Single Product price.

If you want to have different styles for those selectors, create a separate style for each of them.

Best Regards

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

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

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

Best Regards

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

Hello,

If you change the style for a regular price for a single product, it would be applied to all the single products.

I am confused and do not understand what styles and where you want to change.

Please provide the page UR> – descriptions of what you want to change, I will double-check and suggest if it is possible to implement.

Best Regards

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

Hello,

1. Please remove this code:

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

You have set the green color for the price on the Single product page in the Advanced Typography: https://prnt.sc/113sg0i

When I commend the code that I have provided (I asked to change the color as per your needs) the product page price is green: https://gyazo.com/51c76a5288d8e67e7a66f6f14b7c21ed

The price in the grid https://prnt.sc/113sit0 inherits the settings of the Prime color: https://prnt.sc/113sjtu In order to change that you need to set the style in the Advanced typography for the grid price: https://prnt.sc/113sm0r you will get this result: https://prnt.sc/113sm0r

In order to make the sales price red and the original price green, just change the colors in the code: https://prnt.sc/113so4d

Please check the site and advise if you need any further help.

Best Regards

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

Hello,

The original price may become gray if you use only this code:

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

I would recommend leaving both in the custom CSS.

Best Regards

[Author]

Posts