Создание и настройки интернет-магазина на WooCommerce — пошаговое руководство

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

Установка WordPress

Прежде всего надо установить WordPress, для этого надо перейти на официальный сайт — wordpress.org и скачать последнюю версию.

Затем ее надо установить на локальный или удаленный хостинг и пройти легкий процесс установки.

Шаги установки WordPress:

1. Выбор языка (для более удобной работы необходимо выбрать русский):
2. Информация о базе данных:
3. Настройка базы данных:
4. Общие настройки WordPress:
   

Системные требования

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

• PHP 7 или выше;
• MySQL или MariaDB последних оф. версий;
• Модуль mod_rewrite Apache;
• Поддержка HTTPS.
• Php Memory — 512 Mb+
• Поддержка CURL или fsockopen
• Поддержка Multibyte String
• CHMOD 777 wp-content/uploads
• upload_max_filesize = 4 Mb
• mySQL ‘max_allowed_packet’ = 2M

Минимальные системные требования:

• php 5.6
• MySQL 5.6 и выше или MariaDB 10.0 и выше
• Php Memory — 128 Mb
• Поддержка CURL или fsockopen
• Поддержка Multibyte String
• Модуль mod_rewrite Apache

Читайте подробнее: Системные требования WordPress

Установка WooCommerce

Заходим в раздел Плагины и кликаем — Добавить новый. В поиске вводим WooCommerce и устанавливаем.

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

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

Установка важнейших плагинов

Все плагины устанавливаем по аналогу с WooCommerce со страницы установки плагинов, предварительно введя название плагина.

Yoast SEO

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

Подробнее о лучших настройках для SEO оптимизации вашего интернет-магазина вы можете прочитать в этой статье:

SEO-оптимизация WooCommerce: подробное руководство

WooCommerce SEO Addon

Предоставляет дополнительные возможности для SEO, которых нет в базовом Yoast SEO, такие как:

• Он отображает основную информацию о онлайн-магазине с помощью микро-разметки на главной странице.
• Он отображает информацию о ценах, наличии запаса и валюте в данных микро-разметки на странице продукта.
• Он отображает информацию о ценах, наличии запаса и валюте в данных Open Graph на странице продукта.
• Он автоматически генерирует alt текст для всех изображений продукта.
• Он отображает информацию о бренде в данных микро-разметки на странице продукта.

Подробнее: WooCommerce SEO Addon

WooCommerce Permalink Manager

Обязательный плагин, если вы переходите с другой платформы и хотите сохранить структуру URL, а также, если вы хотите забрать ненужный Slag с урл вашего магазина и сделать его более лаконичным и читабельным.
Подробнее: WooCommerce Permalink Manager

Google Analytics

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

• Google Analytics Dashboard for WP (GADWP);
• WooCommerce Google Analytics Integration.

Подробнее о настройке можно прочитать в нашем туториале: Настройка Google Analytics для WooCommerce

Premmerce

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

Основные настройки, которые необходимо сделать перед началом работы

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

SSL сертификат

Прежде всего очень рекомендуем вам купить и установить ssl сертификат для вашего интернет-магазина, чтобы адрес вашего сайта начинался с «https».

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

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

Основные настройки WordPress

Обязательно нужно изменить на странице Общие:

• Название сайта — отвечает за название вашего сайта, в том числе и за формирование заголовка Meta Title. Важно вписать сюда краткое название магазина.
• Краткое описание — краткое описание магазина, отображается как правило, под логотипом.
• Адрес WordPress (URL) — основной адрес магазина, если у вас есть SSL сертификат, прописываем адрес с https
• Адрес сайта (URL) — дублируем сверху тот же адрес.
• Адрес e-mail — здесь очень важно, чтобы был рабочий e-mail, поскольку на него будут приходить все системные сообщения
• Язык сайта — убедитесь, что здесь выбран правильный язык сайта.
• Часовой пояс — убедитесь, что здесь выбран правильный временной пояс вашего магазина.

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

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

Ниже приведены шаги для настройки домашней страницы.

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

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

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

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

