EStore Tools

WooCommerce Email Template Designer

Preview WooCommerce's transactional emails with your logo and brand colors, then export the settings or an update_option() snippet.

Describe the result you need. AI will set up the tool and ask for any missing details.

Configure with AI

Enter to submit · Shift + Enter for a new line

Sent to AI. Leave out passwords and private customer data.

Your details

Accepts {site_title} and {site_address}.

Your snippet

woocommerce-email-style.php
<?php
/**
 * Apply these WooCommerce email colors and logo once. The same values can be pasted directly
 * into WooCommerce → Settings → Emails instead; this snippet is for version-controlled setups.
 */

add_action( 'admin_init', 'ea_set_woocommerce_email_style' );
function ea_set_woocommerce_email_style() {
	if ( get_option( 'ea_email_style_applied' ) ) {
		return;
	}
	update_option( 'woocommerce_email_base_color', '#7f54b3' );
	update_option( 'woocommerce_email_background_color', '#f7f7f7' );
	update_option( 'woocommerce_email_body_background_color', '#ffffff' );
	update_option( 'woocommerce_email_text_color', '#3c3c3c' );
	update_option( 'woocommerce_email_footer_text_color', '#999999' );
	update_option( 'woocommerce_email_footer_text', '{site_title} — {site_address}' );
	update_option( 'woocommerce_email_header_alignment', 'center' );
	update_option( 'ea_email_style_applied', 'yes' );
}

Simplest path: WooCommerce → Settings → Emails, and paste each hex value and the logo URL into its field directly. This snippet does the same thing in code, for a deploy pipeline or staging-to-live setup.

It only runs once (guarded by the ea_email_style_applied option), so it won't fight with changes you make later in Settings → Emails.

Colors and the logo only apply to the HTML version of each email. The plain-text alternative WooCommerce sends alongside it has no styling.

Live preview

What these settings actually control

Every WooCommerce transactional email (new order, processing, completed, invoices, and more) shares one layout and reads the same set of color and logo options under WooCommerce → Settings → Emails. This tool previews that shared layout live as you change values, then gives you the exact option values to paste there.

SettingOption nameControls
Accent colorwoocommerce_email_base_colorHeader bar and links
Email backgroundwoocommerce_email_background_colorThe area outside the email's content card
Content backgroundwoocommerce_email_body_background_colorThe card the email content sits in
Text colorwoocommerce_email_text_colorBody text
Footer text colorwoocommerce_email_footer_text_colorThe small print at the bottom
Footer textwoocommerce_email_footer_textAccepts {site_title} and {site_address}
Header imagewoocommerce_email_header_imageYour logo URL

Applying it

  1. 01

    Design it here

    Adjust the colors and logo until the preview matches your brand.

  2. 02

    Paste the values in, or use the snippet

    The simplest path is WooCommerce → Settings → Emails, pasting each hex value and logo URL into its field. The generated snippet does the same thing in code, useful if you manage settings through version control or a staging-to-live deploy.

  3. 03

    Send yourself a real test email

    WooCommerce → Settings → Emails → pick an email → “Preview” (or trigger a real one, like placing a $0 test order) to see it rendered by an actual email client, since previews in a browser don't always match Gmail or Outlook exactly.

The generated snippet only sets the options once (it checks a flag so it won't overwrite changes you make later in Settings → Emails). If you want it to always enforce these values, remove that guard, but then the Settings page fields will stop reflecting real, editable values.

Questions people ask

Does this change the order details table, or just the colors around it?

Just the shared layout: header, background, text color and footer. The order table, line items and totals are built separately by each email and aren't restyled by this tool.

Will my logo show correctly in Outlook?

Use a hosted PNG or JPG under about 600px wide; Outlook's rendering engine doesn't support SVG or very large images well in emails. Keep the file under roughly 100KB so it loads reliably.

Can I preview a specific email, like the invoice, with real content?

This tool previews the shared header/footer/color layout with sample content. For the exact content of one email (its subject, heading and order table), use WooCommerce → Settings → Emails → that email → Preview.

Do these settings apply to plain-text emails too?

No, colors and the logo only apply to the HTML version. WooCommerce sends a plain-text alternative automatically for email clients that prefer it, with no styling.

Related tools

WooCommerce Email Placeholders ReferenceWhich order status change triggers which WooCommerce email, every placeholder each one supports, and a checklist for a missing email.WooCommerce Custom Order Status GeneratorRegister a new order status that works with both classic and HPOS order storage, with a bulk action and an email stub.WooCommerce Text String ChangerChange any WooCommerce wording, in the classic checkout and the block-based Cart and Checkout, without a translation plugin.WooCommerce Redirect Snippet GeneratorSend customers to a custom page after checkout, login, registration or add to cart, by product or user role.

Want this builtinto your store?

I'm Emmanuel, a Shopify and WooCommerce developer. If this tool pointed at something you'd rather have fixed for you (a faster store, cleaner product data, a migration, a custom feature), send me a note.

Emmanuel Asika

Emmanuel Asika

Shopify & WooCommerce developer, Dublin

I build and fix online stores: new builds, migrations, speed, SEO and the custom bits apps can't do.

hello@emmanuelasika.com
See my work

Last reviewed 30 September 2026.

Sources: WooCommerce source: class-wc-settings-emails.php · WooCommerce source: class-wc-email.php · WooCommerce Docs: Email HTML best practices