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

  1. Использование Storefront, тема, разработанная для WooCommerce
  2. Использование обычной темы
  3. Plugin
  4. Написать CSS

Один из вопросов, которые мне постоянно задают: «Как изменить цвет кнопки« Добавить в корзину »в WooCommerce?». И в зависимости от того, какая у вас тема, это может быть так же просто, как нажать несколько кнопок в настройщике WordPress. или если вы создаете тему с нуля, вам придется написать немного CSS. Я покажу вам все варианты ниже.

Использование Storefront, тема, разработанная для WooCommerce

Storefront это бесплатная тема WooTheme, разработанная специально для WooCommerce , Это означает, что в нем уже есть все необходимые элементы управления, чтобы настроить кнопку в соответствии с желанием вашего сердца.

Чтобы настроить кнопку «Добавить в корзину», вам просто нужно открыть настройщик WordPress. В админке WordPress зайдите в Внешний вид -> Настройка и загрузите настройщик. Затем в настройщике нажмите « Кнопки» -> « Изменить цвет фона кнопки» и установите цвет. Нажмите Сохранить и опубликовать, и все готово.

Один из вопросов, которые мне постоянно задают: «Как изменить цвет кнопки« Добавить в корзину »в WooCommerce

Настройте параметр «Цвет фона альтернативной кнопки», чтобы изменить кнопку «Добавить в корзину».

Чтобы изменить кнопку «Добавить в корзину» на странице «Магазин», вам необходимо выполнить вышеуказанное и настроить цвет фона в разделе « Кнопки» .

Использование обычной темы

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

Plugin

Если вы просто хотите, чтобы ваш магазин работал и работал с плагином, это отличный способ сделать это. WooCommerce Colors (бесплатно) добавляет дополнительные элементы управления в настройщик вашей темы. Это не будет работать на 100% с каждой темой, но должно работать с большинством из них. И это определенно работает с темами по умолчанию, такими как TwentySixteen и TwentyFifteen.

Написать CSS

Последний способ хорош, если вы немного знакомы с CSS и хотите написать CSS для своей темы и поместить его в файл style.css своей темы. Таким образом, вам не нужно поддерживать плагин, и вам не нужно извлекать стили CSS из базы данных (где плагин хранит значения CSS).

Чтобы стилизовать кнопку «Добавить в корзину» на странице отдельного товара, вам нужно использовать класс single_add_to_cart_button. А для кнопки «Добавить в корзину» на странице магазина вы захотите использовать класс add_to_cart_button.

Если вы переопределяете любые существующие стили, вам придется написать высокоспецифичные селекторы , Мне пришлось использовать следующее, чтобы получить правила CSS для применения в TwentyTwelve.

Счастливая настройка кнопки «Добавить в корзину»! 🙂