【3種類】WooCommerce注文メールのカスタマイズ方法

オンラインストアの注文メールは通常、定型的な形になりますが、買い物客との大切なコミュニケーションでもあります。工夫次第ではメールを通じて信頼を築き、ブランドを強化し、結果として買い物客をリピーターに変えるような良い印象を与えることができます。

WooCommerceの場合、デフォルトのメールテンプレートでは、印象付けるようなメールを作成することができません。一般的なデザインと限られた編集オプションは、ブランド独自のアイデンティティを表現するには不十分です。

幸い、WooCommerceの注文メールは複数の方法でカスタマイズ可能です。組み込みの設定、プラグイン、カスタムコード、いずれの方法でもプロフェッショナルな印象を与えるメールを作成し、より良い顧客体験を提供することができます。

今回は、注文メールを基本的なものから優れたメールへと変身させる方法をご紹介します。プラグインで手っ取り早く作業をこなす方法から、カスタムコードで完全制御する方法まで、経験値や要件にあったものを実践してみてください。

基本となるWooCommerceのデフォルトメール設定

WooCommerceには、注文確認、出荷のお知らせ、払い戻しなど、一般的な買い物客とのやり取りを行うためのメールテンプレートがあります。テンプレートにはプレースホルダーを使用し、ユーザー名、商品情報、価格などの注文詳細が動的に挿入されます。この方法で基本的な情報を配信することはできますが、デザインにこだわったり、ブランドに合わせてカスタマイズしたりすることはできません。

このデフォルトのテンプレートは、シンプルなレイアウトに最小限の配色、基本的なコンテンツフォーマットが特徴です。逆に言えば、ほぼすべてのメールクライアントとの互換性が確保されますが、ブランドならではのスタイルを反映したり、パーソナライズされたタッチを柔軟に追加したりしたいものです。

特に競争の激しいEC市場では、WooCommerceのメールをカスタマイズし、競合他社と差をつけることは重要です。コミュニケーションを充実させ、消費者とのつながりを作ることができます。

まずは、WooCommerceの設定パネルからテンプレートをカスタマイズ方法を見ていきます。

設定パネルからWooCommerceの注文メールをカスタマイズする方法

WooCommerceの設定パネルでは、プラグインやカスタムコードなしで注文メールを素早く調整することができます。WordPress管理画面上でアクセスでき、ロゴ、色、基本的なテキストなどのブランディング要素を編集できますが、カスタマイズには限界があります。

設定パネルへのアクセス

WordPress管理画面の「WooCommerce」＞「設定」に移動し、「メール」タブを開きます。「新規注文」「注文のキャンセル」「完了済みの注文」などのさまざまなメールテンプレートが表示されます。

右側にある「管理」をクリックすると、各メールの編集画面に移動することができますが、全体的なメールデザインは、この画面の下にある「メールテンプレート」に移動します。

カスタマイズオプション

「メールテンプレート」セクションでは、デフォルトのテンプレートを編集できます。

メールのベースカラー、背景色、本文の色などの属性をブランドの配色に合わせて調整することができます。

ヘッダー画像やフッターテキストを変更することもでき、ちょっとした変更ですが、よりブランドに適したデザインに近づけることが可能です。

デフォルト設定には限界あり

上記の設定パネルで基本的なブランディングの調整は可能ですが、以下のように、完全に制御できるわけではありません。

• メールのレイアウトは固定されているため、要素を並べ替えたり、セクションを追加したりすることはできない。
• フォントは、ストアで使用しているデフォルトのスタイル以上に調整できない。
• おすすめ商品やアップセルリンクのような動的な要素を含めることはできない。

したがって、高度にブランドに合わせたユーザー体験を提供したい場合には、この方法では不十分です。

より高度なカスタマイズにはプラグインや拡張機能がおすすめ

WooCommerceの設定には限界を感じる場合は、プラグインやWooCommerce拡張機能を使用することで、高度な機能を組み込んだ洗練された注文メールを作成できます。基本的なブランディングだけでなく、独自のレイアウトを作成したり、アップセルリンクやおすすめ商品などの動的要素を含めることも可能です。

