WooCommerce: диагностика и решение ошибки неработающих кнопок «Купить»

Почему в WooCommerce не работают кнопки «Купить»

Неработающие кнопки «Купить» в WooCommerce — частая проблема после обновления плагина, темы или установки новых плагинов. Кнопка может не реагировать на клики, не добавлять товар в корзину или вообще не отображаться.

Основные причины:

• Конфликты JavaScript с другими плагинами или темой.
• Неправильные настройки AJAX в WooCommerce.
• Ошибки в пользовательском коде, например, в functions.php или кастомных скриптах.
• Проблемы с кэшированием и минификацией скриптов.
• Неверно подключенные стили и скрипты WooCommerce.

Диагностика проблемы с неработающими кнопками «Купить»

1. Проверка консоли браузера

Откройте инструменты разработчика (F12) и перейдите во вкладку Console. При клике на кнопку «Купить» должны отсутствовать ошибки JavaScript. Если есть ошибки, они подскажут источник проблемы.

2. Отключение плагинов

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

3. Переключение темы

Активируйте стандартную тему WordPress (например, Storefront) и проверьте работу кнопок. Если кнопки работают, причина в теме.

4. Проверка AJAX

Кнопка «Купить» в WooCommerce по умолчанию работает с AJAX для добавления товара в корзину без перезагрузки. Проверьте, что скрипты WooCommerce корректно загружаются:

function check_woocommerce_scripts() {
    if ( ! wp_script_is( 'wc-add-to-cart' ) ) {
        error_log( 'Скрипт wc-add-to-cart не загружен' );
    }
}
add_action( 'wp_enqueue_scripts', 'check_woocommerce_scripts' );

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

Шаг 1. Очистка кэша

Отключите все плагины кэширования (WP Rocket, W3 Total Cache, LiteSpeed Cache и др.) и очистите кэш браузера.

Шаг 2. Отключение минификации JS

Если используется минификация JavaScript, временно отключите её, так как она часто ломает AJAX-скрипты WooCommerce.

Шаг 3. Восстановление стандартных скриптов WooCommerce

Если в functions.php темы есть переопределения скриптов, временно закомментируйте их.

function dequeue_custom_wc_scripts() {
    wp_dequeue_script( 'wc-add-to-cart' );
    wp_dequeue_script( 'woocommerce' );
    wp_dequeue_script( 'wc-cart-fragments' );
}
add_action( 'wp_print_scripts', 'dequeue_custom_wc_scripts', 100 );

Удалите или исправьте подобные участки, если они есть.

Шаг 4. Исправление конфликта с jQuery

WooCommerce требует jQuery в noConflict режиме. Убедитесь, что тема и плагины не загружают jQuery несколько раз или не используют устаревший синтаксис.

Шаг 5. Восстановление работы AJAX вручную

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

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_product' ) && is_product() ) {
        wp_enqueue_script( 'wc-add-to-cart' );
    }
} );

Как проверить, что проблема решена

• Кнопка «Купить» кликабельна и добавляет товар в корзину без перезагрузки страницы.
• В консоли браузера нет ошибок JavaScript.
• Функция AJAX срабатывает и обновляет число товаров в корзине.
• При повторном включении плагинов и темы нет возврата проблемы (конфликт устранён).

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

• Ошибка: Кнопка не реагирует, но ошибок в консоли нет.
  Причина: Кэширование страницы или кэш браузера.
  Решение: Очистить кэш, отключить кэширование для корзины и страниц товаров.
• Ошибка: Конфликт jQuery.
  Причина: Несовместимые версии jQuery или множественный вызов.
  Решение: Использовать стандартный jQuery WordPress, удалить сторонние подключения.
• Ошибка: Скрипты не загружаются на странице товара.
  Причина: В теме отключено подключение WooCommerce скриптов.
  Решение: Проверить функции wp_enqueue_script в теме.

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

• Отключайте JavaScript-минификацию для страниц с AJAX WooCommerce, чтобы избежать ломки функционала.
• Используйте плагин Clearfy Pro (ссылка) для оптимизации загрузки скриптов и устранения конфликтов.
• Регулярно обновляйте WooCommerce, тему и плагины, чтобы избежать проблем совместимости.
• Используйте консоль разработчика для оперативной диагностики JavaScript ошибок.

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