Для этого надо перейти на страницу Настройки — Чтение в WordPress и назначить недавно созданные страницы на соответствующие служебные страницы.

Настройки постоянных ссылок

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

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

Если вы хотите, чтобы URL вашего интернет-магазина были чистые от префиксов, которые по умолчанию добавляет WooCommerce, используйте WooCommerce Permalink Manager.

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

Другие настройки WordPress

Все остальные настройки, которые находятся на страницах: Общие, Написание, Чтение, Обсуждение, Медиафайлы, имеют по умолчанию корректные настройки. Соответственно изменять их нужно только в том случае, если вам нужно будет как-то видоизменить логику работы вашего магазина.

Подробнее об этих настройки можно почитать, используя панель Помощь в интерфейсе WordPress:

Основные настройки WooCommerce

Обязательно нужно заполнить на вкладке Основные:

• • Строка адреса 1 — адрес вашего интернет-магазина, используется в очень многих местах и влияет на региональное продвижение интернет-магазина. Очень рекомендуем заполнить данное поле. В случае, если магазин виртуальный, можно не заполнять..
  • Строка адреса 2 — в случае, если ваш магазин имеет два физических адреса.
  • Город — город, в котором расположен ваш магазин.
  • Страна/Область — выбор страны и области, где расположен ваш магазин.
  • Почтовый индекс 
  • Валюта — основная валюта вашего интернет-магазина.

Настройки GEO IP

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

1. Перейдите на http://dev.maxmind.com/geoip/legacy/geolite/

2. Скачайте «Binary / gzip» файл возле «GeoLite Country»

3. Распакуйте скачанный файл в директорию /wp-content/uploads/GeoIP.dat

Вкладка Товары

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

Подробнее об управлении данными настройками можно прочитать на официальной документации

Вкладка налоги

Доступна только, когда вы включите налоги в настройках. Для магазинов в странах СНГ автоматический расчет налогов, как правило не требуется. Читать подробнее про управление этой вкладкой.

Вкладка доставка

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

Вкладка платежи

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

Вкладка аккаунты

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

Вкладка Emailы

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

Обязательно обратите внимание на поля:

• Имя «От кого»
• Адрес отправителя
• Изображение заголовка
• Текст подвала

 

Именно эти поля будут отображаться вашим пользователям при получении почты от вас.

Вкладка API

Данная вкладка позволяет получить ключи для доступа к Rest API сторонними программам, например — iOS или Android Application. Сразу никаких настроек здесь не нужно делать.

Настройки Yoast SEO для WooCommerce

Страница общие

На вкладке Возможности по умолчанию включены все пункты — данная настройка является оптимальной. Рекомендуем оставить эти настройки.

На вкладке Инструменты веб-мастеров подключаем и прописываем настройки Webmaster Tools от всех необходимых поисковых систем, в которых вы хотите продвигать ваш интернет-магазин.

Страница Внешний вид поиска

На вкладке общие в поле “Компания или частное лицо:” выбираем “Компания” и заполняем название компании и прикрепляем логотип компании.

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

Рекомендуем вносить изменения только в случае крайней необходимости.

Страница Консоль поиска

Содержит возможность авторизовать Yoast SEO и консоль Google Webmaster — после чего на этой странице будет показываться инфомрация обо всех 404 страницах на вашем сайте. Очень рекомендуем авторизовать.

Страница Социальные сети

На данной странице настраивается передача информации в социальные сети и оптимизация под них вашего интернет-магазина.

Необходимо заполнить следующие данные:

• Вкладка аккаунты — вносим данные обо всех ваших страницах в социальных сетях, используемых на данный момент;
• Вкладка Facebook — можно оставлять дефолтные данные;
• Вкладка Twitter — можно оставлять дефолтные данные;
• Вкладка Pinterest — в случае использования, стоит подтвердить ваш сайт, на данной вкладке есть ссылка на инструкцию, как это сделать;
• Вкладка Google+ — если у вас есть страница в Google+ для бизнеса — копируйте ее адрес в эту вкладку.

Premium and Yoast WooCommerce

