Since the latest WooCommerce releases, the transactional emails have received a fresh update thanks to the “Enable modern email design for transactional emails” option—also called email_improvements_enabled—which you can activate under Advanced > Features settings.
This new email layout offers a cleaner and more modern look, improving the overall customer experience. However, one side effect is that the order item meta information in emails can sometimes appear cluttered or less readable. To help you fix this, today we’re sharing a straightforward code snippet that will beautify the order item meta displayed in WooCommerce transactional emails.
This tweak improves how extra product details are shown, making them clearer and more appealing for your customers. Let’s get right to the snippet and enhance your WooCommerce emails!
Before
This is how WooCommerce displays item meta in transactional emails by default. The layout is plain, unstructured, and can be difficult to scan—especially when multiple custom fields are present:
After
With the PHP and CSS tweaks applied, each meta field is neatly wrapped in a styled badge. This improves readability, adds visual structure, and gives your emails a more professional look:
Step 1 | PHP Snippet: Rewrite WooCommerce Order Item Meta HTML in Emails
This PHP snippet rewrites the default HTML output of the WooCommerce order item meta shown in transactional emails. By customizing the HTML structure, we gain full control over how product meta details—such as custom fields, variations, or additional info—are displayed within the email. This makes it easier to target specific elements with CSS later on, allowing you to style and format the meta information precisely to match your brand’s email design. Without rewriting the HTML, applying clean and consistent styles can be challenging, especially with the new modern email layout enabled by email_improvements_enabled. This approach ensures your order item meta looks polished and integrates seamlessly with the rest of your email content.
/**
* @snippet Rewrite Item Meta HTML @ WooCommerce Emails
* @tutorial https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_display_item_meta', 'bbloomer_item_meta_email_friendly_tags', 10, 3 );
function bbloomer_item_meta_email_friendly_tags( $html, $item, $args ) {
if ( ! doing_action( 'woocommerce_email_order_details' ) ) {
return $html;
}
if ( empty( $html ) ) {
return '';
}
$html = '';
foreach ( $item->get_formatted_meta_data() as $meta_id => $meta ) {
$key = $meta->display_key;
$value = $meta->display_value;
$html .= '<span>' . esc_html( $key ) . ': ' . esc_html( wp_strip_all_tags( $value ) ) . '</span>';
}
return $html;
}
This function customizes how WooCommerce order item meta is displayed specifically in transactional emails. It hooks into the woocommerce_display_item_meta filter to modify the default HTML output.
First, it checks if the current context is inside an email by using doing_action('woocommerce_email_order_details')—if not, it returns the original meta HTML unchanged.
If the meta is empty, it returns an empty string. Otherwise, it rebuilds the meta output by looping through each piece of formatted meta data attached to the order item. For each meta key and value, it wraps the information in a simple <span> tag, escaping the content to ensure security and clean output.
By replacing the default list or complex markup with straightforward spans, this function creates a cleaner, more email-friendly HTML structure that can be easily targeted and styled with CSS. This approach improves readability and visual consistency of order meta in WooCommerce emails.
Step 2 | CSS Snippet: Style WooCommerce Order Item Meta in Emails
To complement the PHP snippet that simplifies the HTML structure of order item meta, this CSS snippet adds clean and subtle styling to each meta item in your WooCommerce transactional emails. By targeting the newly wrapped <span> elements inside .email-order-item-meta, it applies borders, padding, margin, and background color to make each meta detail stand out clearly without overwhelming the design.
This styling enhances readability and gives the order meta a neat, badge-like appearance that fits well with modern email layouts, especially when the email_improvements_enabled setting is active. With this CSS, your customers will enjoy a visually organized presentation of product details, improving their overall email experience.
/**
* @snippet Style Rewritten Item Meta HTML @ WooCommerce Emails
* @tutorial https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
.email-order-item-meta span { border:1px solid #999; border-radius:2px; padding:2px 4px; margin:0 6px 6px 0; background:#fbfbfb; color:#888 }
Keep in mind, you can’t add CSS to WooCommerce emails using your theme’s style.css because email clients don’t load external stylesheets. To add custom CSS safely and easily to your order emails, consider using the Business Bloomer WooCommerce Add CSS To Order Emails mini-plugin — it’s designed specifically to inject CSS directly into your WooCommerce emails, making styling simple and effective:
