如何在 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' ); ?></標籤>

       <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_address_1
billing_address_2
計費城市
billing_postcode
計費國家
計費狀態
計費電子郵件
計費電話

既然已經創建了表單，我們需要使用應該插入到 functions.php 文件中的以下代碼來驗證它們：

 /**

*註冊字段驗證。

*/

功能 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>: First name is required!', '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 文件中添加以下代碼將這些值保存到數據庫中：

 /**

* 下面的代碼保存額外的字段。

*/

功能 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 移動結帳優化快速指南