Как использовать popup для подтверждения действий в WooCommerce

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

В интернет-магазинах на WooCommerce часто возникает необходимость получить дополнительное подтверждение от пользователя перед выполнением критических действий: удаление товара из корзины, отмена заказа, переход к оплате и т.п. Это помогает снизить количество ошибок, случайных нажатий и повысить удобство работы с сайтом.

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

Как реализовать подтверждающий popup на удаление товара из корзины

Шаг 1. Подключение скрипта и стилей

Добавим в functions.php подключение собственного JS и CSS, чтобы контролировать вывод popup и стилизацию.

function wppopup_enqueue_scripts() {
    if (is_cart()) {
        wp_enqueue_style('wppopup-style', get_stylesheet_directory_uri() . '/css/wppopup.css');
        wp_enqueue_script('wppopup-script', get_stylesheet_directory_uri() . '/js/wppopup.js', array('jquery'), null, true);
        wp_localize_script('wppopup-script', 'wppopup_ajax', array(
            'ajax_url' => admin_url('admin-ajax.php')
        ));
    }
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Шаг 2. HTML-разметка popup в footer

Выведем div с разметкой popup, скрытый по умолчанию. Разметку добавим через хук в footer.

function wppopup_add_popup_html() {
    if (is_cart()) {
        ?>
        <div id="wppopup-confirm" class="wppopup-hidden">
            <div class="wppopup-overlay"></div>
            <div class="wppopup-content">
                <p>Вы уверены, что хотите удалить этот товар из корзины?</p>
                <button id="wppopup-confirm-yes">Да</button>
                <button id="wppopup-confirm-no">Отмена</button>
            </div>
        </div>
        <?php
    }
}
add_action('wp_footer', 'wppopup_add_popup_html');

Шаг 3. JS-логика подтверждения удаления товара

В файле wppopup.js реализуем перехват клика по ссылкам удаления товара из корзины с классом remove, показываем popup и по ответу пользователя либо отменяем действие, либо продолжаем.

jQuery(document).ready(function($){
    var targetHref = '';

    // Перехват кликов по кнопкам удаления
    $('a.remove').on('click', function(e) {
        e.preventDefault();
        targetHref = $(this).attr('href');
        $('#wppopup-confirm').removeClass('wppopup-hidden');
    });

    // Нажатие "Да" - переход по ссылке удаления
    $('#wppopup-confirm-yes').on('click', function() {
        window.location.href = targetHref;
    });

    // Нажатие "Отмена" - закрыть popup
    $('#wppopup-confirm-no').on('click', function() {
        $('#wppopup-confirm').addClass('wppopup-hidden');
        targetHref = '';
    });

    // Закрытие по клику на оверлей
    $('.wppopup-overlay').on('click', function() {
        $('#wppopup-confirm').addClass('wppopup-hidden');
        targetHref = '';
    });
});

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

1. Откройте страницу корзины на сайте.

2. Нажмите на значок удаления товара (обычно крестик или кнопка с классом remove).

3. Вместо мгновенного удаления появится кастомное popup-окно с вопросом подтверждения.

4. При нажатии Да товар удалится, при Отмена — popup скроется и товар останется в корзине.

5. Проверьте корректность на мобильных и десктопных устройствах.

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

• Popup не появляется при клике — проверьте, что JS и CSS файлы действительно подключаются на странице корзины. Откройте консоль браузера (F12) и посмотрите ошибки.
• Удаление происходит сразу, без popup — возможно, ссылка удаления не имеет класс remove или событие перехвата не работает. Проверьте селектор в jQuery и структуру DOM.
• Popup не закрывается по кнопке или оверлею — проверьте правильность классов и наличие обработчиков событий в JS.
• Проблемы с кэшированием — при использовании кэш-плагинов очистите кэш после изменений.

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

• Не используйте alert/prompt для подтверждений — они блокируют интерфейс и выглядят устаревшими.
• Сохраняйте логику подтверждения на клиенте, но при критичных действиях дополнительно проверяйте права доступа на сервере.
• Оптимизируйте стили popup, чтобы они загружались только на нужных страницах (например, корзина и checkout).
• Для более сложных сценариев используйте AJAX и nonce-проверки для безопасности.

Сравнение вариантов реализации подтверждающего popup