如何自定義 WooCommerce 註冊表單

已發表: 2021-07-20

您想編輯註冊表並獲得更多潛在客戶嗎？ 在本指南中，我們將向您展示使用和不使用插件自定義 WooCommerce 註冊表單的不同方法。

在線註冊是您在線商店中最重要的部分之一。 這是讓您的客戶創建一個新帳戶以從您的商店購買的標準程序。 為避免下車，您應該確保您的註冊表單是為您的商店量身定制的，並且只有必要的字段。

為什麼要自定義默認 WooCommerce 註冊表單？

當客戶在您的在線商店中註冊新帳戶時，您會收到一些關於他們的信息，例如電子郵件、姓名、賬單地址等。 但是，默認的 WooCommerce 註冊表單僅要求提供電子郵件地址來註冊新帳戶。 這可能會使客戶的流程更快，但也浪費了更好地了解您的購物者的機會。

如果客戶需要提供任何其他信息，他們需要在結賬時或從“我的帳戶”頁面添加。 對於您的購物者來說，這可能是一個非常重複且漫長的過程，甚至可能使他們對您的在線商店失去興趣。

好消息是，您可以通過在註冊表中添加所有必要的字段以及您想要獲取的信息來避免這種情況。 這樣，您將直接獲得信息，客戶無需稍後更新他們的詳細信息，從而為您和您的用戶提供更方便的服務。

現在讓我們看看編輯 WooCommerce 註冊表單的不同方法。

如何自定義 WooCommerce 註冊表單

有 3 種主要方法可以自定義您的 WooCommerce 註冊表單：

  1. 從 WooCommerce 儀表板
  2. 帶插件
  3. 以編程方式

讓我們來看看每種方法。 在開始之前，請確保您已在商店中正確設置 WooCommerce。

1. 從 WooCommerce 儀表板自定義 WooCommerce 註冊表單

默認情況下，您可以從 WooCommerce 儀表板編輯您的註冊表單。 轉到WooCommerce > 設置並打開帳戶和隱私選項卡。 當客戶在您的商店中創建新帳戶時，您可以在此處更改一些選項。

例如，您可以激活選項以在創建帳戶期間自動生成用戶名和密碼。 這些選項默認激活，但您可以禁用它們。

woocommerce 儀表板自定義 woocommerce 註冊表單

還有一些其他選項可以讓客戶在結帳或“我的帳戶”頁面上創建帳戶，允許購物者在沒有帳戶的情況下下訂單，等等。 只需檢查您要啟用的選項，然後保存更改。

如您所見，這些默認選項僅限於編輯您的 WooCommerce 註冊表單。 如果要添加更多字段或進行更大的更改，則必須使用其他方法。

2. 使用插件自定義 WooCommerce 註冊表單

輕鬆自定義 WooCommerce 註冊表單的最佳方法之一是使用專​​用插件。 那裡有幾種工具。 在本教程中，我們將演示如何使用用戶註冊插件來編輯註冊表單。

用戶註冊是一個免費增值插件，允許您創建自己的自定義註冊表單，並且 100% 響應。 您將需要獲得其高級計劃中提供的WooCommerce 附加組件。

2.1。 安裝並激活插件和 WooCommerce 附加組件

要開始使用該插件，您需要安裝並激活它，因此您需要訂閱他們與 WooCommerce 集成的任何高級計劃。

之後，在您的 WooCommerce 儀表板中，轉到插件 > 添加新插件，然後單擊上傳插件。

按選擇文件，選擇您購買後下載的插件的zip文件，然後單擊立即安裝以安裝插件。

安裝後，激活插件。 轉到插件 > 已安裝插件，然後單擊用戶註冊 WooCommerce擴展旁邊的激活。

如果您不熟悉這種方式的安裝過程，請查看我們的指南，了解如何手動安裝插件。

2.2. 創建您的 WooCommerce 註冊表單

要開始創建您的自定義 WooCommerce 註冊表單，請轉到User Registration > Add New 。

創建表單自定義 woocommerce 註冊表單

我們將把我們的新註冊表稱為“ WooCommerce 註冊”，但您可以給它任何您想要的名稱。

默認情況下，表單只要求輸入用戶的電子郵件和密碼，但您可以添加其他字段，例如帳單和送貨地址、國家、郵政編碼、電話號碼等。 只需將它們拖放到您的表單中，一旦您對新的 WooCommerce 註冊表單感到滿意，請單擊創建表單以保存它。

2.3. 替換默認的 WooCommerce 註冊頁面

創建註冊表單後，您需要替換註冊頁面上的默認註冊表單。 為此，請轉到WooCommerce > 設置並打開帳戶和隱私選項卡。

選擇允許客戶在“我的帳戶”頁面上創建帳戶的選項。

在我的帳戶頁面上創建帳戶自定義 woocommerce 註冊表單

然後，轉到用戶註冊 > 設置，打開WooCommerce選項卡並選擇您剛剛在選擇註冊表選項中創建的註冊表單。

之後，會出現幾個字段，您需要勾選替換默認 WooCommerce 登錄和註冊頁面的選項。 要完成該過程，請保存更改。

替換 woocommerce 註冊表單 自定義 woocommerce 註冊表單

現在是時候在前端查看您的新註冊表單了。 轉到註冊頁面並預覽它以查看您新定制的 WooCommerce 註冊表單。

