Блог

Интернет-магазин на WordPress и WooCommerce: как это работает

WordPress + WooCommerce online store
Алексей Ерёменко
На WordPress с 2011

Ищете решение для интернет-магазина? Ответственная задача! На рынке веб-разработки регулярно появляются новые сервисы для онлайн-торговли. Но в этой статье мы поговорим о вечном — интернет-магазине на WordPress в связке с WooСommerce.

Я начал работать с WordPress в 2011 году, и тогда этот движок рассматривался исключительно как инструмент для создания блогов. С тех пор старик WordPress стал универсальной платформой для разработки. С командой мы сделали более тысячи сайтов на нём, около трети — интернет-магазины на WooСommerce. О них и поговорим.

WordPress для интернет-магазина

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

Плагин WooCommerce — это дополнение к WordPress, которое помогает быстро создать интернет-магазин. Содержит все нужные для магазина элементы: карточки товаров, формы заказа, кабинет и другие. Плагин появился в 2014 году, и к 2019-му из каталога WordPress его скачали более 5 млн раз. В чём причины такой популярности, кроме того, что он бесплатный?

5 млн скачиваний
WooCommerce

Преимущества плагина WooCommerce:

  1. Гибкий и мощный — уже после установки превращает сайт в интернет-магазин.
  2. Совместим со множеством тем оформления — можно подобрать дизайн на свой вкус.
  3. Совместим со множеством других плагинов — не придётся переплачивать за разработку, чтобы «прокачать» сайт. Есть платные и бесплатные дополнения для безопасности, SEO, бэкапов и др.

А ещё не забывайте про плюсы всех сайтов на WordPress — лёгкое управление и хорошее SEO. После запуска проекта вы без проблем создадите новые категории, добавите товары, фото и описание, а также оптимизируете текст под поисковые системы.

Интернет-магазины на WooCommerce

Porter & York
Cupcake Studio
Dineamic
Buddhi Baby
EcoKitty
Picky Bars
Apogee CE
Veer
Mike’s Organic Delivery
Nordic Ware Australia
Chuckling Goat
Minipop

Насколько большой сайт можно запустить на WooCommerce

Я сталкивался с мнением, что сайт на WooCommerce «не потянет» много товаров — будет работать медленно и тормозить. Но «грузоподъёмность» интернет-магазина зависит не только от движка, но также от хостинга, функциональности и посещаемости.

Хостинг. Слабый хостинг съест скорость самого лёгкого и оптимизированного сайта. Базовые требования к хостингу:
PHP версии 7.3 и выше,
MySQL версии 5.6 и выше или MariaDB версии 10.1 и выше,
Протокол HTTPS.

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

Функциональность. На скорость загрузки сайта влияют количество категорий, товаров и фильтров. Чем их больше, тем медленнее работает магазин. Так что если планируете воздвигнуть новый Яндекс.Маркет или Amazon, откажитесь от WordPress. Если таких планов нет, то возможностей движка хватит.

«Если задумали новый Яндекс.Маркет, откажитесь от WordPress»

WordPress вывозит от 10 000 товаров и успешно вытягивает интеграцию с 1С. Но не забывайте, что многое зависит от хостинга.

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

Как создать интернет-магазин на WordPress и WooCommerce

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

Для создания интернет-магазина с помощью плагина WooCommerce понадобится:

  1. Подготовить тему.
  2. Установить тему на хостинг.
  3. Настроить карточку товара.
  4. Загрузить в интернет-магазин товары.
  5. Настроить разделы доставки и оплаты.

Заказать дизайн, купить тему или взять бесплатную

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

  1. Научиться.
  2. Нанять специалиста или команду, они всё сделают за вас.
  3. Купить готовую тему, которая максимально подойдёт для вашего магазина.

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

Готовые темы ищите в магазинах Templatemonster и ThemeForest. Обратите внимание на конструктор YOOtheme.

Если решите скачать бесплатную или ломаную тему, проверяйте благонадёжность источника. Часто злоумышленники добавляют в них «левые» ссылки и оставляют дыры в безопасности. Потом вирусы взламывают сайты на таких темах, поисковики понижают рейтинг, хостинг блокирует. Лучше не рисковать и скачивать бесплатные темы и плагины из официального каталога WordPress.

Ломанные темы — одна из причин заражения сайтов вредоносным кодом

Не все темы одинаково просты: чтобы их установить, настроить и поправить могут понадобиться специальные навыки. Так что не спешите убивать разработчиков, если платная тема не установилась. Для её настройки придётся немного вникнуть в дебри WordPress или обратиться к специалистам. Помощь фрилансеров стоит от 500 до 3 тыс. рублей.

Как выбрать хорошую тему

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

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

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

Шаг 1. Подготовка

