寻求WooCommerce可变产品显示EAN编码的实时更新解决方案

你的代码仅在页面首次加载时获取父产品的EAN值，而可变产品切换变体选项时，页面通过AJAX动态加载变体数据，静态输出的EAN内容不会自动同步更新。以下是修复方案：

步骤1：修改PHP函数，适配变体产品并添加可识别元素ID #

更新子主题functions.php中的代码，让它能识别当前选中的变体，并给EAN显示元素添加唯一ID，方便后续JS操作：

add_action( 'woocommerce_product_meta_start', 'display_product_ean_barcode', 11 );
function display_product_ean_barcode() {
    global $product;
    
    // 初始化EAN值为父产品的字段值
    $ean_value = $product->get_meta( '_global_unique_id' );
    
    // 如果是可变产品，且当前有选中的变体，获取变体的EAN
    if ( $product->is_type('variable') ) {
        // 尝试获取当前选中的变体（前端初始加载时可能没有，JS会后续处理）
        $selected_variation = wc_get_product( isset( $_GET['variation_id'] ) ? $_GET['variation_id'] : 0 );
        if ( $selected_variation ) {
            $ean_value = $selected_variation->get_meta( '_global_unique_id' );
        }
    }
    
    if ( ! empty( $ean_value ) ) {
        echo '<p id="ean-barcode-wrapper" class="sku_wrapper">' . sprintf( __( 'EAN Barcode: %s', 'woocommerce' ), $ean_value ) . '</p>';
    } else {
        // 如果没有EAN，输出空容器（方便JS后续更新）
        echo '<p id="ean-barcode-wrapper" class="sku_wrapper" style="display:none;"></p>';
    }
}

步骤2：添加JavaScript监听变体切换事件 #

在子主题的functions.php中添加以下代码，用于监听WooCommerce变体切换事件，动态更新EAN内容：

add_action( 'wp_footer', 'update_ean_on_variation_switch' );
function update_ean_on_variation_switch() {
    // 仅在可变产品页面加载
    if ( ! is_product() || ! wc_get_product()->is_type('variable') ) return;
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            // 监听变体选中事件
            $('form.variations_form').on('found_variation', function(event, variation){
                var eanWrapper = $('#ean-barcode-wrapper');
                // 获取变体的_global_unique_id元数据
                var variationEan = variation._global_unique_id;
                
                if ( variationEan ) {
                    eanWrapper.html('<?php echo esc_js( __( 'EAN Barcode: %s', 'woocommerce' ) ); ?>'.replace('%s', variationEan)).show();
                } else {
                    eanWrapper.hide();
                }
            });
            
            // 监听变体未选中（重置）事件
            $('form.variations_form').on('reset_data', function(){
                var eanWrapper = $('#ean-barcode-wrapper');
                // 恢复父产品的EAN值
                var parentEan = '<?php echo esc_js( wc_get_product()->get_meta( '_global_unique_id' ) ); ?>';
                if ( parentEan ) {
                    eanWrapper.html('<?php echo esc_js( __( 'EAN Barcode: %s', 'woocommerce' ) ); ?>'.replace('%s', parentEan)).show();
                } else {
                    eanWrapper.hide();
                }
            });
        });
    </script>
    <?php
}

代码说明 #

• PHP部分：优先获取选中变体的EAN，初始加载时如果URL参数包含变体ID，也会显示对应变体的EAN；同时预留空容器，确保JS能找到元素进行更新。
• JS部分：监听found_variation事件（变体选中时触发），从返回的变体数据中提取EAN并更新页面；监听reset_data事件（变体选择重置时触发），恢复显示父产品的EAN。

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