WooCommerce Tips

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.

WooCommerce: Customize Email's CSS
WooCommerce: Customize Email CSS
Table Of Contents
  1. PHP Snippet #1: Add CSS to All WooCommerce Emails
  2. PHP Snippet #2: Add CSS to a Specific WooCommerce Email
  3. Business Bloomer WooCommerce Add CSS To Order Emails Mini-Plugin

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    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

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    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

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;
}

Business Bloomer WooCommerce Add CSS To Order Emails Mini-Plugin

You don’t feel confident with coding? You don’t want to purchase yet another bloated, expensive plugin? Great!

Business Bloomer WooCommerce Add CSS To Order Emails Mini-Plugin comes without the usual WordPress plugin hassles. One feature. Lifetime license. No annoying subscriptions. 1 plugin file. A few lines of code. No banners. No up-sells. No WordPress notifications. Use it on as many websites as you like. Lifetime support. 1-page documentation. Super simple settings.

Speaking of which, here are the settings:

As you can see the plugin is straight forward. Install it, add some CSS, and you’re good to go. Simple!

Buy Business Bloomer Mini-Plugin

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Add Content to a Specific Order Email
    Customizing WooCommerce emails via the WordPress dashboard is not easy and – sometimes – not possible. For example, you can’t edit or add content to them unless you’re familiar with code. Well, here’s a quick example to learn how to add content to any WooCommerce default order email. In this case study, our goal is […]
  • WooCommerce: How to Add a Custom Checkout Field
    Let’s imagine you want to add a custom checkout field (and not an additional billing or shipping field) on the WooCommerce Checkout page. For example, it might be a customer licence number – this has got nothing to do with billing and nothing to do with shipping. Ideally, this custom field could show above the […]
  • WooCommerce Visual Hook Guide: Emails
    WooCommerce customizers: the Visual Hook Guide is back! Here’s a visual HTML hook guide for the WooCommerce Emails. This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Let me know in the comments if this […]
  • WooCommerce: Add To: Cc: Bcc: Email Recipients
    The WooCommerce Email Settings allow you to add custom recipients only for New Order, Cancelled Order, Failed Order and all admin-only emails. But what if you want to add an email recipient to a customer email e.g. the Completed Order one? For example, you need to send it to your dropshipper. Also, you might want […]
  • WooCommerce: Remove Link to Product @ Order Table
    There is a slightly annoying thing on the WooCommerce Thank-You Page and WooCommerce emails. Users looking at the order table can actually click on the Products they just purchased and abandon the page before taking the action you want them to take (see image below). So, I coded a simple PHP snippet to remove such […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

49 thoughts on “WooCommerce: Add CSS to Order Emails”

  1. Stavros

    We are unable to get this to work for some reason. We tried this code to fix a font problem in Woocommerce where it is forcing the shipping method to be an ultra-tiny font in the emails. For some reason Woocommerce is using a code “” which causes the shipping method to be so small that our vendors don’t even see it in the emails.

    add_filter( 'woocommerce_email_styles', 'add_css_to_new_order_email', 9999, 2 );
 
function add_css_to_new_order_email( $css, $email ) { 
   if ( $email->id == 'new_order' ) {
      $css .= '
         shipped_via { font-size:14px; font-weight:bold; background-color: #faae27; }
      ';
   }
   return $css;
}

    But nothing changed on any emails after enabling the snippet.

    Reply
    1. Rodolfo Melogli

      Can you try use !important and see if this overrides the default CSS?

      Reply
  2. Fredrik Hallén

    Is there a way to add just bold (font-weight) to one item if the value / price is 0 ?

    Reply
    1. Rodolfo Melogli

      Hey Fredrik, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  3. Dave

    Hey, how do we add css changes to the customer notification order or processing order? I can’t find the snippet for that. Thanks!

    Reply
    1. Rodolfo Melogli

      Hi Dave, I’ve updated the tutorial with a link to the list of email IDs. Let me know

      Reply
  4. mariah

    Hi Rodolfo,

    How can I add css for text in Note/Comment section? Please see screenshot: https://prnt.sc/u7muug
    We wanted to change the color to Red.

    Thank you,

    Reply
    1. Rodolfo Melogli

      Hello Mariah, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  5. Lucas

    Hi Rodolfo,
    I’m searching solution, maybe you can help me. It is possible to add class to order table in email? To be more specific I need to add class to element which contains product named “Boks”. So if product is named “boks” his should be with special class “featured”. Is this possible ?

    Reply
    1. Rodolfo Melogli

      Nope, unless you override the email template completely

      Reply
  6. Dustin

    Thanks so much! Works great and saved a lot of headache since editing the templates in the plugin editor was a pain. I get Woo wants to sell plugins but not adding a CSS field to email settings seems like a pretty big missing feature to me.

    Reply
    1. Rodolfo Melogli

      Great!

      Reply
  7. Judith

    Thanks, this is great! I managed to get rid of a plugin which did this for me and now could style my order emails exactly as I wanted without plugin! 🙂

    One question though – since it seems anything is possible by coding and without plugins… I’m not an expert at coding. I have a plugin which tracks affiliates for me. I can use a shortcode from that plugin to display the affiliate ID (I tested this by adding shortcode to a random page in my website and it correctly showed up). How can I add a shortcode directly through the code? Do you have a tutorial for this? Thank you so much for helping!

    Reply
    1. Rodolfo Melogli

      Thank you! This should help: https://developer.wordpress.org/reference/functions/do_shortcode/

      Reply
  8. Luuk

    Hi Rodolfo,

    Great snippet again!
    Only 1 little problem. I am trying to change the font of the complete email.

    With below snippet we get a lot done.
    But for some reason, the standard text (productname etc) is not changing.
    All the h1, h2, etc are changing correctly.

    We are using this snippet:

    /**
 * @snippet       Add CSS to WooCommerce Emails
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 4.0
 * @community     https://businessbloomer.com/club/
 */
 
 
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_emails', 9999, 2 );

add_action( 'woocommerce_email_header', 'add_css_to_emails' );
add_action( 'woocommerce_admin_new_order', 'add_css_to_emails' );
add_action( 'woocommerce_email_order_details', 'add_css_to_emails');
add_action( 'woocommerce_email_order_items', 'add_css_to_emails' ); // thought this might override the order item
add_action( 'woocommerce_email_adresses', 'add_css_to_emails' );
add_action( 'woocommerce_email_footer', 'add_css_to_emails' );

function bbloomer_add_css_to_emails( $css, $email ) { 
   $css .= '
      h1 {font-family: Arial}
	  h2 {font-family: Arial}
      h3 {font-family: Arial}
	    h4 {font-family: Arial}
		  p {font-family: Arial}
		  table {font-family: Arial}
		  thead {font-family: Arial}
		  tbody {font-family: Arial}
	td {font-family: Arial}
		  body {font-family: Arial}
		  
   ';
   return $css;
}

    For some reason, the words ‘Shipping method and Payment method are not changing.
    The values in these fields ‘Ex: free shipping’ is changing correctly.

    What do we do wrong?

    Reply
    1. Rodolfo Melogli

      Please remove those add_action

      Reply
  9. Terry Woods

    Worked beautifully for customising our New Order email to reduce spacing and hide unnecessary elements so that it would print on one page. Thanks for sharing 🙂

    Reply
    1. Rodolfo Melogli

      Fantastic!

      Reply
  10. Planb

    Hi Rodolfo,
    Thanks for the snippet. I try to hide a specific table cell with a pseudo class 

    table.gfield_list td:nth-child(8) { display:none; }

    , but without success. Any way to achieve this? Thank you

    Reply
    1. Rodolfo Melogli

      Are you testing on Gmail? I think it doesn’t accept CSS pseudo classes

      Reply
  11. Kosta Kondratenko

    Hi,

    What if I want to edit the actual HTML of the footer of the WooCommerce email?

    Reply
    1. Rodolfo Melogli

      Hey Kosta, if you’re referring to the content, you can change that in the WooCommerce > Settings > Emails page

      Reply
  12. Keith

    Hi Rodolfo, thanks for all your awesome woocommerce tutorials.
    I have updated the CCS for the woocommerce emails, and everything is being updated with the exception of the actual order item text. ie , the text inside Product, Quantity and price, although the table headers, Subtotal, Shipping , Paymenet method and total are all correct. of course i’ve updated the .td style.

    Its really interesting I’ve added the following

    add_action( ‘woocommerce_email_header’, ‘add_css_to_emails’ );
    add_action( ‘woocommerce_admin_new_order’, ‘add_css_to_emails’ );
    add_action( ‘woocommerce_email_order_details’, ‘add_css_to_emails’ );
    add_action( ‘woocommerce_email_order_items’, ‘add_css_to_emails’ ); // thought this might override the order item
    add_action( ‘woocommerce_email_adresses’, ‘add_css_to_emails’ );
    add_action( ‘woocommerce_email_footer’, ‘add_css_to_emails’ );

    Hope you find this interesting, I am sure you’ve come across this one before 🙂
    Thanks
    Keith

    Reply
    1. Rodolfo Melogli

      Thanks so much for your comment Keith!

      Reply
  13. Ohoud

    Thank you for this snippet it works good in ipad and medium screen but the email in the mobile screen look like disappear half of the email?
    what i will do in this case?

    Reply
    1. Rodolfo Melogli

      Ohoud, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

      Reply
  14. Mariana

    Thanks for this snippet, it works wonders for simple tweaks!

    Reply
    1. Rodolfo Melogli

      Brilliant 🙂

      Reply
  15. David

    Could anyone help me to remove the total sum from new order’s email for customer as well as for admin in Woocommerce 3.2.6? Subtotal, Payment method and all other info must stay. I want remove total sum ONLY.

    If it’s impossible, maybe the ease and simple way will be just to set white color for total label and price, so it will not visible? ))) I understand, it’s little bit funny, but it may work.

    Thank you.

    Reply
    1. Rodolfo Melogli

      Hey David, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

      Reply
  16. David

    I am trying to insert a table into the woocommerce_email_after_order_table location of the customer completed email. I am getting the table into the section but I want to change the styling. The table is a tablepress shortcode which I am inserting using the do_shortcode function. When I look at the email I see the following:

    
