Today we will be showing you how we created the login/register page on our frontend demo website. We will also include the layout JSON files for you to download into your website. Below is what we want to achieve. You can view an example of this here.

What we have here is two layouts, login and register. We are going to create a login page and a link to a registration page that looks exactly the same so makes the user think we are still on the same page but have the register section now.

WooCommerce Login/Register custom layout

Step 1: Create the login layout

The first thing we want to do is to create the Login layout. We add an image module with our store logo, two text modules below that have the title of the text “ALREADY REGISTERED?” and “NEW TO OUR SHOP?” and link the new to our shop text to the register page (/register, we still need to create this page but can add it now). At the bottom, we have the “DB Log Login Form” module which outputs the login form. Below is how it looks.

Login backend screenshot
Styling
  1. We have added a custom width of 650px on each of the rows.
  2. Added some custom CSS to the “NEW TO OUR SHOP?” module in the main element in the advanced tab as per below (code 1)
  3. Added some custom CSS to the “ALREADY REGISTERED?” module in the main element in the advanced tab as per below (code 2)

CODE 1

 margin: 0 0 0 5% !important;
 border-bottom: 1px solid #999;
 padding: 20px 0 17px;

CODE 2

 margin: 0 5% 0 0 !important;
 border: 1px solid #999;
 border-bottom: 0;
 padding: 20px 0 17px;

Step 2: Create the register layout

The next thing to do is to create the register layout. The register layout is going to be on a page so you can create this layout on the page itself or if you have downloaded the JSON files, load the layout. Create a new page and name it “Register”, on this page load the layout or create it. We use the same setup as above but switch the two text modules around and change the Login module to the “DB Log Register Form” module that we have created. See below.

Register backend screenshot
Styling
  1. We have added a custom width of 650px on each of the rows.
  2. Added some custom CSS to the “NEW TO OUR SHOP?” module in the main element in the advanced tab as per below (code 2)
  3. Added some custom CSS to the “ALREADY REGISTERED?” module in the main element in the advanced tab as per below (code 1)

CODE 1

 margin: 0 0 0 5% !important;
 border-bottom: 1px solid #999;
 padding: 20px 0 17px;

CODE 2

 margin: 0 5% 0 0 !important;
 border: 1px solid #999;
 border-bottom: 0;
 padding: 20px 0 17px;

Step 3: Finishing it off

Now we have the two layouts – we need to set the login page in the BodyCommerce settings. Go to Divi Engine > BodyCommerce and go to the Login Page tab. On there set the Login layout you just created.

Register backend screenshot

Once this is set, go to the login page in an incognito window and you will see your new login page (yourdomain.com/my-account). Click on “NEW TO OUR SHOP?” and it will take you to the register page. On this page click on “ALREADY REGISTERED” and it will take you back to the login page.

Any questions – please ask 😀 We hope this helps you and gives you ideas for your own store!

Download the Layout JSON files