なお、使用するプラグインによっては、他のWooCommerce拡張機能やプラグイン、テーマと競合し、機能上の問題を引き起こす可能性があります。

また、WooCommerceやWordPressの更新がプラグインの機能に悪影響を与えることもあり、何か問題が発生した場合、特にこの手のトラブルシューティングに慣れていない場合は、問題のデバッグに時間がかかることがあります。

今回は、WooCommerceの注文メールのカスタマイズにおすすめのプラグインと拡張機能を3つご紹介します。

1. Email Customizer for WooCommerce

Email Customizer for WooCommerceは、メールレイアウトを編集するためのドラッグ＆ドロップエディターを提供します。ロゴ、テキスト、画像、ボタンなどの要素を追加でき、メールデザインの柔軟な制御可能です。

テンプレート、アップセルやパーソナライズメッセージなどのコンテンツの追加、リアルタイムで変更の反映を確認できるプレビューなどが主な機能です。

2. Kadence WooCommerce Email Designer

Kadence WooCommerce Email Designerでは、美しいメールを簡単にデザインできます。WooCommerceとの相性もよく、フォント、色、レイアウトを編集可能です。

メール編集のリアルタイムプレビュー、ヘッダー、フッター、本文の簡単カスタマイズ、別のサイトで使える再利用デザインのインポート/エクスポートなどが特徴です。

3. YITH WooCommerce Email Templates

YITH WooCommerce Email Templatesは、プロのデザイナーによるメールテンプレートのライブラリを提供します。時間をかけずに美しいメールを作成したい場合に理想的です。SNSアイコン、ブランディング、動的コンテンツを追加することもできます。

プラグインでWooCommerceの注文メールをカスタマイズする方法

例として、Kadence WooCommerce Email Designerを使ったカスタマイズ方法をご紹介します。

プラグインのインストールと有効化

WordPress管理画面に移動し、「プラグイン」＞「プラグインを追加」に移動し、「Kadence Email Customizer for WooCommerce」を検索して、インストールと有効化を行います。

メールテンプレートのカスタマイズ

「WooCommerce」＞「Email Customizer」に移動すると、エディターを使ってメールをカスタマイズすることができます。ブランドのロゴを追加したり、色を変更したり、パーソナライズしたテキストを含めたりすることが可能です。またテンプレートを活用する手もあります。

動的要素の追加

リピート購入を促すアップセルリンク、例えば、関連商品を宣伝するボタンを設置することも可能です。

買い物客からの口コミやトラストバッジのようなソーシャルプルーフ（社会的証明）を挿入して、信頼性を高めるのも名案です。

メールの保存とテスト

編集を終えたら、メールデザインを保存し、内蔵のプレビューツールを使って外観を確認します。メールが正しく表示されるか、自分宛にメールを送信することも可能です。カスタマイザーの下部にある「Sent Preview Email（プレビューメールを送信）」を選択します。

プラグインは注文メールのカスタマイズに便利ですが、互換性の問題が頻繁に発生する場合は、カスタムコードを使用する方法の方が、長期的には得策かもしれません。

カスタムコードでWooCommerceの注文メールをカスタマイズする方法

WooCommerceの注文メールを完全に制御したい場合には、カスタムコードを使用しましょう。既製のプラグインとは異なり、コーディングでは、ブランドに完璧にマッチするメールを自由にデザインし、ビジネスに特化した機能を盛り込むことができます。また、互換性の問題や古くなる可能性のあるサードパーティソフトウェアに縛られることもないため、より拡張性に優れた方法です。

カスタムメールを作成するには、WooCommerceの組み込みフックとテンプレートを使用します。これにより、ヘッダーやフッターから、パーソナライズされたおすすめ商品のような動的要素まで、メールのあらゆる側面を編集できます。

高度にカスタマイズされたメール体験は、買い物客に信頼性の高いプロフェッショナルな印象を与えることができます。まずは基本的な例からご紹介します。

