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

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

В стандартной установке WooCommerce страница заказа содержит набор полей для оформления покупки, но часто требуется добавить дополнительную информацию или функциональность. Например, добавить кастомные сообщения, инструкции по оплате, дополнительные поля с данными пользователя, или вывести динамический контент, зависящий от выбранного товара.

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

Основные хуки для добавления контента на страницу заказа

Страница оформления заказа WooCommerce (checkout) предоставляет несколько полезных хуков в виде действий (do_action) и фильтров (apply_filters), которые позволяют добавлять контент в нужных местах.

• woocommerce_before_checkout_form — перед формой заказа.
• woocommerce_checkout_before_customer_details — перед блоком данных покупателя.
• woocommerce_checkout_after_customer_details — после блока данных покупателя.
• woocommerce_review_order_before_payment — перед выбором способа оплаты.
• woocommerce_checkout_order_review — в блоке обзора заказа.
• woocommerce_checkout_after_order_review — после обзора заказа.

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

Пример: добавление кастомного сообщения после блока данных покупателя

add_action('woocommerce_checkout_after_customer_details', 'wporder_add_custom_message_checkout');
function wporder_add_custom_message_checkout() {
    echo '<div class="custom-checkout-message" style="padding:10px; margin-top:20px; background:#f0f0f0; border-left:3px solid #0073aa;">';
    echo '<p>Спасибо за ваш заказ! Пожалуйста, проверьте правильность введённых данных перед оплатой.</p>';
    echo '</div>';
}

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

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

1. Добавьте поле на форму с помощью хука woocommerce_after_order_notes или другого подходящего.
2. Проверьте и сохраните данные при отправке формы (хук woocommerce_checkout_process и woocommerce_checkout_update_order_meta).
3. Отобразите сохранённое значение в админке заказа (хук woocommerce_admin_order_data_after_billing_address).

Код добавления кастомного поля "Комментарий менеджеру" после стандартных заметок:

add_action('woocommerce_after_order_notes', 'wporder_add_custom_checkout_field');
function wporder_add_custom_checkout_field($checkout) {
    echo '<div id="custom_checkout_field">';
    woocommerce_form_field('manager_comment', array(
        'type' => 'textarea',
        'class' => array('form-row-wide'),
        'label' => __('Комментарий менеджеру'),
        'placeholder' => __('Напишите комментарий для менеджера'),
        ), $checkout->get_value('manager_comment')
    );
    echo '</div>';
}

// Валидация поля
add_action('woocommerce_checkout_process', 'wporder_validate_custom_checkout_field');
function wporder_validate_custom_checkout_field() {
    if (!$_POST['manager_comment']) {
        wc_add_notice(__('Пожалуйста, заполните комментарий менеджеру.'), 'error');
    }
}

// Сохранение поля
add_action('woocommerce_checkout_update_order_meta', 'wporder_save_custom_checkout_field');
function wporder_save_custom_checkout_field($order_id) {
    if (!empty($_POST['manager_comment'])) {
        update_post_meta($order_id, '_manager_comment', sanitize_textarea_field($_POST['manager_comment']));
    }
}

// Отображение в админке заказа
add_action('woocommerce_admin_order_data_after_billing_address', 'wporder_display_custom_field_admin_order', 10, 1);
function wporder_display_custom_field_admin_order($order){
    $comment = get_post_meta($order->get_id(), '_manager_comment', true);
    if ($comment) {
        echo '<p><strong>Комментарий менеджеру:</strong> ' . esc_html($comment) . '</p>';
    }
}

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

Чтобы убедиться, что кастомный контент добавлен корректно:

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

Частые ошибки при добавлении контента на страницу заказа и как их исправить

• Контент не отображается: Проверьте, что хуки подключены в правильных местах. Для страницы заказа используйте хуки, которые вызываются в шаблоне checkout/form-checkout.php.
• Данные из кастомного поля не сохраняются: Убедитесь, что поле передаётся в $_POST и корректно обрабатывается в функции сохранения (используйте sanitize_textarea_field для безопасности).
• Ошибка валидации не срабатывает: Проверьте, что функция валидации подключена к хуку woocommerce_checkout_process.
• Нарушение стилей страницы: Оформляйте дополнительный контент с помощью CSS классов WooCommerce или своих стилей, избегая inline-стилей без необходимости.

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

• Всегда используйте функции sanitize_text_field, sanitize_textarea_field или эквиваленты для очистки данных из формы.
• При выводе данных используйте esc_html или соответствующие функции экранирования.
• Для больших или динамических блоков контента применяйте AJAX, чтобы не перегружать страницу и избежать конфликтов.
• Не модифицируйте напрямую шаблоны WooCommerce без создания дочерней темы или плагина — это защитит от потери изменений при обновлениях.

Сравнение способов добавления контента на страницу заказа WooCommerce