WooCommerce登録フォームをカスタマイズする方法

公開: 2021-07-20

登録フォームを編集して、より多くのリードを獲得しますか？このガイドでは、プラグインを使用する場合と使用しない場合のWooCommerce登録フォームをカスタマイズするさまざまな方法を紹介します。

オンライン登録は、オンラインストアの最も重要な部分の1つです。これは、顧客がストアから購入するための新しいアカウントを作成できるようにするための標準的な手順です。ドロップオフを回避するには、登録フォームがストアに合わせて調整されており、必要なフィールドのみが含まれていることを確認する必要があります。

デフォルトのWooCommerce登録フォームをカスタマイズする理由

顧客がオンラインストアに新しいアカウントを登録すると、電子メール、名前、請求先住所などの情報を受け取ります。ただし、デフォルトのWooCommerce登録フォームは、新しいアカウントを登録するための電子メールアドレスのみを要求します。これにより、顧客のプロセスが速くなる可能性がありますが、買い物客をよりよく知るための無駄な機会でもあります。

お客様が追加情報を提供する必要がある場合は、チェックアウト時または「マイアカウント」ページから追加する必要があります。これは買い物客にとって非常に反復的で長い手順になる可能性があり、オンラインストアへの興味を失うことさえあります。

良いニュースは、必要なすべてのフィールドを取得したい情報とともに登録フォームに追加することで、これを回避できることです。このように、あなたは直接情報を得るでしょう、そして顧客は後で彼らの詳細を更新する必要がないのであなたとあなたのユーザーの両方にとってより便利になります。

それでは、WooCommerce登録フォームを編集するためのさまざまな方法を見てみましょう。

WooCommerce登録フォームをカスタマイズする方法

WooCommerce登録フォームをカスタマイズする主な方法は3つあります。

WooCommerceダッシュボードから
プラグイン付き
プログラムで

それぞれの方法を見てみましょう。始める前に、ストアでWooCommerceが適切に設定されていることを確認してください。

1.WooCommerceダッシュボードからWooCommerce登録フォームをカスタマイズします

デフォルトでは、WooCommerceダッシュボードから登録フォームを編集できます。 WooCommerce>設定に移動し、アカウントとプライバシータブを開きます。ここでは、顧客がストアに新しいアカウントを作成するときに、いくつかのオプションを変更できます。

たとえば、アカウントの作成中にユーザー名とパスワードを自動的に生成するオプションをアクティブ化できます。これらのオプションはデフォルトでアクティブになっていますが、無効にすることができます。

woocommerceダッシュボードはwoocommerce登録フォームをカスタマイズします

顧客がチェックアウトまたはマイアカウントページでアカウントを作成できるようにしたり、買い物客がアカウントなしで注文できるようにするためのその他のオプションもいくつかあります。有効にするオプションをチェックして、変更を保存するだけです。

ご覧のとおり、これらのデフォルトオプションは、WooCommerce登録フォームの編集にかなり制限されています。フィールドを追加したり、より大きな変更を加えたりする場合は、他の方法を使用する必要があります。

2.プラグインを使用してWooCommerce登録フォームをカスタマイズします

WooCommerce登録フォームを簡単にカスタマイズするための最良の方法の1つは、専用のプラグインを使用することです。そこにいくつかのツールがあります。このチュートリアルでは、ユーザー登録プラグインを使用して登録フォームを編集する方法を示します。

ユーザー登録は、独自のカスタム登録フォームを作成できるフリーミアムプラグインであり、100％応答性があります。プレミアムプランで利用できるWooCommerceアドオンを入手する必要があります。

2.1。プラグインとWooCommerceアドオンをインストールしてアクティブ化します

プラグインの使用を開始するには、プラグインをインストールしてアクティブ化する必要があるため、WooCommerceと統合されているプレミアムプランのいずれかにサブスクライブする必要があります。

その後、WooCommerceダッシュボードで、[プラグイン] > [新規追加]に移動し、[プラグインのアップロード]をクリックします。

