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

 

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

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

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

  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 #

      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.

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

  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 #

      Audrey:

      That’s great!

      It should simply be:

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

      As an example.

Leave a Reply

Join The Websavers, Inc Social Community