Yoast содержит также премиум версию для работы с WooCommerce, которая позволяет расширить использование Schema.org и OpenGraph разметки.

Однако, вы можете воспользоватся для этого бесплатным плагином WooCommerce SEO Addon, который делает то же, а также содержит некоторые дополнительные опции.

Настройки WooCommerce SEO Addon

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

Подробнее вы можете ознакомиться с принципом работы на странице плагина: WooCommerce SEO Addon

Настройки Google Analytics

По настройке Google Analytics мы создали отдельный подробный туториал, ознакомиться с которым можно на этой странице: Настройка Google Analytics для Woocommerce

Настройки внешнего вида интернет-магазина

Выбор и установка темы оформления

После установки WooCommerce, он сразу предлагает установить свою основную бесплатную тему StoreFront.

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

Управление темами происходит в разделе: Внешний вид -> Темы:

Работа с кастомайзером

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

Все кастомизации происходят в разделе Внешний вид -> Настроить. После открытия вы увидите следующий интерфейс:

Важнейшими здесь есть настройки в следующих разделах:

Свойства сайта

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

Меню

Здесь можно настроить пункты меню для всех меню в хедере и футере.

Виджеты

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

Основные виджеты WooCommerce, которые можно использовать:

• Active Product Filters — отображает список активных фильтров.
• Фильтровать продукты по атрибуту — отобразить список атрибутов для фильтрации продуктов в вашем магазине.
• Фильтровать продукты по цене — отображать слайдер для фильтрации продуктов в вашем магазине по цене.
• Filter Products by Rating — отображает возможность фильтрации продуктов в вашем магазине по рейтингу.
• Категории продуктов — список или выбор категорий товаров.
• Продукты — список продуктов вашего магазина.
• Продукты по рейтингу — список самых популярных продуктов вашего магазина.
• Поиск продукта — форма поиска для вашего магазина.
• Облако тегов продуктов — облако ваших наиболее используемых тегов продукта.
• Недавние обзоры продуктов — отобразите список последних отзывов в вашем магазине.
• Недавно просмотренные продукты — Отображение списка недавно просмотренных продуктов.

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

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

Другие настройки

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

• Header;
• Footer;
• Background;
• Typography;
• Buttons;
• Layout;
• и другие.

Настройка основных контент-страниц

Все основные контент страницы находятся в разделе Страницы.

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

Главная страница

Это главная страница вашего интернет-магазина, на ней в первую очередь очень важно с помощью блока Yoast SEO настроить правильные Meta Tags:

А также внести правильное название вашего интернет-магазина и краткое описание.

Магазин — Страница магазина

Это основная страница каталога вашего интернет-магазина, на которой отображаются все добавленные товары.

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

В противном случае следует изменить ее название и прописать уникальные Meta Tags.

Контакты

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

Опционально — предлагаем установить плагин Contact Form 7, который позволит на этой странице отобразить форму для обратной связи и собирать информацию от ваших клиентов.

После установки нужно перейти на страницу со всеми формами и скопировать Shortcode:

После этого нужно перейти в редактирование вашей страницы Контакты и разместить его под контентом:

После этого на странице контактов появится следующая форма:

По умолчанию данная форма будет отправлять все сообщения на указанный вами e-mail в общих настройках сайта. Однако вы можете зайти в редактирование формы и изменить этот адрес, также вы сможете изменить или переименовать поля для заполнения и сделать дополнительные настройки, которые вам необходимы.

Подробнее о настройке форм вы можете прочитать в официальной документации плагина: Admin Screen

Другие важные страницы, на которые стоит обратить внимание

• Корзина
• Оформление заказа
• Мой аккаунт

На данных страницах нужно поставить No Index через Yoast SEO, поскольку они являются служебными и только засорят индекс поисковых систем.

На этом все основные настройки для вашего магазина сделаны и можно переходить к наполнению товарами и работы с заказами.

Работа с товарами и категориями

В данном разделе рассмотрим кратко основные аспекты работы с каталогом продуктов вашего интернет-магазина.

