WooCommerce单商品页如何在顶部显示选中变体的SKU和价格

可变产品的变体切换为前端交互行为，仅依赖PHP后端渲染无法实现顶部区域的实时内容更新，需结合「后端输出占位容器+前端监听WooCommerce原生变体事件更新内容」的方案实现。

完整可运行代码 #

// 1. 在页面顶部钩子位置输出展示容器
add_action('woocommerce_before_single_product_summary', 'display_top_variation_info', 15);
function display_top_variation_info() {
    global $product;
    // 自定义容器类，可自行调整行内样式
    echo '<div class="custom-top-variation-info" style="margin-bottom: 20px;font-size: 16px;">';
    // SKU展示行，可直接修改style属性设置行内样式
    echo '<p class="top-sku" style="display: inline-block;margin-right: 30px;">' . __("SKU:", "woocommerce") . ' <span>' . esc_html($product->get_sku()) . '</span></p>';
    // 价格展示行
    echo '<p class="top-price" style="display: inline-block;">' . __("价格:", "woocommerce") . ' <span>' . wp_kses_post($product->get_price_html()) . '</span></p>';
    echo '</div>';

    // 仅可变产品加载变体同步逻辑
    if ($product->is_type('variable')) {
        add_action('wp_footer', 'sync_variation_info_to_top', 99);
    }
}

// 2. 向变体返回数据中注入格式化带货币符号的价格
add_filter('woocommerce_available_variation', 'add_formatted_price_to_variation_data', 20, 3);
function add_formatted_price_to_variation_data($variation_data, $product, $variation) {
    $variation_data['formatted_price'] = $variation->get_price_html();
    return $variation_data;
}

// 3. 前端JS监听变体事件，同步更新顶部内容
function sync_variation_info_to_top() {
    ?>
    <script>
    jQuery(function($){
        // 变体选中时更新内容
        $('form.variations_form').on('found_variation', function(event, variation){
            if(variation.sku){
                $('.custom-top-variation-info .top-sku span').text(variation.sku);
            }
            if(variation.formatted_price){
                $('.custom-top-variation-info .top-price span').html(variation.formatted_price);
            }
        });

        // 变体重置时恢复为父产品默认值
        $('form.variations_form').on('reset_variation', function(){
            const defaultSku = '<?php global $product; echo esc_js($product->get_sku()); ?>';
            const defaultPrice = '<?php global $product; echo esc_js($product->get_price_html()); ?>';
            $('.custom-top-variation-info .top-sku span').text(defaultSku);
            $('.custom-top-variation-info .top-price span').html(defaultPrice);
        });
    });
    </script>
    <?php
}

样式自定义说明 #

• 行内样式直接调整代码中各标签的style属性值即可
• 如需全局样式控制，直接对.custom-top-variation-info、.top-sku、.top-price类添加CSS规则即可

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