如何在WooCommerce中扩展variation.php模板显示自定义数据

1. 给前端传递变量产品的额外数据 #

在子主题的functions.php文件中添加以下代码，通过钩子将每个变量的常规价、促销价及促销日期数据注入到前端可用的变量数据中：

add_filter( 'woocommerce_available_variation', 'inject_variation_sale_details', 10, 3 );
function inject_variation_sale_details( $variation_data, $product, $variation ) {
    // 传递格式化后的常规价
    $variation_data['formatted_regular_price'] = wc_price( $variation->get_regular_price() );
    
    // 处理促销相关数据（仅当变量处于促销状态时）
    if ( $variation->is_on_sale() ) {
        $variation_data['formatted_sale_price'] = wc_price( $variation->get_sale_price() );
        
        // 格式化促销日期（如果存在）
        $start_date = $variation->get_date_on_sale_from();
        $variation_data['sale_start'] = $start_date ? $start_date->date( 'Y-m-d' ) : '';
        
        $end_date = $variation->get_date_on_sale_to();
        $variationation_data['sale_end'] = $end_date ? $end_date->date( 'Y-m-d' ) : '';
    } else {
        // 非促销状态下清空促销相关字段
        $variation_data['formatted_sale_price'] = '';
        $variation_data['sale_start'] = '';
        $variation_data['sale_end'] = '';
    }
    
    return $variation_data;
}

2. 修改variation.php模板 #

找到子主题路径/themes/theme-child/woocommerce/single-product/add-to-cart/variation.php，移除默认价格代码：

<div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>

替换为以下自定义结构，用于渲染我们传递的变量数据：

<div class="custom-variation-pricing">
    <p class="regular-price">常规价: {{{ data.variation.formatted_regular_price }}}</p>
    {{#if data.variation.formatted_sale_price}}
        <p class="sale-price">促销价: {{{ data.variation.formatted_sale_price }}}</p>
        {{#if data.variation.sale_start}}
            <p class="sale-dates">促销时间: {{{ data.variation.sale_start }}} 至 {{{ data.variation.sale_end }}}</p>
        {{/if}}
    {{/if}}
</div>

3. 自定义样式（可选） #

如果需要调整显示样式，在子主题的style.css中添加以下CSS：

.custom-variation-pricing .regular-price {
    text-decoration: line-through;
    color: #888;
    margin: 0 0 5px;
}
.custom-variation-pricing .sale-price {
    color: #d9534f;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 5px;
}
.custom-variation-pricing .sale-dates {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

内容的提问来源于stack exchange，提问作者social.reza