WooCommerce登録フォームにフィールドを追加する方法

公開: 2021-04-20

カスタムフィールドの追加WooCommerce登録フォーム WooCommerce登録フォームフィールドを追加する方法をお探しですか？このチュートリアルでは、WooCommerceストアに登録する前に、カスタムフィールドをWooCommerce登録フォームに追加して顧客に詳細を尋ねる方法を説明します。

WooCommerceは、カスタマイズに柔軟に対応できるため、ほとんどのストアオーナーの間で引き続き人気があります。プラグインまたはカスタムコードを使用して、機能を追加できます。

フィールドを追加する方法WooCommerce登録フォーム

この投稿では、カスタムPHPスクリプトを使用してWooCommerce登録フォームフィールドを追加する方法を説明します。子テーマを作成することをお勧めします。これにより、更新中に変更が失われないようになります。

始める前に、アカウントのログインページでWooCommerce登録フォームが有効になっていることを確認する必要があります。

これを行うには、 WooCommerce>設定>アカウントに移動し、以下に示すように、「マイアカウント」ページで顧客登録を有効にするをチェックします。

これにより、WooCommerce登録フォームがフロントエンドに表示されます。

WooCommerce登録フォームにフィールドを追加する手順

このセクションでは、次のアクションを利用して、この構造にさらにフィールドを追加します。名、姓、携帯電話番号などのフィールドが含まれます。

従う必要のある手順は次のとおりです。

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、登録フォームにフィールドを追加する関数を追加するテーマ関数ファイルを探します。
次のコードをfunctions.phpファイルに追加します。

 関数njengah_extra_register_fields（）{？>

       <p class = "form-row form-row-wide">

       <label for = "reg_billing_phone"> <？php _e（ '電話'、 'woocommerce'）; ？> </ label>

       <input type = "text" class = "input-text" name = "billing_phone" id = "reg_billing_phone" value = "<？php esc_attr_e（$ _POST ['billing_phone']）;？>" />

       </ p>

       <p class = "form-row form-row-first">

       <label for = "reg_billing_first_name"> <？php _e（ '名'、 'woocommerce'）; ？> <span class = "required"> * </ span> </ label>

       <input type = "text" class = "input-text" name = "billing_first_name" id = "reg_billing_first_name" value = "<？php if（！empty（$ _POST ['billing_first_name']））esc_attr_e（$ _POST [' Billing_first_name ']）;？> "/>

       </ p>

       <p class = "form-row form-row-last">

       <label for = "reg_billing_last_name"> <？php _e（ '姓'、 'woocommerce'）; ？> <span class = "required"> * </ span> </ label>

       <input type = "text" class = "input-text" name = "billing_last_name" id = "reg_billing_last_name" value = "<？php if（！empty（$ _POST ['billing_last_name']））esc_attr_e（$ _POST [' Billing_last_name ']）;？> "/>

       </ p>

       <div class = "clear"> </ div>

       <？php

 }

 add_action（ 'woocommerce_register_form_start'、 'njengah_extra_register_fields'）;

これは、ページを更新したときの結果です。

登録フォームのフィールドは、請求先住所と同じです。

フィールド名の前に接頭辞「billing_」を含めました。

登録フォームに追加でき、請求先住所に関連付けることができる有効なWooCommerceフォームフィールドは次のとおりです。

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

フォームが作成されたので、functions.phpファイルに挿入する必要がある次のコードを使用してフォームを検証する必要があります。

 / **

*フィールドの検証を登録します。

* /

function njengah_validate_extra_register_fields（$ username、$ email、$ validation_errors）{




      if（isset（$ _POST ['billing_first_name']）&& empty（$ _POST ['billing_first_name']））{




             $ validation_errors-> add（ 'billing_first_name_error'、__（ '<strong>エラー</ strong>：名が必要です！'、 'woocommerce'））;

      }

      if（isset（$ _POST ['billing_last_name']）&& empty（$ _POST ['billing_last_name']））{




             $ validation_errors-> add（ 'billing_last_name_error'、__（ '<strong>エラー</ strong>：名前が必要です！。'、 'woocommerce'））;




      }

         $ validation_errorsを返します。

}




add_action（ 'woocommerce_register_post'、 'njengah_validate_extra_register_fields'、10、3）;

最後のステップは、fucntions.phpファイルに次のコードを追加して、これらの値をデータベースに保存することです。

 / **

*以下のコードは余分なフィールドを保存します。

* /

function njengah_save_extra_register_fields（$ customer_id）{

    if（isset（$ _POST ['billing_phone']））{

                 // WooCommerceで使用される電話入力ファイル

                 update_user_meta（$ customer_id、 'billing_phone'、sanitize_text_field（$ _POST ['billing_phone']））;

          }

      if（isset（$ _POST ['billing_first_name']））{

             //デフォルトの名フィールド

             update_user_meta（$ customer_id、 'first_name'、sanitize_text_field（$ _POST ['billing_first_name']））;

             // WooCommerceで使用される名フィールド

             update_user_meta（$ customer_id、 'billing_first_name'、sanitize_text_field（$ _POST ['billing_first_name']））;

      }

      if（isset（$ _POST ['billing_last_name']））{

             //デフォルトの姓のフィールド

             update_user_meta（$ customer_id、 'last_name'、sanitize_text_field（$ _POST ['billing_last_name']））;

             // WooCommerceで使用される名前フィールド

             update_user_meta（$ customer_id、 'billing_last_name'、sanitize_text_field（$ _POST ['billing_last_name']））;

      }




}

add_action（ 'woocommerce_created_customer'、 'njengah_save_extra_register_fields'）;

これで、フィールドが追加、検証され、将来使用するために挿入されました。

アカウントの請求先住所ページに移動するときは、[編集]をクリックしてそこに移動する必要があります。フィールドはすでに入力されています：チェックアウト

結論

この投稿では、WooCommerce登録フォームにフィールドを追加する方法を学びました。

このコードの実装で問題が発生した場合は、資格のあるWordPress開発者に連絡してください。

同様の記事

請求の詳細を編集する方法WooCommerceチェックアウトページ
チェックアウト後のWooCommerceリダイレクト：カスタムサンキューページにリダイレクト
ログアウト後のWooCommerceリダイレクト[究極のガイド]
WooCommerceのショップページに検索を追加する方法
WooCommerceのチェックアウトエラーメッセージを変更する方法
WooCommerceのチェックアウトに日付フィールドを追加する方法
チェックアウト電話番号検証を追加する方法WooCommerce
WordPressファイル共有などのための30のベストダウンロードプラグイン
35以上の最高のフリーフォームプラグインWordPress
WooCommerceで通貨記号を変更する方法
キログラムあたりのWooCommerce製品価格を設定する方法
WooCommerceチェックアウトフィールドを移動する方法
ユーザーがWordPressにログインしているかどうかを確認する方法
WooCommerceチェックアウトページのスタイルを設定する方法
WooCommerceのチェックアウトからクーポンを削除する方法
WooCommerceに通貨を追加する方法[カスタム通貨]
WooCommerceチェックアウトページでチェックボックスフィールドを作成する方法
WooCommerceでチェックアウトURLを取得する方法
WooCommerceモバイルチェックアウト最適化クイックガイド