Руководство: настройка полей оформления заказа WooCommerce по коду

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

Фильтр полей оформления заказа

WooCommerce предлагает фильтр для всех полей оформления заказа: woocommerce_checkout_fields. Также есть специальные фильтры для полей выставления счетов и доставки; woocommerce_billing_fieldsно woocommerce_shipping_fieldsони оба попадают в вышеупомянутый первый фильтр.

Поля 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
• order
  • order_comments
• shipping
  • shipping_first_name
  • shipping_last_name
  • shipping_company
  • shipping_address_1
  • shipping_address_2
  • shipping_city
  • shipping_postcode
  • shipping_country
  • shipping_state
• account
  • account_username
  • account_password
  • account_password-2

Каждое поле представляет собой массив, содержащий следующие настройки (не все поля содержат все свойства):

• label: видимая метка поля при оформлении заказа.
• placeholder: заполнитель ввода
• type: определяет тип поля. Если не установлено, по умолчанию используется текстовый ввод, в противном случае это может быть select, tel, email, textareaи т. д.
• required: логическое значение, независимо от того, является ли поле обязательным или нет.
• class: Классы, которые применяются к элементу-оболочке поля. Имейте в виду, что это массив.
• priority: Целое число, информирующее WooCommerce о порядке полей.

У некоторых полей есть дополнительные свойства, которые уникально настроены для определенных полей, и обычно вам не нужно об этом думать.

Изменение полей по умолчанию

Добавив фильтр woocommerce_checkout_fieldsи взглянув на обзор выше, должно быть довольно легко понять, как изменить существующие поля.

Вот пример того, как изменить метку в поле телефона:

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['label'] = __('Mobile phone', 'textdomain');
    return $fields;
});

Или, может быть, вы хотите изменить обязательное свойство, сделав поле необязательным (или наоборот)?

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['required'] = false;
    return $fields;
});

Однако, если вы хотите отредактировать поля адреса (особенно это относится к _address_1, _postcodeи _city), вам может потребоваться использовать другой фильтр; а именно woocommerce_default_address_fields. В качестве аргумента для этого фильтра массив больше не структурирован ключами выставления счетов и доставки, а в ключах полей отсутствуют части с префиксом «billing_» или «shipping_». Адрес 1 находится например в этом фильтре под ключом address_1.

Вот пример изменения метки почтового индекса:

add_filter('woocommerce_default_address_fields', function($address_fields) {
    $address_fields['postcode']['label'] = __('Postcode', 'textdomain');
    return $address_fields;
});

Удаление полей по умолчанию

Удаление полей по умолчанию легко выполняется с помощью unset()функции массива PHP в woocommerce_checkout_fieldsфильтре. Например:

add_filter('woocommerce_checkout_fields', function($fields) {
    unset($fields['billing']['billing_city']);
    return $fields;
});

Изменение порядка полей

Изменение порядка полей выполняется путем изменения свойства priorityполей. Это свойство было недавно добавлено (WooCommerce 3+) и значительно упростило изменение порядка, чем раньше, когда вам приходилось переупорядочивать массив.

Чем меньше число, тем выше оно поднимается. Приоритет каждого поля дает некоторую свободу действий для перемещения полей между ними, например, имя начинается с 10, фамилия — с 20, а компания — с 30. Если вам нужно поле после фамилии и перед компанией, вы можете установить приоритет на 25.

Пример перемещения поля телефона перед адресом:

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['priority'] = 35;
    return $fields;
});

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

add_filter('woocommerce_default_address_fields', function($address_fields) {  
    $address_fields['city']['priority'] = 45;
    return $address_fields;
});

Примечание. WooCommerce часто переопределяет приоритет в поле почтового индекса (устанавливая его на 65) в зависимости от страны.

Добавление настраиваемых полей в кассу

