How to edit the CSS of a woocommerce email template

I was just asked this question by someone who read my other article pertaining to WooCommerce and came up with a couple possible solutions. Here they are, in case you’re wondering the very same thing.

Complete Template Adjustment

If you need to completely alter the HTML layout of the email, then you’ll need to copy over the email template(s) out of the plugin folder for safekeeping. This will protect your changes from being overwritten when you update the plugin.

Copy woocommerce/templates/emails/* to yourtheme/woocommerce/emails/*

You can copy in whichever templates you wish to adjust, then simply edit the contents as you like. For example, in customer-completed-order.php you could throw your custom CSS at the top as normal between some <style> tags and they should take effect whenever the email is sent.

Just Fiddling with CSS

If you only need to adjust the CSS and not the HTML content, then it would be better to use hooks. In your theme functions.php file, use the hook ‘woocommerce_email_header‘ which will insert anything in the hook in the header of the email.

add_action('woocommerce_email_header', 'add_css_to_email');

function add_css_to_email() {
echo '
<style type="text/css">
/* Put your CSS here */


15 Responses to How to edit the CSS of a woocommerce email template

  1. thomas July 10, 2013 at 2:31 pm #


    great tips, but how do how find the properties in css for email? once received, emails don’t give original css info with firebug but a remixed thing from the email provider.

    firebug is okay to find css properties directly in the website but for email it’s not possible.

    any trick?


    • jordan July 11, 2013 at 11:48 am #


      It’s possible Firebug will work with webmail like Roundcube, Gmail or Hotmail. You could also copy and paste the source of the email into an HTML document on your web server, then inspect using that! Then simply copy your adjusted code back into the email template.

  2. thomas July 11, 2013 at 6:51 am #


    thanks for that article. Hard to find good info on woocommerce emails. Maybe on the woocommerce forums but i have no premium product there.

    I tried your hook in order to change the size of the h1 title size. I works partly because i t is recognized but it appears crossed in firebug : a setting for h1 (don’t know exactly where it comes from) setting font size to 30px has priority in css priority rules.

    Any ideas how to change title size (h1,h2,…) in woocommerce emails?


    • jordan July 11, 2013 at 11:49 am #

      It’s a bit messy, using !important, but you could try h1{ font-size: 12px !important; }

  3. thomas July 18, 2013 at 12:30 pm #

    Hi Jordan

    thanks for replying, i will try thoose tips!

    thank you!

    • thomas July 18, 2013 at 1:15 pm #


      considering title (such as h1, h2) in email

      email-header.php : h1 uses inline style=”…” (with a php array) so its first priority. need to be edited in the file itself

      customer-completed.order.php : behave like it has inline style too but i can’t see it. Adding inline style works.

      hooks doesn’t has priority unless you use !important but i haven’t tried.

  4. omar January 29, 2014 at 4:51 pm #

    where I change the background color of the header of the email?

    • Jordan Schelew January 29, 2014 at 6:58 pm #


      You should be able to accomplish this by following the directions to include your own CSS. In the spot that says /* Put your CSS here */ replace that with:

      background-color: #{your_hex_colour} !important;

  5. Audrey March 10, 2014 at 1:42 pm #

    Hi, thank you for this helpful article! i followed everything and it worked for me. However one question.. after editing the header css. How do you also edit the email body’s css i.e. font size?

    • Jordan Schelew March 10, 2014 at 4:21 pm #


      That’s great!

      It should simply be:

      h2{ font-size: 125% !important; }
      p{ font-size: 125% !important; }

      As an example.

  6. Shanty July 28, 2014 at 6:44 pm #


    Great article! Thx!

    Do you know where to act if i want to change the core text of my emails? i look for it everywhere but didnt find the tricks!

    Also trying to edit the css of my files.

    Thanks for your answer

    • Jordan Schelew August 14, 2014 at 7:43 pm #


      It’s in the location specified in the article! See the part that says:

      Complete Template Adjustment

      Under that it will show you how to save the template to a safe location. Once that’s done, you can edit the text all you want.

  7. Simon October 9, 2014 at 7:43 am #

    Hello and thanks for this article. I’m just wondering how to remove all the effects (shadows, box-radius etc.) from the mail. I didn’t find out the correct CSS classes for that. Do you have an idea? Or can you tell me how I can find out all the classes of the mail?

    • Jordan Schelew November 10, 2014 at 6:01 pm #

      This should work:

      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;

      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
      border-radius: 0 !important;

  8. cxthemes November 10, 2014 at 8:16 am #

    We have launched a plugin called Email Control for WooCommerce (on CodeCanyon) that does what some of you are discussing in this thread – it allows you to customize the styling, colors, logo, and what the text says in the emails sent from your WooCommerce store, using the familiar WordPress Customizer interface. We created the plugin for our store as we needed more control over what the text in our emails said and wanted their design to look more professional and unique. We think the plugin could be a solution for some of you here.

Leave a Reply

Join The Websavers, Inc Social Community