Account Form – Login widget provides a login form for the customers which they can use to log in and access their account information. This is a My Account Template widget.

Let’s learn how you can use Account Form – Login Widgets on your wooCommerce site:

Note: Customers need to register before they can log in, so make sure you add that widget too. Check out the Account Form Register documentation.

Step 1: Enable the widget #

To enable the widget,

• Go to ShopEngine > Widgets > Account Form – Login
• Turn on 
• Save changes

Note: You can also turn on Account Form – Login with a global setting that turns on all the widgets of ShopEngine. 

Step 2: Add Account Form – Login Widget #

Before you can add the widget you need to create a My Account Login / Register Template first. Check out the documentation on how to create a My Account Login / Register template.

To add Account Form – Login:

• Go to ShopEngine > Templates > My Account Login / Register
• Click on Edit with Elementor

• Search for Account Form – Login on Elements Search option
• Drag and drop the widget 
• Click on Update to save changes.

Step 3: Style Settings #

Click on the edit option to go to the Style Tab to customize the following styles of this widget:

Label: #

• Color: Pick a color for the label.
• Required Indicator Color: Choose a color for the label.
• Font size (px): Here you can set the font size for the label.
• Margin (px): Adjust the top, left, right, and bottom margin around the label.

Input: #

• Font size (px): Choose a font size for the input.
• Normal/ Focus: Chose the color and background color for the input field for both normal and focus mode.
• Color: Pick a color for the label.
• Border: You can choose the border type as solid, double, dotted, dashed groove. Choose none if you do not want any border.
• Width: Select the top, right, bottom, and left width values.
• Color: Pick a border color.

Button: #

• Color: Pick a color for the button.
• Background Color: Choose the background color.
• Background Color Hover: Selec a background color for the hover mode.
• Font size (px):  Chose a font size for the button text/
• Padding: Adjust the top, right, bottom, and left padding for the button.
• Margin:  Select the top, right, bottom, and left margins.
• Border Radius: Here you can adjust the border-radius values.

Lost Password: #

• Color: Pick a color for the lost password link.
• Hover Color: Chose a hover color.
• Font size (px): Here you can choose the font size for the lost password.

Global Font: #

• Font family: Here you can change the font family for the whole widget.

Finally, click on Update to save all the changes.

Here is how the Account Form – Login widget will look on the website