Как добавить товар на сайт wordpress

Добавление товаров в Woocommerce на сайт WordPress

Руководство по добавлению товаров на сайтах WordPress с плагином интернет-магазина Woocommerce.

Попытаюсь максимально просто объяснить как добавлять и изменять товары в интернет-магазин. Если у Вас останутся вопросы, спрашивайте в комментариях под статьёй в низу, обязательно отвечу на все вопросы.

Woocommerce – это плагин интернет-магазина, который работает на cms WordPress. В нём очень много функций и его можно дорабатывать и подстраивать под любой вид продаж. Это могут быть как товары так и услуги.

Содержание как добавить товар в Woocommerce

Войти в админ-панель

Чтобы попасть в панель администратора WordPress, добавьте к Вашему сайту на конце /wp-admin

Пример: https://robotoman.ru/wp-admin/ или https://названиевашегосайта.ру/wp-admin/

И Вы увидите панель админа:

Введите логин и пароль.

Добавление товаров в Woocommerce на сайт WordPress

Затем попадаете в панель администратора сайта wordpress

Добавление товаров в Woocommerce на сайт WordPress

Добавление первого товара на сайт

Рассмотрим два простых способа как добавлять товары на сайт.

1. Подводим курсор мыши + Добавить товар
2. Нажимаете на боковое меню Товары, и перед Вами будет список уже добавленных товаров, и Вы также можете добавить еще или изменить имеющиеся товары.

Первый способ добавления товаров

Добавление товаров в Woocommerce на сайт WordPress

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

Добавление товаров в Woocommerce на сайт WordPress

Добавляете все значения для товара

Итак, приступим к заполнению основных значений товара.

Заголовок товара

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

Добавление товаров в Woocommerce на сайт WordPress

Описание товара Woocommerce

Описание товара. Здесь опишите товар, свойства или дополнительную информацию которую хотите донести до покупателя. Это может быть все что угодно, в зависимости от того что Вы продаёте. Желательно заполнять это поле подробно.

Добавление товаров в Woocommerce на сайт WordPress

Добавляем цену к товару Woocommerce

Добавление товаров в Woocommerce на сайт WordPress

Напишите только цену, без “руб.”, “Р.” и пробелов. Вы также можете указать цену распродажи и тогда товар будет находиться в колонке “распродажа” на Вашем сайте (если у Вас выводиться колонка “распродажа”) Или будет находиться там где все товары, но с перечеркнутой ценой и пометкой распродажа SALE. Если нажмете ссылку “запланировать” под полем “Цена распродажи”, то сможете установить на какой период будет действовать распродажа.

Запасы товаров

Добавление товаров в Woocommerce на сайт WordPress

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

Артикул товара в Woocommerce

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

Доставка товара в Woocommerce

Добавление товаров в Woocommerce на сайт WordPress

Если у Вас много товаров, то этот параметр лучше оставить как есть пустым. Необходимые габариты, размер, вес может указать в описании. К тому же, если у Вас на сайте есть страница “доставка,” то там все описано про доставку Ваших товаров. Пока не тратьте на это время, сначала наполните интернет-магазин товарами.

Сопутствующие товары Woocommerce

Добавление товаров в Woocommerce на сайт WordPress

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

Атрибуты товаров

Добавление товаров в Woocommerce на сайт WordPress

Атрибуты товаров в Woocommerce для сайтов WordPress имеют очень много значений. Например выбор цвета, размера или другого параметра. Предварительно все значения необходимо добавить в базу атрибутов, а затем настроить товар с необходимыми атрибутами.

Добавляем атрибуты в базу

Добавление товаров в Woocommerce на сайт WordPress

Для этого заходим в “товары”, затем “атрибуты” и пишем например: размерную сетку. Сначала пишем размер, слаг-это ссылка она присваивается автоматический, или Вы можете приписать её в ручную. Затем нажимаете “добавить атрибут”. И он появляется у Вас справа.

Далее в появившимся справа меню атрибут Вы нажимаете “Установить правила”. Это правила которые, будут выводиться при этом значении. Например, мы указали размер, теперь надо добавить те размеры, по которым будет выбираться этот атрибут. Рисунок снизу.

Добавление товаров в Woocommerce на сайт WordPress

Теперь мы добавили необходимые атрибуты. Возвращаемся к нашему товару и помечаем необходимые значения. Рисунок в низу.

Добавление товаров в Woocommerce на сайт WordPress

Добавляем категорию товара

Добавление товаров в Woocommerce на сайт WordPress

Из меню справа, выбираем категорию, если её нет, добавляем новую.

Вариации товаров

Вариации товаров Woocommerce появляются при выборе, когда клиент находится в карточке товара. Но чтобы такие вариации были, их надо правильно настроить.

