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

Или как сэкономить время, деньги и нервные клетки на разработку интернет-магазина, сделав выбор в сторону WordPress с плагином WooCommerce.

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

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

Что нужно, чтобы создать интернет-магазин на WordPress?

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

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

Деньги

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

1. Хостинг + домен (обязательно)

Сколько: от 1500 руб. в год

Зачем:
Хостинг — это пространство на сервере, которое вы арендуете у хостинг-провайдера для того, чтобы ваш сайт отображался в интернете. Проще говоря, это включенный 24/7 компьютер, который показывает ваш сайт всем желающим на него зайти.

Домен — это буквенный адрес вашего сайта, например, seoforge.ru или лучшиймагазин.рф.

1. SSL-сертификат (обязательно)

Сколько: от 3000 руб. в год, но можно использовать бесплатный

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

1. Бюджет на наполнение (не обязательно)

Сколько: 50-500 руб. за товар

Зачем:
Если у ваших поставщиков есть готовые прайсы, которые можно импортировать (например, в формате XML), наполнить сайт товарами можно будет за считанные секунды. Но если вы создаете интернет-магазин в узкой нише, то вероятность того, что поставщик предоставит такие прайсы, снижается — наполнять магазин придется вручную.

Это легко сделать самостоятельно, но и довольно долго, особенно если ассортимент магазина переваливает хотя бы за 500 позиций. Проще в этом случае заплатить человеку, который наполнит сайт за вас. Цена зависит от сложности работы — например, нужно ли переносить характеристики, создавать уникальные описания, в каком виде подан исходный материал и так далее.

1. Бюджет на доработки, интеграции, платные модули

Сколько: индивидуально

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

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

Время

1. Настройка WordPress и WooCommerce

Сколько: от 1 дня до 1 недели

Зачем:
Сама установка занимает около часа, если не меньше — с оплатой хостинга, домена, настройкой SSL и прочим. Но понадобится настроить и другие вещи — например, подключить Google Analytics и Яндекс.Метрику, подтвердить сайт в инструментах для вебмастеров, настроить условия оплаты и доставки, подключить дополнительные модули и так далее. 

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

1. Наполнить сайт

Сколько: от 2 дней до 2 месяцев

Зачем:
Чтобы покупатели могли оставить заказ, на сайте должны быть товары. Кроме этого, вам понадобится как минимум наполнить главную страницу, «О нас», «Доставка и оплата», «Условия обмена и возврата», политику обработки персональных данных и так далее — на сайте должна размещаться вся информация, которая может понадобиться клиенту перед оформлением заказа.

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

1. Настроить тему (дизайн)

Сколько: от 1 дня до 1 недели

Зачем:
Как и в случае с самим WordPress и WooCommerce, установить красивую тему — дело считанных секунд. Но чтобы настроить ее под конкретные нужды, понадобится некоторое время — например, изменить цвет, включить или отключить отображение блоков, плашек и прочих декоративных элементов. 

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

1. Протестировать все функции

Сколько: 1-3 дня

Зачем:
Проверить, что все работает нормально — обязательный пункт перед запуском. Да, из коробки все и так будет работать верно, но лишняя проверка не помешает. Особенно если вы установили дополнительные модули и плагины — иногда они могут конфликтовать, и это приведет к непредсказуемым результатам.

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

Запускаем интернет-магазин!

С теорией покончено, переходим к самому интересному — как настроить и запустить интернет-магазин на WordPress.

Шаг 1. Купить домен + хостинг 

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

Например, для интернет-магазина на 50-100 позиций можно смело выбирать наименьший тариф на 1 Гб (обращайте внимание на то, сколько гигабайт в тарифе предлагает ваш хостинг-провайдер). С ассортиментом от 5000-10000 товаров, если у каждой позиции будет в среднем по 5 фотографий, даже со сжатием картинок без потерь понадобится не меньше 5 Гб.

