Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 14, 2026 at 3:55 pm #1493909
    January 15, 2026 at 4:55 am #1493930
    Ismael

    Hey SurigliaStudio,

    Thank you for the inquiry.

    The input fields on the login and registration pages don’t have that feature or option by default. It’s a custom icon implemented on custom login pages and it’s not a default browser feature. Let us know if you need more info.

    Best regards,
    Ismael

    January 15, 2026 at 10:36 am #1493966
    SurigliaStudio

    Hey Ismael, thanks for your reply.
    What I mean is that in the Enfold version of the login screen there is a tiny stuff unser the field that is doind the revail password thing:
    https://www.awesomescreenshot.com/video/48386775?key=6b73c617bba3728fd0fbc925e8be1fe5
    It’s not recognizable at all.
    It should look like more as the default theme feature.
    The little strange button ist’s shown only in Enfold. Any other theme will have that eye on the fild as I was showing in my previous post.

    Thanks!

    January 15, 2026 at 3:26 pm #1493982
    Guenni007

    well this wordpress login screen is not influenced by the themes installed !
    This is a pure wordpress setting – so you have to check where it might be set a different Login Page.

    i often make an own settup for it by this snippet for child-theme functions.php:

    function custom_loginlogo_url($url) {
  $url = get_site_url();
  return $url;
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

function my_login_logo(){ 
$logo = avia_get_option('logo'); 
?>
<style type="text/css">
    #login h1 a, .login h1 a {
      background-image: url(<?php echo $logo; ?>);
      height: 120px;
      width: 320px;
      background-size: contain !important;
      background-repeat: no-repeat;
      background-position: center top;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    body.login {
      background-image: -webkit-radial-gradient(circle farthest-corner at center center, #B8E1FC 0%, #231421 100%) !important;
      background-image: radial-gradient(circle farthest-corner at center center, #B8E1FC 0%, #231421 100%) !important;
      background-repeat: repeat;
    }
    body.login form {
      background: rgba(255,255,255,0.2);
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
    }
</style>
<?php 
}
add_action( 'login_enqueue_scripts', 'my_login_logo' );

    you see in the snippet that the logo you set in the logo input field of enfold will be dynamically inserted there. If you like to have a differente one – then insert an absolute url on that place: background-image: url(<?php echo $logo; ?>);

    this is then the look for it:

    January 15, 2026 at 3:54 pm #1493983
    SurigliaStudio

    Hey Guenni!
    Thanks a lot for your reply! :)

    The login in the wp-admin page form is very ok!
    I’m referring to the account login page of woocommerce. The one where client log in or register into.

    Sorry for not making it clear. My bad :)

    January 16, 2026 at 5:33 am #1494007
    Ismael

    Hi,

    Thank you for the clarification.

    You can try this css code to apply your own toggle password icon to the password input field.

    .show-password-input {
  width: 24px;
  height: 24px;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: absolute;
  top: 4px;
  right; 9px;
}

.show-password-input[aria-label="Show password"] {
  background-image: url("eye-closed.svg");
}

.show-password-input[aria-label="Hide password"] {
  background-image: url("eye-open.svg");
}

    Make sure to replace eye-closed.svg and eye-open.svg images with your own images.

    Best regards,
    Ismael

    January 19, 2026 at 10:17 am #1494064
    SurigliaStudio

    Hey Ismael, thanks for the reply. What I don’t understand is why the plain theme of enfold doesn’t work properly on it’s own, and why when I select any other theme I see correctly the eye icon.
    I also encountered another thread on this forum and I tried to add that css to solve the issue and ( content: “\e010” !important;) except it doesn’t work, like it’s not loading properly the fontello font or something.

    In fact if you go on my client website you’ll see that I got a square instead of the eye icon.
    I’m sure the function you wrote will work properly, but why it’s not working on the enfold version of the website?
    Thanks!

    January 20, 2026 at 5:41 am #1494085
    Ismael

    Hi,

    Thank you for the update.

    It’s probably a style conflict between the theme and one of the plugins. Did you apply the suggestions from the previous thread and try the ones we suggested here?

    .woocommerce .woocommerce-form-login .show-password-input {
    position: absolute;
    top: 0.8rem;
    right: 1.2rem;
    cursor: pointer;
}

    Best regards,
    Ismael

    January 20, 2026 at 10:13 am #1494093
    SurigliaStudio

    Hello Ismael,
    thanks for the reply. I did and I still have the issue. In fact I can see the same identical problem on your original enfold page so my guess: it’s not a plugin issue.
    I also tried the full code you typed above, still nothing.

    January 21, 2026 at 6:05 am #1494123
    Ismael

    Hi,

    This code should fix the issue — you just need to supply your own password toggle images (eye-closed.svg, eye-open.svg).

    — https://kriesi.at/support/topic/missing-eye-icon-on-login-page/#post-1494007

    Best regards,
    Ismael

    January 23, 2026 at 5:27 pm #1494234
    SurigliaStudio

    Hello Ismael,
    the code is not working, I cannot see any visible difference in the front end.

    If I put instead this code 

    .woocommerce form .password-input {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative
}
.woocommerce form .password-input input {
	padding-right: 2.5rem !important;
	margin-bottom: 0;
}
.woocommerce form .password-input input::-ms-reveal {
	display: none
}
.woocommerce form .show-password-input {
	background: transparent;
	border: 0;
	color: #222;
	cursor: pointer;
	font-size: inherit;
	padding: 0;
	position: absolute;
	right: .7em;
	top: 50%;
	transform: translateY(-50%);
}
.woocommerce form .show-password-input.display-password {
	color: #999
}
.woocommerce form .show-password-input::after {
	font-family: WooCommerce;
	speak: never;
	-webkit-font-smoothing: antialiased;
	content: "\e010" !important;
	margin-top: -2px;
	vertical-align: middle;
	display: inline-block
}

    Which I found on the other thread, I see a rectangle instead of the eye, because clearly the content: “\e010” !important; is not linking anything properly,
    Any clue?

    January 27, 2026 at 5:16 am #1494355
    Ismael

    Hi,

    Have you tried including the scss file as described in the following documentation? If you can provide the login details, we’ll try to check this further.

    — https://woocommerce.com/document/utilising-the-woocommerce-icon-font-in-your-extensions/

    Best regards,
    Ismael

    January 27, 2026 at 11:10 am #1494365
    SurigliaStudio
    This reply has been marked as private.
    January 28, 2026 at 5:12 am #1494403
    Ismael

    Hi,

    Thank you for the login info.

    We commented out the password modification in the Quick CSS field and adjusted it a bit.

    
.woocommerce .password-input {
    position: relative;
}

.woocommerce .show-password-input {
  width: 24px;
  height: 24px;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: absolute;
  top: 30px;
  right: 9px;
  background-image: url("https://www.morsoworld.com/wp-content/uploads/2026/01/eye-slash-solid-full.svg");
}

.woocommerce .show-password-input.display-password {
  background-image: url("https://www.morsoworld.com/wp-content/uploads/2026/01/eye-solid-full.svg");
}

    Result:

    fiM0blp.md.png

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.