Contact Form 7: интеграция с оформлением заказа WooCommerce

Зачем интегрировать Contact Form 7 с WooCommerce Checkout?

Иногда стандартных полей оформления заказа WooCommerce недостаточно для сбора нужной информации от покупателей. Contact Form 7 (CF7) — простой инструмент для гибкой кастомизации форм. Интеграция CF7 с WooCommerce позволяет добавлять кастомные поля, обрабатывать их и сохранять вместе с заказом.

Диагностика проблемы: почему стандартный checkout не подходит

Проблемы с кастомизацией WooCommerce Checkout:

• Невозможно добавить сложные поля с логикой и валидацией.
• Ограниченные возможности дизайна и интеграций в стандартных настройках.
• Трудности с обработкой и хранением дополнительных данных.

Если требуется собрать уникальные данные от клиентов (например, согласия, дополнительные комментарии, кастомные опции), CF7 — отличный вариант.

Пошаговое решение: подключаем Contact Form 7 к WooCommerce Checkout

1. Создайте форму в Contact Form 7

Создайте форму с нужными полями. Пример формы с полем «Комментарий к заказу» и чекбоксом согласия:

[text* order_note placeholder "Комментарий к заказу"]
[checkbox* agree "Я согласен с условиями"]
[submit "Отправить"]

2. Вставьте форму на страницу оформления заказа

Добавьте шорткод формы CF7 в WooCommerce Checkout с помощью хука woocommerce_checkout_before_customer_details. В functions.php вашей темы добавьте:

add_action('woocommerce_checkout_before_customer_details', 'add_cf7_form_to_checkout');
function add_cf7_form_to_checkout() {
    echo do_shortcode('[contact-form-7 id="123" title="Checkout Custom Form"]');
}

Замените ID и название на ваши.

3. Обрабатываем данные из CF7 формы и сохраняем в заказ

Данные из CF7 не связываются с WooCommerce автоматически. Нужно перехватить отправку формы CF7, получить данные и сохранить в мета заказа:

add_action('wpcf7_mail_sent', 'save_cf7_data_to_wc_order');
function save_cf7_data_to_wc_order($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) return;

    $data = $submission->get_posted_data();

    // Предположим, что номер заказа передается в скрытом поле или сессии
    $order_id = isset($_SESSION['current_order_id']) ? intval($_SESSION['current_order_id']) : 0;
    if (!$order_id) return;

    $order = wc_get_order($order_id);
    if (!$order) return;

    // Сохраняем комментарий и согласие
    if (isset($data['order_note'])) {
        $order->update_meta_data('order_note', sanitize_text_field($data['order_note']));
    }
    if (isset($data['agree'])) {
        $order->update_meta_data('agree_terms', 'yes');
    } else {
        $order->update_meta_data('agree_terms', 'no');
    }

    $order->save();
}

Важно: необходимо передавать ID заказа или другую привязку, чтобы связать данные CF7 с конкретным заказом. Один из вариантов — сохранить ID заказа в сессии или скрытом поле формы.

4. Отобразить дополнительные данные в админке WooCommerce

Чтобы видеть новые поля в панели заказа, добавьте код:

add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta', 10, 1);
function display_custom_order_meta($order) {
    echo '<p><strong>Комментарий к заказу:</strong> ' . esc_html($order->get_meta('order_note')) . '</p>';
    echo '<p><strong>Согласие с условиями:</strong> ' . esc_html($order->get_meta('agree_terms')) . '</p>';
}

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

• Перейдите на страницу оформления заказа WooCommerce.
• Убедитесь, что ваша форма CF7 отображается корректно.
• Заполните форму и оформите заказ.
• Проверьте в админке WooCommerce, что дополнительные данные сохранены в заказе.
• Проверьте, что данные отображаются в письмах, если нужно – добавьте их в шаблон email.

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

• Данные из формы CF7 не сохраняются в заказе: убедитесь, что ID заказа передается корректно и доступен при обработке формы.
• Форма CF7 не отображается на странице оформления заказа: проверьте, что шорткод вставлен через правильный хук и не конфликтует с другими плагинами.
• Ошибки при отправке формы CF7 на странице WooCommerce: отключите плагин кеширования и проверьте консоль браузера на JS ошибки.
• Поля не видны в админке заказа: проверьте правильность хука и используйте метод get_meta() у объекта заказа.

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

• Всегда используйте функции очистки данных (sanitize_text_field, esc_html) при сохранении и выводе.
• Избегайте хранения лишних данных — сохраняйте только необходимые поля.
• Используйте nonce и проверяйте права пользователя, если обрабатываете данные вне CF7.
• Не перегружайте страницу лишними скриптами, подключайте их по необходимости через wp_enqueue_script.
• Для повышения UX используйте AJAX-отправку CF7, но убедитесь, что интеграция с WooCommerce корректно обрабатывает асинхронные запросы.

Сравнение способов интеграции Contact Form 7 и WooCommerce Checkout