Add class to custom meta data on WooCommerce email notifications

I am saving custom order meta to order emails, but also need to style them on my custom template. It would be easiest if I could give a class to the p-tag that the order meta is wrapped in but my class array isn't doing the trick.

What I've tried:

function salesman_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $user_id = get_current_user_id();
    $key = 'billing_salesman';
    $single = true;

    $current_user_has_discount = get_user_meta($user_id, $key, $single);
    if( ! empty( $current_user_has_discount ) ){
    $fields['_billing_salesman'] = array(
        'label' => __( 'Sales Representative' ),
        'value' => $current_user_has_discount,
        'class' => array( 'salesRep' ),
    );
    }

    $is_po = get_post_meta( $order->id, '_other_payment-admin-note', true );
    if( ! empty( $is_po ) ){
        $fields['_other_payment-admin-note'] = array(
            'label' => __( 'PO Number' ),
            'value' => $is_po,
            'class' => array( 'poNum' ),
        );
    }

    return $fields;
}
add_filter( 'woocommerce_email_order_meta_fields', 'salesman_email_order_meta_fields', 11, 3 );

How can I add a class to custom order email meta fields, and/or style them on the email template?

You should use a custom function hooked in woocommerce_email_after_order_table action hook instead, where you will be able to easily style this html data:

add_action( 'woocommerce_email_after_order_table', 'add_tracking_number_to_order_email', 10, 4 );
function add_tracking_number_to_order_email( $order, $sent_to_admin, $plain_text, $email )
{
    // (there is no current user ID for emails notifications)
    $has_discount = get_user_meta( $order->get_user_id(), 'billing_salesman', true );
    $po_number = get_post_meta( $order->get_id(), '_other_payment-admin-note', true );

    if( empty( $has_discount ) && empty( $po_number ) ) return; // Exit if empty

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

    // HTML Structure
    $html_output = '<h2>'.__('Some title').'</h2>
    <table class="salesman-meta" cellspacing="0" cellpadding="6">';

    if( ! empty( $has_discount ) ){
        $html_output .= '<tr class="sales-rep">
                <th>' . __( 'Sales Representative' ) . '</th>
                <td>' . $has_discount . '</td>
            </tr>';
    }

    if( ! empty( $po_number ) ){
        $html_output .= '<tr class="po-num">
                <th>' . __( 'PO Number' ) . '</th>
                <td>' . $po_number . '</td>
            </tr>';
    }

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

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

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

Tested and works (with static values)…