如何在WooCommerce中获取并展示可变产品各变体的配送等级

原代码的问题在于只读取了当前页面主产品（父产品）的配送等级，可变产品的每个变体是独立的子文章，需要结合预存变体配送数据+前端监听选择事件的方式动态切换显示内容。

完整调整后的代码 #

PHP 代码部分（替换原有函数并新增逻辑） #

// 输出配送时效显示容器 + 简单产品默认显示
add_action( 'woocommerce_after_add_to_cart_button', 'show_shipping_cart', 2 );
function show_shipping_cart() {
    global $product;
    
    // 可变产品先输出空容器，后续JS动态更新
    if ( $product->is_type('variable') ) {
        echo '<p class="shipping_class_desc"></p>';
        return;
    }

    // 简单产品走原有逻辑
    $product_classes = wp_get_post_terms( $product->get_id(), 'product_shipping_class' );
    if ( $product_classes && ! is_wp_error ( $product_classes ) ){
        $single_class = array_shift( $product_classes ); 
        echo '<p class="shipping_class_desc">Levertijd: '.esc_html($single_class->description).'</p>';
    }
}

// 把每个变体的配送时效描述注入到前端变体数据中
add_filter( 'woocommerce_available_variation', 'add_shipping_desc_to_variation_data', 10, 3 );
function add_shipping_desc_to_variation_data( $data, $product, $variation ) {
    $shipping_classes = wp_get_post_terms( $variation->get_id(), 'product_shipping_class' );
    if ( $shipping_classes && ! is_wp_error( $shipping_classes ) ) {
        $single_class = array_shift( $shipping_classes );
        $data['shipping_desc'] = 'Levertijd: ' . esc_html($single_class->description);
    } else {
        // 变体未单独设置配送等级时，可选继承父产品的配送描述，不需要可删除该分支逻辑
        $parent_shipping_classes = wp_get_post_terms( $product->get_id(), 'product_shipping_class' );
        if ( $parent_shipping_classes && ! is_wp_error( $parent_shipping_classes ) ) {
            $parent_class = array_shift( $parent_shipping_classes );
            $data['shipping_desc'] = 'Levertijd: ' . esc_html($parent_class->description);
        } else {
            $data['shipping_desc'] = '';
        }
    }
    return $data;
}

// 注入前端JS监听变体选择事件
add_action( 'wp_footer', 'update_shipping_desc_on_variation_change' );
function update_shipping_desc_on_variation_change() {
    // 仅在产品详情页加载JS
    if ( ! is_product() ) return;
    ?>
    <script>
    jQuery(document).ready(function($){
        // 监听变体选中事件，更新配送时效
        $('.variations_form').on('found_variation', function(event, variation){
            $('.shipping_class_desc').text(variation.shipping_desc || '');
        });
        // 未选中变体/重置变体时清空内容
        $('.variations_form').on('reset_data', function(){
            $('.shipping_class_desc').text('');
        });
    });
    </script>
    <?php
}

逻辑说明 #

• 简单产品保持原有逻辑，直接输出对应配送时效
• 可变产品进入页面时先输出空的显示容器，避免一开始就显示父产品的配送信息
• 所有变体的配送时效会提前注入到前端的变体配置数据中，用户选中对应变体时，JS会自动更新显示对应时效
• 代码兼容变体未单独设置配送等级的场景，默认继承父产品的配送描述，不需要该逻辑可以直接删除对应判断分支。

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