Posted on

WooCommerce: How to Add CSS to WooCommerce 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. By using the WooCommerce Email Hook Guide, I identified an action called woocommerce_email_header, which is the very first thing that gets called by WooCommerce while “assembling” an email.

By using that hook, we can then echo some CSS that will therefore be applied to every email (note, woocommerce_email_header is a hook that all emails have in common).

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

PHP Snippet #1: Add/Edit CSS on the WooCommerce Emails


/**
 * @snippet       Add CSS to WooCommerce Emails
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=20648
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.6.2
 */

add_action( 'woocommerce_email_header', 'bbloomer_add_css_to_emails' );
 
function bbloomer_add_css_to_emails() {
?>
<style type="text/css">
h2 {
    color: red;
}
h3 {
    font-family: Courier;
}
table thead th {
    background: yellow;
}
</style>
<?php
}

PHP Snippet #2: Add/Edit CSS on a Specific WooCommerce Email


/**
 * @snippet       Add CSS to a Specific WooCommerce Email
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=20648
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.6.2
 */

add_action( 'woocommerce_email_header', 'add_css_to_email', 20, 2 );
 
function add_css_to_email( $email_heading, $email ) {

// Adds CSS to "new order" email only
if ( $email->id == 'new_order' ) {

?>
<style type="text/css">
h2 {
    color: red;
}
h3 {
    font-family: Courier;
}
table thead th {
    background: yellow;
}
</style>
<?php

}
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

25 thoughts on “WooCommerce: How to Add CSS to WooCommerce Emails

  1. 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

    1. Thanks so much for your comment Keith!

  2. 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?

    1. 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

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

  4. 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.

    1. 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

  5. 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?

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

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

  6. 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

    1. 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 🙂

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

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

  8. 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 
    }
    
    
    1. 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?

  9. 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

    1. 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

    2. Hi Rodolfo

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

      Thanks again

      Patrick

    3. Awesome to hear that Patrick 🙂

  10. 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!

    1. 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>';
      }
      }
       
    2. Great, Marcus, thanks for following up! Much appreciated 🙂

    3. 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.

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.