There are 269 free WooCommerce themes on WordPress.org which is amazing. And many of them are absolutely gorgeous. And while many of them are gorgeous there is one aspect that developers leave out. And that is making sure that WooCommerce email styles match the theme. As a store owner you want to have a unified experience. Unfortunately in most cases no matter what colors your theme has your emails tend to look like this:
The standard New Customer email for WooCommerce
That won't work well if your theme is like my blog's theme: big header, a vibrant purple, and my face in the header. The emails don't resemble that at all.
Luckily there are two good solutions to this problem. The first is a plugin and the second, for savvy developers, is to use custom code.
Using WooCommerce Email Customizer
There's a handy plugin I helped develop called the WooCommerce Email Customizer. It lets you use the WordPress customizer to tweak the look & feel of your emails. You can change the font colors, the background colors, add a header, tweak the footer text, etc. It should handle just about any stylistic change you need to make to your emails.
I customized the header color, added rounded corners, increased the font size slightly, made the footer text grey, shrunk the footer text, and removed the “Powered by WooCommerce” text.
Styling WooCommerce Emails with Code
Using the plugin should be good for just about everyone. But if you have specific styles for your brand or if you want to tweak the email styles for just one product or one category then custom code is the way to go.
You could copy the email-styles.php template from templates/emails/email-styles.php into your theme and override the template. But overriding templates has it's downsides. And they're documented right in that template.
This template can be overridden by copying it to yourtheme/woocommerce/emails/email-styles.php.
HOWEVER, on occasion WooCommerce will need to update template files and you (the theme developer) will need to copy the new files to your theme to maintain compatibility. We try to do this as little as possible, but it does happen.
I'd rather add some CSS in a forward friendly way. We can use the woocommerce_email_styles hook and add as many extra CSS rules as we like.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_filter( 'woocommerce_email_styles', 'patricks_woocommerce_email_styles' ); | |
| function patricks_woocommerce_email_styles( $css ) { | |
| $css .= "#template_header { background-color: #231f20; }"; | |
| return $css; | |
| } |
I only added one line of CSS but you could add as much as you want. I actually recommend looking through
Changing the Emails Content
After getting your emails to look the right way the next step is to make them sound like you. And for that we're going to explore how you can tweak the wording in the emails. On Wednesday I'll have a fresh post for you on that. 🙂
In the meantime happy emailing!
Hey there, do you know how to remove or hide the grey table within this email confirmation of wocommerce?
You are a legend Patrick. Thank you.
awseome article thanks for sharing. we love using woocommerce for our business site.
Fantastic, Patrick – thank you for this!
Great One. Thanks a lot.
All I want to do is make the margins full width in the admin-new-order email.. Can you tell me how?
Thanks,
Dave
Hey,
thanks for sharing this little CSS snippet. Works great!
Best regards,
-Björn
I had issues with plugins and I was unable to use any template overrides so this article (and the following about editing the text content) were life savers. Thanks for offering alternative methods when all of the “standard” methods are a no-go.
Hey Patrick, did you add that function into your functions.php file? Or right into the email template? Thanks!