Отображение поля на странице оформления заказа в зависимости от заполненности другого

WooCommerce, Оформление заказа  /  5 комментариев

В этом уроке я покажу вам, как сделать, чтобы поле телефона появлялось только тогда, когда заполнено поле «Компания» на странице оформления заказа WooCommerce.

На первый взгляд звучит очень легко – как будто всё, что нам требуется, это пара строк JavaScript кода, но это ни разу не так.

Сначала посмотрим на пример:

Добавляем скрытое поле появляющееся в зависимости от заполненности другого на странице оформления заказа
В примере отсутствуют поля адреса, потому что я их отключил для того, чтобы скриншот был не такой большой 😁

Ну давайте начнём сначала с JavaScript и CSS всё же. Вы можете вставить эти коды либо в отдельные файлы, либо при помощи хуков wp_head и wp_footer – как хотите.

Также на моём сайте есть видеоурок по странице оформления заказа в WooCommerce 🚀

Сначала мы отключаем видимость поля Телефон:

#billing_phone_field{
	display: none;
}

А теперь скрываем и отображаем поле телефона при набирании чего-то в billing_company

jQuery( function( $ ) {
 
	$('#billing_company').keyup(function() {
		if ( $(this).val().length == 0 ) {
			$('#billing_phone_field').hide();
		} else {
			$('#billing_phone_field').show();
		}
	});
 
} );

Что ещё нужно сделать:

  • Прежде всего вам нужно обязательно отключить обязательность поля Телефон, делается это очень легко при помощи этого урока.
  • Потом по логике вам пригодится добавить какую-то произвольную валидацию в PHP – типо если поле компании заполнено, то поле телефон обязательно должно быть заполнено тоже. Об этом у меня тоже есть урок.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Комментарии — 5

Оставить комментарий

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.