# Запуск магазина WooCommerce в WordPress URL: https://canvaswp.com/ru/guides/start-a-woocommerce-store-with-wordpress/ Updated: 2026-11-03 Руководство WooCommerce управляет магазином: товарами, заказами, налогами и платежами. Однако он не делает так, чтобы всё это выглядело как ваш бренд. Это руководство собирает четыре экрана, которые покупатель видит на самом деле, с помощью блоков во встроенном в WordPress редакторе. Опубликовано 5 сентября 2026 г.Обновлено 3 ноября 2026 г.Автор: команда Canvas в SemiColonWeb ## Шаг 1: Установка WooCommerce WooCommerce — это бесплатный плагин из каталога плагинов WordPress, и он по-прежнему отвечает за всё коммерческое: данные о товарах, складские остатки, заказы, налоговые правила, зоны доставки и платёжные шлюзы. Canvas никогда не заменяет этот уровень, поэтому ваши другие расширения WooCommerce продолжают работать. ### Два способа установки - **Поручите это мастеру настройки.** Выберите демо магазина во время настройки: на этапе установки плагинов WooCommerce будет установлен и активирован до запуска импорта, потому что магазину нужен плагин для торговли. - **Установите его самостоятельно** в разделе «Плагины», «Добавить новый», и запустите начальную настройку WooCommerce. Так стоит поступить, если вы добавляете магазин на уже работающий сайт. В любом случае пройдите настройку WooCommerce один раз и ответьте на её вопросы о стране, валюте и о том, что вы продаёте. Эти ответы позже влияют на налоги и доставку, и их долго и неприятно переделывать. Настройте сервис email-рассылки до того, как примете первый реальный заказ. Письма с подтверждением заказа по умолчанию уходят с вашего сервера через WordPress, а магазин, чьи чеки попадают в спам, создаёт обращения в поддержку, на которые вы не сможете ответить. ## Шаг 2: Начните с демо магазина или с пустого каталога Здесь у вас есть выбор, и на его обдумывание стоит потратить десять минут. ### Импорт демо магазина 21 из 88 демо — рабочий магазин WooCommerce. Импорт любого из них даёт товары, категории, атрибуты, образцы цветов, оформленный магазин, оформленную страницу товара, корзину и оформление заказа: всё уже на месте и доступно для редактирования. Это самый быстрый способ понять, как сочетаются элементы, а если вы решите отказаться от импорта, его можно откатить целиком. ### Создание на базе собственного каталога Если вы уже продаёте товары и у вас есть каталог в базе данных, выберите вариант «Только страницы» и добавьте демо в существующий сайт. Вы получите страницы демо и записи, которые они используют, без его настроек, меню и главной страницы, а ваш каталог останется на месте. В любом случае страницы WooCommerce на вашем сайте подхватываются, поэтому всегда есть только один магазин, одна корзина, одно оформление заказа и одна страница аккаунта. [Подробно о том, как работает импорт демо](https://canvaswp.com/ru/guides/import-a-wordpress-demo-website/) [Девять демо-магазинов WooCommerce](https://canvaswp.com/ru/wordpress-themes/ecommerce/) ## Шаг 3: Добавьте первые товары Товары — это записи WooCommerce, которые добавляются в разделе «Товары» в админке WordPress, и эта часть намеренно проста. Уделите время именно ей, а не вёрстке, ведь хорошая страница товара строится в первую очередь на хороших данных о товаре. - **Одна чёткая фотография на каждый товар,** снятая одинаково для всех позиций. Сетка каталога выглядит продуманной, когда пропорции совпадают, и наспех собранной, когда не совпадают. - **Краткое описание, которое отвечает на главный вопрос покупателя.** Размер, материал, срок доставки и что делать, если товар не подходит. - **Категории, которые совпадают с тем, как покупатели ищут товары,** а не с тем, как организован склад. - **Атрибуты для всего, что имеет вариации.** Цвет, размер, отделка. Задайте терминам цвета реальное значение цвета в админке, потому что именно оно позже превращает выпадающий список в образцы. - **Остаток на складе, вес и габариты**, если вы продаёте физические товары. Правила доставки используют эти данные. Добавьте три товара, прежде чем что-то проектировать. Макет, оценённый по одному товару-заглушке, придётся переделывать. ## Шаг 4: Оформите страницу магазина Магазин — это каталог, и его задача — как можно быстрее привести покупателя на страницу товара. Canvas даёт для этого блоки; обычно хватает одной настройки темы с тремя вариантами макета. ### Блоки Сетка товаров выводит товары из категории, по метке, поиску или из вручную выбранного списка. Карусель товаров делает то же самое в один ряд для главной страницы. Карточки категорий товаров ведут посетителей в раздел. Фильтр по цене помогает покупателям сузить длинный каталог. Каждый элемент представляет собой блок с панелью настроек, поэтому количество колонок, источник и сортировка задаются в интерфейсе, а не в коде. ### Базовый шаблон Сам магазин — это блочный шаблон, который можно открыть в Редакторе сайта. Разместите его на всю ширину, с левой боковой колонкой, с правой или с обеими, в зависимости от того, оправдано ли место фильтров и категорий в вашем каталоге. Всего 18 шаблонов магазина: для страницы магазина, страницы товара, архивов, корзины и оформления заказа. ### Значения по умолчанию для всего магазина В настройках темы собрано 39 параметров магазина на 5 вкладках: каталог, страница товара, корзина и оформление заказа, мини-корзина в шапке и режим каталога. Количество товаров на странице, пагинация, форма изображения товара, показ дополнительных фото галереи при наведении и то, что предлагает оверлей при наведении, задаются там. Блок, который задаёт один из этих параметров самостоятельно, всё равно имеет приоритет на странице, где он расположен. **Настройки темы, Магазин.** Значения по умолчанию для всего магазина, которые переопределяет любой блок со своими настройками. ## Шаг 5: Оформление страницы товара Это страница, которая продаёт, поэтому она заслуживает большего, чем стандартное расположение, которое используют все магазины в интернете. ### Соберите из частей Каждая часть страницы товара — это блок: галерея изображений, цена, рейтинг звёздами, мета-данные, краткое описание, образцы вариаций, кнопка добавления в корзину, вкладки, строка с кнопками «Поделиться» и связанные товары. Переставляйте их, меняйте оформление или полностью уберите любой, и страница продолжит работать, поскольку каждый блок запрашивает собственные данные у WooCommerce. ### Или начните с готового макета Если вы не хотите собирать страницу из частей, выберите один из готовых макетов отдельного товара и переставляйте элементы: стандартный вариант, закреплённое описание, которое следует за галереей при прокрутке, список, дизайн с акцентом на цвет, дизайн магазина, два макета галереи с настраиваемыми ссылками и варианты с левой, правой или двумя боковыми колонками. Назначьте макет для каждого товара в редакторе или задайте для магазина значение по умолчанию в Настройках темы. ### Что разместить над сгибом Фотография, название, цена, выбор варианта и кнопка «В корзину». Всё остальное, включая описание, которое большинство людей не читает, можно разместить ниже. Проверьте это на телефоне, прежде чем решите, что не согласны. ## Шаг 6: Корзина и оформление заказа Именно на этих двух экранах теряются деньги, и в большинстве тем их трогать нельзя. Здесь они такие же блоки, как всё остальное. ### Корзина Блок таблицы корзины для содержимого, блок итогов корзины для сумм и блок допродаж для того, что покупатель действительно может добавить. Держите текст коротким, а кнопку заметной. Самая частая ошибка в корзине — это стена промоматериалов между итогами и кнопкой оформления заказа. ### Оформление заказа Блок платёжных данных для формы, блок проверки заказа с перечнем покупаемых товаров и блок уведомлений с сообщениями, которые сообщают покупателю, что произошло. WooCommerce по-прежнему отвечает за заказ, оплату и письма, а вы решаете, как выглядит экран. ### Правила, которые окупаются сами - Запрашивайте только те поля, которые действительно нужны для доставки. - Показывайте общую сумму с доставкой до этапа оплаты. - Укажите срок доставки в днях, текстом. - Разместите политику возврата там, где её заметит сомневающийся покупатель, который совершает первую покупку. ## Шаг 7: Образцы вариаций, добавление в корзину и стили карточек В интеграцию входят три функции магазина, за каждую из которых обычно приходится ставить отдельный плагин. - **Цветовые образцы атрибутов.** Задайте цвет для значения атрибута товара в админке, и вариативные товары будут показывать цветные точки или кнопки вместо выпадающего списка. Покупатель выбирает вариацию визуально, и это важнее всего на телефоне. - **Добавление в корзину без перезагрузки страницы.** Товар, добавленный из сетки, карусели или наложения на карточке, обновляет корзину на месте: покупатель остаётся на той же странице, а корзина в шапке продолжает считать товары. - **Стили карточек товаров.** Задайте одну форму для всех изображений каталога, чтобы сетка выравнивалась, выберите, появляются ли дополнительные изображения галереи при наведении или воспроизводятся как слайд-шоу, и решите, что предлагает блок при наведении: покупку, быстрый просмотр или и то и другое. Все три являются настройками. Ни одна из них не требует фрагмента кода, дочерней темы или второго плагина, и каждую можно отключить, если вы предпочитаете более простое поведение. Некоторые темы продают этот функционал отдельно. OceanWP поставляет бесплатную интеграцию с WooCommerce и предлагает Ocean eCommerce Pro как отдельный продукт, а [сравнение Canvas с OceanWP](https://canvaswp.com/ru/compare/oceanwp/) объясняет, что входит в каждый тариф для магазина. ## Шаг 8: Платежи, скорость, затем тестовый заказ Сначала деньги, оформление в последнюю очередь. Пройдите по этому списку, прежде чем сообщать кому-либо, что магазин открыт. ### Коммерческая настройка в WooCommerce - Подключите платёжные шлюзы, которые планируете использовать, и пройдите их проверку. Обычно она занимает больше времени, чем вы ожидаете. - Настройте налоговые правила и зоны доставки для регионов, куда вы действительно отправляете товары. - Напишите страницы возврата средств, возвратов и доставки и добавьте ссылки на них в подвал и на страницу оформления заказа. ### Скорость в Canvas WooCommerce загружает скрипты и таблицы стилей на каждой странице сайта, в том числе на тех, которые ничего не продают. Пять переключателей это исправляют: отключают JavaScript WooCommerce на страницах, где не выводится содержимое магазина, выключают отслеживание атрибуции заказов, останавливают обращение скрипта фрагментов корзины к серверу на каждой странице с корзиной и убирают библиотеки проверки надёжности пароля и выбора вне страниц аккаунта и оформления заказа. Они входят в общий набор: 35 оптимизаций, и каждую из них можно отменить. ### Затем оформите реальный заказ Купите что-нибудь в своем магазине с телефона, через мобильный интернет. Оплатите реальной картой, если ваш платежный шлюз поддерживает тестовые возвраты. Проверьте, что письмо с подтверждением приходит и что заказ появляется в админке, а затем оформите возврат себе. Все, что вы обнаружите за эти пять минут, покупатель обнаружил бы вместо вас. **Производительность, вкладка WooCommerce.** Пять обратимых переключателей для скриптов, которые страница не использует. ## Источники Там, где это руководство описывает то, что находится за пределами самой Canvas, ниже приведены официальные страницы, которые это документируют. - [Установка и удаление WooCommerce](https://woocommerce.com/document/installing-uninstalling-woocommerce/) woocommerce.com · WooCommerce бесплатен, устанавливается с экрана «Плагины» и открывает собственный мастер настройки - [Страницы WooCommerce](https://woocommerce.com/document/woocommerce-pages/) woocommerce.com · WooCommerce назначает по одной странице для магазина, корзины, оформления заказа и аккаунта - [Настройка налогов в WooCommerce](https://woocommerce.com/document/setting-up-taxes-in-woocommerce/) woocommerce.com · Ставки налога задаются в настройках WooCommerce - [Настройка зон доставки](https://woocommerce.com/document/setting-up-shipping-zones/) woocommerce.com · Зона доставки — это географический регион, куда вы отправляете товары - [Отслеживание источников заказов](https://woocommerce.com/document/order-attribution-tracking/) woocommerce.com · Какие данные фиксирует атрибуция заказов и настройка WooCommerce, которая её отключает Что делать дальше ## Что делать дальше Два руководства по остальной части сайта вокруг магазина и полный обзор возможностей магазина. [Руководство **Создайте сайт ресторана** Импорт от начала до конца на реальном проекте, с последующими правками.](https://canvaswp.com/ru/guides/build-a-restaurant-website-with-wordpress/) [Руководство **Создавайте сайты для клиентов** Одна лицензия на всех клиентов: ключи, тестовые копии и порядок передачи сайта клиенту.](https://canvaswp.com/ru/guides/build-client-websites-with-wordpress/) [Продукт **Canvas и WooCommerce** 24 блока магазина и 18 шаблонов магазина.](https://canvaswp.com/ru/woocommerce/) Вопросы ## Частые вопросы [Полный FAQ](https://canvaswp.com/ru/faq/) ответит на остальные вопросы, а [документация](https://docs.canvaswp.com/) подробно описывает каждую настройку. **Нужен ли по-прежнему плагин WooCommerce?** Да, магазин на Canvas по-прежнему работает на плагине WooCommerce. Canvas добавляет блоки, шаблоны и параметры поверх него и оставляет плагин главным, поэтому заказы, товары, налоги, доставка и платежи остаются там, где их ожидают ваши другие расширения. Если вы начинаете с демо магазина, мастер настройки устанавливает и активирует WooCommerce до запуска импорта. **Нужно ли покупать блоки магазина отдельно?** Нет, блоки магазина Canvas входят в каждый тариф без дополнительной оплаты. Все 24 блока магазина относятся к премиальным блокам, и каждый тариф включает все премиальные блоки, а также все 18 шаблонов магазина и все 21 демо-магазин. Отдельного тарифа для e-commerce и дополнения для магазина нет. **Можно ли использовать их вместе с блоками WooCommerce?** Да, смешивайте их свободно: блоки магазина Canvas — обычные зарегистрированные блоки, поэтому они спокойно соседствуют с блоками WooCommerce и базовыми блоками в одном шаблоне и на одной странице. Заменяйте по одному элементу за раз и не трогайте остальной макет. **Появятся ли у меня два оформления заказа после импорта демо магазина?** Нет, после импорта демо магазина Canvas останется одно оформление заказа. Импортёр находит страницы магазина, корзины, оформления заказа и личного кабинета, которые уже есть на вашем сайте, и направляет на них меню и ссылки демо, поэтому у вас остаётся по одной странице каждого типа. Существующие товары и заказы не затрагиваются, а весь импорт можно откатить.