Show/Hide Button on Front-End Password Fields
Adds an accessible "Show" button inside password fields on the front of the site (account, checkout and membership forms), so visitors can check what they typed.
Opens WPIDE on
Code
<style>
.wpide-pw-wrap{position:relative;display:block;}
.wpide-pw-wrap input{padding-right:4.5em!important;width:100%;}
.wpide-pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);padding:4px 8px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:.85em;font-weight:600;cursor:pointer;}
.wpide-pw-toggle:focus-visible{outline:2px solid currentColor;}
</style>
<script>
document.querySelectorAll('input[type="password"]').forEach(function (input) {
if (input.closest('.password-input, .wp-pwd, .wpide-pw-wrap') || input.nextElementSibling && input.nextElementSibling.matches('button, .show-password-input')) { return; }
var wrap = document.createElement('span');
wrap.className = 'wpide-pw-wrap';
input.parentNode.insertBefore(wrap, input);
wrap.appendChild(input);
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'wpide-pw-toggle';
btn.textContent = 'Show';
btn.setAttribute('aria-pressed', 'false');
btn.setAttribute('aria-label', 'Show password');
btn.addEventListener('click', function () {
var show = input.type === 'password';
input.type = show ? 'text' : 'password';
btn.textContent = show ? 'Hide' : 'Show';
btn.setAttribute('aria-pressed', show ? 'true' : 'false');
btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
input.focus();
});
wrap.appendChild(btn);
});
</script>Notes
Fields that already have a toggle (such as WooCommerce's) are skipped. The login page has its own built-in button.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.