本文提供一种安全、兼容 woocommerce 6+ 的方法，通过重写 `wc_price` 过滤器彻底移除冗余的 `` 元素，从而显著降低页面 dom 节点数，提升 pagespeed insights 评分。
在使用 WooCommerce 构建电商站点时，PageSpeed Insights 常报出 “Excessive DOM elements”（DOM 元素过多）警告，其中高频元凶之一便是默认价格渲染中嵌套的 。该标签虽语义清晰，但每个价格实例都会额外增加 1–2 个 DOM 节点；在商品列表页（如 20+ 商品）、购物车或价格对比场景下，极易导致总 DOM 节点突破 1500 上限，拖慢首屏渲染与交互响应。
你尝试过的 woocommerce_currency_symbol 和 formatted_woocommerce_price 钩子之所以无效，是因为它们仅修改货币符号文本或部分 HTML 片段，而无法控制包裹结构——真正生成完整价格 HTML（含 currencySymbol span、amount span、bdi 等）的是核心函数 wc_price()，它由 WC_Price_Handler::price() 调用，并最终返回一整段已封装好的 DOM 字符串。
✅ 正确解法是 拦截并重写 wc_price 过滤器（优先级 10，共 5 个参数），完全接管价格 HTML 的组装逻辑，在保留全部功能（如多货币、税标、格式化、bdi 包裹）的前提下，将货币符号内联至 amount 标签中，消除独立的 currencySymbol 元素。
以下是经 WooCommerce 6.x 实测可用的精简版代码，直接添加至当前主题的 functions.php 文件末尾：
add_filter('wc_price', 'custom_wc_price', 10, 5);
function custom_wc_price($return, $price, $args, $unformatted_price, $original_price) {
// 解析并标准化参数（复用 WooCommerce 原有逻辑）
$args = apply_filters(
'wc_price_args',
wp_parse_args(
$args,
array(
'ex_tax_label' => false,
'currency' => '',
'decimal_separator' => wc_get_price_decimal_separator(),
'thousand_separator' => wc_get_price_thousand_separator(),
'decimals' => wc_get_price_decimals(),
'price_format' => get_woocommerce_price_format(),
)
)
);
// 处理负数与格式化基础
$negative = $price < 0;
$abs_price = $negative ? abs((float) $price) : (float) $price;
$formatted_number = number_format(
$abs_price,
$args['decimals'],
$args['decimal_separator'],
$args['thousand_separator']
);
if (apply_filters('woocommerce_price_trim_zeros', false) && $args['decimals'] > 0) {
$formatted_number = wc_trim_zeros($formatted_number);
}
// ✅ 关键：内联货币符号，不再单独包裹
$currency_symbol = get_woocommerce_currency_symbol($args['currency']);
$formatted_price = sprintf($args['price_format'], $currency_symbol, $formatted_number);
$return = '' . ($negative ? '-' : '') . $formatted_price . '';
// 保留税标支持（如启用）
if ($args['ex_tax_label'] && wc_tax_enabled()) {
$return .= ' ' . WC()->countries->ex_tax_or_vat() . '';
}
return $return;
}? 注意事项与最佳实践：
- 务必测试多货币场景：若站点支持 USD/EUR/JPY 等，确认 get_woocommerce_currency_symbol() 返回正确符号（可配合 woocommerce_currency_symbol 钩子进一步定制）；
- 避免破坏无障碍访问： 标签保留用于双向文本隔离，不可移除；amount 类名需保留以确保 CSS 样式和 JS 选择器兼容；
- 禁用插件冲突：某些价格显示插件（如动态定价、会员价）可能也 hook wc_price，建议启用本方案后逐一排查；
- 缓存刷新：修改后清空对象缓存（如 Redis）、页面缓存（WP Super Cache / Cloudflare）及浏览器缓存，再运行 PageSpeed Insights 验证 DOM 数量下降效果（通常单页减少 30–200+ 节点）；
- 未来兼容性：该方案基于 WooCommerce 官方 wc_price 文档接口设计，比直接操作 HTML 字符串更稳定，推荐作为长期解决方案。
通过此重构，你不仅解决了 PageSpeed 的 DOM 警告，还提升了 HTML 语义简洁性与渲染性能——无需牺牲功能，即可让价格展示更轻量、更高效。
