WooCommerce: コーディングせずにメールテンプレートをカスタマイズする方法

公開: 2021-08-05

日常的に、さまざまなインターフェイスでドラッグアンドドロップを使用していることでしょう。たとえば、Gmail アイテムをそのカテゴリにドラッグアンドドロップしたり、WordPress メディアライブラリにファイルをアップロードしたり、電話のホーム画面アプリを整理したりできます。

多くのページビルダープラットフォームがドラッグアンドドロップで Web サイトをデザインするのに役立ちますが、WooCommerce トランザクションメールの作成は依然として複雑な作業と見なされています。

デフォルトでは、WooCommerce のメール設定では、基本的なカラープロファイルとテキストのみを変更できます。さらにカスタマイズするには、テーマコードを変更する必要があります。

あなたが技術者でなく、wp-content/plugins/woocommerce/templates/emails/email-styles.php などのスクリプト間のコードをクラックしたくない場合は、ドラッグアンドドロップメールビルダーフレームワークを使用します。が最善の解決策です。

YayMailのご紹介

YayMail は、WooCommerce 用に展開されたメールビルダープラットフォームです。

使いやすさを第一の目標として開発されましたが、応答性に注意を払いながら、Web ブラウザーと電子メールクライアントの互換性を最大限に高めるようにテストされています。

WordPress.org から無料でダウンロードして使用できます。このオープンソースコードは永久に無料で、すべてのデフォルトの Woo メールテンプレートを完全にカスタマイズするためにプレミアムバージョンにアップグレードする必要はありません。

インストールして有効化したら、 WooCommerce > Email Customizerに移動して、メールエディターにアクセスします。

ドラッグアンドドロップメールビルダーを使用してメールをデザインする

Elementorページビルダーに似たドラッグアンドドロップエディターとして、YayMailにはすべてのオプションと設定が同じ画面に表示されます.

1.上部ツールバー

ここには、利用可能なすべての WooCommerce メールテンプレートの最初のドロップダウンがあります。現在のサイトでアクティブな WooCommerce プラグインに応じて、ここに新しいテンプレートが表示されます。

WooCommerce メンバーシッププラグインを使用している場合は、Membership – Welcome、Membership Reminder、Expired Membership などの追加のメールテンプレートがあります。

2 番目のドロップダウン「サンプル注文」では、実際の注文を選択して、メールの動的フィールドが特定の買い物客にどのように表示されるかを確認できます。

この上部のツールバーには、次のような最もよく使用されるアクションボタンもあります。

ショートコード: ここからショートコードをコピーして、メールデザインの適切なブロックに貼り付けます。
テストメールを送信: ワンクリックで任意のメールアドレスにテストメッセージを送信し、設計したメールが受信トレイでどのように表示されるかを確認します。
空白: すべての電子メールブロックをクリアして、完全に空白のキャンバスを作成し、独自の目的のためにデザインを開始できるようにします。
テンプレートのコピー: 以前に設計されたテンプレートからコピーして、現在のメール本文に貼り付けます。次に、ゼロから始めることを避けるために、いくつかの小さな調整を行うことができます。
テンプレートのリセット: このオプションは、テンプレートを初期状態にリセットします。つまり、デフォルトのメールブロックがまだ残っています。
プレビュー: デスクトップおよびモバイルビューでカスタマイズしたメールをすぐに確認できます。
保存: 編集内容をいつでも保存できます。

2.折りたたみ可能なサイドパネル

YayMail WooCommerce メールカスタマイザーのサイドパネルは、 ElementsとSettingsの 2 つのタブで構成されています。

すべての要素はドラッグ可能で、多数のカスタマイズオプションが含まれています。たとえば、見出しブロックでは、パディング、背景色、テキストの色、フォントファミリー、およびその他のビジュアルオプションを編集できます。

[要素] タブでの変更は選択したブロックにのみ適用されますが、 [設定]での調整はメールテンプレート全体に適用されます。

したがって、よく使用される機能には次のようなものがあります。

メールコンテナの幅
周辺背景色
商品画像とSKUを非表示/表示
メールテンプレートのエクスポート/インポート

3. メールのプレビュー

ブロックベースのメールビルダーなので、任意のブロックを上下に移動したり、ハンドルを使用してドラッグアンドドロップしたりできます。

右隅には、次のようなオプションがあります。

メールブロックを複製する
ブロックを別のテンプレートにコピーする
ブロックを削除

YayMail では、テーマコードファイルを変更したり、WordPress カスタマイザーを使用したりすると、メールのデザインやレイアウトを変更することで無限のカスタマイズを行うことができます.

ケーススタディ: WooCommerce の注文確認メールをカスタマイズする

注文確認メールのカスタマイズを開始するには、WooCommerce > メールカスタマイザー > 表示するメールに移動します。そこから、処理中の注文または完了した注文のいずれかを選択できます。

それ以降は、必要な要素を追加することができます。私が使用するいくつかの要素は次のとおりです。

