Show/Hide password User login

Home Page Forums Porto | Multi-Purpose & WooCommerce Theme Show/Hide password User login

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #6453
    Natale Proietto
    Participant

        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.
        #6455
        Aizaz Awan
        Keymaster

            Hello, @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.

            #6467
            Natale Proietto
            Participant

                Dear @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.
                #6472
                Aizaz Awan
                Keymaster

                    Hello, @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.
                    #6475
                    Natale Proietto
                    Participant

                        I 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.
                        #6527
                        Aizaz Awan
                        Keymaster

                            Hello, @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.

                            #6547
                            Natale Proietto
                            Participant

                                Hi @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.

                                #6563
                                Aizaz Awan
                                Keymaster

                                    Hello, @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.

                                  Viewing 8 posts - 1 through 8 (of 8 total)
                                  • You must be logged in to reply to this topic.
                                  Customize Icon
                                  Need Customization? We specialize in delivering high-quality web and mobile design/development services to our clientele. Should you require customization services, please do not hesitate to reach out to us at your convenience.