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

Наше подробное руководство научит вас работать с этой платформой и поможет создать интернет-магазин.

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

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

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

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

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

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

Еще один нюанс: в Рунете WooCommerce тоже безусловный лидер. Здесь ему наступают на пятки OpenCart и Bigl.

Стоит или нет использовать 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. Если внешний вид и функциональность представленных на витрине торговых площадок вас устраивает, приступайте к работе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Конечные точки или эндпоинты — служебные страницы, например, список заказов, детали аккаунта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Авторизуйтесь в личном кабинете ЮKassa. Укажите способы оплаты. При необходимости измените другие настройки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дефолтный шаблон для магазинов на 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.

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

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

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

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

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

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

Платные и бесплатные темы и плагины для WooCommerce можно найти на сайте проекта в разделах Extensions Store и Theme Store.

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

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

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

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

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

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

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

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

Как создать интернет-магазин с помощью WordPress и WooCommerce – подробный гайд