Skip to main content

Стилизация корзины

Иконка корзины имеет следующую структуру

<div className="basket-round">
	<span className="basket-count">1</span>
    <span className="basket-money">1234 ₽</span>
</div>

где

  • .basket-round - собственно иконка
  • .basket-count - кружочек с количеством товаров в корзине
  • .basket-money - общая сумма товаров в корзине. Появляется в момент добавления в корзину товара и гаснет через некоторое время.

Задавая стили для этих классов в файле css Вашего сайта можно изменить внешний вид корзины. Например заменить цвет иконки корзины с черного на зеленый, а кружочек с количеством покупок из нижнего правого угла перенести в верхний левый:

.basket-round {
	background-color: green !important;
}

.basket-count {
  top: 0 !important;
  left: 0;
  right: auto !important;
}

Также имеется возможность полностью заменить иконку корзины на кастомную, например вписанную в заголовок Вашего сайта.

Наверх