Оформление карточки товаров WooCommerce

Вступление

Продолжаем изучать интернет магазин WooCommerce на платформе CMS WordPress. Здесь, подробно посмотрим, как оформлять карточку товара магазина.

Что сделано

В предыдущих статьях (уроках), мы полностью настроили магазин WooCommerce, выставили все необходимые параметры. Пока не устанавливали дополнительные плагины «заточенные» под WooCommerce. Это будем делать по необходимости. О настройках магазина можно почитать тут:

Карточка товара

Напомню, карточка товара это страница сайта магазина, на которой, максимально подробно должна быть размещена:

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

Задача урока

В этом уроке я не буду переделывать шаблон карточки, которую можно сделать по умолчанию. Не буду выпиливать или добавлять, что-либо из стандартной (по умолчанию) карточки товаров WooCommerce. Просто подробно заполним стандартную карточку простого товара.

Начало

Карточка товаров оформляется при добавлении товара в магазин. Для WooCommerce это вкладка в группе консоли «Товары», на вкладке Товары>>>Добавить товар.

Для начала на вкладке «Добавить товар» зайдем в спойлер «Настройки экрана» и отметим все видимые чекбоксы. Тем самым мы покажем на странице все блоки и максимально расширим возможности оформления карточки.

Настройки экрана карточки товаров

Для создания карточки на товар, нужно выполнить подготовительные работы, о которых подробно я писал в статье: Подготовка для качественного заполнения карточки товаров.

Для каждого товара нужно сделать и иметь под рукой:

  • Полное описание товара. Уникальный текст объемом от 300 слов, что улучшит реалии продвижения. Оно будет ниже фото товара под заголовком «Описание»;
  • Краткое описание, 120-160 знаков, отличное от шапки в полном описании. Она будет рядом с фото товара;
  • Фото товара, хорошего качества;
  • Для товара должна быть создана или определена уже созданная, категория товара, метка (метки), артикул, атрибуты. А именно:

Метка. Метку нужно создать или выбрать из ранее созданных. Это инструмент WordPress, который объединяет товары из разных категорий. Например, пальто (они могут быть из разделов женская и мужская одежда). О метках WordPress тут. Кстати, вкладка «Метки» в блоке «Товары», НЕ совпадает с вкладкой «Метки» в блоке «Записи».

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

Атрибуты товаров. Нужно создать или выбрать из ранее созданных. Атрибуты WooCommerce похожи на метки системы, но имеет более интересную подчиненность. Атрибуты позволяют более разнообразно группировать товары по качественным или визуальным признакам. Например:

  • Размер,
  • Цвет,
  • Пол (муж, жен),
  • Сезон (лето, зима),
  • Упаковка и т.д.
Это может вас заинтересовать:  Настройки Доставка товаров WooCommerce, урок 12

Создаются атрибуты на вкладке Товары>>>Атрибуты, а как это делать читаем отдельно тут.

Для примера возьму Шапку. Для неё:

  • Категория: Аксеcсуары;
  • Метки: детская, одежда для спорта, одежда летняя;
  • Атрибуты: размер 56.

Не забываем про цену. Цен должно быть три, для карточки нужны две:

  • Нормальная;
  • Со скидкой;
  • Резервная (минимальная цена для себя).

Напоминаю, в настройках цены на товар (общие настройка магазина), выставляем внешний вид цены. Я ставлю цену без показа НДС покупателю.

Оформление карточки товаров WooCommerce

Данные на товар есть, описания готовы, пора заполнить карточку товаров. Идем на вкладку: Товары>>>Добавить товар. Напоминаю, все блоки карточки включены для заполнения.

карточка товаров WooCommerce ДО заполнения
оформление карточки товаров WooCommerce ДО заполнения

-Даем товару название. Оно должно быть в пределах магазина уникальным. Длину названия товара лучше уместить в 5 слов или 120 знаков.

-В поле описание пишем заготовленное уникальное, описание товара. Лучше 300 слов. Полное описание будет видно на карточке ниже фото товара под заголовком «Описание»

-В поле краткое описание, пишем заготовленное уникальное, краткое описание товара. 50 слов будет достаточно. Краткое описание будет видно рядом с фото товара, по умолчанию справа.

-Справа, выбираем категорию товара.