1. НапротивДанные Товара > выбираемВариативный товар
2. Переходим в раздел вариации
3. Затем “добавить вариацию”
4. Вводим все вариации, которые ним нужны

Получается как внизу на картинке.

Добавление товаров в Woocommerce на сайт WordPress

Добавление товаров в Woocommerce может показаться сложным процессом. Но от этого зависят и покупки в Вашем магазине. Чем качественнее Вы проработаете карточку товара, тем больше вероятность, что купят именно у Вас.

Как создать интернет-магазин с помощью связки WordPress и WooCommerce: подробное руководство

Есть мнение, что CMS WordPress не подходит для интернет-магазинов. Тем не менее почти треть всех существующих интернет-магазинов работает на данном движке. Это возможно благодаря WooCommerce: самой популярной в мире платформе для онлайн-торговли. Подробное руководство научит вас работать с этой платформой и поможет создать первый интернет-магазин.

Создание сайта на WordPress: пошаговая видеоинструкция

Почему стоит выбрать WooCommerce

WooCommerce — бесплатный плагин для WordPress. Он расширяет функциональность сайтов на самой популярной CMS в мире: превращает их в полноценные интернет-магазины. WooCommerce повторяет главное преимущество WordPress. Работать с движком и плагином для электронной торговли можно без знаний и опыта в веб-разработке.

По состоянию на середину лета 2017 года, количество активных установок плагина превышает 3 млн. По данным аналитической платформы BuiltWith, WooCommerce — самая популярная платформа для онлайн-торговли в мире.

Обратите внимание на важный нюанс. Если учитывать все существующие интернет-магазины, доля WooCommerce превышает 40 %. Если сузить охват до 1 млн или 100 тыс. самых популярных торговых площадок, популярность платформы снижается. А среди 10 тыс. самых крупных магазинов доля WooCommerce сокращается до 11 %.

WooCommerce удерживает лидерство среди 10 тыс. топовых магазинов, но Magento наступает на пятки

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

Еще один нюанс: в Рунете WooCommerce пасет задних. Здесь явный лидер — OpenCart.

E-коммерсанты Рунета игнорируют WooCommerce

Стоит или нет использовать WooCommerce для создания интернет-магазина? Вот преимущества инструмента:

• По простоте настроек и управления WordPress и WooCommerce равных нет. Для создания магазина не нужны навыки разработчика. С Joomla!, OpenCart и Drupal работать сложнее, хоть с этими CMS тоже можно справиться без специальных знаний.
• Надежность и безотказность. Сайты на WordPress работают как часы. С другими движками иногда приходиться повозиться, чтобы что-то заработало. Например, интеграция модуля микроразметки на Joomla! отняла у меня двое суток, а на WordPress эта задача решается за 5 минут.
• Бесплатный инструмент независимо от выручки, количества товаров и других характеристик. За многие альтернативные решения, например, модуль «Эквид» или Magento Enterprise Edition, придется платить.
• Развитая инфраструктура. Для WordPress созданы тысячи бесплатных плагинов и тем, которые решают конкретные практические задачи. При работе с другими CMS за аналогичные решения придется платить или обращаться к разработчикам в индивидуальном порядке.
• Широкая функциональность. WooCommerce обеспечивает доступ к базовым функциям, которые необходимы интернет-магазину. А с помощью бесплатных и платных плагинов функциональность платформы можно расширить, а сайт адаптировать к потребностям конкретного проекта.

У WooCommerce есть недостатки. Главный — вам придется лезть под капот. Такой же недостаток есть у всех CMS и ecommerce-модулей. А лишены его конструкторы интернет-магазинов, например, Shopify. Если вы не хотите разбираться с техническими вопросами или тонкостями настройки, задачу можно делегировать профильным специалистам.

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

WooCommerce работает только с WordPress. Это может быть недостатком для онлайн-торговцев, которые предпочитают другие CMS.

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

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Первые шаги: выбор хостинга, установка CMS, выбор дизайн-шаблона

Если вы создаете интернет-магазин с нуля, выбирайте виртуальный хостинг. Масштабов «Связного» и высокой посещаемости вы достигнете не сразу, поэтому VDS или выделенный сервер понадобится не сразу.

Обратите внимание на объем доступного дискового пространства. Если на витрине будет выставлено несколько десятков товаров, вопрос не имеет критического значения. А вот если счет товарам идет на сотни или тысячи, выбирайте хостинг-план с большим объемом дискового пространства. 10 ГБ на первом этапе хватит с запасом.

Чтобы работать со связкой WordPress и WooCommerce, лучше выбрать Linux-хостинг. Он должен поддерживать MySQL и PHP. Тарифный план должен включать доступ к панели управления сервером и к FTP.

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

