Save Custom Field Data to Cart and Order of a Woocommerce product variation

We managed to put a custom field for variation products following Remi Corson guide here

At this point, we are able to show the custom text field in the single product page when users select the variation, but this is not enough in the purchase process since we need to:

A) Display this text in Cart and Checkout
B) Save this information so it shows in Thank You Page, Emails and Admin Order Edit Page

Something similar to Save and display product custom meta on WooCommerce orders and emails, but with product variations instead of simple products.

This is the code we added to our functions.php to add the custom field to the product variations

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

        // Hidden field
    woocommerce_wp_hidden_input(
    array( 
        'id'    => '_hidden_field[' . $variation->ID . ']', 
        'value' => 'hidden_value'
        )
    );

}

/**
 * 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 ) );
    }

    // Hidden field
    $hidden = $_POST['_hidden_field'][ $post_id ];
    if( ! empty( $hidden ) ) {
        update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
    }

}

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

}

So the goal here is how can we show this custom field for each variation in the Cart and Checkout below the items (Something like the image below – Look at the Shipping delay notice)

And to save that custom field info that each variation has to the Thank You Page, Emails and Order Page (We did it for simple products with this code, but this doesn’t work for variable ones)

// Save and display "Custom Field for Simple Products" on order items everywhere
add_filter( 'woocommerce_checkout_create_order_line_item', 'action_wc_checkout_create_order_line_item', 10, 4 );
function action_wc_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {

    // Get the Custom Field
    $value = $values['data']->get_meta( 'custom_field_for_simple_products' );

    if( ! empty( $value ) ) {
        // Save it and display it
        $item->update_meta_data( __( 'Custom Fields', 'woocommerce' ), $value );
    }
}

Please help!!

Answer

Updated

There are some mistakes in your code… The following revisited code will solve your issue:

// Display Variation custom fields (admin)
add_action( 'woocommerce_product_after_variable_attributes', 'display_variation_setting_custom_fields', 10, 3 );
function display_variation_setting_custom_fields( $loop, $variation_data, $variation ) {
    echo '<div>';

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

    woocommerce_wp_hidden_input( array( // Hidden field
        'id'    => "_hidden_field[$loop]",
        'value' => 'hidden_value',
    ) );
    echo '</div>';
}


// Save Variation custom fields
add_action( 'woocommerce_save_product_variation', 'save_variation_custom_fields', 10, 2 );
function save_variation_custom_fields( $variation_id, $i ) {
    // Save Text Field
    if( isset( $_POST['_text_field'][$i] ) && ! empty( $_POST['_text_field'][$i] ) )
        update_post_meta( $variation_id, '_text_field', sanitize_text_field( $_POST['_text_field'][$i] ) );

    // Save Hidden Field
    if( isset( $_POST['_hidden_field'][$i] ) && ! empty( $_POST['_hidden_field'][$i] ) )
        update_post_meta( $variation_id, '_hidden_field', esc_attr( $_POST['_hidden_field'][$i] ) );
}

// Include our variation custom field
add_filter( 'woocommerce_available_variation', 'include_variation_custom_field', 10, 3) ;
function include_variation_custom_field( $data, $product, $variation ) {
    $data['text_field'] = $variation->get_meta( '_text_field' );

    return $data;
}

// Save and display "Custom Field for Simple Products" on order items everywhere
add_filter( 'woocommerce_checkout_create_order_line_item', 'action_wc_checkout_create_order_line_item_2', 10, 4 );
function action_wc_checkout_create_order_line_item_2( $item, $cart_item_key, $values, $order ) {
    // Get the Custom Field
    $value = $values['data']->get_meta( '_text_field' );

    if( ! empty( $value ) ) {
        // Save it and display it
        $item->update_meta_data( __( 'Custom Field', 'woocommerce' ), $value );
    }
}

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

Related: Save and display product custom meta on WooCommerce orders and emails

---

Somme screenshots

On admin product variations settings:

On order received page (thankyou):

On admin edit orders pages: