– Cookforweb Apr 04 '19 at 08:51

Answer 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.

Answer 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.

Answer 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();
});