Инструкции по установке CMS WordPress есть в руководстве для новичков. Но она вам не понадобится, если в панели управления хостингом есть автоустановщик скриптов Softaculos. Он поможет установить WordPress буквально в два клика.

Благодаря Softaculos вам не придется загружать дистрибутив движка на сервер через FTP

Перед автоматической установкой CMS обратите внимание на важные детали:

• Замените автоматически сгенерированный пароль к базе данных.
• Вместо стандартного Admin укажите другое имя администратора.
• Придумайте надежный пароль для входа в административную консоль.
• Установите плагин Loginizer для защиты от брутфорсинга.
• Включите автообновление CMS, тем и плагинов.

После изменения настроек запустите установку.

Важные настройки установки WordPress

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

При выборе темы ориентируйтесь на свои предпочтения и особенности проекта. Учитывайте важный нюанс: дизайн-шаблон должен быть совместимым с WooCommerce. Теоретически плагин должен работать со всеми темами для WordPress. Но на практике некоторые шаблоны работают с ecommerce-платформой некорректно.

Гарантированно хорошо работает дефолтная тема WooCommerce Storefront, а также ее дочерние темы.

Storefront и ее дочерние темы можно найти на официальном сайте WooCommerce

В официальном каталоге тем WordPress есть шаблоны, разработчики которых декларируют совместимость с WooCommerce. Эти же темы можно найти через административную панель сайта в разделе «Внешний вид – Темы».

Ищем совместимые с WooCommerce темы

Также подходящие дизайн-шаблоны можно найти у одобренных сообществом WordPress разработчиков коммерческих тем.

Как установить и настроить WooCommerce

Плагин WooCommerce можно найти в официальном каталоге WordPress. Удобнее всего установить его через админку в меню «Плагины – Добавить новый». А если вы выбрали дефолтную тему Storefront от разработчиков WooCommerce, на панели управления появится предложение установить и плагин.

После активации темы Storefront появляется предложение установить WooCommerce

После установки и активации плагина система предложит указать основные настройки. На первом этапе мастер настройки создаст базовые страницы: «Магазин», «Корзина», «Оформление заказа», «Мой аккаунт».

Создаем страницы и настраиваем плагин дальше

На следующем этапе выберите страну и валюту. В выпадающем меню укажите позицию обозначения валюты. Для Рунета подойдет вариант «Справа с пробелом».

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

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

Указываем настройки местоположения

Далее мастер настройки предложит указать единицы измерения веса и длины. Если вы работаете в Рунете, придется выбирать между килограммами и граммами, а также между сантиметрами и метрами. Здесь все просто: если вы продаете чай в розницу, вес удобнее указывать в граммах. Оптовым продавцам лучше выбрать килограммы. Длину агроволокна в рулоне удобнее указывать в метрах, а габариты полок для книг или цветов проще оценивать в сантиметрах.

Выбираем подходящие единицы измерения

В настройках платежей укажите только оплату наличными при доставке. Адаптированные к российскому рынку системы для онлайн-расчетов вы подключите позже.

Выбираем способы расчетов

Вы выбрали базовые настройки интернет-магазина.

Как добавить товар в магазин на платформе WooCommerce

Добавить несколько товаров в магазин лучше сразу после базовых настроек платформы. Это обеспечит наглядность при работе с тонкими настройками и функциональностью площадки.

Товары в магазине под управлением WordPress и WooCommerce организованы в категории. Посмотреть существующие или создать новые рубрики можно в меню «Товары – Категории».

Меню категорий товаров

Чтобы создать новую категорию, укажите название, добавьте краткое описание и миниатюру. При необходимости укажите ярлык. Если категория дочерняя, с помощью выпадающего меню выберите родительскую рубрику. В меню «Тип отображения» выберите нужный вариант.

Создаем новую категорию

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

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

Выбираем категорию, указываем название и добавляем описание

Выберите тип товара, укажите стандартную цену. Если планируете распродажу, введите соответствующие данные.

Указываем данные о товаре

Добавьте нужные данные на вкладке «Запасы»: укажите артикул, при необходимости включите автоматическое управление запасами. В этом случае на сайте будет отображаться количество доступных товаров. Также вы можете включить оформление предзаказов.

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

Указываем сведения о товаре

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

Указываем краткое описание и миниатюру

Опубликуйте товар. Проверьте, как отображается превью продукта на витрине магазина.

Превью товара на витрине магазина

Убедитесь, что на странице товара указаны корректные данные.

Карточка товара магазина на WooCommerce

Добавьте несколько товаров и приступайте к тонким настройкам магазина.

Как настроить главную страницу и меню

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

По умолчанию страница магазина не главная

Если сайт работает только как интернет-магазин, логично сделать витрину главной страницей. В меню админки «Настройки – Чтение» укажите, что в качестве главной будет отображаться статическая страница. В выпадающем меню выберите нужный вариант.

