本文提供一种安全、兼容 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 语义简洁性与渲染性能——无需牺牲功能，即可让价格展示更轻量、更高效。