Доставка по другому адресу woocommerce как убрать

Иногда нужно сделать так, чтобы в зависимости от способа доставки выводились разные поля на странице оформления заказа. Можно скрывать эти поля стилями или скриптом, но возникает проблема валидации: заказ невозможно будет отправить, потому что не заполнены обязательные поля. Пришлось придумать собственное решение.

• Шаг первый. Добавляем форму полей во фрагмент
• Шаг второй. Убираем лишние поля
• Шаг третий. Обновление страницы
• Как это работает?
• Весь код полностью
• Реальный кейс
• Задача
• Решение
• Выводы

Выглядит оно так

Шаг первый. Добавляем форму полей во фрагмент

В WooCommerce есть такой функционал фрагментов, в них можно добавлять нужный html и выводить в нужном месте. Итак, добавляем фрагмент

Код изменен. Предыдущий фрагмент будет работ, но если в магазине используется личный кабинет, то будут проблемы. Так как данная форма подключается в файле checkout/form-billing.php , правильнее использовать такой код

Что изменилось? Если используется личный кабинет, то при переключении методов доставки происходит дублирование полей формы регистрации. Чтобы такого не происходило, во фрагмент добавляем только нужные поля.

Шаг второй. Убираем лишние поля

Предполагается, что способы доставки настроены. Для примера созданы два способа. Теперь требуется указать нужный идентификатор способа доставки. Самый простой способ — посмотреть в исходном коде

Выделенные строки и есть идентификаторы. Теперь достаточно сделать проверку и если получаем нужный способ доставки, удаляем лишние поля

Это пример. В каждом случае, допиливайте под свой проект.

Шаг третий. Обновление страницы

Все работает, кроме обновления страницы. Добавим немного магии ajax, так как вся обработка полей на странице «Оформление заказа» происходит через ajax.

Как это работает?

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

Код подключается на хук wp_footer , при желании его можно вынести в отдельный файл. Код проверялся на стандартной теме StoreFront. Все должно работать корректно.

Что изменилось?

В комментариях указали на косяк — при переключении не сохраняются значения полей: Имя, Фамилия, Почта, Телефон. Полечил. Все оказалось гораздо проще.

И еще сделано обновление полей не после обновления методов доставки, а параллельно с этим обновлением

Весь код полностью

Просто запихать в в файл functions.php

Вот и все. А теперь реальный кейс

Реальный кейс

Задача

• два метода доставки: «Самовывоз», «Новая почта»
• убрать лишние поля на странице «Оформление заказа»
• добавить дополнительное поля для метода «Новая почта»
• значение нового поля должно добавляться в заказ и приходить с письмом

Должно получиться так

В методе «Самовывоз» остаются поля:

В методе «Новая почта»

Решение

Первое. Добавляем фрагмент

Второе. Добавляем условие переключения

Обратите внимание! Не нужные поля убираем сразу, а только потом делаем проверку. И проверка при этом обратная — если не выбран нужный метод доставки, то убираем новое поле.

В некоторые поля сразу вносим изменения:

• В поле «Населенный пункт» меняем ярлык на «Город»
• В поле «Имя» изменяем ширину на полную
• В полях «Емайл» и «Телефон» изменяем ширину на половину, причем поле «Телефон» будет выводиться слева, а «Емайл» — справа

Третье. Добавляем новое поле

Добавляем новое поле с именем number_post_office

Так как для добавления поля используем хук woocommerce_default_address_fields , то реально имя поля будет billing_number_post_office . Именно под таким именем сохраняем поле в метаданные заказа

Теперь надо настроить поля заказа, чтобы данные выводились на странице заказа и связанных с ней. Для начала добавим новое поле в общий массив полей при администрировании заказа

Теперь выведем значение поля в адресе

И сразу отформатируем для полей адреса доставки и адреса оплаты

Приведем внешний адреса к привычному для России и СНГ

Четвертое. Добавляем обновление через ajax

Все точно так же, как в третьем шаге, только добавляет сохранение значения нового поля.

Вот и весь кейс. Ничего сложного

Выводы

В итоге разобрали как можно сделать вывод полей на странице «Оформление заказа». И даже на пример реального кейса.

Все должно работать без проблем, если что, пишите в комметариях

Всем удачи! И не забудьте поделиться статьей в соцсетях!

Вот картинка, смысл в том, что бы клиент не заполнял поле адрес в случае когда выбирает самовывоз из магазина, т.к. это не нужно.

Пробую сейчас сделать вот так с помощью CSS:

Но почему то не получается, не хочет применяться этот css к моему коду а в JS я не силен.

Иван Козлов: Иван.
Пробовал display: none !important; в первую очередь, но почему то свойство
#shipping_method_0_local_pickup-15.checked + .address-field <
display: none>
Просто не применяется к .address-field

Плагин, который Вы предложили просто убирает поле или делает его необязательным. Я уже пользуюсь таким плагином.

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

Просто будоражащая некоторые умы тема как просто удалить не нужные поля при оформлении заказа, некоторые ставят для этого плагин Saphali Woocommerce Russian который прилично грузит так систему, есть еще один хороший плагин для редактирования полей, им можно как и удалить так и создать нужные поля, WooCommerce Checkout Field Editor (Manager) Pro Но он также тяжеловат для такой простой манипуляции как просто убрать поля.
И так для такого чтобы просто удалить не нужные поля при оформлении заказа мы добавляем код в файл functions.php нашей темы

Этим кодом мы удаляем поля Компанию, второй адрес, Страну, Город и Индекс
Если вам нужно удалить еще какие то поля, то просто продолжаем список подставляя нужные массивы

Вот полный список полей массива, передаваемого в фильтр woocommerce_checkout_fields:

billing — это форма платежного адреса
billing_first_name
billing_last_name
billing_company
billing_address_1
billing_address_2
billing_city
billing_postcode
billing_country
billing_state
billing_email
billing_phone
shipping это форма адреса доставки (обычно опционально)
shipping_first_name
shipping_last_name
shipping_company
shipping_address_1
shipping_address_2
shipping_city
shipping_postcode
shipping_country
shipping_state

В этой статья я расскажу как убрать поля оформления доставки при самовывозе