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:
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.
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.
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!