Adding a hidden fields to checkout and process it through order

Question

I would like to add an verification code to the checkout process that is read-only ( or invisible) and pre-filled, pinned on an order. The Customer Need this Code to verifiy the Order.

I add a custom Array to the Billing Field at the woocommerce_checkout_fields filter:

//VID
$fields['billing']['billing_vid'] = array( 
'label'     => __('', 'woocommerce'), 
'placeholder'   => _x('', 'placeholder', 'woocommerce'), 
'required'  => false,
'type'      => 'text', 
'class'     => array('form-row-wide'), 
'clear'     => false,
'default' => wp_rand(10000,99999)   
);

This works, but the Customer still can write Content in the field during the Checkout process.

Has anybody a solution for me?

Thanks

Answer 1

Update 2: added compatibility for Woocommerce 3+ and removed some mistakes

Here can be a more complete solution just as you are expecting:

// Outputting the hidden field in checkout page
add_action( 'woocommerce_after_order_notes', 'add_custom_checkout_hidden_field' );
function add_custom_checkout_hidden_field( $checkout ) {

    // Generating the VID number
    $vid_number = wp_rand(10000,99999);

    // Output the hidden field
    echo '<div id="user_link_hidden_checkout_field">
            <input type="hidden" class="input-hidden" name="billing_vid" id="billing_vid" value="' . $vid_number . '">
    </div>';
}

// Saving the hidden field value in the order metadata
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_hidden_field' );
function save_custom_checkout_hidden_field( $order_id ) {
    if ( ! empty( $_POST['billing_vid'] ) ) {
        update_post_meta( $order_id, '_billing_vid', sanitize_text_field( $_POST['billing_vid'] ) );
    }
}

// Displaying "Verification ID" in customer order
add_action( 'woocommerce_order_details_after_customer_details', 'display_verification_id_in_customer_order', 10 );
function display_verification_id_in_customer_order( $order ) {
    // compatibility with WC +3
    $order_id = method_exists( $order, 'get_id' ) ? $order->get_id() : $order->id;

    echo '<p class="verification-id"><strong>'.__('Verification ID', 'woocommerce') . ':</strong> ' . get_post_meta( $order_id, '_billing_vid', true ) .'</p>';
}

 // Display "Verification ID" on Admin order edit page
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;
    echo '<p><strong>'.__('Verification ID', 'woocommerce').':</strong> ' . get_post_meta( $order_id, '_billing_vid', true ) . '</p>';
}

// Displaying "Verification ID" on email notifications
add_action('woocommerce_email_customer_details','add_verification_id_to_emails_notifications', 15, 4 );
function add_verification_id_to_emails_notifications( $order, $sent_to_admin, $plain_text, $email ) {
    // compatibility with WC +3
    $order_id = method_exists( $order, 'get_id' ) ? $order->get_id() : $order->id;

    $output = '';
    $billing_vid = get_post_meta( $order_id, '_billing_vid', true );

    if ( !empty($billing_vid) )
        $output .= '<div><strong>' . __( "Verification ID:", "woocommerce" ) . '</strong> <span class="text">' . $billing_vid . '</span></div>';

    echo $output;
}

The Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works.