本文介绍如何通过 HTML 标签配合内联 CSS，在 WooCommerce 的 woocommerce_get_price_suffix 钩子中精准控制含税价格部分的字体大小，避免影响其他文本（如“excl. btw”）。
本文介绍如何通过 html `` 标签配合内联 css，在 woocommerce 的 `woocommerce_get_price_suffix` 钩子中精准控制含税价格部分的字体大小，避免影响其他文本（如“excl. btw”）。
在 WooCommerce 中，woocommerce_get_price_suffix 过滤器常用于自定义价格显示后的附加说明（例如税费标注）。默认情况下，整个后缀文本以统一样式渲染；若需单独调整含税金额（如 €24.99 incl.btw）的字体大小，而保持“excl. btw”等文字不变，直接修改全局样式并不稳妥——易造成样式污染或响应式失效。推荐方案是：在动态生成的 HTML 字符串中，用 封装目标文本，并通过 style 属性设置专属字体大小。
以下是优化后的实现代码：
add_filter( 'woocommerce_get_price_suffix', 'bbloomer_add_price_suffix_price_inc_tax', 99, 4 );
function bbloomer_add_price_suffix_price_inc_tax( $suffix, $product, $price, $qty ) {
$incl_tax_price = wc_price( wc_get_price_including_tax( $product ) );
$suffix = 'excl. btw <br>' .
'<span style="font-size: 1.2em; line-height: 1.4;">' .
$incl_tax_price . ' incl. btw' .
'</span>';
return $suffix;
}
✅ 关键要点说明：
- 使用 实现样式作用域隔离，仅影响含税价格及后缀文字，不影响前半句“excl. btw”；
- font-size 支持多种单位：em（推荐，相对继承字体）、px（绝对像素）、rem（根元素基准）或关键词（如 large, x-large），其中 1.2em 更利于可访问性与响应式适配；
- 建议同时设置 line-height（如 1.4）以改善多行排版的垂直间距，避免
导致的紧凑堆叠； - 注意：WooCommerce 默认会自动转义 HTML 输出，但 woocommerce_get_price_suffix 过滤器允许返回原始 HTML，无需额外 wp_kses() 处理（前提是内容可信）；
- 若主题或插件启用了严格输出过滤，可改用 wp_kses_post() 白名单保留 和 style 属性，确保安全性。
? 进阶提示：
如需长期维护或支持主题定制，建议将样式抽离至 CSS 文件，通过为 添加 class（如 class="price-incl-tax"），再在 style.css 中统一管理：
<span class="price-incl-tax"><?php echo esc_html( $incl_tax_price ); ?> incl. btw</span>
对应 CSS：
.price-incl-tax { font-size: 1.2em; color: #2c3e50; }
这样既提升代码可维护性，也便于设计师统一调控视觉风格。
