本文介绍如何通过修改 php 过滤器代码，在 woocommerce 结算页（checkout）中为动态添加的“short description”（简短描述）设置自定义文字颜色，无需额外 css，直接在函数中内联样式实现。
在使用 Hello Elementor 主题并成功通过 woocommerce_get_item_data 过滤器在结算页显示商品简短描述（如 Details: [ETH] Random）后，若需进一步美化该文本——例如将其颜色更改为红色、蓝色或任意 HEX/RGB 值——最直接且可靠的方式是在 PHP 中为 $display 输出内容包裹带 style 属性的 HTML 标签。
原始代码仅返回纯文本：
'display' => $post_data->post_excerpt
这导致无法通过常规 CSS 类选择器精准控制（因 WooCommerce 此处未添加特定 class 或 data 属性）。因此，推荐采用内联样式（inline style）方案，在生成 $display 时直接注入 并设定 color：
✅ 推荐修改后的完整函数如下（已适配 WordPress 安全性与可维护性）：
add_filter( 'woocommerce_get_item_data', 'wc_checkout_description_so_15127954', 10, 2 );
function wc_checkout_description_so_15127954( $other_data, $cart_item ) {
// 防止空描述或无效产品 ID 导致错误
if ( empty( $cart_item['product_id'] ) || ! $post_data = get_post( $cart_item['product_id'] ) ) {
return $other_data;
}
$excerpt = wp_strip_all_tags( $post_data->post_excerpt ); // 清理潜在 HTML 标签，提升安全性
if ( ! empty( $excerpt ) ) {
// 自定义颜色：支持 HEX (#ff6b6b)、RGB (rgb(255,107,107))、英文色值（red/blue）等
$styled_excerpt = '' . esc_html( $excerpt ) . '';
$other_data[] = array(
'key' => 'Details',
'display' => $styled_excerpt
);
}
return $other_data;
}? 关键说明与最佳实践：
- ✅ 使用 esc_html() 确保输出内容安全，防止 XSS 风险；
- ✅ 添加 wp_strip_all_tags() 避免简短描述中意外含 HTML 导致样式错乱；
- ✅ 支持任意 CSS 颜色语法（如 #3498db, rgb(52, 152, 219), var(--primary-color)），便于主题色统一；
- ⚠️ 若后续需响应式或深色模式适配，建议改用 CSS 类 + 外部样式表（需为 添加 class 并在子主题 style.css 中定义），但当前内联方式最轻量、兼容性最强；
- ? 修改后请清空对象缓存（如有 WP Rocket / Redis）并刷新结算页验证效果。
该方案简洁高效，适用于所有基于 WooCommerce 的主题（包括 Hello Elementor），无需改动模板文件，也无需依赖 JS 注入，真正实现「开箱即用」的颜色定制。