ロゴ: 透明なロゴ画像をアップロードし、メールコンテナーの幅に合わせてサイズを変更します
ソーシャルアイコン: ソーシャルネットワークアイコンを簡単に選択し、各プラットフォームの URL を追加します
見出し: 見出しのテキスト、見出しのフォント、テキストの色、および背景色を編集します
画像: カスタム画像を追加し、スライドバーを使用して幅を調整します
フッター: マイアカウント、カスタマーサポートなどの Web サイトへのリンクを追加します。

いつでも [プレビュー] ボタンをクリックして、現在のページを離れたり更新したりすることなく、ポップアップでデスクトップ/モバイルの電子メールの外観を確認できます。

その後、プレビューアを簡単に閉じてエディターに戻ることができます。

YayMail の実際の動作を確認するには、このチュートリアルビデオをチェックして、YayMail が仕事の遂行にどのように役立つかを確認してください。

統合

トランザクションメールは、マーケティング目的の優れたコミュニケーション手段です。特に、WooCommerce を通じてサブスクリプションまたはメンバーシップモデルを提供する場合は、E メール通知をカスタマイズして、ブランドプロファイルをオーダーメイドで一貫性のあるものにする必要があります。

ケーススタディ 1: WooCommerce メンバーシッププラグイン

デフォルトでは、これは、サイトのメンバーシップの有効期限が切れたときに視聴者が受け取るものです。件名、見出し、カスタムメッセージのテキストを編集できます。

このメールテンプレートを行動を促すフレーズに変えて、視聴者がメンバーシップパッケージに戻ってくるようにしてみませんか?

この追加コンテンツについては、有効期限が迫ったメンバーシップの電子メールメッセージに複数の列を使用します。

手順は次のとおりです。

2 列のブロックをメールにドラッグアンドドロップします
列幅をパーセンテージで編集します。つまり、70/30 です。
背景色または画像を追加します (オプション)。ここでは背景色として白を使用します
最初の列のテキストブロックを選択します
2 列目の画像ストリップを選択します

これが、メンバーシップメールメッセージ用の複数列のメールテンプレートを実現する方法です。

ケーススタディ 2: WooCommerce フォローアップメールプラグイン

フォローアップなどのカスタムメールテンプレート拡張機能を使用すると、特定の顧客アクションが実行された後に追加のコンテンツを送信できます。

カスタムコンテンツを含むスケジュールされた自動メールを送信できるストアシナリオは非常に多くあります。

このセクションでは、クーポンが使用された後に送信される電子メールテンプレートを作成およびカスタマイズする方法を示します。

まず、新しいフォローアップの追加を開始します。

名前、メールの件名、内容を入力してください
[フォローアップタイプ] メタボックスで、必ず [電子メールの購入] を選択してください。
下のボックスで、「クーポン使用後」としてトリガーを選択します
多くの高度なオプションが付属しているので、自由に探索してください

次に、カスタマイズ手順に進みましょう。

ロゴと見出しを挿入
画像ボックス要素を追加する
コンテンツとソーシャルアイコンを挿入する

ブランドのカラープロファイルのトーンを設定しようとしているので、見出しの背景色と画像ボックス要素のメイン画像にピンクがかった色を使用します。

ブロックの設計は簡単なので、電子メールブロック間のパディングを調整して、常に望んでいたルックアンドフィールを実現するだけです。

簡単な注意:ドキュメントを参照して、現在アクティブな WooCommerce 拡張機能に適した YayMail アドオンを入手してください。

ケーススタディ 3: ロイヤルティリワードプラグイン

WooCommerce のポイントと報酬の拡張機能は、顧客と連絡を取るために 10 件以上の電子メール通知を生成する場合があります。

メールのテンプレートは、使用するプラグインによって異なりますが、基本的にはテキストメッセージのように見えます。ポイント通知設定から、ショートコードを使用して、電子メールの説明ボックスに独自のメッセージを書き込むことができます。

次に、変更を保存して、WooCommerce メールカスタマイザーに進みます。ドロップダウンから [ポイントと特典のメール] を選択して、テンプレートのカスタマイズを開始します。

画像、ボタン、リンクなどのメディア要素を追加して、スパイスを効かせましょう。

この新しいデザインは、送信されるすべてのポイント通知で有効になります。真ん中の通知ブロックが前のステップで書いたメッセージに置き換えられるだけです。

結論

コーディングなしで WooCommerce メールテンプレートをカスタマイズするには、いくつかの方法があります。ソースコードの変更を選択できない場合は、プラグインを使用してメールをカスタマイズしてみてください。

一部のプラグインは、WordPress カスタマイザーを利用して電子メールテンプレートを設計します。ただし、ドラッグアンドドロップメールビルダーを使用すると、高度なオプションを使用してより柔軟なレイアウトを作成できます。

今日、WP リポジトリから YayMail をダウンロードして試してみることができます。すべての WordPress テーマでシームレスに動作するため、完全にリスクなしで使用できます。

WooCommerce: コーディングせずにメール テンプレートをカスタマイズする方法