Home » WooCommerce: Add CSS to Order Emails

WooCommerce: Add CSS to Order Emails

by adminkys

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.

WooCommerce: Customize Email's CSS
WooCommerce: Customize Email CSS

PHP Snippet #1: Add CSS to All WooCommerce Emails

/**
 * @snippet       Add CSS to WooCommerce Emails
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    Woo 4.6
 * @donate $9     https://www.tutoraspire.com
 */

add_filter( 'woocommerce_email_styles', 'tutoraspire_add_css_to_emails', 9999, 2 );

function tutoraspire_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 tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    Woo 4.6
 * @donate $9     https://www.tutoraspire.com
 */

add_filter( 'woocommerce_email_styles', 'tutoraspire_add_css_to_new_order_email', 9999, 2 );

function tutoraspire_add_css_to_new_order_email( $css, $email ) { 
   if ( $email->id == 'new_order' ) {
      $css .= '
         h2 { color: red }
         h3 { font-size: 30px }
      ';
   }
   return $css;
}

You may also like