ShopEngineはElementor向けの完全なWooCommerceソリューションです。ShopEngineの機能には以下が含まれます。 WooCommerce チェックアウトフォームログイン ユーザーがチェックアウト時に既存のアカウントにログインするときにカスタマイズされたログイン フォームを設計できるウィジェット。

ShopEngine を使用してチェックアウト ログイン フォームを作成し、カスタマイズする方法については、このドキュメントをお読みください。

ステップ 1: ウィジェットを有効にする #

まず、「チェックアウトフォームログイン」ウィジェットを有効にするには:

1. 案内する ショップエンジン > ウィジェット WordPress ダッシュボードから。
2. を見つける チェックアウトフォームログイン ウィジェット。
3. トグルを回してウィジェットを有効にします の上.
4. クリックしてください 変更内容を保存 ボタン。

ステップ2: 設定を構成する #

チェックアウト中に顧客のログインを有効にするには:

1. 案内する WooCommerce > 設定 WordPress ダッシュボードから。
2. 切り替える アカウントとプライバシー.
3. ゲストチェックアウトで「チェックアウト時に顧客が既存のアカウントにログインできるようにする" オプション。
4. ページを下にスクロールしてクリックします 変更内容を保存.

ステップ3: チェックアウトフォームのログインをカスタマイズする #

次に、Elementor で Checkout テンプレートを開きます。

に行きます ショップエンジン > ビルダーテンプレートチェックアウト テンプレートを見つけて、テンプレートとともに「Elementor で編集」をクリックします。

その後、切り替え見出しをクリックしてフォームを展開します。

チェックアウトテンプレートをまだ作成していない場合は、次のドキュメントに従ってください。

ShopEngine を使用して WooCommece チェックアウト ページを作成する方法.

その後、WooCommerce チェックアウト ログイン フォームの外観をカスタマイズできます。

3.1 見出しを切り替える #

見出し切り替えセクションでは、

1. を選択してください 色 見出し用。
2. を選択してください リンクの色 ハイパーリンクのあるテキストの場合。
3. を選択 見出しの背景 色。
4. 切り替え見出しの境界線の種類、幅、色を選択することもできます。

3.2 テキスト #

WooCommerceチェックアウトログインフォームのテキストについては、

1. テキストを選択 色.
2. を選択 リンクの色 ハイパーリンク付きのテキストの場合。

3.3 ラベル #

WooCommerceチェックアウトログインフォームのラベルについては、

1. テキストを選択 色 ラベル用。
2. を選択 必要なインジケータの色 必須フォームフィールド用。
3. を調整します。 マージン ラベル用。

3.4 入力 #

ログインフォームの入力フィールドをカスタマイズするには、

1. テキストの入力色を選択します。
2. を選択 背景 入力フィールドの色。
3. をセットする 枠線の種類.
4. 調整する パディング 入力フィールドの。

3.5 ボタン #

フォーム送信ボタンのスタイルをカスタマイズできます。

1. を選択 色 ボタンのテキスト。
2. ボタンを選択してください 背景色.
3. をセットする 枠線の種類.
4. を調整します。 境界半径.
5. を調整します。 ボックスシャドウ.
6. をセットする マージン ボタンの。

「通常」状態と「ホバー」状態で異なるテキストの色と背景色を選択できます。

3.6 タイポグラフィ #

ログイン フォーム内のテキストのプライマリおよびセカンダリ タイポグラフィを設定します。

• プライマリ タイポグラフィは、トグル ヘッダーとテキストに機能します。
• セカンダリ タイポグラフィは、入力フィールドと送信ボタンで機能します。

最後に、Web サイト用にカスタマイズされた WooCommerce チェックアウト ログイン フォームが準備できました。