ShopEngine のチェックアウト フォーム - Shipping は、配送チェックアウト フォームに魅力を追加できるため、非常に便利なウィジェットです。フォントから外観に至るまで、フォーム要素に必要なすべての変更を直接加えることができます。
チェックアウトフォーム - 配送ウィジェットの使用方法? #
チェックアウト配送フォームの作成には、2 つの主要な手順が含まれます。 1. テンプレートを作成し、2. Elementor で配送フォームをデザインします。
テンプレートを作成する #
まず、WordPress ダッシュボードにログインし、次のリンクに移動します。 ShopEngine > ビルダー テンプレート.
次に、「」をクリックします。新しく追加する右上隅にある「」ボタンをクリックします。
![](https://wpmet.com/wp-content/uploads/2022/12/add-template-checkout-shipping-sort.png)
その直後、テンプレート設定用のポップアップウィンドウが表示されます。 [テンプレート設定] ウィンドウで:
- テンプレートを入力してください 名前.
- テンプレートを選択してください タイプ: チェックアウト。
- 活性化 テンプレート。
- を選択してください サンプルデザイン または、ゼロからデザインを開始します。
- 最後に「」を押します。変更内容を保存" ボタン。
![チェックアウト配送フォームのテンプレートを作成する](https://wpmet.com/wp-content/uploads/2021/10/create-template-checkout-shippingF.png)
テンプレートが作成され、リストの一番上に表示されます。ここで、「」をクリックしてください。Elementorで編集する」をクリックしてElementorウィンドウに切り替えます。
![Elementor を使用してチェックアウト配送テンプレートを編集する](https://wpmet.com/wp-content/uploads/2021/10/Edit-Checkout-shipping-template-with-ElementorF.png)
Elementor で配送フォームをデザインする #
このステップでは、チェックアウト ページの配送フォームをデザインします。 Elementorエディターで、 ドラッグドロップ Checkout Form Shipping ウィジェットをデザイン領域に追加します。
![ドラッグ アンド ドロップ チェックアウト フォーム - 配送ウィジェット](https://wpmet.com/wp-content/uploads/2021/09/drag_and_drop_checkout_form_shipping_widget.png)
その後、配送チェックアウトフォームがすぐに表示されます。
「コンテンツ」タブの下
チェックアウト配送フォームのレイアウトとタイトルを変更できます。
の中に レイアウト セクション、できます 入力フィールドを並べ替える フィールドの順序を手動で変更します。
色、フォント サイズ、余白などのパラメータを使用して、[スタイル] タブからチェックボックスのタイトルを編集できます。
![チェックアウト発送ソート入力フィールド](https://wpmet.com/wp-content/uploads/2022/12/checkout-shipping-sort-input-field.gif)
の中に 一般的な セクションに、 フォームのタイトル チェックアウト配送フォーム用。
![チェックアウト配送フォームのタイトルを入力してください](https://wpmet.com/wp-content/uploads/2022/12/Enter-title-for-checkout-shipping-form.png)
「スタイル」タブの下
カスタマイズできます チェックボックスのタイトル 色、フォント サイズ、タイポグラフィ、余白を変更します。
![チェックアウト フォーム - 配送はチェックボックスのタイトル セクションに表示されます](https://wpmet.com/wp-content/uploads/2022/12/5.png)
また、 フィールドの可視性 セクション。
![チェックアウト フォーム - フィールド可視セクションに配送が表示されます](https://wpmet.com/wp-content/uploads/2021/09/checkout_form_shipping_with_field_visibility_parameters.png)
の中に フォームコンテナ セクションでは、コンテナの配置を設定し、フォームコンテナの背景とパディングを選択できます。
![Checkout 配送フォームのフォーム コンテナ設定](https://wpmet.com/wp-content/uploads/2022/12/6.png)
の中に ラベル セクションでは、色、必要なインジケーターの色、フォント サイズ、およびマージンを選択できます。
![チェックアウト発送フォームのフォームラベル設定](https://wpmet.com/wp-content/uploads/2022/12/7.png)
カスタマイズできます 入力 フィールドとその外観を、入力色、背景、境界線の色、フォント サイズなどの指定されたオプションから選択します。
![チェックアウト配送フォームの入力フィールドのカスタマイズ](https://wpmet.com/wp-content/uploads/2022/12/8.png)
とともに グローバルフォント セクションでは、チェックアウト発送フォームのプライマリおよびセカンダリ タイポグラフィ パラメータからテキスト タイポグラフィを調整できます。
![チェックアウト配送フォームのグローバル フォント設定](https://wpmet.com/wp-content/uploads/2022/12/9.png)
以下のスクリーンショットから、すべての配送詳細を含むチェックアウト フォーム配送を表示できます。
![チェックアウト配送フォームがチェックアウトページに表示される](https://wpmet.com/wp-content/uploads/2021/10/shipping-form.png)
これは、チェックアウト フォーム - 配送ウィジェットを活用し、顧客にスムーズなエクスペリエンスを提供する方法です。
チェックアウトの追加フィールドにアクセスするには、チェックアウト追加フィールド モジュールを有効にして、チェックアウト追加フィールドを確認します。次に、追加フィールドに必要な変更を加えます。