Enable a Custom Field on checkout and on My account In Woocommerce 3

Question

I created a some custom fields for Woocommerce in the check-out page. I was able to display them in WP admin area, email and invoices but not in the Front-End for User's Dashboard.

This is the code I used to create the field "CODICE SNEP" in my CHILD-THEM on function.php file:

// Create hook - CODICE SNEP
add_filter( 'woocommerce_checkout_fields' , 'codice_snep' );
function codice_snep ( $fields ) {
     $fields['billing']['codice_snep'] = array(
    'label'     => __('Codice Snep', 'woocommerce'),
    'placeholder'   => _x('Codice Snep', 'placeholder', 'woocommerce'),
    'required'  => true,
    'clear'     => true
     );

     return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'codice_snep_order_meta' );
function codice_snep_order_meta( $order_id ) {
    if ( ! empty( $_POST['codice_snep'] ) ) {
        update_post_meta( $order_id, 'Codice Snep', sanitize_text_field( $_POST['codice_snep'] ) );
    }
}

// Save the custom field 'codice_snep' 
add_action( 'woocommerce_save_account_details', 'save_codice_snep_account_details', 12, 1 );
function save_codice_snep_account_details( $user_id ) {
    // For Codice Snep
    if( isset( $_POST['codice_snep'] ) )
        update_user_meta( $user_id, 'codice_snep', sanitize_text_field( $_POST['codice_snep'] ) );


}

After that I show an error if you don't put the field:

// Show error if you don't insert CODICE SNEP
add_action('woocommerce_checkout_process', 'required_codice_snep_checkout_field_process');
function required_codice_snep_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['codice_snep'] )
        wc_add_notice( __( 'Compila il campo Codice SNEP .' ), 'error' );
}

Than I show the code in the Admin Area of WC, emails and invoice:

// Show field codice snep  in the Wc pdf invoices plugin
add_action( 'wpo_wcpdf_after_order_data', 'wpo_wcpdf_codice_snep', 10, 2 );
function wpo_wcpdf_codice_snep ($template_type, $order) {
    $document = wcpdf_get_document( $template_type, $order );
    if ($template_type == 'invoice') {
        ?>
        <tr>
            <th>Codice Snep:</th>
            <td><?php $document->custom_field('Codice Snep'); ?></td>
        </tr>
        <?php
    }
}

// Show CODICE SNEP in Back End Wp
add_action( 'woocommerce_admin_order_data_after_billing_address', 'codice_snep_order_meta_admin', 10, 1 );
function codice_snep_order_meta_admin($order){
    echo '<p><strong>'.__('Codice Snep').':</strong> ' . get_post_meta( $order->id, 'Codice Snep', true ) . '</p>';
}

// Show codoce snep in the order email

add_filter('woocommerce_email_order_meta_keys', 'my_custom_codice_snep_order_meta_keys');
function my_custom_codice_snep_order_meta_keys( $keys ) {
    $keys[] = 'Codice Snep';
    return $keys;
}

Everything seems to work until here.

The problem now is to just show (must be not editable) this field ( codice_snep ) in the Dashboard front-end.

Right now I'm trying with this but I can only see the label without the value of the field.

// Show codice snep in the Dashboard of the user in front-end.
add_action( 'woocommerce_account_dashboard', 'codice_snep_order_dashboard', 12, 1 );
function codice_snep_order_dashboard ($order){
    echo '<p><strong>'.__('Codice Snep').':</strong> ' . get_post_meta( $order->id, 'Codice Snep', true ) . '</p>';
}

This is what happens: Field not showing on dashboard

Can you help me to fix this problem in order to show the value that the user insert in the check-out?

Answer 1

The code you are using is a bit outdated and/or some hooks are deprecated (even if they come from Woocommerce documentation) .

The code below uses different hooks. It allows to display this field and the related data (when it exist), in checkout and in My account > Adresses > Billing fields, without any need of additional validation code.

Also when order is placed, the data is saved with one hook in the order and in the user meta data at the same time. So the code is more compact and uses the right hooks with the new CRUD methods introduced in Woocommerce 3.

Your revisited code:

// Display a custom field on checkout and on My account > edit billing address
add_filter( 'woocommerce_billing_fields' , 'adding_billing_codice_snep', 20, 1 );
function adding_billing_codice_snep ( $fields ) {
     $fields['billing_codice_snep'] = array(
        'label'       => __('Codice Snep', 'woocommerce'),
        'placeholder' => _x('Codice Snep', 'placeholder', 'woocommerce'),
        'class'       => array('form-row-wide'),
        'required'    => true,
        'clear'       => true,
     );

     return $fields;
}

// Save the custom field data to the order meta data and to user meta data
add_action( 'woocommerce_checkout_create_order', 'codice_snep_order_meta', 20, 2 );
function codice_snep_order_meta( $order, $data ) {
    if ( isset( $_POST['billing_codice_snep'] ) && ! empty( $_POST['billing_codice_snep'] ) ) {
        $order->update_meta_data('_billing_codice_snep', sanitize_text_field( $_POST['billing_codice_snep'] ) );
        update_user_meta( $order->get_customer_id(), 'billing_codice_snep', sanitize_text_field( $_POST['billing_codice_snep'] ) );
    }
}

// Order pages (frontend and admin): Display custom field "codice snep"
add_filter( 'woocommerce_order_details_after_order_table' , 'display_admin_order_meta_codice_snep', 20, 1 ); // Front
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_admin_order_meta_codice_snep', 20, 1 ); // Admin
function display_admin_order_meta_codice_snep( $order ){
    $codice_snep = $order->get_meta('_billing_codice_snep', true );
    if( ! empty( $codice_snep ) ){
        $label = __('Codice Snep');
        if( is_admin() ){ // Admin
            echo '<p><strong>' . $label . ':</strong> ' . $codice_snep . '</p>';
        }
        else { // Front end: order view and Order received (thankyou)
            echo '<table class="woocommerce-table"><tbody><tr>
                <th>' . $label . ':</th><td>' . $codice_snep . '</td>
            </tr></tbody></table>';
        }
    }
}

// Email notifications: Display custom field "codice snep"
add_filter( 'woocommerce_email_order_meta_fields' , 'display_email_codice_snep', 20, 3 );
function display_email_codice_snep ( $fields, $sent_to_admin, $order ) {
    $codice_snep = $order->get_meta('_billing_codice_snep', true );
    if( ! empty( $codice_snep ) )
        $fields['codice_snep'] = array(
            'label' => __("Codice Snep"),
            'value' => $codice_snep,
        );
    return $fields;
}

// PDF Invoices: Display custom field "codice snep"
add_action( 'wpo_wcpdf_after_order_data', 'display_pdf_invoice_codice_snep', 20, 2 );
function display_pdf_invoice_codice_snep ($template_type, $order) {
    $document = wcpdf_get_document( $template_type, $order );
    if ($template_type == 'invoice') {
        echo '<tr>
            <th>' . __("Codice Snep") . ':</th>
            <td>' . $order->get_meta('_billing_codice_snep', true ) . '</td>
        </tr>';
    }
}

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

Order view:

My account > adresses > Billing