Назначьте созданную автоматически Sample Page страницей записей. В дальнейшем ее можно будет отредактировать и использовать в качестве блога.

Настройки главной страницы

Создать или отредактировать меню можно в разделе «Внешний вид – Меню». Укажите название, в разделе «Показать местонахождение» отметьте флажком опции «Главное» и «Мобильное меню». Добавьте в меню нужные страницы.

Добавляем в меню статичные страницы

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

Добавьте в меню ссылки на основные или самые популярные категории товаров. Для этого скопируйте URL категории и укажите его в разделе «Произвольные ссылки».

Добавляем в главное меню популярные категории товаров

При необходимости создайте дополнительное меню. Для этого перейдите на вкладку «Управление областями». Воспользуйтесь ссылкой «Использовать новое меню».

Создаем дополнительное меню

Добавьте в дополнительное меню страницы. Например, это могут быть эндпоинты WooCommerce.

Основное и дополнительное меню»

Как работать с расширенными настройками WooCommerce

После установки WooCommerce мастер настройки помог вам указать основные параметры магазина. Теперь уделите внимание расширенным настройкам.

Как настроить налоги в WooCommerce

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

Согласно пункту 6 статьи 168 Налогового кодекса РФ цены товаров и услуг в магазинах необходимо указывать с учетом налогов. При этом сумму или ставку налога указывать не нужно. Например, если товар продается за 1180 рублей, в конечную стоимость уже включен НДС в сумме 180 рублей при ставке 18 %.

Если ваш магазин работает на упрощенной системе налогообложения, вы ориентируетесь на внутренний рынок, а в качестве регистрационной формы используется ООО или ИП, используйте следующие настройки налогов:

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

Сохраните изменения и проверьте, как отображается цена товаров.

Настройки налогов для ИП и ООО на УСН в магазине на WooCommerce

Как настроить параметры доставки

В меню «WooCommerce – Настройки» выберите вкладку «Доставка». Нажмите кнопку «Добавить зону доставки».

Создаем зоны доставки

Укажите название зоны и выберите географический регион. Добавьте методы доставки. Доступны методы «Самовывоз», «Бесплатная доставка» и «Единая ставка». Последний метод позволяет установить единую стоимость доставки для выбранного региона.

Указываем методы доставки

Чтобы отредактировать метод доставки, нажмите ссылку «Изменить» возле соответствующей ссылки в списке. В открывшемся диалоговом окне можно поменять название метода, налоговый статус и стоимость услуги.

Редактируем методы доставки

Как настроить платежи для магазина на WooCommerce

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

Например, подключите к сайту сервис Wallet One. Для этого зарегистрируйтесь в системе, предоставьте провайдеру платежей необходимые данные и установите бесплатный плагин для WordPress от «Единой кассы». После установки и активации плагина настройте способы платежей в меню «WooCommerce – Настройки».

Чтобы настроить единую кассу, нажмите на соответствующую ссылку в списке платежных шлюзов

Выберите валюту, укажите идентификатор кассы, способ формирования ЭЦП и ключ ЭЦП магазина. Укажите разрешенные платежные системы. При необходимости измените другие настройки.

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

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

Вместо Wallet One можно подключить другие платежные сервисы, например, «Яндекс.Касса», PayOnline.

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

Как улучшить технические характеристики и расширить функциональность магазина на WooCommerce

На данном этапе подключите дополнительный SEO-модуль, создайте идеальную структуру URL, настройте ускоренные мобильные страницы и специфичную для ecommerce-сайтов микроразметку.

Как оптимизировать магазин на WooCommerce

Сайты на WordPress и WooCommerce по умолчанию SEO-оптимизированные. Если вы настраивали сайт по инструкциям для новичков, то уже установили базовый плагин All in One SEO Pack. Он позволяет тонко оптимизировать ресурс к требованиям поисковых систем.

Установите и активируйте надстройку для базового плагина: модуль WooCommerce All in One SEO Pack. Этот инструмент позволяет контролировать метаданные страниц товаров. Он добавляет блок All in One SEO Pack на страницу редактирования продукта.

Блок All in One SEO Pack на странице редактирования товаров

Обратите внимание, поле Keywords лучше оставлять пустым. Поисковые системы не учитывают его содержание при ранжировании, поэтому не тратьте время на бесполезную работу.

Уделите внимание URL. На этапе базовой настройки сайта вы включили ЧПУ. Но при использовании WooCommerce по умолчанию ссылки на продукты содержат префикс product. Это лишняя информация, из-за которой URL получается слишком длинным.

URL товаров по умолчанию включают префикс product

Проблему можно решить с помощью платного плагина Perfect SEO URL. Эта надстройка делает ссылки на товары в магазинах на WooCommerce идеальными. Примеры можно увидеть на демонстрационном сайте плагина.

