<style> tag has been removed from woocommerce email templates

问题

I'm trying to add a 'style' tag inside my woocommerce email templates, in order to include a font-face attribute, with no success.

What I already tried is to:

1. Add it directly in the template file (ex. email-header.php)
2. Add it in 'woocommerce_email_header' filter

add_action('woocommerce_email_header', 'add_style_tag_to_email', 10);
function add_style_tag_to_email() {
            echo '
                <style type="text/css">
                @font-face {
                  font-family: 'Montserrat';
                  font-style: normal;
                  font-weight: 300;
                  src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format('woff2');
                  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
                }
                </style>
            ';
        }

It seems that there is a filter that strips the "style" tag in the entire template. That's because when I convert the code above and instead of add the font-face is rendered successfully. This does not affect anything ofcourse because 'style2' is not a valid tag.

回答1:

@Sephsekla comment gave me the idea below, about how to add a tag in email template overriding the default stripping.

Not a nice technique but it works!

The first part of the solution is to include the part of the CSS code inside another tag (even if this tag is not valid) than 'style' to avoid stripping in the first place, like the example below:

        <style-inline>
            @font-face {
                font-family: 'Montserrat';
                font-style: normal;
                font-weight: 400;
                src: url(http://fontdomain-example.com/Montserrat-Regular.woff) format('woff');
            }
        </style-inline>

If we leave it as is then our code will be rendering in our email code.

So the next thing is to add a hook to 'woocommerce_mail_content' filter (with low priority in order to be the last filter to be run) replacing the 'style-inline' with 'style' string.

add_filter( 'woocommerce_mail_content', 'woocommerce_mail_content_callback', 9999 );
public function woocommerce_mail_content_callback($mail_content){
            $mail_content = str_replace([
                '<style-inline>',
                '</style-inline>'
            ], [
                '<style>',
                '</style>'
            ], $mail_content);
            return $mail_content;
        }

The above technique worked for me allowing me add font-face successfully.

回答2:

I've done a bit of research on this and it looks like there is indeed a function that strips out style tags https://docs.woocommerce.com/wc-apidocs/source-class-WC_Email.html#495

Rather than trying to add a whole style block to the email you should be able to use the woocommerce_email_styles hook instead to add rules to the default style block.

I found a writeup of the process here, but the gist of it is something like this:

add_filter( 'woocommerce_email_styles', 'add_custom_styles_to_email' );

function add_custom_styles_to_email( $css ) {
    $css .= '@font-face {
                  font-family: "Montserrat";
                  font-style: normal;
                  font-weight: 300;
                  src: local("Montserrat Light"), local("Montserrat-Light"), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format("woff2");
                  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
                };'
    return $css;
}

As a side note I've changed the single quotes into double quotes in the style string as otherwise they're not being escaped. That may cause some issues, as php might think you're trying to concatenate the string with some variables.

回答3:

This is caused by Emogrifier, which tries to convert all <style> tags(and others) into inline styles. You can prevent this by changing the settings like so:

add_action('woocommerce_emogrifier', function($emogrifier){
    $emogrifier->disableStyleBlocksParsing();
});

来源：https://stackoverflow.com/questions/55491626/style-tag-has-been-removed-from-woocommerce-email-templates