如何在WooCommerce电子邮件中设置银行详细信息的样式？

Question

I can see this part outputted by the following code:

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

Action woocommerce_email_before_order_table is in the file woocommerce/includes/gateways/class-wc-gateway-bacs.php

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

Email instructions is in the same file:

/**
 * 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 );
    }
}

And part I'm interested in:

/**
 * 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>';
        }
    }
}

I want to add some inline styles to h2, h3 and li elements to stylize they in emails. How can I do it with filters (or other method to do not lost changes after updating) if this function outputs the result and doesn't return it and doesn't store data in variables?

I can see in the emails there are some inline styles in the h2 and h3 but I can't understand where they are from.

I will be grateful for any help.

Answer 1

You could try to add some custom styling for all H2 and H3 tags that are used inside the e-mail templates. I've successfully styled the individual H2 and H3 tags by adding inline styling (presumably just like you did), but the BACS details are not covered inside the templates, they are generated by the external function you're referring to.

To achieve this, open the file email-header.php (after copying it to your custom theme folder) and add the following code right before the closing head tag ():

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

This will ensure the H2 and H3 tags are styled using a 14px font-size and a #000 color (using the !important rule to override inline styling). Offcours you can modify the styling to your wishes.

Although there is a comment about global styling not playing nice with Gmail, the styling seems to applied just fine while reading the e-mail with Gmail.