Easy Digital Downloads (EDD) は、Elementor のチェックアウトテンプレートを10個以上リリースしました。各テンプレートは、購入者が迷うことなくカートから確認まで進めるように設計されています。
これらのモダンで注意散漫にならないデザインは、信頼バッジや保証など、コンバージョンに焦点を当てた要素がすでに組み込まれています。既存のチェックアウトページにインポートし、プレースホルダーの文言を置き換えるだけで、デザイナーを雇ったりコードに触れたりすることなく、数分で公開できます。
レイアウトも固定されていません。各チェックアウト要素は、現在では独自のElementor ウィジェットになっており、それらの間に100以上のネイティブElementor コントロールがあるため、色、タイポグラフィ、アイコン、背景形状に至るまで、各セクションの外観は自由に設定できます。カートを支払いフォームの上に配置したり、不要なものを削除したり、独自のコンテンツを間に挿入したりするなど、自由に並べ替えてください。
これは私たちがリリースした中でも最大級のアップデートの1つであり、現在利用可能です。🎉 以下では、テンプレートライブラリ、インポート方法、元に戻す方法、そして新しいElementorコントロールで変更できるすべてのことについて説明します。
EDD向けElementorチェックアウトテンプレート10選以上
EDDチェックアウトテンプレートライブラリには、10個以上の完全なチェックアウトページデザインがあり、それぞれ既存のチェックアウトページにインポートできます。
各テンプレートは、支払いフォームの周りにサポートコピー、信頼要素、移動可能なチェックアウトピースが配置された、完全なチェックアウトを自動的に配置します。
スタイルは、シングルカラムでミニマルなものから、カート概要を支払いフォームの横に配置する2カラムレイアウトまであり、ストアに合った外観を選択できます。
デジタル製品とサービス向けに設計
これらは、出荷フィールドが非表示になっている一般的なeコマーステンプレートではありません。デジタルサービスと製品を販売するストアのために構築されたものであり、ページは出荷関連の情報や物理的な在庫を中心に構築されていません。
各デザインは、注意散漫にならない信頼構築から始まります。クリーンでモダンなレイアウトで、購入者が購入完了に集中できるようにします。
最適なものを素早く見つける
2つのコントロールがグリッドを絞り込みます。検索フィールドはテンプレートの説明を確認します。たとえば、「保証」を検索すると、保証コピーが含まれるすべてのテンプレートが返されます。
カテゴリメニューは、信頼、進捗ステップ、2カラムなど、テンプレートがリードするものでフィルタリングします。
まずページ全体をプレビューする
各カードにはプレビューボタンがあり、新しいタブで完全なデザインを開きます。サムネイルではなく、ページ全体のエンドツーエンドを確認できます。
開いたら、上部でデスクトップ、タブレット、モバイルを切り替えて、レイアウトが電話でどのように処理されるかを確認します。プレビューではサンプル製品とプレースホルダーの文言が使用されるため、ストアのコンテンツではなく、配置を確認できます。
すべてのElementorチェックアウトテンプレートは出発点です
テンプレートをインポートし、プレースホルダーの文言を置き換えるだけで、完成したチェックアウトページができます。多くのストアはそこで止まるでしょう。
しかし、そのページ上のすべてが移動可能なウィジェットであるため、テンプレートは単なる出発点にすぎません。最も近いものをインポートし、それをあなた自身のものになるまで並べ替えてください。その上のすべてのセクションが移動し、その方法はさらに下に詳しく説明します。
Elementorチェックアウトテンプレートのインポート方法
インポートは数回のクリックと数秒で完了します。チェックアウトテンプレートライブラリにアクセスするには2つの方法があります。
チェックアウトテンプレートはEasy Digital Downloads Proの機能です。
開始する前に、すべてのEDDユーザーがテンプレートライブラリを開き、任意のテンプレートをプレビューできることに注意してください。
ただし、インポートするには、アクティブなライセンスを持つEasy Digital Downloads Proパス、バージョン3.35.0以降の無料のElementorプラグイン、およびElementorのFlexboxコンテナ実験機能がオンになっている必要があります。
ステップ1：チェックアウトテンプレートライブラリを開く
WordPress管理サイドバーから、ダウンロード » 設定 » 一般 » ページに移動します。
プライマリチェックアウトページの行を見つけ、その下にあるテンプレートをブラウズをクリックします。
すでにElementorでチェックアウトページを編集している場合は、離れる必要はありません。代わりに、Elementorエディターの左上隅にあるEDDチェックアウトテンプレートをクリックしてください。
上記の方法のいずれかによって、EDDチェックアウトテンプレートライブラリが開かれ、チェックアウトページテンプレートを閲覧、プレビュー、インポートできます。
ステップ2：テンプレートを選択してプレビューする
グリッドを閲覧し、検索フィールドまたはカテゴリメニューを使用して絞り込みます。
検討中の任意のテンプレートでプレビューをクリックし、決定する前にデスクトップ、タブレット、モバイルで確認してください。
ステップ3：テンプレートをインポートする
選択したカードで、インポートを選択します。
インポートは現在のチェックアウトページの内容を置き換えるため、EDDは最初に確認を求めます。既存のコンテンツは、何も変更される前にWordPressの改訂として保存されるため、失われることはありません。続行するには、テンプレートをインポートをクリックします。
ステップ4：編集または元に戻す
インポートは数秒で完了し、3つのオプションが表示されます。
- ページを編集をクリックすると、新しいデザインがElementorで開き、すぐに編集を開始できます。
- 元のチェックアウトを復元をクリックすると、以前のチェックアウトページが元どおりに戻ります。
- 閉じるをクリックすると、テンプレートが保持され、設定に戻ります。
ステップ5：あなただけのものにする
テンプレートには、支払いフォームの周りのセクションにサンプル見出しとプレースホルダーの文言が含まれています。Elementorでチェックアウトページを開き（WordPressチェックアウトページエディターでElementorで編集を選択）、テキスト要素をクリックして、独自のテキストを入力します。
その間に、セクションを希望の順序に配置します。あなたの保証、あなたのサポート時間、あなたの製品名、あなたの配置。
気が変わりましたか？元のチェックアウトを復元する
ライブチェックアウトページのデザインを変更するのはリスクが高いと感じるかもしれません。このリリースでは、ワンクリックで元に戻すことができます。
Easy Digital Downloads は、何かをインポートする前に、以前のチェックアウトコンテンツをWordPressの改訂として保存します。確認パネルには、元のチェックアウトを復元ボタンも含まれています。
それをクリックし、次にはい、復元しますをクリックして確認します。チェックアウトページは、インポート直前の状態に正確に戻ります。
これは元に戻す機能であり、工場出荷時のリセットではありません。ページを空白のデフォルトに消去するのではなく、直前のインポートを元に戻すため、実際のストアでテンプレートを試して、数秒で元に戻すことができます。
ライブラリを既に閉じた場合でも、WordPressのページエディターの改訂履歴リストから以前のバージョンを復元できます。
チェックアウトページは移動可能なパーツで構成されるようになりました
テンプレートは完成したページを提供します。さらに深く掘り下げたい場合は、これがその下にあるものです。
Elementorでは、Easy Digital Downloadsのチェックアウトは4つの個別のウィジェットから構築されています。各部分はキャンバス上の独自の要素であるため、ページ上の配置はあなたが決定できます：
- 個人情報：顧客の名前とメールアドレスのフィールド
- 支払い情報：ゲートウェイの支払いフォーム
- カート：購入中の商品と合計金額
- 割引フォーム：割引コードフィールド
それぞれをページ上で選択して個別にスタイル設定し、それぞれが独自の配置設定を持っています。
それが実際にできること
購入者がカードに手を伸ばす前に、購入内容を確認できるように、カートを支払いフォームの上に配置します。
割引フィールドを一番下に移動するか、コードが顧客に購入前にコードを探すように促している場合は完全に削除します。保証、サポートメモ、顧客レビュー、またはその他のElementorウィジェットを2つのセクションの間に配置します。ストックのElementorウィジェットもこのキャンバスに配置されるためです。
セクションの配置を変更するには、ページ上で選択し、詳細タブを開き、レイアウトの下の順序コントロールを使用します。カスタムコードや編集するテンプレートファイルは必要ありません。
カスタムチェックアウトデザインのための100以上のコントロール
各ウィジェットには独自のコントロールセットがあり、それらを合わせると100以上のネイティブElementorコントロールになります。最も便利なものをいくつか紹介します。
- カートの内容：商品サムネイルを表示または非表示にする、セクションヘッダーを表示または非表示にする
- 割引フィールド：表示、非表示、または再スタイル設定する
- アイコンリスト：1つの固定アイコンではなく、完全なアイコンセットとライブラリからプルする
- 背景形状：セクションの後ろにある装飾的な形状を追加または削除する
色、間隔、タイポグラフィ、サイズ設定はすべて、Elementorで期待どおりに動作します。
WordPressのチェックアウトテンプレートに関するFAQ
チェックアウトセクションは好きな順序に並べ替えられますか？
はい。個人情報、支払い情報、カート、割引フォームはそれぞれ独自のElementorウィジェットであるため、それぞれの配置はあなたが設定できます。移動したいセクションを選択し、レイアウトの下の詳細タブにある順序コントロールを使用します。また、見出し、アイコン、テキスト、またはその他のElementorウィジェットをそれらの間に挿入することもできます。
チェックアウトテンプレートを使用するにはElementor Proが必要ですか？
いいえ。無料のElementorプラグインで十分です。バージョン3.35.0以降であれば、チェックアウトテンプレートのインポートや編集にElementorのサブスクリプションは必要ありません。ただし、プラグイン設定でFlexboxコンテナの実験機能がオンになっていることを確認する必要があります。
Easy Digital Downloadsの無料バージョンでチェックアウトテンプレートを使用できますか？
はい。すべてのEDDユーザーがライブラリを開き、すべてのテンプレートを閲覧し、いずれかをフルでプレビューできます。テンプレートのインポートには、アクティブなライセンスを持つEDD Proパスが必要です。有料パスであればどれでも機能するため、特定のティアは必要ありません。
テンプレートをインポートすると、現在のチェックアウトページが削除されますか？
いいえ。インポートするとチェックアウトページのコンテンツが置き換えられますが、以前のバージョンはWordPressの改訂履歴として保存されます。確認パネルには、すぐに気が変わった場合に備えて「元のチェックアウトを復元」ボタンも用意されています。また、チェックアウトページで改訂履歴が無効になっている場合、バックアップなしで続行するのではなく、インポートはまったく実行されません。
チェックアウトの並べ替えは支払いゲートウェイを壊しますか？
いいえ。支払いフォームは、ページ上のどこに配置しても完全に機能します。移動したり、その周りにコンテンツを配置したりしても、同じように機能し続けます。
割引フィールドのような、不要な部分を削除できますか？
はい。支払いゲートウェイが収集する必要があるもの以外は、ページ上のすべての要素を変更または削除できます。これには、割引コードフィールド、カートサムネイル、セクションヘッダー、信頼バッジ、背景シェイプなどが含まれます。
Elementorをまったく使用しない場合はどうなりますか？
WordPressダッシュボードから、ライブラリ内のすべてのテンプレートを閲覧およびプレビューできます。チェックアウトページにインポートするにはElementorのインストールが必要ですが、無料バージョンで十分です。
代わりにブロックで構築する場合、EDDチェックアウトブロックにはWordPressエディターに独自の新しいレイアウトオプションがあるため、どちらの方法でもチェックアウトは今日と同じように機能し続けます。注：レイアウトを切り替えると、すべての内部ブロックが置き換えられます。
あなたが本当に望んでいたチェックアウトページを作成する
短いバージョン：チェックアウトページのすべての部分を配置できます。
自分でデザインしたい場合は、すべてのパーツが揃っており、すべて移動できます。空のキャンバスから始めずに、既製のテンプレートのいずれかをインポートして文言を変更することもできます。どちらの場合でも、チェックアウトの構造はあなたが決定することです。
始める準備はできましたか？チェックアウトテンプレートの使用方法のドキュメントでは、最初のテンプレートのインポート方法をステップバイステップで説明しています。変更履歴では、このリリースに関するすべての詳細をカバーしています。
まだEasy Digital Downloads Proパスをお持ちでないですか？テンプレートライブラリのロックを解除し、コンバージョンを高めるチェックアウトページの構築を開始するために、今日入手してください。
📣追伸：ニュースレターを購読し、Facebook、Twitter/X、またはLinkedInでフォローして、WordPressのリソースをさらに入手してください！