[ファイルの選択]を押し、購入後にダウンロードしたプラグインのzipファイルを選択し、 [今すぐインストール]をクリックしてプラグインをインストールします。

インストール後、プラグインをアクティブ化します。 [プラグイン] > [インストール済みプラグイン]に移動し、 [ユーザー登録] WooCommerce拡張機能の横にある[アクティブ化]をクリックします。

この方法でインストールするプロセスに慣れていない場合は、プラグインを手動でインストールする方法に関するガイドを確認してください。

2.2。 WooCommerce登録フォームを作成します

カスタムWooCommerce登録フォームの作成を開始するには、 [ユーザー登録]> [新規追加]に移動します。

フォームの作成woocommerce登録フォームのカスタマイズ

新しい登録フォームを「 WooCommerceRegistration 」と呼びますが、任意の名前を付けることができます。

デフォルトでは、フォームはユーザーの電子メールとパスワードのみを要求しますが、請求先住所と配送先住所、国、郵便番号、電話番号などの他のフィールドを追加できます。それらをフォームにドラッグアンドドロップするだけで、新しいWooCommerce登録フォームに満足したら、[フォームの作成]をクリックして保存します。

2.3。デフォルトのWooCommerce登録ページを置き換える

登録フォームを作成したら、登録ページのデフォルトの登録フォームを置き換える必要があります。これを行うには、 WooCommerce>設定に移動し、アカウントとプライバシータブを開きます。

「マイアカウント」ページで顧客がアカウントを作成できるようにするオプションを選択します。

アカウントページでアカウントを作成し、woocommerce登録フォームをカスタマイズします

次に、 [ユーザー登録]> [設定]に移動し、[ WooCommerce ]タブを開いて、 [登録フォームの選択]オプションで作成した登録フォームを選択します。

その後、いくつかのフィールドが表示され、デフォルトのWooCommerceのログインおよび登録ページを置き換えるオプションにチェックマークを付ける必要があります。プロセスを完了するには、変更を保存します。

woocommerce登録フォームを置き換えますwoocommerce登録フォームをカスタマイズします

次に、フロントエンドに新しい登録フォームを表示します。登録ページに移動してプレビューし、新しくカスタマイズしたWooCommerce登録フォームを確認します。

woocommerce登録フォームはwoocommerce登録フォームをカスタマイズします

3.WooCommerce登録フォームをプログラムでカスタマイズする

プレミアムプラグインを使用せず、プログラミングスキルを持っている場合は、この方法が適しています。コードスニペットを使用して、ほぼすべての方法でWooCommerce登録フォームを編集できます。

先に進む前に、WordPress Webサイトをバックアップして、子テーマを作成することをお勧めします。これらのスニペットを使用してテーマファイルを変更します。問題が発生するとサイトが破損する可能性があるため、常に準備しておくことをお勧めします。

サイトをバックアップして子テーマをインストールしたら、登録フォームの編集を開始できます。このセクションでは、実行できるさまざまな例を示します。子テーマのfunctions.phpファイルにスニペットを配置する必要があります。これを行うには、WordPressダッシュボードで[外観]> [テーマエディター]に移動し、 functions.phpファイルを開きます。

開始する前に、「マイアカウント」ページで顧客がアカウントを作成できるようにするオプションをオンにしていることを確認してください。これを行うには、そのオプションをまだチェックしていない場合は、手順2.3で説明されている手順に従います。

それでは、WooCommerce登録フォームをプログラムでカスタマイズするためのいくつかの例を見てみましょう。

登録フォームに請求先アカウント番号を表示する

WooCommerce登録フォームに必須フィールドとして請求先アカウント番号を追加する場合は、次のコードスニペットを使用できます。

 //登録/アカウントの編集にフィールドを表示します 
