Руководство для дизайнеров по WooCommerce

Если вы разрабатываете магазин WooCommerce, такой как Shopify, или разрабатываете существующую тему WooCommerce, эта статья Руководство для дизайнеров по WooCommerce для вас. Эта композиция дает немного больше информации о стилях, изменении дизайна и другой информации, которая охватывает связанные страницы WooCommerce.

Этот плагин является удобным и очень гибким инструментом; однако не все веб-сайты будут поддерживаться. Используя функции и подходы, поддерживаемые WooCommerce, вы можете ускорить процесс проектирования и разработки.

Это позволяет пользователям настраивать модификации, но за дополнительную плату. Самый быстрый способ увидеть, какие функции есть, — посетить демо-версию Storefront внутри WooCommerce. Если вам нужен какой-то способ научиться пользоваться Woocommerce, ознакомьтесь с руководствами по куполам, которые помогут вам начать работу. WooCommerce создает следующие новые страницы. Существуют типы страниц, для которых вам нужно разработать дизайн.

Во-первых, это страницы товаров. Эти страницы бывают двух видов, а именно: страницы архива продуктов и страницы отдельных продуктов.

На страницах архива продуктов отображаются эскизы доступных категорий продуктов. Они показывают другую страницу архива продукта, когда вы нажимаете на миниатюру категории. Затем он отображает один продукт, когда вы нажимаете на миниатюру продукта.

Другой вид — отдельные страницы продукта. Здесь они отображают отдельные продукты и объединяют изображения продуктов, информацию о заголовке продукта, подробную информацию о продукте и сопутствующие продукты, перекрестные продажи и дополнительные продажи.

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

Различные типы продуктов

Этот инструмент имеет различные типы продуктов;

Во-первых, это заголовок продукта, который разделен на пять частей. Эти:

1. Название продукта — они отображаются на страницах сводки/архива и на отдельных страницах.
2. Характеристика продукта — вы увидите на страницах сводки/архива и страницах одиночных игр.
3. Изображение — избранные изображения отображаются в сводке, а дополнительные изображения — на отдельной странице продукта.
4. Подробное описание — отображается в области описания продукта в нижней части страницы отдельного продукта.
5. Краткое описание — отображается в верхней части страницы отдельного продукта.

Этот инструмент также позволит пользователю продукт.

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

Кроме того, на страницах продуктов они автоматически генерируются со следующим:

Изображения продукта — это избранные изображения и дополнительные изображения для продукта. Название продукта, цена продукта, краткое описание продукта, количество для добавления в корзину (с + и элементами управления), кнопка «Добавить в корзину», категории SKU продукта (единица складского учета) и теги.

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

Допродажи — это то, что «вам также может понравиться», за которыми следуют превью/заголовки для дополнительных продаж.

Перекрестные продажи — это сопутствующие товары, за которыми следуют миниатюры.

Презентация продукта, варианты стандартной и дополнительной презентации. Стандарт отображает избранное изображение в верхней части страницы продукта, а миниатюры дополнительных изображений внизу в 3 столбцах миниатюр. Напротив, в необязательной презентации отображается избранное изображение без миниатюр под ним и отображаются все изображения на вкладке «Описание».

Другой частью инструмента являются виджеты поиска продуктов, которые можно разместить в виджетах боковой панели или виджетах нижнего колонтитула. Если вы хотите найти любой веб-сайт, у него есть параметры поиска по всему сайту. Под ним находится окно поиска продукта, которое позволяет вам искать название продукта, краткое и подробное описание. Другое разделение опций расширенного поиска называется детализацией по категориям. Это выпадающее поле, которое позволяет выбрать любую категорию или подкатегорию. В наборе Proud tag cloud есть раскрывающийся список, который позволит вам выбрать ценники.

Виджеты поиска по категориям продуктов отображаются только при отображении автоматически сгенерированных архивов категорий продуктов. Во-первых, это многоуровневая навигация. Это позволяет пользователю уточнять продукты на основе атрибутов и эффективно помогает пользователю в том, что он ищет. Фильтр цен на товары — отображает скользящую шкалу, позволяющую фильтровать товары по ценовому диапазону. Бестселлеры — здесь отображается название/значок/цена для автоматически выбранного списка самых продаваемых продуктов. Рекомендуемый продукт отображает название / большой палец / цену для продуктов, отмеченных как рекомендуемые продукты. В продаже: Отображает товары, для которых в дополнение к цене введена Цена продажи.

Если пользователь хочет стилизовать свой WooCommerce, у нас есть такие варианты, как миниатюры продуктов. Когда продукты отображаются в виде эскизов продуктов, отображаются 4 элемента, в том числе миниатюра, название, цена, добавление в корзину. Стиль CSS, который можно использовать для фона продукта, границы продукта, отступов и полей. Далее миниатюра. К ним относятся границы, отступы и поля. Заголовок включает в себя шрифт, вес, цвет и размер, а также цену. В разделе «Добавить в корзину» указаны цвет кнопки, цвет метки, граница и радиус.

На инструменте также показана наклейка «Распродажа», слово «распродажа» появляется над миниатюрами продуктов в продаже — можно использовать стили CSS: цвет фона, цвет шрифта, цвет рамки. Ширина границы, сплошная/штриховая граница, радиус границы.

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

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

Подробнее о темах Woocommerce WordPress читайте здесь.