ElementorでのEDDチェックアウトのカスタマイズ

チェックアウトページを、デフォルトのフォームではなく、ストアの他の部分と同じように見せたいと思いませんか？Easy Digital DownloadsはElementorページビルダーと連携するため、コードに触れることなく、チェックアウトのすべての部分を再スタイル設定できます。

このガイドでは、EDDチェックアウトブロック、ElementorのEDDチェックアウトウィジェット、およびページを再スタイル設定および並べ替えるために使用する個々のチェックアウトウィジェットについて説明します。

要件：以下のElementorウィジェットには、Elementorプラグインがインストールおよびアクティブ化されていること、およびElementorエディター » 設定 » 機能画面で「Contain」機能が「Active」に設定されていることが必要です。

---

EDDチェックアウトブロックの設定

チェックアウトページは、Easy Digital Downloadsをアクティブ化すると作成されます。WordPressの「ページ」リストにチェックアウトとして表示され、EDDチェックアウトブロックを使用します。

注：EDDチェックアウトブロックとその設定は、Elementorを使用しているかどうかにかかわらず、すべてのユーザーが利用できます。

チェックアウトページを開くと、ブロックの設定が右側に表示されます。

ゲストとしてのプレビュー設定から始めます。これにより、初めての訪問者とリピーターの両方がどのような体験をするかを確認できます。また、エディター内でチェックアウトページとクレジットカードフォームのリアルタイムプレビューも表示されます。

ダウンロードを選択メニューから製品のいずれかを選択して、カートに何か入れた場合のフォームの外観を確認してください。

ブロック自体の設定で、レイアウトの変更、カートサムネイルサイズの調整、割引フォームの表示/非表示ができます。

Elementorでチェックアウトを編集する

Elementorは独自のEDDチェックアウトウィジェットを構築します。これにより、ブロックだけよりもはるかに深いデザイン制御が可能になります。

Elementorエディターへのアクセス

Elementorプラグインがインストールされ、アクティブ化されると、チェックアウトページにElementorで編集オプションが表示されます。

それを選択すると、Elementorエディターが開きます。

EDDチェックアウトウィジェットの追加

左側の要素パネルで、EDDチェックアウトを検索し、ページにドラッグします。

新しく追加されたウィジェットは、レイアウトを選択するまで空のままです。それが次のステップです。レイアウトを選択すると、チェックアウトフォームのライブプレビューが表示されるため、公開してフロントエンドを確認するのではなく、変更を加えながら確認できます。

このウィジェットは、チェックアウト全体を囲むコンテナです。独自のΡ設定は、レイアウト、スタイル、高度の3つのタブの下にあります。

チェックアウトレイアウトの選択

レイアウトタブで、チェックアウトレイアウトを開きます。シングルカラムと2カラムのデザインをカバーする5つの既製のレイアウトから選択でき、カートと割引フォームの表示/非表示を切り替えるトグルもあります。

注：Elementorは、レイアウトを切り替えるとウィジェットの内容がすべて置き換えられるという警告を表示します。スタイリングに時間を投資する前にレイアウトを選択してください。そうすれば、作業が引き継がれます。

チェックアウトコンテナのスタイリング

スタイルタブは、チェックアウト全体を処理し、背景、背景オーバーレイ、境界線、シェイプ区切り、フォーム要素のセクションがあります。

シェイプディバイダーは知っておく価値があります。なぜなら、チェックアウトの境界線を平らにする代わりに、チェックアウトの上端または下端に装飾的なシェイプを追加するからです。エッジを選択してから、シェイプを選択してください。

個々のチェックアウトウィジェットのカスタマイズ

チェックアウトは、カート、個人情報、支払い情報、割引フォームの4つの個別のウィジェットで構成されています。それぞれが独自の Сеттингスを持っており、これによりチェックアウトの一部を他の部分を邪魔することなくスタイル設定できます。

これら4つは要素パネルには表示されません。手動で追加するものではないからです。EDDチェックアウトウィジェットの一部として表示されます。 Сеттингスにアクセスするには、ページ上の目的の部分を直接選択してください。

カートウィジェット

コンテンツタブでは、カートにカートヘッダートグル、カートサムネイルトグル、およびこれらのサムネイルのサイズスライダーがあります。

そのスタイルタブは4つの中で最も詳細です。 Сontrolsはカートヘッダー、カートアイテム、フッター行にグループ化されているため、上の明細項目とは異なる合計をスタイル設定できます。

個人情報ウィジェット

このウィジェットは、名前とメールフィールド、およびログインと登録リンクをカバーしています。そのコンテンツタブには、ゲストとしてプレビュー、アカウントの配置、および最初の名前と最後の名前を1行に表示する単一行名オプションが含まれています。

支払い情報ウィジェット

これは支払いエリアを担当します。そのスタイルタブは、購入ボタン、ゲートウェイセレクター、支払い方法、およびカード詳細に Сontrolsをグループ化しているため、顧客がクリックするボタンを独自にスタイル設定できます。

割引フォームウィジェット

割引フォームには、単一のコンテンツ設定である割引フィールドを表示と、トグルリンク、フィールド自体、および適用ボタンをカバーする詳細なスタイルタブがあります。

チェックアウトの並べ替え

チェックアウトの各部分は独自のウィジェットであるため、表示順序を変更できます。ウィジェットを選択し、高度な設定タブを開いてから、レイアウトを開きます。順序 Сontrolは、その要素をコンテナの先頭または末尾に移動させ、カスタムオプションで正確な位置を設定できます。

目的の部分を選択する最も簡単な方法は、Elementorの構造パネルです。これはページ上のすべての要素を一覧表示します。そこで1つを選択すると、キャンバス上でハイライトされ、 Сеттингスが読み込まれます。

結果に満足したら、公開の横にある矢印を選択し、下書き保存、テンプレートとして保存、またはページを表示を選択します。公開自体を選択して、変更をライブにします。

トラブルシューティング

EDDチェックアウトブロックまたは上記で説明したウィジェット設定が表示されない場合は、いくつかのオプションを試してください。

最初のステップは、ElementorのFlexboxコンテナ実験が有効になっているかどうかを確認することです。Elementor » Editor » Settings » Features に移動し、Container オプションがActive に設定されていることを確認してください。

また、Easy Digital Downloadsプラグインが最新であることを確認してください。 Dashboard » Updates でアップデートを確認してください。

個々のチェックアウトウィジェットとレイアウトピッカーには、Easy Digital Downloads 3.7.0 以降が必要です。Elementor独自のウィジェットには、Elementor 3.35.0 以降が必要です。そうでない場合、EDD Checkout (Legacy) という名前のウィジェットが表示されることがあります。これは引き続き機能し、設定は上記の4つに分割されるのではなく、1つのウィジェットにまとめられています。現在のEDD Checkoutウィジェットをページに追加して、新しい設定に移行してください。

Elementor独自のコントロールに関する具体的な情報については、Elementorウィジェットナレッジベースで詳細を確認してください。

よくある質問：ElementorでのEDDチェックアウトのカスタマイズ

ElementorでEDDチェックアウトをカスタマイズすることに関する一般的な質問への回答を以下に示します。