WooCommerce: Add CSS to Order Emails

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.0
 * @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

/**
 * @snippet       Add CSS to Specific WooCommerce Email
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 4.0
 * @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;
}