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

Создание интернет-магазина на WordPress c плагином WooCommerce: пошаговая инструкция


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

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

Шаг 1. Выбор темы для WooCommerce

Прежде чем устанавливать плагин, мы рекомендуем выбрать и установить тему (шаблон), который поддерживает WooCommerce. Выбрать можно как платный премиум-шаблон на специализированных ресурсах, так и бесплатный (как правило, это урезанная версия платного шаблона). Бесплатную тему можно найти через Яндекс или в самом WordPress, воспользовавшись кнопкой “Добавить новую” в Внешний вид => Темы.

На странице “Добавить темы” необходимо применить фильтр характеристик, в котором можно выбрать темы для магазина.



Перед вами появится отсортированный список тем для интернет-магазинов, но не все они подходят для WooCommerce. Чтобы узнать подходит ли нам выбранная тема, нажмите на кнопку “Посмотреть”. Откроется описание, в котором надо найти “woocommerce”. Если поддержка плагина присутствует, значит, можете смело устанавливать тему.

Давайте для примера создадим тестовый магазин одежды с бесплатной темой Simple Store от автора themes4wp. У темы есть демо-сайт, на котором можно посмотреть, как будет выглядеть наш интернет-магазин.

Шаг 2. Установка плагина WooComerce

После установки и активации темы вверху появился блок с рекомендациями темы по установке плагинов. Именно поэтому мы порекомендовали сначала установить тему. Теперь устанавливаем все плагины за один раз, нажав по ссылке “Begin installing plugins”.



Отмечаем все плагины, в списке “Действия” выбираем “Install” и нажимаем кнопку “Применить”.



После некоторого ожидания появится список установленных плагинов. Далее необходимо их активировать. Для этого внизу переходим по ссылке “Return to Required Plugin”. Отобразится аналогичная страница, только теперь вместо “Install” в списке выбираем “Activate” и нажимаем кнопку “Применить”.

Теперь все необходимые плагины для нашей темы установлены, включая основной плагин товаров WooCommerce. Только, как правило, Woocommerce устанавливается англоязычный, потому что темы в основном на английском языке. Чтобы перевести наш интернет-магазин на Wordpress на русский, необходимо перейти в Консоль => Обновления и внизу нажать на кнопку “Обновить переводы”. Все плагины, которые имеют официальную русификацию, будут переведены.

Шаг 3. Настройка WooCommerce

После установки и активации WooCommerce вверху появится сообщение с двумя кнопками: “Запустить помощника установки” и “Пропустить установку”. При нажатии на первую кнопку откроется инструмент, который шаг за шагом поможет настроить плагин.



Для более точной настройки лучше воспользоваться ручным режимом. Поэтому нажимаем кнопку “Пропустить установку” и переходим на страницу WooCommerce => Состояние системы, чтобы проверить соответствие требований плагина и хостинга, а также необходимые настройки самого плагина. Обратите внимание на те элементы, которые выделены красным цветом. В нашем случае отсутствуют необходимые страницы.



Для добавления страниц магазина переходим в раздел “Страницы” => “Добавить новую” и добавляем недостающие страницы с названиями “Магазин”, “Корзина”, “Оформление заказа” и “Мой аккаунт”. УРЛ для данных страниц может быть любой или можно использовать англоязычный перевод (shop, cart, checkout и account соответственно).



После того, как все страницы созданы, необходимо назначить их в настройках WooCommerce. Для этого переходим в “WooCommerce” => “Настройки” на вкладку “Товары” => “Отображение”. Здесь в пункте “Страница магазина” выбираем нашу созданную страницу “Магазин”. Сохраняем изменения.



Аналогично проделываем для остальных страниц. Страницы “Корзина” и “Оформление заказа” проставляем на вкладке “Платежи” => “Параметры оформления заказа” в пунктах “Страница корзины” и “Страница оформления заказа” соответственно. Страницу “Мой аккаунт” проставляем на вкладке “Аккаунты” в пункт “Страница Мой аккаунт”.

После того, как все страницы указаны, переходим в “Состояние системы” и видим, что для наших трех страниц не указаны шорткоды Woocommerce. Шорткоды — это функции PHP, которые можно задействовать внутри содержимого поста, используя условные обозначения, заключенные в скобки.



Давайте их укажем. Для этого перейдем на каждую нашу страницу и вставим соответствующий странице шорткод с квадратными скобками.



Далее нам нужно настроить локацию магазина и валюту. Переходим в “WooCommerce” => “Настройки” и на первой вкладке указываем следующие параметры:

 - Базовое местоположение. Указываем, в какой стране находится онлайн-магазин.

 - Торговая точка. Этот параметр позволит ограничить список стран, в которых вы собираетесь продавать. Выберите “Продавать в определенные страны” и ниже укажите, в какие.

 - Локации доставки. Оставляем без изменений.

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

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

 - Валюта и Позиция валюты. Выбираем необходимую валюту и позицию символа валюты.

 - Тысячный разделитель, Десятичный разделитель и Количество знаков десятичной дроби. Указываем необходимые символы для разделителей и сколько знаков будет “после запятой”.

Не забудьте сохранить изменения.

Настройка Woocommerce - товары

1. Основные.

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

