Checkout Form-Billing は、ShopEngine の包括的なチェックアウト ページ ウィジェットです。このウィジェットを使用すると、請求チェックアウト ページを無制限にカスタマイズできます。
フォーム内に存在するさまざまな要素のフォント、色、背景、配置などを変更および調整できます。ウィジェットは非常に包括的であるため、さまざまな組み合わせを試すことで目的のフォームの外観を得ることができます。
チェックアウトフォームの使用方法 - 請求? #
チェックアウト請求フォームの作成には、2 つの主要な手順が含まれます。 1. テンプレートを作成し、2. Elementor で請求書フォームをデザインします。
テンプレートを作成する #
まず、WordPress ダッシュボードにログインし、次のリンクに移動します。 ShopEngine > ビルダー テンプレート.
次に、「」をクリックします。新しく追加する右上隅にある「」ボタンをクリックします。
![チェックアウトフォーム請求用の新しいテンプレートを追加](https://wpmet.com/wp-content/uploads/2021/10/create-template-checkout-billing-sort-.png)
その直後、テンプレート設定用のポップアップウィンドウが表示されます。 [テンプレート設定] ウィンドウで:
- テンプレートを入力してください 名前.
- テンプレートを選択してください タイプ: チェックアウト。
- 活性化 テンプレート。
- を選択してください サンプルデザイン または、ゼロからデザインを開始します。
- 最後に「」を押します。変更内容を保存" ボタン。
![チェックアウトページのテンプレート設定](https://wpmet.com/wp-content/uploads/2021/10/create-template-checkout-billing-sort-1-1.png)
テンプレートが作成され、リストの一番上に表示されます。クリック "Elementorで編集する」をクリックしてElementorウィンドウに切り替えます。
![elementor を使用してチェックアウト ページを編集する](https://wpmet.com/wp-content/uploads/2021/10/Edit-Checkout-shipping-template-with-Elementor-1.png)
Elementor で請求書フォームをデザインする #
このステップでは、チェックアウト ページの請求フォームをデザインします。 Elementorエディターで、 ドラッグドロップ ウィジェットをデザイン領域に追加します。
![ドラッグ アンド ドロップ チェックアウト フォーム - 請求ウィジェット](https://wpmet.com/wp-content/uploads/2021/09/drag_and_drop_checkout_form_billing_widget.png)
その後、すぐに請求チェックアウト フォームが表示されます。
「コンテンツ」タブの下
チェックアウト請求フォームのレイアウトとタイトルを変更できます。
の中に レイアウト セクション、できます 入力フィールドを並べ替える フィールドの順序を手動で変更します。
![](https://wpmet.com/wp-content/uploads/2022/12/checkout-billing-sort-input-field.gif)
の中に 一般的な セクションに、を追加します フォームのタイトル。有効にすることもできます デフォルトのタイトルを有効にする フォームに関しては。
![](https://wpmet.com/wp-content/uploads/2022/12/Enter-title-for-checkout-billing-form.png)
「スタイル」タブの下
カスタマイズできます フォームのタイトル 余白、色、フォントサイズなどのパラメータを使用します。
![チェックアウトフォーム - フォームタイトルセクションを含む請求](https://wpmet.com/wp-content/uploads/2021/10/checkout_form_billing_widget_with_form_title_section-1.png)
また、[フィールドの表示設定] セクションでトグルをオンにすることで、フォーム内の姓、名、会社名、住所などのさまざまな要素を表示または非表示にすることもできます。
![チェックアウト フォーム - フィールド可視性セクションを備えた請求](https://wpmet.com/wp-content/uploads/2021/10/checkout_form_billing_widget_with_field_visibility_section.png)
「フォームコンテナ」セクションでは、 背景, アライメント、 そして パディング フォームコンテナの。
![チェックアウトフォーム - フォームコンテナセクションによる請求](https://wpmet.com/wp-content/uploads/2021/10/checkout_form_billing_widget_with_form_container_section-.png)
カスタマイズできます ラベル [ラベル] セクションの色、フォント サイズ、マージンなどのパラメータを使用して請求フォームを作成します。
![チェックアウトフォーム - ラベルセクション付きの請求書](https://wpmet.com/wp-content/uploads/2021/10/checkout_form_billing_widget_with_label_section.png)
フィールド入力も微調整できます。 入力 入力色、背景、フォント サイズなどのパラメータを使用するセクション。
![入力セクションを備えたチェックアウトフォーム請求ウィジェット](https://wpmet.com/wp-content/uploads/2021/10/checkout_form_billing_widget_with_input_paramter.png)
「グローバル フォント」セクションでは、プライマリおよびセカンダリ タイポグラフィ パラメータからテキスト タイポグラフィを調整できます。
![](https://wpmet.com/wp-content/uploads/2021/10/checkout_form_billing_widget_with_global_parameter.png)
最後に、以下に示すように、チェックアウト ページでチェックアウト フォーム請求を表示できます。
![チェックアウトフォーム請求がチェックアウトページに表示される](https://wpmet.com/wp-content/uploads/2021/10/blilling-form-temp.png)
このようにして、チェックアウト フォーム - 請求ウィジェットを簡単に利用して、購入者のエクスペリエンスを向上させることができます。
チェックアウトの追加フィールドにアクセスするには、チェックアウト追加フィールド モジュールを有効にして、チェックアウト追加フィールドを確認します。次に、追加フィールドに必要な変更を加えます。