Jan26

How to edit the CSS of a woocommerce email template

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

Alternatively it would be best for Gmail compatibility to insert your CSS inline. Despite the fact that it’s considered terrible coding practice to do this, unfortunately Gmail only supports inline CSS. Every other mail client support <style> tags, so in the end Gmail is holding back proper standards compatibility for email across the board.

Just Fiddling with CSS

It’s important to note that Gmail does not support <style> tags so this solution will work for every mail client except for Gmail. If you require Gmail compatibility (most people do) then unfortunately your only solution is to edit the template using the method above. You (and everyone using Gmail) should also complain to Google about their horrific email standards compliance.

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 */
</style>
';
}

The MailChimp Inliner tool can help to ensure you can use <style> tags (as you should be) while still actually formally sending the message with the styles inline. While I haven’t tested this with WooCommerce email templates, I have used it for other email templates we’ve sent out in the past.

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

  1. Chris Kenward August 18, 2016 at 7:52 am #

    Hi Jordan and thanks for an excellent article. This is something I’ve wanted to know how to do for some time. I’m using the following script to change the header font size in outgoing Emails from WooCommerce but the 30px standard is still overriding it somehow. Can you help me with this?

    /** Change WooCommerce Email Headers **/
    add_action(‘woocommerce_email_header’, ‘add_css_to_email’);

    function add_css_to_email() {
    echo ‘

    /* Put your CSS here */
    table#template_header {
    h1 {font-size: 42px !important; }

    ‘;
    }

    • Jordan Schelew August 18, 2016 at 9:56 am #

      Hey Chris,

      It may be the case that the WordPress comment system is stripping out the HTML not enclosed in code tags, but it looks like you might be missing the wrapper:

      <style type="text/css">[...CSS...]</style>

      It’s also important to note that you won’t see these changes if you’re sending the test messages to a Gmail account because, well, unfortunately Gmail just kinda sucks at standards implementations. The only way to make it work with Gmail is to edit the template itself, as per the first part of the guide.

  2. Elliot October 20, 2015 at 12:18 pm #

    GMail strips our so all styling should be inline…

    • Jordan Schelew October 20, 2015 at 1:14 pm #

      Indeed. Sadly Gmail doesn’t support CSS that is *not* inline. I had hopes that they would have fixed this years ago. Yet another reason to self-host your email and not use Gmail. But in the meantime, the only solution to that is to edit the templates directly and not use this hook for email template styling.

      • Ian November 27, 2015 at 10:13 pm #

        I know it’s outside of the article, but I was wondering if you could provide a tip for ‘editing the template directly”. I found an annoying issue that I don’t know if it’s theme related or Woo related. In the password reset email, the link people click to open the reset link ….is white… on a white background. Any tips on how to edit that one simple item inside the template?

        • Jordan Schelew December 9, 2015 at 6:14 pm #

          Hey Ian,

          This should already be in the article (or at least generally). It’s the section “Complete Template Adjustment”. Follow the directions there so that your template adjustments are safe and edit away! It is possible that the password reset email isn’t part of those templates — it may be WordPress core, in which case this might help.

          -Jordan

  3. ORION June 14, 2015 at 6:22 pm #

    Hello,

    We just released a plugin which allows you to customize every aspect and content of woocommerce emails: http://www.orionorigin.com/plugins/woocommerce-emails-customizer/

  4. DerekS March 16, 2015 at 11:07 am #

    Hi Jordan,

    Thanks for the reply. I’ve tested through gmail, outlook and outlook express.

    I’ve also since found out, through my theme developer, that the colour of the header font is dependent on the base colour. If the base colour is light the font is black and if it is dark the font is white. I originally had a kind of lime green colour and the font was white but I reduce the tone of the green as I found it a little harsh and now the font has turned black which just doesn’t look good at all.

    I can’t see where to change this in the individual emails.

  5. DerekS March 12, 2015 at 10:52 am #

    Hi,

    Thanks so much for this, I’d been looking for a way to change this for some time. I’m simply looking to change the colour of the h1 text. It appears black on my emails and I want it to be white. I’ve tried inserting the following but it’s not changing anything. Am I doing something wrong?

    add_action(‘woocommerce_email_header’, ‘add_css_to_email’);

    function add_css_to_email() {
    echo ‘

    h1 { color: #ffffff !important; }

    ‘;
    }

    • Jordan Schelew March 12, 2015 at 7:47 pm #

      Any chance you’re testing the results in Gmail? Gmail doesn’t recognize any CSS that’s not inline, meaning the only way to adjust the email styles for Gmail compatibility is by editing the template itself.

      • DerekS March 16, 2015 at 11:08 am #

        Hi Jordan,

        Thanks for the reply. I’ve tested through gmail, outlook and outlook express.

        I’ve also since found out, through my theme developer, that the colour of the header font is dependent on the base colour. If the base colour is light the font is black and if it is dark the font is white. I originally had a kind of lime green colour and the font was white but I reduce the tone of the green as I found it a little harsh and now the font has turned black which just doesn’t look good at all.

        I can’t see where to change this in the individual emails.

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

  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:

      table#template_container{
      -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. Shanty July 28, 2014 at 6:44 pm #

    Hello!

    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 #

      Shanty,

      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.

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

      Audrey:

      That’s great!

      It should simply be:

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

      As an example.

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

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

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

      Omar,

      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:

      table#template_header{
      background-color: #{your_hex_colour} !important;
      }

  11. 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 #

      okay,

      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.

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

    hi,

    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 element.style 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?

    thanks

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

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

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

    hi!

    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?

    cheers

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

      Thomas,

      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.

Leave a Reply