2. Отображение.

 - Страница магазина. Её мы указали ранее.

 - На странице магазина и На странице категории. Здесь можно выбрать, что будет отображаться на странице магазина и категории.

 - Исходная сортировка товаров. Можно выбрать, как будут сортироваться товары по умолчанию.

 - Добавить в поведение корзины. Здесь лучше оставить все, как есть.

 - Изображения товара. Можно указать размеры изображений по умолчанию, которые будут использоваться в списке товаров. Также можно включить Lightbox для изображений товара, чтобы при нажатии они увеличивались.

3. Запасы.

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

4. Скачиваемые товары.

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

Настройка Woocommerce - доставка

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

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


Можно ограничить доставку только по определенным индексам, кликнув по ссылке “Ограничение определёнными почтовыми индексами”. Таким образом, можно ограничить доставку в пределах определенного города или области.

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

В “Варианты доставки” можно настроить расчеты доставки и назначение доставки. “Классы доставки” не трогаем.

Настройка Woocommerce - платежи

Как и доставка, настройки платежей “из коробки” довольно скудные.

1. Параметры оформления заказа

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

 - Процесс оформления заказа. Можно включить возможность делать заказы незарегистрированным пользователям.

 - Страницы оформления заказа. Мы их указали ранее, кроме одной - “Условия и соглашения”. Если вы хотите, чтобы клиент перед оплатой принимал ваши условия, то необходимо создать страницу, написать на ней условия и указать её здесь.

 - Эндпоинты оформления заказа. Оставляем без изменений.

2. Безналичный перевод. Здесь можно включить безналичный банковский перевод, настроить заголовок, описание и инструкции. В “Детали учетной записи” необходимо указать реквизиты вашего расчетного счета.

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

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

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

Вкладка “Аккаунты”

 - Страница Мой аккаунт. Ранее мы указали эту страницу.

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

 - Создание аккаунта. Здесь можно включить или отключить автоматическое создание аккаунта.

 - Эндпоинты Моего аккаунта. Оставляем без изменений.

Вкладка “Email`ы”

Тут можно настроить email-уведомления, отправляемые из WooCommerce клиентам и администратору. Чтобы настроить уведомление, кликните по самому уведомлению или по шестеренке справа.

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

Вкладка “API”

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

Шаг 4. Добавление товаров в Woocommerce

Чтобы добавить новый товар, необходимо перейти в “Товары” => “Добавить товар”. Появится страница записи товара. Указываем название товара, полное описание и категорию. На примере мужских очков покажем, как добавлять самый простой товар без размера и цвета.



Далее нам необходимо установить основное изображение товара и, если фотографий несколько, загрузить галерею товара.



Далее мы указываем тип товара. Для начала разберемся с типом “Простой товар”.

 - Указываем базовую цену. Если по товару есть распродажа, то можно указать цену распродажи. В таком случае клиент увидит перечеркнутую базовую цену и жирную цену распродажи, а также стикер “Распродажа”. Распродажу можно запланировать, указав начальную и конечную дату.



 - На вкладке “Запасы” можно указать артикул товара. Если в настройках вы включили управление запасами, то на этой вкладке также можно указать количество товара на складе и возможность предзаказов.

 - На вкладке “Доставка” указать вес и габариты товара.

 - На вкладке “Сопутствующие” можно добавить товары для апселла и кросселла.

 - Ниже заполняем краткое описание товара. Как правило, оно отображается вверху карточки товара.


Вот такая карточка товара у нас получилась.

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

Для начала нам необходимо прописать атрибуты Woocommerce. Переходим в “Товары” => “Атрибуты” и заполняем поля:

 - Имя. Имя атрибута, которое также будет отображаться во фронтэнде, например, размер, цвет.

 - Слаг. Уникальное имя/ссылка на латинице, например, size, color.

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

 - Тип. Определяет способ выбора атрибутов. Лучше оставить “Выбор” и предварительно правильно настроить.

 - Порядок сортировки по умолчанию. Оставляем, как есть.

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



Теперь переходим к добавлению товара. Как ранее описывалось, заполняем название товара, описание, категорию, загружаем фотографии. Теперь в “Данные товара” выбираем “Вариативный товар”. Переходим сразу на вкладку “Атрибуты”, выбираем атрибут “Размер” и нажимаем кнопку “Добавить“.



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



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



Далее можем выбрать значение формы по умолчанию или оставить его без изменений.

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


Следующий вариант товара - майка с разными размерами и цветами. На черной майке есть принт, из-за чего цена будет выше. Атрибут “Цвет” и значения добавляем выше указанным способом в “Товары” => “Атрибут”.

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

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

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



Вот и всё! Смотрим, что у нас получилось.



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

И это все?

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

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

На этом все! Успехов в создании интернет-магазина!

Еще по теме:

AddThis Sharing Buttons
Готовый интернет-магазин от ShopConstructor
с расширенными опциями и функциями
Разовая оплата
14399 руб

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

Вот так будет работать панель управления - ссылка

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

Выбирайте любой дизайн из имеющихся шаблонов - ссылка

Доменное имя в зоне ru/рф бесплатно

Хостинг на 3 месяца, затем оплата 269 руб/месяц

Гарантия на работу интернет-магазина - год

Предоплата всего 50%, остальные 50% - после создания интернет-магазина

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