How to add custom CSS to WooCommerce emails

Usually, when we want to change the style of a part of our website using CSS, we add our desired CSS code to our template style file. But these codes do not apply to WooCommerce emails. WooCommerce emails do not have interesting fonts by default, they do not have a good color scheme and even your website logo is not displayed in these emails. We cannot add custom CSS to WooCommerce emails when we enter the WooCommerce Email Management section (in the WooCommerce configuration menu). In this article, I will teach you how to add custom CSS to WooCommerce emails.

This can be done in two ways. The first method is to style all WooCommerce emails and the second method is to style a specific email in WooCommerce. Let’s look at both methods step by step.

Add custom CSS to all WooCommerce emails

To add custom styles to WooCommerce emails, just put the following code in the functions.php file of your template after <?php in the second line:

add_filter( 'woocommerce_email_styles', 'mihanwp_add_css_to_emails', 9999, 2 );
 
function mihanwp_add_css_to_emails( $css, $email ) { 
   $css .= '
      body { color: #333 }
      h2 { font-size: 30px }
   ';
   return $css;
}

In the above code we created a function called mihanwp_add_css_to_emails. In this function, we specified that Return the two CSS lines, body {color: # 333} and h2 {font-size: 30px.. Then, with the woocommerce_email_styles filter, we added these styles to WooCommerce emails.

Just as easily 🙂

Now let’s add our custom CSS to a specific WooCommerce email.

Add Custom style to the order email in WooCommerce

To do this, we need to add the following code in the functions file or functions.php of the template:

add_filter( 'woocommerce_email_styles', 'mihanwp_add_css_to_emails', 9999, 2 );
 
function mihanwp_add_css_to_emails( $css, $email ) { 
   if ( $email->id == 'new_order' ) {   
   $css .= '
      body { color: #333 }
      h2 { font-size: 30px }
   ';
   }
   return $css;
}

But this code is fundamentally different from the previous code. In the if section ($email-> id == ‘new_order’) we specified that if the email ID was equal to new_order, that is, the new order email, then add the CSS.

We could easily add our own CSS to WooCommerce emails in two ways. You can add as many CSS lines as you want in the part where our 2 CSS lines are written.

Good luck.

Ertano Editorial Staff

At the Ertano content production team, we strive to create the best educational articles on WordPress and online businesses. The accuracy of this page’s content will be reviewed by Reza Rad.