WooCommerceのメールテンプレートをカスタマイズする方法

はじめに

WooCommerceが送信する注文確認メールや発送通知メールは、デフォルトのデザインのままでは店舗のブランドイメージと合わないことがあります。テンプレートファイルをテーマにコピーしたり、フックでCSSやコンテンツを注入したりすることで、完全なカスタマイズが可能です。本記事では、安全にテンプレートを上書きしてブランドメールを実現する5つの手順を解説します。

症状・原因

• WooCommerceのメールがデフォルトデザインのままで店舗ブランドと統一されていない
• ヘッダーロゴや会社情報を注文確認メールに追加したい
• 特定のイベント（会員登録完了、ポイント付与など）でカスタムメールを自動送信したい

解決手順

ステップ1：メールテンプレートをテーマにコピーする

# WooCommerceのデフォルトテンプレートをテーマにコピーする
# コピー元（プラグインディレクトリ）
# wp-content/plugins/woocommerce/templates/emails/

# コピー先（有効テーマディレクトリ）
# wp-content/themes/your-theme/woocommerce/emails/

# コピー対象の主要テンプレート一覧
# customer-completed-order.php  → 注文完了メール
# customer-new-account.php      → 新規アカウント作成メール
# customer-invoice.php          → 請求書メール
# email-header.php              → メールヘッダー共通テンプレート
# email-footer.php              → メールフッター共通テンプレート

# テーマに woocommerce/emails/ ディレクトリを作成する
mkdir -p wp-content/themes/your-theme/woocommerce/emails/

# ヘッダーとフッターをコピーする（最優先でカスタマイズ）
cp wp-content/plugins/woocommerce/templates/emails/email-header.php \
   wp-content/themes/your-theme/woocommerce/emails/
cp wp-content/plugins/woocommerce/templates/emails/email-footer.php \
   wp-content/themes/your-theme/woocommerce/emails/

ステップ2：メールCSSをフィルターでカスタマイズする

<?php
// WooCommerceメールのCSSをカスタマイズするフィルター
add_filter( 'woocommerce_email_styles', 'my_custom_email_styles', 10, 2 );

function my_custom_email_styles( $css, $email ) {
    // ブランドカラーをCSS変数として定義する
    $brand_color    = '#e74c3c'; // 自社ブランドカラー
    $brand_bg       = '#fdf5f5'; // 背景色
    $font_family    = 'Noto Sans JP, Hiragino Sans, sans-serif';

    // 既存のCSSに追記する形で独自スタイルを追加する
    $custom_css = "
        /* ブランドカスタムスタイル */
        body {
            font-family: {$font_family};
            background-color: {$brand_bg};
        }
        #header_wrapper {
            background-color: {$brand_color} !important;
            padding: 36px 48px;
        }
        h1, h2 {
            color: {$brand_color};
            font-weight: 700;
        }
        .button {
            background-color: {$brand_color} !important;
            border-color: {$brand_color} !important;
        }
        /* 特定のメール（注文完了）にだけ適用する例 */
        " . ( $email instanceof WC_Email_Customer_Completed_Order ? '
        .order-items td { border-bottom: 1px solid #f0c0c0; }
        ' : '' ) . "
    ";

    return $css . $custom_css;
}

ステップ3：メールヘッダー・フッターをカスタマイズする

<?php
// メールヘッダーにロゴ画像を追加する
add_action( 'woocommerce_email_header', 'my_email_custom_header', 10, 2 );

