Всем доброго времени суток! Всем тем, кто когда либо собирал интернет магазины на WooCommerce, было интересно, как же реализовать красивую и информативную карточку на витрине магазина. Сейчас мы расскажем как это сделать.
Для реализации нам необходимо следующее:
- Установленный на хостинге CMS WordPress
- Установленный плагин интернет магазина WooCommerce
- Elementor Pro (именно Pro версия) — платный плагин
- Тема оформления Astra
- Briefcase Elementor Widgets — платный плагин
- Enhanced Text Widget
Вся сборка плагинов и расширений, является необходимым минимумом для реализации качественного интернет магазина. Возможно есть и бесплатные альтернативы, но мы их рассматривать не будем, так как хотим добиться качественного результата.
Теперь по подробнее о каждом плагине.
Elementor Pro — является на сегодня самым мощным и продвинутым премиальным инструментом для создания шаблонов для WordPress. В правильных руках он творит чудеса. Его мы будем использовать для оформления дизайна витрины магазина.
Briefcase Elementor Widgets — это дополнение к Elementor Pro, которое дает возможность редактирования одиночной карточки как категории товара так и самого товара.
На рисунке ниже изображена тема оформления 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, каталоги и просто корпоративные сайты.
