ShopEngine のチェックアウト フォーム - 支払いウィジェットを使用すると、支払いチェックアウト フォームにさまざまなバリエーションを加えることができます。ウィジェットを使用すると、必要な変更をすべて加えた追加のアピールを含む支払いチェックアウト フォームを表示できます。
チェックアウトフォーム - 支払いウィジェットの使用方法?
まず、管理パネルのダッシュボードに移動し、アイテムのリストから ShopEngine を見つけます。 [ShopEngine] をクリックし、ドロップダウン メニューから [テンプレート] を選択します。次に、「」をクリックします。新しく追加する右上のテキストの横にある「」ボタンテンプレート”。
![チェックアウトフォームの新しいテンプレートを追加 - 支払い](https://wpmet.com/wp-content/uploads/2021/09/add_new_templates_for_checkout_form_billing-2.png)
その直後、テンプレート設定用のポップアップウィンドウが表示されます。テンプレート名を 名前 目的はチェックアウト フォーム - 支払いウィジェットを使用することなので、フィールドにチェックアウト タイプを選択します。
また、デフォルトのサンプル デザインを選択することも、最初からデザインを開始することもできます。最後に「」を押します。変更内容を保存" ボタン。
![チェックアウトフォームのチェックアウトテンプレートを設定 - 支払いウィジェット](https://wpmet.com/wp-content/uploads/2021/09/template_settings_for_checkout_page-2.png)
テンプレートが作成され、リストの一番上に表示されます。ここで、「」をクリックしてください。Elementorで編集する」をクリックしてElementorウィンドウに切り替えます。
![チェックアウトフォーム支払いウィジェットの要素を使用して編集します](https://wpmet.com/wp-content/uploads/2021/09/edit_checkout_page_with_elementor-2.png)
このステップでは、左側に ShopEngine ウィジェットのリストを含むサイドバーが表示されます。 ShopEngine のチェックアウト セクションからチェックアウト フォーム - 支払いウィジェットを検索するか、通常は検索フィールドでウィジェットを検索し、指定された領域にドラッグ アンド ドロップすることができます。
![ドラッグ アンド ドロップ チェックアウト フォーム - 支払いウィジェット](https://wpmet.com/wp-content/uploads/2021/09/drag_and_drop_checkout_payment_widget.png)
その直後に画面に支払いチェックアウトフォームが表示されることがわかります。ラベルのテキストの色、URLの色、URLのホバー色、ラベルのタイポグラフィなどのパラメータを使用して、フォームのコンテンツのスタイルをカスタマイズします。
![チェックアウト フォーム - コンテンツ スタイル セクションによる支払い](https://wpmet.com/wp-content/uploads/2021/09/checkout_payment_widget_with_content_style_parameters.png)
パラメータのチェックボックスの位置、マージン、およびパディングを使用して、チェックボックス、支払い方法リスト、および支払い方法の説明を制御することもできます。
![チェックアウト フォーム - お支払い方法セクションでの支払い](https://wpmet.com/wp-content/uploads/2021/09/checkout_payment_widget_with_payment_methods_parameters.png)
ボタンのタイポグラフィ、パディング、境界線の半径、色などのパラメータを使用してボタンにスパイスを加えることができます。また、全幅ボタンを表示するコントロールもあります。
![チェックアウトフォーム - ボタンによる支払いセクション](https://wpmet.com/wp-content/uploads/2021/09/checkout_form_payment_with_button_parameters.png)
グローバル フォント セクションでは、チェックアウト支払いフォームを装飾するためにテキスト フォントを選択できます。
![チェックアウトフォーム - グローバルフォントセクションでの支払い](https://wpmet.com/wp-content/uploads/2021/09/checkout_form_payment_with_global_font_parameters.png)
以下に示すように、チェックアウトページの支払い方法を確認してください。
![チェックアウトページのチェックアウト支払いウィジェット](https://wpmet.com/wp-content/uploads/2021/10/checkout_payment_widget_on_checkout_page.gif)
これは、ShopEngine のチェックアウト フォーム - 支払いウィジェットを使用して支払いチェックアウト フォームに魅力を追加する方法です。
チェックアウトの追加フィールドにアクセスするには、 追加フィールドモジュールをチェックアウトする チェックアウトの追加フィールドを見てください。次に、追加フィールドに必要な変更を加えます。