Добавляем значок Корзина в меню

В стандартных настройках колормага нет функции добавления значка Корзина в меню. Сделаем его самостоятельно.

Перейдите Внешний вид — Меню. Выберите страницу Корзина и добавьте её в меню

Откройте образовавшуюся вкладку Корзина, здесь нас интересуют 2 поля

Слово Корзина замените на

<i class="fa fa-shopping-cart" aria-hidden="true"></i>

а в строку Классы CSS внесите запись: cartwoo. Это нужно для того, чтобы этому пункту меню присвоить класс в котором мы позже сможем прописать нужные нам свойства.

Таким образом у вас должно получиться примерно так:

Теперь вы можете сохранить меню и посмотреть результат на главной странице. Должно выглядеть так:

То есть значок Корзина сейчас у нас идёт как последовательный пункт меню. Давайте перенесём его в крайний правый угол меню и немножко увеличим.

Следующие коды необходимо вносить как пользовательские css (настройка — дополнительные стили)

li.cartwoo {
float: right;
}

i.fa.fa-shopping-cart {
font-size: 25px;
}

Получаем такой вид меню

если кликнуть на значок Корзина то перейдём на страницу корзины.

С этим разобрались, теперь перейдём в мобильному виду. А вид такой

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

@media screen and (max-width: 767px) {
li.cartwoo {
float: none;
}
}

смотрим на результат. На этом настройка закончена.