如何隐藏 WooCommerce 商品原价（删除线样式）但保留促销价的默认样式-php教程-PHP中文网

如何隐藏 WooCommerce 商品原价（删除线样式）但保留促销价的默认样式

本文介绍一种安全、兼容性强的 PHP 方式，在 WooCommerce 中隐藏带删除线的原价（regular price），同时完整保留促销价（sale price）原有的标签包裹、颜色、字体加粗等默认样式，避免 CSS 覆盖带来的主题不兼容风险。

本文介绍一种安全、兼容性强的 php 方式，在 woocommerce 中隐藏带删除线的原价（regular price），同时完整保留促销价（sale price）原有的 `` 标签包裹、颜色、字体加粗等默认样式，避免 css 覆盖带来的主题不兼容风险。

在 WooCommerce 中，当商品设置为促销价时，前端默认会显示为「原价删除线 + 新价高亮」形式，HTML 结构类似：

<del aria-hidden="true">¥199.00</del> 
<ins>¥129.00</ins>

许多商家希望仅展示促销价（即隐藏部分），但又不破坏的语义化标签和主题已定义的样式（如绿色、加粗、过渡动画等）。若直接用 wc_price($product->get_price()) 替换整个价格 HTML（如原始代码所示），会丢失标签及 get_price_suffix() 等上下文信息，导致促销价失去原有样式和附加内容（如“含税”后缀）。

✅ 正确做法是：精准提取并复用 WooCommerce 原生生成的片段，而非重建价格字符串。

以下是优化后的可靠方案，已适配 WooCommerce 6.0+ 及主流主题：

add_filter('woocommerce_get_price_html', 'wt_hide_regular_price', 99, 2);

function wt_hide_regular_price($price, $product) {
    // 仅在非购物车、非结算页、非 AJAX 请求时生效（避免影响结账逻辑）
    if (!is_cart() && !is_checkout() && !wp_doing_ajax()) {
        if ($product->is_type('simple') || $product->is_type('variation')) {
            return wt_regular_price_for_product($price, $product);
        }
    }
    return $price;
}

function wt_regular_price_for_product($price, $product) {
    // 仅对有促销价的商品进行处理
    if ($product->get_sale_price() && '' !== $product->get_sale_price()) {
        $sale_price_html = wc_price($product->get_sale_price());
        // 复用 WooCommerce 原生的 <ins> 包裹逻辑，并追加价格后缀（如含税提示）
        $price = '<ins>' . $sale_price_html . '</ins>' . $product->get_price_suffix();
    } else {
        // 若无促销价，保持原样（避免误处理）
        $price = wc_price($product->get_price()) . $product->get_price_suffix();
    }
    return $price;
}</ins>

? 关键说明：

使用标签而非自定义 class，确保与主题 CSS（如 .price ins { color: #72b85c; font-weight: 700; }）完全兼容；
显式调用 $product->get_price_suffix()，保留“含税”“+运费”等动态后缀；
增加空值校验 '' !== $product->get_sale_price()，防止 0 价商品被错误跳过；
过滤器优先级设为 99，确保在 WooCommerce 默认价格渲染之后、其他插件修改之前执行。

⚠️ 不推荐仅靠 CSS 隐藏原价（如 del { display: none; }）的原因：