WooCommerceメールをカスタマイズして送信する前にプレビューする方法

公開: 2022-04-15

WooCommerceのメールをカスタマイズする方法に苦労していますか?

WooCommerceは、新規注文、処理済み注文、新規アカウントなど、10を超えるアクションの自動トランザクションメールをすでに提供しています。 ただし、これらの電子メールをカスタマイズして、独自の電子メールにすることをお勧めします。

このステップバイステップのチュートリアルでは、WooCommerceの組み込み設定を使用して、WooCommerceメールをカスタマイズする方法と、ストアのメールをさらに制御するために使用できる無料または有料のプラグインについて学習します。

目次:

なぜWooCommerceのメールをカスタマイズする必要があるのですか?

  • デフォルトのWooCommerceパープルから、ブランドにより適した色に変更します。
  • メールテンプレートにパーソナライズとブランドの声を追加します。
  • 「差出人」名や「差出人」アドレスなどの設定を変更します。
  • ロゴ、ヘッダー画像、アニメーションGIFなどのメディア要素を追加します。
  • 操作に合わない自動メッセージの一部を非アクティブ化するため。
  • サポートページ、アップセル、またはプロモーションにリンクするため。
  • HTMLとテキストの電子メールタイプを切り替えるため。
  • 自動化のために電子メールをオンにする前に、電子メールがどのように見えるかをプレビューします。

WooCommerceのメールをカスタマイズする方法

WooCommerceに組み込まれている設定だけで、次のようなWooCommerceメールの複数の部分をカスタマイズできます。

  • メール送信者オプション️
  • 一般的なメールのテーマ
  • 特定の電子メールコンテンツ

これらの組み込み設定をカスタマイズする方法を以下に示します。 その後、必要に応じてさらに柔軟性を高めるWooCommerceメールカスタマイズプラグインも共有します。

ステップ1:WooCommerceのメール設定に移動します

WordPressダッシュボードで、 [WooCommerce]>[設定]>[メール]に移動します。 ここには、 Eメール通知の見出しと、WooCommerceがすでに設定しているデフォルトの通知Eメールのリストが表示されます。

WooCommerceメールをカスタマイズするための[メール]タブ

ステップ2:メール送信者のオプションとテンプレートをカスタマイズする

電子メール通知のリストをスクロールして、 「電子メール送信者オプション」というセクションを見つけます。

2つのフィールドが表示されます。

  • 「差出人」の名前:顧客がメールを受信したときに表示される名前。会社名に固執するか、ブランド戦略の一部である場合は実在の人物である可能性があります。
  • 「差出人」アドレス:ユーザーが自動メールに返信する場合に連絡できる「差出人」メールアドレス。

必要に応じてこれらのフィールドを変更します。

メール送信者オプション

[メールテンプレート]セクションで、次のような要素のカスタマイズを開始できます。

  • ヘッダー画像
  • フッターテキスト
  • ベースカラー
  • ボディの背景色
  • 本文の色

メールにカスタムヘッダー画像を追加する場合は、画像のURLを[ヘッダー画像]フィールドに貼り付けます。 WordPressメディアライブラリで画像をホストし、そこから画像のURLを取得できます。

また、フッターから「BuiltwithWooCommerce」というテキストを削除することをお勧めします。 フッターに他に必要なものを追加できます。

画像とテキストでWooCommerceのメールをカスタマイズする

[メールテンプレート]領域のさらに下には、一般的なWooCommerceメールテンプレートの色設定があります。 前述のように、WooCommerceはデフォルトの紫をベースカラーとして自動的に追加しますが、これはオンラインストアを運営するときに必要なものではありません

ベースカラーとしてブランドに対応する色を選択し、必要に応じて他のカラーフィールドを変更することを検討してください。

完了したら、[変更を保存]をクリックします。

WooCommerceのメールを色でカスタマイズする

ステップ3:特定のWooCommerceメールをカスタマイズする

新規注文の電子メールから完了した注文の電子メールまで、WooCommerceは、サイト管理者と顧客に自動的に送信されるプリセットテンプレートを提供して、すべての人に注文に関する情報を提供します。 ただし、これらの電子メールの一部をカスタマイズして、独自のコンテンツを含め、不要なWooCommerceのデフォルトを削除することをお勧めします。

編集するメールの横にある[管理]をクリックして、これらの個別のメールのカスタマイズを完了します。 「注文の処理」「注文の完了」の電子メールから始めることは悪い考えではありません。これらは顧客によって最も一般的に表示されるためです。

WooCommerceメールをカスタマイズするための管理ボタン

ニーズに基づいて、次のフィールドをウォークスルーします。

  • 有効/無効
  • 主題
  • メールの見出し
  • 追加コンテンツ

WooCommerceメールをすべて有効にしておくことをお勧めします。ただし、それらの1つを必要としない独自の状況がある場合、またはトランザクションメールに別のプラグインを使用する場合を除きます。

件名メールの見出し追加コンテンツなどのフィールドは、メールコンテンツ全体を決定するため、必要に応じて調整します。

通知を有効にする

「?」をクリックしますコンテンツフィールドに挿入できる動的プレースホルダーを確認するためのアイコン。 たとえば、プレースホルダーを使用して、WooCommerceに各メールのWebサイトへのリンクを入力させることができます。

WooCommerceのメールをカスタマイズするための件名の見出しとコンテンツ

ステップ4:HTMLまたはプレーンテキストの電子メールにする

[メールの種類]フィールドをクリックして、オプションを確認します。 次のいずれかを選択してください。

  • プレーンテキスト:画像や書式設定のないメール
  • HTML:画像、表、書式設定などの豊富なコンテンツを含むメール
  • マルチパート:一部のクライアントはHTMLメールをサポートしていないため、これはユーザーのメールクライアントに基づいてプレーンテキストとHTMLを動的に切り替えます。

