If you’re trying to customize the look and feel of your WooCommerce order confirmation emails, you might be wondering where to place your CSS. Unlike your theme, WooCommerce email styles can’t be changed by simply editing style.css.

Instead, you’ll need to inject your custom CSS using PHP. Thankfully, this is easier than it sounds — and in this guide, we’ll show you exactly how to do it.

Why Customize Email Styles in WooCommerce?

WooCommerce emails are designed with default styles that often don’t match your brand’s look. Whether you want to change colors, fonts, or layout spacing, adding custom CSS is essential for brand consistency and improved readability.

Method 1: Add Custom CSS to All WooCommerce Emails

Here’s a simple PHP snippet you can use to apply CSS styles across all WooCommerce emails.

PHP Snippet: Add CSS to All WooCommerce Emails

/**
 * Add Custom CSS to All WooCommerce Emails
 */
add_filter( 'woocommerce_email_styles', 'custom_email_styles_global', 9999, 2 );

function custom_email_styles_global( $css, $email ) {
    $css .= '
        h2 { color: #e63946; }
        h3 { font-size: 24px; margin-bottom: 10px; }
        .woocommerce-email-footer { background-color: #f1f1f1; }
    ';
    return $css;
}

Tip: You can modify the CSS above to fit your branding — add background colors, font sizes, padding, or anything supported by inline CSS.

Method 2: Add Custom CSS to a Specific WooCommerce Email

Want to apply custom styling to just one email type? For example, the New Order email? Use this snippet instead.

PHP Snippet: Add CSS to a Specific Email

/**
 * Add Custom CSS to a Specific WooCommerce Email (e.g. New Order)
 */
add_filter( 'woocommerce_email_styles', 'custom_email_styles_new_order', 9999, 2 );

function custom_email_styles_new_order( $css, $email ) {
    if ( $email->id === 'new_order' ) {
        $css .= '
            h2 { color: #007cba; }
            p { font-size: 16px; line-height: 1.5; }
        ';
    }
    return $css;
}

Email ID Reference: You can find a full list of WooCommerce email IDs (like new_order, customer_completed_order, cancelled_order, etc.) here:
WooCommerce Email ID List

Prefer a Plugin? Use the Lightweight “Email CSS Mini-Plugin”

If you’re not comfortable with PHP or prefer a simpler, code-free solution, consider using the Business Bloomer Add CSS To Emails Mini-Plugin.

Features:

• No bloat, upsells, or dashboards
• One plugin file, one purpose
• Add CSS via a clean settings field
• Lifetime license, no subscriptions

Just install it, add your CSS, and you’re done.

Where Should You Add the Code?

• For PHP snippets: Use your child theme’s functions.php file or a plugin like Code Snippets.
• For CSS-only plugin: Just install and use the settings UI.
• Avoid editing WooCommerce core files — they will reset during updates.

More on best practices: Where to place WooCommerce custom code.

Final Thoughts

Adding custom CSS to WooCommerce emails is a great way to align them with your brand and improve the customer experience. Whether you want subtle tweaks or a complete design overhaul, these snippets and tools will give you full control over email styling.