チェックアウトページレイアウトのカスタマイズ

コードを書かずにチェックアウトページを再配置しませんか？ Easy Digital Downloads は、カート、顧客の個人情報、支払い情報、割引コードフィールドといった個々の内部ブロックからチェックアウトページを構築します。各ブロックには独自の Сettings があり、WordPress のブロックエディターからレイアウト全体を再構築できます。

このガイドでは、チェックアウト レイアウトの選択、ブロックの並べ替え、各ブロックの設定の構成の手順を説明します。

---

チェックアウト ブロックのレイアウト パネルを開く

WordPress 管理サイドバーから、ページ に移動し、チェックアウト ページを開きます。どのページかわかりませんか？ WordPress 管理サイドバーから、ダウンロード » 設定 » 支払い に移動して、チェックアウト ページ フィールドに設定されているページを見つけます。

ページがブロック エディターで開かれたら、EDD チェックアウト ブロックを選択して、レイアウト 設定オプションを表示します。

EDD ブロックの全リストを確認してください。

レイアウトの選択

5 つのレイアウトが レイアウト パネルから利用可能です：

• シングルカラム：カート、個人情報、支払い情報、割引フォームを 1 つのカラムに積み重ねます。シンプルな直線的なチェックアウトにはこれを選択してください。
• 2カラム：50/50：チェックアウトを均等に分割します。カートとフォームに同等の視覚的な重みが必要な場合にこれを選択してください。
• 2カラム：70/30：フォーム側に多くのスペースを確保します。支払い情報と個人情報フィールドにより多くのスペースが必要な場合にこれを選択してください。
• 2カラム：80/20：フォーム側にさらに多くのスペースを確保し、カートは狭い概要カラムとして表示されます。
• カート上部、2カラムフォーム：カートを上部に配置し、その下に個人情報と支払い情報を 2 カラムで表示します。

注意：レイアウトを変更すると、チェックアウトブロック内のすべてのブロックが置き換えられます。個々のブロックをカスタマイズする前にレイアウトを選択してください。後で変更すると、そのカスタマイズは元に戻されます。

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

レイアウトが選択されると、チェックアウトの各セクション（カート、個人情報、支払い情報、割引フォーム）が独自のブロックになります。いずれかのブロックを選択すると、移動、複製、または削除するためのオプションを備えた独自のツールバーが表示されます。

ブロックを移動するには、それを選択し、ツールバーの移動コントロールを使用して、新しい位置にドラッグするか、現在のレイアウトに応じて上下左右にシフトします。

ブロックを選択してツールバーから削除を選択することで、ブロックを完全に削除することもできます。これは、ブロックを削除するのではなく設定を使用する割引フォームをオフにするのとは異なります。トラブルシューティングを参照してください。

カートブロックの設定を構成する

カートブロックを選択すると、サイドバーに独自の Сettings が表示されます：

• ヘッダー行を表示：カートの内容の上に「商品名」と「商品価格」のカラムヘッダーを表示します。これはデフォルトでオンになっています。
• サムネイルを表示：各カートアイテムの横に商品サムネイルを表示します。これはデフォルトでオンになっており、サムネイルの幅フィールド（デフォルトは 25px）でサイズを調整できます。
• 数量コントロールを表示：顧客がチェックアウトから直接、購入する商品の数量を変更できるようにします。これはデフォルトでオンになっています。
• 割引フォームを表示：カートの一部として割引コードフィールドを表示します。これはデフォルトでオンになっています。オフにすると、カートブロック自体を削除せずに割引フィールドが非表示になります。

個人情報ブロックの設定を構成する

個人情報ブロックを選択すると、1 つの設定が表示されます：姓名を結合。これをオンにすると、2 つの名前フィールドが 1 つのフィールドにマージされ、チェックアウトフォームが短く感じられるようになります。これはデフォルトでオフになっています。

列のスタイル設定

2列レイアウトを選択すると、各列はチェックアウトブロック自体の設定とは別に、独自のブロックとなり、スタイルタブが追加されます。スタイルタブから、列にあらかじめ用意されたスタイルプリセットを割り当てたり、カスタムの背景色、グラデーション、パディング、角の丸みを設定したりできます。

チェックアウト ページのテスト

レイアウト変更を公開する前に、親の EDD Checkout ブロック自体のサイドバー（カートブロックのサイドバーではない）にあるチェックアウトブロックの ゲストとしてプレビュー トグルを使用すると、顧客が見ているものを正確に表示できます。サイドバーの ダウンロードを選択 検索機能を使用すると、特定の製品がカートに入った状態でチェックアウトをプレビューすることもできます。

この方法でテストするか、実際のテスト購入を完了することで、公開前にレイアウトが正しく表示されていることを確認します。

トラブルシューティング

割引コードフィールドは削除され、ブロックインサーターから元に戻すことはできません。

割引コードフィールドは、再挿入できる個別のブロックではありません。代わりにカートブロックの設定になります。元に戻すには、カートブロックを選択し、設定を開き、割引フォームを表示 を再度オンにします。

これで完了です！チェックアウトページは、WordPressブロックエディターから完全に再配置、カスタマイズ、スタイル設定できるようになりました。より高度なドラッグアンドドロップのデザインアプローチについては、Elementor で EDD チェックアウトをカスタマイズする を参照してください。

---

よくある質問

以下は、EDD の内部ブロックを使用してチェックアウトページレイアウトをカスタマイズすることに関する、最も一般的な質問への回答です。