Запуск магазина WooCommerce в WordPress
WooCommerce управляет магазином: товарами, заказами, налогами и платежами. Однако он не делает так, чтобы всё это выглядело как ваш бренд. Это руководство собирает четыре экрана, которые покупатель видит на самом деле, с помощью блоков во встроенном в WordPress редакторе.
Шаг 1: Установка WooCommerce
WooCommerce — это бесплатный плагин из каталога плагинов WordPress, и он по-прежнему отвечает за всё коммерческое: данные о товарах, складские остатки, заказы, налоговые правила, зоны доставки и платёжные шлюзы. Canvas никогда не заменяет этот уровень, поэтому ваши другие расширения WooCommerce продолжают работать.
Два способа установки
- Поручите это мастеру настройки. Выберите демо магазина во время настройки: на этапе установки плагинов WooCommerce будет установлен и активирован до запуска импорта, потому что магазину нужен плагин для торговли.
- Установите его самостоятельно в разделе «Плагины», «Добавить новый», и запустите начальную настройку WooCommerce. Так стоит поступить, если вы добавляете магазин на уже работающий сайт.
В любом случае пройдите настройку WooCommerce один раз и ответьте на её вопросы о стране, валюте и о том, что вы продаёте. Эти ответы позже влияют на налоги и доставку, и их долго и неприятно переделывать.
Настройте сервис email-рассылки до того, как примете первый реальный заказ. Письма с подтверждением заказа по умолчанию уходят с вашего сервера через WordPress, а магазин, чьи чеки попадают в спам, создаёт обращения в поддержку, на которые вы не сможете ответить.
Шаг 2: Начните с демо магазина или с пустого каталога
Здесь у вас есть выбор, и на его обдумывание стоит потратить десять минут.
Импорт демо магазина
21 из 88 демо — рабочий магазин WooCommerce. Импорт любого из них даёт товары, категории, атрибуты, образцы цветов, оформленный магазин, оформленную страницу товара, корзину и оформление заказа: всё уже на месте и доступно для редактирования. Это самый быстрый способ понять, как сочетаются элементы, а если вы решите отказаться от импорта, его можно откатить целиком.
Создание на базе собственного каталога
Если вы уже продаёте товары и у вас есть каталог в базе данных, выберите вариант «Только страницы» и добавьте демо в существующий сайт. Вы получите страницы демо и записи, которые они используют, без его настроек, меню и главной страницы, а ваш каталог останется на месте.
В любом случае страницы WooCommerce на вашем сайте подхватываются, поэтому всегда есть только один магазин, одна корзина, одно оформление заказа и одна страница аккаунта.
Шаг 3: Добавьте первые товары
Товары — это записи WooCommerce, которые добавляются в разделе «Товары» в админке WordPress, и эта часть намеренно проста. Уделите время именно ей, а не вёрстке, ведь хорошая страница товара строится в первую очередь на хороших данных о товаре.
- Одна чёткая фотография на каждый товар, снятая одинаково для всех позиций. Сетка каталога выглядит продуманной, когда пропорции совпадают, и наспех собранной, когда не совпадают.
- Краткое описание, которое отвечает на главный вопрос покупателя. Размер, материал, срок доставки и что делать, если товар не подходит.
- Категории, которые совпадают с тем, как покупатели ищут товары, а не с тем, как организован склад.
- Атрибуты для всего, что имеет вариации. Цвет, размер, отделка. Задайте терминам цвета реальное значение цвета в админке, потому что именно оно позже превращает выпадающий список в образцы.
- Остаток на складе, вес и габариты, если вы продаёте физические товары. Правила доставки используют эти данные.
Добавьте три товара, прежде чем что-то проектировать. Макет, оценённый по одному товару-заглушке, придётся переделывать.
Шаг 4: Оформите страницу магазина
Магазин — это каталог, и его задача — как можно быстрее привести покупателя на страницу товара. Canvas даёт для этого блоки; обычно хватает одной настройки темы с тремя вариантами макета.
Блоки
Сетка товаров выводит товары из категории, по метке, поиску или из вручную выбранного списка. Карусель товаров делает то же самое в один ряд для главной страницы. Карточки категорий товаров ведут посетителей в раздел. Фильтр по цене помогает покупателям сузить длинный каталог. Каждый элемент представляет собой блок с панелью настроек, поэтому количество колонок, источник и сортировка задаются в интерфейсе, а не в коде.
Базовый шаблон
Сам магазин — это блочный шаблон, который можно открыть в Редакторе сайта. Разместите его на всю ширину, с левой боковой колонкой, с правой или с обеими, в зависимости от того, оправдано ли место фильтров и категорий в вашем каталоге. Всего 18 шаблонов магазина: для страницы магазина, страницы товара, архивов, корзины и оформления заказа.
Значения по умолчанию для всего магазина
В настройках темы собрано 39 параметров магазина на 5 вкладках: каталог, страница товара, корзина и оформление заказа, мини-корзина в шапке и режим каталога. Количество товаров на странице, пагинация, форма изображения товара, показ дополнительных фото галереи при наведении и то, что предлагает оверлей при наведении, задаются там. Блок, который задаёт один из этих параметров самостоятельно, всё равно имеет приоритет на странице, где он расположен.
Шаг 5: Оформление страницы товара
Это страница, которая продаёт, поэтому она заслуживает большего, чем стандартное расположение, которое используют все магазины в интернете.
Соберите из частей
Каждая часть страницы товара — это блок: галерея изображений, цена, рейтинг звёздами, мета-данные, краткое описание, образцы вариаций, кнопка добавления в корзину, вкладки, строка с кнопками «Поделиться» и связанные товары. Переставляйте их, меняйте оформление или полностью уберите любой, и страница продолжит работать, поскольку каждый блок запрашивает собственные данные у WooCommerce.
Или начните с готового макета
Если вы не хотите собирать страницу из частей, выберите один из готовых макетов отдельного товара и переставляйте элементы: стандартный вариант, закреплённое описание, которое следует за галереей при прокрутке, список, дизайн с акцентом на цвет, дизайн магазина, два макета галереи с настраиваемыми ссылками и варианты с левой, правой или двумя боковыми колонками. Назначьте макет для каждого товара в редакторе или задайте для магазина значение по умолчанию в Настройках темы.
Что разместить над сгибом
Фотография, название, цена, выбор варианта и кнопка «В корзину». Всё остальное, включая описание, которое большинство людей не читает, можно разместить ниже. Проверьте это на телефоне, прежде чем решите, что не согласны.
Шаг 6: Корзина и оформление заказа
Именно на этих двух экранах теряются деньги, и в большинстве тем их трогать нельзя. Здесь они такие же блоки, как всё остальное.
Корзина
Блок таблицы корзины для содержимого, блок итогов корзины для сумм и блок допродаж для того, что покупатель действительно может добавить. Держите текст коротким, а кнопку заметной. Самая частая ошибка в корзине — это стена промоматериалов между итогами и кнопкой оформления заказа.
Оформление заказа
Блок платёжных данных для формы, блок проверки заказа с перечнем покупаемых товаров и блок уведомлений с сообщениями, которые сообщают покупателю, что произошло. WooCommerce по-прежнему отвечает за заказ, оплату и письма, а вы решаете, как выглядит экран.
Правила, которые окупаются сами
- Запрашивайте только те поля, которые действительно нужны для доставки.
- Показывайте общую сумму с доставкой до этапа оплаты.
- Укажите срок доставки в днях, текстом.
- Разместите политику возврата там, где её заметит сомневающийся покупатель, который совершает первую покупку.
Шаг 7: Образцы вариаций, добавление в корзину и стили карточек
В интеграцию входят три функции магазина, за каждую из которых обычно приходится ставить отдельный плагин.
- Цветовые образцы атрибутов. Задайте цвет для значения атрибута товара в админке, и вариативные товары будут показывать цветные точки или кнопки вместо выпадающего списка. Покупатель выбирает вариацию визуально, и это важнее всего на телефоне.
- Добавление в корзину без перезагрузки страницы. Товар, добавленный из сетки, карусели или наложения на карточке, обновляет корзину на месте: покупатель остаётся на той же странице, а корзина в шапке продолжает считать товары.
- Стили карточек товаров. Задайте одну форму для всех изображений каталога, чтобы сетка выравнивалась, выберите, появляются ли дополнительные изображения галереи при наведении или воспроизводятся как слайд-шоу, и решите, что предлагает блок при наведении: покупку, быстрый просмотр или и то и другое.
Все три являются настройками. Ни одна из них не требует фрагмента кода, дочерней темы или второго плагина, и каждую можно отключить, если вы предпочитаете более простое поведение.
Некоторые темы продают этот функционал отдельно. OceanWP поставляет бесплатную интеграцию с WooCommerce и предлагает Ocean eCommerce Pro как отдельный продукт, а сравнение Canvas с OceanWP объясняет, что входит в каждый тариф для магазина.
Шаг 8: Платежи, скорость, затем тестовый заказ
Сначала деньги, оформление в последнюю очередь. Пройдите по этому списку, прежде чем сообщать кому-либо, что магазин открыт.
Коммерческая настройка в WooCommerce
- Подключите платёжные шлюзы, которые планируете использовать, и пройдите их проверку. Обычно она занимает больше времени, чем вы ожидаете.
- Настройте налоговые правила и зоны доставки для регионов, куда вы действительно отправляете товары.
- Напишите страницы возврата средств, возвратов и доставки и добавьте ссылки на них в подвал и на страницу оформления заказа.
Скорость в Canvas
WooCommerce загружает скрипты и таблицы стилей на каждой странице сайта, в том числе на тех, которые ничего не продают. Пять переключателей это исправляют: отключают JavaScript WooCommerce на страницах, где не выводится содержимое магазина, выключают отслеживание атрибуции заказов, останавливают обращение скрипта фрагментов корзины к серверу на каждой странице с корзиной и убирают библиотеки проверки надёжности пароля и выбора вне страниц аккаунта и оформления заказа. Они входят в общий набор: 35 оптимизаций, и каждую из них можно отменить.
Затем оформите реальный заказ
Купите что-нибудь в своем магазине с телефона, через мобильный интернет. Оплатите реальной картой, если ваш платежный шлюз поддерживает тестовые возвраты. Проверьте, что письмо с подтверждением приходит и что заказ появляется в админке, а затем оформите возврат себе. Все, что вы обнаружите за эти пять минут, покупатель обнаружил бы вместо вас.
Источники
Там, где это руководство описывает то, что находится за пределами самой Canvas, ниже приведены официальные страницы, которые это документируют.
- Установка и удаление WooCommercewoocommerce.com · WooCommerce бесплатен, устанавливается с экрана «Плагины» и открывает собственный мастер настройки
- Страницы WooCommercewoocommerce.com · WooCommerce назначает по одной странице для магазина, корзины, оформления заказа и аккаунта
- Настройка налогов в WooCommercewoocommerce.com · Ставки налога задаются в настройках WooCommerce
- Настройка зон доставкиwoocommerce.com · Зона доставки — это географический регион, куда вы отправляете товары
- Отслеживание источников заказовwoocommerce.com · Какие данные фиксирует атрибуция заказов и настройка WooCommerce, которая её отключает
Что делать дальше
Два руководства по остальной части сайта вокруг магазина и полный обзор возможностей магазина.
Частые вопросы
Полный FAQ ответит на остальные вопросы, а документация подробно описывает каждую настройку.
Нужен ли по-прежнему плагин WooCommerce?
Да, магазин на Canvas по-прежнему работает на плагине WooCommerce. Canvas добавляет блоки, шаблоны и параметры поверх него и оставляет плагин главным, поэтому заказы, товары, налоги, доставка и платежи остаются там, где их ожидают ваши другие расширения. Если вы начинаете с демо магазина, мастер настройки устанавливает и активирует WooCommerce до запуска импорта.
Нужно ли покупать блоки магазина отдельно?
Нет, блоки магазина Canvas входят в каждый тариф без дополнительной оплаты. Все 24 блока магазина относятся к премиальным блокам, и каждый тариф включает все премиальные блоки, а также все 18 шаблонов магазина и все 21 демо-магазин. Отдельного тарифа для e-commerce и дополнения для магазина нет.
Можно ли использовать их вместе с блоками WooCommerce?
Да, смешивайте их свободно: блоки магазина Canvas — обычные зарегистрированные блоки, поэтому они спокойно соседствуют с блоками WooCommerce и базовыми блоками в одном шаблоне и на одной странице. Заменяйте по одному элементу за раз и не трогайте остальной макет.
Появятся ли у меня два оформления заказа после импорта демо магазина?
Нет, после импорта демо магазина Canvas останется одно оформление заказа. Импортёр находит страницы магазина, корзины, оформления заказа и личного кабинета, которые уже есть на вашем сайте, и направляет на них меню и ссылки демо, поэтому у вас остаётся по одной странице каждого типа. Существующие товары и заказы не затрагиваются, а весь импорт можно откатить.
Создайте свой следующий сайт с Canvas
Новичок, фрилансер или агентство: вы получаете одни и те же блоки и одни и те же демо. Начните с одного сайта и создавайте столько, сколько нужно, на одной лицензии.