Создание интернет-магазина на WooCommerce (WordPress)

WordPress – самый крутой и удобный движок для начинающих web-мастеров. Он гибкий, легко расширяется и настраивается под разные типы проектов, традиционно занимает первое место по популярности. На нём работает практически каждый второй сайт в мире (61+% среди CMS и 43+% по всем сайтам, даже без движка). Доля в России – около 43% (в разных источниках цифры могут отличаться).

На всякий случай напомним, что в чистом виде WordPress подходит максимум для ведения блогов и информационных сайтов. Чтобы сделать на этой CMS интернет-магазин, нужны профильные плагины. В официальном каталоге WordPress несколько десятков решений, от крайне простых (в виде кнопок PayPal) до мега-сложных. Как раз к последним и относится плагин WooCommerce.

WooCommerce – это расширение от компании Automattic (из США), которая принадлежит Мэтью Чарльзу Мулленвегу, основателю WordPress. Та же компания делает массу других плагинов для WordPress и занимается сопровождением всех официальных мобильных приложений. По статистике BuiildWith на WooCommerce работает свыше 5,3 млн. сайтов (это 13% от всех платформ для электронной коммерции, включая онлайн-конструкторы). Из них около 2,2 млн. в США, и 95+ тыс. – в России. В РФ у WooCommerce вообще первое место – 37% рынка.

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

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

Возможности плагина WooCommerce

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

Максимально кратко о ключевых функциях WooCommerce:

Бесшовная интеграция с WordPress (плагин создавался специально для этой CMS-системы).
Возможность создания каталога товаров любой сложности – с неограниченной вложенностью категорий и подкатегорий.
Своя система плагинов, интеграций и тем оформления. Есть возможность подключения российских платёжных систем и eCommerce-сервисов.
Перевод на множество языков, в том числе на русский.
Полная совместимость с массовыми хостингами для сайтов.
Удобный интерактивный помощник для первоначальной настройки.
Готовые мобильные приложения для управления (а также для получения нативных Push-уведомлений о заявках).
Штатная система импорта и экспорта (CSV) + возможность добавления форматов, совместимых с другими CMS и платформами (но это уже за счёт плагинов).
Встроенная система аналитики продаж и складской учёт. Данные предоставляются в виде готовых отчётов по продажам, запасам, загрузкам (для цифровых товаров), доходов, скидочных купонов и т.п. При желании можно точечно настроить период выборки и выгрузить информацию для анализа в других системах (например, в системах бизнес-аналитики).
Простейшие купоны и скидки + продвинутые расширения для создания полноценных систем лояльности.
Тесная интеграция с системами маркетинговых рассылок и автоматические уведомления о статусах заказов.
Автоматический или ручной учёт налоговых ставок.
Мультиязычность (за счёт плагинов).

Что стоит учесть перед установкой WooCommerce (недостатки и подводные камни):

WordPress сам по себе создаёт неплохую нагрузку на сервер и нуждается в технических оптимизациях (как минимум, нужна настройка кеширования). При добавлении WooCommerce нагрузка возрастает кратно. Поэтому хостинг мы рекомендуем не ниже VPS.
Многие плагины для интеграции с российскими платёжными системами распространяются через сайты самих платёжных систем. Обновляются они редко. Всегда существует вероятность того, что интеграция реализована сторонними разработчиками (в этом случае повышается риск отказа от обслуживания в будущем).
Аддоны к WooCommerce от официальной команды разработчиков распространяются в основном по модели подписки и стоят недёшево (от 40 до 300 USD/год за каждое). Плагины потребуются как минимум для: расширенного CSV-импорта/экспорта – $59/год, букинга –$249/год, продажи по подпискам – $279/год, продажи членства – $199/год, расширенных атрибутов в карточках товаров – $79/год, управления уведомлениями – $39/год, настройки условий расчёта доставки – $109/год и т.д. Купить их из РФ будет крайне сложно. Всегда можно поискать бесплатные альтернативы.
Доступ к SEO-настройкам можно получить только через профильные плагины. А они для магазинов в норме требуют своих премиум-подписок.
Встроенная CRM реализуется на базе плагина Jetpack CRM, тоже со своими подписками и тарифами. Без CRM WooCommerce только хранит подробную информацию о контактах и заказах – раздел «Клиенты».

