How can I adjust the style of a table in a wordpre

Question

I am trying to change the layout and style of the woocommerce mail templates. In my main template file I added these lines for the order information:

<table class="row" align="center" bgcolor="#FFFFFF" cellpadding="20" cellspacing="0">
  <tr>
    <?php do_action( 'woocommerce_email_order_details', $order, $sent_to_admin, $plain_text, $email ); ?>
  </tr>
</table>

So I understand that it gets the information from the woocommerce_email_order_details.php which I changed to the following:

<div>
    <table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;">
        <tbody>
            <?php echo wc_get_email_order_items( $order, array(
                'show_sku'      => $sent_to_admin,
                'show_image'    => true,
                'image_size'    => array( 100, 100 ),
                'plain_text'    => $plain_text,
                'sent_to_admin' => $sent_to_admin,
            ) ); ?>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

I am really confused on how to adjust the style of the table in that php document. Everytime I add styles to that table, it does not really work. The output still is an unformatted table.

I simple want to create a custom layout for my table and fill it in with the information from the woocommerce_email_order_details.php. How do I do that?

Answer 1

You can style email template by adding the following code in your active theme's functions.php file:

add_filter( 'woocommerce_email_styles', 'zah_woocommerce_email_styles' );
function zah_woocommerce_email_styles( $css ) {
    $css .= "#template_header { background-color: #231f20; }";
    return $css;
}