如何在WooCommerce电子邮件中风格化银行详细信息


How to stylize bank details in WooCommerce email?

我可以看到这部分由以下代码输出:

<?php do_action( 'woocommerce_email_before_order_table', $order, $sent_to_admin, $plain_text ); ?>

操作woocommerce_email_before_order_table位于文件woocommerce/include/gateways/class-wc-gateway-bacs中.php

// Customer Emails
    add_action( 'woocommerce_email_before_order_table', array( $this, 'email_instructions' ), 10, 3 );

电子邮件说明位于同一文件中:

/**
 * Add content to the WC emails.
 *
 * @access public
 * @param WC_Order $order
 * @param bool $sent_to_admin
 * @param bool $plain_text
 * @return void
 */
public function email_instructions( $order, $sent_to_admin, $plain_text = false ) {
    if ( ! $sent_to_admin && 'bacs' === $order->payment_method && $order->has_status( 'on-hold' ) ) {
        if ( $this->instructions ) {
            echo wpautop( wptexturize( $this->instructions ) ) . PHP_EOL;
        }
        $this->bank_details( $order->id );
    }
}

我感兴趣的部分是:

/**
 * Get bank details and place into a list format
 */
private function bank_details( $order_id = '' ) {
    if ( empty( $this->account_details ) ) {
        return;
    }
    echo '<h2>' . __( 'Our Bank Details', 'woocommerce' ) . '</h2>' . PHP_EOL;
    $bacs_accounts = apply_filters( 'woocommerce_bacs_accounts', $this->account_details );
    if ( ! empty( $bacs_accounts ) ) {
        foreach ( $bacs_accounts as $bacs_account ) {
            $bacs_account = (object) $bacs_account;
            if ( $bacs_account->account_name || $bacs_account->bank_name ) {
                echo '<h3>' . implode( ' - ', array_filter( array( $bacs_account->account_name, $bacs_account->bank_name ) ) ) . '</h3>' . PHP_EOL;
            }
            echo '<ul class="order_details bacs_details">' . PHP_EOL;
            // BACS account fields shown on the thanks page and in emails
            $account_fields = apply_filters( 'woocommerce_bacs_account_fields', array(
                'account_number'=> array(
                    'label' => __( 'Account Number', 'woocommerce' ),
                    'value' => $bacs_account->account_number
                ),
                'sort_code'     => array(
                    'label' => __( 'Sort Code', 'woocommerce' ),
                    'value' => $bacs_account->sort_code
                ),
                'iban'          => array(
                    'label' => __( 'IBAN', 'woocommerce' ),
                    'value' => $bacs_account->iban
                ),
                'bic'           => array(
                    'label' => __( 'BIC', 'woocommerce' ),
                    'value' => $bacs_account->bic
                )
            ), $order_id );
            foreach ( $account_fields as $field_key => $field ) {
                if ( ! empty( $field['value'] ) ) {
                    echo '<li class="' . esc_attr( $field_key ) . '">' . esc_attr( $field['label'] ) . ': <strong>' . wptexturize( $field['value'] ) . '</strong></li>' . PHP_EOL;
                }
            }
            echo '</ul>';
        }
    }
}

我想在 h2、h3 和 li 元素中添加一些内联样式,以便在电子邮件中对它们进行风格化。如果此函数输出结果并且不返回结果并且不将数据存储在变量中,我如何使用过滤器(或其他更新后不会丢失更改的方法)来做到这一点?

我可以在电子邮件中看到 h2 和 h3 中有一些内联样式,但我无法理解它们来自哪里。

我将不胜感激任何帮助。

您可以尝试为电子邮件模板中使用的所有 H2 和 H3 标记添加一些自定义样式。我已经通过添加内联样式(大概就像您一样)成功地设置了各个 H2 和 H3 标签的样式,但模板中没有涵盖 BACS 详细信息,它们是由您引用的外部函数生成的。

为此,请打开文件电子邮件标头.php(将其复制到自定义主题文件夹后)并在结束头标记之前添加以下代码():

<style>h2,h3 { font-size: 14px !important; color: #000 !important; }</style>

这将确保 H2 和 H3 标签使用 14px 字体大小和 #000 颜色(使用 !important 规则覆盖内联样式)进行样式设置。您可以根据需要修改样式。

尽管有评论说全局样式与Gmail配合不佳,但在使用Gmail阅读电子邮件时,样式似乎应用得很好。