WOrdpress- woocommerce - 电子邮件订单或发票电子邮件：如何编辑 CSS 样式？答案

【问题标题】：WOrdpress- woocommerce - email order or invoice email : how to edit css style?WOrdpress- woocommerce - 电子邮件订单或发票电子邮件：如何编辑 CSS 样式？
【发布时间】：2013-07-08 19:22:46
【问题描述】：

编辑woocommerce商店的CSS没问题。

但是 woocommerce 发送的电子邮件呢？ Firebug 无用，因为一旦发送的电子邮件属于 yahoo 或 gmail 或...

尝试this hooks 不起作用：我的新 h3（例如）字体大小规则已被识别，但我不知道其中的 element.style 具有优先级并将 h" 字体大小保持为 30 像素。

我迷路了，改变它的CSS的正确方法是什么？

非常感谢

【问题讨论】：

标签： css email woocommerce editing

【解决方案1】：

或者你可以通过放置在你的主题的function.php上试试这个过滤器

add_filter( 'woocommerce_email_styles', 'mmr_woocommerce_email_styles' );
function mmr_woocommerce_email_styles( $css ) {
    $css .= "#header_wrapper {    padding: 20px 48px; }";
    $css .= "#header_wrapper h1 { font-size:20px; }";
    return $css;
}

【讨论】：

【解决方案2】：

通过覆盖 woocommerce 主题组件：http://docs.woothemes.com/document/template-structure/

【讨论】：

【解决方案3】：

您需要通过将相关电子邮件复制到您的主题来覆盖 woo commerce 电子邮件模板。

示例：要覆盖管理员订单通知，请将：woocommerce/templates/emails/admin-new-order.php 复制到 yourtheme/woocommerce/emails/admin-new-order.php

然后您可以在新位置编辑电子邮件模板。管理电子邮件的 CSS 是硬编码在模板中的，因此请在文本编辑器中打开它并在其中进行更改。如果您想更改电子邮件这些区域的外观，还可以查看页眉和页脚模板。

我希望这对你有帮助。

【讨论】：

CSS 与电子邮件的 HTML 是分开的。在发送电子邮件之前，Woocommerce 实际上使用 Emogrifier 库内联 CSS。使用woocommerce_email_styles 过滤器向电子邮件中添加新的 CSS 可确保您的新 CSS 内联到生成的 HTML 中。这可以防止 Gmail 等客户端出现问题，这些客户端会从 HTML 电子邮件中删除大量样式表。