Идеальный URL включает категорию товара и название товара без префиксов product или shop

Если вы не хотите тратить 119 долларов на плагин Perfect SEO URL, скачайте и активируйте модуль Permalink Manager Lite. В консоли выберите меню «Инструменты – Permalink Manager». Откройте вкладку Permastructures. В строке «Товары» укажите желаемую структуру URL. Чтобы в ссылке отображалось только название категорий и название товаров, используйте конструкцию %product_cat%.

Настраиваем структуру постоянных URL товаров

Добавьте на сайт новый товар. Проверьте, как отображается ссылка.

Идеальный SEO URL товара: есть название продукта и категории, нет лишних префиксов

Обратите внимание, изменения структуры URL не применяются автоматически к опубликованным ранее товарам. Ссылки на них придется редактировать вручную. Для этого на странице настроек плагина выберите вкладку URI Editor. В разделе товары внесите необходимые изменения.

Редактируем URL существующих товаров вручную

Проверьте отображение измененных вручную ссылок.

Получаем идеальные SEO URL и экономим 119 долларов

Как настроить микроразметку и протокол Open Graph

Если вы подключили рекомендованный в руководстве для новичков плагин All in One SEO Pack, подключение протокола Open Graph не займет много времени. В настройках SEO-комбайна включите модуль «Социальные мета». Этого достаточно, чтобы при публикации ссылок на товар в социальных сетях отображался привлекательный сниппет.

Так выглядит сниппет в Facebook при дефолтных настройках модуля «Социальные мета»

На странице модуля измените настройки Open Graph для Facebook. Выберите тип данных «Сайт», включите Facebook Meta для типа записей «Товары».

Настраиваем отображение сниппета в Facebook

Укажите тип данных Product для страниц товаров.

Выбираем тип данных для страниц товаров

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

За счет большой картинки сниппет стал визуально привлекательным

При необходимости измените настройки отображения Twitter Cards.

Дефолтный шаблон для магазинов на WooCommerce поддерживает тип микроразметки Product Schema.org для страниц товаров. Однако реализованная в теме микроразметка не проходит валидацию.

Микроразметка не проходит валидацию

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

Исправить ситуацию можно с помощью платного плагина Schema WooCommerce Plugin by Schema App. Эта надстройка исправляет ошибки и добавляет в разметку недостающие данные, которые необходимы для формирования расширенного сниппета в SERP. Стоимость плагина для одного сайта составляет 47 долларов.

Корректную микроразметку также можно добавить с помощью бесплатных инструментов, например, All In One Schema.org Rich Snippets. После установки и активации плагина необходимо включить поддержку разметки на страницах продуктов.

Включаем разметку на страницах товаров

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

Настройки расширенных сниппетов на странице редактирования товара

Созданная с помощью All In One Schema.org Rich Snippets разметка проходит валидацию. Проблема в том, что в коде страницы остается и старая разметка с ошибками.

Валидатор пропускает новую разметку, но ругается на старую

Кроме того, All In One Schema.org Rich Snippets реализует разметку не через JSON-LD. Поэтому информация видна не только поисковым роботам, но и людям. Блок с семантическими данными фактически дублирует информацию на странице.

Семантические данные видят не только роботы

Как создать AMP для магазина на WooCommerce

По данным Google, конверсия мобильных пользователей прямо зависит от скорости загрузки и простоты использования страниц ecommerce-сайтов на маленьких экранах. Поэтому крупнейшая поисковая система в мире рекомендует владельцам интернет-магазинов использовать AMP.

Чтобы реализовать ускоренные мобильные страницы, установите и активируйте базовый плагин AMP и две надстройки: AMP for WP и AMP WooCommerce. На сайте появятся ускоренные версии статических страниц, записей и товаров.

Ускоренная версия страницы товара

Уделите внимание настройкам AMP. Они доступны в соответствующем меню административной панели. Подробную инструкцию смотрите в руководстве по ускоренным мобильным страницам.

Обратите внимание на ряд важных опций в контексте настройки AMP для интернет-магазина. Включите кнопку «Позвонить сейчас». Она поможет владельцам мобильных гаджетов немедленно связываться с отделом продаж. Указать номер телефона и выбрать внешний вид кнопки можно в разделе Design настроек AMP.

Подключаем кнопку «Позвонить сейчас»

Подключите платную функцию Call to Action. Эта надстройка для плагина AMP for WP добавляет на ускоренные страницы конверсионные формы с призывом к действию. Стоимость надстройки составляет 30 долларов.

В разделе Notifications при необходимости подключите уведомления. Их часто используют, чтобы сообщить посетителям об использовании на сайте cookie.

Проверьте, как ускоренные страницы отображаются на мобильных экранах.

