如何在 WooCommerce 中創建單獨的登錄和註冊頁面

已發表: 2021-05-18

WooCommerce 中的單獨登錄和註冊頁面您是否正在尋找一種以編程方式分隔登錄和註冊頁面的方法？這個簡短的教程將為您提供一個簡單的解決方案。

您可能希望將已註銷的客戶發送到登錄頁面，將未註冊的客戶發送到單獨的頁面。默認情況下，WooCommerce 在同一頁面上顯示登錄表單和註冊表單。

值得一提的是，WooCommerce 我的帳戶頁面由 [woocommerce_my_account] 短代碼顯示。

如果您想使用具有特定目標（如用戶註冊）的登錄頁面或銷售頁面，則在同一頁面上同時擁有登錄和註冊表單可能不是一個好主意。這意味著此頁面不需要登錄表單。

如何在 WooCommerce 中創建單獨的登錄和註冊頁面

在這個簡短的教程中，我們將向您展示如何分離登錄和註冊頁面。我們將向您展示如何創建兩個新的短代碼，一個用於登錄表單，一個用於註冊表單。這些簡碼可以在您網站的任何地方使用。

讓我們看看如何實現這一目標。

在 WooCommerce 中創建單獨的登錄和註冊頁面的步驟

在繼續之前，請務必注意用於創建短代碼的內容是從 WooCommerce 模板文件中復制的。這意味著當 WooCommerce 在更新期間發布對這些文件的任何更改時，您需要更改代碼的某些部分。

請繼續閱讀，因為我們還將向您展示如何使用短代碼。

以下是您需要遵循的步驟：

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。當主題編輯器頁面打開時，查找主題函數文件，我們將在其中添加將創建註冊頁面短代碼的函數。
將以下代碼添加到php文件中：

add_shortcode( 'wc_reg_form_njengah', 'njengah_separate_registration_form' );

function njengah_separate_registration_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

// NOTE: THE FOLLOWING <FORM></FORM> IS COPIED FROM woocommerce\templates\myaccount\form-login.php

// IF WOOCOMMERCE RELEASES AN UPDATE TO THAT TEMPLATE, YOU MUST CHANGE THIS ACCORDINGLY

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' ); ?> <span class="required">*</span></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_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' ); ?> <span class="required">*</span></label>

<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_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' ); ?> <span class="required">*</span></label>

<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_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-FormRow 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();

}

第二個短代碼是 [wc_login_form_bbloomer]。您應該將其添加到全新的頁面。在同一文件中添加以下代碼：

add_shortcode( 'wc_login_form_njengah', 'njengah_separate_login_form' );

function njengah_separate_login_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

woocommerce_login_form( array( 'redirect' => 'https://custom.url' ) );

return ob_get_clean();

}

如何使用簡碼

如前所述， [woocommerce_my_account]短代碼顯示“我的帳戶”頁面。如果您想在同一頁面上登錄時保留登錄表單和帳戶頁面儀表板，您應該使用第一個短代碼： [woocommerce_my_account] 。

如果您想要登錄 + 我的帳戶，以及單獨的註冊頁面：

註冊頁面上的 [wc_reg_form_njengah]
登錄 + 帳戶頁面上的 [woocommerce_my_account]

如果您想擁有單獨的登錄、註冊和我的帳戶頁面：

wc_reg_form_njengah] 在註冊頁面上
登錄頁面上的 [wc_login_form_njengah]
我的帳戶頁面上的 [woocommerce_my_njengah]

但是，您需要禁用“允許客戶創建帳戶”，如下所示：

結論

這就是分離登錄和註冊頁面所需要做的一切。請記住將短代碼複製並粘貼到新頁面上。

我們建議創建一個子主題。這將確保您的更改在更新期間不會丟失。

我們希望這篇文章有助於解決您的問題。

類似文章

如何添加 WooCommerce 我的帳戶頁面重定向
登錄 WooCommerce 後如何重定向到購物車
如何在 WooCommerce 中註銷時清除購物車
如何在我的帳戶頁面 WooCommerce 上隱藏儀表板
如何隱藏任何選項卡我的帳戶頁面 WooCommerce
如何刪除下載菜單我的帳戶頁面 WooCommerce
如何在 WooCommerce 中獲取付款方式 » 代碼示例
如何將 PDF 發票附加到電子郵件 WooCommerce
如何訪問 WooCommerce 數據庫
如何在 WooCommerce 中更改電子郵件發件人
如何在 WooCommerce 中導出產品
如何創建 WooCommerce 登錄註銷簡碼
如何在每個產品結帳後創建 WooCommerce 重定向
保護您的網站的 30 個最佳 WordPress 安全插件
如何在 WooCommerce 社交登錄中添加社交登錄
如何在 WooCommerce 註冊表單中添加字段
如何登錄 WooCommerce 管理員
如何在不使用插件的情況下在 WordPress 中成功登錄後重定向用戶
如何在 WooCommerce 中創建我的帳戶頁面
如何訪問 WordPress 管理儀表板或登錄到您的 WordPress 儀表板