基本的なコードベース例

WooCommerceには、メール内容のカスタマイズに使用できるフックやフィルターがあります。例えば、woocommerce_email_headersとwoocommerce_email_footerフィルターにフックすることで、メールのヘッダーやフッターなどを変更することができます。

以下は、注文メールにカスタムフッターを追加する簡単な例です。

add_filter('woocommerce_email_footer_text', 'custom_email_footer_text');
function custom_email_footer_text( $footer_text ) {
    $footer_text = '商品を購入いただき、ありがとうございます！最新のお買い得情報は、<a href="https://yourwebsite.com">.com</a>をご覧ください。';
    return $footer_text;
}

上記のスニペットを子テーマのfunctions.phpに追加すればOKです。

HTMLとCSSを使ってより細かくメールをデザイン

洗練された見栄えを作るには、HTMLとCSSを使用してWooCommerceのメールテンプレートを編集するのがベストです。WooCommerceのメールテンプレートは、テーマのwoocommerce/emailフォルダに保存されています。これらのテンプレートを変更することで、レイアウト、タイポグラフィ、デザインを微調整し、オンラインストアに合ったメールを作成できます。

例えば、注文完了メールにカスタムヘッダーを追加するには、woocommerce/emailsフォルダにあるcustomer-completed-order.phpファイルを編集します。

まず、customer-completed-order.phpファイルをテーマのwoocommerce/emailsフォルダにコピーします。これにより、WooCommerceの更新中に変更が上書きされることがなくなります。

次に、カスタムヘッダーコンテンツをファイルの先頭に追加します。

<div style="background-color: #FFFF44; padding: 20px; text-align: center;">
    <img src="https://yourwebsite.com/logo.png" alt="Your Logo" style="max-width: 150px;">
    <h2 style="font-family: Arial, sans-serif; color: #333;">Your Order is Complete!</h2>
</div>

このコードスニペットは、メールの上部中央にロゴを追加し、ヘッダー部分に黄色の背景色を追加します。

メールクライアントは外部スタイルを除去することが多いため、互換性のためにインラインCSSを使用することが重要です。これにより、あらゆるデバイスやプラットフォームで一貫性のあるデザインを保てます。

HTMLとCSSを使ってメールを作成することで、メールの見た目をきめ細かに制御でき、パーセンテージベースの幅やメディアクエリなどのレスポンシブ要素を使用することで、モバイルフレンドリーなデザインを実現することができます。

動的要素を追加

動的要素を追加し、場合によってはインタラクティブな機能を持たせることで、WooCommerceの注文メールをより魅力的なものにできます。なものにすることができます。WooCommerceのフックとフィルターを使うと、これらの要素をメールテンプレートに直接含めることができ、エンゲージメントを高める機会を簡単に作成可能です。

例1. パーソナライズされたおすすめ商品の追加

WooCommerceのフックを使って、各注文に特化した関連商品やアップセル商品をおすすめします。例えば、買い物カゴ内の商品に基づいて補完的な商品を表示することができます。

まずは、次のようなフックを使用して動的なコンテンツを追加します。

add_action('woocommerce_email_after_order_table', 'add_related_products_to_email', 10, 4);
function add_related_products_to_email( $order, $sent_to_admin, $plain_text, $email ) {
    if ( $email->id === 'customer_completed_order' ) {
        echo '<h3 style="font-family: Arial, sans-serif;">You might also like:</h3>';
        // 注文項目をループ
        foreach ( $order->get_items() as $item ) {
            $product_id = $item->get_product_id();
            // 関連商品を取得
            $related_products = wc_get_related_products( $product_id, 2 ); // 関連する商品2点を取得
            foreach ( $related_products as $related_id ) {
                $related_product = wc_get_product( $related_id );
                if ( $related_product && $related_product->is_visible() ) {
                    echo '<p style="font-family: Arial, sans-serif;">
                        <a href="' . esc_url( $related_product->get_permalink() ) . '">' . esc_html( $related_product->get_name() ) . '</a>
                    </p>';
                }
            }    
        }
    }
}

