WordPress

Интернет магазин на WordPress

  • Введение
  • Преимущества WooCommerce
  • Регистрация хостинга и домена
  • Установка WooCommerce
  • Основные настройки
  • Выбор темы
  • Создание категорий
  • Создание подкатегорий
  • Вывод категорий в меню
  • Добавление товаров
  • Создание атрибутов товаров
  • Метки товаров
  • Расширение функциональности магазина
    • Yoast SEO Premium
    • Autoptimize
    • Webcraftic Cyr to Lat reloaded
    • WooCommerce Bulk Editor
    • Backup

Здравствуйте.

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

Известно что CMS WordPress является очень мощной многофункциональной системой. Развернуть на ее базе интернет магазин также не составит труда. Для этого нам понадобится связка WordPress WooCommerce. Вукомерц это плагин превращающий ваш сайт на CMS WordPress в полноценный современный онлайн магазин. При этом создание  такого ИМ своими руками не требует вложений то есть обойдется вам совершенно бесплатно. Ну или почти бесплатно. Разумеется потребуется символическая сумма для оплаты домена и хостинга. При этом за саму CMS вам платить не придется. Цена вопроса домен + хостинг примерно 300 руб.  Это думаю вполне себе может позволить даже школьник из карманных расходов. Вот они преимущества прогресса! Бизнес за 300 руб. довольно заманчиво, не так ли? Тогда давайте приступим.

Преимущества WooCommerce

Неоспоримым преимуществом WordPress  является простота и доступность. Базовый функционал доступен бесплатно  и позволяет без труда решить поставленную задачу. При необходимости всегда можно легко и просто добавить нужные функции с помощью плагинов. Этими же преимуществами обладает и плагин WooCommerce. Связка WooCommerce WordPress позволяет быстро развернуть онлайн бизнес без затрат. Устанавливая и активируя плагин вы получаете готовый современный инструмент для интернет продаж.

Интернет магазины на базе WordPress при должном подходе являются достаточно SEO дружелюбны. Это позволит в будущем получать клиентов из поиска Яндекс и Гугла.

Плагин WooCommerce является самым популярным инструментом для онлайн магазина WordPress. Поэтому вы без труда найдете массу информации в сети при возникновении затруднений. Подытожим вышесказанное, выделим основные преимущества:

  • Бесплатность
  • Простота в освоении
  • Масса информации на русском
  • Неограниченный функционал
  • SEO оптимизирован

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

Регистрация хостинга и домена

Использование WooCommerce предполагает уже установленный сайт Вордпресс. Если вы еще этого не сделали тогда читайте тут  подробно как создать сайт на WordPress .

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

  • PHP 7.3 и выше на момент написания статьи
  • Размер оперативной памяти минимум 128 Мб
  • Система управления базами данных MySQL версии 5.6 или выше
  • На сегодня обязательна поддержка HTTPS

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

Поскольку я имею опыт безпроблемного пользования хостингом beget.com то с уверенностью могу вам его посоветовать. Не думаю что стоит подробно останавливаться на процессе регистрации хостинга. Тут нет ни чего сложного.

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

Установка WooCommerce

Этап регистрации хостинга и домена уже позади. У вас имеется установленная CMS WordPress. Самое время приступить к установке плагина WooCommerce. Плагин магазина устанавливается из панели управления WordPress, так же как и любой другой модуль.

Для этого идем по пути плагины > добавить новый. В строке поиска плагинов пишем WooCommerce. Устанавливаем и активируем. Буквально в пару кликов вы превратили свой сайт в онлайн магазин.

Основные настройки WooCommerce

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

Откроется первая страница настроек. Здесь необходимо задать адрес. Также если вы создаете магазин на заказ для клиента то поставьте  галочку в поле «I’m setting up a store for a client»

первая страница настроек woocommerce

Жмем продолжить и попадаем на следующую вторую страницу. Здесь WooCommerce поинтересуется, какие товары вы планируете продавать. Выберите необходимую категорию и жмите продолжить.

На третьей странице настроек будет предложено выбрать тип товаров для продажи.

  • Физические товары – тут думается все ясно. Собственно это те товары которые можно упаковать и отправить.
  •  Загрузки – скачиваемые товары
  • Подписки – Позволит принимать абонентскую плату за услуги.
  • Тарифные планы – это дополнение для платной подписки на скрытый контент.
  • Бронирование – назначение ясно из названия. Позволит бронировать гостиницы, квартиры. Также будет полезно для арендного бизнеса.
  • Пакеты – данное дополнение пригодится для формирования услуг либо товаров различных ценовых категорий.
  • Настраиваемые товары –  модуль нужен если товары имеют различные характеристики (атрибуты) цвет, размер, и т.д.

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

На 4-й странице настроек WooCommerce  попросит рассказать дополнительные детали вашего бизнеса.

  • Сколько вы планируете продавать товаров – да сколько угодно! Можете поставить хоть более 1000 это ни на что не повлияет.
  • Продаете ли вы товары где то еще – оставляем значение «нет».

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

Идем дальше жмем «продолжить» и попадаем на страницу выбора темы. Здесь WooCommerce предложит на выбор из платных и бесплатных шаблонов магазина. Для начала установим бесплатный вариант тему Storefront. Мы ведь все еще начинающий бизнес и лишние траты нам ни к чему. К тому же этот WooCommerce шаблон гарантированно будет работать. Позже я покажу как поменять тему интернет магазина в панели управления WordPress.

