If you want to add custom CSS styles to your WooCommerce email templates, you can use the woocommerce_email_styles filter.

How to do it

First, you should find out what elements you want to style with CSS. One way to do that is using a plugin like WP Mail Logging which will add a way for you to visually see the emails you’re sending out:

If you click on “View” you’ll see the emails:

Now you can use your developer tools to inspect what you want to change. I want to change the color of the “[Order #526] (October 13,2020)” title.

I can see that this is the H2 tag, so I will target that in the filter. Now let’s write some code! What you want to do is add this code to your theme’s function.php file or to a functionality plugin.

WooCommerce: 4.8.0
Filter: woocommerce_email_styles
Source: https://github.com/woocommerce/woocommerce/blob/4.8.0/includes/emails/class-wc-email.php#L560

<?php  // only include this if it's not already in the file! 
add_filter( 'woocommerce_email_styles', function( $css ) {
    return $css .= '
        h2 { color: blue }
    ';
});

What we’re doing is taking the $css variable, and adding more styles to it with the .= operator. Then, WooCommerce takes these styles and passes them to the Emogrifier which will translate these styles into inline-css to be used in the email. You can read more about the Emogrifier tool and how it works on their repo.

Final result:

<h2 style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;font-size: 18px;font-weight: bold;line-height: 130%;margin: 0 0 18px;text-align: left;color: blue">[Order #526] (October 13, 2020)</h2>

One thing I noticed is that the previous h2 style was gone, so I looked it up and I realized that it’s the Emogrifier that’s doing the magic here – it’s only taking the highest priority rules per element and transmogrifying them to inline styles. Also, I need to use the word transmogrifying more. “I’m going to transmogrify this sandwich”.