WooCommerceサインアップおよびログインフォームをカスタマイズする方法

WooCommerceログインおよび登録フォームをカスタマイズする理由

限られたフィールドオプション：

デフォルトのWooCommerce登録およびログインフォームには、ユーザーがアカウントを作成するための適切なフィールドがあります。 ただし、さらにいくつかのフィールドを追加する場合は、デフォルトでは追加できません。 君は 追加および表示できません チェックボックス、ドロップダウンメニュー、請求先や配送先住所などのフィールドが必要な場合や必要な場合に使用します。

個別のログインページと登録ページ

デフォルトでは、WooCommerceのログインフォームと登録フォームは同じページに表示されます。 これも非常に便利ですが、 別のページを作成することはできません 必要に応じて、ログインおよび登録フォーム用。 これを克服するには、コードまたは他のプラグインを使用する必要があります。

設計上の制限

一部のユーザーにとって、デフォルトのWooCommerceログインおよび登録フォームの視覚的表現は、少し退屈で退屈な場合があります。 残念ながら、WooCommerceはそれらをカスタマイズするオプションを提供していません。 したがって、デフォルトのフォームで別の色、テキスト形式、または枠線を使用することはできません。

WooCommerceログインおよび登録フォームをカスタマイズします。

WooCommerceログインページとサインアップフォームのほとんどのカスタマイズは、XNUMXつのプラグインで簡単に実行できます。 ユーザー登録。 これは、Webサイトの効率的なログインおよび登録フォームの作成に特化したプラグインです。 それは ドラッグアンドドロップ機能をサポートするインターフェイス  簡単にカスタマイズできます codage.

あなたがする必要があるのは インストールしてアクティブ化する.

また、その拡張機能のいくつかを追加する必要があります。WooCommerceアドオン さらに続行するのに役立ちます。 このアドオンを使用すると、パーソナライズされた登録フォームをWooCommerceに簡単に統合でき、WooCommerceの制限を克服できます。

その後、それを使用してWooCommerceログインまたは登録フォームを作成し、それらの編集を開始できます。

1. WooCommerceログインまたは登録フォームにフィールドを追加します

Le WordPressのプラグイン ユーザー登録 登録フォームにフィールドを追加するオプションを提供します。 まず、そこから新しい登録フォームを作成する必要があります ユーザー登録 >>新規追加 WordPressダッシュボード。

発見も WordPressで背景画像を追加する方法

あなたはのフィールドを使用することができます WooCommerceの請求と配送 タブから追加 フィールズ 画面の左側にあります。

必要に応じて、ドロップダウンメニュー、チェックボックス、ラジオボタンで追加のフィールドを追加することもできます。

これらのフィールドは、 WordPressのプラグイン ユーザー登録。 ユーザーが新しいアカウントを作成するときに、新しいフォーム フィールドが登録フォームに表示されます。

2.デフォルトのWooCommerceログインおよび登録フォームを置き換えます

新しいWooCommerceログインまたは登録フォームを作成したら、それをデフォルトのWooCommerceフォームに置き換える必要があります。

ガイドもご覧ください Facebook上でWooCommerceストアを追加する方法

あなたがする必要があるすべては行くことです WooCommerce >>設定 タブを開きます アカウントと機密保持。 セクションの下 アカウント作成、 チェック 「マイアカウント」ページで顧客がアカウントを作成できるようにする 変更を保存します。

次に行きます ユーザー登録 >>設定 タブを開きます WooCommerce。 ここで、統合する登録フォームを選択します。 次に、オプションをチェックします 登録ページを置き換える 変更を保存します。

記事もご覧ください あなたのWooCommerce条件付き契約者のためのメニューを表示する方法

これで、パーソナライズされたWooCommerceログインフォームと登録フォームが表示されます。

デフォルトでは、WooCommerceのログインフォームと登録フォームの両方が同じページに表示されます。 しかし、もしあなたが 別のページに表示したい プラグインを使用してそれを行うこともできます ユーザー登録。 まず、登録ページとログインページ用に別々のページを作成します。

ログインページを個別に表示するには、表示するページに次のショートコードを追加します。 また、ユーザーがログインした後に、アカウントページのリンクにリダイレクトする必要があります。 パラメータを追加するだけです redirect_url  ページのリンクにアクセスし、後者を公開します。

[user_registration_my-account redirect_url = "アカウントページリンク"]

個別に登録ページを表示するには、 作成したWooCommerce登録ショートコードが必要です。 あなたは続けることによってそれを持つことができます ユーザー登録 >>ユーザー登録 WordPressダッシュボードから。

次に、登録フォームを表示するショートコードをコピーして貼り付けます。 次に、ページを公開します。