Установка WooCommerce (создание магазина)

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

Скачать бесплатно последнюю версию WooCommerce можно напрямую из панели управления WordPress (через каталог расширений):

Откройте в панели администратора раздел «Плагины».
Нажмите «Добавить новый».
Найдите в списке WooCommerce. Установите его и активируйте.

После активации WooCommerce запустится мастер первоначальной настройки.

Настройка плагина WooCommerce

Стартовые настройки:

Указать название магазина.
Выбрать категорию/отрасль (нужна для внутренней статистики и помощи с настройкой совместимых аддонов), страну.
Подписаться на информационные рассылки (по желанию).
Установить рекомендуемые плагины (в основном партнёрские предложения и реклама Jetpack AI, да Вордресс тоже движется в сторону искусственного интеллекта).

В мастере базовых настроек всего пять пунктов (это своего рода подспорье для новичков):

Параметры магазина. Включают изменение внешнего вида в конструкторе Gutenberg или установку новой темы (из каталога совместимых шаблонов). У WooCommerce есть свой конструктор тем (Дизайнер магазина). В нём настраиваются шрифты, логотип, цветовые схемы, макеты хедера, подвала и главной страницы каталога. Макеты настраиваются по аналогии с паттернами – из предложенных вариантов секций (услуги, кнопки соцсетей, рекомендации товаров, преимущества и прочее).
Добавление товаров. Возможно создание физических и цифровых товаров, товаров с вариациями (на основе параметров цвета, размера и т.п.), групп/наборов/коллекций и внешних товаров (тех, что продаются на внешних площадках, по партнёрским ссылкам). Поддерживается импорт из CSV-файлов (не более 256 МБ, с рядом ограничений, для расширения возможностей нужно приобрести плагин), а также продажа подарочных карт, подписок, бронирование услуг, номеров в отелях и прочее (но это всё тоже за счёт расширений).
Настройка приёма платежей. Как можно было догадаться, для расположения «Россия» доступны только «офлайн-платежи». Все необходимые интеграции реализуются только за счёт плагинов с сайтов платёжных сервисов (либо их нужно искать в официальном каталоге WordPress).
Расчёт налогов. Здесь нужно заполнить адрес физического магазина (или просто регион работы) и добавить новую налоговую ставку (она привязывается к расположению).
Запуск магазина. Кнопка запуска открывает его для индексации поисковыми системами и публикует товары (снимает показ страницы-заглушки «Скоро открытие»).

По факту настроек магазина гораздо больше:

Основные. Касаются расположений офиса и торговых точек, а также настроек доставки и валюты оплаты. Плюс включение/отключение расчёта налогов и логики применения купонов.
Товары. Выбор основной страницы магазина (она же будет участвовать в логике построения постоянных ссылок на товары), логика перехода в корзину после добавления товаров, единицы измерения для габаритов и веса, управление настройками системы отзывов и рейтингов. Плюс опции для управления товарными запасами и скачиваемых/цифровых товаров, активация таблиц для хранения атрибутов товаров и настройка технических оптимизаций при обновлении информации (для снижения нагрузки на сервер).
Налоги. Логика расчёта налогов и ставок может быть очень сложной и опираться на расположение покупателей. Налоги можно включить в отображаемую стоимость товара.
Доставка. Можно создать свои правила калькуляции на основе зон, методов и классов доставки. Отдельно настраивается логика самовывоза.
Платежи. Онлайн и офлайн-оплата, быстрое подключение интеграций из каталога доступных аддонов.
Аккаунты и приватность. Возможность заказа без регистрации и логика создания личных кабинетов клиентов, прописание своих правил для политики конфиденциальности и настройка параметров хранения персональных данных (сколько и какую информацию нужно хранить).
Email’ы. Настройка автоматических писем и уведомлений клиентам. Можно заменить текстовки, добавить свой логотип, перенаправить письма через SMTP (сервис рассылок). Внутри писем и в заголовках можно использовать вызов переменных.
Интеграция MaxMind. Это локальная база данных, облегчающая поиск геолокации пользователей на основе их IP-адресов.
Видимость сайта. Включение и отключение режима обслуживания магазина.
Дополнительно. Настройки API и веб-хуков, сопоставление шаблонов страниц, управление энд-поинтами заказа, ограничение числа запросов, изменение формата хранения данных заказов, активация внутренней системы аналитики, индексов полнотекстового поиска и т.п. Можно попробовать бета-версию редактора товаров.

