Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

How to Separate Login and Register Pages in Woocommerce

How to Separate Login and Register Pages in Woocommerce

As you already know, woocommerce comes with login and register on the same page. In order to separate login and register pages in woocommerce you will have to follow few easy steps. First of all make sure you have FTP access to the server because we will have to create a new file and a new folder if you don't already have it in your root theme folder.

Separate Login and Register Pages in Woocommerce

First step is to connect to your server using your favourite FTP client then go in wp-content/themes/YourTheme. Here check if exists a folder called templates, if not, let's create it. In the new created folder we will create a new file called: Register.php, then, open the file and add the following bunch of code:
<?php
	/*
	 * Template name: Register
	 */
?>
<?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' ); ?>
<section id="register_page" class="register_page">
	<div class="container">
		<div class="register_structure">
			<form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >
				<?php do_action( 'woocommerce_register_form_start' ); ?>
				<div class="form-box">
					<div class="section-title custom-title">
						<h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2>
					</div>
					<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
						<div class="item">
							<label for="reg_username"><?php esc_html_e( 'Nume si prenume*', '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 ?>
						</div>
					<?php endif; ?>
					<div class="item">
						<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 ?>
					</div>
					<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
						<div class="item">
							<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" />
						</div>
					<?php else : ?>
						<p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>
					<?php endif; ?>
					
				</div>
				<?php do_action( 'woocommerce_register_form' ); ?>
				<div class="item btn-default">
					<?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>
				</div>
				<?php do_action( 'woocommerce_register_form_end' ); ?>
			</form>
		</div>
	</div>
</section>
<?php do_action( 'woocommerce_after_customer_login_form' ); ?>
<?php get_footer();?>
The above code is the default woocommerce code used for the register form. Go in wp-admin -> Pages -> Create new page. Name the page Register and make sure you select template 'Register' from the right side options. As you can see in the above code, first lines of this file start with "Template name:" php comment, these lines of code tells Wordpress that this file is for Register template. Also, you can change options for the register form using Woocommerce settings. Woocommerce -> Settings ->  Accounts & Privacy. The last thing we have to do is to hide the register form from login page. Let's go back to the ftp client and open the woocommerce folder, the one is located in your current theme folder (do not edit directly in the plugin files, you have to override the woocommerce the templates, if you don't know how, check this blog we have a tutorial for this too). Go in woocommerce -> myaccount -> form-login.php. Find the form with the following class: "woocommerce-form-register" and delete the whole structure of this form.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
*/?>