woocommerce 註冊表自定義 woocommerce 註冊表

3. 以編程方式自定義 WooCommerce 註冊表單

如果您不想使用高級插件並具有編程技能，則此方法適合您。 您可以使用代碼片段以幾乎任何方式編輯 WooCommerce 註冊表單。

在您進一步移動之前，我們建議您備份您的 WordPress 網站並創建一個子主題。 您將使用這些片段更改主題文件，如果出現任何問題，它們可能會破壞您的網站，因此最好做好準備。

備份站點並安裝子主題後，您可以開始編輯註冊表單。 在本節中，我們將向您展示您可以做的事情的不同示例。 您需要將代碼片段放在子主題的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( 'Ship to/ Account number', '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); 
函數 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' ) ); } 
返回$錯誤； 
}

// 保存註冊字段值 
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' => __('運送到/帳號', 'woocommerce' ), 
'描述' => '', 
'custom_attributes' => 數組（'maxlength' => 6）， 
); 
返回 $args;
}

這將在“我的帳戶”頁面的“編輯帳戶”部分以及“帳單字段”部分的“管理員用戶”編輯頁面中顯示帳單帳號。

您可以將此代碼段作為基礎並針對您的商店進行調整。 您還可以將其他一些 WooCommerce 註冊表單字段添加到計費部分，例如：

  • billing_first_name
  • billing_last_name
  • 計費公司
  • billing_address_1
  • billing_address_2
  • 計費城市
  • billing_postcode
  • 計費國家
  • 計費狀態
  • 計費電子郵件
  • 計費電話

在結帳時顯示自定義 WooCommerce 註冊表單

您還可以將 WooCommerce 註冊表單添加到結帳頁面。 這對您的客戶來說非常方便，因為它允許他們以客人身份輕鬆瀏覽您的商店，並且只有在他們想要購買東西時才創建一個帳戶。

您可以使用用戶註冊插件輕鬆做到這一點。 您將需要其中一項高級計劃，因此如果您還沒有這樣做，請查看步驟 2.1。 最重要的是，您需要創建您的 WooCommerce 註冊表並將其替換為默認表單。

之後，轉到WooCommerce > 設置並打開帳戶和隱私選項卡。 然後，勾選允許客戶在結賬時創建帳戶並保存更改的選項。

之後，轉到用戶註冊 > 設置並打開WooCommerce選項卡。 勾選同步結帳註冊並保存更改的選項。

這將使您的客戶將用戶註冊與 WooCommerce 結帳註冊同步。 之後，檢查表中的所有字段標籤並保存更改。

結帳時的註冊表自定義woocommerce註冊表

而已！ 現在，您的客戶將能夠在您的網站上結帳時註冊一個新帳戶。

獎勵：編輯 WooCommerce 註冊電子郵件地址

電子郵件地址是註冊的基礎。 作為電子商務商店，您希望擁有客戶的電子郵件地址，以便將來能夠與他們聯繫，提供有關他們的訂單的信息、向他們發送優惠、獨家交易等。

這就是學習如何編輯 WooCommerce 註冊電子郵件非常有用的原因。 最好的方法是自定義電子郵件模板。 最好的部分是您可以從 WooCommerce 儀表板執行此操作。

只需轉到WooCommerce > 設置並打開電子郵件選項卡。 在這裡，您可以藉助電子郵件發件人和電子郵件模板選項更改電子郵件模板。

編輯電子郵件模板自定義 woocommerce 註冊表單

電子郵件發件人選項允許您編輯“發件人”名稱和地址。 這意味著您可以自定義發件人姓名和電子郵件地址在 WooCommerce 電子郵件中的顯示方式。

同樣，您可以編輯電子郵件模板的頁眉圖像、頁腳文本、基本顏色、背景顏色、正文背景和文本顏色。

對您的 WooCommerce 電子郵件進行您想要的所有更改，並通過單擊“單擊此處預覽您的電子郵件模板”鏈接實時查看更改。

一旦您對新模板感到滿意，請記住保存更改。

還有其他方法可以編輯電子郵件模板，允許您自定義許多其他內容。 有關更多信息，請查看我們關於如何編輯 WooCommerce 電子郵件模板的指南。

結論

總而言之，註冊表非常重要，因為它可以讓您收集有關您的客戶的相關信息。 默認註冊表單並不總是為您提供您想要的所有信息，因此自定義它可能是收集您需要的所有詳細信息的一種非常有效的方法。

在本指南中，我們探索了 3 種不同的方法來自定義 WooCommerce 註冊表單：

  • 從 WC 儀表板
  • 使用專用插件
  • 以編程方式

如果您想在這里和那裡進行一些更改，WooCommerce 儀表板中的默認選項可能會很有用。 但是，它提供的選項非常有限，因此如果您想自定義更多內容，我們建議您使用插件。 另一方面，如果您不想安裝第三方工具並具有編碼技能，則可以使用代碼片段以編程方式編輯註冊表單。

有關如何自定義商店的更多信息，請查看以下指南：

  • 如何自定義 WooCommerce 我的帳戶頁面
  • 編輯 WooCommerce 產品頁面
  • 如何在 WooCommerce 中自定義類別頁面
  • 如何編輯 WooCommerce 商店頁面