上記のスニペットは、woocommerce_email_after_order_tableアクションにフックして、注文完了メールの注文情報の下に関連商品を表示します。

例2. 動的なレビューリクエストリンクの追加

メールにパーソナライズされたリンクを埋め込み、買い物客に口コミの投稿を促します。

add_action('woocommerce_email_footer', 'add_review_request_to_email');

function add_review_request_to_email() {
    // レビューリクエストのHTMLを安全に出力
    echo '<p style="text-align: center; font-family: Arial, sans-serif;">
            お時間のある際にぜひご意見をお聞かせください。<a href="' . esc_url('https://yourwebsite.com/review') . '">口コミの投稿はこちら</a>.
          </p>';
}

上記スニペットで、メールフッターにシンプルなCTAを設置し、買い物客にフィードバックの共有を呼びかけることができます。

例3. ソーシャルボタンの埋め込み

ソーシャルボタンを埋め込むことで、メール以外でも買い物客とつながることができます。以下を追加して、メールフッターにクリック可能なアイコンを表示します。

add_action('woocommerce_email_footer', 'add_social_media_links');

function add_social_media_links() {
    // SNSリンクのHTMLを安全に出力
    echo '<div style="text-align: center; margin-top: 20px;">
            <a href="' . esc_url('https://facebook.com/yourbusiness') . '" style="margin-right: 10px;">
                <img src="' . esc_url('https://yourwebsite.com/facebook-icon.png') . '" alt="Facebook" style="width: 20px;">
            </a>
            <a href="' . esc_url('https://instagram.com/yourbusiness') . '">
                <img src="' . esc_url('https://yourwebsite.com/instagram-icon.png') . '" alt="Instagram" style="width: 20px;">
            </a>
          </div>';
}

カスタマイズしたメールのテスト方法

WooCommerceの注文メールを編集したら、複数のデバイスで意図した通りにメールが正しく表示されるかをテストしましょう。徹底したテストプロセスに従うことで、フォーマットエラーやリンク切れ、要素の欠落をユーザーが目にする前に発見することができます。

これには、以下のツールがおすすめです。

• WP Mail Logging：WordPressサイトからすべての送信メールを追跡する人気プラグイン。カスタマイズしたメールが正しく送信されているか、またメール内容を確認できる。
• Preview Emails for WooCommerce：WordPress管理画面でWooCommerceのメールをプレビューでき、注文を行うことなくカスタマイズした内容を素早く確認できる。
• メールクライアントテストツール：LitmusやEmail on Acidのようなプラットフォームでは、異なるクライアント（Gmailや Outlookなど）、デバイス間でメールをプレビューできる。

また、管理画面でメールをプレビューすることも可能です。Preview E-mails for WooCommerceを使って編集したテンプレートのレイアウト、色、メッセージの内容、ロゴ、テキスト、動的コンテンツなど、すべての要素が意図したとおりに表示されることを確認してみてください。

続いて、自分またはテストアカウントにメールを送信し、実際の受信トレイでどのように表示されるかを確認します。リンク切れ、画像の欠落、フォーマットエラーなどの問題がないかをチェックします。

WooCommerceの注文メールを作成する際のベストプラクティス

WooCommerceの注文メールを編集することで、買い物客の体験を向上させることができます。以下のベストプラクティスに従うことで、より効果的でアクセスしやすく、プラットフォーム間で互換性のあるメールデザインを構築可能です。

1. モバイルフレンドリーで読みやすいデザイン

今日、メールの半数以上がモバイル端末で開封されているため、レスポンシブデザインは必須です。インラインCSSを使用してレイアウトを制御し、フォント、ボタン、画像が適切に拡大/縮小されるようにしましょう。読みやすさを優先し、シンプルでクリーンなデザインにこだわり、乱雑さを避けてください。

2. メールクライアントの互換性テスト

GmailやOutlookなど、メールクライアントによってHTMLメールの表示は異なります。様々なプラットフォームやデバイスでメールをテストし、書式や色、反応の不一致を見つけましょう。

