woothemes/woocommerce — pull request #6489 by BFTrick (2014-10-08 21:50:44+00:00)
Title: Adding CSS Inliner

Now that we only have one `send()` method I added a CSS inliner which takes all CSS styles and adds them inline the appropriate elements. This is necessary since many email clients (like Gmail) ignore regular CSS styles in the head. Ref: #6358

A summary of what I did:

1. I added the [Emogrifier](https://github.com/jjriv/emogrifier) CSS inliner (MIT license).
1. I ripped out the CSS styles in `includes/emails/class-wc-email.php` & `templates/emails/email-header.php`, combined them, and put them in `templates/emails/email-styles.php` which can be overridden like any other WooCommerce template.
1. I setup Emogrifier to inline the CSS styles in the `style_inline` method.
1. I added two filters `woocommerce_email_styles` & `woocommerce_mail_content`

## Moving Forward

Now that we have this infrastructure a plugin or theme can add styles to a WooCommerce email using the `woocommerce_email_styles` filter. And they can do so writing regular css. I created an [example plugin](https://gist.github.com/BFTrick/01cc414ee56ce93715ec) which turns all paragraph text red.

One other fun fact. I added a filter called `woocommerce_mail_content` in the `send()` method so now anyone can easily customize any WooCommerce email.

And the email with customized CSS in gmail:

![your_wc_core_order_receipt_from_october_8__2014_-_patrick_r_woothemes_com_-_woothemes_mail](https://cloud.githubusercontent.com/assets/1065372/4567823/c8bea8ac-4f34-11e4-9991-43d9854774b7.jpg)