WordPress: Web-Магазины

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

По ходу урока мы рассмотрим создание сайта интернет-магазина. Для этого мы установим WordPress с бесплатным плагином Woocommerce и настроим его. Затем мы настроим все необходимые параметры: товары, категории, налоговые ставки и доставку, и интегрируем электронный магазин с системой терминалов для оплаты.

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

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

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

Woooooooocommerce! 

Чтобы запустить процесс электронной торговли в учетной записи web-хостинга, нажмите Plugins > Add New [Плагины > Добавить новый]. В правом верхнем углу экрана есть текстовое поле с надписью Search plugins [Поиск плагинов]. Введите в это поле ‘Woocommerce’, и вы увидите плагин в верхней части списка. Нажмите Install Now [Установить сейчас].

Если вы используете домашний локальный сервер, можете скачать этот плагин по ссылке https://en-ca.wordpress.org/plugins/woocommerce. После загрузки плагина распакуйте ZIP-файл и переместите папку плагина в папку wp-content/plugins. После этого мы можем обновить панель администратора и выбрать Plugins [Плагины]. Woocommerce появится в списке. Чтобы активировать плагин, нажмите Activate [Активировать].

При нажатии этой кнопки вам предложат настроить валюту и другие параметры. Если хотите сделать это позже, нажмите Not Right Now [Не сейчас] в нижней части страницы. Но можете сделать это сейчас и указать пользовательские параметры. Плагин интуитивно понятен. В нем даже указаны налоговые ставки для различных стран, штатов, провинций, территорий и других регионов. На данном этапе для получения платежей можно выбрать Paypal, так как с ним очень легко работать, и мы можем быстро создать новую учетную запись.

Затем выберем тариф за доставку: Flat rate [Фиксированная ставка] или Free shipping [Бесплатная доставка]. Позже мы можем добавить различные правила доставки, а также несколько вариантов фиксированной ставки и бесплатной доставки.

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

Поскольку у нас нет категорий, мы можем перейти прямо на панель управления. После возврата на панель инструментов мы увидим вкладки Woocommerce и Products [Товары] в левой боковой колонке. На этих вкладках мы проведем большую часть времени при настройке и последующем использовании электронного магазина. Одна из них используется для обработки информации о товаре, другая — для изменения настроек.

Категории и товары

Чтобы создать первую категорию, выберите Products [Товары], а затем Category [Категория]. После этого просто укажите имя категории и нажмите Add New Category [Добавить новую категорию] в нижней части страницы. В нашем упражнении категория называется Seedlings [Саженцы]. Как видите, теперь в нашем списке категорий есть один элемент.

Теперь надо создать товар для этой категории. Для этого выберите Products > Add New [Товары > Добавить новый]. Затем добавьте имя, описание, стоимость и артикул и выберите категорию Seedlings на правой боковой панели. И нажмите Publish [Опубликовать].

Артикул (номер SKU) очень важен и необходим для интеграции Woocommerce с системой терминалов для оплаты. Если вы забыли добавить информацию о товаре или хотите изменить ее, измените товар и нажмите кнопку Update [Обновить]. Изменения будут сохранены моментально. Помните, что для каждого товара можно создать перечень и варианты товара.

Итак, пойдем дальше и создадим еще один товар — «семена томатов»; это товар с переменными характеристиками. Чтобы создать такой товар, выберите Variable Product [Товар с переменными характеристиками] в раскрывающемся меню Product Data [Данные товара]. После этого перейдите на вкладку Attributes [Атрибуты].

Нажмите кнопку Add [Добавить], чтобы создать пользовательский атрибут. Назовите этот атрибут Size [Размер]. Он будет использоваться для создания различных размеров для пакетов семян. Обязательно установите флажок Used for Variations [Использовать для товаров с переменными характеристиками]. Укажите под значениями три размера, разделенные вертикальными линиями. Для нашего примера подойдут размеры Small | Medium | Large. Создав атрибут, нажмите кнопку Save Attributes [Сохранить атрибуты].

Сохранив атрибуты, нажимайте кнопку Variations [Варианты]. Затем нажмите кнопку Go [Перейти], которая находится рядом с кнопкой Add variation [Добавить вариант товара]. Откроется новый элемент списка, для которого можно выбрать размер из раскрывающегося меню и развернуть вариант. Мы можем добавить артикул, цену, изображение товара, размеры и вес, наличие на складе и описание.

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

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

Просмотрим меню 

Давайте создадим наше меню. Для этого найдите Appearance [Внешний вид] в колонке слева и выберите Menus [Меню]. Мы видим, что можно указать имя меню и нажать кнопку Create Menu [Создать меню]. Давайте так и сделаем. Мы можем назвать это меню Main.

После создания меню можно установить некоторые параметры для этого меню; например, Automatically add new top-level pages to this menu [Автоматически добавлять новые страницы верхнего уровня в это меню] и Top Menu [Главное меню].

После этого мы можем добавить пункты меню. Если посмотреть на крайний столбец слева, в нем будет три вкладки: Most recent [Последнее], View all [Просмотреть всё] и Search [Поиск].

На вкладке Most recent [Последнее] выберите Shop and Sample Page [Магазин и пример страницы]. Затем нажмите Add to Menu [Добавить в меню] и Save Menu [Сохранить меню]. Если вы теперь обновите домашнюю страницу в браузере, то увидите магазин и пример страницы.

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