Домен многие хостеры, в том числе и SpaceWeb, дают в подарок к хостингу, но вы можете приобрести его и самостоятельно. Например, в доменных зонах .ru и .рф адрес обойдется в среднем в 180-200 рублей в год.

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

Шаг 2. Установка SSL

Теперь, чтобы защитить данные пользователей, понадобится установить SSL-сертификат. Рассмотрим установку на примере бесплатного сертификата Let’s Encrypt. 

Почти все российские хостинг-провайдеры могут зарегистрировать его сами через панель управления. В панели хостинга SpaceWeb этот пункт находится в меню SSL ⟶ Установить ⟶ Let’s Encrypt.

Выберите домен, к которому хотите подключить сертификат. Если вы планируете создавать поддомены для сайта (например, интернет-магазин для всей России находится на адресе mysite.ru, а для Москвы — на msk.mysite.ru, в таком случае msk.mysite.ru — это поддомены), отметьте галочку Wildcard-сертификат, чтобы защитить домен вместе с поддоменами.

После того, как сертификационный центр одобрит выпуск SSL-сертификата, в панели управления вы увидите его статус, а сайт станет доступен по адресу https://mysite.ru.

Шаг 3. Установить WordPress

Многие российские веб-хостеры могут сделать это за вас — достаточно найти в панели управления пункт CMS и выбрать установку WordPress.

Хостинг проведет вас по этапам установки и сообщит данные для входа в панель управления WordPress. 

Можно установить WordPress и вручную — это очень просто. Зайдите на сайт WordPress и нажмите на кнопку «Получить WordPress» в верхнем правом углу.

После этого нажмите «Скачать WordPress».

В панели управления хостингом откройте файловый менеджер и нажмите кнопку «Загрузить», а затем найдите скачанный архив wordpress.zip и загрузите его на хостинг.

Когда загрузка закончится, останется только распаковать архив на хостинге:

Теперь WordPress будет доступен по адресу [ваш домен]/wordpress. Чтобы сделать доступ напрямую, по адресу вашего домена без подпапок, перейдите в папку wordpress и переместите все файлы из нее в папку public_html. Готово! WordPress установлен.

Теперь, чтобы сайт заработал, нужно создать базу данных. Найдите в панели своего хостинг-провайдера раздел базы данных и создайте БД MySQL. Запишите доступы к своей базе данных — они пригодятся на следующем этапе.

И последний шаг — откройте свой сайт в браузере, чтобы запустить установку WordPress.

Заполните информацию о базе данных — понадобится название БД, логин, пароль и сервер базы данных.

Назовите сайт и введите свой e-mail. Пароль лучше оставить сложным, чтобы злоумышленники не смогли взломать сайт. После этого нажмите на кнопку «Установить WordPress».

WordPress готов к работе.

Шаг 4. Установка WooCommerce 

В панели управления WordPress перейдите в меню Плагины ⟶ Добавить плагины и введите в поиск WooCommerce.

После того, как плагин установится, нажмите «Активировать».

Это запустит мастер установки WooCoomerce. Вам нужно будет ответить на несколько вопросов о магазине: адрес, сфера, какие товары вы собираетесь продавать, сколько их будет и хотите ли вы подключить плагины для продаж через Facebook, Google Merchant Center и email-рассылки. 

После ответа на все вопросы WooCommerce предложит установить подходящую тему для интернет-магазина.

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

Шаг 5. Установить темы для WooCommerce

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

Bono

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

Merchandiser

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

Simply Natural от Astra

Легкий, не перегруженный деталями шаблон подойдет для любых товаров, от фототехники и электроинструмента до детской одежды и игрушек. Призывы к действию понятные и контрастные, а дизайн сайта не отвлекает от рассматривания товаров — всё, что нужно, для высокой конверсии.

Home v16 от Sober

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

Как установить тему?

