Как использовать хук woocommerce_before_checkout_form для добавления собственного блока на страницу оформления заказа WooCommerce

Диагностика задачи: зачем добавлять собственный блок на страницу оформления заказа

Часто возникает необходимость добавить на страницу оформления заказа WooCommerce дополнительный HTML-блок — например, информационный текст, рекламный баннер, кастомные инструкции или условия доставки. WooCommerce предоставляет несколько хуков для кастомизации этой страницы, и woocommerce_before_checkout_form — один из самых удобных для вывода пользовательского контента до формы заказа.

Проверить, что вы на правильном месте, можно, включив режим отладки в WooCommerce или просто добавив тестовый вывод с помощью echo в теме. Если вывод появляется до формы заказа, значит хук подходит.

Пошаговое решение: добавляем блок с использованием хука woocommerce_before_checkout_form

1. Создаем функцию вывода блока

В файле functions.php дочерней темы или в кастомном плагине добавляем функцию, которая выводит нужный HTML:

function my_custom_checkout_notice() {
    echo '<div class="my-checkout-notice" style="padding:10px; background:#f9f9f9; border:1px solid #ddd; margin-bottom:20px;">';
    echo '<p><strong>Важно:</strong> Бесплатная доставка при заказе от 5000 рублей.</p>';
    echo '</div>';
}

2. Подключаем функцию к хуку woocommerce_before_checkout_form

add_action('woocommerce_before_checkout_form', 'my_custom_checkout_notice', 10);

3. Тестируем на сайте

Обновите страницу оформления заказа. Ваш блок должен появиться перед формой оформления заказа.

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

• Откройте страницу /checkout на сайте с активированным WooCommerce.
• Убедитесь, что блок с текстом «Бесплатная доставка при заказе от 5000 рублей» отображается перед формой.
• Проверьте в консоли браузера (F12), что блок не вызывает ошибок JavaScript.
• Включите режим отладки WooCommerce (через WP_DEBUG) — ошибок PHP быть не должно.

Частые ошибки и их исправление

• Блок не отображается: проверьте, что функция подключена через add_action и хук указан корректно. Также убедитесь, что код находится в functions.php активной темы или в плагине.
• HTML-код выводится как текст: проверьте, что используете echo, а не возвращаете строку без вывода.
• Проблемы с CSS-стилями: добавьте стили в файл темы или используйте встроенные стили в блоке, как в примере.
• Невозможно добавить динамический контент: для динамических данных используйте функции WooCommerce, например, WC()->cart->get_cart_total(), чтобы показывать итоги корзины.

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

• Избегайте сложной логики и запросов в функциях, подключаемых к хукам на страницах фронтенда, чтобы не замедлять загрузку.
• Используйте wp_kses_post() для вывода HTML, если данные поступают от пользователя, чтобы избежать XSS-уязвимостей.
• Если блок содержит JavaScript, подключайте скрипты через wp_enqueue_script, а не вставляйте inline-код.

Пример расширения: добавление динамического уведомления о минимальной сумме заказа

function my_custom_checkout_min_order_notice() {
    $min_amount = 5000;
    $cart_total = WC()->cart->total;

    if ( $cart_total < $min_amount ) {
        echo '<div class="woocommerce-info" style="margin-bottom:20px;">';
        echo 'Для оформления заказа минимальная сумма должна быть не менее ' . wc_price($min_amount) . '.</div>';
    }
}
add_action('woocommerce_before_checkout_form', 'my_custom_checkout_min_order_notice', 10);

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

Таблица сравнения способов вывода пользовательского блока на страницу оформления заказа WooCommerce