---
title: "How to Customize the WooCommerce My Account Page Login Form?"
url: https://theplusaddons.com/docs/customize-the-woocommerce-my-account-page-login-form/
date: 2024-05-17
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Logged-out customers who open the WooCommerce My Account page see WooCommerce's own login and register forms, which rarely match the rest of a store's design. With the WP Login &..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Customize-the-WooCommerce-My-Account-Page-Login-Form-1024x536.jpg
word_count: 517
---

# How to Customize the WooCommerce My Account Page Login Form?

## 

- Customize the WooCommerce My Account page login form using the WP Login & Register widget from The Plus Addons for Elementor.
- Enable the Redirect After Login toggle to direct users to the My Account page or a custom URL after logging in.
- Utilize the Display Condition extension to ensure My Account content is visible only to logged-in users, hiding default forms for logged-out users.

Logged-out customers who open the WooCommerce My Account page see WooCommerce's own login and register forms, which rarely match the rest of a store's design.

With the **WP Login & Register** widget and the **Display Condition** extension from The Plus Addons for Elementor, customers see your own login form instead, and the account area appears once they are logged in.

*To check the complete feature overview documentation of The Plus Addons for Elementor WP Login & Register widget, [click here](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/login-form/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the WP Login & Register widget is only part of The Plus Addons for Elementor Pro. The free plugin lists it as a locked Pro widget and does not add it to Elementor.- **Widget to enable:** WP Login & Register, switched on under **The Plus Addons > Widgets**.- WooCommerce with its My Account page built in Elementor.- The **Display Condition** extension switched on in The Plus Addons (see the related doc below).

## Step 1: Add Your Login Form

- Edit the My Account page in Elementor and add the **WP Login & Register** widget above the My Account content.- In **Forms Layout**, set **Type** to **Login** (or **Login and Register** to let customers sign up there too) and keep **Layout** on **Standard Form**.

![Setting the WP Login & Register widget to the Login type with the Standard Form layout](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-login.gif)

- Open **Login Options**, turn on **Redirect After Login** and paste the My Account page address, so customers return to it after logging in.

## Step 2: Hide the WooCommerce Content from Visitors

- Select the element that shows the My Account content, for example a Shortcode widget with `[woocommerce_my_account]`.- Go to **Advanced > Display Condition** and turn the extension on for this element.- Set **Display When** to **All Rules are True**.- In the rule, choose **Login Status**, **Is**, **Logged in**. This is also the default rule.

![Display Condition turned on for the My Account shortcode, with Keep HTML and Display When set to All Rules are True](https://theplusaddons.com/wp-content/uploads/2026/09/login-woo-display-condition.webp)

![Setting the Display Condition rule on the My Account content](https://theplusaddons.com/wp-content/uploads/2024/05/woo-my-account-display-condition.gif)

## How It Behaves

- Visitors see only your login form; the WooCommerce login and register forms are hidden.- After logging in, customers see the WooCommerce account area with its navigation. Your login form is replaced by the **My Account Menu**, or by nothing if you turn that menu off.- With **Keep HTML** on (the default), the hidden WooCommerce form stays in the page source and is only hidden with CSS. Turn **Keep HTML** off to leave it out of the page entirely.

## Limitations

- We tested this with the WooCommerce My Account shortcode. Other ways of showing the account content may need the same rule on their own element.- WooCommerce's own lost password and register links are hidden with its form, so turn on **Lost your password?** and, if you allow sign-ups, **Register** in your login form.- The widget and the extension are part of The Plus Addons for Elementor Pro.

## Troubleshooting

### Visitors still see the WooCommerce login form

Check that the rule is on the element that holds the My Account content, not on the whole page, and that the **Display Condition** extension is switched on.

## Related Docs

- [WP Login & Register widget: create a login and register form](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/)- [Display Condition extension: settings overview](https://theplusaddons.com/docs/display-conditions-settings-overview/)- [Edit the WooCommerce My Account page in Elementor](https://theplusaddons.com/docs/edit-woocommerce-my-account-page-in-elementor/)