Перейдите в меню Внешний вид ⟶ Темы в панели управления WordPress и введите в поиск название темы, которую хотите установить — например, Astra. Если вы хотите посмотреть список всех подходящих тем для интернет-магазина, в поиск можно ввести WooCommerce. Наведите курсор на понравившуюся тему и нажмите «Установить», а затем «Активировать».

Если у вас уже есть скачанная тема, ее можно установить, нажав на кнопку «Загрузить тему» сверху. Найдите архив на компьютере и нажмите «Установить».

После установки WordPress предложит посмотреть или активировать тему. Нажмите «Активировать».

Шаг 6. Установить плагины

Есть несколько полезных плагинов, которые стоит установить перед запуском интернет-магазина — они помогут сделать сайт быстрее, безопаснее и функциональнее. 

Clearfy Pro

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

Yoast SEO

Мощный плагин для управления SEO помогает оптимизировать сайт для поисковых систем. С его помощью вы сразу увидите, как будет выглядеть ваш сайт в поисковой выдаче, получите подсказки по метатегам, сможете редактировать htaccess и robots.txt и многое другое. Недостающие настройки SEO в WordPress — все в этом плагине.

iThemes Security

Этот плагин отвечает за безопасность сайта — поможет защитить его от злоумышленников и предупредит, если что-то идет не так. iThemes умеет создавать бэкапы, блокировать пользователей и даже настраивать график доступа в административную панель. Рекомендуем установить сразу же — потом может быть поздно.

TinyPNG

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

Yml для Yandex Market

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

Примеры интернет-магазинов на WooCommerce

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

Резюме

Чтобы создать интернет-магазин на WordPress, понадобятся время и деньги: на первом этапе лучше всего заложить минимум 8000-10000 руб. при условии, что сайт вы наполните самостоятельно, и месяц-два на первичную настройку.

Порядок запуска: оплатите домен и хостинг, установите SSL-сертификат, установите WordPress, WooCommerce, тему для WooCommerce, недостающие плагины и наполняйте сайт.

Хорошие темы для WooCommerce: Bono, Merchandiser, Astra (Simply Natural), Sober (Home v16).

Полезные плагины для интернет-магазина: Clearfy, Yoast SEO, iThemes Security, TinyPNG, Yml для Yandex Market.

Желаем удачи с запуском!

10 331

Хотите открыть собственный интернет-магазин? Мы решили сделать полное руководство по созданию магазина с помощью WooCommerce WordPress.

Для открытия интернет-магазина вам необходимо:

Выбрать домен и хостинг

Домен — это адрес вашего будущего интернет-магазина.

А хостинг — это место на сервере, где располагается ваш сайт.

Советы по выбору домена и хостинга вы можете прочитать в нашей статье «Как сделать сайт на WordPress».

Установить WordPress

Посмотрите наше видео «Как установить WordPress».

После того, как вы установили WordPress, его нужно правильно настроить.

На сайте есть отдельная статья «Как настроить WordPress».

Подключить SSL сертификат

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

UPD: А с 1 июля 2018 наличие HTTPS в адресе сайта обязательно. Иначе ваш сайт будет помечаться как ОПАСНЫЙ

Если у сайта нет SSL сертификата (т.е. адрес сайта начинается с http://), Google также понижает его в выдаче.

Установить WooCommerce

Существуют 2 популярные платформы eCommerce:

1. Shopify
2. WooCommerce.

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

Shopify делает все за вас.

Но у платформы есть значительные минусы:

• высокая стоимость
• невозможность переноса сайта с этой платформы.

Вот, почему мы советуем использовать WooCommerce.

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

Как и все плагины WordPress, его сначала нужно установить.

У нас есть отдельная статья с 3-мя способами установки плагина.

Вы также можете посмотреть видео:)

А вот первый способ. Самый простой.

Перейдите в панели администратора в Плагины — Добавить новый.

Просто нажмите «Установить», а потом — «Активировать».

На экране появится новое окно запуска настройки WooCommerce.

Нажмите «Поехали!».

Интернет-магазин — это особый вид сайта. И ему нужны определенные страницы для правильной работы.