На всякий случай покажем, как подключить платежи – на примере ЮMoney.

Переходим в раздел управления плагинами.
Выбираем пункт «Добавить плагин». В поиске вводим YooKassa.
Устанавливаем и активируем плагин. Прямая ссылка на каталог.
Теперь переходим к настройке – раздел «WooCommerce», пункт «Настройки ЮKassa».
Нажмите кнопку «Подключить магазин». Обязательно разрешите показ всплывающих окон (настраивается в омнибоксе/поисковой строке в активной вкладке браузера).
Авторизуйтесь в аккаунте ЮKassa и выберите свой магазин. Подтвердите действие кодом из SMS.
Настройте сценарии оплаты, а также дополнительные функции и логику формирования чеков.
Перейдите в настройки WooCommerce, вкладка «Платежи» и активируйте виджет ЮKassa. При желании можно задать своё название для способа оплаты и добавить описание, включить возможность сохранения данных банковских карт для повторной оплаты.

Готово. На всякий случай официальная документация.

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

Работа с дизайном сайта

Для нормальной работы магазина потребуется шаблон, в котором заявлена совместимость с WooCommerce. Технически, для этого подойдёт любая дефолтная тема, поставляемая вместе с WordPress (Twenty Twenty-Five, Twenty Twenty-Four, Twenty Twenty-Three и Twenty Twenty-Two). Теоретически должна подхватиться любая блочная тема – которую можно пересобрать в конструкторе Gutenberg.

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

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

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

Штатный набор возможностей WordPress:

Компоновка страниц и элементов шаблона из блоков и паттернов (можно дополнительно задействовать онлайн-каталог и систему расширений). При желании конструктор Gutenberg можно заменить или дополнить другими редакторами и пейджбилдерами, такими как Elementor (он полностью совместим с WooCommerce).
Создание своих цветовых схем и наборов шрифтов.
Загрузка логотипа.

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

В WordPress с самого первого релиза сохраняется возможность правки шаблонов на уровне исходного кода, для этого есть отдельный редактор с подсветкой синтаксиса (админ-панель, раздел «Инструменты», пункт «Редактор тем»).

Как будет выглядеть процедура изменения дизайна страниц магазина в визуальном редакторе Gutenberg:

Перейдите в админ-панель WordPress.
Найдите вкладку «Внешний вид» и во всплывающем меню выберите пункт «Редактор».
При желании перекомпонуйте меню (раздел настроек «Навигация) и измените стили (типографика, цвета, фон, тени, макет).
Основные изменения нужно вносить в разделе «Шаблоны» –> «WooCommerce».
К WooCommerce относятся шаблоны следующих страниц: каталог товаров, отдельный товар, подтверждение заказа, результаты поиска товаров, корзина, оформление заказа, «Скоро открытие», товары, подобранные по атрибуту, товары из категории, товары по тегу/метке, товары бренда.
Просто открываете шаблон в редакторе Gutenberg и меняете содержимое. Будьте осторожны с выводом системных элементов: меню, область уведомлений, футер и т.п. Новичкам лучше всего работать на уровне готовых блоков и паттернов, чтобы ничего не испортить.
- Паттерны для WooCommerce сосредоточены в меню «+» (добавить новый блок/элемент) – > «Паттерны» –> «WooCommerce».
- Элементы для компоновки блоков – «+» (добавить новый блок/элемент) – > «Блоки» –> прокручиваем ленту до раздела «WooCommerce».

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

Простые (физические товары) могут иметь следующие параметры:

