Woocommerce removed support for separate login and register forms because of the complications. But that is one of the top requested items by the shop owners. In this post, I am going to show you how to achieve that really quick using Woocommerce hooks and templates.

Note 1. You need basic PHP and WordPress Theme Development skills for this modification. If you don’t know what you are doing, maybe it is best to Hire a WordPress Consultant to apply this fix for you.

Note 2. This method allows you to quickly separate forms. But, it doesn’t solve the complications of having two separate forms. You need to handle use case scenarios for the output.


Separate Login and Register Forms Using Shortcode

To separate our forms, first we need to override login page template provided by Woocommerce. Follow steps below to remove register form from the login template:

  1. Copy woocommerce form-login.php file from your Woocommerce/templates/myaccount directory to your theme folder under woocommerce/myaccount directory.
  2. Remove register form from the file. See the example below:
<?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" 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 do_action( 'woocommerce_after_customer_login_form' ); ?>
  1. Now, we need to create another template for the registration form. Create a new file named form-register.php in the same directory. It should be like this:
<?php
if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}
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" 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>
    
<?php do_action( 'woocommerce_after_customer_login_form' ); ?>
  1. Now we need a shortcode to display this new template. Simply add the following code to your theme’s functions.php file.
add_shortcode( "wpa_woocommerce_register_form", 'woocommerce_register_user_form_shortcode' );
function woocommerce_register_user_form_shortcode( $atts, $content = '' ){
	if( function_exists( 'wc_get_template' ) && ! is_admin() ){
		wc_get_template( 'myaccount/form-register.php' );
	}
}
  1. Aaaand, we are done! Now you can place [[wpa_woocommerce_register_form]] shortcode to the registration page. For the login page you can use [[woocommerce_my_account]] shortcode.

What Complications Do We Have

Well, of course this solution doesn’t solve your all problems. Here are the list of complications for you to solve 🙂

  • Login page should redirect to shop after login
  • If a user is logged in, register form should be hidden
  • or maybe it should redirect the user to the shop?

Here we have provided a quick solution for separating WooCommerce login and register pages. Of course that is not the best solution, but it works.

Do you like this solution? Leave your comments below!

If you are into developing for WordPress, check out our other WordPress Tips and How To tutorials.

Ciao!

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *