WooCommerce: как использовать хуки для изменения структуры страниц заказа

Диагностика проблемы: почему нужно изменять структуру страниц заказа в WooCommerce

Стандартные страницы оформления заказа WooCommerce часто не соответствуют индивидуальным требованиям бизнеса — например, нужно добавить дополнительные поля, изменить расположение блоков с информацией или убрать ненужные элементы. Изменять шаблоны напрямую не всегда удобно и безопасно, особенно при обновлениях. Поэтому оптимальным способом является использование хуков WordPress и WooCommerce для модификации структуры страниц заказа.

Какие хуки WooCommerce используются на страницах заказа

WooCommerce предоставляет множество action и filter хуков на страницах оформления заказа. Вот ключевые из них:

• woocommerce_before_checkout_form — перед формой заказа;
• woocommerce_checkout_before_customer_details — перед блоком с данными покупателя;
• woocommerce_checkout_billing — вывод блока с биллинг-данными;
• woocommerce_checkout_shipping — блок с адресом доставки;
• woocommerce_checkout_order_review — область с обзором заказа;
• woocommerce_after_checkout_form — после всей формы заказа;
• woocommerce_checkout_fields (фильтр) — для изменения полей формы.

Пошаговое решение: добавление и перестановка блоков на странице оформления заказа

1. Добавление кастомного блока перед формой заказа

add_action('woocommerce_before_checkout_form', 'wphelper_custom_notice_before_checkout', 10);function wphelper_custom_notice_before_checkout() {    echo '<div style="padding:10px; background:#fffae6; border:1px solid #ffd42a; margin-bottom:20px;">Внимание: доставка работает только по Москве.</div>';}

Этот код добавит заметный блок с информацией перед формой заказа.

2. Перемещение блока с адресом доставки сразу после биллинга

По умолчанию блоки адресов располагаются последовательно, но если нужно вывести адрес доставки сразу после биллинга без разделения, используйте следующий код:

remove_action('woocommerce_checkout_shipping', 'woocommerce_checkout_shipping', 20);add_action('woocommerce_checkout_billing', 'woocommerce_checkout_shipping', 25);

Это убирает адрес доставки с места по умолчанию и выводит его внутри биллинга.

3. Изменение полей формы заказа через фильтр

Чтобы изменить, например, сделать поле телефона обязательным и переименовать его:

add_filter('woocommerce_checkout_fields', 'wphelper_modify_checkout_fields');function wphelper_modify_checkout_fields($fields) {    $fields['billing']['billing_phone']['required'] = true;    $fields['billing']['billing_phone']['label'] = 'Контактный телефон';    return $fields;}

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

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

Частые ошибки при работе с хуками WooCommerce на странице заказа

• Неправильный приоритет хуков — если приоритет слишком высокий или низкий, блоки могут не сработать или отобразиться не в том месте. Всегда проверяйте очередность с помощью инспектора.
• Переопределение хуков без удаления оригинальных действий — если хотите полностью заменить блок, сначала удалите его с помощью remove_action(), иначе дублирование.
• Ошибки в модификации полей формы — неправильные ключи массива $fields приведут к игнорированию изменений. Используйте отладку и var_dump для проверки структуры.

Практические советы по безопасности и производительности

• Избегайте вывода HTML напрямую в хуках — используйте функции esc_html() и esc_attr() для защиты от XSS.
• Не добавляйте тяжелые операции или запросы в хуки, вызываемые при каждом рендеринге страницы заказа, чтобы сохранить скорость загрузки.
• Размещайте кастомные функции и хуки в дочерней теме или собственном плагине, чтобы избежать потери изменений при обновлении WooCommerce.

Сравнение способов изменения структуры страницы заказа