Первый шаг мастера WooCommerce заключается в создании этих страниц: (они будут доступны в панели администратора WooCommerce — Настройки)

«Основные» — все о вашем магазине (адрес, налоги, валюта и пр.)

«Товары» — это страница, где будут отображаться ваши товары.

«Доставка» — способы доставки.

«Платежи» — здесь все про способы оплаты.

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

Все, что вам нужно сделать на этом этапе мастера WooCommerce, нажать кнопку «Продолжить».

WooCommerce создаст эти страницы для вас.

Теперь перейдем к мастеру WooCommerce.

Настройка магазина

Здесь вы должны настроить местоположение магазина, вид валюты.

Нажмите «Продолжить».

Способы оплаты (рекомендуется PayPal)

WooCommerce WordPress предлагает несколько готовых вариантов оплаты:

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

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

После всех настроек нажмите «Продолжить».

Способы доставки

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

Нажмите «Продолжить».

В следующем пункте вам предложат установить плагин JetPack и получить дополнительный функционал:

Вы можете пропустить этот шаг.

Далее на экране появится окно подтверждения — настройка WooCommerce завершена.

Как добавить продукты

Чтобы добавить первый товар в ваш магазин, перейдите в панель администратора WooCommerce — Товары — Добавить новый.

Перед вами появится классический экран редактирования WordPress.

1. Наименование товара

2. Основное описание продукта

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

В принципе, все, что вы сочтете нужным.

3. Главный раздел данных продукта

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

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

• Основные. Здесь вы можете установить цены (базовая и цена распродажи).
• Запасы. WooCommerce позволяет задавать артикул, указывать наличие и управлять запасами.
• Доставка. Указание веса, размеров и стоимость доставки.
• Сопутствующие товары. Апсейл — товар, который вы можете порекомендовать покупателю. Кроссел — товар, который вы рекламируете уже в корзине, основываясь на добавленном.
• Атрибуты. Здесь можно задать атрибуты товара. Например, если вы продаете рубашки, здесь можно установить альтернативные цвета.
• Дополнительно. Дополнительные настройки: примечание к покупке (будет отправлено покупателю после завершения покупки), меню заказа (можно упорядочить позиции в заказе), отзывы.

4. Краткое описание

Это текст, который отображается на странице товара под названием.

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

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

6. Метки товара

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

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

Основная фотография вашего товара.

8. Галерея продуктов

Дополнительные фото товара, чтобы продемонстрировать какие-либо детали.

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

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

И ваш первый товар будет добавлен на сайт.

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

Выбор темы для интернет-магазина

По умолчанию WooCommerce работает с любой темой WordPress.

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

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

Их можно найти на биржах тем:

• Themeforest
• Elegant Themes
• TemplateMonster

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

Простой дизайн

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

Если любое из действий вызовет вопросы, вряд ли он что-то купит.

Центральный блок главной страницы

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

Для этого вы можете использовать слайдер с фото ваших товаров или, например, видео.

Наличие сайдбара

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

Адаптивный дизайн

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

Если это не так, вы потеряете клиента.

Хорошая навигация

Сделайте удобную навигацию по разделам магазина. Так покупатель без труда найдет интересующий товар.

Еще вам может быть полезна статья «Как выбрать тему WordPress».

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

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

Плагины – это приложения, которые расширяют функционал.

На сайте вы найдете полезные статьи:

«Зачем нужны плагины WordPress»

«Обязательные плагины на сайте WordPress»

Надеюсь, вам понравилась статья и теперь вы сами сможете создать магазин, используя WooCommerce WordPress.

Если у вас есть вопросы, пожалуйста, пишите в комментариях.

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

Первые шаги: выбор хостинга, установка 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» можно выбрать и установить дочернюю тему.

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

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

• Плагин 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 поможет вам сосредоточиться на расширении ассортимента товара и увеличении продаж. А если появятся вопросы по настройкам сайта, пишите в комментариях.