在 WooCommerce 中啟用電話號碼登錄的 2 種簡單方法

電話號碼登錄是一項方便的功能，旨在增強用戶體驗並簡化登錄和註冊過程。 因此，許多 WooCommerce 用戶希望將此功能實施到他們的在線商店中。

如果您是這些人中的一員，那麼您已經登陸了正確的網頁。 本文將教您如何通過兩種方式讓用戶使用他們的 WooCommerce 電話號碼登錄和註冊。

為什麼要在商店中啟用 WooCommerce 電話號碼登錄？

對於嚴重依賴客戶手機號碼的 WooCommerce 商店，電話註冊和登錄變得非常有用。 例如，送餐、出租車等。

除了這些特定的利基之外，以下是一些有益於任何企業的優勢。

• 買家可以在您的 WooCommerce 商店中使用他們的電話號碼直接登錄和註冊。
• 它避免了您的在線商店中的客戶註冊垃圾郵件。
• 買家也可以在不記住用戶名和密碼的情況下登錄。
• 您可以通過 OTP 短信驗證客戶的電話號碼。
• 所有經過驗證的客戶都是真實的，因此可以防止虛假訂單。
• 您的客戶可以通過移動設備快速收到通知，即使他們無法訪問互聯網。
• 您可以通過客戶的電話號碼快速接觸到促銷和優惠信息。

憑藉這些優勢，您可以輕鬆地增強您的業務戰略，並最終促進您的消費增長。 您擁有以最簡單、最具體的方式與客戶溝通所需的一切。

#1：使用插件在您的 WooCommerce 商店上啟用電話號碼登錄

有幾個插件可以幫助你解決這個問題。 例如：

• 手機號註冊登錄
• 數字：WordPress 手機號碼 OTP 註冊和登錄表格
• 使用手機號碼登錄 WooCommerce

但在本教程中，我們將使用“使用電話號碼登錄”插件，因為它是最受歡迎的免費插件。

在您的WooCommerce商店中安裝激活“使用電話號碼登錄”插件

您需要做的第一件事是在您的WooCommerce商店上安裝並激活“使用電話號碼登錄”插件。 以下是說明。

1. 首先，從 WordPress 儀表板，導航到插件 > 添加新頁面。

2. 在右上角的搜索框中輸入“使用電話號碼登錄”。
3. 該插件應首先出現在列表中。 單擊標題旁邊顯示的立即安裝按鈕。
4. 之後，插件將被下載。 完成後，您將看到立即安裝按鈕變為激活按鈕。 點擊它。

創建一個新的登錄/註冊頁面

下一步是將插件的簡碼插入新的登錄/註冊頁面。

1. 從 WordPress 儀表板導航到頁面 > 添加新內容。

2. 為新頁面選擇一個標題，例如“登錄/註冊頁面”。

3. 將 [idehweb_lwp] 短代碼放入其中。
4. 發布頁面。

使用 Firebase 每月獲得 10,000 條免費 OTP 短信

當新用戶在您的 WooCommerce 商店註冊帳戶時，驗證碼將發送到他們的手機號碼。 因此，您需要提供一個 SMS 網關以使插件正常運行。

您可以使用 Google 的 Firebase。 它每月免費提供 10,000 條 OTP 短信。 方法如下：

1. 使用您的 Google 帳戶登錄 Firebase 控制台。
2. 單擊創建項目按鈕。

3. 現在，您需要輸入新項目的名稱，接受 Firebase 的條款和條件，然後單擊創建項目按鈕。
4. 成功創建項目後，在左側邊欄上，轉到Build > Authentication頁面。

5. 單擊開始按鈕。
6. 選擇電話作為提供商。

7. 切換右上角的切換開關以啟用此選項。 然後單擊保存按鈕。

8. 向下滾動到授權域部分。 單擊添加域按鈕並輸入您的 WooCommerce 商店的域名。 然後單擊添加按鈕。

9. 現在，轉到模板選項卡。

10. 單擊模板語言文本旁邊的鉛筆圖標。 接下來，選擇您喜歡用於 SMS 驗證的語言。

