Мастер-класс в понедельник: как превратить любой сайт WordPress в интернет-магазин с помощью Elementor

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

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

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

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

• Базовый функционирующий веб-сайт WordPress.
• Продукты
• Веб-конструктор Elementor (установлен)
• WooCommerce, предпочтительный плагин электронной коммерции для WordPress
• Учетная запись с платежным шлюзом (-ами) (онлайн-платежные сервисы, например Stripe или Paypal).

Нашим тестовым примером будет малый бизнес, физический магазин спортивного инвентаря «Simon's Sporting Goods». До сих пор им был нужен только их сайт для получения основной информации о магазине и специальных предложениях.

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

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

• Скакалка
• Пара мертвецов
• Рулонный матрас
• Пара ремней для тренировок с отягощениями

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

На панели инструментов WordPress мы просто перейдем на вкладку Elementor и выберем Инструменты , а там мы выберем вкладку Режим обслуживания .

В раскрывающемся меню режима мы выберем режим « Скоро будет », так как он намного лучше служит нашей цели.

Конечно, мы могли бы также использовать раскрывающееся меню здесь, чтобы загрузить шаблон или создать индивидуальный дизайн для шаблона в Elementor (щелкнув ссылку с надписью « Создать» ). Мы также можем подготовить это заранее, создав страницу «Скоро в продаже» и сохранив ее как шаблон, как мы это сделали здесь.

Если вы ищете лучшие бесплатные ресурсы по шаблонам WordPress, ознакомьтесь с этой статьей.

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

Мы устанавливаем WooCommerce так же, как и любой другой плагин.

На панели инструментов WordPress мы перейдем на вкладку « Плагины » и нажмем « Добавить» .
Мы воспользуемся окном поиска для поиска WooCommerce и, найдя его, нажмем « Установить». Установка может занять минуту, и как только это будет сделано, мы нажмем « Активировать» .

Когда плагин активирован, должен появиться мастер настройки WooCommerce.

Если этого не произойдет, мы нажмем на вкладку WooCommerce (которая появилась на нашей панели инструментов), выберем « Настройки» и в правом верхнем углу раздела настроек нажмем « Справка» .

В развернутом разделе справки найдите мастер настройки в крайнем левом углу, затем снова нажмите кнопку мастера настройки, которая появится в том же разделе.

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

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

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

В настройках платежей мы выберем наши Платежные шлюзы. Это платежные онлайн-сервисы с отличной репутацией в плане безопасности онлайн-транзакций.

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

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

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

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

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

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

Следующие несколько страниц содержат рекомендуемые плагины, которые вы можете использовать при желании.

Мы отменим их выбор, потому что у нас уже есть возможность связать такие вещи, как наша учетная запись Facebook и MailChimp, с нашим сайтом через Elementor, поэтому для нас это излишне.

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

На этом мы завершили первичную настройку WooCommerce.

Поскольку последняя страница мастера все еще открыта, мы нажмем кнопку « Создать продукт» , которая вернет нас на вкладку « Продукты » (сразу под вкладкой WooCommerce ) на панели инструментов WordPress.

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

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

• Название продукта - предлагаем вам сделать запоминающееся название
• Описание - сюда мы добавим информативное описание продукта.

В нижней половине этого раздела мы введем следующие данные о продукте :

• Тип продукта - наш тестовый пример представляет собой пример простого продукта (не виртуальный и не загружаемый).
• Цена
• Краткое описание - краткая аннотация о продукте

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

Над полем Изображение продукта у нас есть возможность добавлять теги к нашему продукту и назначать категории.

И после этого все, что осталось сделать, это просмотреть информацию о нашем продукте, прежде чем нажимать « Опубликовать» .

Как это ни удивительно, но сложную часть мы на самом деле прошли.

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

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

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

Самый простой способ добавить продукт на нашу страницу - это перейти в библиотеку виджетов на панели редактора и выполнить поиск виджета WooCommerce Products .

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

Если у нас более одного продукта, разместив виджет « Товары» на месте (с выбранным виджетом), на панели редактирования (слева) на вкладке «Содержимое» мы перейдем в раздел « Запрос ». Мы выберем наш источник как Ручной выбор; затем мы воспользуемся функцией « Поиск и выбор» именно для этого и найдем здесь продукт, который хотим продать.

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

Если вы более опытный пользователь, возможно, вы захотите попробовать более настраиваемое альтернативное решение.

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

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

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

