カスタムWooCommerce登録フォームを作成する方法

WordPressサイトの顧客登録プロセスを改善したいですか？ カスタムWooCommerce登録フォームを作成することは、正しい方向への第一歩です。

デフォルトのWooCommerceプラグインには登録フォームがありますが、基本的な情報のみを収集します。 しかし、ProfilePressと呼ばれるプラグインの助けを借りて、ユーザーからより多くの情報を収集し、フォームを並べ替えてユーザーフレンドリーにすることができます。 フォームを通じて収集された情報は、特にメールマーケティングキャンペーンに使用できます。

この記事では、カスタム登録フォームを作成し、それをデフォルトのWooCommerceフォームに置き換える方法を説明します。 飛び込みましょう。

カスタムWooCommerce登録フォームの作成

カスタムWooCommerce登録フォームを作成するには、ProfilePressというプラグインが必要です。 以下に、プラグインの設定方法を示します。

ステップ1：ProfilePressをインストールする

ProfilePressにサインアップすると、プラグインとライセンスキーをダウンロードするためのリンクが記載された領収書が届きます。 プラグインをダウンロードして、WordPressWebサイトにインストールします。 プラグインをアクティブ化するには、ライセンスキーを入力します。

ステップ1.5：WooCommerce登録を有効にする

WooCommerce->ダッシュボードの設定に移動します。 [プライバシーとアカウント]セクションをクリックし、 [マイアカウント]ページで顧客にアカウントの作成を許可するオプションをオンにします。

ステップ2：ProfilePressを使用してカスタムフォームを作成する

今、楽しい部分が来ます。 WordPressダッシュボードで、 [ProfilePress]> [Forms＆Profiles]> [Registration]>[AddNew]に移動します。

カスタム登録フォームを作成するには、2つのオプションがあります。 事前に作成されたテンプレートを使用するか、フォームを最初から作成することができます。 コーディング方法がわからない場合や、フォームを最初から作成することに時間を費やしたくない場合は、テンプレートを選択することをお勧めします。

ドラッグアンドドロップビルダーを選択します。

フォームに名前を付けてから、事前に作成されたテンプレートの1つから選択します。 このチュートリアルでは、 Tulipを選択しました。 次のページでは、必要に応じてフォームをカスタマイズできます。

カスタムフィールドの追加

WooCommerceの請求および配送フィールドを含む次のカスタムフィールドを登録フォームに追加できます。

• ユーザー名
• 電子メールアドレス
• Eメール確認
• パスワード
• パスワードを認証する
• パスワードの強度
• ウェブサイトのニックネーム
• 表示名
• ファーストネーム
• 苗字
• プロフィール写真をアップロード
• カバー写真をアップロード
• バイオグラフィー
• 役割を選択
• カスタムHTML
• reCAPTCHA

登録フォーム用に選択したカスタムフィールドを簡単に見てみましょう。

フォーム設定の変更

ProfilePressを使用すると、を含むフォームの外観を変更できます。 これは、ブランディングとスタイルを補完するフォームを作成できることを意味します。 フォームの外観を変更するために数分を費やすことをお勧めします。

また、次の手順に進む前に、必ず[登録設定]に移動し、[新しいユーザーの役割]で[顧客]を選択してください。 このカスタムフォームを使用してサインアップした人は、顧客としてカウントされます。

フォームの準備ができたら、変更を保存します。 次に、新しいカスタム登録フォームをWebサイトに表示します。

ステップ3：WooCommerce登録フォームを置き換える

このセクションでは、デフォルトのWooCommerce登録フォームを新しいカスタム登録フォームに置き換える方法を学習します。

ProfilePress>設定>WooCommerceに移動します。 [マイアカウント登録フォーム]というオプションが表示されます。 ドロップダウンメニューから、作成したばかりの新しい登録フォームを選択し、設定を保存します。

必要に応じて、このフォームをWebサイトのデフォルトの登録ページとして使用できます。 あなたがする必要があるのは、 ProfilePress>設定>一般>グローバルに移動することです。 次に、[登録ページ]オプションから、新しいカスタム登録ページを選択します。

新しい登録ページを作成することを選択した場合は、フォームのショートコードをコピーし、新しいページを作成し、ショートコードを追加して、ページを公開することに注意してください。 はい、とても簡単です！

