The7 Login/Register Form

“The7 Login/Register Form” widget (fig. 1) is useful when you need to customize an appearance of WooCommerce Login/Register form.

Fig. 1.1. The7 Login/Register Form.

Fig. 1.1. The7 Login/Register Form. Widget.

Fig. 1.2. The7 Login/Register Form. Appearance.

Fig. 1.2. The7 Login/Register Form. Appearance.

You can insert this widget into a custom page. And decide whether it will be used as a stand-alone login form or should it redirect to WooCommerce “My Account” page.

Content

You can decide whether “Login” and “Register” forms (fig.2.2) should be displayed within 1 or 2 columns under the “Content” tab (fig.2.1). Please consider that “Register” form can be enabled in WooCommerce settings -> Accounts & Privacy -> Allow customers to create an account on the “My account” page.

Fig. 2.1. Layout.

Fig. 2.1. Layout.

Fig. 2.2. Login and Register Forms.

Fig. 2.2. Login and Register Forms.

It also allows to specify distance between these two entries.

Under the “Logged-In State” tab (fig. 2.3), you can decide whether a visitor should be redirected to the native WooCommerce “My Account” page after login. And whether any message should be displayed in place of the form when a visitor is logged-in (fig.2.4).

Fig. 2.3. Logged-in State.

Fig. 2.3. Logged-in State.

Fig. 2.4. Logged-in Message.

Fig. 2.4. Logged-in Message.

Style

The “Box” tab (fig.3.1) provides a possibility to style the area behind a single form:

Fig. 3.1. Box Settings.

Fig. 3.1. Box Settings.

You can adjust column height and content position inside of this column. As well as border width, color and radius, background color and padding. Box shadow setting is also available here.

Configure form Title color and typography in the appropriate tab (fig. 3.2). You can also specify the gap below the title (“Spacing” setting).

Fig. 3.2. Title Settings.

Fig. 3.2. Title Settings.

Finally, the “Description” tab (fig. 3.3) allows to configure the text inside of the Register form:

Fig. 3.3. Description Settings.

Fig. 3.3. Description Settings.

Advanced

The advanced section contains standard Elementor settings. More info is available here.