Давайте начнем очистку сайта с помощью меню. Чтобы добавить блог, нажмите Categories [Категории] в левом столбце и поставьте галочку в поле Uncategorized [Без категории]. Со временем мы добавим для записей определенные категории. А пока выберем единственную категорию, которая уже есть, и добавим ее в меню. После этого мы изменим порядок, чтобы пример страницы [Sample] стал нашей домашней страницей. Мы можем переместить ее вверх, просто перетащив мышью. Порядок страниц теперь нормальный, но заголовки ужасны. К счастью, мы можем щелкнуть стрелку на примере страницы и переименовать ее в Home.

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

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

Торговые пути

Ранее мы уже касались доставки. Теперь мы продолжим настраивать ее в соответствии со своими потребностями. Чтобы получить доступ к разделу доставки, наведите курсор на WooCommerce и выберите Settings [Настройки].

В настройках есть семь вкладок, и нам нужна вкладка Shipping [Доставка]. Отображаются название нашей зоны, региона и методы доставки. Предположим, что мы хотим рассылать товары по всему миру. Мы можем нажать кнопку Add shipping zone [Добавить зону доставки] и указать ее параметры. В нашем примере зона может носить название World [весь мир]. В качестве регионов зоны добавим Африку, Европу, Северную Америку, Австралию и Азию. В качестве метода доставки добавим Flat rate [Фиксированная ставка] и сохраним изменения. Можно добавить несколько зон доставки, даже местную зону с бесплатной доставкой.

Теперь, когда у нас есть две зоны, давайте установим некоторые тарифы для доставки. Мы можем установить фиксированную ставку для нашей зоны, открыв зону для изменения, наведя указатель мыши на пункт Flat rate [Фиксированная ставка] и нажав кнопку Edit [Изменить]. Стоимость доставки будет постоянной независимо от того, сколько товаров выбрал клиент.

Торговая точка на Square 

В начале статьи мы говорил об электронной торговле. Электронная торговля — отличный способ продавать и рекламировать товары круглосуточно и без выходных. Однако если поискать в Google статистику сравнения показателей обычных магазинов и онлайн-продаж, мы увидим, что продажи через Интернет составляют лишь небольшой процент от общего объема продаж. В некоторых статьях упоминается, что более 90 % продаж осуществляется в реальных магазинах. Таким образом, если с нашим магазином интегрирована система торговых точек, лучше будет иметь оба варианта продаж.

С учетной записью Square и терминалом мы можем принимать заказы с использованием кредитных и дебетовых карт. Вдобавок можно синхронизировать наш перечень продуктов с WordPress.

Итак, если вы хотите использовать Square, вам потребуется учетная запись Square (ее можно получить, зарегистрировавшись на сайте square.com) и SSL-сертификат для нашего домена. При регистрации наш адрес электронной почты будет связан с учетной записью. Этот адрес очень важен, почти так же важен, как адрес электронной почты, который используется в Paypal. Мы можем для простоты использовать один и тот же адрес или два разных адреса. Выбор за вами.

Мы не будем тратить много времени на рассказ об использовании системы Square и WordPress, так как для этого требуется платный плагин Square for Woocommerce. Этот плагин можно приобрести за $69 на сайте https://woocommerce.com/products/square/, и он работает в США, Канаде, Австралии, Японии и Великобритании. После приобретения и загрузки плагина его можно установить в WordPress или переместить в каталог плагинов и активировать. После активации плагина надо изменить некоторые параметры. Сначала найдите новую вкладку Integration [Интеграция] на левой боковой панели; она находится в разделе Woocommerce > Settings [Параметры]. Также надо подключиться к нашей учетной записи на Square.

Нам надо будет разрешить доступ к своему приложению и синхронизацию. После этого мы выбираем наш сайт и сайт для перенаправления. Затем мы просто заполняем простые параметры, такие как Business Location [Расположение бизнеса], Notification email [Адрес электронной почты для уведомлений] и Log debug [Журнал отладки] (этот параметр необязателен) и сохраняем изменения.

Синхронизируем стильно

После настройки приложения вы можете изменить настройки синхронизации в любое время, выбрав Woocommerce > Settings > Integration [Параметры > Интеграция]. Кроме того, можно синхронизировать перечень товаров из Square в WordPress, как и из WordPress в Square, одним нажатием кнопки.

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

После этого можно выбрать, добавить ли Square как способ оплаты для сайта. Этот параметр находится в разделе Woocommerce > Settings > Checkout [Параметры > Оплата]. Примерно треть страницы занимают варианты оплаты, разделенные вертикальными линиями. В этом списке мы видим Paypal (текущий вариант) и Square.

Выберите Square, включите его и выберите Save Changes [Сохранить изменения]. Теперь при переходе на наш сайт отображается два варианта оплаты: Paypal и Square. Похвалим себя за хорошо выполненную работу.

Теперь, когда у нас есть глубокие знания, нам понадобится устройство Square, подключенное к телефону Android или iPad через разъем для наушников, бесконтактный считыватель карт или точку продажи iPad. Кроме того, требуется приложение Square на устройстве, которое будет взаимодействовать с устройством чтения карт.

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

Бесконтактный считыватель подключается к iPad через Bluetooth или USB-порт Square. Это устройство стоит около $59 и может принимать кредитные карты и дебетовые карты с магнитной полосой или чипом либо бесконтактные карты. Такое устройство необходимо для серьезного бизнеса, который обязан охватывать все варианты.

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

Продавайте до упада

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

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

Категория: Без рубрики