それだけです、皆さん！ これが、カスタムWooCommerce登録フォームを作成する方法です。 WooCommerce My Accountページをプレビューすると、登録フォームが表示されます。

カスタム登録フォームができたので、カスタムログインフォームも作成できるかどうか疑問に思われる方もいらっしゃいます。 カスタムWooCommerceログインフォームを作成するプロセスは、カスタム登録フォームを作成するプロセスと同じです。 次のセクションで手順を簡単に説明します。

カスタムWooCommerceログインフォームを作成する方法

カスタムWooCommerceログインフォームを作成するには、 [ProfilePress]> [Forms＆Profiles]> [Login]>[ AddNew]に移動します。

ドラッグアンドドロップビルダーを選択します。 フォームに名前を付けてから、事前に作成されたテンプレートの1つから選択します。

次に、カスタムフィールドを追加し、必要に応じてフォームの外観を変更します。

最後に、デフォルトのWooCommerceログインフォームを新しいカスタムフォームに置き換えるには、 [ProfilePress]> [Settings]> [WooCommerce]> [My Account Login Form]に移動し、新しいログインフォームを選択します。

新しいログインフォームをWebサイト全体のデフォルトのログインフォームにする場合は、 [プロファイルプレス]>[設定]>[一般]>[グローバル]に移動します。 次に、[ログインページ]オプションから、新しいカスタムログインフォームを選択します。

カスタムログインページが当社のWebサイトでどのように表示されるかを次に示します。

これで、カスタムWooCommerceログインフォームを作成する方法がわかりました。

[マイアカウント]ページのデフォルトの登録フォームとログインフォームの両方をProfilePressのカスタムフォームに置き換えると、サイトでどのように表示されるかを次に示します。

WooCommerceストアには、登録フォームとログインフォームの他に、訪問者がよく使用するもう1つの重要なフォームであるチェックアウトフォームがあります。 次に、チェックアウトフォームのカスタマイズを検討する必要がある理由と、実行する必要のある手順について説明します。

WooCommerceCheckoutへのカスタム登録フィールドの追加

チェックアウトページにカスタムフィールドを追加することは、顧客から追加情報を収集するための優れた方法です。 たとえば、顧客にソーシャルメディアアカウントを追加さ​​せて、登録プロセスを簡単にすることができます。 これは、より良い顧客体験を提供し、売り上げを伸ばすのに役立ちます。

WooCommerce>設定>アカウントとプライバシーに移動し、チェックアウト時に顧客にアカウントの作成を許可するを選択します。

次に、 [プロファイルプレス]>[設定]>[カスタムフィールド]に移動します。 このページで利用可能な1つまたは2つのカスタムフィールドを見つける必要があります。 カスタムフィールドをさらに追加するには、[新規追加]を選択します。

ProfilePressは、次のカスタムフィールドタイプをサポートしています。

• 文章
• パスワード
• Eメール
• 電話
• 隠しフィールド
• 番号
• 日にち
• 国
• Textarea
• 単一のチェックボックス
• ファイルのアップロード
• ドロップダウンを選択
• ラジオボタン
• チェックボックス

必要なすべてのフィールドを作成したら、設定を保存してから、 [ProfilePress]> [Settings]> [WooCommerce]> [CheckoutRegistrationFields]に移動します。 作成した登録フィールドを追加します。

フィールドを必須にする場合は、[必須の登録フィールド]に、必須と思われるフィールドを追加します。

変更を保存することを忘れないでください。

それでおしまい。 これで、カスタムチェックアウト登録フォームができました。

結論

カスタムのWooCommerce登録またはフォームを介してユーザー情報を収集すると、売り上げを伸ばすのに役立ちます。 WooCommerceには、フィールドを追加したり、フォームに任意のタイプのカスタマイズを行ったりするオプションがありません。したがって、WooCommerceフォームを変更するには、ProfilePressなどのプラグインが必要です。

とはいえ、ProfilePressは単なるフォームビルダーではありません。 これは、ユーザープロファイルとメンバーディレクトリの管理に役立ちます。 特に、Webサイトのコンテンツへのアクセスを制限するのに役立ちます。 ProfilePressを試してみてください！

私たちのガイドが気に入ったら、他のWooCommerceガイドが役立つかもしれません。 私たちのブログを見てください。