Показать вводимые символы

Увидеть вводимые символы можно двумя способами: при наведении на иконку глаза или при нажатии на иконку глаза.

При наведении на иконку, нужно добавить после поля

<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />

в шаблоне woocommerce/myaccount/form-login.php кнопку с глазом (обязательно должен быть установлен иконочный шрифт FontAwesome) :

<button id="show_password" class="btn" type="button"><i class="far fa-eye"></i></button>

И прописать вот такой скрипт:

jQuery(document).ready(function($){
	$('#show_password').hover(
		function functionName() {
			$('#password').attr('type', 'text');
		}, function () {
			$('#password').attr('type', 'password');
		}
	);
});

Если нужно, чтобы код показывался постоянно если мы нажали на эту кнопку, то нужно изменить кнопку

<button id="show_password" class="btn" type="button" data-click-state="1"></button>

и прописать такие стили:

#show_password:after {content: "\f06e"; font-family: FontAwesome5; font-weight: 600;}
#show_password.eye-close:after {content: "\f070"; font-family: FontAwesome5; font-weight: 600;}

Также измениться скрипт:

jQuery(document).ready(function($){
	$('#show_password').on('click',function(){
		if($(this).attr('data-click-state') == 1) {
			$(this).attr('data-click-state', 0);
			$('#password').attr('type', 'text');
			$(this).addClass('eye-close');
		} else {
			$(this).attr('data-click-state', 1);
			$('#password').attr('type', 'password');
			$(this).removeClass('eye-close');
		}
	});
});

Форма входа в любом месте

Выведем форму входа в любом месте сайта, например в шапке, либо во всплывающем окне. Также добавлена кнопка Регистрация.

<?php if ( !is_user_logged_in() ): ?>
	
	<form class="woocommerce-form woocommerce-form-login login" method="post">

		<?php do_action( 'woocommerce_login_form_start' ); ?>

		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" placeholder="Login" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
		</p>
		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" placeholder="Password" />
		</p>

		<?php do_action( 'woocommerce_login_form' ); ?>

		<p class="form-row">
			<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
			<button type="submit" class="woocommerce-Button button" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button>
			<label class="woocommerce-form__label woocommerce-form__label-for-checkbox inline">
				<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
			</label>
		</p>
		<p class="form-row"><a href="#">Регистрация</a></p>
		<p class="woocommerce-LostPassword lost_password">
			<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a>
		</p>

		<?php do_action( 'woocommerce_login_form_end' ); ?>

	</form>
	
<?php endif; ?>

Форма выводиться только если пользователь не авторизован. Если пользователь авторизован можно вывести логин и кнопку выхода:

<?php else: ?>	

	<?php $current_user = get_user_by( 'id', get_current_user_id() ); ?>
	<strong><a class="nav-link" href="/my-account/"><?php echo $current_user->display_name; ?></a></strong>  
	<a class="nav-link" href="<?php echo wp_logout_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>"><i class="fas fa-sign-out-alt"></i>выйти</a>

Ajax форма входа в Woocommerce

AJAX Login and Registration modal popup + inline mode (5000)

Для работы плагина должна быть включена опция Любой может зарегистрироваться в основных настройках WordPress.

Pro-версия стоит 20$ (28.03.2019).

Можно выводить в виде формы входа (шорткодом), либо в виде всплывающего окна.

Поделиться в соц. сетях: