Default WooCommerce order emails look plain – a basic header, a product table, and not much else. If you want them to actually match your brand, you don’t need a page builder or a paid plugin. WooCommerce has a built-in filter made specifically for adding custom CSS to emails.
The Base Snippet
/**
* Add custom CSS to WooCommerce order emails.
*/
add_filter( 'woocommerce_email_styles', 'wpcodex_custom_email_css' );
function wpcodex_custom_email_css( $css ) {
$css .= '
#header_wrapper { background-color: #0F6E56; }
#header_wrapper h1 { color: #ffffff; }
.email-order-details th { background-color: #F4FAF7; }
a { color: #0F6E56; }
';
return $css;
}
WooCommerce takes whatever you return here and runs it through Emogrifier, which converts the CSS into inline styles automatically – this matters because most email clients strip out <style> blocks, so inline styling is the only reliable way to get consistent formatting across Gmail, Outlook, and everything else.
Full Template Customization: Logo, Colors, Background, and Fonts
If you want to go beyond a few colors and actually rebrand the whole email, here’s a more complete version. Every section is commented so you know exactly what to change and where.
/**
* Full WooCommerce email template customization:
* logo, header background, body background, fonts, links, and footer.
*/
// 1. Set your logo (shows at the top of every email)
add_filter( 'woocommerce_email_header_image', 'wpcodex_custom_email_logo' );
function wpcodex_custom_email_logo( $image ) {
return 'https://yourdomain.com/wp-content/uploads/your-logo.png'; // Change to your logo URL
}
// 2. Full CSS customization
add_filter( 'woocommerce_email_styles', 'wpcodex_full_email_template_css' );
function wpcodex_full_email_template_css( $css ) {
$css .= '
/* --- HEADER BACKGROUND & LOGO AREA --- */
#header_wrapper {
background-color: #0F6E56; /* Change this to your brand color */
padding: 24px 0;
}
#header_wrapper img {
max-height: 60px; /* Controls logo size */
}
#header_wrapper h1 {
color: #ffffff; /* Header text color, if no logo is set */
}
/* --- OVERALL EMAIL BACKGROUND --- */
body, #wrapper {
background-color: #F4FAF7; /* Background behind the email content */
}
#template_container {
background-color: #ffffff; /* The main white card/content area */
border-radius: 8px;
}
/* --- FONT FAMILY & BODY TEXT --- */
body, table, td, p {
font-family: Arial, Helvetica, sans-serif; /* Web-safe font stack */
color: #333333; /* Default body text color */
font-size: 15px;
line-height: 1.6;
}
/* --- HEADINGS --- */
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0F6E56; /* Heading color, matches brand */
}
/* --- LINKS & BUTTONS --- */
a {
color: #0F6E56; /* Link color */
}
.button, a.button {
background-color: #EF9F27; /* Button background */
color: #ffffff !important;
border-radius: 4px;
padding: 10px 20px;
text-decoration: none;
}
/* --- ORDER TABLE --- */
.email-order-details th {
background-color: #F4FAF7;
color: #0F6E56;
}
.email-order-details td {
border-color: #E5E5E5;
}
/* --- FOOTER TEXT --- */
#footer, #footer p {
color: #999999;
font-size: 12px;
}
';
return $css;
}
What to change and where:
| What you want to change | Where in the code |
|---|---|
| Logo image | wpcodex_custom_email_logo() – replace the URL |
| Logo size | #header_wrapper img { max-height: ... } |
| Header background color | #header_wrapper { background-color: ... } |
| Background behind the email | body, #wrapper { background-color: ... } |
| Main content card background | #template_container { background-color: ... } |
| Font used throughout | body, table, td, p { font-family: ... } |
| Body text color | body, table, td, p { color: ... } |
| Heading color | h1, h2, h3 { color: ... } |
| Link color | a { color: ... } |
| Button color | .button, a.button { background-color: ... } |
| Footer text color | #footer, #footer p { color: ... } |
A note on fonts: most email clients (especially Outlook) ignore custom web fonts like Google Fonts entirely, since they don’t load external font files reliably in email. Stick to a web-safe stack – Arial, Helvetica, Georgia, or Verdana – to make sure your font choice actually shows up the same way for everyone.
The Modern Email Design Fix
Recent WooCommerce versions added a new “Modern Email Design” option under WooCommerce > Settings > Advanced > Features (the email_improvements_enabled setting). If you turn this on, WooCommerce restructures the HTML of its emails – which means CSS written for the old layout can stop working, since the class names and structure it targets may no longer exist.
If you’ve enabled this feature and your custom CSS isn’t applying anymore, here’s an updated version that accounts for the new structure:
/**
* Custom CSS for WooCommerce emails, compatible with the new Modern Email Design.
*/
add_filter( 'woocommerce_email_styles', 'wpcodex_modern_email_css' );
function wpcodex_modern_email_css( $css ) {
if ( 'yes' !== get_option( 'woocommerce_feature_email_improvements_enabled' ) ) {
return $css; // Only apply this version if Modern Email Design is active
}
$css .= '
.email-introduction { color: #333333; }
.email-order-item-meta span {
display: inline-block;
border: 1px solid #D9EEE5;
border-radius: 4px;
padding: 2px 8px;
margin: 2px 0;
background-color: #F4FAF7;
}
';
return $css;
}
Run both snippets together if you’re not sure which layout a given store is using – the check inside the second function makes sure it only applies when the new design is actually active, so there’s no conflict either way.
Where to Add This Code
- Your child theme’s
functions.php, or - A site-specific plugin (recommended – it survives theme updates), or
- A code snippets plugin like WPCode or Code Snippets
Troubleshooting
My CSS isn’t showing up at all.
Some CSS properties don’t survive the Emogrifier inlining process, especially anything relying on flexbox, position, or pseudo-classes like :hover. Stick to basic properties: color, background-color, padding, margin, border, and font styling – these inline reliably across almost every email client.
How do I check what’s actually being sent, without waiting for a real order?
Use WooCommerce’s built-in preview at WooCommerce > Settings > Emails > [pick an email] > Email preview, or install a logging plugin like WP Mail Logging to inspect the exact HTML that was generated and sent.
My changes work in the preview but not in the actual email.
Some SMTP services or email clients strip certain styles for security reasons. Test in more than one client (Gmail web, Outlook desktop, and a mobile mail app) before assuming the CSS itself is broken – it may just be a display quirk in that one client.
We used the same “hook into the existing WooCommerce output” approach in our WooCommerce Vacation Mode snippet, where a similar filter-based method was used to add a notice above shop pages without touching any template files directly.
FAQ
Will this break when WooCommerce updates?
No, since you’re using the official woocommerce_email_styles filter rather than editing template files directly, your CSS will keep applying correctly across WooCommerce updates.
Can I style customer emails differently from admin emails?
Yes – the woocommerce_email_styles filter also passes an $email object as a second parameter, which you can use to check $email->id and apply different CSS rules depending on which specific email is being generated.
Do I need to know the exact HTML structure of the email to style it?
It helps, but you don’t need to guess. WooCommerce’s official documentation on customizing email templates lists the available hooks and structure for both the classic and Modern Email Design layouts, which is the most reliable place to check class names for your specific version.
