如何使用模板在 WooCommerce 的两个不同页面上显示登录和注册表单

Posted

技术标签:

【中文标题】如何使用模板在 WooCommerce 的两个不同页面上显示登录和注册表单【英文标题】：How to show the login and register form on two different pages with WooCommerce using templates 【发布时间】：2021-04-30 00:03:10 【问题描述】：

我有一个显示login 和register 表单的我的帐户页面。下面是截图。目前还没有 CSS。

我的问题是，我必须将两个页面分开。我的意思是我必须创建一个登录名并分别注册两个页面。

这是整个代码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' ); ?>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

<div class="u-columns col2-set" id="customer_login">

    <div class="u-column1 col-1">

<?php endif; ?>

        <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" id="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" id="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" id="rememberme" 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 if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

    </div>

    <div class="u-column2 col-2">

        <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" 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' ); ?>&nbsp;<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' ); ?>&nbsp;<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-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>

</div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_customer_login_form' ); ?>

我在 Stack Overflow 上找到了两个链接：

How to create separate log-in and registration pages in WooCommerce

Separate registration page in WooCommerce website

我找到了这段代码

<?php
if( isset($_GET['action']) == 'register' ) 
    wc_get_template( 'myaccount/form-register.php' );
 else 
    wc_get_template( 'myaccount/form-login-single.php' );

?>

我有几个问题：

    我应该在哪里添加此代码？ 我需要在 WordPress 中创建登录和注册页面吗？ 或者我是否需要创建一个登录名并在我的帐户中注册，例如 form-login-1.php 和 form-register-1，然后使用简码单独添加代码？

【问题讨论】：

【参考方案1】：

要为登录表单和注册表单创建两个单独的页面，需要有 3 个模板。使用模板，您不必更改一行 functions.php。

这个sn-p：

<?php
if( isset($_GET['action']) == 'register' ) 
    wc_get_template( 'myaccount/form-register.php' );
 else 
    wc_get_template( 'myaccount/form-login-single.php' );

?>

具有加载登录表单模板或注册表单模板的目的基于页面的url。

目标是：

如果页面url为www.yourdomain.com/my-account/，则加载登录表单 如果页面url为www.yourdomain.com/my-account/?action=register，则加载注册表

前提

要正确查看注册表，您必须启用“允许客户在我的帐户页面创建帐户”功能。

从 Wordpress 管理页面转到：WooCommerce > 设置 > 帐户和隐私。

儿童主题

所有模板都必须在您的子主题中加载（否则它们 将在下一次 WooCommerce 插件更新时被覆盖）。

目录是：/your-child-theme/woocommerce/myaccount/

模板

需要有3个模板文件：

    form-login.php：用户未登录时加载的模板。 form-login-single-page.php：将包含登录表单的模板 form-register-single-page.php：将包含注册表单的模板

form-login.php /your-child-theme/woocommerce/myaccount/form-login.php

<?php
/**
 * Login Form (by default)
 */

if ( ! defined( 'ABSPATH' ) ) 
    exit; // Exit if accessed directly.


if( isset( $_GET['action'] ) == 'register' ) 
    wc_get_template( 'myaccount/form-register-single-page.php' );
 else 
    wc_get_template( 'myaccount/form-login-single-page.php' );

form-login-single-page.php /your-child-theme/woocommerce/myaccount/form-login-single-page.php

<?php
/**
 * Login Form
 */

if ( ! defined( 'ABSPATH' ) ) 
    exit; // Exit if accessed directly.


do_action( 'woocommerce_before_customer_login_form' ); ?>

<div class="u-columns col2-set" id="customer_login">

    <div class="u-column1 col-1">

        <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" id="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" id="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" id="rememberme" 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>
                <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>?action=register" class="woocommerce-button button woocommerce-form-register" name="register"><?php esc_attr_e( 'Register', 'woocommerce' ); ?></a>
            </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 do_action( 'woocommerce_after_customer_login_form' ); ?>

form-register-single-page.php /your-child-theme/woocommerce/myaccount/form-register-single-page.php

<?php
/**
 * Register Form
 */

if ( ! defined( 'ABSPATH' ) ) 
    exit; // Exit if accessed directly.


?>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

<div class="u-column2 col-2">

    <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" 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' ); ?>&nbsp;<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' ); ?>&nbsp;<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-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>
            <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="woocommerce-button button woocommerce-form-login" name="login"><?php esc_attr_e( 'Log in', 'woocommerce' ); ?></a>
        </p>

        <?php do_action( 'woocommerce_register_form_end' ); ?>

    </form>

</div>

<?php endif;

结果

登录表单www.yourdomain.com/my-account/

注册表单www.yourdomain.com/my-account/?action=register

注意

用户名和密码字段将根据管理页面上选择的相应选项可见或隐藏：WooCommerce > 设置 > 帐户和隐私：

创建帐户时，根据客户的姓名、姓氏或电子邮件自动为客户生成帐户用户名 创建账号时，自动生成账号密码

模板已经过测试并且可以工作。

自定义字段

随意根据自己的喜好修改模板。 您可以编辑或添加自定义字段。在后一种情况下，请记住验证并保存自定义字段的数据。您可以使用以下钩子：

woocommerce_register_form：添加自定义字段 woocommerce_process_registration_errors：验证字段 user_register：将自定义字段保存为用户元

【讨论】：

给我一些时间来检查你的答案。 我根据答案添加了所有代码。现在如何访问登录和注册 URL？ 在页面www.yourdomain.com/my-account 上，您会找到登录表单（如果您尚未登录），在“登录”按钮旁边，您还会找到“注册”。当然，您可以通过修改模板和/或添加 CSS 样式来自定义它。 我还添加了结果的截图。 感谢您的回答。给我一些时间来实现你的答案。

以上是关于如何使用模板在 WooCommerce 的两个不同页面上显示登录和注册表单的主要内容，如果未能解决你的问题，请参考以下文章

WooCommerce 搜索结果模板

如何创建自定义 woocommerce 仪表板模板

WooCommerce 插件模板覆盖

WooCommerce：如何在循环外显示销售产品

使用 WC_Query 获取销售的 WooCommerce 产品

如何调用woocommerce的订单列表