Enhanced WooCommerce Custom Fields for Variations

Using the Remi Coulson tutorial, a custom field has been added for product variations.

This works, however the custom field is positioned by the add-to-cart button. I wish to position it within Additional Information tab. I have tried adding the front end code to the additional-information.php but it does not display.

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

Added to functions.php to display variation

   // 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;

}

Answer

Note that your code is a bit outdated since WooCommerce 3.

jQuery and some other changes are required to display the selected variation custom field value anywhere in a specific location on single product pages, specially outside the variation form.

In the example below the selected variation custom field value will be displayed on “Additional information” product tab after product attributes table.

Here is the complete revisited code:

// 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
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.