Easy Digital Downloads (EDD) は、10以上のElementorチェックアウトテンプレートをリリースしました。各テンプレートは、購入者が迷うことなくカートから確認まで進めるように設計されています。
これらのモダンで注意散漫にならないデザインは、信頼バッジや保証など、コンバージョンに焦点を当てた要素をすでに組み込んでいます。既存のチェックアウトページにインポートし、プレースホルダーのテキストを置き換えれば、デザイナーを雇ったりコードに触れたりすることなく、数分で公開できます。
レイアウトも固定されていません。各チェックアウト要素は、それぞれ独立した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 ウィジェットもこのキャンバスに配置されるためです。
セクションの配置を変更するには、ページでセクションを選択し、高度な設定タブを開き、レイアウトの下の順序コントロールを使用します。カスタム コードやテンプレート ファイルの編集は不要です。
4つのウィジェットにわたる100以上のコントロール
各ウィジェットには独自のコントロール セットがあり、4 つすべてを合わせると 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のリソースをさらに入手してください！
