WooCommerce: как отключить всплывающие окна при обновлении корзины

Проблема: раздражающие всплывающие окна при обновлении корзины в WooCommerce

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

Почему это происходит?

WooCommerce использует JavaScript и AJAX для обновления корзины без перезагрузки страницы. В некоторых темах или плагинах подключены скрипты, которые при событиях обновления корзины вызывают модальные окна или уведомления.

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

Диагностика проблемы: как определить источник всплывающих окон

• Откройте консоль браузера (F12 > Console) и посмотрите ошибки JavaScript, которые могут быть связаны с обновлением корзины.
• Используйте вкладку Network для отслеживания AJAX-запросов при изменении корзины.
• Отключите плагины, которые могут добавлять всплывающие окна, и проверьте, исчезнет ли проблема.
• Переключитесь на дефолтную тему Storefront или Reboot (https://wpshop.ru/themes/reboot?utm_source=wpin.ru&utm_medium=article&utm_campaign=woocommerce-zapret-vsplyvajushhih-okoshh-pri-obnovlenii-korziny) — если окна пропадут, значит проблема в теме.

Пошаговое решение: отключение всплывающих окон при обновлении корзины

1. Отключение стандартных уведомлений WooCommerce

WooCommerce выводит уведомления с классом .woocommerce-message, которые могут всплывать. Чтобы их скрыть после обновления корзины, можно добавить скрипт, который подавляет показ сообщений:

add_action('wp_enqueue_scripts', function() {
    if (is_cart()) {
        wp_add_inline_script('wc-cart', "
            jQuery(document).on('updated_wc_div', function() {
                jQuery('.woocommerce-message').hide();
            });
        ");
    }
});

2. Отключение всплывающих окон из темы или плагинов

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

Пример блокировки всплывающего окна от плагина:

add_action('wp_footer', function() {
    ?>
    <script>
    jQuery(function($){
        $(document).on('updated_wc_div', function() {
            // Предотвращаем показ модального окна
            if (typeof someModalFunction === 'function') {
                someModalFunction = function(){};
            }
        });
    });
    </script>
    <?php
});

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

3. Использование CSS для скрытия всплывающих окон

Если отключить скрипты нельзя, можно скрыть окна стилями CSS:

.your-popup-class {
    display: none !important;
}

Для определения класса используйте инструменты разработчика браузера.

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

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

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

• Ошибка: После отключения всплывающих окон корзина не обновляется визуально.
  Причина: Слишком агрессивное отключение скриптов, которые отвечают за обновление корзины.
  Решение: Отключать только скрипты уведомлений, не трогая основные AJAX-обработчики WooCommerce.
• Ошибка: Консоль показывает ошибку «Uncaught ReferenceError» после внедрения кода.
  Причина: Попытка переопределить несуществующую функцию.
  Решение: Перед переопределением функции проверять её существование, как показано в примере кода.
• Ошибка: Всплывающие окна возвращаются после обновления плагина или темы.
  Причина: Изменения были внесены напрямую в файлы темы или плагина.
  Решение: Вносить изменения через дочернюю тему или плагин-сниппет, чтобы сохранить их при обновлениях.

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

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

Сравнение способов отключения всплывающих окон