Найти в Дзене
Александр Дащинский

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

Оглавление

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

Если вы решили создать онлайн-проект для продажи товаров или услуг, то статья будет для вас полезной. Подробно разберем, как шаг за шагом создать свой собственный интернет-магазин на WordPress.

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

Краткий экскурс по созданию интернет-магазина

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

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

Хостинг компании:

Timeweb.com (Рекомендую) Россия и СНГ

HosterBy (Рекомендую) (Беларусь)

  • Установка WP на хостинг: ручная или автоматическая.
  • Создание карты веб-ресурса. Здесь нам пригодится плагин Google XML сайтмэпс, а также файл robots.txt.
  • Установка плагина для SEO.
  • Размещение основы для будущего интернет-магазина – плагина WooCommerce и его русификатора при необходимости.
  • Загрузка шаблона магазина.
  • Завершающая настройка: адаптация параметров под себя, добавление-удаление модулей, выбор валюты, условий оплаты, доставки и др.
  • Создание и внедрение контента. После этого можно будет запускать интернет-магазин.

Книга «Как сделать сайт и начать зарабатывать»

Если ты новичок в создании сайтов, то рекомендую начать изучение с книги — «Как сделать сайт и начать зарабатывать».

Связка CMS и WooCommerce

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

Почему именно WooCommerce?

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

Почему выбирают этот плагин? Конечно, есть и другие варианты, к примеру, eCommerce, eShop, Cart66 Lite и т.д. Но популярным и востребованным все равно остается WooCommerce. Объясняется это преимуществами плагина:

  • Простые настройки и удобное управление как самого плагина, так и WordPress. Для начинающего специалиста без опыта в веб-разработке – это отличный вариант.
  • Инструмент абсолютно бесплатный, вне зависимости от объема товаров, выручки магазина и других параметров. А вот за некоторые альтернативные модули нужно платить, например, Magento Enterprise Edition.
  • В интеграции с плагином платформа работает надежно и без сбоев.
  • Для вордпресс создано множество дополнительных бесплатных плагинов.
  • Функциональность просто впечатляет. WooCommerce открывает возможности, рассчитанные на создание интернет-магазина. А функции можно еще больше адаптировать и расширить с помощью плагинов.
  • Система учета заказов уже встроена в WooCommerce.
  • Контроль остатков товаров и бухгалтерии трудностей с таким плагинов не вызывает.
  • Функционал постоянно совершенствуется, поэтому не забывайте про обновления.

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

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

С чего начать: хостинг, CMS, дизайн-шаблон

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

Для связки WP и WooCommerce неплохо подходит хостинг Linux, поддерживающий PHP и MySQL. Обратите внимание, чтобы на тарифном пане предусматривался доступ в FTP и панели управления сервером. Удобно еще и то, что многие хостеры предоставляют SSL-сертификат бесплатно.

Далее нам нужно установить CMS (ручная установка, инструкция у меня в блоге). Если мы выбираем автоматический вариант установки CMS (инструкция у меня в блоге), то следует выполнить сначала следующие действия:

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

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

Установка и настройка WooCommerce

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

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

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

Добавление товара в интернет-магазин

С базовыми настройками мы разобрались, теперь переходим к добавлению товаров. В связке WooCommerce и WordPress это будут категории. Для создания новой категории переходим в меню, далее «Товары», «Категории». Здесь вводим название, миниатюру и краткое описание, если нужно – еще и ярлык. Также нужно будет указать родительскую рубрику, если это дочерняя категория. И выбираем «Тип отображения».

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

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

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

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

Меню и главная страница: как настроить

Начинаем с главной страницы. Здесь у нас есть два варианта. Если у нас уже есть сайт, то на одной из внутренних страниц можно разместить витрину. Тогда роль главной перейдет странице записей или статистики.

Если сайт выступает в роли исключительно интернет-магазина, то главной страницей логично будет сделать витрину. Заходим в админку, выбираем «Настойки», «Чтение» и выбираем в меню вариант главной страницы. Можно отметить в качестве главной созданную автоматически Saple Page. При необходимости ее можно будет потом отредактировать и сделать страницей блога.

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

Эндпоинты, или конечные точки, представляют собой страницы служебного типа. К примеру, это могут быть детали заказа, список заказов и др. Если вам это будет необходимо, можно создать и дополнительное меню во вкладке «Управление областями», «Использовать новое меню».

Расширенные настройки WooCommerce

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

Особенности настройки платежей

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

Например, выбираем Wallet One. Для подключения сервиса придется зарегистрироваться в системе, предоставить провайдеру запрашиваемые данные и установить плагин «Единой кассы» для WP. После этого можно будет зайти в меню WooCommerce и в настройках установить способы оплаты для пользователей.

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

Есть и другие варианты платежных сервисов, например, PayOnline, «Ю.Касса». Для того, чтобы получать уведомления о прошедших платежах, в настройках нужно указать email, «включить» REST API в разделе API.

Настройка налогов: как это сделать

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

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

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

После сохранения настроек, как цена отображается на сайте, все ли данные корректны.

Параметры доставки: как настроить

Чтобы настроить доставку, снова заходим в меню плагина в раздел «Доставка» и нажимаем «Добавить зону доставки». Здесь выбираем нужный нам регион и методы. WooCommerce предложит «Самовывоз», «Единую ставку» и «Бесплатную доставку». Эти параметры можно изменить, нажав «Изменить» возле соответствующего поля. При этом менять можно статус налога, наименование способа доставки, стоимость оказываемой услуги.

Функциональность и технические характеристики интернет-магазина на WooCommerce

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

Оптимизация интернет-магазина