AMP магазина на экране планшета в горизонтальном режиме

Используйте дополнительные возможности WooCommerce

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

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

В разделе «Заголовок» можно загрузить изображение в шапку и изменить цвета ссылок и заголовков

В разделе меню «Внешний вид – Storefront» можно расширить функциональность базовой темы WooCommerce. Вы можете выбрать бесплатные и платные надстройки. Например, бесплатно можно подключить прикрепленную кнопку «Купить» и дополнительную иконку корзины.

Прикрепленная кнопка и иконка корзины доступны бесплатно

Также из меню «Внешний вид – Storefont» можно выбрать и установить дочернюю тему.

Обратите внимание на несколько полезных решений:

• Плагин Facebook for WooCommerce поможет управлять рекламными кампаниями в популярной соцсети. Также с помощью надстройки легко сделать магазин на странице бренда в «Фейсбуке».
• Плагин WooCommerce Multilingual поможет сделать сайт мультиязычным.
• Если выбранная тема не имеет встроенного слайдера, поможет плагин WooCommerce Poduct Slider.
• Если тема не поддерживает увеличение фотографий при наведении курсора мыши, попробуйте YITH WooCommerce Zoom Magnifier.
• Плагин YITH WooCommerce Wishlist добавляет на сайт функцию «Список желаний».
• С помощью Super Socializer можно добавить возможность регистрации через аккаунты в социальных сетях.
• Платный плагин WooCommerce 360º Image позволяет демонстрировать клиентам 3D-фото товаров.
• С помощью WooCommerce Recover Abandoned Cart можно возвращать на сайт посетителей, которые добавили товар в корзину, но не оформили заказ. Плагин платный.
• Платное решение WooCommerce Quick Export Plugin поможет мгновенно экспортировать данные о клиентах и сделках в файл. Это нужно, если вы переносите ресурс на новый хостинг.

Другие инструменты для повышения эффективности WooCommerce ищите в официальном каталоге плагинов WordPress.

Управлять заказами и отслеживать статистику можно в разделах «Заказы» и «Отчеты» меню WooCommerce. В разделе «Купоны» можно создать и опубликовать акционные предложения для повышения продаж.

Управление магазином осуществляется через раздел меню WooCommerce

Связке WordPress и WooCommerce нет равных

Благодаря самой популярной CMS и самой популярной ecommerce-платформе вы можете быстро создать полноценный интернет-магазин. Для этого не нужны знания в веб-разработке. На первых этапах ваши расходы будут минимальными, так как движок, шаблоны и базовые плагины доступны бесплатно.

Настраивать магазин и управлять им очень просто. Вы сможете самостоятельно повысить SEO-дружественность сайта и дополнительно адаптировать его к мобильному трафику. Благодаря развитой инфраструктуре WordPress вам доступны практически неограниченные возможности кастомизации и расширения функциональности магазина на WooCommerce.

Связка WordPress и WooCommerce поможет вам сосредоточиться на расширении ассортимента товара и увеличении продаж. А если появятся вопросы по настройкам сайта, пишите в комментариях.

Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Здравствуйте друзья! В этом уроке мы продолжаем создание интернет-магазина, и сегодня я покажу как правильно добавлять новые товары в магазин.

Напомню, что в прошлых уроках мы с вами уже разобрали:

Как добавить новый товар в WooCommerce

Для того чтобы добавить новый товар переходим с административного меню в Товары -> Добавить товар.

Добавление названия, описания и категории товара

В открывшемся окне добавляем название товара (самое верхнее поле для заполнения).

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

Указываем название товара, категорию, и описание

Добавление цены, краткого описания, изображения и галереи товара

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

Изображение товара (миниатюра) добавляется абсолютно также как и обычная миниатюры к записи WordPress.

Для добавления галереи товара (дополнительные изображения продукта) нажмите «Добавить картинки галереи товара» и укажите необходимые изображения.

Краткое описание товара — описание, которое отображается обычно с правой стороны от изображения заполняем в блоке «Краткое описание товара».

Результат который получился:

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

В результате добавленный товар в интернет магазин на базе плагина WooCommerce и темы Storefront получился как на изображении ниже:

Спасибо за внимание! Если у вас остались вопросы или появились проблемы при добавлении товаров/настройке WooCoomerce — пишите их в комментариях!

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Добавление и управление товарами

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

Категории товаров

Категории и теги продуктов работают точно так же, как и обычные категории и теги, которые вы используете при написании постов в WordPress. Их можно создавать, редактировать и выбирать в любое время. Это можно сделать при первом создании продукта или вернуться и отредактировать его или категорию/тег.

Атрибуты

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

Типы товаров

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

