Как изменить цвет кнопки «В корзину»

Дата последнего изменения:

Сейчас в Эквиде есть два дизайна страницы товара:

Первый вариант дизайна

design-button-add-to-cart

Второй вариант дизайна

design-button-add-to-cart

В каждом из этих дизайнов можно изменить цвет кнопки «В корзину», если требуется. Делается это с помощью CSS-кодов.

Эти коды нужно скопировать и добавить в свою CSS-тему в Панели управления Эквида → Дизайн.

Если у вас ещё нет CSS-темы, нажмите «Создать тему», «Новая CSS-тема» и добавьте туда код. Затем нажмите «Активировать» и сохраните. Если у вас уже есть CSS-тема, добавьте новый код прямо в неё и сохраните.

Изменить цвет кнопки «В корзину» для первого варианта страницы товара

Перекрасим кнопку «В корзину» в зелёный цвет. Для этого в активную CSS-тему в панели управления Эквида нужно добавить CSS-код:

button.ecwid-btn.ecwid-btn--primary.ecwid-btn--addToBag {
background-color:#008080; 
} 

design-button-add-to-cart

Цвет кнопки в CSS-коде (background:#ADD8E6) взят в качестве примера. Вы можете менять его на ваше усмотрение.

 

Изменить цвет кнопки «В корзину» при наведении для первого варианта страницы товара

Теперь перекрасим кнопку «В корзину» в серый цвет при наведении на неё. Для этого в ту же CSS-тему в панели управления Эквида нужно добавить CSS-код:

button.ecwid-btn.ecwid-btn--primary.ecwid-btn--addToBag:hover {
background-color:#DCDCDC; 
} 

design-button-add-to-cart

Изменить цвет кнопки «В корзину» для второго варианта страницы товара

Перекрасим кнопку «В корзину» в зелёный цвет. Для этого в активную CSS-тему в панели управления Эквида нужно добавить CSS-код:

.ec-size.ec-size--s .ec-store .form-control--large .form-control__button { 
background-color:#008080; 
}  

design-button-add-to-cart

Цвет кнопки в CSS-коде (background:#ADD8E6) взят в качестве примера. Вы можете менять его на ваше усмотрение.

 

Изменить цвет кнопки «В корзину» при наведении для второго варианта страницы товара

Теперь перекрасим кнопку «В корзину» в синий цвет при наведении на неё. Для этого в ту же CSS-тему в панели управления Эквида нужно добавить CSS-код:

.ec-size.ec-size--s .ec-store .form-control--large .form-control__button:hover { 
background-color:#4682B4; 
}  

design-button-add-to-cart

Более подробно о том, как подобрать и использовать CSS-правила, написано в нашей статье: Как изменить дизайн в Эквиде.

К началу
Статья ответила на ваш вопрос?