Сайты, созданные на WP, уже оптимизированы под SEOпо умолчанию. Но пригодится и дополнительный инструмент All in One SEO Pack, который позволяет подгонять настройки конкретно под поисковые системы.

Итак, нам нужно активизировать надстройку All in One SEO Pack для WooCommerce для контроля метаданных. Данный блок сразу попадает на страницу продукта. Рекомендуется здесь оставлять пустым поле Keywords, так как при ранжировании поисковики его не учитывают, а ваша работа, соответственно, окажется бесполезной.

Для нас важнее URL. Уже в базовых настройках ЧПУ мы включили. Но в WooCommerce в ссылках на товар появится префикс product, что делает URL длинным. Чтобы избавиться от этого, можно подключить плагин Perfect SEO URL, только он будет платным. Зато появляется возможность сделать ссылки идеальными.

Есть и другой вариант, когда не хочется тратить деньги. Можно воспользоваться инструментом Permalink Manager Lite. В «Инструментах» там нужно найти вкладку Permastructures и выбрать структуру URL с «Товарах». Здесь вводим %product_cat%, чтобы в ссылке было лишь категория и наименование товара. После добавления товара таким образом, не забудьте проверить, правильно ли отображается URL. Но есть один нюанс – к ранее размещенным товарам эта схема автоматически не применяется, придется все делать вручную. Через настройки плагина во вкладке URL Editor.

Создание АМР для интернет-магазина

Конверсия пользователей с мобильных устройств зависит от простоты пользования сайтом на небольших экранах и скорости загрузки страниц. Поэтому Гугл рекомендует для интернет-магазинов АМР. Чтобы воспользоваться этой возможностью, нам понадобится плагин АМР, а также надстройки АМР WooCommerce и АМР for WP. Тогда на веб-ресурсе будут ускоренные версии страниц записей, статистики и товаров.

Что касается надстроек, они отобразятся в меню админки CMS, где вы можете настраивать параметры под свои потребности.

Настойка протокола и микроразметки

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

Теперь о микроразметке. Для страниц товаров в WooCommerce поддерживается Product Schema.org. Но часто при ее реализации в теме появляются ошибки, из-за чего расширенные сниппеты в выдаче поисковиков не показываются. В результате CTR снижается и трафик интернет-магазина падает.

Решить проблему поможет модуль Schema WooCommerce Plugin by Schema App. Плагин добавит нужные данные в разметку и исправит имеющиеся ошибки. При желании можете изучить бесплатный плагин All In One Schema.org Rich Snippets, который решает ту же проблему, но придется заглянуть в код.

Что еще может WooCommerce?

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

В разделе «Заголовок» вы можете загрузить изображение и раскрасить ссылку и заголовок, в разделе «Поиска витрины» можете добавить дополнительные функции к базовой теме WooCommerce. Также можете выбрать дополнительные или бесплатные дополнения. Например, бесплатная услуга включает в себя кнопку атташе («Купить») и дополнительный значок корзины. Это можно сделать бесплатно, чтобы отобразить прикрепленную кнопку и значок корзины, а из меню «Внешний вид» на Stockont можно выбрать и установить дочернюю тему.

Платные темы и плагины для WoolCommerce можно найти на сайте проекта в разделах Extensions Store и Theme Store. Вот несколько полезных решений:

  • Плагин Facebook для WooCommerce поможет вам управлять рекламой в популярной социальной сети. Также будет легко сделать покупки на странице бренда в Facebook с помощью надстройки.
  • Плагин WooCommerce Multilingual поможет сделать ваш сайт многоязычным.
  • Если в выбранной теме нет встроенного слайдера, вам поможет плагин Wood Commerce Product Slider.
  • Если объект не поддерживает масштабирование фотографий при щелчке мышью по изображению, попробуйте YITH WooCommerce Zoom Magnifier.
  • Плагин YITH WooCommerce Wishlist добавляет на сайт функцию «Список желаний».
  • С SUPER вы можете добавить возможность регистрации через учетные записи социальных сетей.
  • Платный плагин WooCommerce 360o Image позволяет клиентам демонстрировать 3D-фотографии товаров.
  • С помощью WooCommerce Recover Abandoned Cart можно вернуть клиентов, которые добавили товары в корзину, но не разместили заказ, на сайт. Платите за подключение.
  • Платное решение WooCommerce Quick Export Plugin позволит немедленно экспортировать данные и транзакции в файл. Если вы переносите свои ресурсы на новый хостинг, это желательно.

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

Идеальная связка WordPress и WooCommerce

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

Магазин на вордпресс легко управлять, настраивать его тоже не сложно. Ресурс можно оптимизировать под SEO, адаптировать к мобильному трафику. Данная CMS открывает разработчику практически неограниченные возможности по функциональности и кастомизации интернет-магазина. А вы сможете посвятить время расширению ассортимента и увеличению продаж.

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

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

Бесплатный курс по созданию сайта, блога, интернет-магазина, клуба, форума и более 50 видеоурокв на YouTube, можете найти у меня в блоге — Самостоятельное создание сайта.
Мой Youtube канал — здесь вы найдете видеоуроки по созданию сайта, продвижению сайтов и заработку в интернете.
❗ Дополнительную информацию вы найдете — у меня в блоге.
❗ Бесплатная консультация на — форуме вебмастеров.
❗ Услуги: по продвижение сайтов в интернете.

Рекомендую статьи, которые будут полезны вам, на Дзене:

#интернет-магазин #создание интернет магазина #создать интернет магазин #сделать интернет магазин #интернет магазин wordpress #wordpress #вордпресс #создать сайт #создание сайта #как сделать сайт