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

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

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

Диагностика проблемы

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

• Откройте страницу товара или каталог с кнопкой «Добавить в корзину».
• Кликните на кнопку и посмотрите, изменяется ли ее внешний вид.
• Откройте инструменты разработчика (F12) и проверьте, есть ли события на кнопке: изменения классов, текста, атрибутов.
• Если используется AJAX, убедитесь, что срабатывает событие добавления товара.

Если кнопка не меняет состояние, значит, требуется доработка либо через JavaScript, либо через PHP и хуки WooCommerce.

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

1. Добавляем класс и меняем текст кнопки с помощью JavaScript

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

jQuery(document).ready(function($) {
  $('body').on('added_to_cart', function(event, fragments, cart_hash, $button) {
    if ($button) {
      $button.text('Добавлено');
      $button.prop('disabled', true);
      $button.addClass('added-to-cart');
    }
  });
});

added_to_cart — это событие WooCommerce, которое срабатывает после AJAX-добавления товара в корзину. Мы меняем текст кнопки, добавляем класс и блокируем повторное нажатие.

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

Вставьте в файл стилей темы (style.css) следующий код:

.added-to-cart {
  background-color: #28a745 !important;
  color: #fff !important;
  cursor: default !important;
  opacity: 0.7;
}

Это сделает кнопку зеленой, полупрозрачной и неактивной визуально.

3. (Опционально) Для тем без AJAX — меняем текст кнопки после отправки формы

Если на сайте не используется AJAX для добавления в корзину, можно изменить текст кнопки после отправки формы с помощью PHP:

add_filter('woocommerce_product_single_add_to_cart_text', function($text) {
  if (isset($_GET['added-to-cart']) && $_GET['added-to-cart'] == get_the_ID()) {
    return 'Добавлено';
  }
  return $text;
});

Однако такой способ менее удобен, так как страница перезагружается.

Проверка результата

• Обновите страницу товара или каталога.
• Нажмите кнопку «Добавить в корзину» на любом товаре.
• Убедитесь, что кнопка изменила текст на «Добавлено», стала неактивной и изменила цвет.
• Проверьте в инструментах разработчика, что на кнопку добавился класс added-to-cart.
• Попробуйте добавить другой товар, чтобы убедиться, что функционал работает для всех кнопок.

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

• Событие added_to_cart не срабатывает.
  Проверьте, что WooCommerce и тема используют AJAX-добавление товара. Если нет, событие не вызовется.
• JS-код не подключается.
  Убедитесь, что jQuery подключен и ваш скрипт загружается на нужных страницах. Проверьте консоль браузера на ошибки.
• CSS-стили не применяются.
  Проверьте, что ваш стиль подключен после стилей темы и WooCommerce. Используйте !important для перебивания.
• Кнопка становится неактивной, но пользователь не видит изменений.
  Возможно кэширование. Очистите кэш браузера и плагинов.

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

• Добавляйте JS-код через enqueue, а не напрямую в шаблон, чтобы избежать конфликтов и обеспечить кэширование.
• Минимизируйте CSS, чтобы не влиять на скорость загрузки.
• Проверяйте совместимость с другими плагинами, которые могут менять поведение кнопки «Добавить в корзину».
• Если нужно массово изменить стиль кнопок на сайте, используйте дочернюю тему или кастомный плагин для правок, чтобы избежать потери изменений при обновлениях.

Сравнение способов изменения кнопки «Добавить в корзину»