如何在 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 仪表板