如何修改WooCommerce评分星星及评论文字的显示颜色

之前自定义代码不生效，核心原因通常是CSS选择器优先级不足、未命中WooCommerce实际渲染的DOM结构，或是代码存放位置错误。以下是高优先级兼容默认WooCommerce结构、绝大多数通用WooCommerce主题的可用代码，直接复制使用即可。

可用自定义CSS代码 #

将以下代码粘贴到对应位置后，把代码中的#你的目标色值替换为你需要的实际颜色值（推荐用十六进制色值，比如金色填#FFD700）即可：

/* 1. 商品主区域顶部评分星星颜色 */
.woocommerce div.product .woocommerce-product-rating .star-rating span::before,
.woocommerce div.product .woocommerce-product-rating .star-rating::before {
    color: #你的目标色值 !important;
}

/* 2. 评分旁评论数量提示文字（如"5 customer reviews"）颜色 */
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
    color: #你的目标色值 !important;
}
/* 可选：评论数链接鼠标悬浮时的颜色，不需要可删除这段 */
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover {
    color: #你的悬浮状态色值 !important;
}

/* 3. 页面下方评论区每条用户评论内的评分星星颜色 */
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating span::before,
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating::before {
    color: #你的目标色值 !important;
}

代码生效排查要点 #

• 存放位置正确：代码必须粘贴到WordPress后台「外观」-「自定义」-「额外CSS」输入框中，保存后发布。不建议直接修改主题目录下的style.css文件，部分主题的CSS压缩、缓存机制会覆盖直接修改的文件内容。
• 缓存清理：保存代码后，依次清空站点缓存插件缓存、CDN缓存、浏览器本地缓存，再刷新商品页查看效果。
• 特殊主题适配：如果使用了重度定制WooCommerce结构的主题，按F12打开浏览器开发者工具，选中需要修改的元素，核对元素实际class名后替换上述代码中的选择器即可。
• 色值格式正确：不要直接填写中文颜色名，优先使用十六进制色值、RGB/RGBA格式色值。

内容的提问来源于stack exchange，提问作者Jerome