Как скрыть кнопку «Купить» в OpenCart 3?

При создании каталога товаров на OpenCart 3, возникает в некоторых ситуациях, необходимость скрыть кнопку «Купить». Это логично, если в каталоге, будет представлена только продукция для ознакомления, без возможности ее купить. При этом, в настройках OpenCart, нет возможности скрыть отображение кнопки «Купить».

Данную возможность, можно реализовать посредством:

  • покупки премиум шаблона, с данной функцией
  • удаления из шаблонов кнопки «Купить» вручную
  • написания для этого модификатора
  • CSS 

В данной заметке, рассмотрим простой и безопасный способ скрытия кнопки «Купить» из шаблона в OpenCart 3, с помощью CSS. Способ будет актуален в первую очередь для новичков, которые только начинаю работать с CMS OpenCart 3. Не нужно ничего удалять или модифицировать в шаблоне.

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

Для скрытия кнопки «Купить» в OpenCart 3, будем использовать свойство (CSS):

display

Со значением:

none

Вот такая конструкция:

display: none;
Подробнее о свойствах display и используемых значениях, можно прочитать в справке https://developer.mozilla.org...

А куда все это вставлять и как использовать? Все просто, сморим ниже.

Как скрыть кнопку «Купить» в OpenCart 3?

Открываем stylesheet.css по пути, для дефолтного шаблона:

/catalog/view/theme/default/stylesheet/stylesheet.css 

Открываем файл stylesheet.css через любой редактор кода и добавляем в самый конец:

#product {
display: none;
}
.product-layout .product-thumb .button-group button:first-child {
display: none;
}
.product-layout .product-thumb .button-group button + button {
width: 50%;
}
.product-layout .product-thumb .caption {
min-height: 120px;
}

Примерно так, это будет у вас выглядеть в коде файла stylesheet.css:

Сохранять внесенные изменения и чтобы проверить результат, нажимаем в браузере на странице Ctrl -> F5:

Видим, что кнопка «Купить», теперь не отображается в карточке товара.

Аналогично, кнопка «Купить» скрыта в категориях товаров:

На главной странице магазина, кнопки «Купить» в OpenCart 3, не отображаются:

Как скрыть кнопку «Купить» на отличном от дефолтного шаблона OpenCart 3?

Способ выше, можно использовать и на сторонних шаблонах / темах. При этом, в сторонних темах, отличных от дефолтной темы OpenCart 3, может потребоваться немного изменить код выше. 

При настройке сторонней темы, необходимо файл stylesheet.css редактировать соответственно в папке той темы, которая у вас используется на сайте. Таким образом, вместо папки default, выбираем папку своей темы по пути:

/catalog/view/theme/папка_вашей_темы/stylesheet/stylesheet.css

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

Не используйте шаблоны и модули с варезных сайтов. Покупайте шаблоны только на известных площадках. Будет полезным ресурс warez.rip

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

.product-layout .product-thumb .button-group button + button {
width: 50%;
}
.product-layout .product-thumb .caption {
min-height: 120px;
}
Таким образом, в файл stylesheet.cssпо пути:

/catalog/view/theme/папка_вашей_темы/stylesheet/stylesheet.css

Необходимо добавить только:

#product {
display: none;
}
.product-layout .product-thumb .button-group button:first-child {
display: none;
}

Однако, не удаляйте его на дефолтной / стандартной теме. Иначе, у вас сместятся кнопки «В закладки» и «В сравнение»:

Как сделать вместо кнопки «Купить», кнопку «Запросить стоимость» в OpenCart 3?

Бывает, в каталоге товаров, необходимо предоставить возможность пользователям оставить заявку на запрос цены. То есть, скрыть цену и кнопку «Купить», при этом, дать возможность пользователям узнать больше о нужном товаре. В таком случае, помогут готовые решения:

Модули скрывают цену и вместо кнопки «Купить», появляется кнопка «Запросить цену», после нажатия на которую, пользователь может указать контактные данные, для связи:

Единственное, поддержка данных модулей для OpenCart 3.0. Не проверял на последней версии. Уточняйте у авторов, если нужно.

Заключение.

Для тех, кто хочет создать простой каталог товаров, для представления информации о товаров или услуг на OpenCart 3, могут с минимальными затратами, используя стандартный шаблон, создать простой и функциональный каталог. Данное решение из заметки, будет актуально и тем, кто хочет создать Интернет-магазин под партнерскую СРА сеть Admitad на OpenCart 3.

По теме: «Как изменить текст кнопки «Купить» на странице товара в OpenCart 3?»

В предыдущей заметке, мы рассмотрели способ скрытия цен из карточек товара, без использования модулей, посредством CSS, как и в данной заметке. В ней, продублированы ссылки на модули «Запросить цену» и есть полезное видео, по настройке стандартной темы в OpenCart 3. 

В следующей заметке, рассмотрим способ скрытия корзины товаров из шаблона OpenCart 3.

Полезно знать: «Некорректная работа скрипта Moneylink и Admitad Teleport от Admitad.»

Как создать интернет магазин на OpenCart с минимальными затратами (автотовары):


Отправить комментарий

Новые Старые