FSE Themes: Change the color applied to WooCommerce products

[Gustavo-Hilario]

What

Change the color applied to WooCommerce product prices on Blockbase theme.

Why

A user on 5413058-zen wanted to change the color applied to WooCommerce product prices, and that wasn't possible without CSS. Blockbase themes are using a fixed green color on product prices, and that might be really inconsistent with the color palette a user might be using on their site. In their case, the user had Antonia theme that also uses the green color on the shop page. Other themes like Attar or Blockbase seems to only use the green color on single product pages.

How

Blockbase

Here is the CSS code that is causing this issue:

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #77a464;
    font-size: 1.25em;
}

The code is coming from https://c0.wp.com/p/woocommerce/6.7.0/assets/css/woocommerce.css

I think you can use one of the CSS color variables to make sure users can have an option to change the color.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5413058-zen

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - Yes

📌 SCRUBBING

• Tested on P2 - no
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

• I'm not moving this to Themes as it appears based on this: pdnLyh-1uW-p2 that it could be fixed in Gutenberg so other plugins could benefit from it.

📌 ACTIONS

• Feature request kept

[annezazu]

Closing this out as I can no longer replicate when I use the Twenty Twenty Four theme. I see the option to change the color of pricing:

change.color.of.pricing.mov