How to Add CSS to Specific Meta Field in WooCommerce Email Template - php

Question

I'm trying to change font size, weight and colour to the woocommerce_email_order_meta section in the customer order processing email. I have copied the template over to my child theme and I know that the hook responsible for this section is do_action( 'woocommerce_email_order_meta', $order, $sent_to_admin, $plain_text, $email ) but I can't figure out how to edit the font. The fields are displayed in <p> tags so editing styles to target <p> changes the font for all paragraphs in the email. If I could add a css class to the woocommerce_email_order_meta or someone hook into it to apply some css for just this section, that's all I need. Does anyone know how I can access the fields in this hook and apply styling?
These are the contents of the template that I moved to the child theme folder:
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/*
* #hooked WC_Emails::email_header() Output the email header
*/
do_action( 'woocommerce_email_header', $email_heading, $email ); ?>
<?php /* translators: %s: Customer first name */ ?>
<p><?php printf( esc_html__( 'Hi %s,', 'woocommerce' ), esc_html( $order->get_billing_first_name() ) ); ?></p>
<?php /* translators: %s: Order number */ ?>
<p><?php printf( esc_html__( 'Just to let you know — we\'ve received your order #%s, and it is now being processed:', 'woocommerce' ), esc_html( $order->get_order_number() ) ); ?></p>
<?php
do_action( 'woocommerce_email_order_meta', $order, $sent_to_admin, $plain_text, $email );
/*
* #hooked WC_Emails::order_details() Shows the order details table.
* #hooked WC_Structured_Data::generate_order_data() Generates structured data.
* #hooked WC_Structured_Data::output_structured_data() Outputs structured data.
* #since 2.5.0
*/
do_action( 'woocommerce_email_order_details', $order, $sent_to_admin, $plain_text, $email );
/*
* #hooked WC_Emails::order_meta() Shows order meta data.
*/
do_action( 'woocommerce_email_order_meta', $order, $sent_to_admin, $plain_text, $email );
/*
* #hooked WC_Emails::customer_details() Shows customer details
* #hooked WC_Emails::email_address() Shows email address
*/
do_action( 'woocommerce_email_customer_details', $order, $sent_to_admin, $plain_text, $email );
/**
* Show user-defined additional content - this is set in each email's settings.
*/
if ( $additional_content ) {
echo wp_kses_post( wpautop( wptexturize( $additional_content ) ) );
}
/*
* #hooked WC_Emails::email_footer() Output the email footer
*/
do_action( 'woocommerce_email_footer', $email );

Answer 1

Ok so replace the entire contents of that template in the child theme to this:
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/*
* #hooked WC_Emails::email_header() Output the email header
*/
do_action( 'woocommerce_email_header', $email_heading, $email ); ?>
<?php /* translators: %s: Customer first name */ ?>
<p><?php printf( esc_html__( 'Hi %s,', 'woocommerce' ), esc_html( $order->get_billing_first_name() ) ); ?></p>
<?php /* translators: %s: Order number */ ?>
<p><?php printf( esc_html__( 'Just to let you know — we\'ve received your order #%s, and it is now being processed:', 'woocommerce' ), esc_html( $order->get_order_number() ) ); ?></p>
<?php
do_action( 'woocommerce_email_order_meta', $order, $sent_to_admin, $plain_text, $email );
/*
* #hooked WC_Emails::order_details() Shows the order details table.
* #hooked WC_Structured_Data::generate_order_data() Generates structured data.
* #hooked WC_Structured_Data::output_structured_data() Outputs structured data.
* #since 2.5.0
*/
do_action( 'woocommerce_email_order_details', $order, $sent_to_admin, $plain_text, $email );
/*
* #hooked WC_Emails::order_meta() Shows order meta data.
*/
?>
<div class="metaStyle" style="color: red; font-size: 50px;">
<?php
do_action( 'woocommerce_email_order_meta', $order, $sent_to_admin, $plain_text, $email );
?>
</div>
<?php
/*
* #hooked WC_Emails::customer_details() Shows customer details
* #hooked WC_Emails::email_address() Shows email address
*/
do_action( 'woocommerce_email_customer_details', $order, $sent_to_admin, $plain_text, $email );
/**
* Show user-defined additional content - this is set in each email's settings.
*/
if ( $additional_content ) {
echo wp_kses_post( wpautop( wptexturize( $additional_content ) ) );
}
/*
* #hooked WC_Emails::email_footer() Output the email footer
*/
do_action( 'woocommerce_email_footer', $email );
What I did was added a div around just the order meta with a class metaStyle So now you are able to edit the CSS as you would like by altering metaStyle. OR you can simply do it inline. Look where I added the new div, where you can see style="color: red; font-size: 50px; you can simply change those things to what you want or remove that part of the code and simply stlye with CSS as you stated you were origionally able to do.
Hope this helps and let me know if you need any more help.