You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何仅移动WooCommerce单品页面的常规价格?

仅移动WooCommerce单品页面的常规价格

默认的woocommerce_template_single_price函数会同时渲染常规价与促销价,无法直接单独移动常规价,需要通过自定义逻辑拆分价格输出结构:

  1. 移除默认的价格模块
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
  1. 自定义函数拆分价格展示逻辑
    这个函数负责在原价格位置输出促销价(如果产品处于促销状态),同时预留常规价的独立输出入口:
function custom_product_price_render() {
    global $product;

    // 输出促销价(仅当产品有促销价时显示)
    if ( $product->is_on_sale() ) {
        echo '<p class="price sale-price">' . wc_price( $product->get_sale_price() ) . '</p>';
    }
    // 若产品无促销价,可取消下方注释,保留常规价在原位置输出
    // else {
    //     echo '<p class="price regular-price">' . wc_price( $product->get_regular_price() ) . '</p>';
    // }
}
  1. 将拆分后的价格模块挂载回原位置,再单独挂载常规价到目标位置
// 挂载拆分后的促销价到原价格位置(优先级10)
add_action( 'woocommerce_single_product_summary', 'custom_product_price_render', 10 );

// 单独将常规价挂载到你需要的位置,这里示例用优先级35
add_action( 'woocommerce_single_product_summary', function() {
    global $product;
    // 仅当产品有促销价时,才单独移动常规价,避免无促销时重复显示
    if ( $product->is_on_sale() ) {
        echo '<p class="price regular-price moved-regular-price">' . wc_price( $product->get_regular_price() ) . '</p>';
    }
}, 35 );
  1. 样式调整(可选)
    通过自定义CSS调整移动后常规价的样式,比如:
.moved-regular-price {
    text-decoration: line-through;
    color: #888;
    margin-top: 10px;
}

内容的提问来源于stack exchange,提问作者Leonardo Lamanna

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.11 22:15:49