如何避免WooCommerce邮件模板的自动样式注入

1.1 实现位置 #

• 核心实现类为 WooCommerce 内置的 WC_Emails 和 WC_Email_Inline_Styles，位于 WooCommerce 插件目录的 includes/emails/ 路径下
• 注入的样式来源包含两部分：WooCommerce 默认的邮件样式配置，以及后台「WooCommerce > 设置 > 邮件」中自定义的样式参数

1.2 实现逻辑 #

WooCommerce 邮件渲染流程中会自动执行CSS转内联样式的步骤：

1. 加载邮件模板的原始HTML内容
2. 读取所有生效的邮件CSS规则（默认规则+自定义规则）
3. 基于DOM解析匹配每个HTML元素对应的CSS规则，将匹配到的样式合并后写入元素的style属性

你遇到的#template_container、h1被注入样式，就是因为默认CSS规则里存在对应选择器的样式配置，被解析器匹配后自动写入了内联属性。

根据你的需求可以选择不同的禁用方案：

• 全局关闭所有自动样式注入：添加代码到主题functions.php

  add_filter( 'woocommerce_email_use_emogrifier', '__return_false' );
  

  该过滤器会直接关闭CSS转内联的核心功能，不会再出现任何自动注入的样式，所有样式需要你自行在模板中编写。
• 针对特定元素禁用注入：
  1. 移除元素上被默认CSS匹配的ID、类名，比如删除table的id="template_container"，即可避免匹配到对应的ID选择器样式
  2. 过滤默认邮件CSS规则，删除不需要的样式：

  add_filter( 'woocommerce_email_styles', function( $css ) {
      // 移除h1的默认样式
      $css = preg_replace( '/h1\s?\{[^}]+\}/', '', $css );
      // 移除template_container的默认样式
      $css = preg_replace( '/#template_container\s?\{[^}]+\}/', '', $css );
      return $css;
  } );
  

• 方案一：直接在复写的邮件模板中手动写style属性，你自行编写的内联样式优先级高于自动注入的样式，相同属性会覆盖自动注入的规则，不同属性会保留合并
  示例：

  <h1 style="font-size:24px;color:#333;margin:10px 0;"><?php echo $email_heading; ?></h1>
  

• 方案二：通过woocommerce_email_styles钩子添加自定义CSS规则，系统会自动将你添加的规则转为内联样式，适合批量修改全量邮件的样式，不需要逐个修改模板元素
• 方案三：全局关闭自动注入功能后，所有样式全量手动写入模板的style属性，完全自主控制所有邮件样式，适合完全定制化的邮件模板需求

内容的提问来源于stack exchange，提问作者aitor