How to avoid style injection in WooCommerce email templates

Question

There are some HTML elements in the template, for example, templates/emails/email-header.php on line 41 table#template_container, that has no inline styles:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container">

But when it is rendered in the front end it appears with a lot of inline style:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container"
style="background-color: #ffffff; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); border-radius: 3px;">

How and where is done this style injection?

How can avoid this style injection?

I want to write my own inline styles in the template. What is de right way to do it?

I've notice that some injections, like the above example, depends on ID of element, so I can remove their ID, but others cases come in a variable, like templates/emails/email-header.php on line 48:

<h1><?php echo $email_heading; ?></h1>

It is rendered as:

<h1 style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; text-shadow: 0 1px 0 #ffffff; color: #202020; background-color: inherit;">HTML email template</h1>

Any help appreciated. Thank you.

Answer 1

1) The style injection from #template_container can be found in templates/emails/email-styles.php on line 58 - 63 @version 4.0.0.

#template_container {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    background-color: <?php echo esc_attr( $body ); ?>;
    border: 1px solid <?php echo esc_attr( $bg_darker_10 ); ?>;
    border-radius: 3px !important;
}

---

2) $email_heading is passed when calling the template file, see includes/class-wc-emails.php line 263 - 270 @version 2.3.0

/**
 * Get the email header.
 *
 * @param mixed $email_heading Heading for the email.
 */
public function email_header( $email_heading ) {
    wc_get_template( 'emails/email-header.php', array( 'email_heading' => $email_heading ) );
}

The style injection however, also takes place via templates/emails/email-styles.php on line 176 - 185 @version 4.0.0

h1 {
    color: <?php echo esc_attr( $base ); ?>;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 150%;
    margin: 0;
    text-align: <?php echo is_rtl() ? 'right' : 'left'; ?>;
    text-shadow: 0 1px 0 <?php echo esc_attr( $base_lighter_20 ); ?>;
}

---

So to answer your question:

If you want to apply your own styles, or want to modify the existing one. You will have to overwrite the template file. The template file can be overridden by copying it to yourtheme/woocommerce/emails/email-styles.php.

Also see: Template structure & Overriding templates via a theme - How to Edit files