在 WooCommerce 中将产品变体的自定义字段值显示到自定义产品选项卡 [关闭]

Question

我成功地为每个产品变体创建了 3 个自定义字段，并且它可以正常工作（保存、更新）。

为此，我使用以下代码

/* Add custom field input @ Product Data > Variations > Single Variation */
add_action( 'woocommerce_variation_options', 'add_custom_field_cage_code_to_variations', 10, 3 );
function add_custom_field_cage_code_to_variations( $loop, $variation_data, $variation ) {
    echo '<div class="cage_code_options_group options_group">';
        woocommerce_wp_text_input( array(
            'id' => 'cage_code[' . $loop . ']',
            'class' => 'short',
            'label' => __( 'Cage Code', 'magazine' ),
            'wrapper_class' => 'form-field form-row form-row-first',
            'value' => get_post_meta( $variation->ID, 'cage_code', true )
        ));

        woocommerce_wp_text_input( array(
            'id' => 'cage_code_part_number[' . $loop . ']',
            'class' => 'short',
            'label' => __( 'Cage Code - Part #', 'magazine' ),
            'wrapper_class' => 'form-field form-row form-row-last',
            'value' => get_post_meta( $variation->ID, 'cage_code_part_number', true )
        ));

        woocommerce_wp_text_input( array(
            'id' => 'cage_code_niin_nsn_number[' . $loop . ']',
            'class' => 'short',
            'label' => __( 'NIIN/NSN Number', 'magazine' ),
            'wrapper_class' => 'form-field form-row form-row-first',
            'value' => get_post_meta( $variation->ID, 'cage_code_niin_nsn_number', true )
        ));
    echo '</div>';
}

/* Save custom field on product variation save */
add_action( 'woocommerce_save_product_variation', 'magazine_save_custom_field_variations', 10, 2 );
function magazine_save_custom_field_variations( $variation_id, $i ) {
    $cage_code = $_POST['cage_code'][$i];
    if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code', esc_attr( $cage_code ) );

    $cage_code_part_number = $_POST['cage_code_part_number'][$i];
    if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code_part_number', esc_attr( $cage_code_part_number ) );

    $cage_code_niin_nsn_number = $_POST['cage_code_niin_nsn_number'][$i];
    if ( isset( $cage_code_niin_nsn_number ) ) update_post_meta( $variation_id, 'cage_code_niin_nsn_number', esc_attr( $cage_code_niin_nsn_number ) );
}

---

然后我创建了一个新的产品标签

// Add a custom product data tab
add_filter( 'woocommerce_product_tabs', 'woo_cage_code_info_tab' );
function woo_cage_code_info_tab( $tabs ) {
    
    // Adds the new tab 
    $tabs['cage_code_information_tab'] = array(
        'title'     => __( 'Cage Code Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_cage_code_info_tab_content'
    );

    return $tabs;

}

function woo_cage_code_info_tab_content() {
?>
    <script type="text/template" id="tmpl-variation-template">
        <div class="woocommerce-variation-cage-code">
        {{{ data.variation.cage_code}}}
        </div>
    </script>

<?php
}

---

我的问题

自定义字段未显示在我创建的新产品选项卡上。我尝试使用此代码。在下一个tutorial 中应用并将其放在产品选项卡中。

<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-cage-code">
        {{{ data.variation.custom_field}}}
    </div>
</script>

但数据显示在变量部分（添加到购物车按钮上方）。

---

我的问题

是否有一种方法可以在“其他信息”选项卡上的数据更改为“选择下拉变量”时将更改值的新产品选项卡中的自定​​义字段。

Answer 1

在您的回调函数中，您可以使用以下内容

• 显示/输出会根据可变产品的下拉选择菜单进行相应更新

function woo_cage_code_info_tab_content() {
    global $product;
    
    if ( $product->is_type( 'variable' ) ) {
        
        // Loop through the variation IDs
        foreach( $product->get_children() as $key => $variation_id ) {
            // Get an instance of the WC_Product_Variation Object
            $variation = wc_get_product( $variation_id );
            
            // Get meta
            $cage_code = $variation->get_meta( 'cage_code' );
            $cage_code_part_number = $variation->get_meta( 'cage_code_part_number' );
            $cage_code_niin_nsn_number = $variation->get_meta( 'cage_code_niin_nsn_number' );
            
            // Output
            echo '<div class="woo_cage_code_info_tab_content woo_cage_code_info_tab_content-' . $variation_id .'">';
            
            if ( $cage_code ) {
                echo '<p>Cage code: ' . $cage_code . '</p>';
            }

            if ( $cage_code_part_number ) {
                echo '<p>Cage code part number: ' . $cage_code_part_number . '</p>';
            }
            
            if ( $cage_code_niin_nsn_number ) {
                echo '<p>Cage code niin nsn_number: ' . $cage_code_niin_nsn_number . '</p>';
            }
            
            echo '</div>';
        }
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Hide all
            $( '.woo_cage_code_info_tab_content' ).css( 'display', 'none' );

            // Change
            $( 'input.variation_id' ).change( function() {
                // Hide all
                $( '.woo_cage_code_info_tab_content' ).css( 'display', 'none' );

                if( $( 'input.variation_id' ).val() != '' ) {
                    var var_id = $( 'input.variation_id' ).val();

                    // Display current
                    $( '.woo_cage_code_info_tab_content-' + var_id ).css( 'display', 'block' );
                }
            });    
        });
        </script>
        <?php
    }
}