Создание Интернет-Магазина С WordPress + WooCommerce

В этом уроке я расскажу, как настроить интернет-магазин с помощью WordPress + WooCommerce.

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

Что вы можете продать с WordPress + WooCommerce?

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

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

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

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

Шаг 1. Получить доменное имя и веб-хостинг

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

Доменное имя — это уникальный адрес вашего магазина в интернете. Что-то вроде YOURSTORE.com

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

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

Установить WordPress

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

Шаг 2. Установить плагин WooCommerce (бесплатно)

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

Как и со всеми плагинами WordPress, все начинается с перехода в панель управления WordPress — плагины — добавить новый. После этого введите «woocommerce» в поле поиска. Вы увидите WooCommerce в качестве первого результата поиска. Просто нажмите кнопку «Установить», а затем «Активировать» рядом с плагином.

На этом этапе вы увидите мастер запуска/настройки WooCommerce на экране. Это делает процесс очень простым для пользователей.

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

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

Как только вы закончите, нажмите «Продолжить».

Оплата

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

Доставка

Можно выбрать метод доставки товаров.

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

Следующий шаг-добавление продуктов:

Шаг 3. Добавьте свой первый продукт

Чтобы иметь возможность называть свой магазин операционным, вам нужны некоторые продукты в базе данных (или услуги, или загрузки, или то, что вы хотите продать).

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

То, что вы увидите, — это классический экран редактирования контента WordPress. Вы можете заполнить следующие поля:

1. Название товара.
2. Основное описание товара. Это большое поле позволяет ввести столько информации о продукте, сколько вы хотите. Поскольку это WordPress, вы можете поместить туда не только простой текст, но и изображения, столбцы, заголовки, даже видео и другие носители. В принципе, все, что вы считаете нужным!

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

Основные. Здесь вы можете установить цены и налоги.

Запасы. WooCommerce позволяет управлять уровнями запасов.

Доставка. Установите вес, размеры и стоимость доставки.

Связанные Продукты. Отлично подходит для создания допродаж, кросс-продаж и т. д. (Например: «вместе с этим товаром клиенты выбирают…”)

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

Дополнительные параметры.

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

Сбоку справа можно заполнить следующие поля:

1. Категория продукта. Работает так же, как стандартные категории WordPress.
2. Метки товаров. Дополнительный способ помочь вам организовать вашу базу данных продуктов. Работает так же, как стандартные теги в WordPress.
3. Изображение товара. Главное изображение товара.
4. Галерея товара. Дополнительные изображения товара.

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

После того, как вы закончите установку всех вышеперечисленных пунктов, нажмите на большую кнопку «опубликовать» – ваш первый продукт только что был добавлен!

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

Шаг 4. Выберите тему для вашего интернет-магазина (бесплатно)

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

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

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

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

Выбор темы

Официальная тема WooCommerce – и та, которая, скорее всего, будет работать правильно – называется Storefront. Версия по умолчанию бесплатна и выглядит она очень симпатично.

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

Правила оформления магазина электронной коммерции

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

Что делает дизайн магазина электронной коммерции хорошим (прибыльным)? Вот наиболее важные параметры:

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

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

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

Отзывчивый для мобильных устройств. Исследования показывают, что около 80% людей захотят в интернете со смартфона. Согласно другому исследованию, 61% ваших мобильных посетителей немедленно уйдет и отправится к вашим конкурентам, если ваш магазин неудобно просматривать в мобильном. Другими словами-убедитесь, что ваш сайт оптимизирован для мобильных устройств, это имеет решающее значение.

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

Рассмотрим основные страницы магазина.

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

«Магазин» — это место, где будут выставлены ваши товары.

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

«Оформление заказа» — это то, где клиенты выбирают способ доставки и оплачивают все, что они купили.

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

Страница вашего магазина

Здесь находится основной список ваших продуктов. Если вы прошли через Мастер настройки WooCommerce, эту страницу можно найти по адресу YOURDOMAIN.com/shop

Это стандартная страница WordPress-вы можете редактировать ее через админ-панель.

То, что стоит делать:

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

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

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

WooCommerce также позволяет отображать ваши товары альтернативными способами. Зайдите в Панель управления WordPress / WooCommerce / Настройки / Товары, а затем в раздел отображения:

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

Отдельные страницы товара

Чтобы увидеть их, нажмите на любой товар со страницы магазина.

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

Вот мой пример с темой магазина (без каких-либо дополнительных настроек):

Корзина покупок

Еще одна важная страница, которую можно настроить, перейдя в админ панель-страницы.

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

Оформление заказа

Это, пожалуй, самая важная страница из всех. На этой странице ваши покупатели могут завершить свои заказы и оплатить товар.

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

Внешний вид страницы оформления Заказа:

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

Шаг 5. Расширение WooCommerce

Еще одна вещь, которая делает WooCommerce таким удачным решением для электронной коммерции, — это наличие десятков или даже сотен расширений и плагинов.

Начнем с расширений-официальных дополнений, которые были одобрены командой WooCommerce.

Чтобы посмотреть, что доступно, вы можете перейти на эту страницу https://woocommerce.com/product-category/woocommerce-extensions/.

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

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

Плагины

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

Cyr-To-Lat — преобразовывает названия всех категорий и товаров с русских букв на латинские.

WooCommerce Product Filter v6.6.5-настройка фильтров товаров вашего магазина.

Yoast SEO. Улучшите SEO всего вашего сайта.

Yoast WooCommerce SEO plugin. Улучшите SEO ваших продуктов и других областей вашего магазина электронной коммерции.

WooCommerce Multilingual. Запустите полностью многоязычный сайт WooCommerce.

Contact Form 7. Пусть посетители вашего сайта свяжутся с вами напрямую.

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

Social Share Buttons by GetSocial. Пусть ваши покупатели делятся своими продуктами со своими друзьями и семьей через социальные сети.

MonsterInsights. Интегрируйте свой сайт с Google Analytics.

All in One WP Security and Firewall. Настройки безопасности для вашего сайта.

WP Super Cache. Ускорьте свой сайт с помощью кэширования.

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

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

Как изменить Woocommerce с помощью дочерей темы. Часть 13 – настройка bootstrap меню и регистрация пользователей

Когда мы создаем свою тему, в файле functions.php мы регистрируем Read more

Как изменить Woocommerce с помощью дочерей темы. Часть 12 — настройка страницы входа в систему

Стандартная страница входа на сайт wordPress выглядит не очень привлекательно. Read more

Как изменить Woocommerce с помощью дочерей темы. Часть 11 — создание плагина для добавления слайдера

В одной из статей мы добавили баннер на главную страницу Read more

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

В одной из статей мы создали записи блога и добавили Read more

Как изменить Woocommerce с помощью дочерей темы. Часть 9 — Настройка станицы оформления заказа

После того, как мы внесли изменения на страницу корзины, пришло Read more

Как изменить Woocommerce с помощью дочерей темы. Часть 8 — Настройка страницы корзины

Зная, как пользоваться action hook и filter hook можно с Read more