Как изменить кнопку «Купить» в OpenCart CMS

Как изменить кнопку «Купить» в OpenCart CMS

Сегодня мы рассмотрим очень востребованный урок о том как изменить кнопку «Купить» в CMS Opencart. Сама кнопка «Купить» в любом интернет-магазине — это очень важный элемент! Она должны выделяться и манить. Меняя размер, форму, цвет и расположение кнопки мы можем значительно улучшить или свести на нет конверсию своего магазина.

Способы отображения кнопки немного отличается от версии OpenCart, поэтому мы рассмотрим более новый вариант исполнения по версий 1.5.5.

Находим где правится кнопка

Открываем файл управления стилями.
ваш_сайт/catalog/view/theme/ваша_тема/stylesheet/stylesheet.css

За отображение кнопки отвечает раздел button (где-то 570ая строка).
Находим строчку: background: url(‘../image/button.png’) repeat-x;
Получается, что сама кнопка нарисованная в файле button.png
Идем в каталоге image и копируем к себе на диск фото для редактирования.

Открываем в редакторе нашу фотографию и видим приблизительно следующее:
Размер кнопки в ширину = 24px, а в высоту 48px.

Получается, что сама кнопка рисуется из этого небольшого кусочка.
Длина кнопки зависит от настроек стиля и размера надписи в самой кнопки, будь то «Купит» или «Заказать» или что-то другое.

Как работает кнопка Купить

А высота кнопки стандартная 24 пикселя, почему не 48? Потому что, как мы видим по рисунку кнопка состоит из двух цветов. Верхний цвет это тот цвет который отображается везде по умолчанию, а нижний — это тот цвет которые появляется при наведении на кнопку мышкой. То есть в программном виде, при наведении на кнопку фотография просто поднимается в верх и мы видим более тёмную кнопку «Купить».

Если мы хотим сделать кнопку толще или выше (кому как больше нравится) то мы нашу фотографию увеличиваем в двойном размере от желаемого результата. Допустим… Сейчас наша кнопка в высоту 24px, а мы хотим сделать 36 (то есть +12), но фото мы увеличиваем на 24 (2 по 12). и получается наша кнопка будет иметь размер в высоту 72px (48+24). То есть, мы берем в учёт каждый цвет в отдельности, но так как они отображены на одной картинке, то мы добавляем цвета как вниз картинки так и вверх одинаково! На деле оно понятней чем на словах. 🙂

По желанию меняем верхний — основной цвет и нижний — цвет при наведении на кнопку. Сохраняем фотографию в формате .png желательно изменив имя, допустим button72.png. Загружаем нашу кнопку обратно в папку image и возвращаемся к редактированию стилей stylesheet.css

Меняем старую кнопку на новую

Берем уже известную нам строчку: background: url(‘../image/button.png’) repeat-x; и меняем имя файла на наше button72.png
Теперь наши кнопки на сайте в высоту не изменились, а при наведении закрашивается только часть. Исправляем.

Ниже, в классе input.button видим строчку height: 24px; — это высота наших кнопок, меняем на ту что мы делали в фотографии, в нашем случае 36px.

А ещё ниже, в a.button:hover, input.button:hover в строке background-position: 0px -24px; меняем -24 на -36. Этот параметр отвечает за то на сколько поднимется картинка при наведении на неё мышкой.
Вот у нас и получилась, симпатичная пухлая кнопка 🙂

Теперь мы можем сделать шрифт самой надписи больше. За это отвечает строка font-size: 12px;.

И добавить справа и слева немного пространства чтобы кнопка была не такая квадратная. В строке padding: 0px 22px 0px 22px; атрибута input.button 22 меняем на что хотим, допустим 36.

Вот и всё! Теперь наша кнопка стала больше и заметней!
Если вы пользуетесь предыдущими версиями OpenCart, то там кнопка реализована с помощью нескольких изображений. Если не получается разобраться, пишите мне, помогу.

А как же надпись «Купить»?

P.S. Кстати, для тех кто не знает, сама надпись «Купить» на кнопке меняется в файле
www.ваш_сайт/catalog/language/russian/russian.php
где-то 25 строка:

$_[‘button_cart’] = ‘Купить’;

и вот, именно эту надпись Купить меняем на что угодно!