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: "Helvetica Neue", 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”.
Leave a Reply