Мы научимся устанавливать значки и иконки для способов оплаты и доставки на странице оформления заказа.
Графическая информация в таком случае может положительно сказаться на скорости принятия решения при выборе способов оплаты и доставки.
Рассмотрим добавление иконок FontAwesome, а также произвольных изображений.
Стандартные способы оплаты и доставки
По умолчанию в интернет магазине uCoz перечень способов оплаты или доставки выглядит следующим образом:
Выберите способ оплаты:
Оплата картами Visa и MasterCard (СНГ) без комиссии
Оплата производится путём списывания необходимой суммы с вашего баланса в магазине
Выгодно для владельцев карт VISA, MasterCard, JCD, Diners Club
FontAwesome
FontAwesome предлагает масштабируемые векторные иконки, которые можно персонализировать — менять размер, цвет, тени и все, что можно сделать силами CSS.
К сожалению, иконок со способами оплаты в FontAwesome не так много, поэтому мы можем добавить следующие: MasterCard, VISA, AmericanExpress, PayPal, оплата при получении.
Вот, как это будет выглядеть:
Выберите способ оплаты:
Онлайн платежи с помощью аккаунта PayPal или банковской карты
Оплата картами Visa и MasterCard (СНГ) без комиссии
Просто подключите иконочный шрифт и добавьте следующие стили:
Обратите внимание на фрагмент for="pay-type-3" в селекторах. Здесь цифра 3 — это id способа оплаты, который можно посмотреть в панели управления.
Еще один момент, откуда взять код значка, чтобы подставить его в свойство content? Перейдите на сайт FontAwesome и выберите интересующую иконку. Затем посмотрите ее свойство CSS для псевдокласса :before:
Есть еще один способ узнать содержимое content: задать вопрос в комментариях :)
Свои иконки
В случае со своими иконками, понадобятся изображения способов оплаты и доставки. Найдите в интернете изображения, которые можно использовать в коммерческих целях или закажите у дизайнера.
Страница оформления заказа будет выглядеть следующим образом:
Выберите способ оплаты:
Онлайн платежи с помощью аккаунта PayPal или банковской карты