Php 增强的变体自定义字段

使用本教程，为产品变体添加了一个自定义字段

这是可行的，但是自定义字段由“添加到购物车”按钮定位。我想把它放在“附加信息”选项卡中。我已经尝试将前端代码添加到additional-information.php，但它没有显示出来

 <div class="woocommerce-variation-custom-text-field">
    {{{ data.variation.text_field }}}
</div>

{{{data.variation.text_field}}}

添加到functions.php以显示变化

   // Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );

// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

/**
 * Create new fields for variations
 *
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_text_field[' . $variation->ID . ']', 
            'label'       => __( 'My Text Field', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_text_field', true )
        )
    );

}

/**
 * Save new fields for variations
 *
*/
function save_variation_settings_fields( $post_id ) {

    // Text Field
    $text_field = $_POST['_text_field'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
    }
    

}

<?php

// Add New Variation Settings
add_filter( 'woocommerce_available_variation', 'load_variation_settings_fields' );

/**
 * Add custom fields for variations
 *
*/
function load_variation_settings_fields( $variations ) {
    
    // duplicate the line for each field
    $variations['text_field'] = get_post_meta( $variations[ 'variation_id' ], '_text_field', true );
    
    return $variations;

}

//添加变体设置
添加操作（'WOOMerce\u product\u在变量属性之后，'variation\u settings\u fields'，10,3）；
//保存变体设置
添加操作（'woocommerce\u save\u product\u variation'、'save\u variation\u settings\u fields'，10,2）；
/**
*为变体创建新字段
*
*/
函数变化\设置\字段（$loop、$variation\u data、$variation）{
//文本字段
woocommerce_wp_text_input（
数组（
“id'=>”\u text_字段['.$variation->id']，
'label'=>\（'My Text Field'，'woocommerce'），
'占位符'=>'http://'，
'desc_tip'=>'true'，
“description'=>”（在此处输入自定义值），“woocommerce”），
'value'=>get_post_meta（$variation->ID，'u text_field'，true）
)
);
}
/**
*为变体保存新字段
*
*/
函数保存\变量\设置\字段（$post\ id）{
//文本字段
$text\u field=$\u POST[''u text\u field'][$POST\u id]；
如果（！空（$text_字段））{
更新发布meta（$post_id，''u text_field'，esc_attr（$text_field））；
}
}
请注意，自WooCommerce 3以来，您的代码有点过时

jQuery和其他一些更改需要在单个产品页面上特定位置的任意位置显示所选变体自定义字段值，特别是在变体表单之外

在下面的示例中，所选的变体自定义字段值将显示在产品属性表之后的“附加信息”产品选项卡上

以下是完整的重新访问代码：

// Add a custom field to variation settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    woocommerce_wp_text_input( array(
        'id'          => '_text_field[' . $loop . ']',
        'label'       => __( 'My Text Field', 'woocommerce' ),
        'placeholder' => 'http://',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_text_field', true ),
    ) );
}

// Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation, $loop ) {
    if( isset($_POST['_text_field'][$loop]) ) {
        $variation->update_meta_data( '_text_field', sanitize_text_field($_POST['_text_field'][$loop]) );
    }
}

// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation', 'add_variation_custom_field_to_variable_form', 10, 3 );
function add_variation_custom_field_to_variable_form( $variation_data, $product, $variation ) {
    $variation_data['text_field'] = $variation->get_meta('_text_field');

    return $variation_data;
}

add_action( 'woocommerce_product_additional_information', 'add_html_container_to_display_selected_variation_custom_field' );
function add_html_container_to_display_selected_variation_custom_field( $product ){
    echo '<div class="custom_variation-text-field"></div>';
}

// Display selected variation custom field value to product the tab
add_action( 'woocommerce_after_variations_form', 'display_selected_variation_custom_field_js' );
function display_selected_variation_custom_field_js(){
    ?>
    <script type="text/javascript">
    (function($){
        $('form.cart').on('show_variation', function(event, data) {
            $('.custom_variation-text-field').text(data.text_field);
        }).on('hide_variation', function(event) {
            $('.custom_variation-text-field').text('');
        });
    })(jQuery);
    </script>
    <?php
}

//将自定义字段添加到变体设置
添加操作（'WOOMerce\u product\u在变量属性之后，'variation\u settings\u fields'，10,3）；
函数变化\设置\字段（$loop、$variation\u data、$variation）{
woocommerce_wp_text_输入（数组(
'id'=>'_text_字段['.$loop.']'，
'label'=>\（'My Text Field'，'woocommerce'），
'占位符'=>'http://'，
'desc_tip'=>'true'，
“description'=>”（在此处输入自定义值），“woocommerce”），
'value'=>get_post_meta（$variation->ID，'u text_field'，true），
) );
}
//保存变量设置中的自定义字段值
添加操作（'woocommerce\u admin\u process\u variation\u object'、'save\u variation\u settings\u fields'，10,2）；
函数保存变量设置字段（$variation$loop）{
如果（isset（$\u POST[''文本字段][$loop]））{
$variation->update_meta_数据（“_text_字段”，清理_text_字段（$_POST[“_text_字段”][$loop]）；
}
}
//将变体自定义字段添加到单个变量产品表单
添加过滤器（'woocommerce\u available\u variation'、'add\u variation\u custom\u field\u to\u variable\u form'，10,3）；
函数将变量字段添加到变量表单（$variation\u data、$product、$variation）{
$variation_data['text_field']=$variation->get_meta（“文本_field”）；
返回$U数据；
}
添加操作（“woocommerce\u product\u additional\u information”、“添加html\u container\u to\u display\u selected\u variation\u custom\u field”）；
函数添加\u html\u容器\u到\u显示\u选择的\u变化\u自定义\u字段（$product）{
回声'；
}
//将所选变体自定义字段值显示到产品选项卡
添加动作（'woocommerce'u在'u变体'u表单'之后，'display'u selected'u变体'u custom'u field'u js'）；
函数显示\选定\变量\自定义\字段\ js（）{
?>
（函数（$）{
$（'form.cart'）。on（'show_variation'，函数（事件，数据）{
$（'.custom_variation-text-field'）.text（data.text_-field）；
}).on（'hide_variation'，函数（事件）{
$（'.custom_variation-text-field'）.text（''）；
});
})（jQuery）；