如何在 WooCommerce 中自定義和分離登錄和註冊頁面

已發表: 2021-04-28

無論您是否使用 WooCommerce，您都可能已經意識到它是當今最流行的開源電子商務解決方案之一。然而，與任何軟件一樣，它確實有某些限制和缺點。在本文中，我們將解決其中一個問題……無法完全自定義和/或分離登錄和註冊頁面。

WooCommerce 用戶最常見的請求之一是能夠更新和自定義登錄和註冊頁面。理想情況下，許多用戶還希望能夠將這些頁面分開，而不是將它們作為“一體式”頁面。在本文中，我們將了解如何實現這兩個目標……為您的 WooCommerce 網站提供完全自定義且獨立的登錄/註冊頁面。

讓我們開始吧！

使用插件

也許不出所料，解決登錄/註冊頁面定制困境的最簡單方法是使用插件。我們選擇了一些您可能會考慮使用的最佳產品。讓我們來看看它們。

Woocommerce 登錄/註冊精簡版

轉到您的 WordPress 管理菜單，然後在“插件 -> 添加新”區域中，安裝並激活插件。

Woocommerce Login / Signup Lite 插件是一個免費插件，還提供高級版本。但是，對於我們的需要，免費版本應該就可以了。它很容易使用。安裝後，您將能夠創建與您需要的表單類型相對應的簡碼（例如登錄或註冊表單）。然後，您可以將此短代碼粘貼到您想要的任何頁面上。簡碼包括：

用於創建登錄表單的[lsphe-login-form]短代碼。
用於創建註冊表單的[lsphe-signup-form]短代碼。
[lsphe-header]短代碼用於創建一個包含登錄和註冊表單的表單。

您可以在插件的管理區域中查看可用的簡碼。

該插件提供的另一個重要功能是能夠從菜單項創建彈出登錄/註冊窗口。這看起來非常整潔，並且在為您的客戶提供登錄選項時提供了更大的靈活性。要創建這些，請按照下列步驟操作：

單擊外觀 > 菜單進入菜單管理屏幕。
使用右上角的箭頭打開屏幕選項並在“顯示高級菜單屬性”中啟用“CSS 類”。

創建一個自定義鏈接菜單項並提供一個“#”URL。將項目命名為您想要的任何名稱並將其添加到菜單中。
一旦它出現在菜單列表中，打開它的手風琴部分，然後在 CSS 類中添加以下內容： phoen-login-popup-open

要對註冊彈出窗口執行相同操作，請遵循相同的步驟並使用phoen-signup-popup-open類，並使用phoen-login-signup-popup-open類來顯示兩種表單。

用戶註冊

用戶註冊插件允許您使用拖放字段創建前端表單，從而簡化表單設計和重新排序。

將插件安裝到“用戶註冊”後，您可以開始為您的 WooCommerce 商店構建定制的註冊表單。您會注意到有一個預先構建的表單，其中包含一個短代碼，您可以將其複制並粘貼到您選擇的位置的網站中。表單將如下所示：

您當然可以非常輕鬆地編輯表單或創建新表單。只需按照插件中的提示進行操作，您就可以立即以您選擇的形式啟動並運行。

登錄/註冊彈出窗口

另一個值得考慮的插件是登錄/註冊彈出窗口（內聯表單 + Woocommerce）。該插件（顧名思義）不是頁面表單，而是幫助您創建可以從您網站上的鏈接或按鈕觸發的彈出登錄表單。彈出窗口很棒，可以幫助節省頁面空間，並讓人們有機會從您網站上的任何位置登錄，而無需重定向到特定的登錄或註冊頁面。

與列出的所有插件一樣，您可以自由地完全自定義表單的設計。其他值得注意的功能包括“社交”登錄等功能，允許用戶使用他們的 Google 或 Facebook 登錄名登錄。這是通過付費的自定義註冊字段插件完成的。

編寫您自己的 WooCommerce 註冊和登錄頁面

如果您不想使用插件來創建自己的 WooCommerce 登錄/註冊頁面，那麼為什麼不自己編寫代碼！與往常一樣，編碼提供了對特性、設計和功能的終極控制，因此如果您需要完成特定任務或想要避免插件帶來的潛在臃腫，這是一個完美的選擇。

要開始使用本教程，首先設置一個鏈接到標準 WooCommerce“我的帳戶”頁面的菜單項。現在，如果您訪問網站前端的此菜單鏈接，您將看到登錄表單或包含註冊表單和登錄表單的兩列佈局。這取決於您在下面顯示的 WooCommerce 帳戶創建選項中設置的內容。

使用 SFTP 客戶端，登錄到您的 Web 服務器，以便查看您的網站文件夾。在/wp-content/plugins/woocommerce/templates/myaccount/下，您會找到form-login.php文件。使用您喜歡的編輯器打開該文件。

此文件中的代碼包括登錄和註冊表單。你可以在官方的 git 頁面上看到這個文件的內容。在那裡你會注意到有一個 if 條件<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?> ，它指的是上面屏幕截圖中的 admin 選項。

使用它，我們將能夠分離登錄和註冊頁面，並通過一些調整來自定義表單。

自定義登錄表單

首先，您需要確保對登錄/註冊表單所做的任何更改都以安全的方式完成，以便在將來發生更新時無法恢復。

如果您已經通過 SFTP 客戶端登錄，請轉到wp-content/themes/__my__theme__ 。並創建一個“woocommerce”文件夾。在此文件夾中，創建 Woocommerce 模板的副本。保留文件結構但刪除 /templates/ 子目錄很重要。例如，我們安裝了 Twenty Twenty 主題，並且 WooCommerce form-login.php位於plugins/woocommerce/templates/myaccount/下。這意味著為了覆蓋表單，我們必須創建這樣的層次結構： /themes/twentytwenty/woocommerce/myaccount/並在其中放置form-login.php文件。

