WooCommerce变量商品：标题下保留From价，选规格后替换为变体价格

我目前在用一段适配旧版WordPress和WooCommerce的代码，虽然知道现在有更优方案，但它还能正常运行。我想要实现的效果是：在变量商品页面的标题下方保留“From: [最低价格]”的显示，直到用户选完所有变体规格后，再把这个From价替换成选中变体的对应价格。

我已有的From价生成代码 #

add_filter('woocommerce_variable_sale_price_html', 'custom_variation_price_format', 10, 2);
add_filter('woocommerce_variable_price_html', 'custom_variation_price_format', 10, 2);

function custom_variation_price_format($price, $product) {
    // 获取所有变体价格
    $variation_prices = $product->get_variation_prices(true);

    // 获取最低价格
    $min_price = current($variation_prices['price']);
    $min_price_html = wc_price($min_price);

    // 添加"From"前缀
    $price = sprintf(__('From: %s', 'woocommerce'), $min_price_html);

    return $price;
}

从旧帖获取的组合代码 #

/** Hide Variable prices */
add_filter( 'woocommerce_variable_sale_price_html', 'bbloomer_variation_price_format', 10, 2 );

add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );

function bbloomer_variation_price_format( $price, $product ) {

 if (is_product()) {
    return $product->get_price();
 } else {
        // 主价格
        $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
        $price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        // 促销价格
        $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
        sort( $prices );
        $saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        if ( $price !== $saleprice ) {
        $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
        }
        return $price;
         }

}

// 显示变体价格
add_filter('woocommerce_show_variation_price', function() {return true;});

// 覆盖WooCommerce默认价格模板函数
function woocommerce_template_single_price() {
    global $product;
    if ( ! $product->is_type('variable') ) { 
        woocommerce_get_template( 'single-product/price.php' );
    }
}

function shuffle_variable_product_elements(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'shuffle_variable_product_elements' );

需求示意图 #

实现需求的整合代码 #

替换你现有的所有相关代码，使用下面这段整合后的代码即可实现需求：

// 生成标题下方的From价
add_filter('woocommerce_variable_sale_price_html', 'custom_variable_from_price', 10, 2);
add_filter('woocommerce_variable_price_html', 'custom_variable_from_price', 10, 2);

function custom_variable_from_price($price, $product) {
    // 获取所有变体的最低价格
    $variation_prices = $product->get_variation_prices(true);
    $min_price = current($variation_prices['price']);
    $min_price_html = wc_price($min_price);
    
    // 返回带From前缀的价格
    return sprintf(__('From: %s', 'woocommerce'), $min_price_html);
}

// 确保变体价格数据能正常传递
add_filter('woocommerce_show_variation_price', '__return_true');

// 重写价格模板，在标题下方输出可替换的From价容器
function woocommerce_template_single_price() {
    global $product;
    if ( $product->is_type('variable') ) {
        // 输出带标识的From价容器
        $min_price = current($product->get_variation_prices(true)['price']);
        echo '<div class="variable-from-price">' . sprintf(__('From: %s', 'woocommerce'), wc_price($min_price)) . '</div>';
    } else {
        woocommerce_get_template( 'single-product/price.php' );
    }
}

// 添加JS监听变体选择事件，动态替换价格
add_action('woocommerce_after_variations_form', 'custom_variation_price_replacement_script');

function custom_variation_price_replacement_script() {
    global $product;
    if ( $product->is_type('variable') ) {
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 监听变体选择完成事件
            $('form.variations_form').on('show_variation', function(event, variation) {
                // 替换标题下方的From价为选中变体的完整价格
                $('.variable-from-price').html(variation.price_html);
            });
            // 监听变体选择重置事件，恢复From价显示
            $('form.variations_form').on('hide_variation', function() {
                var minPriceHtml = '<?php echo wc_price(current($product->get_variation_prices(true)['price'])); ?>';
                $('.variable-from-price').html('<?php echo __('From:', 'woocommerce'); ?> ' + minPriceHtml);
            });
        });
    </script>
    <?php
    }
}

// 如果你需要保留原代码中移动标题、摘要的布局调整，就保留下面这段函数；不需要则删除
function shuffle_variable_product_elements(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'shuffle_variable_product_elements' );

代码说明 #

1. From价初始显示：通过过滤器生成标题下方的From: [最低价格]，固定在标题下方位置。
2. 变体选择响应：利用WooCommerce自带的show_variation事件，在用户选完所有变体规格后，自动将标题下方的From价替换为选中变体的完整价格（包含促销价的划价格式）。
3. 重置恢复：当用户取消变体选择时，触发hide_variation事件，自动恢复显示初始的From价。
4. 布局兼容：保留了原代码中的布局调整逻辑，如果你不需要移动标题和摘要位置，直接删除shuffle_variable_product_elements相关代码即可。

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