Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 26, 2023 at 5:41 pm #1395408
    Steve Webgecko

    Hi Support

    On th WooCommerce Login form, the «Show Password» Eye Icon is missing.
    Switching to Theme Twenty-Twenty, the Eye Icon appears.
    Any ideas?

    Look:
    Show-PW-Eye-Icon-ENFOLD-Bug

    Steve

    January 27, 2023 at 6:10 am #1395515
    Nikko

    Hi Steve,

    Please add this CSS code in Enfold > General Styling > Quick CSS:

    .woocommerce form .password-input, 
.woocommerce-page form .password-input {
    position: relative;
}

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

.woocommerce form .show-password-input::after, 
.woocommerce-page form .show-password-input::after {
    font-family: WooCommerce;
    speak: never;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-left: 0.618em;
    content: "\e010";
    text-decoration: none;
}

    Please let us know if it helps.

    Best regards,
    Nikko

    January 27, 2023 at 3:12 pm #1395595
    Steve Webgecko

    HI Nikko

    Icon show up now, but below Entry field. Is it possible to place the Eye Icon into // or right the Input field? Not below.

    Thank you

    January 27, 2023 at 4:01 pm #1395605
    Nikko

    Hi Steve,

    Please replace this part of the code I gave:

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

    with:

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

    Best regards,
    Nikko

    January 27, 2023 at 4:32 pm #1395609
    Steve Webgecko

    Not working, now the Icon is on top instead in PW field.
    Gonna keep it below PW field, so its Mobile Ready like that

    Thank you
    Steve

    January 27, 2023 at 6:42 pm #1395638
    Nikko

    Hi Steve,

    I think you accidentally removed this code:

    .woocommerce form .password-input, 
.woocommerce-page form .password-input {
    position: relative;
}

    after that is re-added, you will need to adjust the top value of the previous code.

    Best regards,
    Nikko

    April 20, 2025 at 9:56 pm #1481683
    nothin7

    Hello,

    Any reason this isn’t included in the latest theme udpate?

    To fix this icon in all places (Login, Checkout, My Account > Account Details, etc.) and make it look and function like it should (centered, color changing, and character input doesn’t overlap), I recommend this code, which basically pulls in a simplified version of the official WooCommerce layout stylesheet:

    .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";
	margin-top: -2px;
	vertical-align: middle;
	display: inline-block
}
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.