php - Add custom meta data into emails as a html styled table with a title in Woocommerce

Question

In WooCommerce, "Get a custom field array values within WooCommerce email order meta" answer code to one of my previous questions, has given me the way to pull fields out of an array from the order post meta data.

But how would I take this code and adjust it, to add a heading above the new data and a table around the data, within the email?

1. I would like to add a <h2>Attendee Info</h2> above the output of the fields. In addition I'd like to wrap the field output in a <table>.

2. I would like to add a few of the fields as new columns within the admin Order Table screen, via some sort of function.

In addition, I would also like to be able to display some of these fields within the Admin Order Table, as new columns.

Answer 1

This can be done using instead woocommerce_email_order_details action hook this way:

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 )
{
    $event = get_post_meta( $order->get_id(), 'WooCommerceEventsOrderTickets', true );

    if( ! is_array($event) ) return;

    $event = isset($event[1][1]) ? $event[1][1] : '';

    if( sizeof($event) == 0 ) return;

    $custom = isset($event['WooCommerceEventsCustomAttendeeFields']) ? $event['WooCommerceEventsCustomAttendeeFields'] : '';

    // Set our array of needed data
    $fields_array = [
        __('First name')    => isset($event['WooCommerceEventsAttendeeName']) ? $event['WooCommerceEventsAttendeeName'] : '',
        __('Last name')     => isset($event['WooCommerceEventsAttendeeLastName']) ? $event['WooCommerceEventsAttendeeLastName'] : '',
        __('Title')         => isset($custom['fooevents_custom_title']) ? $custom['fooevents_custom_title'] : '',
        __('Organization')  => isset($custom['fooevents_custom_organization']) ? $custom['fooevents_custom_organization'] : '',
        __('Address')       => isset($custom['fooevents_custom_address']) ? $custom['fooevents_custom_address'] : '',
        __('City')          => isset($custom['fooevents_custom_city']) ? $custom['fooevents_custom_city'] : '',
        __('Postcode')      => isset($custom['fooevents_custom_postal_code']) ? $custom['fooevents_custom_postal_code'] : '',
        __('State')         => isset($custom['fooevents_custom_state/province']) ? $custom['fooevents_custom_state/province'] : '',
    ];

    if( ! $event ) return;

    // The HTML Structure
    $html_output = '<h2>' . __('Attendee Info') . '</h2>
    <div class="discount-info">
        <table cellspacing="0" cellpadding="6"><tbody>';

    // Loop though the data array to set the fields
    foreach( $fields_array as $label => $value ):
    if( ! empty($value) ):

    $html_output .= '<tr>
        <th>' . $label . '</th>
        <td>' . $value . '</td>
    </tr>';

    endif;
    endforeach;

    $html_output .= '</tbody></table>
    </div><br>'; // HTML (end)

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

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

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

---

or also using woocommerce_email_order_meta action hook, replacing the first line:

add_action('woocommerce_email_order_details', 'action_after_email_order_details', 25, 4 );

by this:

add_action('woocommerce_email_order_meta', 'woocommerce_email_order_meta', 25, 4 );

---

You will get something more clean and formatted with your title like:

To get this data displayed in admin order table is something much more complicate and too broad to be answer in this answer or on stackOverFlow.

You should better display that data in a custom meta box in order edit pages, which is much more easier and practical.