Выбор темы 5-ястраница woocommerce

Выбор темы

Наша дефолтная тема является полностью совместимой с плагином WooCommerce. Это гарантирует её полную работоспособность. Для начала это вполне приемлемый вариант. Однако возможностей для настроек вида в данной теме не так много. Да и хотелось бы добавить магазину чуть больше уникальности чем стандартный шаблон. Поэтому попробуем поискать что ни будь более подходящее. Для этого идем по пути внешний вид > темы.

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

Замена стандартной темы интернет магазина

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

В рамках руководства выберем для примера одну из первых. У меня это будет HoneyBee. Жмем установить > активировать.

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

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

Создание категорий

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

В идеале категории создаются на основе семантического ядра. Это необходимо для того что бы добавить описание категорий для SEO оптимизации. Но это тема для отдельной статьи.

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

Каждый товар должен располагаться в своей категории. Поэтому для начала мы и приступим  именно к созданию категорий. Для этого идем по пути товары  > категории. Вукомерц уже создал для нас одну категорию Uncategorized. Сюда будут попадать товары которые не принадлежат ни к какой другой.

 В соответствующих полях пишем название, ярлык, и описание. Ярлык что бы было понятнее это ссылка на категорию. Пишется он латиницей.

Добавление категорий woocommerce

Если это главная категория то оставляем ее родительской.

Создание подкатегорий

При необходимости в главную категорию можно будет добавить подкатегорию. Для этого при создании подкатегории выбираете родительской нужную. Например: главной может быть категория женская одежда а подкатегорией платья. Иерархия будет выглядеть так женская одежда > платья.

Вывод категории в меню интернет магазина

При создании категорий WooCommerce не выводит их автоматически в пункты меню. Но наверное раз мы делаем онлайн магаз то хотим что бы посетителям были доступны все категории и товары, не так ли? Для того что бы их отобразить идем по пути внешний вид > меню

Теперь нужно открыть в новой вкладке нужную категорию. Наводим мышкой на нее и копируем адрес ссылки.

Далее возвращаемся на страницу настроек меню. Выбираем пункт произвольные ссылки.  В строку URL копируем адрес ссылки. Пишем название категории и жмем добавить в меню. Категория появится в меню. Не забываем в настройках меню внизу страницы  поставить галочку напротив области отображения меню «основной». Теперь что бы настройки сохранились жмем создать меню.

Зайдите на сайт и проверьте. Категория должна отображаться в меню интернет магазина.

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

Добавление товара

Приступаем  к добавлению товаров. Для этого в левой части панели панели управления wordpress перейдите пункт меню товары > добавить новый. Вы попадете на страницу добавления товара. Основные пункты которые необходимо заполнить:

  1. Название товара
  2. Полное описание товара
  3. Краткое описание товара
  4. Присвоить категорию
  5. Указать цену
  6. Выбрать изображение
  7. Сохранение и публикация

Жмем кнопку опубликовать и готово. Наш первый товар появится в соответствующей категории.

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

Добавление атрибутов товара

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

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

Идем по пути товары > атрибуты. Пишем нужный атрибут на моем примере бренд. Прописываем ярлык. Отмечаем галочкой «включить архивы». Жмем добавить.

Атрибут бренд  создан теперь нужно добавить в этот атрибут значения т.е. список брендов. Переходим на страницу атрибутов товаров и напротив нужного жмем на ссылку «установить правила». Попадете на страницу создание значений атрибута. Здесь мы зададим название в моем примере это будет значение атрибута бренд FILA.

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

Любуемся результатом!

Добавленный атрибут товара

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

Добавление меток товаров

Для полноты картины стоит также поговорить о метках товаров. Применительно к интернет магазину это дополнительный способ  связать товары по какому то общему признаку. Сделано это для того что бы иметь возможность все той же удобной навигации. А также с помощью меток возможно увеличение посадочных страниц. Каждая метка создает отдельную страницу товаров принадлежащих именно ей.

В отличии от категорий метки не имеют иерархии. Это и логично ведь они служат для группировки товаров по одному единственному признаку. При этом товар может иметь и несколько меток.

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

Чтобы добавить метку идем по пути товары > метки

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

На данном этапе вы имеете вполне функциональный ИМ на базе WooCommerce WordPress. Но считаю что данное руководство не было бы полным без упоминания о расширениях, которые необходимо установить дополнительно. Поэтому бонусом расскажу о плагинах которые расширяют возможности системы. Это список возможно не полный, но основан на личном опыте применения и на мой взгляд является обязательным для установки. Подробное описание дополнений и их настройки читайте по ссылкам. Здесь приведу лишь краткое описание и назначение.

  1. Yoast SEO Premium – SEO оптимизация онлайн магазина на базе WooCommerce WordPress
  2. Autoptimize – простой в установке и настройке плагин ускорения
  3. Webcraftic Cyr to Lat reloaded – данное дополнение автоматически выполняет транслитерацию ссылок. Превращает кроссовки мужские в krossovki-mughskie автоматом.
  4. WooCommerce Bulk Editor – платное дополнение для массового изменения товаров.
  5. Backup – плагин для создания резервной копии сайта.

Заключение

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

Желаю вам успехов и удачи!

Похожие записи