-Выбираем или задаем метки товара. Есть возможность открыть облако меток.

-Добавляем основное фото товара (Изображение товара).

-Если есть, добавляем 2-3-4 дополнительных фото товара. Они будут показаны под основным фото в виде галереи.

-Заполняем данные по товару. Здесь, нужно подробно.

карточка товаров WooCommerce заполнение
Как заполнить карточку товаровWooCommerce

Заполнение данных по товару

Данные по товару блок по виду маленький, но важный, можно сказать, основной. Для работы блок имеет верхнее выпадающее меню для выбора типа товара и вертикальное меню с вкладками:

  • Основные;
  • Запасы;
  • Доставка;
  • Сопутствующие;
  • Атрибуты;
  • Дополнительно.

Тип товара

Для нашего примера выберем тип товара «Простой товар». О других типах товара WooCommerce читаем Типы товаров WooCommerce: 

данные по товару WooCommerce
Заполнение данных по товару WooCommerce

Данные по товару

Последовательно двигаемся по вкладкам данных о товаре и заполняем нужные поля.

Основные. Здесь, пишем основную цену, цену распродажи (если есть). Можно сразу запланировать, когда начать показывать цену распродажи (ссылка «Запланировать»).

Статус налога и налоговый класс на свой товар вы должны были определить еще на этапах настройки. Я ставлю «Налогооблагаемый» и «Стандартный».

Запасы. Это настройка управления складскими запасами.

Артикул, нужно заполнить. Он должен быть уникален для каждого товар и логично все артикулы товару создать заранее. Можно пойти другим путем и установить плагин: «WooCommerce Product SKU Generetor» он автоматом будет создавать артикулы на все добавляемые товары.

Засада. С артикулом есть проблема. Если ничего не предпринять, он (артикул) будет виден в карточки товара. Как убрать артикул из карточки товара, читаем тут (26-06).

Я ничего не убираю, а добавляю артикул шапки: 001. 

Доставка. Здесь подвохов нет. Указываете класс доставки, который вы создали в настройках. Или не создали?

Это может вас заинтересовать:  Как работать с плагинами WordPress, установка и настройка плагинов, Урок 4, Интернет магазин WordPress

Сопутствующие. Эта вкладка для зацепки покупателя. С её помощью вы можете покупателю показать аналогичные или похожие или рекомендуемые товары. Для этого заполняете:

Апселлы. Своеобразная метка товаров, которые будут показаны на карточке товара внизу под заголовком «Возможно Вас также заинтересует…». Подробно про Апселлы и Кросселы.

Я добавляю: очки от солнца, ремень.

Кросселы. Это продвигаемые товары, которые система покажет  покупателю в корзине товаров при оформлении товара слева от картинки.

Я добавляю: Футболка.

Атрибуты. Атрибуты у вас должны быть созданы, для каждого атрибута при его создании на вкладке Товары>>>Атрибуты, должны быть созданы значения.

Например, к товару добавляю сначала атрибут «Размер» выбираю значение «XXL», потом атрибут «Цвет», выбираю значение «Бордо». Количество атрибутов не ограничено. Все атрибуты будут показаны в карточке.

Дополнительно. Здесь, можете написать, что-нибудь покупателю, чтобы система отправила ему после его покупки.

Пункт «Меню заказа», продвинет этот товар в списке нескольких заказов.

Чек бокс «Отзывы», позволит покупателю, вам что-нибудь написать.

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

Произвольные поля WooCommerce
Произвольные поля WooCommerce

Публикация или сохранение карточки

После оформление карточки товаров WooCommerce (заполнения) обратим внимание на блок «Опубликовать». Здесь вы можете:

  • «Опубликовать»: Сразу опубликовать карточку (она будет доступна покупателю);
  • «Сохранить»: Сохранить, как «черновик» или «на утверждении» поле «Статус»;
  • Запланировать публикацию в поле «Опубликовать сразу»;
  • Можно скрыть карточку от незарегистрированных пользователей (пароль) или ото всех (личное), поле «Видимость».

Оформление карточки товаров WooCommerce

Эти поля идут, как «наследство» WordPress. Но есть и новые поля для публикации. Это видимость и рекомендованный товар.

Оформление карточки товаров WooCommerce

Смотрим результат готовая карточка товаров