Эти две страницы были автоматически созданы, когда мы установили WooCommerce, и, будучи страницами WooCommerce, мы не так уж много можем настроить.

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

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

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

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

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

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

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

Большинство настроек по умолчанию подходят для подавляющего большинства интернет-магазинов.

Эти настройки можно найти в разделе « Настройки » на вкладке WooCommerce на панели инструментов WordPress .

Здесь в общих настройках мы можем редактировать такие вещи, как:

• Адрес магазина
• Общие настройки.
• Варианты валюты

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

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

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

Я бы не стал экспериментировать с настройками по умолчанию на остальных вкладках, особенно на вкладке « Налоги» .

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

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

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

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

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

Принцип работы этой системы основан на зонах отгрузки и классах отгрузки .

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

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

Для этой демонстрации мы просто определим два простых класса.

На вкладке « Доставка» нажмите « Классы доставки» .

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

Затем мы определим этот класс, назвав его «Тяжелые предметы».

(Строка заголовка не так важна, и WooCommerce все равно может заполнить ее автоматически.)
В поле определения мы добавим краткое объяснение (например, «Предметы весом более 2 кг») для себя, наших сотрудников или коллег.

Далее мы таким же образом создадим отдельный класс. На этот раз мы назовем его «Легкие предметы» и определим его как «Предметы весом менее 2 кг».

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

Вернувшись к панели инструментов WordPress, мы войдем во вкладку « Продукты» и, найдя наш конкретный продукт в списке продуктов, щелкнем по опции « Редактировать» прямо под ним.

Это откроет раздел « Редактировать продукт », где мы прокрутим вниз до области « Данные продукта» и выберем вкладку « Доставка ».

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

После этого мы нажмем « Обновить» (на левой панели), вернемся к настройкам WooCommerce и вернемся на вкладку « Доставка ».

Как мы знаем, помимо веса, еще одной важной переменной, определяющей наши расходы на доставку, является местоположение. И этим мы сейчас займемся в разделе « Зоны отгрузки ».

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

Далее мы добавим способ доставки.

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

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

Это все хорошо, но что, если мы заинтересованы в расширении, например, в Западной Европе, и мы не хотим предлагать бесплатную доставку.

Мы всегда можем просто добавить еще одну зону, назвать ее Европой и ввести все страны, в которые мы хотим продавать. Затем мы добавим способ доставки и на этот раз выберем фиксированную ставку.

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

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

Нажав « Изменить» под только что созданным способом доставки, мы откроем диалоговое окно, в котором мы определим этот способ доставки более конкретно.

Первое, что мы сделаем, это изменим имя в заголовке метода с «Фиксированная ставка» на «Европа (обычная доставка)». Мы оставим опцию « Налог» в покое.

Обратите внимание, что у нас есть опция « Стоимость» для добавления общей стоимости доставки в эту зону доставки.

Однако мы можем определить наш метод доставки в соответствии с уже настроенными классами доставки.

Например, я могу определить стоимость доставки так, чтобы европейский покупатель заплатил 30 долларов за доставку тяжелого предмета, например, домашнего фитнес-пакета; или 10 долларов за доставку, если они заказывают легкий предмет, например, спортивные штаны.

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

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

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

Мы добавим дополнительный способ доставки в нашу зону доставки «Европа», добавив новый метод, выбрав фиксированную ставку и нажав « Изменить» .

В диалоговом окне мы изменим заголовок метода на «Европа (экспресс)» и введем стоимость этого метода в соответствии с классом доставки (тяжелый / легкий).

И, конечно же, мы нажмем « Сохранить изменения» .

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

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

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

Обратите внимание, что есть вариант PayPal Standard, а также вариант Paypal Checkout . Я предпочитаю использовать более поздний вариант, поскольку он включает этап оформления заказа и упрощает работу.

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

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

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

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

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

Прежде чем проводить наши тесты, мы сначала перейдем на страницу редактирования продукта на панели инструментов WordPress и временно изменим цену продукта с 99,90 долларов США до 99 центов.

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

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

Чтобы проверить, все ли в нашем магазине в порядке, мы перейдем на наш сайт (в режиме предварительного просмотра) и нажмем кнопку продукта « Добавить в корзину» .

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

Мы заполним наши данные и продолжим процесс, как если бы мы были клиентами.

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

Пока все идет гладко, как только мы завершим нашу тестовую покупку, мы вернемся к панели инструментов WordPress и на вкладку WooCommerce .

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

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

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

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

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

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

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