如何在WooCommerce可变产品中显示每平方米单价（Elementor适配）

问题场景 #

搭建WooCommerce网站，销售带1kg、3kg等规格的可变产品，每个规格对应不同覆盖面积。需在Elementor自定义的单产品页面中，给每个变体价格追加每平方米单价，格式如：€15（€4.29 / m²）。

原尝试的代码未达到预期效果，核心问题包括：硬编码覆盖面积、依赖的钩子在Elementor模板中不生效、未将单价与变体价格绑定显示。

解决方案步骤 #

• 添加自定义字段：给每个变体添加可编辑的「覆盖面积」字段，替代硬编码数值，适配不同产品需求
• 修改价格渲染逻辑：利用WooCommerce原生过滤器，将每平单价追加到变体价格后，确保兼容Elementor模板
• 前端实时更新：处理变体切换的前端交互，保证选中不同变体时，每平单价同步更新

完整代码实现 #

1. 添加变体覆盖面积自定义字段（functions.php） #

// 在变体定价选项中添加覆盖面积输入框
add_action( 'woocommerce_variation_options_pricing', 'add_variation_coverage_field', 10, 3 );
function add_variation_coverage_field( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id'          => '_coverage_area[' . $loop . ']',
        'label'       => __('覆盖面积 (m²)', 'woocommerce'),
        'desc_tip'    => true,
        'description' => __('输入该变体对应的覆盖面积', 'woocommerce'),
        'value'       => get_post_meta( $variation->ID, '_coverage_area', true ),
        'type'        => 'number',
        'custom_attributes' => array(
            'step' => '0.1',
            'min'  => '0'
        )
    ) );
}

// 保存变体覆盖面积字段值
add_action( 'woocommerce_save_product_variation', 'save_variation_coverage_field', 10, 2 );
function save_variation_coverage_field( $variation_id, $i ) {
    $coverage_area = $_POST['_coverage_area'][$i];
    if ( isset( $coverage_area ) ) {
        update_post_meta( $variation_id, '_coverage_area', esc_attr( $coverage_area ) );
    }
}

2. 追加每平方米单价到变体价格（functions.php） #

// 过滤变体价格HTML，添加每平单价
add_filter( 'woocommerce_variation_price_html', 'append_sqm_price_to_variation', 10, 2 );
add_filter( 'woocommerce_single_variation_price_html', 'append_sqm_price_to_variation', 10, 2 );

function append_sqm_price_to_variation( $price_html, $variation ) {
    $coverage_area = get_post_meta( $variation->get_id(), '_coverage_area', true );
    
    // 仅当覆盖面积有效时计算并显示
    if ( ! empty( $coverage_area ) && $coverage_area > 0 ) {
        $price = $variation->get_price();
        $price_per_sqm = round( $price / $coverage_area, 2 );
        $sqm_price_html = wc_price( $price_per_sqm ) . ' / m²';
        $price_html = str_replace( '</span>', ' (' . $sqm_price_html . ')</span>', $price_html );
    }
    
    return $price_html;
}

3. 适配Elementor前端变体切换（可选） #

如果Elementor变体组件导致价格更新时每平单价未同步，添加以下JS代码到主题自定义JS或Elementor自定义脚本中：

jQuery(document).ready(function($) {
    // 监听变体选择事件
    $('form.variations_form').on('show_variation', function(event, variation) {
        var coverageArea = variation._coverage_area;
        if (coverageArea && coverageArea > 0) {
            var price = variation.display_price;
            var pricePerSqm = (price / coverageArea).toFixed(2);
            var currencySymbol = $('span.woocommerce-Price-currencySymbol').text();
            
            // 更新价格显示
            var priceElement = $('.single_variation .price');
            var originalPrice = priceElement.html().split(' (')[0];
            priceElement.html(`${originalPrice} (${currencySymbol}${pricePerSqm} / m²)`);
        }
    });
});

使用说明 #

1. 将PHP代码添加到当前主题的functions.php文件，或使用代码片段插件管理
2. 编辑可变产品的每个变体，在「定价」选项卡下填写对应的覆盖面积
3. 刷新单产品页面，即可看到变体价格后追加了每平方米单价

内容的提问来源于stack exchange，提问作者Selim wix