Unlike your WordPress theme, you can’t just add CSS to your style.css in order to customize the look of the WooCommerce emails.
This handy PHP snippet is therefore the only viable solution. It’s a little tricky but once you get the idea, adding CSS to Order Emails is a breeze.
PHP Snippet #1: Add CSS to All WooCommerce Emails
/**
* @snippet Add CSS to WooCommerce Emails
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible Woo 4.6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_emails', 9999, 2 );
function bbloomer_add_css_to_emails( $css, $email ) {
$css .= '
h2 { color: red }
h3 { font-size: 30px }
';
return $css;
}
PHP Snippet #2: Add CSS to a Specific WooCommerce Email
Note – you can find a list of email IDs (the snippet uses “new_order” for example) here: https://www.businessbloomer.com/woocommerce-add-extra-content-order-email/
/**
* @snippet Add CSS to Specific WooCommerce Email
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible Woo 4.6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_new_order_email', 9999, 2 );
function bbloomer_add_css_to_new_order_email( $css, $email ) {
if ( $email->id == 'new_order' ) {
$css .= '
h2 { color: red }
h3 { font-size: 30px }
';
}
return $css;
}