change html of e-mail-order-items with wc_display_item_meta

Question

Originally the html that is output is:

<tr class="order_item">
  <td class="td">
    Product Name
   <ul class="wc-item-meta">
     <li>
       <strong class="wc-item-meta-label">Label:</strong>
       <p>Value</p>
     </li>
     <!-- several more li--> 
   </ul>
 </td>
 <td class="td">1 </td>
 <td class="td">
    <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span>49.00</span>
 </td>
 </tr>

I want to get rid of this unwieldy and mobile-unfriendly ul, li and p structure and simplify the html like so:

<tr class="order_item">
    <th>Model</th>
    <td>Model Name</td>
</tr>
<tr>
    <th>Label</th>
    <td>Value</td>
</tr>
etc.

My first move is to get rid of the thead-tag in email-order-details.php. I prefer labels like the th-tag.

I also need to change the html structure in email-order-items.php

But then i get stuck with the function wc_display_item_meta. I don't know how to make this function display the desired html markup displayed above.

function wc_display_item_meta( $item, $args = array() ) {
$strings = array();
$html    = '';
$args    = wp_parse_args(
    $args,
    array(
        'before'       => '<tr class="order_item">',
        'after'        => '</tr>',
        'separator'    => '</tr><tr>',
        'value_before' => '<td class="wc-item-meta-value">',
        'value_after'  => '</td>',
        'echo'         => true,
        'autop'        => false,
        'my_label_before' => '<th class="wc-item-meta-label">',
        'my_label_after'  => ':</th> ',
    )
);
 
foreach ( $item->get_formatted_meta_data() as $meta_id => $meta ) {
    $value     = $args['autop'] ? wp_kses_post( $meta->display_value ) : wp_kses_post( make_clickable( trim( $meta->display_value ) ) );
    $strings[] = $args['my_label_before'] . wp_kses_post( $meta->display_key ) . $args['my_label_after'] . $args['value_before'] . $value . $args['value_before'];
}

if ( $strings ) {
    $html = $args['before'] . implode( $args['separator'], $strings ) . $args['after'];
}

$html = apply_filters( 'woocommerce_display_item_meta', $html, $item, $args );

if ( $args['echo'] ) {
    // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    echo $html;
} else {
    return $html;
}
}

How do i change the foreach loop to get my desired html output display below?

<tr>
  <th></th>
  <td></td>
</tr>

Answer 1

The function wc_display_item_meta mentioned above works. I wasn’t aware, that i was on the right track.

But it is better to name it differently, and then call it in «email-order-items.php». This way, other uses of wc_display_item_meta (for instance in «order/order-details-item.php» won’t be affected be the markup, that is exclusively for e-mails).

Therefore in functions.php i have my special e-mail html markup function:

function my_display_item_meta( $item, $args = array() ) {
 etc.
}

and in «email-order-items.php» i call my function instead of wc_display_item meta:

my_display_email_item_meta($item);

Note: You may look closely at the mark up of your e-mail templates in order to achieve a result that suits your requirements. And since the html changes, the email styles need to be updated.

In my case the e-mail messages generated by woocommerce look better on mobile phones and it is much easier to render the message according to the screen, that is responsive.

To sum up, i shouldn’t have asked in the first place. This is only wasting resources. However, i won’t delete the post. But if admin decides otherwise, i wouldn’t mind. Ciao