Как удалить popup из WooCommerce после успешного заказа в WordPress

Диагностика проблемы: popup не закрывается после оформления заказа в WooCommerce

Часто бывает, что на сайте WordPress с WooCommerce используется popup для различных целей: информирования, сбора email, акций и т.д. Однако после успешного оформления заказа popup может продолжать отображаться, мешая пользователю и ухудшая UX. Это происходит, если popup не связан с событием успешного завершения оформления заказа или не учитывает переход на страницу благодарности.

Чтобы решить проблему, нужно точно определить, как и где вызывается popup, и обеспечить его автоматическое скрытие после завершения заказа.

Пошаговое решение: удаляем popup после успешного оформления заказа WooCommerce

1. Определяем страницу благодарности (Thank You page)

WooCommerce по умолчанию перенаправляет пользователя на URL типа /checkout/order-received/ после успешного оформления заказа. Проверим это, открыв настройки WooCommerce или совершив тестовый заказ.

2. Добавляем условие для отключения popup на странице благодарности

Если popup вызывается через JavaScript, нужно добавить проверку URL. Если popup выводится через PHP-шаблон или shortcode, выключить его на странице благодарности.

Пример кода для отключения popup на странице благодарности в JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    if (window.location.pathname.indexOf('/checkout/order-received/') === -1) {
        // Инициализация popup
        initPopup();
    }
});

Этот код не запускает функцию initPopup() на странице благодарности.

3. Используем PHP-хук для скрытия popup на странице thank you

Если popup добавлен через action hook, можно отключить его на странице благодарности так:

function disable_popup_on_thankyou_page() {
    if (is_wc_endpoint_url('order-received')) {
        remove_action('wp_footer', 'render_my_popup');
    }
}
add_action('wp', 'disable_popup_on_thankyou_page');

Замените render_my_popup на функцию, которая выводит popup.

4. Обработка AJAX-форм в popup после успешного заказа

Если popup содержит форму, отправляемую AJAX, можно добавить событие, которое закрывает popup при успешном ответе сервера:

jQuery(document).on('ajaxSuccess', function(event, xhr, settings) {
    if (settings.url.indexOf('woocommerce_checkout') !== -1) {
        closePopup(); // Ваша функция закрытия popup
    }
});

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

• Сделайте тестовый заказ в WooCommerce.
• Убедитесь, что после перехода на страницу благодарности popup не появляется.
• Проверьте на разных браузерах и устройствах.
• Проверьте, что popup всё еще появляется на остальных страницах, если это нужно.

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

• Неправильный URL страницы благодарности: проверьте, что используете правильный путь в условии (/checkout/order-received/ или кастомный).
• Функция вывода popup не удаляется: удостоверьтесь, что у вас правильное имя функции при remove_action.
• Popup вызывается через JavaScript без проверки URL: добавьте проверку пути страницы перед инициализацией popup.
• Кэширование страниц: иногда кэш мешает увидеть изменения, очистите кэш сайта и браузера.

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

• Для снижения нагрузки используйте условные теги WordPress, чтобы не загружать скрипты popup на странице благодарности.
• Если popup содержит формы, обязательно интегрируйте защиту от CSRF и spam (например, nonce и reCAPTCHA).
• Используйте минимальное количество JS, чтобы не замедлять загрузку страницы заказа и thank you.

Сравнение способов отключения popup на странице благодарности