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

Диагностика проблемы: кнопки не реагируют на касание в мобильной версии WooCommerce

После обновления WooCommerce или темы часто возникает ситуация, когда кнопки «Добавить в корзину» или «Купить» на мобильных устройствах перестают реагировать на касание. Это проявляется в том, что пользователь нажимает на кнопку, но действие не происходит, либо происходит с большой задержкой. Такая проблема обычно связана с конфликтом JavaScript, неправильной инициализацией событий или конфликтами с плагинами, отвечающими за фронтенд.

Для подтверждения проблемы выполните следующие шаги:

• Откройте мобильную версию сайта (через эмулятор в браузере или реальное устройство).
• Попробуйте нажать на кнопку «Добавить в корзину».
• Откройте консоль разработчика (DevTools) и проверьте наличие JavaScript-ошибок.
• Проверьте, не блокирует ли CSS свойство pointer-events: none; кнопки.
• Временно отключите все плагины, кроме WooCommerce, чтобы исключить конфликт.

Причины проблемы и их проверка

1. Конфликт с jQuery или устаревшая версия

WooCommerce требует jQuery версии не ниже 1.12.4. Если тема или плагин подключают старую или кастомную версию, это вызывает конфликты.

console.log(jQuery.fn.jquery); // Проверка версии jQuery

Если версия ниже, обновите или замените подключение.

2. Конфликт с плагинами оптимизации или кеширования

Плагины, которые минифицируют или объединяют JS, иногда ломают порядок загрузки скриптов.

Временно отключите плагины кеширования и оптимизации (например, Autoptimize, WP Rocket) и проверьте работу кнопок.

3. Проблемы с событиями touchstart и click

Некоторые темы или плагины используют обработчики событий, которые блокируют стандартные события клика на мобильных устройствах, заменяя их на touchstart или наоборот.

Это можно проверить в консоли DevTools, добавив слушатель событий:

document.querySelector('.single_add_to_cart_button').addEventListener('touchstart', () => console.log('touchstart'));

Пошаговое решение проблемы

Шаг 1. Отключение конфликтующих плагинов

Отключите все плагины, кроме WooCommerce. Проверьте, работают ли кнопки. Если да — включайте плагины по одному, чтобы выявить виновника.

Шаг 2. Проверка и обновление jQuery

Если версия jQuery устарела, добавьте следующий код в functions.php вашей темы, чтобы загрузить стандартный jQuery из WordPress:

function load_wp_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'load_wp_jquery');

Шаг 3. Принудительная инициализация событий кнопок

Добавьте в футер или через кастомный JS-файл следующий скрипт, чтобы обеспечить поддержку событий touchstart и click для кнопок WooCommerce:

jQuery(document).ready(function($) {
    $('.single_add_to_cart_button').off('click touchstart').on('click touchstart', function(e) {
        e.preventDefault();
        $(this).trigger('click');
    });
});

Шаг 4. Проверка CSS на блокировку кликов

В DevTools проверьте, не применяется ли к кнопкам CSS свойство pointer-events: none; или opacity: 0;. Если да, исправьте стили в теме или пользовательском CSS.

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

После применения изменений:

• Очистите кеш сайта и браузера.
• Перезагрузите мобильный сайт в режиме инкогнито.
• Проверьте работу кнопок «Добавить в корзину» на нескольких устройствах.
• Убедитесь, что в консоли нет JavaScript-ошибок.

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

• Ошибка: Не отключили все плагины, кроме WooCommerce, перед тестом.
  Исправление: всегда отключайте все сторонние плагины, чтобы выявить конфликт.
• Ошибка: Добавление кастомного jQuery без удаления старого.
  Исправление: используйте wp_deregister_script('jquery') перед подключением.
• Ошибка: Обработчики событий добавляются несколько раз.
  Исправление: используйте off() перед on() в jQuery для удаления старых обработчиков.
• Ошибка: Стили темы блокируют клики на кнопках.
  Исправление: проверьте CSS и исправьте свойства pointer-events и opacity.

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

• Используйте стандартные версии jQuery из ядра WordPress для совместимости.
• Минимизируйте использование плагинов оптимизации JS — они часто ломают порядок загрузки скриптов WooCommerce.
• Регулярно проверяйте консоль браузера на ошибки после обновлений WooCommerce и темы.
• Используйте инструменты мониторинга, чтобы отслеживать ошибки JavaScript на сайте.

Сравнение вариантов решения проблемы

Метод	Преимущества	Недостатки
Отключение плагинов	Быстрая идентификация конфликтов	Временное снижение функционала
Принудительное подключение jQuery из WP	Гарантированная совместимость	Может конфликтовать с кастомными скриптами
Кастомный JS для событий	Гибкое решение, минимально вмешивается в код	Требует поддержки и тестирования после обновлений
Исправление CSS	Устраняет визуальные и интерактивные баги	Может быть временным, если стили перезаписываются