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

5712

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

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

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

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

 

удалить кнопки open cart

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

 

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

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

 .product-thumb .button-group button + button

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

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

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

.product-thumb .button-group { border-top: 1px solid #ddd; background-color: #eee;overflow: auto;}

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

 

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

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

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

.product-thumb .button-group button { width:40%; margin-bottom: 5%;margin-left:50%; background-color: #c22;color:#ffffff}

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

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

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

 

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

Комментарии

    Вячеслав

    (07.10.2020 - 21:44)

    Добрый день, в мобильной версии как сделать чтобы было также ?

      Admin

      (08.10.2020 - 00:51)

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

    Геннадий

    (02.11.2020 - 15:11)

    поставил margin-left:30%; купить теперь по центру ,по моему так лучше смотрится

      Admin

      (02.11.2020 - 20:20)

      Тут все зависит исключительно от личного восприятия..

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code