讓我們測試一下。此時我們在訪問我們網站前端的 Account 頁面時會看到以下輸出：

現在，如果我們嘗試更改form-login.php副本中代碼中的任何內容，我們會注意到它會按預期影響佈局。讓我們嘗試一個小改動來檢查它是否有效。我們將“記住我”文本更改為“記住我的憑據”，瞧，如果我們刷新前端頁面，我們應該會看到更新已經生效。

單獨登錄/註冊

為了分離登錄和註冊頁面，您需要執行以下步驟：

首先，我們將註冊一個新的自定義模板。為此，創建一個名為register.php的新文件並將其放在模板文件夾中。在這個文件中，我們將插入以下代碼：

 <?php /* * Template name: Registration Form */ ?> <?php if(is_user_logged_in()){ wp_redirect(get_permalink(get_option('woocommerce_myaccount_page_id'))); } ?> <?php get_header();?> <?php do_action( 'woocommerce_before_customer_login_form' ); ?> <div class="custom-registration"> <h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> </div> <?php do_action( 'woocommerce_after_customer_login_form' ); ?> <?php get_footer();?>

我們最初在這段代碼中所做的是在模板名稱中定義Template name: Registration Form註釋。然後我們檢查用戶是否已經登錄。其餘代碼本質上是login-form.php內容部分的副本，該部分內容與包裹在<div class="custom-registration">中的註冊表單相關<div class="custom-registration">元素。

接下來，我們在 wp-admin Pages 屏幕中添加一個新頁面，並將其命名為我們喜歡的名稱。將其稱為“註冊頁面”可能是有意義的。然後，確保使用右側欄中的模板選擇器選擇正確的模板（我們剛剛創建的模板）。

現在我們要做的就是為用戶提供訪問此頁面的方法。您可以創建一個“註冊”菜單項並將其鏈接到您剛剛創建的註冊頁面，或者您可以編輯form-login.php並將註冊代碼替換為僅指向註冊頁面的鏈接。

如果我們這樣做，我們將修改themes/twentytwenty/woocommerce/myaccount/下的form-login.php文件，使其內容如下所示：

 <?php /** * Login Form * * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 4.1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } do_action( 'woocommerce_before_customer_login_form' ); ?> <h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <a href="/?p=202">Sign Up</a> <?php do_action( 'woocommerce_after_customer_login_form' ); ?>

數字 202 是自定義註冊頁面的 id。快速提醒一下，在後端編輯器中打開 URL 時，您可以在 URL 中看到頁面 id。

現在，如果您從前端查看該頁面，當您訪問帳戶詳細信息頁面時，您應該會看到如下內容：

如果您點擊註冊鏈接，您應該會被重定向到我們創建的註冊頁面，如下所示：

很容易不是嗎？

創建簡碼

WooCommerce 帳戶頁麵包含 [woocommerce_my_account] 短代碼，可用於使用form-login.php文件輸出表單。在本節中，我們將了解如何創建自己的簡碼，一個用於登錄表單，一個用於我們在上面創建的註冊表單。

WooCommerce 註冊簡碼

使用編輯器打開主題的functions.php文件並插入以下行：

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; // OUR REGISTRATION FORM CONTENT } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

通過這樣做，我們避免了使用單獨的自定義模板的需要。相反，我們將包含我們之前創建的模板的內容，如下所示：

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); do_action( 'woocommerce_before_customer_login_form' ); ?> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

如您所見，我們將短代碼命名為 [wc_registration_form] 並將我們的 HTML 包裝在 ob_start() 函數中。通過這種方式，我們打開輸出緩衝，以便 HTML 以字符串形式存儲和返回。

我們現在準備進入我們的管理區域並編輯我們的註冊頁面。打開註冊頁面後，只需插入 [wc_registration_form] 短代碼。在這種情況下，您可以使用您希望使用的任何模板，因為我們不依賴模板本身來生成註冊表單。

現在，當您打開前端的註冊頁面時，您應該會看到註冊表單。

與使用模板頁面相比，使用簡碼為我們提供了更大的靈活性，因為我們可以即時更改整個頁面的設計，而無需重新編碼模板文件。這本身就解釋了為什麼短代碼在 WordPress 中如此受歡迎。

WooCommerce 登錄簡碼

現在我們有了註冊表單的簡碼，我們可以繼續為登錄表創建一個簡碼。再次打開functions.php文件並插入以下代碼：

 // LOGIN SHORTCODE function wc_login_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); ?> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_login_form', 'wc_login_form_function' );

現在，對於註冊頁面，您可以繼續創建一個“登錄”頁面，插入短代碼 [wc_login_form] 就可以了。

如果您想更進一步並規定用戶在退出您的站點時被定向到的頁面，您可以使用wp_logout鉤子，如下所示：

 add_action('wp_logout','my_redirect_after_logout'); function my_redirect_after_logout(){ wp_redirect( '/?p=207' ); exit(); }

上面使用的/?p=207 URL 引用了我們希望引導人們在註銷時訪問的頁面的 ID。將此替換為您選擇的註銷頁面的 ID。

重要提示！

值得記住的是，任何人都可以訪問您的新登錄和/或註冊頁面……而且我們指的任何人都是機器人！因此，保護您的網站免受虛假註冊和暴力登錄非常重要。有關如何保護您的網站的更多信息，我們強烈建議您花時間閱讀我們的指南，了解如何保護您的 WordPress 網站以及如何處理 WordPress 網站上的垃圾郵件活動。

希望本文為您提供了一些關於如何重新構想 WooCommerce 註冊和登錄頁面的想法，並為您提供了在您認為合適的地方進行更改的工具。