Как добавить свой класс кнопке «В корзину» вне зависимости от типа товара?

Ссылка скопирована
1 ответ

На странице товара необходимо добавить кнопке "В корзину" свой класс. Вне зависимости это "Простой товар", "Сгруппированный товар", "Внешний/Партнерский товар", "Вариативный товар".

Как вариант переопределить файл шаблона каждого типа товара, но не хотелось бы ради одного класса переопределять 4 файла.

Дополнительно:

Смотря для чего добавлять класс.

Вариант 1:
С помощью JS добавлять класс нужной кнопки

Вариант 2:
Отредактировать тему, найти верстку с кнопкой и добавить туда класс.
Если кнопка выводится через функцию, то доработать функцию.

P.S. если прикрепишь шаблон страницы товара, смогу дать точное решение

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Антон С. Ответ

Чтобы добавить свой класс кнопке “В корзину” для всех типов товаров WooCommerce, не нужно переопределять четыре шаблона. Используйте фильтр woocommerce_loop_add_to_cart_args для кнопок в каталоге и отдельный подход для кнопки на странице товара.

Для каталога:

add_filter('woocommerce_loop_add_to_cart_args', function ($args, $product) {
    $args['class'] = isset($args['class'])
        ? $args['class'] . ' my-add-to-cart'
        : 'button my-add-to-cart';
 
    return $args;
}, 10, 2);

add_filter('woocommerce_loop_add_to_cart_args', function ($args, $product) { $args['class'] = isset($args['class']) ? $args['class'] . ' my-add-to-cart' : 'button my-add-to-cart'; return $args; }, 10, 2);

Для single product WooCommerce использует разные шаблоны в зависимости от типа товара, но часто достаточно добавить класс через JS или через фильтры/хуки вокруг формы. Если нужно именно на основной кнопке, можно использовать фильтр параметров кнопки для простого товара:

add_filter('woocommerce_product_single_add_to_cart_text', function ($text) {
    return $text;
});

add_filter('woocommerce_product_single_add_to_cart_text', function ($text) { return $text; });

А класс проще добавить CSS-селектором, потому что кнопка уже имеет стандартные классы:

.single-product .single_add_to_cart_button {
    /* ваши стили */
}

.single-product .single_add_to_cart_button { /* ваши стили */ }

Если нужен именно дополнительный класс в HTML, можно добавить его через небольшой JS:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.single_add_to_cart_button').forEach((button) => {
    button.classList.add('my-add-to-cart');
  });
});

document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.single_add_to_cart_button').forEach((button) => { button.classList.add('my-add-to-cart'); }); });

Переопределять шаблоны ради одного класса не стоит: потом WooCommerce обновится, а у вас останутся старые template overrides с предупреждениями и потенциальными багами.

Итог: в каталоге добавляйте класс фильтром woocommerce_loop_add_to_cart_args, на странице товара чаще достаточно стандартного класса .single_add_to_cart_button или точечного JS. Шаблоны не трогайте без необходимости.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Telegram Как добиться, чтобы Telegram прислал мне именно смс код, а не через звонок его диктовал? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 1 ответ VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 1 ответ