add_action（ 'woocommerce_register_form_start'、 'ql_display_account_registration_field'）; 
add_action（ 'woocommerce_edit_account_form_start'、 'ql_display_account_registration_field'）; 
関数ql_display_account_registration_field（）{ 
$ user = wp_get_current_user（）; 
$ value = isset（$ _ POST ['billing_account_number']）？ esc_attr（$ _ POST ['billing_account_number']）：$ user-> billing_account_number; 
？> 
<p class = "woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for = "reg_billing_account_number"> <？php _e（ '発送先/口座番号'、 'woocommerce'）; ？> <span class = "required"> * </ span> </ label>
 <input type = "text" maxlength = "6" class = "input-text" name = "billing_account_number" value = "<？php echo $ value？>" />
 </ p> 
<div class = "clear"> </ div> 
<？php 
}

//登録フィールドの検証 
add_filter（ 'woocommerce_registration_errors'、 'ql_account_registration_field_validation'、10、3）; 
function ql_account_registration_field_validation（$ errors、$ username、$ email）{ 
if（isset（$ _POST ['billing_account_number']）&& empty（$ _POST ['billing_account_number']））{ 
$ errors-> add（ 'billing_account_number_error'、__（ '<strong>エラー</ strong>：アカウント番号が必要です！'、 'woocommerce'））; } 
$ errorsを返します。 
}

//登録フィールド値を保存します 
add_action（ 'woocommerce_created_customer'、 'ql_save_account_registration_field'）; 
関数ql_save_account_registration_field（$ customer_id）{ 
if（isset（$ _POST ['billing_account_number']））{ 
update_user_meta（$ customer_id、 'billing_account_number'、sanitize_text_field（$ _POST ['billing_account_number']））; 
}
}

//フィールド値を編集アカウントに保存します 
add_action（ 'woocommerce_save_account_details'、 'ql_save_my_account_billing_account_number'、10、1）;
関数ql_save_my_account_billing_account_number（$ user_id）{ 
if（isset（$ _POST ['billing_account_number']））{ 
update_user_meta（$ user_id、 'billing_account_number'、sanitize_text_field（$ _POST ['billing_account_number']））; 
}
}

//管理者ユーザーの請求フィールドセクションにフィールドを表示します 
add_filter（ 'woocommerce_customer_meta_fields'、 'ql_admin_user_custom_billing_field'、10、1）; 
関数ql_admin_user_custom_billing_field（ 
$ args）{$ args ['billing'] ['fields'] ['billing_account_number'] = array（ 
'label' => __（ 'Ship to / Account number'、 'woocommerce'）、 
'説明' => ''、 
'custom_attributes' => array（ 'maxlength' => 6）、 
）; 
$ argsを返します。
}

これにより、[マイアカウント]ページの[アカウントの編集]セクションに請求先アカウント番号が表示され、[請求フィールド]セクションの[管理者ユーザー]編集ページに表示されます。

このスニペットをベースとして、ストアに合わせて調整できます。次のような他のWooCommerce登録フォームフィールドを請求セクションに追加することもできます。

Billing_first_name
Billing_last_name
Billing_company
請求先住所1
Billing_address_2
Billing_city
Billing_postcode
Billing_country
Billing_state
Billing_email
課金電話

チェックアウト時にカスタムWooCommerce登録フォームを表示する

WooCommerce登録フォームをチェックアウトページに追加することもできます。これは、顧客が何かを購入したい場合にのみ、ゲストとしてショップを簡単に閲覧し、アカウントを作成できるため、顧客にとって非常に便利です。

ユーザー登録プラグインを使用すると、簡単にこれを行うことができます。プレミアムプランの1つが必要になるので、まだ行っていない場合は、ステップ2.1を参照してください。さらに、WooCommerce登録フォームを作成し、デフォルトのフォームに置き換える必要があります。

その後、 WooCommerce> Settingsに移動し、 Accounts andPrivacyタブを開きます。次に、チェックアウト時に顧客がアカウントを作成して変更を保存できるようにするオプションにチェックマークを付けます。

その後、 [ユーザー登録]> [設定]に移動し、[ WooCommerce ]タブを開きます。 チェックアウト登録を同期して変更を保存するオプションにチェックマークを付けます。

