Add some meta data values in a clean table for new order emails in Woocommerce 3

Question

In the function file, I created the code. Task: add order data to the email alert. There is no registration on the site. I want to do this as a table with tittle. I found a similar question. But in it all the data is taken from the module's metadata. And I have metadata and default information together. Not need to write all html. Just push me in the right direction how correct write my data.

add_filter( 'woocommerce_email_order_meta_fields', 'custom_woocommerce_email_order_meta_fields', 10, 3 );
function custom_woocommerce_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['billing_first_name'] = array(
        'label' => __( 'Name' ),
        'value' => $order->get_billing_first_name(),
    );

    $fields['billing_phone'] = array(
        'label' => __( 'Phone' ),
        'value' => $order->get_billing_phone(),
    );

    $fields['billing_address_1'] = array(
        'label' => __( 'Street' ),
        'value' => $order->get_billing_address_1(),
    );

    $fields['billing_address_2'] = array(
        'label' => __( 'Build' ),
        'value' => $order->get_billing_address_2(),
    );

    $fields['billing_address_3'] = array(
        'label' => __( 'Apartment' ),
        'value' => get_post_meta( $order->id, 'Apartment', true ),
    );

    $fields['billing_address_4'] = array(
        'label' => __( 'Floor' ),
        'value' => get_post_meta( $order->id, 'Floor', true ),
    );

    $fields['billing_address_5'] = array(
        'label' => __( 'Entrance' ),
        'value' => get_post_meta( $order->id, 'Entrance', true ),
    );

    $fields['customer_message'] = array(
        'label' => __( 'Note' ),
        'value' => $order->customer_message,
    );

    return $fields;
}

Answer 1

Note: In your code replace outdated $order->id by $order->get_id() everywhere.

To add custom fields meta data with default order meta data in a clean html , try this:

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 )
{
    $domain = 'woocommerce';

    // Define all translatable custom fields labels and data
    $fields_array = [
        [ 'label' => __( 'Name', $domain ),      'value' => $order->get_billing_first_name() ],
        [ 'label' => __( 'Phone', $domain ),     'value' => $order->get_billing_phone() ],
        [ 'label' => __( 'Street', $domain ),    'value' => $order->get_billing_address_1() ],
        [ 'label' => __( 'Build', $domain ),     'value' => $order->get_billing_address_2() ],
        [ 'label' => __( 'Apartment', $domain ), 'value' => $order->get_meta( 'Apartment', true ) ],
        [ 'label' => __( 'Floor', $domain ),     'value' => $order->get_meta( 'Floor', true ) ],
        [ 'label' => __( 'Entrance', $domain ),  'value' => $order->get_meta( 'Entrance', true ) ],
        [ 'label' => __( 'Note', $domain ),      'value' => $order->get_customer_note() ],
    ];

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

    // Loop though the data array to set the fields
    foreach( $fields_array as $field ):

    // Only display non empty fields values
    if( ! empty($field['value']) ):

    $html_output .= '<tr>
        <th>' . $field['label'] . ':</th>
        <td>' . $field['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;}
        .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.

To target the "New Order" email notification only, you can add the following line inside the function code at the beginning:

if ( $email->id !== 'new_order' ) return;