3. 明確なCTAを含める

注文メールは、購入を確認する以上の目的を持つことが望ましく、例えば口コミの投稿、関連商品の閲覧、ニュースレターの購読登録などのCTAを活用しましょう。CTAは目立たせ、モバイルでもクリックしやすいようにします。

4. わかりやすい言葉を使い、過剰なフォーマットはNG

メッセージは、わかりやすい会話調で記述しましょう。画像や太字フォント、複雑なレイアウトを多用すると、メッセージが散漫になり、読みにくいだけでなく、読み込み時間も長くなります。

よくあるエラーとトラブルシューティング

WooCommerceの注文メールのカスタマイズは、慎重に計画してもうまくいかない場合があります。メールが送信されない、レイアウトが崩れる、動的コンテンツが更新されないなど、よくある問題のトラブルシューティング方法を知っておくと、効率的に対処できます。

最後によくある問題とその解決方法を3つご紹介します。

1. カスタマイズ後にメールが送信されない

カスタマイズ後にメールが送信されない場合、メールサーバーや設定に問題がある可能性があります。この場合は、以下を行なってください。

• メールサーバーの設定を確認する：サーバー環境がトランザクションメールをサポートしていることを確認してください。Kinstaのようなマネージドサーバーの多くは、WooCommerceに特化したメール配信をサポートしています。
• SMTP設定を確認する：WP Mail SMTPのようなプラグインを使用して、メール送信用の信頼できるSMTPサーバーを設定し、接続をテストして、メールが正しく送信されていることを確認してみてください。

2. テーマの競合または壊れたレイアウト

WordPressのテーマをカスタマイズすると、メールのレイアウトが崩れてしまうことがあります。これを解決するには、以下を行ってください。

• WooCommerceのテンプレートキャッシュをクリアする：「WooCommerce」＞「ステータス」＞「ツール」タブに移動し、「テンプレートキャッシュをクリア」の「クリア」をクリックします。これで、最新のテンプレートが読み込まれるようになります。

• コードの問題をデバッグする：カスタムコードにエラーがないかを確認します。PHPデバッグツールかブラウザの開発者ツールを使って問題を特定してください。
• テーマの上書きを確認する：使用中のテーマがWooCommerceのメールテンプレートを上書きしている場合は、テンプレートが最新で、使用中のWooCommerceのバージョンと互換性があることを確認してみてください。

3. メールの内容が更新されない

メール内容の変更が反映されない場合は、上書きされたテンプレートや不適切なコード配置が関係している可能性があります。これを解決するには、以下を行ってください。

• テーマの上書きされたメールテンプレートを確認する：テーマのwoocommerce/emailsフォルダに移動し、テンプレートが変更内容と一致していることを確認してください。必要に応じて、WooCommerceプラグインディレクトリから新規テンプレートをコピーし、カスタマイズした内容を再度適用します。
• スニペットが正しいファイルにあることを確認する：子テーマのfunctions.phpファイルまたはカスタムプラグインにPHPスニペットを追加し、テーマ更新時の互換性を確保します。

まとめ

WooCommerceの注文メールをカスタマイズすることで、ブランドを強化し、ユーザーの買い物体験を向上することができます。ストアのスタイルを反映することで、信頼を構築し、長期的なリピート購入の促進につながります。

今回は、WooCommerceの注文メールをカスタマイズする方法をいくつかご紹介しました。使いやすさを重視してプラグインを使うか、高度な制御を求めてカスタムコードを使用するか、お好きな方法をお試しください。

デフォルトのテンプレートでオンラインストアの可能性を狭めてしまうのはもったいないことです。時間をかけてメールを最適化し、それが顧客満足度と顧客維持にどのような影響を与えるかを監視してみてください。また、WordPressサイト管理の負担を感じている方は、KinstaのWordPress専用マネージドクラウドサーバーをお試しください。サイトのメンテナンスとパフォーマンスの最適化を一任して、オンラインストアの成長とカスタマイズに集中することができます。