Блог

Как в woocommerce изменить цвет кнопки Добавить в корзину

По просьбам трудящихся, решил начать мини курс по изменению цветов и надписей в woocommerce
Одним из частых вопросов, это как изменить цвет и надпись кнопки Добавить в корзину add to cart.

изменяем цвет кнопки Добавить в корзину
И так приступим.
У кнопки есть три своих стиля, Просто кнопка, цвет при наведении и активная кнопка (какой цвет будет при наведении).
1.

2.

3.

И так мы видим что в стиле «обычная кнопка» записаны все параметры, Высота ширина, размер текста и тд (более подробную информацию что за что отвечает конкретный стиль CSS смотрите в учебниках =)
я опишу основы
font-size: 100%; это размер шрифта — по умолчанию он берется из общих настроек темы Вы можете написать что-то в роде 20px;
padding: .618em 1em; — отступы от текста, по умолчанию описан отступ с сверху и снизу .618em слева и справа по 1em

color: #515151; цвет текста
background-color: #ebe9eb; фон кнопки
Ну с основами разобрались. теперь что с этим всем делать.
В каждой теме есть файл style.css вот туда и помещаем наши измененные стили
Если в основном стиле кнопки вы не меняли все параметры, а изменили только цвет фона кнопки, то не нужно копировать весь стиль
а пишите только ту часть которую изменили
Например:

Важно! В некоторых темах уже описаны эти стили и чаще всего происходит конфликт, Наши добавленные изменения не работают, так как темные стили считаются главными. Что бы убедить систему что наши стили все таки главней, дописываем к ним !important
.woocommerce button.button {
font-size: 20px; !important;}

Все дерзайте в изменениях и раскрашиванию кнопки! Как изменить текст Добавить в корзину расскажу в следующей статье.

Поделиться постом

13
Оставить комментарий

avatar
5 Цепочка комментария
8 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
6 Авторы комментариев
AndreyАндрейАндрейBадимДенис Петровский Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Илья
Гость
Илья

Нигде не нашел .woocommerce button.button
Может стоило написать где этот класс искать?

Андрей
Гость
Андрей

Где класс найти, в каком файле css?

Bадим
Гость
Bадим

Вот это работает — изменяется размер шрифта в кнопке:
.woocommerce button.button {
font-size: 20px}
Потом пробовал вставить строчку с фоном, но фон меняться не хочет. Я подумал, что не так что-то делаю, вставил это из статьи:
.woocommerce button.button {
font-size: 20px !important;}
Тоже никаких перемен. Почему?

Андрей
Гость
Андрей

Что делать в таком случае, если ничего не меняется, как найти выход?

Андрей
Гость
Андрей

С этим разобрался, редактировал сам css woocommerce, теперь не могу понять, как изменить цвет кнопок при наведении на них, подскажите?

Андрей
Гость
Андрей

Разобрался за это отвечает строчка
.woocommerce input.button.alt:hover{background-color:#935386;color:#fff}
Спасибо Вам, сам бы не допёр)))))

Андрей
Гость
Андрей

Всем привет! Подскажите, где найти файл style.css WooCommerce, смотрю в упор и не вижу…

Andrey
Гость
Andrey

Денис, благодарю Вас!