はじめに
「WooCommerceの注文確認メールをブランドカラーに合わせてデザインしたい」「カスタムメール通知を特定のタイミングで送信したい」「メールのフッターやヘッダーに会社情報を追加したい」——WooCommerceはメールテンプレートのカスタマイズを標準でサポートしています。
症状・原因
WooCommerceのデフォルトメールはシンプルなデザインで、ブランドの一貫性が保てません。テンプレートを上書きしてHTMLとCSSをカスタマイズすることで、プロフェッショナルなメール体験を提供できます。
解決手順
ステップ1：テンプレートファイルをテーマにコピーして上書きする
// WooCommerceメールテンプレートの場所
// プラグイン側（元ファイル）:
// wp-content/plugins/woocommerce/templates/emails/
// テーマ側（上書き先）:
// wp-content/themes/mytheme/woocommerce/emails/
// コピーして上書きするファイル例：
// email-header.php → メールヘッダー（ロゴ・背景色）
// email-footer.php → メールフッター（会社情報）
// email-styles.php → メール全体のCSS
// customer-completed-order.php → 注文完了メール（顧客向け）
// customer-new-account.php → アカウント作成通知
// admin-new-order.php → 新規注文通知（管理者向け）# コピーコマンド（テーマディレクトリで実行）
mkdir -p woocommerce/emails
cp wp-content/plugins/woocommerce/templates/emails/email-header.php \
wp-content/themes/mytheme/woocommerce/emails/
cp wp-content/plugins/woocommerce/templates/emails/email-footer.php \
wp-content/themes/mytheme/woocommerce/emails/
cp wp-content/plugins/woocommerce/templates/emails/email-styles.php \
wp-content/themes/mytheme/woocommerce/emails/ステップ2：email-header.phpをカスタマイズする
<?php
// woocommerce/emails/email-header.php
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php echo esc_html( get_bloginfo( 'name', 'display' ) ); ?></title>
</head>
<body <?php echo is_rtl() ? 'rightmargin' : 'leftmargin'; ?>="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<div id="wrapper" style="background-color:#f0f0f1;margin:0;padding:70px 0 70px 0;width:100%">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<div id="template_header_image" style="margin-bottom:24px">
<?php
// カスタムロゴを表示
$logo_url = get_theme_mod( 'custom_logo' )
? wp_get_attachment_image_url( get_theme_mod( 'custom_logo' ), 'medium' )
: '';
if ( $logo_url ) {
printf(
'<a href="%s"><img src="%s" alt="%s" style="max-height:60px;"></a>',
esc_url( home_url() ),
esc_url( $logo_url ),
esc_attr( get_bloginfo( 'name' ) )
);
}
?>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container"
style="background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08)">
<tr>
<td align="center" valign="top">
<!-- ヘッダー -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header"
style="background-color:#0073aa;border-radius:8px 8px 0 0">
<tr>
<td id="header_wrapper" style="padding:36px 48px;text-align:left">
<h1 style="color:#fff;font-family:-apple-system,sans-serif;font-size:20px;font-weight:600;margin:0">
<?php echo esc_html( $email_heading ); ?>
</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_body">
<tr>
<td valign="top" id="body_content" style="background-color:#fff">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding:48px">
<div id="body_content_inner"
style="color:#1d2327;font-family:-apple-system,sans-serif;font-size:14px;line-height:1.75">ステップ3：email-styles.phpでメール全体のスタイルを変更する
<?php
// woocommerce/emails/email-styles.php
if ( ! defined( 'ABSPATH' ) ) exit;
// カスタマイザーまたはtheme.jsonの値を使用
$primary_color = '#0073aa';
$text_color = '#1d2327';
$bg_color = '#f0f0f1';
$body_bg = '#ffffff';
?>
#wrapper { background-color: <?php echo esc_attr( $bg_color ); ?>; }
#template_container { border-color: #e0e0e0; }
#template_header { background-color: <?php echo esc_attr( $primary_color ); ?> !important; }
#template_header h1, #template_header h1 a {
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h2 { color: <?php echo esc_attr( $text_color ); ?>; font-size: 18px; }
a { color: <?php echo esc_attr( $primary_color ); ?>; }
.button { background-color: <?php echo esc_attr( $primary_color ); ?> !important; }
#template_footer td {
background-color: <?php echo esc_attr( $text_color ); ?>;
color: #a7aaad;
font-size: 12px;
text-align: center;
padding: 24px;
border-radius: 0 0 8px 8px;
}ステップ4：WC_Emailを継承したカスタムメールを作成する
// includes/class-wc-email-custom-reminder.php: カスタムメールクラス
if ( ! defined( 'ABSPATH' ) ) exit;
class WC_Email_Custom_Reminder extends WC_Email {
public function __construct() {
$this->id = 'custom_reminder';
$this->title = '購入後フォローアップ';
$this->description = '購入から7日後に自動送信されるフォローアップメール';
$this->heading = 'ご購入ありがとうございます';
$this->subject = '{site_title}: ご購入後のご案内';
$this->template_html = 'emails/custom-reminder.php';
$this->template_plain = 'emails/plain/custom-reminder.php';
$this->template_base = plugin_dir_path( __FILE__ ) . '../templates/';
$this->placeholders = [
'{site_title}' => $this->get_blogname(),
'{order_date}' => '',
'{order_number}' => '',
];
parent::__construct();
}
// メールをトリガーするメソッド
public function trigger( int $order_id ): void {
$this->setup_locale();
$order = wc_get_order( $order_id );
if ( ! $order ) {
return;
}
$this->object = $order;
$this->recipient = $order->get_billing_email();
$this->placeholders['{order_date}'] = wc_format_datetime( $order->get_date_created() );
$this->placeholders['{order_number}'] = $order->get_order_number();
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();
}
public function get_content_html(): string {
return wc_get_template_html(
$this->template_html,
[ 'order' => $this->object, 'email' => $this ],
'',
$this->template_base
);
}
public function get_content_plain(): string {
return wc_get_template_html(
$this->template_plain,
[ 'order' => $this->object, 'email' => $this ],
'',
$this->template_base
);
}
}
// メールクラスをWooCommerceに登録
add_filter( 'woocommerce_email_classes', function( array $emails ): array {
$emails['WC_Email_Custom_Reminder'] = new WC_Email_Custom_Reminder();
return $emails;
} );
// WP-Cronで7日後に送信
add_action( 'woocommerce_order_status_completed', function( int $order_id ): void {
wp_schedule_single_event(
time() + ( 7 * DAY_IN_SECONDS ),
'send_custom_reminder_email',
[ $order_id ]
);
} );
add_action( 'send_custom_reminder_email', function( int $order_id ): void {
$mailer = WC()->mailer();
$emails = $mailer->get_emails();
if ( isset( $emails['WC_Email_Custom_Reminder'] ) ) {
$emails['WC_Email_Custom_Reminder']->trigger( $order_id );
}
} );ステップ5：メール送信設定をSMTPに変更する
// functions.php: PHPMailerをSMTP設定に変更
add_action( 'phpmailer_init', function( PHPMailer\PHPMailer\PHPMailer $phpmailer ): void {
$phpmailer->isSMTP();
$phpmailer->Host = defined( 'SMTP_HOST' ) ? SMTP_HOST : 'smtp.example.com';
$phpmailer->SMTPAuth = true;
$phpmailer->Port = defined( 'SMTP_PORT' ) ? SMTP_PORT : 587;
$phpmailer->Username = defined( 'SMTP_USER' ) ? SMTP_USER : '';
$phpmailer->Password = defined( 'SMTP_PASS' ) ? SMTP_PASS : '';
$phpmailer->SMTPSecure = PHPMailer\PHPMailer\PHPMailer::ENCRYPTION_STARTTLS;
$phpmailer->From = get_option( 'admin_email' );
$phpmailer->FromName = get_bloginfo( 'name' );
} );
// wp-config.php に定数を定義（ソースコードにパスワードを書かないため）
// define( 'SMTP_HOST', 'smtp.gmail.com' );
// define( 'SMTP_PORT', 587 );
// define( 'SMTP_USER', 'your@gmail.com' );
// define( 'SMTP_PASS', 'app-password-here' );注意事項
- WooCommerceのテンプレートファイルをコピーして上書きする場合、WooCommerceのバージョンアップ時にテンプレートが古くなる可能性があります。「外観 → WooCommerce → System Status」でテンプレートの更新状況を確認してください。
- HTMLメールは多くのメールクライアントでCSSのサポートが限定的です。インラインCSSを使用し、Flexbox・Gridは避けてテーブルレイアウトを使用してください。
- カスタムメールのテンプレートファイル（
template_html）はplugin_dir_pathで指定したディレクトリに配置してください。
まとめ
WooCommerceメールテンプレートのカスタマイズは「テンプレートをテーマのwoocommerce/emails/にコピー→email-header.phpでロゴ・背景色を変更→email-styles.phpでカラーパレットを変更→WC_Emailを継承したカスタムメールクラスを作成→woocommerce_email_classesフィルターで登録→WP-Cronでトリガー」の流れで整備します。関連記事：WordPressのWooCommerceチェックアウトをカスタマイズする方法、WordPressでメール送信をカスタマイズする方法。