Skip to content
phpsof.com

PHP Stackoverflow

Learn anything with me

  • Home
  • About Me
  • PHP
    • Codeigniter
    • Laravel
    • Magento 1
    • Magento 2
    • Woocommerce
    • WordPress
  • Javascript Frameworks
    • Javascript
    • Angular Js
    • Jquery
    • Node Js
    • React Js
    • Vue Js
    • Datatables
    • jQuery Validation Engine
  • Database
    • Mysql
  • Privacy Policy
  • Terms & Conditions
  • Contact
Home » A Guide to Create WooCommerce Custom Login and Registration Pages
February 7, 2021February 27, 2021 PHP - Stackoverflow

A Guide to Create WooCommerce Custom Login and Registration Pages

PHP, Woocommerce, Wordpress

A website user needs to login or register on your web page. So, you need to redirect your customers to two distinct pages. New users will be directed to the Register page and logged out users will be directed to the login page. Further, this tutorial will guide you on how to create WooCommerce Custom Login and Registration Pages.

The WooCommerce My Account page has the woocommerce_my_account shortcode. It contains both Login and Registration web forms. However, you do not want the login form to load every time. Especially, it is not required when you have a landing page or sales page with a specific user registration goal. 

Reading further, you will find two shortcodes for Login form and Registration form. However, you need to be aware of new WooCommerce updates. As in whenever the new update comes, you have to update your shortcodes too. 

Steps to follow before using the shortcodes

You need woocommerce_my_account shortcode in case of creating Custom Login and Registration Pages. So, this code is required when you want to set the login form and the My Account dashboard active. You wish to keep both these elements open while logged in on the same page. 

When you want to have LOGIN + MY ACCOUNT & a separate Registration page, then use the below codes:

  • [wc_reg_form_phpsof], use it on the Register page
  • [ woocommerce_my_account ], use it on the Login/My Account page

When you want to have separate pages for Login, Registration and My Account, then use the below codes:

  • [wc_reg_form_phpsof], use it on the Register page
  • [wc_login_form_phpsof], use it on the Login page
  • [ woocommerce_my_account ], use it on the My Account page

While applying both the codes, make sure that you turn off ‘Allow customers to create an account on the ‘My Account’ page. This option is available in the WooCommerce plugin under the ‘Accounts & Privacy’ option. 

Snippet#1 (PHP): Separate WooCommerce Customer Registration

woocommerce-hide-registration-form-my-account.png

You can implement the below shortcode in your ‘Register’ WordPress page. Doing so, the Register form will start to show up. This step is important to be followed while creating Custom Login and Registration Pages.

add_shortcode( 'wc_reg_form_phpsof', 'phpsof_separate_registration_form' );
    
function phpsof_separate_registration_form() {
   if ( is_admin() ) return;
   if ( is_user_logged_in() ) return;
   ob_start();
 
   // NOTE: THE FOLLOWING <FORM></FORM> IS COPIED FROM woocommerce\templates\myaccount\form-login.php
   // IF WOOCOMMERCE RELEASES AN UPDATE TO THAT TEMPLATE, YOU MUST CHANGE THIS 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();
}

Snippet#2 (PHP): Separate WooCommerce Login

Firstly, you can use the below shortcode i.e. woocommerce_my_account. Otherwise, you can also use this shortcode ([wc_login_form_phpsof]) for a new login page. 


add_shortcode( 'wc_login_form_phpsof', 'phpsof_separate_login_form' );
  
function phpsof_separate_login_form() {
   if ( is_admin() ) return;
   if ( is_user_logged_in() ) return; 
   ob_start();
   woocommerce_login_form( array( 'redirect' => 'https://custom.url' ) );
   return ob_get_clean();
}

Where to add the snippet?

You can put the PHP snippets in either of these two places. One way is to put them in your child theme functions.php file (delete “?>”, in case you have it there). In another way, you need to put CSS in your child theme style.css file. This is how you create Custom Login and Registration Pages.

Also Read, Build Popup contact form using jQuery and PHP

Add Datatable Custom Filter Dropdown Server-side processing with PHP

Tagged woocommerce, woocommerce custom coding, woocommerce custom login, woocommerce custom register, wordpress

Post navigation

A Stepwise Tutorial to Login with Instagram using PHP
WooCommerce How to Remove Product from Cart Programmatically

Related Posts

  • Everything That You Should Know About What is Laravel

  • Image showing Magento 2 Tutorial

    Step by Step Magento 2 Tutorial for Beginners Level

  • A Tutorial to Display WooCommerce Product Category Dropdown Widget

Search

Recent Posts

  • Everything That You Should Know About What is Laravel
  • Step by Step Magento 2 Tutorial for Beginners Level
  • A Tutorial to Display WooCommerce Product Category Dropdown Widget
  • Everything That You Should Know About What is PHP
  • A Complete Tutorial to Get Cart Info (total, items, etc) from $cart object

Categories

  • Ajax (2)
  • Database (2)
    • Mysql (2)
  • Javascript (1)
  • Javascript Frameworks (4)
    • Datatables (1)
    • Jquery (4)
  • PHP (23)
    • Woocommerce (12)
    • Wordpress (14)
  • facebook
  • twitter
  • youtube
All Rights Reserved 2020 - 2021
Privacy Policy | Terms & Conditions