このドキュメントでは、Easy Digital DownloadsとElementorページビルダープラグインを統合して、オンラインストア向けの魅力的でカスタマイズ可能なEDDチェックアウトページを作成する方法を説明します。
この統合により、EDDチェックアウトブロックとElementorのドラッグアンドドロップエディターおよび専用EDDチェックアウトウィジェットで利用可能な設定の両方を使用して、強化されたスタイリングオプションとレイアウトの柔軟性を実現できます。
EDDチェックアウトブロック
EDDプラグインをアクティブ化すると、チェックアウトページが自動的に作成されます。ページ » チェックアウトページの下にあります。EDDチェックアウトブロックを使用します。
注:EDDチェックアウトブロックとその設定は、Elementorが使用されているかどうかにかかわらず、すべてのユーザーが利用できます。
チェックアウトページに移動すると、ブロックの設定は右側に表示されます。
プレビュー
まず、ゲストとしてのプレビュー設定を切り替えるオプションがあります。これにより、初めての訪問者とリピーターの両方にとってエクスペリエンスが最適であることを確認できます。

これにより、エディタ内でチェックアウトページとクレジットカードフォームのリアルタイムプレビューが表示されます。ドロップダウンメニューのダウンロードを選択からダウンロードの1つを選択すると、カートに商品がある場合のチェックアウトフォームの外観のリアルタイムプレビューを確認できます。
設定
- レイアウトの変更
- カートサムネイルサイズの調整
- 割引フォームの表示/非表示
Elementorでチェックアウトを編集
Elementorは独自のEDDチェックアウトウィジェットを構築しました。これにより、ユーザーはElementor内で直接、より詳細なデザインコントロールを利用できます。
Elementorエディタへのアクセス
WordPressサイトにElementorページビルダープラグインがインストールされ、アクティブ化されている場合、EDDチェックアウトページにはElementorで編集するオプションが表示されます。

それをクリックすると、Elementorエディタインターフェイスに移動します。

チェックアウトウィジェットの追加と設定
画面の左側にある要素パネルで、EDDチェックアウトを検索します。それをページにドラッグアンドドロップします。

ウィジェットはチェックアウトフォームのリアルタイムプレビューを提供します。チェックアウトページの各側面をカスタマイズするために、左側のパネルで要素設定を構成します。
EDDチェックアウトには3つの主要な設定タブがあります。

コンテンツ
これらの設定は、ネイティブEDDチェックアウトブロックの設定と似ています。
一般
- カートアイテム
- アカウント配置
- レイアウト
カート
- ヘッダー
- サムネイルとサムネイルサイズ
- 割引フォーム
セクションタイトル
表示/非表示を切り替えることができます:
- 個人情報
- 請求先情報
- 支払い方法
- カード情報
スタイル

「スタイル」タブでは、チェックアウトウィジェットのスタイリングをカスタマイズできます。これには、タイポグラフィやテキスト/背景色、半径、パディングなどが含まれます。
- 一般
- 購入ボタン
- カート
- フォームセクション
- フォーム要素
- 個人情報
- 請求先情報
- 支払い方法
- カード詳細

高度な設定
このタブでは、チェックアウトページの見た目や外観をカスタマイズするための高度なオプションを見つけることができます。複数のアコーディオンがあり、それぞれに設定可能な独自のサブセットがあります。セクションには以下が含まれます:
- レイアウト
- モーションエフェクト
- 変形
- 背景
- 境界線
- マスク
- レスポンシブ
- 属性
- カスタムCSS
完了したら、画面右上隅の下向き矢印をクリックできます。次に、下書き保存、テンプレート保存、またはページ表示を選択します。公開を選択して変更をライブにすることもできます。
特定のウィジェット設定について質問がある場合は、Elementorウィジェットナレッジベースを自由に参照してください。
トラブルシューティング
上記のEDDチェックアウトブロックまたはウィジェットオプションが表示されない場合は、Easy Digital Downloadsプラグインを更新する必要がある場合があります。
WordPress管理エリアのダッシュボード » アップデートに移動してアップデートを確認してください。バージョン3.5.3以降を使用していることを確認してください。