Ou

ブロックエディタを使用して、作成した登録フォームを表示できます。 ブロックを検索するだけ ユーザー登録 表示したい登録フォームを選択します。 次に、ページを公開します。

3.アカウントページに追加のフィールドを表示する

ログインまたは新規アカウントの登録後、ユーザーはページにリダイレクトされます マイアカウント。 ただし、WooCommerceのログインページまたは登録ページの詳細は、アカウントページに表示されない場合があります。

ここにある Webサイトに電卓を追加するための10個のWordPressプラグイン

ただし、ログインフォームと登録フォームを正常に置き換えたら、アカウントページで詳細を表示できます。 続けて  マイアカウント>>アカウントの詳細.

4.チェックアウトページでWooCommerceアカウントを統合します

顧客の便宜のために、ユーザー登録プラグインを使用して、チェックアウトページにパーソナライズされた登録フォームを表示することもできます。 チェックアウトページで入力するフィールドを選択することもできます。 チェックアウトページでWooCommerceアカウントを追加するには、所定の手順に従うだけです。

記事もご覧ください ブログで使用する10個のWordPress WooCommerceプラグイン

続けて WooCommerce >>設定 タブを開きます アカウントと機密保持。 次に、セクションで アカウントとプライバシー、 オプションを確認してください 顧客が注文の検証中にアカウントを作成できるようにします。

再び、に移動します ユーザー登録>>設定、 そしてタブの下 WooCommerce、 セクションが表示されます 同期チェックアウト登録. ここでそれで十分です オプションをチェック：このオプションをチェックして、ユーザー登録をWooCommerceチェックアウト登録と同期します。 WooCommerce登録フォームで利用できない追加フィールドが表示されます。

次に、チェックアウトサインアップフォームで顧客に表示するフィールドを選択するだけです。 請求先や配送先のフィールドも含まれます。

顧客が次にチェックアウトを希望するとき、彼らは彼らが完了するための追加の特定のフィールドを備えたフォームを受け取ります。

5. WooCommerceログインおよび登録フォームを再設計します

ユーザー登録は素晴らしいです WordPressのプラグイン WooCommerce ログインおよび登録フォームを完全にカスタマイズできるフォーム ビルダー。

あなたは彼を使うことができます アドオン スタイルカスタマイザ 必要に応じて、登録フォーム全体の外観を変更できるようにします。 リアルタイムのプレビューオプションを備えたドラッグアンドドロップ機能をサポートするインターフェイスを備えているため、非常に使いやすいです。

必要なのは、スタイルカスタマイザアドオンを購入して、既存のWooCommerceフォームを編集するか、新しいフォームを作成することだけです。 次に、 ブラシアイコンのボタン 画面の右下にあります。

これで、カスタマイザーパネルが表示されます。

ここでは、ログインフォームと登録フォームのあらゆる種類のデザイン要素を変更できます。 それらのいくつかは、フォーム、フィールドラベル、説明、およびラジオボタンまたはチェックボックスボタンのスタイルの全体的な外観を扱います。 セクションタイトル、投稿、および追加のCSSの追加オプションもあります。

それらのカスタマイズが完了したら、それらを保存します。 スタイルのカスタマイズに加えたすべての変更は、WooCommerceのログインまたは登録フォームに自動的に統合されます。

発見も  WordPressフォームをパスワードで保護する方法

そのため、フォームをオンラインストアに配置するときはいつでも、これらの変更を確認できます。

概要：

WooCommerceのログインフォームと登録フォームのさまざまな側面を使用およびカスタマイズする方法について、最も役立つヒントをいくつか紹介します。 これは、WooCommerceアカウントを作成またはログインするための簡単なインターフェースで、多くの顧客をWebサイトに引き付けるのに非常に役立ちます。

その他の追加のプレミアムWordPressプラグイン 

他にも発見 WordPressのプラグイン WordPress ブログまたは Web サイトのパフォーマンスを最適化するプレミアム。

1。 MapSVG

MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises ローカル、サプライヤーリストなど 

Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.

記事もご覧ください あなたのウェブサイトで訪問者を長く保つ方法

ダウンロード| デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここに ！ WooCommerceのサインアップフォームとログインフォームをカスタマイズする方法を示す記事は以上です。 今、あなたは持っているでしょう  登録フォームを作成し、ユーザー登録プラグインに接続する可能性。 これらのような小さな詳細は非常に重要です あなたのオンラインストア あなたの顧客がそれらを頻繁に使用することを確認するため。

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

あなたが持っている場合 デcommentaires または提案、予約セクションでお知らせすることをheしないでください。 しかし、その間、 さまざまなソーシャルネットワークでこの記事を共有する. 

...