Редактируем клавишу "купить" в OpenCart

Стандартный блок клавиш карточки товара в OpenCart состоит из 3-х кнопок: "Купить", "В сравнение" и "Закладки".

При проектировании простых интернет - магазинов на этой системе управления, не предусматривающих наличие личного кабинета и функции сравнения, возникает необходимость удалить эти кнопки, т. к. они попросту не нужны.

Давайте разберём, как это сделать на примере дефолтного шаблона OpenCart.

Изначально мы имеем стандартный серый блок клавиш, состоящий из трех уже известных нам кнопок. (рис.1)

Рис.1 Блок клавиш карточки товара OpenCart

Первым делом удалим ненужные кнопки "В закладки"  и " В сравнение"

Для этого открываем css-файл вашего шаблона, расположенный на по адресу:
../public_html/catalog/view/theme/default/stylesheet, где «default» — название вашей темы, и находим там такую строку:

В стандартной теме это строка 645.

К уже имеющимся свойствам .product-thumb .button-group button + button дописываем: {display:none} и сохраняем изменения, после чего клавиши должны пропасть.

Далее поднимаемся чуть выше и находим в это же файле в строке 620 такой код:

Здесь задаётся цвет заднего фона и верхней границы блока клавиш. Они нам больше не нужны,
поэтому  строчку можно полностью удалить или закомментировать (вдруг понадобится вернуть изменения).
После всех проделанных манипуляций наша кнопка будет выглядеть так:

Рис. 2 Блок клавиш после внесённых изменений

Уже неплохо, но не так, как хотелось бы: теперь необходимо немного  уменьшить кнопку в размере, поменять цвет и перенести её вправо.

Для этого находим в строке 633 параметр .product-thumb .button-group button и добавляем ему следующие свойства:

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

Всё, мы окончательно удалили лишние клавиши и перенесли кнопку "Купить" вправо. В результате она теперь выглядит так:

Рис. 3. Конечный результат

Если у вас есть вопросы, задавайте их в комментариях.