本文介绍如何通过 HTML 标签配合内联 CSS，在 WooCommerce 的 woocommerce_get_price_suffix 钩子中精准控制含税价格部分的字体大小，实现“ excl. btw”与“incl. btw”差异化显示。
本文介绍如何通过 html `` 标签配合内联 css，在 woocommerce 的 `woocommerce_get_price_suffix` 钩子中精准控制含税价格部分的字体大小，实现“ excl. btw”与“incl. btw”差异化显示。
在 WooCommerce 主题或插件开发中，常需对价格展示进行精细化样式控制。例如，你希望将“含税价”（如 €24,99 incl. btw）以更大字号突出显示，而保持“不含税价提示”（excl. btw）维持默认大小。由于 woocommerce_get_price_suffix 过滤器返回的是 HTML 字符串，因此可直接嵌入带样式的 HTML 元素——最简洁可靠的方式是使用 包裹目标文本，并通过 style 属性设置 font-size。
以下为优化后的实现代码：
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 ) ) . ' incl. btw';
$suffix = 'excl. btw <br><span style="font-size: 1.2em; font-weight: 600;">' . $incl_tax_price . '</span>';
return $suffix;
}
✅ 关键说明：
- 使用 1.2em（推荐）或 16px、large 等合法 CSS 字体单位，确保响应式兼容性；
- font-weight: 600 可选添加，进一步强化视觉层次；
- 是行内元素，不影响布局流，安全嵌入 HTML 片段；
- 样式作用域严格限定于该 内，不会污染全局或干扰其他价格组件。
⚠️ 注意事项：
- 避免在 style 中使用 !important——WooCommerce 或主题 CSS 可能覆盖内联样式，应优先通过 CSS 选择器（如 .price .incl-btw）在主题样式表中统一管理；
- 若需多处复用或支持深色模式，请将样式抽离至 wp_enqueue_style() 加载的 CSS 文件中，并为 添加 class（如 ）；
- 始终在子主题的 functions.php 中添加此代码，避免更新主题时丢失修改。
通过这一方法，你不仅能灵活调整字体大小，还可延伸控制颜色、行高、字体族等任意 CSS 属性，让价格信息更清晰、专业且符合品牌规范。
