How to Allow Users to Hide/Show Passwords on WordPress Login Screen

At WPBeginner, we have over 15 years of experience testing and building WordPress sites and online stores. We’ve built membership sites for our beginner online courses and eCommerce stores to sell our software.

The majority of these websites have allowed users to register to access content or buy digital products. So, we know the importance of online security and the role that password protection plays in that.

If users are regularly logging in to your website, you will want to allow them to hide/show passwords on the WordPress login screen. This way, they can be protected from snooping bystanders while still having the option to verify they have properly entered their password.

By default, WordPress automatically adds a show/hide password button to the login page. However, you may want to add a hide/show password button to other login screens, particularly if you run a membership site or an online store.

In this article, we will show you how you can allow users to hide/show their password on different WordPress login screens.

What is the Hide/Show Password Button on the WordPress Login Screen?

Protecting your WordPress account with a long and complex password will make it more difficult for people to break into your WordPress website.

However, there are lots of different ways that people can try to steal your password. Sometimes, simply using a strong password isn’t enough to keep your website safe.

This is where the hide/show password feature comes in.

If you head over to your WordPress login URL and start typing in your password, you’ll notice that WordPress masks your password by default. Every number, letter, or symbol you type into the ‘Password’ field is shown as a dot.

Even if someone is watching the screen as you type, they won’t be able to see your password. This is particularly important if you’re logging into your WordPress blog in a public place such as a library.

However, sometimes, it may help to show the user’s password as they’re typing.

The most secure passwords use a mix of upper and lower-case letters, symbols, and numbers. These complicated passwords can be difficult to type without making any mistakes. By showing the password, users will be able to spot any typos or other mistakes before clicking the ‘Log In’ button.

The good news is that WordPress makes it easy to remove this masking. Simply click on the eye icon next to the ‘Password’ field, and WordPress will show the password as you’re typing.

To hide the password again, simply click on the eye symbol.

This feature works out of the box for the standard WordPress login screen. However, there are other places where you may want to use the hide/show password feature.

With that being said, let’s look at how you can allow users to hide/show their password on some of the most common WordPress login screens. If you prefer to jump straight to a particular method, then you can use the links below.

Method 1. How to Allow Users to Hide/Show Passwords on the WooCommerce Login Screen

Many online stores let customers save their information by creating an account. This makes it easier for the customer to buy from your online store in the future.

User registration can also be a way to get the visitor’s email address, so you can send them marketing emails and encourage them to buy more products and services. For more details, see our expert pick of the best email marketing services for small businesses.

If you’re using WooCommerce to create your store, then the plugin creates a ‘My Account’ page automatically. If someone visits this page, WooCommerce will show them a login form as long as they’re not currently logged into an account.

If you look at the ‘Password’ field, then you’ll see a familiar hide/show password icon. The visitor can choose to hide or show their password, just by clicking on this icon.

This means that if you are using WooCommerce, you don’t need to take any extra steps to allow users to hide/show passwords on the account login page.

That said, you may want to add the login form to other areas of your website. For example, you might want to encourage shoppers to log into their account when they try to checkout.

There’s also a chance you may have accidentally deleted WooCommerce’s default My Account page.

The good news is that you can add the WooCommerce login form to any page, post, or widget-ready area using the following shortcode:

[woocommerce_my_account]

For step-by-step instructions, see our beginner’s guide on how to add a shortcode.

Once you’ve added the shortcode, simply visit your website. You will now see a WooCommerce login form with a hide/show password button.

Method 2. How to Allow Users to Hide/Show Passwords on Membership Login Screens

A membership website is a great way to make money online by allowing users to pay for premium content, features, and access to a community.

In our experience, MemberPress is the best WordPress membership plugin. We even use it to manage our WordPress Courses on WPBeginner Academy.

We recommend this plugin because it comes with everything you need to accept payments, create different membership levels, restrict access to content based on those levels, and more.

It’s also easy to set up. For more information, see our step-by-step guide to creating a WordPress membership site.

Once you’ve activated the plugin, MemberPress can automatically create all the pages you need to turn your WordPress website into an advanced membership site. This includes a login screen where members can choose to hide or show their password, as you can see in the following image.

To create a membership login page, simply go to MemberPress » Settings.

Then, click on the ‘Pages’ tab. You will now see all the pages that MemberPress can create automatically, including the MemberPress login page.

To go ahead and create all of these pages, simply click on the ‘Update Options’ button.

Now if you go to Pages » All Pages, you’ll see that MemberPress has created a ‘Login’ page where users can hide or show their password.

Keep in mind that, as with WooCommerce, you won’t need to configure any extra settings to give users the option to show/hide their passwords.

After creating a login page, it’s a good idea to add it to your WordPress menu so members can find it easily. For more information, you can see our guide on how to add a navigation menu in WordPress.

Bonus: Expert Guides on WordPress Security and User Management

Here are some expert guides on WordPress security and user management that might interest you:

• How to Force Strong Passwords on Users in WordPress
• How to Automatically Log Out Idle Users in WordPress
• How to Redirect Users After Form Submission in WordPress
• How to Allow Users to Delete Their WordPress Accounts
• How to Add Additional User Profile Fields in WordPress Registration
• How to Moderate New User Registrations in WordPress

We hope this article helped you learn how to allow users to hide/show passwords on the WordPress login screen. You may also want to see our ultimate WordPress security guide and our expert tips on securing your eCommerce store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.