Display Checkbox Field Data in Order Email & Order Edit Page

Question

A month ago "Save and display order custom meta data in Woocommerce 3+" answer code helped me to save and display a custom checkout field (a dropdown 'how did you hear about us' field) to the order email & order edit page.

Now I need to add another checkbox to ask the user if they'd like to sign up to a WhatsApp list.

I used some code I found to create this new checkout field, trying few different ways. But I can't seem to make it appear on the order edit page & email in the same way as the above! (without it showing 'array' or not displaying at all...)

Here is that code:

// Add the WhatsApp Checkbox
function cw_custom_checkbox_fields( $checkout ) {
echo '<div class="cw_custom_class"><h2>'.__('Would you like to be added to the WhatsApp list?').'</h2>';
woocommerce_form_field( 'custom_checkbox', array(
    'type'          => 'checkbox',
    'label'         => __('Yes, add me to the list!'),
    'required'  => false,
), $checkout->get_value( 'custom_checkbox' ));
echo '</div>';
}

add_action('woocommerce_after_order_notes', 'cw_custom_checkbox_fields');

// Save the WhatsApp Data
add_action('woocommerce_checkout_update_order_meta', 'cw_checkout_order_meta');
function cw_checkout_order_meta( $order_id ) {
if ($_POST['custom_checkbox']) update_post_meta( $order_id, 'checkbox name', esc_attr($_POST['custom_checkbox']));
}

Any help to display the label & value in the email & order edit page would be very much appreciated!!

Answer 1

Here both fields are merged, saved and displayed in order admin and email notifications:

// Get "hearaboutus" select field options data
function wc_get_hearaboutus_options(){
    return array(
        ''          => 'Please select...',
        'option_1'  => 'Social Media (e.g Facebook)',
        'option_2'  => 'Search Engine (e.g Google)',
        'option_3'  => 'Meditation Class',
        'option_4'  => 'Leaflets/Flyers/Posters',
        'option_5'  => 'Website',
        'option_6'  => 'Email Newsletter',
        'option_7'  => 'Other',
    );
}

// Add the fields to the checkout
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field">
    <h3>' . __('Please help us understand our customers so that we can improve future events (Optional)') . '</h3>';

    woocommerce_form_field( '_hearaboutus', array(
        'type'    => 'select',
        'class'   => array('my-field-class form-row-wide'),
        'label'   => __('How did you hear about us? &nbsp;'),
        'options' => wc_get_hearaboutus_options(),
    ), $checkout->get_value( '_hearaboutus' ) );

    echo '</div>';

    echo '<div class="cw_custom_class">
    <h2>'.__('Would you like to be added to the WhatsApp list?').'</h2>';

    $whatsapp_list =

    woocommerce_form_field( 'whatsapp_list', array(
        'type'          => 'checkbox',
        'label'         => __("Yes, add me to the list!", "woocommerce"),
        'required'  => false,
    ), $checkout->get_value( 'whatsapp_list' ) );

    echo '</div>';
}

// Update the order meta with fields values
add_action( 'woocommerce_checkout_create_order', 'custom_checkout_field_create_order', 10, 2 );
function custom_checkout_field_create_order( $order, $data ) {
    if ( isset($_POST['_hearaboutus']) && ! empty($_POST['_hearaboutus']) ) {
         $order->update_meta_data( '_hearaboutus', sanitize_text_field($_POST['_hearaboutus']) );
    }
    if ( isset($_POST['whatsapp_list']) ) {
        $order->update_meta_data( '_whatsapp_list', 'Yes' );
    }
}

// Add the fields to order email
add_action('woocommerce_email_order_details', 'action_after_email_order_details', 25, 4 );
function action_after_email_order_details( $order, $sent_to_admin, $plain_text, $email ) {

    if( $hearaboutus = $order->get_meta('_hearaboutus') ) {
        // The data 1
        $label1 = __('How did you hear about us?');
        $value1 = wc_get_hearaboutus_options()[$hearaboutus];
    }

    if( $whatsapp_list = $order->get_meta('_whatsapp_list') ) {
        // The data 1
        $label2 = __('Add me to WhatsApp list?');
        $value2 = $whatsapp_list;
    }

    if( isset($value1) && isset($value2) ){
        // The HTML Structure
        $html_output = '<h2>' . __('Extra data') . '</h2>
        <div class="discount-info"><table cellspacing="0" cellpadding="6">';
        if( isset($value1) ){
            $html_output .= '<tr><th>' . $label1 . '</th><td>' . $value1 . '</td></tr>';
        }
        if( isset($value2) ){
            $html_output .= '<tr><th>' . $label2 . '</th><td>' . $value2 . '</td></tr>';
        }
        $html_output .= '</tr></tbody></table></div><br>';

        // The CSS styling
        $styles = '<style>
            .discount-info table{width: 100%; font-family: \'Helvetica Neue\', Helvetica, Roboto, Arial, sans-serif;
                color: #737373; border: 2px solid #e4e4e4; margin-bottom:8px;}
            .discount-info table th, table.tracking-info td{ text-align: left; color: #737373; border: none; padding: 12px;}
            .discount-info table td{ text-align: left; color: #737373; border: none; padding: 12px; }
        </style>';

        // The Output CSS + HTML
        echo $styles . $html_output;
    }
}

// Display field value on the order edit page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta( $order ) {
    if( $hearaboutus = $order->get_meta('_hearaboutus') ) {
        $value = wc_get_hearaboutus_options()[$hearaboutus];
        echo '<p><strong>'.__('How did you hear about us?').'</strong> ' . $value . '</p>';
    }
    $whatsapp_list = $order->get_meta('_whatsapp_list');
    $value = $whatsapp_list === 'Yes' ? 'Yes' : 'No';
    echo '<p><strong>'.__('Added to WhatsApp list?').'</strong> ' . $value . '</p>';
}

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