Создание категорий товаров

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

Делается это в следующем простом интерфейсе:

Подробнее о работе с категориями вы можете прочитать на странице документации: Managing Product Categories, Tags and Attributes

Создание атрибутов товаров

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

Управление атрибутами товаров происходит в следующем интерфейсе:

Подробнее о работе с атрибутами вы можете прочитать на странице документации: Managing Product Categories, Tags and Attributes

Управление каталогом товаров

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

• Провести быстрый поиск товаров с помощью фильтра;
• Применить массовое редактирование товаров (изменить всем выбранным категорию или цену, например) или массово удалить товары;
• Также каждый товар в списке можно: быстро отредактировать, удалить, скопировать или посмотреть на сайте.

Добавление новых товаров

Добавление новых товаров происходит через достаточно простой интерфейс, в котором размещены все необходимые для качественного наполнения карточки товара поля:

• Название;
• Описание;
• Цена;
• Выбор категории;
• Фото продукта;
• И другие.

Подробнее с процессом добавления товаров и различными доступными типами товаров вы можете ознакомиться на странице документации: Adding and Managing Products

Управление магазином

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

Управление заказами

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

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

Подробнее об управлении заказами, вы можете прочитать в документации: Managing Orders

Создание купонов на скидку

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

Отчёты

Кроме использования Google Analytics, вы также можете воспользоваться аналитикой от WooCommerce, которая позволяет получить данные о:

• Заказах с удобным графиком и различными настройками для наглядности;
• Покупателях и их покупках;
• Товарах, которые скоро заканчиваются на складе.

Подробнее об имеющихся отчетах можно прочитать на странице: WooCommerce Reports

Статус

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

Подробнее ознакомиться с принципом работы Статуса можно на странице Understanding the WooCommerce System Status Report

Дополнительные возможности

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

Premmerce Search

Данный плагин решает сразу две проблемы:

• Заменяет обычный WooCommerce поиск на Live Search;
• Ищет с учетом потенциально введенных ошибок пользователями.

Ознакомится подробнее: Premmerce Search – WooCommerce Product Search

Premmerce WooCommerce Product Filter

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

Ознакомится подробнее: Premmerce WooCommerce Product Filter

Premmerce WooCommerce Brands

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

Ознакомится подробнее: Premmerce WooCommerce Brands Free Plugin

WooCommerce Customers Manager

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

Ознакомится подробнее: Woocommerce Customers Manager

Premmerce User Roles

Premmerce User Roles поможет вам создать новые группы пользователей для собственных целей.

Ознакомится подробнее: Premmerce User Roles

MetaSlider

It’s one of the most popular banner and slider plugins in the WordPress plugins directory. It provides you with a possibility to create banners or sliders by simply adding them to your site using the shortcode.

Ознакомится подробнее: MetaSlider

Premmerce WooCommerce Wishlist

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

Ознакомится подробнее: Premmerce WooCommerce Wishlist

Premmerce WooCommerce Redirect Manager

Premmerce WooCommerce Redirect Manager позволяет вам создавать перенаправления 301 и 302 и настраивать автоматические переадресации для удаленных продуктов в магазине WooCommerce.

Ознакомится подробнее: Premmerce WooCommerce Redirect Manager

Premmerce WooCommerce Wholesale Pricing

Premmerce WooCommerce Wholesale Pricing — это плагин, который позволяет добавлять индивидуальные оптовые цены или другие типы цен в продукты WooCommerce для ролей любых клиентов.

Ознакомится подробнее: Premmerce WooCommerce Wholesale Pricing

Premmerce Woocommerce Product Bundles

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

Ознакомится подробнее: Premmerce Woocommerce Product Bundles

Настройка WooCommerce с помощью мастера настройки Premmerce

Как вы видите в нашем руководстве, чтобы запустить успешный интернет-магазин на базе WooCommerce, вам действительно нужно установить и настроить около 10 плагинов и выполнить почти 40 различных настроек.

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

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

Ознакомиться подробнее: Плагин Premmerce — Все необходимые плагины и мастер настройки WooCommerce.