WooCommerce: как изменить стиль кнопки «Добавить в корзину» при добавлении товара

Диагностика проблемы: почему кнопка «Добавить в корзину» не меняет стиль

По умолчанию в WooCommerce кнопка «Добавить в корзину» не изменяет свой внешний вид после клика, что может создавать неопределённость у пользователя — добавлен ли товар в корзину. Многие хотят визуально показать успешное добавление товара, например, сменить цвет, текст или иконку кнопки.

Если вы попытались изменить стиль кнопки с помощью CSS, но при добавлении товара кнопка не меняется, вероятно, проблема связана с AJAX-загрузкой контента. WooCommerce обновляет содержимое кнопок через AJAX без перезагрузки страницы, поэтому статический CSS или JavaScript может не срабатывать после динамического обновления.

Пошаговое решение: динамическое изменение стиля кнопки после добавления товара

1. Подключаем кастомный JavaScript для отслеживания события добавления в корзину

WooCommerce триггерит событие added_to_cart в jQuery после успешного добавления товара в корзину через AJAX. Используем это событие, чтобы изменить стиль кнопки.

jQuery(function($) {
    // Отслеживаем событие добавления товара в корзину
    $(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
        if ($button && $button.length) {
            // Меняем текст кнопки
            $button.text('Добавлено');
            // Добавляем класс для изменения стиля
            $button.addClass('added-to-cart');
            // Отключаем кнопку, чтобы предотвратить повторное добавление
            $button.prop('disabled', true);
        }
    });
});

2. Добавляем CSS для нового класса кнопки

Создайте или дополните CSS-файл темы (обычно style.css или подключаемый кастомный CSS) следующим кодом:

.added-to-cart {
    background-color: #28a745 !important; /* зелёный фон */
    color: #fff !important; /* белый текст */
    border-color: #218838 !important;
    cursor: default !important;
}

3. Подключение скрипта правильно в теме или плагине

Добавьте следующий PHP-код в functions.php вашей темы или в кастомный плагин, чтобы подключить JS только на страницах с товарами:

function enqueue_custom_add_to_cart_script() {
    if (is_product() || is_shop() || is_product_category()) {
        wp_enqueue_script('custom-add-to-cart', get_stylesheet_directory_uri() . '/js/custom-add-to-cart.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_add_to_cart_script');

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

1. Откройте страницу товара или магазин.
2. Нажмите кнопку «Добавить в корзину».
3. Кнопка должна моментально сменить текст на «Добавлено», поменять цвет и стать неактивной.
4. Проверьте в консоли браузера (F12) отсутствие ошибок JavaScript.
5. Если кнопка не меняет стиль, убедитесь, что скрипт подключён и событие added_to_cart срабатывает (можно поставить console.log внутри обработчика).

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

• Скрипт не подключается: Проверьте путь к файлу custom-add-to-cart.js и используйте get_stylesheet_directory_uri() для дочерних тем.
• CSS не применяется: Возможно, другие стили имеют более высокий приоритет. Используйте !important или увеличьте специфичность селектора.
• Обработчик события не срабатывает: Убедитесь, что jQuery загружен, и событие added_to_cart поддерживается вашей версией WooCommerce.
• Кнопка не становится неактивной: Проверьте правильность вызова $button.prop('disabled', true) и отсутствие конфликтов с другими скриптами.

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

• Подключайте скрипты только на нужных страницах, чтобы не нагружать все страницы сайта.
• Минимизируйте кастомный JavaScript и CSS для ускорения загрузки.
• Тестируйте изменения на staging-сайте, прежде чем выкатывать на продакшн.
• Не изменяйте стандартные классы WooCommerce, чтобы не сломать совместимость с обновлениями.

Сравнение подходов: плагин vs кастомный код