Silva Web Designs - Web Design / Web Development Specialists
  • Home
  • About
  • Services
  • Portfolio
  • Team
  • Blog
  • Contact
Scroll

Tag: woocommerce shortcode

How to Separate Login and Registration Pages with WooCommerce

Posted on 16th September 20205th October 2020

With WooCommerce, there are times when you would like to send logged out customers directly to a ‘Login Page’ and unregisters customs to its own ‘Register’ page.

If you’re here, you’re probably already aware that the shortcode [woocommerce_my_account] has both login and registrations combined. But this may not be the way you want this to work. Let’s say for example that we want to create a popup that shows just the registration form for a specific page. Using just the shortcode alone, we are not able to do this as it will also contain the login form. Today, we are going to show you two solutions to overcome this problem, one for just the login form then a separate one for just the registration form.

Before you start…

As you may already know, the [woocommerce_my_account] shortcode is a very important one and must be kept on the WooCommerce My Account page at all costs.

What this means is that if you want to keep the login form and the ‘My Account’ dashboard while logged in on the same page, you can just keep using [woocommerce_my_account] for that, together with example one.

If you want to have ‘Login’ + ‘My Account’, with a separate ‘Registration’ page, then you will need to use both the shortcodes shown below:

  • [wc_reg_form_silva] on the Register Page
  • [woocommerce_my_account] on the Login / My Account Page

If you want to have a separate Login, Registration and My Account pages then you need the following three shortcodes:

  • [wc_reg_form_silva] on the Register Page
  • [wc_login_form_silva] on the Login Page
  • [woocommerce_my_account] on the My Account Page

In both cases, you need to disable “Allow customers to create an account on the ‘My Account’ page” as shown below:

Step 1. Separate WooCommerce Customer Registration (Shortcode)

Place this shortcode [wc_reg_form_silva] in a brand new ‘Register’ WordPress page and the register form will appear.


/**
 * @snippet       WooCommerce User Registration Shortcode
 */
   
add_shortcode( 'wc_reg_form_silva', 'silva_separate_registration_form' );
    
function silva_separate_registration_form() {
   if ( is_admin() ) return;
   if ( is_user_logged_in() ) return;
   ob_start();
 
   // NOTE: The following <FORM></FORM> is taken from: woocommerce\templates\myaccount\form-login.php
   // When you update the WooCommerce plugin, you may need to adjust the below accordingly
 
   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' ); ?> <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-FormRow 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();
}

Step 2. Separate WooCommerce Login (Shortcode)

Before implementing this, please check the information above as it might be you don't need this shortcode. [woocommerce_my_account] may be sufficient to show the login form.

Otherwise, please add this shortcode [wc_login_form_silva] to a brand new Login page.


/**
 * @snippet       WooCommerce User Login Shortcode
 */
  
add_shortcode( 'wc_login_form_silva', 'silva_separate_login_form' );
  
function silva_separate_login_form() {
   if ( is_admin() ) return;
   if ( is_user_logged_in() ) return; 
   ob_start();
   woocommerce_login_form( array( 'redirect' => '#' ) );
   return ob_get_clean();
}

Furthermore, if instead, you want to add the shortcode within your page template, you would add this using .

Other than that, this should be everything you need to separate the WooCommere Login and Registration pages. We hope this has helped, should you require any assistance, feel free to drop us an email or leave a comment below.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Posted in WooCommerce, WordpressTagged form, forms, login, my account, register, registration, separate registration, seperate, Shortcode, woocommerce, woocommerce shortcode15 Comments on How to Separate Login and Registration Pages with WooCommerce




Get in touch

Do you need a professional designer/developer for your next project? Get in touch using the form below.


    Categories

    • CSS
    • HTML
    • JavaScript
    • jQuery
    • MSSQL
    • MySQL
    • PHP
    • Technologies
    • Wordpress



    Recent Posts

    • Is Angular used in the Front End or Back End?
    • 10 Most Important Reasons Why Your Startup Needs A Mobile App
    • How Are AI And Machine Learning Revolutionizing Software Development?
    • Website Security Checklist – How to Secure Your Site in 2022
    • How To Configure Your WordPress Writing Settings

    Get best VPN service with secure access and high speeds at IPVanish.com!


    Love our blog?

    Why not sign up to our newsletter for the latest tutorials and web related gossip.

    • Home
    • About
    • Services
    • Portfolio
    • Team
    • Blog
    • Contact

    © Copyright SILVA - 2022 - Cookie Policy | T&C

    We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
    SettingsAccept All
    Privacy & Cookies Policy

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
    Necessary
    Always Enabled
    Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
    Non-necessary
    Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
    SAVE & ACCEPT