Feb. 10, 2018
Dance

Event:
Social
Dance

Location:
Oak Bluff

Time:
7:30 pm - 11:30
pm

Attire:
casual

    I would like to change the text alignment along with the padding. Is there some way that I can do this?

    Reply
    1. David

      Sorry, it doesn’t look like the coding came through properly.

      Reply
      1. Rodolfo Melogli

        No problem David!Maybe you can add CSS to WooCommerce emails with this: https://businessbloomer.com/woocommerce-add-css-woocommerce-emails/

        Reply
  17. Sara Jones

    Awesome code find, thank you! I’m wondering why I’m getting a warning though when I add this to my functions? Thank you!

    Warning: Missing argument 2 for add_css_to_email() in /home/xxx/public_html/wp-content/themes/xxx/functions.php on line 421

    Reply
    1. Rodolfo Melogli

      Hey Sara, thanks for your comment! I tried this again on Woo 3.2.3 and I get no warning. Also on PHP7. Not sure really 🙂

      Reply
  18. Simon Petersen

    Is there something that need to be changed in snippet 2 in WooCommerce 3.0?
    I cant get it to work :/

    Reply
    1. Rodolfo Melogli

      Hey Simon, thanks for your comment! Are you using the exact same snippet?

      Reply
  19. James

    Hello

    Thanks for the great tutorials! They are very helpful. I have a question for you please.

    Why are php start / end tags written in an unusual order?

     if ( $email->id == 'new_order' ) {
 
?> // written near the beginning of the function with no start <?php tag before it

<style>
</style>

<?php // written at the bottom of the page after php end tag 
}
    Reply
    1. Rodolfo Melogli

      Good question James! So, we’re already in a PHP file and writing a PHP function. The opening PHP tag is already in such file (functions.php), so to echo HTML or CSS we need to close it and then reopen it when we’re finished with the HTML/CSS bit. Does this help?

      Reply
  20. patrick

    Hi

    I’m not a coder…

    I would like to print products on the emails in different formats, depending on product category. So like

    All products from category 1 = font=blue
    All products from category 2 = font=red

    and so on.

    How and where do I do this?

    Thanks

    Patrick

    Reply
    1. Rodolfo Melogli

      Hello Patrick, thanks so much for your comment! You could try to combine this snippet with this other tutorial (https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/) in order to apply PHP conditionally. Unfortunately this is custom work and I cannot provide a complementary solution here on the blog. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

      Reply
      1. patrick

        Hi Rodolfo

        Thanks a lot for your reply!!! Great link. I think with this I can work…

        Thanks again

        Patrick

        Reply
        1. Rodolfo Melogli

          Awesome to hear that Patrick 🙂

          Reply
  21. Marcus

    Hello,

    First of all, thanks for this! It seems to exist on one place on the internet, and that is here!

    I am having difficulties with the if statement.

    I believe it might be because of the email IDs having changed. Can that be the case?

    Do you know of a list of these email IDs that can be used.

    Most importantly, what should I but if I only want to make a change in customer order complete email.

    Thanks!

    Reply
    1. Marcus

      I think I managed to solve it finally by doing so:

       add_action('woocommerce_email_before_order_table', 'add_content', 20, 4);
  
function add_content($order, $sent_to_admin, $plain_text, $email) {
 
// Adds CSS to "new order" email only
if ( $email->id == 'customer_completed_order' ) {
    
echo '<br><h2 id="h2thanks">Dela en bild på vår facebooksida!</h2><p id="pthanks">Vi är jättetacksamma om du vill lämna ett par goda ord på vår facebooksida, så andra kunder kan känna sig trygga i sitt köp.<br><br>Dela gärna en bild på vår sida där ni bär era ringar! :)<br><br><a href="https://www.facebook.com/RingsofSweden/" target="_blank">Tryck här för att göra ett inlägg på vår sida!</a></p><br>';
}
}
      Reply
      1. Rodolfo Melogli

        Great, Marcus, thanks for following up! Much appreciated 🙂

        Reply
      2. Alex

        Dude, thank you, thank you, thank you. You just solved my week-long search for how to do this. So glad I found your comment.

        Reply
    2. David Wang

      I had the same question as Marcus (a list of the email IDs) and found them here:
      https://businessbloomer.com/woocommerce-add-extra-content-order-email/

      Reply
      1. Rodolfo Melogli

        Ah, awesome!

        Reply
Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *