To create two separate pages for the login form and the registration form it is necessary to have 3 templates. Using templates, you won't have to change a single line of functions.php.
This snippet:
<?php
if( isset($_GET['action']) == 'register' ) {
wc_get_template( 'myaccount/form-register.php' );
} else {
wc_get_template( 'myaccount/form-login-single.php' );
}
?>
has the purpose of loading the template of the login form or the template of the registration form based on the url of the page.
The goal will be:
- if the page url is
www.yourdomain.com/my-account/, the login form is loaded
- if the page url is
www.yourdomain.com/my-account/?action=register, the registration form is loaded
PREMISE
To view the registration form correctly, you must enable the "Allow customers to create an account on the My account page" function.
From the Wordpress admin page go to: WooCommerce > Settings > Accounts & Privacy.
CHILD THEME
All templates must be loaded within your child theme (otherwise they
will be overwritten at the next WooCommerce plugin update).
The directory is: /your-child-theme/woocommerce/myaccount/
TEMPLATES
It is necessary to have 3 template files:
form-login.php: the template that is loaded when the user is not logged in.form-login-single-page.php: the template that will contain the login formform-register-single-page.php: the template that will contain the registration form
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' ); ?> <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' ); ?> <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' ); ?> <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-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;
RESULT
Login form
www.yourdomain.com/my-account/
Register form
www.yourdomain.com/my-account/?action=register
NOTE
The Username and Password fields will be visible or hidden according to the respective options selected on the administration page: WooCommerce > Settings > Accounts & Privacy:
- When creating an account, automatically generate an account username for the customer based on their name, surname or email
- When creating an account, automatically generate an account password
The templates have been tested and work.
CUSTOM FIELDS
Feel free to modify the templates to your liking. You can edit or add custom fields. In the latter case, remember to validate and save the data of the custom fields. You can use the following hooks:
woocommerce_register_form: to add custom fieldswoocommerce_process_registration_errors: to validate the fields