ステップ5:HTMLテンプレートの編集を検討する

ページの一番下に、 「HTMLテンプレート」というセクションがあります。 WooCommerceには、メール用のドラッグアンドドロップエディタはありませんが、各メールのHTMLコードをカスタマイズできます。

[テンプレートの表示]ボタンをクリックして、そのコードを表示します。

テンプレートを表示してWooCommerceメールをカスタマイズする

WooCommerceはデフォルトのHTMLテンプレートをロックするため、何も編集できません。 ただし、[ファイルをテーマにコピー]ボタンをクリックして、テンプレートを上書きおよび編集できます。

ファイルをテーマにコピー

その後、カーソルをテキストエディタに置いて、変更を加えることができます。 HTMLに精通している場合にのみ、このセクションを使用することをお勧めします。

HTMLでWooCommerceのメールをカスタマイズする

このコードを直接編集することに抵抗がある場合は、WordPress開発者を雇うことをお勧めします。 または、次のセクションで共有するWooCommerceメールプラグインの1つを試すことができます。

そして、それがWooCommerceのメールをカスタマイズする方法です! [変更を保存]ボタンをクリックして、プロセスを終了します。

保存ボタン

WooCommerceのメールをプレビューする方法

トランザクションメールを顧客に送信する前にプレビューする必要があります。 このようにして、スペルミス、変更が必要なWooCommerceブランド、およびプロモーションやアップセルの機会を確認できます。

WooCommerceのメールをプレビューする方法は次のとおりです。

ステップ1:一般的なメールテンプレートの視覚的なプレビューを表示する

[WooCommerce]>[設定]>[メール]で、[メールテンプレート]セクションを見つけて、 [ここをクリックしてメールテンプレートをプレビューします]というリンクをクリックします。

プレビューリンク

これにより、指定した一般的な電子メール設定の電子メールを表示する新しいブラウザウィンドウが開きます。 これらすべてを変更すると、新しい色、ヘッダー画像、編集されたフッターが表示されます。 テンプレートプレビューのコンテンツは一般的なままであることに注意してください。

woocommerceメールビジュアルプレビュー

ステップ2:テストトランザクションを実行して、動的コンテンツを含む個々の電子メールを表示します

顧客に送信される実際の電子メールを見たいと思うかもしれませんが、WooCommerceにはそれらの視覚的なプレビューを表示する機能がありません。 代わりに、テストトランザクションを実行して、自分の受信トレイへの電子メールをトリガーする必要があります。

方法は次のとおりです。

  1. WooCommercePaymentsとStripe支払い方法が有効になっていることを確認してください。
  2. カートに商品を追加し、顧客であるかのように情報を入力します。
  3. [メール]フィールドに、メールアドレスを追加します。
  4. クレジットカードフィールドで、Stripeテストカードの1つを使用して支払いを処理します。
  5. チェックアウトを終了します。

テストトランザクションでは、注文処理の電子メールが送信されます。これにより、電子メールが顧客にどのように表示されるかを確認できます。 動的タグが正しく表示され、すべてのブランディングと挿入されたテキストが正しく表示されることを確認します。

メールをご注文いただきありがとうございます

他のメールをトリガーするには、 WooCommerce> Ordersに移動し、 Statusフィールドを別のものに調整します。 例として、WooCommerceからの完了した注文の電子メールをトリガーするためにそれを完了に切り替えることができます。 変更を保存するには、必ず[更新]ボタンをクリックしてください。

ステータスを変更して新しいプレビューを表示する

次に、確認のために受信トレイに送信します。

woocommerceからの注文確認メール

プロセスを簡素化するために、WooCommerceEmailTestのようなプラグインを検討することができます。

WooCommerceメールのカスタマイズに役立つプラグイン

いくつかのプラグインは、高度なWooCommerce電子メールカスタマイズツールを提供し、WooCommerceの現在の機能を拡張するか、よりユーザーフレンドリーな(通常はドラッグアンドドロップ)エクスペリエンスのためにそれらを完全にオーバーライドします。

考慮すべきWooCommerceカスタマイザープラグインは次のとおりです。

また、WooCommerceのトランザクションメールをOmnisend、MailPoet、Sendinblueなどのメールマーケティングサービスで上書きすることもできます。これらのサービスはすべて、eコマースの自動化と放棄されたカートの回復などの追加オプションを提供します。

WooCommerceのメールを今すぐカスタマイズ

この記事では、以下について説明しました。

  • WooCommerceのメールをカスタマイズする理由。
  • WooCommerceメールの全体的な設定とデザインをカスタマイズする方法。
  • 特定のトランザクションメールをカスタマイズする方法。
  • 経験がある場合に電子メールHTMLを制御する方法。
  • ドラッグアンドドロップやビジュアルツールなど、WooCommerceメールに機能を追加するためのプラグイン。

ほとんどの駆け出しのeコマースストアは、基本的なWooCommerceメールのカスタマイズを回避できますが、最終的には、上記のプラグインやメールマーケティングソフトウェアのようなプレミアムメールエディターにお金を払うことをお勧めします。

ストアのトランザクションEメールを理解したら、WooCommerce Eメールマーケティングのガイドを読んで、マーケティングEメールを釘付けにすることもできます。

WooCommerceのメールをカスタマイズする方法について説明が必要な場合、またはメールを編集している他のユーザーとヒントを共有したい場合は、コメントにメモを残してください。

無料ガイド

スピードアップするための5つの重要なヒント
あなたのWordPressサイト

読み込み時間を50〜80%短縮します
簡単なヒントに従うだけです。