WooCommerce — Витрина магазина

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

Разработка мобильных приложений  – это комплекс интеллектуальных работ, результатом которых является готовый продукт, установленный на сервер. Такой комплекс сразу готов к работе и не требует никаких дополнительных настроек. 

2022 © Интернетика.рф

WooCommerce

WooCommerce — Витрина магазина

Всем доброго времени суток! Всем тем, кто когда либо собирал интернет магазины на WooCommerce, было интересно, как же реализовать красивую и информативную карточку на витрине магазина. Сейчас мы расскажем как это сделать.

Для реализации нам необходимо следующее:

  • Установленный на хостинге CMS WordPress
  • Установленный плагин интернет магазина WooCommerce
  • Elementor Pro (именно Pro версия) — платный плагин
  • Тема оформления Astra
  • Briefcase Elementor Widgets — платный плагин
  • Enhanced Text Widget

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

Теперь по подробнее о каждом плагине.

Elementor Pro — является на сегодня самым мощным и продвинутым премиальным инструментом для создания шаблонов для WordPress. В правильных руках он творит чудеса. Его мы будем использовать для оформления дизайна витрины магазина.

Briefcase Elementor Widgets — это дополнение к Elementor Pro, которое дает возможность редактирования одиночной карточки как категории товара так и самого товара.

На рисунке ниже изображена тема оформления Astra с четырьмя карточками товаров на витрине.

Тема Astra

Для многих задач, информации о товаре на сетке достаточно. Есть Название товара, рейтинг, цена, и еще подключается кнопка «Добавить в корзину». Кликая на товар, мы проваливаемся на страницу с подробным его описанием.

Но если нам нужно на эти карточки вывести некоторые атрибуты товара?

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

Для этого нам пригодится Briefcase Elementor Widgets и Enhanced Text Widget. С помощью первого плагина мы настраиваем дизайн карточки на витрине. Вы сможете сделать карточку абсолютно уникальной, настроив все аспекты отображения товара на витрине.

Подробно о дизайне мы писать не будем, так как в данной статье мы решаем вопрос вывода именно дополнительной информации в виде атрибутов товара.

Реализация.

Как раз для вывода дополнительной информации нам понадобится плагин Widgets и Enhanced Text. Он дает возможность вписать нужный запрос не прибегая к изменению в коде шаблона.

Там где нам нужно вывести атрибуты мы добавляем данный виджет в редакторе Elementor Pro, и прописываем в нем следующий запрос:

<b>Название атрибута:</b>  <?php global $product;
echo $product->get_attribute('material'); ?> 
</div>

Где «material» — это слаг нужного атрибута. Тем самым можно вывести нужное количество атрибутов товара непосредственно в карточку.

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

С помощью данной информации Вы без особых усилий сможете доработать Ваш интернет магазин, и сделать его более удобным для покупателей!

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

Поделиться в vk
Поделиться в twitter
Поделиться в whatsapp
Поделиться в email

ПОПУЛЯРНОЕ:

WooCommerce — Витрина магазина

Всем доброго времени суток! Всем тем, кто когда либо собирал интернет магазины на WooCommerce, было интересно, как же реализовать красивую и информативную карточку на витрине

Читать далее »

Онлайн школа

Онлайн школа — будущее образования в Интернет. В настоящее время, многие преподаватели, или создатели курсов переходят в Интернет. Время диктует свои правила. Для того что

Читать далее »

Нужна консультация?

Выберете удобный для Вас способ связи!

Или закажите обратный звонок