WooCommerce by default displays both login and registration forms on the same page when “Allow customers to create an account“ is enabled on the My Account page.
However, for a cleaner and more user-friendly experience, you may want to hide the registration form initially and show it only when users click on the “Don’t have an account?” link. This method keeps the interface focused while still allowing easy access to the registration option.
In this tutorial, we will use PHP and jQuery to modify the WooCommerce login/register page. We’ll insert a toggle link below the login form and ensure the registration form remains hidden until clicked.
This approach enhances usability, especially for stores where most visitors are returning customers and primarily need to log in. Below, you’ll find the necessary code to implement this functionality.
PHP / jQuery Snippet: Toggle Login & Registration Form @ My Account Page
This WooCommerce customization toggles the registration and login forms on the My Account page. When registration is enabled in WooCommerce settings, a “No account? Register here” link appears below the login form, allowing users to switch to the registration form without reloading the page.
Similarly, a “Already have an account? Log in here” link appears below the registration form, letting users return to the login form.
This is achieved using jQuery to hide the registration form initially and toggle visibility when the links are clicked. The script improves user experience by keeping the My Account page clean and interactive, making it easier for customers to switch between login and registration.
The code ensures both forms remain functional and properly styled by adjusting their default classes. This enhancement is particularly useful for stores that want to simplify the account access process and improve conversion rates.
/**
* @snippet Toggle Registration / Login Forms @ My Account
* @tutorial https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_login_form_end', 'bbloomer_my_account_registration_show_onclick' );
function bbloomer_my_account_registration_show_onclick() {
if ( 'yes' !== get_option( 'woocommerce_enable_myaccount_registration' ) ) return;
echo '<p><a href="#" id="show-registration">No account? Register here</a></p>';
wc_enqueue_js( "
var loginForm = $('#customer_login > .u-column1').removeClass('col-1');
var regForm = $('#customer_login > .u-column2').removeClass('col-2');
regForm.hide();
$('#show-registration').click(function(e) {
e.preventDefault();
loginForm.slideToggle();
regForm.slideToggle();
});
" );
});
add_action( 'woocommerce_register_form_end', 'bbloomer_my_account_login_show_onclick' );
function bbloomer_my_account_login_show_onclick() {
if ( 'yes' !== get_option( 'woocommerce_enable_myaccount_registration' ) ) return;
echo '<p><a href="#" id="hide-registration">Already have an account? Log in here</a></p>';
wc_enqueue_js( "
var loginForm = $('#customer_login > .u-column1');
var regForm = $('#customer_login > .u-column2');
$('#hide-registration').click(function(e) {
e.preventDefault();
loginForm.slideToggle();
regForm.slideToggle();
});
" );
});
Now that the snippet is installed, let’s take a look at two screenshots!
Screenshot 1: My Account Page [Logged Out] On Load
On load, the My Account page displays the standard WooCommerce login form – while the registration form is hidden.
The login form consists of two input fields for the email/username and password, along with a “Log in” button. Below the password field, there is a “Lost your password?” link for users who need to reset their credentials. At the bottom, you see the new “No account? Register here” link, inviting new users to switch forms.
The registration form remains hidden at this stage, keeping the layout clean and focused on returning customers.
Screenshot 2: My Account Page [Logged Out] On “No account? Register here” Click
After clicking the “No account? Register here” link, the login form smoothly slides up and hides, while the registration form appears in its place.
The registration form contains fields for the user’s email and password, mirroring WooCommerce’s default structure. At the bottom of this form, a “Already have an account? Log in here” link appears, allowing users to switch back to the login form if needed.
The transition between forms happens seamlessly, improving usability and providing a more intuitive experience for customers signing up for the first time.
