如何在 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 注册和登录页面的想法，并为您提供了在您认为合适的地方进行更改的工具。