В этом уроке я покажу вам, как сделать, чтобы поле телефона появлялось только тогда, когда заполнено поле «Компания» на странице оформления заказа WooCommerce.
На первый взгляд звучит очень легко – как будто всё, что нам требуется, это пара строк JavaScript кода, но это ни разу не так.
Сначала посмотрим на пример:
В примере отсутствуют поля адреса, потому что я их отключил для того, чтобы скриншот был не такой большой 😁
Ну давайте начнём сначала с JavaScript и CSS всё же. Вы можете вставить эти коды либо в отдельные файлы, либо при помощи хуков wp_head и wp_footer – как хотите.
Также на моём сайте есть видеоурок по странице оформления заказа в WooCommerce 🚀
Сначала мы отключаем видимость поля Телефон:
#billing_phone_field{display:none;}
А теперь скрываем и отображаем поле телефона при набирании чего-то в billing_company
Прежде всего вам нужно обязательно отключить обязательность поля Телефон, делается это очень легко при помощи этого урока.
Потом по логике вам пригодится добавить какую-то произвольную валидацию в PHP – типо если поле компании заполнено, то поле телефон обязательно должно быть заполнено тоже. Об этом у меня тоже есть урок.
Миша
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Только сейчас вспомнил про этот комментарий 🙂 Извините, что-то лень записывать видео. Но по сути вся информация уже есть в этом уроке, её лишь нужно подкорректировать под другие названия полей.
Протестировал, все вроде работает, но есть одно Но 🙂
Если зайти повторно в магазин (когда уже регистировался) или воити в свой аккаунт, "редактировать адрес", поле "телефон" остаётся скрытым, хотя "название компании" уже заполнено.
Для того, чтобы открылось поле "телефон" надо произвести какие-то действия в поле "название компании" .
Привет. А если надо скрыть/открыть два поля. В какое место в JavaScript вставить код второго поля? Извините за глупый вопрос, но с не дружу пока. 🙁
Миша, а Вы могли бы сделать урок-инструкцию, как на радио кнопку (Покупает фирма) повесить раскрывающиеся billing_company и billiing_company_code?
Записал в задачи на следующий пн 👌 в конце дня проверьте комменты к посту
Только сейчас вспомнил про этот комментарий 🙂 Извините, что-то лень записывать видео. Но по сути вся информация уже есть в этом уроке, её лишь нужно подкорректировать под другие названия полей.
Протестировал, все вроде работает, но есть одно Но 🙂
Если зайти повторно в магазин (когда уже регистировался) или воити в свой аккаунт, "редактировать адрес", поле "телефон" остаётся скрытым, хотя "название компании" уже заполнено.
Для того, чтобы открылось поле "телефон" надо произвести какие-то действия в поле "название компании" .