WooCommerce: add custom field to order meta and admin order

Question

With the following code, I get a custom field on a WooCommerce product, but how can I display it on the order, checkout, and admin order (backend)?

This is my custom field on woocommerce per product

This is my admin order (backend) detail. I try to display the correct metadata that I entered in per product post.

How can I display the value I entered to my custom field into my admin order? I also hope somebody can help me to display the meta in the order and checkout page... or guide me to right direction. I realise that in order to display it in the admin order, I have to make sure that I register the meta to order or checkout first.

// Display Fields

add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save Fields

add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');

function woocommerce_product_custom_fields()
    {
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';

    // Custom Product Text Field

    woocommerce_wp_text_input(array(
        'id' => '_custom_product_text_field',
        'placeholder' => 'Custom Product Text Field',
        'label' => __('Custom Product Text Field', 'woocommerce') ,
        'desc_tip' => 'true'
    ));

    // Custom Product Number Field

    woocommerce_wp_text_input(array(
        'id' => '_custom_product_number_field',
        'placeholder' => 'Custom Product Number Field',
        'label' => __('Custom Product Number Field', 'woocommerce') ,
        'type' => 'number',
        'custom_attributes' => array(
            'step' => 'any',
            'min' => '0'
        )
    ));

    // Custom Product  Textarea

    woocommerce_wp_textarea_input(array(
        'id' => '_custom_product_textarea',
        'placeholder' => 'Custom Product Textarea',
        'label' => __('Custom Product Textarea', 'woocommerce')
    ));
    echo '</div>';
    }

function woocommerce_product_custom_fields_save($post_id)
    {

    // Custom Product Text Field

    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field)) update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));

    // Custom Product Number Field

    $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
    if (!empty($woocommerce_custom_product_number_field)) update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));

    // Custom Product Textarea Field

    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea)) update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));
    }

// Display in order edit

add_action('woocommerce_admin_order_data_after_billing_address', 'display_verification_id_in_admin_order_meta', 10, 1);

function display_verification_id_in_admin_order_meta($order)
    {

    // compatibility with WC +3

    $order_id = method_exists($order, 'get_id') ? $order->get_id() : $order->id;
    $total_incart = number_format((float)$order->get_total() - $order->get_total_tax() - $order->get_total_shipping() - $order->get_shipping_tax() , wc_get_price_decimals() , '.', '');
    $post_meta_value = get_post_meta($post->ID, '_custom_product_text_field', true);
    echo '<p><strong>' . __('TEXTFIELD', 'woocommerce') . ':</strong> ' . get_post_meta($order_id, '_custom_product_text_field', true) . '</p>';
    echo '<p><strong>' . __('NUMBERFIELD', 'woocommerce') . ':</strong> ' . get_post_meta($order_id, '_custom_product_number_field', true) . '</p>';
    echo '<p><strong>' . __('TEXTAREAFIELD', 'woocommerce') . ':</strong> ' . get_post_meta($order_id, '_custom_product_textarea', true) . '</p>';
    echo '<p><strong>Total price items: </strong>' . $total_incart . '</p>';
    }

Answer 1

It's been almost a year, but I think it can help someone...

This article explains exactly what is being questioned.

Add New Fields to the Order Details Metabox

The most relevant part of the article that I think solves the problem

 /**
 * Display custom fields in to Admin order details
 */
add_action( 'woocommerce_admin_order_data_after_order_details', 'custom_woocommerce_admin_order_data_after_order_details' );
function custom_woocommerce_admin_order_data_after_order_details( $order ){
?>
    <br class="clear" />
    <h4>My Custom Checkout Field Name <a href="#" class="edit_custom_field">Edit</a></h4>
    <?php 
        /*
         * get all the meta data values we need
         */ 
        $custom_field_value = get_post_meta( $order->id, 'my_custom_field_name', true );
    ?>
    <div class="custom_field">
        <p><strong>Custom Field Name:</strong> <?php echo wpautop( $custom_field_value ) ?></p>
    </div>

    <div class="edit_custom_field"> <!-- use same css class in h4 tag -->
    <?php
        woocommerce_wp_textarea_input( array(
            'id' => 'custom_field_name',
            'label' => 'Custom Field Name:',
            'value' => $custom_field_value,
            'wrapper_class' => 'form-field-wide'
        ) );
    ?>
    </div>
<?php
}

/**
 * Save the custom fields values
 */
add_action( 'woocommerce_process_shop_order_meta', 'custom_woocommerce_process_shop_order_meta' );
function custom_woocommerce_process_shop_order_meta( $order_id ){
    update_post_meta( $order_id, 'custom_field_name', wc_sanitize_textarea( $_POST[ 'custom_field_name' ] ) );
}

Inside the article there is a link where he explains how to add fields on the checkout page as well.

WooCommerce Checkout Fields