Home Page › Forums › Porto | Multi-Purpose & WooCommerce Theme › Show/Hide password User login
Tagged: hide password, password, sho password
- This topic has 7 replies, 2 voices, and was last updated 1 year, 4 months ago by
Aizaz Awan.
-
AuthorPosts
-
April 24, 2024 at 9:54 am #6453
Hi, how can I enable the show/hide password option on the user login page? I searched in the template settings but couldn’t find anything about it.
I attach image of the login window where I would like the show/hide password option.
Attachments:
You must be logged in to view attached files.April 24, 2024 at 11:44 am #6455Hello, @nataleproietto,
Apologies for any inconvenience. The issue lies in the limitations of customizing form changes within the popup. To resolve this, consider disabling the popup, allowing users to be redirected to the My Account page instead. To achieve this, navigate to Dashboard >> Porto >> Theme Options >> WooCommerce, and enable the link option instead of the popup. You can refer to the screenshot here: https://postimg.cc/fSytfjMF
Best Regards,
PThemes Team.April 27, 2024 at 10:51 am #6467Dear @AizazAwan
thank you for your reply. I have activated the link mode for login but on the account page, in the password section I don’t have the option to show/hide the password. I have also checked the custom css changes and there is no rule preventing it from working.Attachments:
You must be logged in to view attached files.April 27, 2024 at 12:08 pm #6472Hello, @nataleproietto,
Thank you for providing the details. The issue stems from the fact that my account page is generated by the WooCommerce plugin, which defaults to requiring users to input a password to log in. Unfortunately, this behavior cannot be altered through theme settings; it necessitates additional customization. I’ve come across some articles that may assist you in comprehending the issue and finding solutions: https://github.com/woocommerce/woocommerce/issues/25580 and https://wordpress.org/support/topic/show-hide-password-toggle-not-working/
Best Regards,
PThemes Team.-
This reply was modified 1 year, 4 months ago by
Aizaz Awan.
April 27, 2024 at 1:00 pm #6475I managed to get the icon to appear, it works, but as you can see it doesn’t display well, it seems that it doesn’t take the encoding well. How can I get the eye icon to display properly?
This is the code used
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
position: absolute;
right: 22em;
top: 16em;
cursor: pointer;
}.woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
font-family: WooCommerce;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
content: “\e010”;
text-decoration: none;
}Attachments:
You must be logged in to view attached files.April 29, 2024 at 5:48 am #6527Hello, @nataleproietto,
Could you kindly provide the following details in the private content area of this topic after ensuring you have taken a complete backup of your site? This will allow me to review and offer you a suitable solution.
WordPress admin URL:
WordPress admin username:
WordPress admin password:Looking forward to your prompt response.
Best Regards,
PThemes Team.April 29, 2024 at 12:45 pm #6547Hi @AizazAwan
I managed to get show/hide password working.
Although it doesn’t change the icon from an open eye to a closed one, but it’s still ok. I used this code:.woocommerce form .password-input, .woocommerce-page form .password-input {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.woocommerce form .password-input input[type=password], .woocommerce-page form .password-input input[type=password] {
padding-right: 2.5rem;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
position: absolute;
right: 0.7em;
top: 0.7em;
cursor: pointer;
}
.woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
font-family: dashicons;
speak: never;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
margin-left: 0.618em;
content: “\f177”;
text-decoration: none;
}I used the plugin: Frontend Dashicons https://it.wordpress.org/plugins/frontend-dashicons/
to display the icon.April 29, 2024 at 1:46 pm #6563Hello, @nataleproietto,
We are glad to hear that you managed to solve the password field issues. But for the other concern, Could you kindly provide the following details in the private content area of this topic after ensuring you have taken a complete backup of your site? This will allow me to review and offer you a suitable solution.
WordPress admin URL:
WordPress admin username:
WordPress admin password:Looking forward to your prompt response.
Best Regards,
PThemes Team. -
This reply was modified 1 year, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.