• Простой — охватывает подавляющее большинство продуктов, которые вы можете продавать. Простые продукты отгружаются и не имеют опций. Например, книга.
• Сгруппированный — набор сопутствующих товаров, которые можно приобрести по отдельности и состоят только из простых товаров. Например, набор из шести питьевых стаканов.
• Виртуальный — тот, который не требует доставки. Например, услуга. При включении этого параметра отключаются все поля, связанные с доставкой, например, размеры доставки. Виртуальный товар также не будет включать калькулятор доставки в корзине и при оформлении заказа.
• Загружаемый — активирует дополнительные поля, в которых можно указать загружаемый файл. После успешной покупки покупатели получают загружаемый файл в виде ссылки в письме с уведомлением о заказе. Это подходит, например, для цифрового альбома, PDF-журнала или фотографии.
• Внешний или партнерский — товар, который вы перечисляете и описываете на своем сайте, но который продается в другом месте.
• Вариативный — товар с вариациями, каждая из которых может иметь разный SKU, цену, вариант поставки и т.д. Например, футболка разных цветов и/или размеров.
• Другие типы часто добавляются расширениями. Например, WooCommerce Subscriptions добавляет новые типы продуктов, как и WooCommerce Bookings.

Артикул (SKU)

Артикул (SKU — Stock Keeping Unit) — это уникальный номер, присваиваемый продукту, в частности, для отслеживания запасов.

Поле Артикул может принимать до 255 символов, которые могут включать буквенно-цифровые значения и некоторые специальные символы. Вводимые данные проверяются с помощью функции WordPress santize_text_field, что означает, что HTML, недопустимые символы UTF и октеты будут удалены при сохранении (октет определяется %, за которым следуют 2 символа со значением в диапазоне a-f или 0-9).

Добавление простого продукта

Добавление простого продукта аналогично написанию сообщения в WordPress.

• Перейдите в раздел Товары > Добавить. У вас появится знакомый интерфейс, и вы сразу почувствуете себя как дома.
• Введите название и описание товара.
• Перейдите на панель данных продукта и выберите загружаемый (цифровой) или виртуальный (услуга), если это применимо.

Примечание: Виртуальные товары не требуют доставки — заказ с виртуальными товарами не будет рассчитывать стоимость доставки.

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

Мета-блок «Данные товара» — это место, куда добавляется большинство важных данных о ваших продуктах.

Раздел Основные

• Базовая цена — Обычная/регулярная цена товара
• Цена распродажи — Цена товара со скидкой, которая затем может быть запланирована на определенный диапазон дат. Срок действия распродажи истекает в 23:59 указанной даты окончания.

Раздел Запасы

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

Галочка управление запасами должно быть выбрано в настройках инвентаризации продуктов; в противном случае в окне инвентаризации данных продукта будет видна только опция «Состояние запасов».

Настройки, когда управление запасами на уровне продукта отключено. Вы несете ответственность за обновление статуса запасов.

Настройки, когда управление запасами на уровне продукта включено.

• Введите количество запасов, и WooCommerce автоматически управляет запасами и автоматически обновляет статус запасов как запас, нет в наличии или в резервном заказе.
• Выберите, нужно ли разрешить предзаказы.
• Граница малых заказов — введите число, после которого вы будете получать уведомление.
• Поставьте галочку в поле «Продавать индивидуально», чтобы ограничить количество товара одним на заказ.

Раздел Доставка

• Вес — Вес изделия.
• Размеры — Длина, ширина и высота товара.
• Класс доставки — классы доставки используются некоторыми методами доставки для группировки похожих товаров.

Раздел Сопутствующие

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

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

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

Раздел Атрибуты

На вкладке «Атрибуты» можно назначить сведения о продукте. Вы увидите поле выбора, содержащее созданные вами глобальные наборы атрибутов (например, платформа). Подробнее см: Управление категориями, тегами и атрибутами продукта.

Выбрав атрибут в поле выбора, нажмите кнопку добавить и примените к продукту условия, связанные с этим атрибутом (например, Nintendo DS). Вы можете скрыть атрибут на фронтенде, оставив флажок «Отображение на странице товаров» не установленным.

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

Раздел Дополнительно

• Примечание о покупке — Введите необязательное примечание для отправки клиенту после покупки товара.
• Порядок — пользовательская сортировка для данного товара.
• Включить отзывы — включение/выключение отзывов покупателей для данного товара.

Краткое описание товара

Добавьте отрывок. Обычно он появляется рядом с изображением товара на странице листинга, а длинное описание появляется на вкладке «Описание товара».

Начиная с версии 3.1x можно использовать видеовставки (oembed).

Категории товаров

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

Изображения товаров

Добавьте главное изображение товара и галерею изображений. Подробнее см: Добавление изображений и галерей товаров.

Настройка параметров видимости каталога и статуса функции

На панели «Опубликовать» вы можете настроить видимость каталога для вашего продукта.