Название.
Идентификатор и артикулы.
Описание (без задействования конструктора Gutenberg, может быть кратким и расширенным).
Медиафайлы (картинки, галереи, видео).
Категории, теги и бренды (категории могут быть любой вложенности, один товар может соотноситься с несколькими категориями, метками и брендами, бренды чем-то напоминают по механике систему категорий).
Цена (базовая и акционная). Акционную цену можно запланировать для смены по графику.
Товарные запасы (можно просто установить статус «в наличии», «предзаказ», «нет в наличии» или полноценно отслеживать остаток на складе).
Параметры для расчёта доставки (габариты, вес, класс доставки).
Связанные товары (для апсейла и кроссейла).
Настраиваемые атрибуты (размер, материал, цвет и прочее, значения опций можно задать списком для удобства публикации и сортировки).
Дополнительные опции (порядок сортировки, свои примечания к товару. Активация или отключение отзывов).
Видимость в магазине (в основном каталоге, в результатах поиска, в рекомендациях).

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

Вместо простых товаров можно создавать сгруппированные, вариативные и внешние (партнёрские).

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

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

Раньше массовый импорт был сильно ограничен, но под давлением пользователей разработчики открыли возможность загрузки больших CSV-файлов – до 256 МБ. Чтобы импортировать свои товары, перейдите в админ-панель, раздел «Инструменты», пункт «Импорт» и выберите «Товары WooCommerce (CSV)». Лимит по размеру можно увеличить в настройках PHP (в зависимости от типа хостинга).

Если предложенное решение не устраивает, можно приобрести плагин Product CSV Import Suite for WooCommerce (59 USD/год) от официальной команды Woo. Или поискать альтернативные решения от других разработчиков.

Оптимизация и продвижение магазина

Из коробки в WordPress и WooCommerce нет возможности ручного указания мета-тегов (тайтл, дескрипшн и т.п.), поэтому нужно обязательно установить профильный плагин. Самые распространённый варианты:

All In One SEO (AIOSEO) – можно использовать бесплатно, но только для редактирования базовых элементов, премиум-версия от 49 USD/год в зависимости от количества сайтов.
Yoast SEO (премиум-версия 99 USD/год) с дополнением Yoast WooCommerce SEO (+79 USD/год), либо с полным пакетом расширений (229 USD/год за все возможности, включая модуль для локального SEO). В бесплатной версии позволяет управлять только мета-тегами Title и Description (этого вполне может быть достаточно).

Базовая настройка WordPress подразумевает включение ЧПУ. Изменения вносятся в разделе «Настройка» – > «Постоянные ссылки».

Первое, что вам нужно сделать, настроить структуру постоянных ссылок. Например, это может быть одна из готовых схем или что-то произвольное, по аналогии с /%postname% (во всех постах в URL будет включаться название материала, в страницах товаров в том числе).

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

Если хотите, чтобы название категории включалось в ЧПУ, активируйте схему /shop/%product_cat%/ (в постоянных ссылках для товаров).

Полный URL в соответствии с нашими настройками будет выглядеть так:

/shop/категория_товара/название_товара (так как мы определили в самом начале /%postname%)

Чтобы в URL не использовались кириллические символы, нужно поставить один из плагинов транслитерации: Cyr-To-Lat, Cyr to Lat enhanced и т.п.

Не менее важно позаботиться о генерации файла robots.txt (его можно создать вручную через файловый менеджер хостинга) и xml-карт (опять же нужны профильные плагины или можно воспользоваться встроенными инструментами плагинов AIOSEO / Yoast SEO).

Уже в таком виде ваш интернет-магазин готов к полноценной работе.

Выводы

WooCommerce – самый популярный и функциональный плагин для создания интернет-магазинов в WordPress. Даже с бесплатными базовыми возможностями можно запустить комплексную площадку для онлайн-продаж и интегрировать её с нужными платёжными сервисами, а также с внешними инструментами (рассылки, CRM, системы аналитики).

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

Без качественного хостинга сайт будет работать со сбоями, что негативно будет сказываться на поисковой индексации. Поэтому отнеситесь к процессу подбора хостера максимально ответственно. Так как WooCommerce создаёт повышенную нагрузку на сервер, мы рекомендуем арендовать для интернет-магазинов как минимум VPS/VDS-хостинг.

Автор: Дмитрий Луценко

Создание интернет-магазина на WordPress + WooCommerce