Как создать сайт электронной коммерции в WordPress с помощью простых шагов

Опубликовано: 2021-04-05

Электронная коммерция - многообещающее направление для инвестиций в настоящее время. По оценкам профессионалов, розничные продажи всей отрасли в 2021 году могут достичь 4,9 миллиарда долларов. Таким образом, очень важно догнать тенденцию, имея веб-сайт электронной коммерции для продажи товаров в Интернете. Эта статья покажет вам, как создать веб-сайт электронной коммерции в WordPress с помощью плагина WooCommerce . Давайте проверим!

Оглавление скрыть
  1. 1. Платформы для создания сайтов электронной коммерции
  2. 2. Шаг 1. Выберите домен и услуги хостинга.
  3. 3. Шаг 2. Настройка WordPress и внешнего вида.
  4. 4. Шаг 3. Установите плагин WooCommerce.
  5. 5. Шаг 4. Добавьте товары с помощью подключаемого модуля WooCommerce.
  6. 6. Шаг 5. Настройте информацию на странице продукта.
    1. 6.1. Настройка налоговой информации (вкладка «Налоги»)
    2. 6.2. Настройка информации о доставке (вкладка «Доставка»)
    3. 6.3. Настроить способы оплаты
    4. 6.4. Настроить уведомление по электронной почте
  7. 7. Шаг 6. Добавьте другие важные функции для своего веб-сайта.
  8. 8. Вердикт

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

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

Доступно несколько подобных платформ, а именно WooCommerce, BigCommerce, Wix, бесплатные альтернативы Shopify и т. Д. Однако плагин WooCommerce по-прежнему является самым популярным выбором для веб-сайтов WordPress, с более чем 5 миллионами активных установок на wordpress.org в качестве конкретного доказательство. Таким образом, мы будем использовать этот плагин в качестве примера.

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

Теперь мы рассмотрим подробные шаги по созданию веб-сайта электронной коммерции с помощью WordPress .

Шаг 1. Выберите домен и услуги хостинга

Домен - это адрес веб-сайта в Интернете (например, gretathemes.com). Хороший домен должен быть кратким, легко запоминающимся и иметь отношение к вашему бренду. Лучше всего иметь домен, соответствующий вашему бренду или продукту, чтобы ваш клиент мог легко найти ваш сайт. Например, домен веб-сайта плагина Meta Box - metabox.io.

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

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

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

Шаг 2. Настройка WordPress и внешнего вида

Затем установите последнюю версию WordPress.

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

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

В этом руководстве я установлю eStar - бесплатную многоцелевую тему WordPress.

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

Установите тему WordPress

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

Шаг 3. Установите плагин WooCommerce

Сначала установите и активируйте плагин. WooCommerce доступен бесплатно на wordpress.org.

Установить плагин WooCommerce

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

настроить информацию о магазине

В эту запись вам необходимо ввести такую ​​информацию, как адрес магазина, отрасль, типы продуктов и т. Д.

WooCommerce также порекомендует несколько хороших тем для вашего интернет-магазина. Однако, поскольку мы установили тему на шаге 2, нажмите « Продолжить с моей активной темой» .

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

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

Шаг 4. Добавьте товары с помощью плагина WooCommerce

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

Приступим к добавлению продуктов на ваш сайт WordPress. Перейдите в раздел «Товары» > « Добавить новый» и введите названия продуктов, цены, описания и т. Д.

Добавить товары на сайт WordPress

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

Например, я добавлю в свой магазин шапку-бини с логотипами.

Сначала я введу название продукта, описание, теги и категории.

Введите название продукта, описание, тег и категорию.

Затем я введу другую информацию, такую ​​как цена, налоги, размер, вес и т. Д., В раздел « Данные о продукте ». Вам также следует заполнить разделы Изображение продукта и Краткое описание продукта . По завершении нажмите « Опубликовать» .

Введите другую информацию для веб-сайта электронной коммерции

Мой добавленный продукт будет отображаться на веб-сайте, как показано ниже:

Выставка продукта в интерфейсе веб-сайта WordPress

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

Товары на сайте электронной коммерции

Хорошо, теперь вы добавили все товары на свой сайт. Нажмите « Просмотр продукта» в своей серверной части, чтобы просмотреть страницу продукта.

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

Вот ссылка на страницу продукта, которую я добавил в меню:

страница продукта в меню

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

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

Шаг 5. Настройте информацию на странице продукта

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

Настройка информации на странице продукта

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

Примечание:

  • Вы можете оставить некоторые разделы пустыми, если они вам не нужны.
  • Щелкните значок ? кнопка всплывающей подсказки рядом с каждым разделом, чтобы прочитать инструкции автора.

Нажмите кнопку, чтобы прочитать инструкции WooCommerce.

Настройка налоговой информации (вкладка «Налоги»)

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

Включите налоговую функцию плагина WooCommerce

Затем в разделе « Настройки » должна появиться вкладка « Налог », как показано ниже:

Вкладка «Налог» отображается в разделе «Настройки» плагина WooCommerce.

На вкладке « Налоги » вы можете добавлять, удалять налоги, включать / отключать цены с учетом налогов, выбирать способ расчета налогов и т. Д.

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

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

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

Настройте налоговые классы с помощью плагина WooCommerce

В частности, я буду применять общую ставку налога (налоги рассчитываются для стоимости доставки, НДС и т. Д.) В размере 20% для клиентов из любой страны, поэтому я отмечаю поля « Составной» и « Стоимость доставки» .

Применяйте общую ставку налога в размере 20% для клиентов из любой страны.

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

Настройка информации о доставке (вкладка «Доставка»)

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

В разделе «Зоны доставки» нажмите « Добавить зоны доставки», чтобы создать нужные.

Добавьте зону доставки с помощью плагина WooCommerce

Затем введите зону и нажмите « Добавить способ доставки».

Добавить способы доставки для интернет-магазина

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

Добавить индивидуальные способы доставки для интернет-магазина

Поскольку мой интернет-магазин занимается только доставкой внутри страны, я добавляю только Вьетнам как единственную зону доставки. Бесплатная доставка и самовывоз - это два способа доставки.

Выберите для интернет-магазина способы доставки «Бесплатная доставка» и «Самовывоз».

В разделе « Классы доставки » вы можете классифицировать товары и применять различные способы доставки (например, легкие, громоздкие и т. Д.).

Классифицируйте продукты и применяйте разные способы доставки

Настроить способы оплаты

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

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

Настройте способы оплаты для магазина

ПРИМЕЧАНИЕ . Если вы хотите интегрировать свои внутренние платежные шлюзы или банки, пожалуйста, используйте дополнительные плагины или наймите разработчика для создания собственных платежных шлюзов.

Настроить уведомление по электронной почте

В этом разделе электронных писем вы можете редактировать уведомления для клиентов или сотрудников о завершении, отмене заказов и т. Д., Щелкнув Управление справа от каждого раздела.

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

Выберите сотрудников, получающих электронные письма

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

Добавить сообщения в электронные письма

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

Шаг 6. Добавьте другие важные функции для своего веб-сайта

Чтобы ваш магазин работал эффективно и имел высокую конверсию, вам понадобятся:

  • Кнопки призыва к действию (CTA)
  • Похожие сообщения
  • Социальный обмен
  • Социальные ссылки
  • Звездный рейтинг

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

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

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

Вердикт

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

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

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