これにより、顧客はユーザー登録をWooCommerceチェックアウト登録と同期できます。その後、テーブル内のすべてのフィールドラベルを確認し、変更を保存します。

チェックアウトの登録フォームは、woocommerce登録フォームをカスタマイズします

それでおしまい！これで、顧客はWebサイトでのチェックアウト中に新しいアカウントを登録できるようになります。

ボーナス：WooCommerce登録メールアドレスを編集する

メールアドレスは登録の基本です。 eコマースストアとして、顧客の電子メールアドレスを使用して、将来、注文に関する情報を顧客に連絡したり、オファーや限定取引などを送信したりできるようにする必要があります。

そのため、WooCommerce登録メールの編集方法を学ぶことは非常に役立ちます。これを行う最良の方法は、電子メールテンプレートをカスタマイズすることです。そして最良の部分は、WooCommerceダッシュボードからこれを実行できることです。

WooCommerce> Settingsに移動し、 Emailsタブを開きます。ここでは、電子メール送信者と電子メールテンプレートオプションを使用して電子メールテンプレートを変更できます。

メールテンプレートの編集woocommerce登録フォームのカスタマイズ

メール送信者オプションを使用すると、「差出人」の名前とアドレスを編集できます。これは、送信者名と電子メールアドレスがWooCommerce電子メールにどのように表示されるかをカスタマイズできることを意味します。

同様に、メールテンプレートのヘッダー画像、フッターテキスト、ベースカラー、背景色、本文の背景、およびテキストの色を編集できます。

WooCommerceメールに必要なすべての変更を加え、 [ここをクリックしてメールテンプレートをプレビューする]リンクをクリックして、変更をリアルタイムで確認します。

新しいテンプレートに満足したら、変更を保存することを忘れないでください。

他の多くのものをカスタマイズできるようにする電子メールテンプレートを編集する他の方法があります。詳細については、WooCommerceメールテンプレートの編集方法に関するガイドをご覧ください。

結論

全体として、登録フォームは、顧客に関する関連情報を収集できるため、非常に重要です。デフォルトの登録フォームは、必要なすべての情報を常に提供するとは限らないため、それをカスタマイズすることは、必要なすべての詳細を収集するための非常に効果的な方法です。

このガイドでは、WooCommerce登録フォームをカスタマイズするための3つの異なる方法について説明しました。

WCダッシュボードから
専用プラグインを使用する
プログラムで

あちこちでいくつかの変更を加えたい場合は、WooCommerceダッシュボードのデフォルトオプションが便利です。ただし、提供されるオプションは非常に限られているため、さらにカスタマイズしたい場合は、プラグインを使用することをお勧めします。一方、サードパーティのツールをインストールせず、コーディングスキルがある場合は、コードスニペットを使用してプログラムで登録フォームを編集できます。

ストアをカスタマイズする方法の詳細については、次のガイドを参照してください。

WooCommerceのマイアカウントページをカスタマイズする方法
WooCommerce製品ページを編集する
WooCommerceでカテゴリページをカスタマイズする方法
WooCommerceショップページを編集する方法

WooCommerce登録フォームをカスタマイズする方法

デフォルトのWooCommerce登録フォームをカスタマイズする理由

WooCommerce登録フォームをカスタマイズする方法

1.WooCommerceダッシュボードからWooCommerce登録フォームをカスタマイズします

2.プラグインを使用してWooCommerce登録フォームをカスタマイズします

2.1。 プラグインとWooCommerceアドオンをインストールしてアクティブ化します

2.2。 WooCommerce登録フォームを作成します

2.3。 デフォルトのWooCommerce登録ページを置き換える

3.WooCommerce登録フォームをプログラムでカスタマイズする

登録フォームに請求先アカウント番号を表示する

チェックアウト時にカスタムWooCommerce登録フォームを表示する

ボーナス：WooCommerce登録メールアドレスを編集する

結論

2.1。プラグインとWooCommerceアドオンをインストールしてアクティブ化します

2.3。デフォルトのWooCommerce登録ページを置き換える