У вас есть два варианта добавления настраиваемых полей; вы можете добавить настраиваемое поле в массив выставления счетов или доставки через woocommerce_checkout_fieldsфильтр, и WooCommerce будет обрабатывать все, что нужно для обработки и сохранения его в заказе. В качестве альтернативы вы можете использовать действия в кассе (например woocommerce_after_order_notes), чтобы добавить поле, но в этом случае вам нужно написать код для обработки и сохранить его вручную.

Способ 1: добавление настраиваемого поля для выставления счетов или доставки с помощью фильтра оформления заказа

Самый простой способ — использовать тот же фильтр, который мы использовали все это время; woocommerce_checkout_fieldsи просто добавьте новый элемент массива.

В документации WooCommerce это не проясняется, но этот метод работает только для добавления полей в поля «выставление счетов» или «доставка». Кроме того, ваш ключ/имя поля должен иметь префикс соответствующего родительского ключа; например, для добавления поля ‘ my_custom_input‘ в массив биллинга его необходимо назвать ‘ billing_my_custom_input‘. В противном случае WooCommerce не сохранит ваше поле.

Вот пример добавления необязательных пользовательских выпадающих меню для выставления счетов, расположенных прямо перед телефоном. Установив ‘ type‘ в ‘ select‘ и предоставив массив для опций optionsсвойству ‘ ‘, вы сделаете выбор ввода.

WooCommerce автоматически обработает и сохранит это поле как часть полей оформления заказа.

Нет автоматического способа сделать ваше поле видимым в администраторе заказа. Вы можете подключиться к действию woocommerce_admin_order_data_after_billing_addressи вручную получить метаполе, используя идентификатор заказа из объекта заказа, предоставленного в качестве аргумента для действия. Имейте в виду, что значение будет сохранено как метаданные сообщения с ведущим «_». В приведенном выше примере поле будет сохранено _billing_my_custom_selectв базе данных как «».

Способ 2: добавление настраиваемого поля с помощью действий

Если вы столкнулись с проблемами при использовании описанного выше метода или хотите расположить свое поле по-другому, я рекомендую использовать этот метод. Это немного больше кода, но у вас больше контроля. Я лично предпочитаю этот метод.

Первый шаг — выбрать действие в кассе, в которое вы хотите добавить свое поле. Это просто вопрос предпочтения того, где вы хотите, чтобы ваше поле отображалось. Посмотрите в /woocommerce/templates/checkout/файлах шаблонов; например form-checkout.php, form-billing.phpили form-shipping.php. В моем примере я выбрал действие woocommerce_after_order_notes, которое появляется form-shipping.phpпосле примечаний к заказу.

Вы используете функцию woocommerce_form_field и предоставляете те же свойства, что и в woocommerce_checkout_fieldsфильтре (см. выше). При желании вы можете добавить HTML вокруг своего пользовательского поля, как это сделал я. Вот пример добавления настраиваемого поля для ввода идентификатора участника:

Теперь поле должно появиться в кассе.

Проверка вашего поля необязательна. Я включил пример проверки, чтобы убедиться, что действительный идентификатор участника был предоставлен путем проверки его длины. Для проверки используйте хук woocommerce_checkout_process, а если вам нужно вернуть ошибку и остановить процесс оформления заказа, используйте wc_add_notice().

Следующим шагом является фактическое сохранение значения поля всякий раз, когда кто-то размещает заказ. Для этого мы используем действие woocommerce_checkout_update_order_metaи просто сохраняем поле как метаданные сообщения для идентификатора заказа (предоставленного в качестве параметра действия), извлекая значение из $_POST.

add_action('woocommerce_checkout_update_order_meta', function($order_id) {
    if (!empty($_POST['member_id'])) {
        update_post_meta($order_id, 'member_id', sanitize_text_field($_POST['member_id']));
    }
}

Ваше пользовательское поле теперь должно быть сохранено в заказах.

Если вы хотите отобразить поле для администратора заказа, добавьте тот же код, что и в способе 1. Я включу его снова здесь, с поправкой на имя поля в этом примере: