Customize WooCommerce email CSS

Use Settings → POM Tweaks → E-Commerce → Emails → Email CSS to add CSS to WooCommerce HTML email templates. WooCommerce must be active. This setting is intended for administrators familiar with CSS.

  1. Enable Email CSS and click Save to open the code editor.
  2. Enter CSS in Email CSS, without <style> tags.
  3. Click Save.
  4. Generate the relevant HTML email on a staging site and inspect it in the email clients your customers use.
  5. Check the corresponding plain-text email; its content should remain unchanged.

For example:

#body_content p {
    line-height: 1.6;
}

The CSS is appended to WooCommerce's existing email styles and passes through its normal HTML styling process. It can style standard and additional WooCommerce emails that use that pipeline. It does not replace the templates or affect ordinary WordPress emails, storefront CSS or plain-text emails.

CSS selectors depend on the active email template. Some email clients ignore particular properties or media queries, and an explicit inline style in a template can take precedence. Verify the final generated message rather than relying only on an administration preview. Disabling the module stops appending its CSS while retaining the saved editor content.

Related: Coordinate WooCommerce email content and Add custom WooCommerce emails.