Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Значки для способов оплаты и доставки интернет магазина

Сергей    14.09.2016    7744    3.2 из 5.0 (14)

Оцените материал:

    О чем здесь?

    Мы научимся устанавливать значки и иконки для способов оплаты и доставки на странице оформления заказа.

    Графическая информация в таком случае может положительно сказаться на скорости принятия решения при выборе способов оплаты и доставки.

    Рассмотрим добавление иконок FontAwesome, а также произвольных изображений.

    Стандартные способы оплаты и доставки

    По умолчанию в интернет магазине uCoz перечень способов оплаты или доставки выглядит следующим образом:

    Выберите способ оплаты:

    Оплата картами Visa и MasterCard (СНГ) без комиссии
    Оплата производится путём списывания необходимой суммы с вашего баланса в магазине
    Выгодно для владельцев карт VISA, MasterCard, JCD, Diners Club

    FontAwesome

    FontAwesome предлагает масштабируемые векторные иконки, которые можно персонализировать — менять размер, цвет, тени и все, что можно сделать силами CSS.

    К сожалению, иконок со способами оплаты в FontAwesome не так много, поэтому мы можем добавить следующие: MasterCard, VISA, AmericanExpress, PayPal, оплата при получении.

    Вот, как это будет выглядеть:

    Выберите способ оплаты:

    Онлайн платежи с помощью аккаунта PayPal или банковской карты
    Оплата картами Visa и MasterCard (СНГ) без комиссии

    Просто подключите иконочный шрифт и добавьте следующие стили:

    /* Способы оплаты на FontAwesome */
    label.label:before {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     display: block;
     float: left;
     font-size: 32px;
     margin-right: 10px;
     width: 42px;
    }
    /* PayPal */
    label.label[for="pay-type-1"]:before {
     content: "\f1ed";
    }
    /* Банковской картой */
    label.label[for="pay-type-2"]:before {
     content: "\f283";
    }
    /* Наличными при получении */
    label.label[for="pay-type-3"]:before {
     content: "\f0d6";
    }
    

    Обратите внимание на фрагмент for="pay-type-3" в селекторах. Здесь цифра 3 — это id способа оплаты, который можно посмотреть в панели управления.

    Еще один момент, откуда взять код значка, чтобы подставить его в свойство content? Перейдите на сайт FontAwesome и выберите интересующую иконку. Затем посмотрите ее свойство CSS для псевдокласса :before:

    Значки для способов оплаты и доставки интернет магазина

    Есть еще один способ узнать содержимое content: задать вопрос в комментариях :)

    Свои иконки

    В случае со своими иконками, понадобятся изображения способов оплаты и доставки. Найдите в интернете изображения, которые можно использовать в коммерческих целях или закажите у дизайнера.

    Страница оформления заказа будет выглядеть следующим образом:

    Выберите способ оплаты:

    Онлайн платежи с помощью аккаунта PayPal или банковской карты
    Оплата с R-кошельков
    Агрегатор платежных систем

    В CSS при этом нужно добавить следующие стили:

    label.label:before {
     display: block;
     float: left;
     margin-right: 10px;
     width: 48px;
     height: 32px;
    }
    label.label[for="pay-type-1"]:before {
     content: '';
     background: url('http://ucozmagazines.ru/bs/img/paypal.png') no-repeat;
    }
    label.label[for="pay-type-2"]:before {
     content: '';
     background: url('http://ucozmagazines.ru/bs/img/webmoney.png') no-repeat;
    }
    label.label[for="pay-type-3"]:before {
     content: '';
     background: url('http://ucozmagazines.ru/bs/img/qiwi.png') no-repeat;
    }
    label.label[for="pay-type-4"]:before {
     content: '';
     background: url('http://ucozmagazines.ru/bs/img/robokassa2.png') no-repeat;
    }
    

    Подставьте свои изображения в свойства у селекторов с pay-type-*. Сколько способов оплаты — столько изображений потребуется описать.

    В способах доставки стили будут выглядеть аналогично:

    label.label[for="del-type-1"]:before {
     content: '';
     background: url('ваше изображение') no-repeat;
    }
    label.label[for="del-type-2"]:before {
     content: '';
     background: url('ваше изображение') no-repeat;
    }
    ...
    

    Статьи по теме

    Обсуждение

    Всего комментариев: 7

    М
    1
    Вообще-то этот код для каждого значка есть на странице значка. И не надо в инспектор заходить
    avatar
    0
    2
    Действительно, спасибо :) Просто мне лень было заходить на каждую страницу
    avatar
    3
    Спасибо Вам
    www.dubaibaku.com
    avatar
    0
    4
    Интересный у Вас магазин, заходите еще :)
    a
    5
    А куда вставлять код в ПУ? Управление дизайном (CSS) или Управление дизайном (шаблоны) - Интернет-магазин - Таблица стилей (CSS).
    avatar
    0
    6
    Управление дизайном (шаблоны) - Интернет-магазин - Таблица стилей (CSS).
    avatar
    7
    Спасибо, чётко всё расписано, мне очень помогло!
    Car-Smart.ru
    Значки для способов оплаты и доставки интернет магазина
    Значки для способов оплаты и доставки интернет магазина