11. 單擊Project Overview文本旁邊的齒輪圖標，然後選擇Project settings 。

12. 向下滾動到您的應用部分。 然後點擊網頁圖標。

13. 輸入新應用的暱稱。 然後單擊註冊應用程序按鈕。

14. 選擇使用 <script> 標籤選項並複制提供的腳本。

15. 現在，轉到您的 WooCommerce 商店的 WordPress 儀表板。 然後訪問“登錄設置”頁面。

16. 將腳本粘貼到Firebase 配置文本框中。
17. 返回 Firebase 窗口，複製腳本中提供的 API 密鑰。

18. 返回 WordPress 窗口，將 API 密鑰粘貼到Firebase api文本框中。

19. 最後，向下滾動到頁面底部，然後單擊保存更改按鈕。

此外，您可以在此處配置應用程序。 您應該檢查設置，看看是否還有其他需要調整的地方。

#2：以編程方式在您的 WooCommerce 商店中啟用電話號碼登錄

在本教程中，我們將在您的 WooCommerce 商店的登錄表單上再添加一個電話號碼選項。 請注意，這不會像上一個教程那樣發送 OTP SMS 來驗證用戶。

用戶可以選擇更方便的方式。 您可能已經在亞馬遜登錄表單上看到了這一點。 它允許用戶使用電子郵件或電話號碼登錄。

您需要將自定義 PHP 代碼添加到當前活動主題的“functions.php”文件中。 如果您不知道如何操作，請按照以下說明操作：

1. 從 WordPress 儀表板導航到外觀 > 主題文件編輯器頁面。

2. 在右上角選擇您正在使用的主題。
3. 從右側邊欄訪問“functions.php”文件。

添加電話號碼條目

要在您的 WordPress 電子商務網站上啟用 WooCommerce 電話號碼登錄，您需要將用戶的電話號碼存儲在“wp_usermeta”表中。

這可以在用戶註冊時完成。 您可以使用以下代碼來實現此目標。

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

一旦你有了一個帶有值的“user_phone”meta_key，你就可以用電話號碼檢查用戶的憑據。

創建登錄表單

現在，讓我們創建一個簡單的登錄表單，用戶可以在其中輸入他們的登錄詳細信息。 它將具有以下元素：

• 用於輸入用戶名/電子郵件/電話的文本字段
• 用於輸入密碼的文本字段
• 避免 CSRF 攻擊的隨機數（它是一個隱藏字段）
• 提交按鈕

<?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

在上述腳本中，我們添加了 HTML 代碼並調用了“log_the_user_in()”方法。 這負責檢查用戶的憑據。

如果服務器端出現一些錯誤，我們會通過“get_error_message()”方法通知用戶。

在下一步中，我們需要定義“log_the_user_in()”方法並返回錯誤。

在 WooCommerce 中使用電話號碼登錄

當用戶填寫憑據並單擊提交按鈕時，我們將獲取憑據並根據數據庫對其進行驗證。

如果一切都匹配，我們會將它們登錄並將它們重定向到主頁。 對於虛假登錄，將使用“WP_Error”類記錄錯誤。 根據您的需要，您可以通過更改代碼將其更改為任何其他頁面。

我們將在“init”鉤子上定義“log_the_user_in()”方法。 這個鉤子在 WordPress 完成加載之後但在任何標題發送之前觸發。 這是使用 POST 方法處理表單的理想選擇。

下面是代碼：

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

在這裡，我們首先驗證了 nonce 以保護表單免受某些類型的誤用、惡意代碼和 CSRF 攻擊。

接下來，基於“is_email()”或“is_numeric()”方法，WordPress 將檢查有效的電子郵件或電話號碼。 如果輸入的值不是電子郵件或電話號碼，我們將檢查用戶名。

最後的話

這就是在您的 WooCommerce 商店中添加電話號碼登錄。 我希望它對您的項目有所幫助。

如果您發現本文有幫助，請隨時在下面的評論部分分享您的想法和建議。