function my_email_custom_header( $email_heading, $email ) {
    // カスタムロゴ画像のURLを取得する
    $logo_url = get_theme_mod( 'custom_logo' )
        ? wp_get_attachment_image_url( get_theme_mod( 'custom_logo' ), 'medium' )
        : get_template_directory_uri() . '/images/logo.png';

    echo '<div style="text-align:center; padding: 10px 0;">';
    echo '<img src="' . esc_url( $logo_url ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" style="max-height:60px;">';
    echo '</div>';
}

// メールフッターにSNSリンクや免責事項を追加する
add_action( 'woocommerce_email_footer', 'my_email_custom_footer' );

function my_email_custom_footer( $email ) {
    $twitter  = 'https://twitter.com/yourstore';
    $facebook = 'https://facebook.com/yourstore';
    echo '<div style="text-align:center; padding:20px; color:#999; font-size:12px;">';
    echo '<p><a href="' . esc_url( $twitter ) . '">Twitter</a> | ';
    echo '<a href="' . esc_url( $facebook ) . '">Facebook</a></p>';
    echo '<p>本メールに心当たりがない場合は破棄してください。</p>';
    echo '</div>';
}

ステップ4：カスタムWC_Emailクラスを作成する

<?php
// カスタムメールクラスを定義する（functions.php または専用プラグインに記述）
if ( class_exists( 'WC_Email' ) ) {

    class WC_My_Custom_Email extends WC_Email {

        public function __construct() {
            // メールIDと送信先を設定する
            $this->id          = 'wc_my_custom_email';
            $this->title       = 'ポイント付与通知';
            $this->description = '顧客にポイントが付与されたときに送信するメール';
            $this->heading     = 'ポイントが付与されました！';
            $this->subject     = '{blogname}: ポイント付与のお知らせ';

            // テンプレートファイルの場所を指定する
            $this->template_html  = 'emails/my-custom-email.php';
            $this->template_plain = 'emails/plain/my-custom-email.php';

            // テンプレートの基準ディレクトリを自プラグインに設定する
            $this->template_base = plugin_dir_path( __FILE__ ) . 'templates/';

            parent::__construct();
        }

        // メール送信のトリガーとなるメソッド
        public function trigger( $user_id, $points_added ) {
            $this->setup_locale(); // 多言語対応

            $this->object = get_userdata( $user_id );
            if ( ! $this->object ) {
                return;
            }

            // メール本文に渡すデータをセットする
            $this->recipient  = $this->object->user_email;
            $this->placeholders['{points_added}'] = $points_added;

            // 送信条件を満たしているか確認する
            if ( $this->is_enabled() && $this->get_recipient() ) {
                $this->send(
                    $this->get_recipient(),
                    $this->get_subject(),
                    $this->get_content(),
                    $this->get_headers(),
                    $this->get_attachments()
                );
            }

            $this->restore_locale();
        }

        // HTMLメールの内容を返す
        public function get_content_html() {
            return wc_get_template_html( $this->template_html, [
                'email_heading' => $this->get_heading(),
                'email'         => $this,
                'user'          => $this->object,
            ], '', $this->template_base );
        }
    }
}

// カスタムメールクラスをWooCommerceに登録する
add_filter( 'woocommerce_email_classes', 'my_register_custom_wc_email' );

function my_register_custom_wc_email( $email_classes ) {
    $email_classes['WC_My_Custom_Email'] = new WC_My_Custom_Email();
    return $email_classes;
}

ステップ5：注文メールにカスタムコンテンツを追加する

<?php
// 注文詳細メールにカスタムメッセージを差し込むフィルター
add_filter( 'woocommerce_email_order_details', 'my_email_order_custom_content', 5, 4 );

function my_email_order_custom_content( $order, $sent_to_admin, $plain_text, $email ) {
    // 管理者向けメールには追加しない
    if ( $sent_to_admin ) {
        return;
    }

    // 注文完了メールのみに適用する
    if ( $email->id !== 'customer_completed_order' ) {
        return;
    }

    // 獲得ポイント数を計算して表示する（例：購入金額の1%）
    $points = floor( $order->get_total() * 0.01 );

    if ( $plain_text ) {
        echo "今回の購入で {$points} ポイントが付与されました。\n\n";
    } else {
        echo '<div style="background:#fff8e1; border-left:4px solid #ffc107; padding:12px 16px; margin:16px 0;">';
        echo "<p style='margin:0'><strong>今回の購入で <span style='color:#e65100'>{$points} ポイント</span>が付与されました！</strong></p>";
        echo '</div>';
    }
}

注意事項

• テンプレートのバージョン管理: WooCommerceのアップデート時にテンプレートの互換性が崩れることがあります。更新後は「WooCommerce > ステータス > システム情報」で古いテンプレートが警告されていないか確認してください。
• メールクライアント対応: GmailやOutlookはCSSの対応が異なります。インラインスタイルを基本とし、Litmusなどのツールでテストすることをお勧めします。
• スパム対策: カスタムメールを大量送信する場合はSMTPプラグイン（WP Mail SMTP等）とSPF/DKIM設定を必ず行ってください。

まとめ

WooCommerceのメールテンプレートは、テーマへのコピー・CSSフィルター・WC_Emailクラスの継承という3つのアプローチを組み合わせることで、完全なブランドカスタマイズが実現できます。カスタムメールクラスを活用すれば、ポイント付与・会員ランク変更など独自イベントのメール送信も簡単に実装できます。関連記事：WooCommerceの注文管理と在庫管理をカスタマイズする方法