Выбрав тему, установите её на хостинг. Подобрать место под сайт поможет статья Виртуальный, выделенный или облачный: выбираем хостинг. Установить купленную тему WordPress на хостинг легко с Vepp.

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

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

  1. Что будет в карточке товара? Название, описание, стоимость, цвет, материал, размер и т. д. Сформируйте список, он пригодится позже.
  2. Нужна ли фильтрация по какому-либо из этих атрибутов?
  3. Как товары будут попадать на сайт: вы будете добавлять их вручную, загружать из прайс-листа или хотите связать сайт с 1С и другой системой?

Шаг 2. Настройка карточки товара и фильтрации

Карточка товара — самое важное, что есть в интернет-магазине. Её надо настроить до загрузки продукции. Иначе товары встанут не так, как нужно, придётся всё сносить, перенастраивать карточку и загружать товары заново.

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

Карточка товара в магазине, созданном на WooCommerceКарточка товара в магазине, созданном на WooCommerce. Есть название, фото, стоимость и поле для выбора количества

Создайте атрибуты товаров. Для этого перейдите в раздел Товары — пункт Атрибуты. На стартовой странице создайте атрибут, например, цвет, а потом установите его параметры.

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

Обычно фильтры есть в теме. Если нет, добавьте их плагинами. Обратите внимание на WOOFPremmerce WooCommerceProduct Filter и YITH WooCommerce Ajax Product Filter.

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

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

Вручную
Чтобы загрузить товары вручную, подготовьтесь. Добавьте категории и список меток. Подготовьте фотографии, чтобы они подходили под размер фото вашей темы. Если нужно, измените их в разделе «Настройки» — «Медиафайлы», и смело приступайте к наполнению.

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

Стоимость товара может меняться в зависимости от атрибута, например, синий шарф стоит 100 рублей, а зелёный 200 рублей. Чтобы настроить это, надо сделать товар вариативным и использовать атрибуты «Для вариаций». После добавления атрибутов в разделе «Вариации» вам необходимо добавить все вариации и настроить индивидуальную стоимость.

Через Excel
Добавить товары на сайт через прайс-лист в Excel помогут плагины. Настоящий монстр импорта — плагин WP All Import, но он стоит от $99. Бесплатные альтернативы ищите в каталоге WordPress. Перед импортом изучите документацию плагина: возможно, придётся привести xml/csv файл к пригодному виду.

WordPress и WooCommerce можно также интегрировать с 1С или «Мой Склад», стоимость плагинов для интеграции стоит от $35 до $100.

Шаг 4. Настройка доставки и оплаты

Если собираетесь принимать оплату на сайте, не забудьте настроить разделы «Доставка» и «Оплата»: добавить зоны доставки, виды доставки, виды оплаты.

Работать с полученными заказами вы сможете в разделе WooCommerce — «Заказы».

Личный кабинет пользователя будет доступен по ссылке /my-account. Её можно опубликовать в шапке сайта, рядом или вместо корзины.

Топ полезных плагинов для WooCommerce

Для приёма заказов и оплаты
Saphali Woocommerce Russian — полезное дополнение к Woocommerce, особенно незаменимое, если надо быстро настроить форму для оформления заказа.

Bootstrap one page woocommerce checkout позволяет оформлять покупку на одной страницы.

Яндекс.Касса 2.0 для Woocommerce

Робокасса для WooCommerce

Для красоты и удобства
WC Variations Radio Buttons превращает выпадающие списки атрибутов в radiobuttons (кружочки), что зачастую удобнее и приятнее в использовании.

WPB WooCommerce Product slider — неплохой слайдер товаров, который можно вывести, например, на главной странице.

WooCommerce Cart Count Shortcode — альтернатива стандартной корзине. Покажет иконку корзины, количество товаров в ней и окошко с содержимым.

Premmerce WooCommerce Product Search — интерактивный поиск по товарам.

Для SEO и ускорения
Yoast SEO позволяет добавлять на страницы сайта метаданные, необходимые для поисковых систем. Генерирует карту сайта, подсказывает ошибки в SEO.

PageSpeed Ninja помогает оптимизировать и ускорить сайт.

Clearfy Pro — ещё один борец за скорость сайта. Не конфликтует с PageSpeed Ninja.

Подписывайтесь на блог Vepp!

Статьи профессионалов о разработке и управлении сайтами. Почитайте вот:

 

Подписаться!

Алексей Ерёменко
На WordPress с 2011

Мы знаем тысячу способов установить WordPress легко, и только один — супер-сложно. О нём и поговорим.

Вика Федосеенко

Редактор

История маркетолога, который хотел налить трафика в Байкал, но чуть не лишился работы.

Джон Армстронг

Маркетолог

Свой магазин — это не всегда продажи, но всегда проблемы. Почему об этом все умалчивают?

Томас Смит

Веб-девелопер