The login/register page is the same page as the “my account” page but before the user signs in. By default, this page displays a login form and register a new account form if you allow that.
Using the WooCommerce Builder, you can make this page a beautiful login page.
Before you start
Your website must have an account page. When you install WooCommerce, it creates that page for you. Basically, it is a normal page under your admin dashboard -> Pages. If you don’t have it, go and create one.
The content of the “my account” page is just a simple shortcode [woocommerce_my_account]. we will keep that page as it is and will not use Divi builder on it. Divi Library is the place to build the layout.
Build the login/register layout
Now, let’s build the layout.
Get started
1- Go to your admin dashboard -> Divi -> Divi Library.
2- At the very top, click “Add new,” a new layout popup will open. Here you can set the layout name and the layout type.
You can name the layout whatever you want but make sure you select “Layout” as the layout type. And then, click the “Submit” button.
3- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
Login/Register modules
This is a list of the essential modules you need to add to your layout.
1- Woo Notices
This is a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of messages from WooCommerce like when a product is added to the cart or there is no enough stock of a specific product and so on.
You can place this module anywhere you want but it is recommended to add it to the top of the layout so it’s very obvious for your clients.
2- Woo Page Title
This module will display the page title. You don’t have to use this module, you can use a text module and add a custom title to your page.
3- Woo Breadcrumb
The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Current Page”, this module is not required.
4- Woo Login/Register
This module will display both the login and the register form, after the client login, it will take the client to the account page.
Apply the login/register layout
After creating the layout, go to your admin dashboard -> Wc Builder -> My Account tab -> Login/Register Layout.
Select the layout you just created from the drop-down menu and save the changes.