карточка товаров WooCommerce готова
оформление карточки товаров WooCommerce

Вывод

Поясню, почему я показал только оформление карточки товаров WooCommerce для «Простого товара». Во-первых, особенности заполнения карточек других типов товара будут в других статьях, во-вторых, простой товар наиболее распространен среди пользователей.

P.S. В этой статья для демонстраций перешел на бесплатный шаблон WooCommerce «Storefront», Автор: «WooThemes» (https://woocommerce.com/storefront/).

©Shopiweb.ru

Еще статьи

7 комментариев для “Оформление карточки товаров WooCommerce

  1. Добрый день, уважаемый. Подскажите, работаю с товаром в woocommerse 4.8.5, добавляю атрибуты к товару и сразу виснит всё, грузит добавление нового атрибута бесконечно, может подскажете в каком направлении рыть? программисты ничего внятного ответить не могут т.к. меняли уже разработчиков и никто не признаётся, кто сломал.

  2. Добрый день! Можно ли отключить корзину, кнопку «заказать» и вообще покупку через сайт. Нужно реализовать просто каталог. Без цен.

  3. Расширить эффективность у масштабном бизнесе выполнимо только с одному лучшим постановлениям – подсоединение IP телефонии поддержит для Вас совершить контакт из нужной страной или городом всего в пару секунд времени и извлечь новых партнеров, вовсе не уезжая из страны. Плюс возможного комбинации номера https://tel-number.ru включает в таком, чтобы ламер сможет произвести абсолютно автономную АТС для поступающие также происходящих звонков, плюс к тому же возможность эксплуатировать канальный номер, что разрешает для Вас и большой коллективу сразу осуществлять множество наборов с одному и тому же набору, получать SIP связь под час многих отделах существующей центра, подключить контакт-центр, приобретать различные наборы на мобильные и стабильные устройства, звонить с виртуального набору цифр далеко за кордон обозначить сообщения посредь городами также странами также всякое подобное. Данная компания номера телефонов греции со радостью поможет для Вас найти онлайн- коммуникации совершенно с без ничего и раскрыть свежие возможности.

  4. Кастинг мультисериала, это как присущая пункт приема, после трудового дня или в направлению викенда. Вместе со кино все обретаем жизненный процесс, надзираем по сенсацией героев, утешаем потом из желанием анонсируем отдельную премъерную выпуск легкого сезонного киноленты. Чтобы индивидуальный досуг выполнялся со удовлетворенно наша команда презентует специально под Вас уникальный платформу онлайн просмотра любимых мультисериалов – многосерийные фильмы русские, который совмещает в контентом очень знакомые также распространенные сериалы отечественного либо зарубежного формата. На ресурсу быстро сможете разделить сериалы на личному влечению из помощью указаний, выбрать категорию классификацию, увидеть обновленные серии затем обсудить изменения синематографа. Все выпуски к тому же мультисериалы преподнесены до просмотру в аш ди свойствах с русским озвучкой лишь от мировых студий кино съемки, поэтому любой читатель нашего источника станет получать настоящее наслаждение ото приложения https://rfserial.net/ данного ресурса.

  5. Правильно распределять персональный деньги также сбереженные прайс целесообразно коллективно из практичным материальным мастером, тот что твердо даст ясность Вас на счет постоянных плюм прибыльных инвестиций, чтобы гарантировать пассивный доход в 2020 для себя неизменное перспективы.
    Нарастить потенциальный имущество сегодня можно только по планомерному вложению, поэтому врполне принципиально изначально спроектировать внутренний денежный сумку, который станет излагаться по отдельные спрос плюс выражение инвеститора, а также внешних обстоятельств также товарной условий по стране.
    Денежный страница пассивный доход в интернете без вложений дает Вам налаженность прозрачного инвестирования, а также сервис материальной беседы и составлению финансового папки с авторитетным экспертом, какой принимает клиента по назначенному операции потом показывает значительный исход, из тем что инвестор уверенно понимаете https://investprofit.info/ куда предпочтительно предписать данные капитал, чтобы извлечь максимальную выгоду. Именно на нашем сайте следует войти в курс из разными публикациями на параграфе финансов, установить отличную книги, осознать банковскую систему и всякое иное. Вложите плюс унаследуйте новые запас уже сегодня.

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