• Товары и результаты поиска — Виден везде, на страницах магазинов, страницах категорий и в результатах поиска.
• Только товары — Виден на страницах магазина и категорий, но не в результатах поиска.
• Только результаты поиска — Виден в результатах поиска, но не на странице магазина или страницах категорий.
• Скрыто — Виден только на странице одного продукта — ни на каких других страницах.

Вы также можете установить, будет ли продукт продвигаться в категориях товаров, повышающих продажах, сопутствующих товарах как рекомендуемый. Например, вы можете установить флажок «Это рекомендуемый товар» для всех продаваемых вами комплектов.

Другие способы присвоить товару статус рекомендуемый описаны в следующем разделе: Пометить продукт как рекомендуемый

Добавление сгруппированного продукта

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

Создание сгруппированного товара

1. Перейдите в: Товары > Добавить
2. Введите название для сгруппированного товара, например, набор «Снова в школу».
3. Прокрутите вниз до раздела Сопутствующий и выберите Группированный из выпадающего списка. Цена и некоторые другие поля исчезнут. Это нормально, потому что сгруппированный продукт — это набор «дочерних продуктов», куда вы и добавляете эту информацию.
4. Опубликуйте.

Сгруппированный продукт по-прежнему является пустой группой. Для этого сгруппированного продукта необходимо:

• Создайте товары и их добавьте их
• Добавьте существующие дочерние товары

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

Добавление товаров в группу

1. Перейдите в: Товары > Добавить.
2. Выберите сгруппированный продукт, к которому вы хотите добавить продукты.
3. Прокрутите вниз до раздела «Данные товара» и перейдите к разделу «Сопутствующие».
4. Выберите Сгруппированные продукты и найдите продукт, набрав его в поиске.
5. Щелкните на продукты, которые вы хотите добавить.
6. Обновите
7. Вы можете перетаскивать продукты, чтобы изменить порядок сгруппированных продуктов. После нажатия кнопки Обновить новый порядок будет отображен на странице продукта.

Добавление виртуального продукта

При добавлении простого товара вы можете установить флажок «Виртуальный» на панели типа продукта.

При использовании вариативных товаров этот флажок переносится на каждую вариацию.

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

Добавление скачиваемого товара

При добавлении простого продукта вы можете установить флажок Скачиваемый на панели типа продукта. При этом добавляются новые поля:

• Скачиваемые файлы
• Лимит загрузки — Ограничение на количество раз, которое клиент может загрузить файл. Оставляется пустым для неограниченного количества загрузок.
• Истечение срока загрузки

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

Добавление внешнего/партнерского продукта

Выберите «Внешний/Партнерский» из выпадающего списка типа продукта. Это немного изменит метабокс данных продукта. Сначала с левой стороны будет удален раздел доставки. Затем он добавляет два новых поля в разделе «Общие» — URL товара и поле «Текст кнопки». Поле URL продукта — это место, где пользователи могут приобрести данный продукт. Текст кнопки позволяет изменить обычный текст кнопки «Добавить в корзину» на нужный вам текст.

Добавление вариативного товара

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

Руководство по созданию продукта с вариациями см. в документации по вариативным продуктам.

Дублирование товара

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

Перейдите в раздел Товары > Все товары и найдите в списке продукт, который вы хотите продублировать, затем нажмите кнопку Дублировать.

Удаление товара

Чтобы удалить продукт:

1. Перейдите в: Товары > Все товары.
2. Найдите продукт, который вы хотите удалить.
3. Наведите курсор на область под названием продукта и нажмите кнопку Удалить

Пометить продукт как рекомендуемый

Чтобы отметить продукт как рекомендуемый, перейдите в: Товары > Все товары и выберите звезду в столбце «Популярные». Или же выберите Быстрое редактирование, а затем опцию «рекомендуемый».

Фильтр или сортировка товаров

В дополнение к приведенным ниже опциям, WooCommerce Customizer дает вам возможность настроить каталог товаров. Перейти к: WooCommerce Customizer — Product Catalog.

Фильтрация товаров

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

1. Перейдите в: Товары > Все товары.
2. Выберите категорию, тип продукта и/или состояние запасов, или любую комбинацию этих трех параметров.
3. Нажмите кнопку Фильтр.

Сортировка товаров

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

1. Перейдите в: Товары > Все товары.
2. Выберите Сортировка.
3. Выберите категорию, тип продукта и/или состояние запасов, или любую комбинацию этих трех параметров.
4. Нажмите кнопку Фильтр.

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

ID товара

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

Чтобы найти ID, перейдите в раздел Продукты и наведите курсор на продукт, для которого вам нужен ID. Отобразится идентификационный номер продукта.

Это перевод официальной документации по WooCommerce, с комментариями экспертов.