Тема для WooCommerce с блоками для каждого экрана магазина
Создавайте страницу товара, сетку магазина, корзину и оформление заказа из блоков в редакторе, который даёт WordPress, а затем начните с демо, которое сразу открывается как рабочий магазин. WooCommerce ведёт заказы, а Canvas отвечает за дизайн.
Обновлено
24 блока для четырёх экранов, которые продают
Каждый элемент магазина WooCommerce, который видит покупатель, — это блок с панелью настроек, поэтому его можно переместить, изменить оформление или убрать, не трогая файлы шаблонов.
Страница товара 11 блоков
Соберите макет одного товара блок за блоком или начните с одного из готовых шаблонов и переставьте его части.
Product Images Included with any plan
Выводит главное изображение товара WooCommerce и необязательные миниатюры галереи.
Product Gallery Linker Included with any plan
Полоса миниатюр, которая переводит карусель галереи товара к тому изображению, на которое вы нажали.
Цена товара Входит в любой тариф
Выводит цену товара WooCommerce, включая цену со скидкой и форматирование валюты.
Product Rating Included with any plan
Выводит звёздный рейтинг и, при необходимости, количество отзывов для текущего товара WooCommerce.
Product Meta Входит в любой тариф
Выводит карточку с метаданными товара: SKU, категориями и метками.
Product Short Description Included with any plan
Выводит краткое описание товара с сохранённой разметкой абзацев.
Образцы вариаций Входит в любой тариф
Цветные точки или кнопки-капсулы для выбора вариации вариативного товара.
Add to Cart Входит в любой тариф
Выводит форму добавления в корзину WooCommerce для текущего товара с необязательным полем количества.
Product Tabs Входит в любой тариф
Выводит вкладки данных товара WooCommerce: «Описание», «Дополнительная информация» и «Отзывы».
Product Share Included with any plan
Выводит блок «Поделиться:» со ссылками на соцсети для текущего товара WooCommerce.
Похожие товары Входит в любой тариф
Выводит сетку товаров WooCommerce, связанных с текущим товаром. Отображается только в шаблонах одиночного товара.
Магазин и каталог: 5 блоков
Сетки, карусели, карточки категорий и фильтр по цене, каждый из которых может выводить данные из категории, метки, поиска или вручную заданного списка.
Товары Входит в любой тариф
Выводит товары WooCommerce в виде сетки или списка. Фильтрует по источнику, категории, метке и порядку сортировки.
Product Categories Included with any plan
Выводит категории товаров WooCommerce в виде адаптивной сетки карточек с миниатюрами, названиями и количеством товаров.
Product Carousel Included with any plan
Выводит товары WooCommerce в прокручиваемой карусели owl-carousel. Поддерживает автовоспроизведение, стрелки навигации, точки и адаптивные брейкпоинты.
Store Price Filter Included with any plan
Регулятор диапазона цен с двумя ползунками, который фильтрует сетку товаров прямо на странице.
Conference Tickets Included with any plan
Блоки с ценами для категории билетов, в каждом выбор количества и активная ссылка «Добавить в корзину».
Корзина: 3 блока
Страница корзины, которую вы оформляете, с допродажами, которые покупатели реально видят.
Cart Table Входит в любой тариф
Отображает таблицу корзины WooCommerce с позициями, количеством и итогами.
Итоги корзины Входит в любой тариф
Отображает панель итогов корзины WooCommerce, включая промежуточную сумму, доставку и кнопку оформления заказа.
Сопутствующие товары Входит в любой тариф
Выводит сопутствующие товары из текущей корзины WooCommerce. Отображается только тогда, когда корзина активна и содержит сопутствующие товары.
3 блока оформления заказа
Форма оплаты, проверка заказа и уведомления, которые сообщают покупателю, что только что произошло.
Checkout Billing Included with any plan
Выводит форму платёжного адреса WooCommerce при оформлении заказа.
Checkout Order Review Included with any plan
Выводит сводку заказа с позициями и итогами на странице оформления WooCommerce.
WooCommerce Notices Входит в любой тариф
Выводит уведомления WooCommerce: ошибки, сообщения об успешном выполнении и информационные уведомления.
В других разделах магазина 2 блока
Блоки магазина, которые не входят в четыре экрана выше.
Список желаний Входит в любой тариф
Товары, которые покупатель сохранил, с ценой, остатком на складе и кнопкой «Добавить в корзину». Разместите его на странице, выбранной в Настройках темы, в разделе «Список желаний».
Кнопка списка желаний Входит в любой тариф
Сохраняет текущий товар в список желаний покупателя. Используйте его в шаблонах товаров и карточках товаров.
Магазин одежды
Каталог модной одежды со страницами коллекций, товарами с вариациями и корзиной в шапке, которая показывает количество товаров.
Темы для e-commerce
Мебель
Продажа и аренда в одном каталоге: сетка товаров и страница отдельного товара собраны из блоков.
Темы для дизайна интерьеров
Вино
Магазин вина, в котором дизайн подчеркивает фотографии продукции, а страницы магазина остаются на заднем плане.
Темы для ресторановТри из 21 демо-магазина. Каждая часть, которую покупатель видит на этих страницах, — это блок с панелью настроек.
Что делают покупатели без перезагрузки страницы
Три возможности магазина, каждая из которых обычно требует отдельного плагина, входят в состав интеграции.
Цветовые образцы атрибутов
Задайте цвет для значения атрибута товара в админке, и вариативные товары вместо выпадающего списка будут показывать цветные точки или кнопки-переключатели, чтобы покупатель выбирал вариацию по внешнему виду.
Добавление в корзину через AJAX
Добавление товара из сетки, карусели или оверлея карточки обновляет корзину на месте. Покупатель остаётся на странице, которую просматривал, а мини-корзина в шапке продолжает показывать количество товаров.
Стили карточек товара
Задайте для всех изображений каталога одну форму, чтобы карточки выровнялись, выберите, будут ли дополнительные изображения галереи появляться при наведении или проигрываться как слайд-шоу, и укажите, что предлагает оверлей при наведении: покупку, быстрый просмотр или оба варианта.
18 шаблонов магазина в редакторе сайта
Каждый экран магазина — это шаблон блоков, который вы открываете, редактируете и сбрасываете в Редакторе сайта так же, как любой другой шаблон блоков.
Макеты страниц отдельного товара
Оформите страницу товара как по умолчанию, с липкой сводкой, которая следует за галереей, в виде списка, с цветовым акцентом, в стиле магазина, в одном из двух макетов галереи с настраиваемыми ссылками или с левой, правой или двойной боковой колонкой.
Макеты страниц магазина
Разместите сам магазин на всю ширину, с левой или правой боковой колонкой, либо с колонками с обеих сторон, чтобы фильтры и категории располагались там, где это нужно вашему каталогу.
Архивы, корзина и оформление заказа
Архив магазина, архивы категорий товаров, корзина и оформление заказа идут отдельными шаблонами вместе с переопределениями шаблонов WooCommerce, которые предоставляет тема.
Шаблоны магазина отображаются в группе woocommerce на собственной панели «Шаблоны» в Редакторе сайта, рядом с шаблонами Canvas, и сбрасываются с того же экрана.
Назначьте макет для каждого товара в редакторе или задайте значение по умолчанию для всего магазина в Настройках темы. Шаблон, который вы настроили в Редакторе сайта, сохраняется при обновлениях, а Canvas сообщает вам, какие шаблоны изменились после обновления.
39 параметров магазина, 5 вкладок
Общие значения по умолчанию для каталога, страницы товара, корзины и оформления заказа, а также мини-корзины в шапке, плюс режим каталога для магазинов, которые принимают заявки. Здесь задаются количество товаров на странице, пагинация, форма изображений товара, дополнительные изображения галереи и оверлей карточки. Блок, который задаёт один из этих параметров самостоятельно, всё равно имеет приоритет на той странице, где он размещён.
- Каталог: число товаров в ряду на каждом размере экрана, форма изображения, поведение при наведении, значок скидки
- Страница товара: что показывает экран отдельного товара и закрепленная панель добавления в корзину
- Корзина и оформление заказа: индикатор прогресса бесплатной доставки и оформление заказа без отвлекающих элементов
- Мини-корзина: что делает корзина в шапке, когда покупатель добавляет товар
- Режим каталога: скрыть цены и кнопку покупки, показать кнопку запроса
Настройки магазина, которые помогают продавать Режим каталога Список желаний
Пять переключателей WooCommerce
WooCommerce загружает скрипты и таблицы стилей на каждой странице сайта, в том числе на тех, что ничего не продают. Эти пять переключателей отключают это, и каждый из них можно отменить.
- Удаление JavaScript WooCommerce на страницах без вывода магазина
- Отключите отслеживание атрибуции заказов, если не читаете эти отчёты
- Останавливает опрос скрипта фрагментов корзины при каждой загрузке страницы
- Отключите библиотеку проверки надёжности паролей вне страниц аккаунта и оформления заказа
- Отключение встроенной библиотеки Select2 вне страниц оформления заказа и личного кабинета
21 демо — это рабочие магазины WooCommerce
Товары, категории, атрибуты, корзина и оформление заказа импортированы и готовы к тестовому заказу. Любой из них можно посмотреть вживую, прежде чем решить.
Демо Bag Store, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 9 страниц · Что устанавливается: блоки и типы контента демо «Bag Store»
Демо CanvasRoam, предпросмотр в реальном времени (открывается в новой вкладке)
Портфолио и личные сайты · 10 страниц · Что устанавливается: блоки и типы контента демо CanvasRoam
Демо Christmas Store, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 6 страниц
Демо Clothing Store, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 19 страниц · Что устанавливается: блоки и типы контента демо «Clothing Store»
Демо Conference, предпросмотр в реальном времени (открывается в новой вкладке)
События и свадьбы · 25 страниц · Что устанавливается: блоки и типы контента демо Conference
Демо Drone, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 12 страниц
Демо eBook, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 9 страниц
Демо Fashion Shop, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 25 страниц
Демо Fashion Store, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 16 страниц
Демо FORM 2026, предпросмотр в реальном времени (открывается в новой вкладке)
События и свадьбы · 14 страниц · Что устанавливается: блоки и типы контента демо FORM 2026
Демо Furniture, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 12 страниц
Демо Game of Canvas, предпросмотр в реальном времени (открывается в новой вкладке)
Развлечения и сообщества · 12 страниц · Что устанавливается: блоки и типы контента демо Game of Canvas
Демо Illustrator, предпросмотр в реальном времени (открывается в новой вкладке)
Портфолио и личные сайты · 7 страниц · Что устанавливается: блоки и типы контента демо Illustrator
Демо Jewelry Boutique, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 17 страниц
Демо Pottery Shop, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 12 страниц
Демо Speaker Store, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 11 страниц
Демо Supplement Store, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 13 страниц
Демо Wildroot Gear, предпросмотр в реальном времени (открывается в новой вкладке)
Магазины и e-commerce · 14 страниц · Что устанавливается: блоки и типы контента демо «Wildroot Gear»
Страницы магазина подключаются, а не дублируются
Типичный страх при импорте дизайна магазина — получить два оформления заказа. Canvas сопоставляет страницы WooCommerce из демо со страницами, которые уже есть на вашем сайте.
Экран импорта, через который загружается любое демо магазина, и откат, который его отменяет.
Один магазин, одна корзина, одно оформление заказа
Импортер находит ваши существующие страницы WooCommerce и сразу направляет на них меню и ссылки демо.
Обратимо
Всё, что создал импорт, отслеживается, поэтому один экран удаляет демо-контент и восстанавливает настройки и меню, которые были раньше.
Включённые товары
Демонстрационные товары, категории, атрибуты и образцы цветов поставляются вместе с дизайном, поэтому каталог выглядит корректно, пока вы заменяете их своими.
Или только страницы
Choose the page-scoped import and you take the demo's pages without its Theme Options, its menus or its front page.
Продажи с Canvas
С чего чаще всего начинают владельцы магазинов. Подробно о каждом блоке и параметре рассказывает документация.
Нужен ли по-прежнему плагин WooCommerce?
Да, Canvas добавляет блоки, шаблоны и параметры поверх WooCommerce и ничего в нём не заменяет. Заказы, товары, налоги, доставка и платежи остаются в WooCommerce, где их ожидают ваши другие плагины. Если вы начинаете с демо магазина, мастер настройки установит и активирует WooCommerce перед запуском импорта.
Заменит ли импорт демо магазина мои страницы магазина и оформления заказа?
Нет, импортер Canvas использует уже существующие страницы WooCommerce на вашем сайте, поэтому вторых страниц магазина, корзины, оформления заказа или учётной записи не появляется. Существующие товары и заказы остаются без изменений.
Можно ли сочетать их с собственными блоками WooCommerce?
Да, блоки магазина Canvas являются обычными зарегистрированными блоками, поэтому они работают рядом с блоками WooCommerce и стандартными блоками WordPress в одном шаблоне и на одной странице. Можно заменять их по одному, не переделывая весь макет.
Как работают цветовые переключатели?
Задайте цвет для значения атрибута товара в админке WordPress, и блок Canvas Variation Swatches выведет этот атрибут цветными точками или кнопками вместо выпадающего списка на странице товара и в шаблонах, которые его используют.
Входят ли блоки магазина в ваш тариф?
Да: все 24 блока магазина Canvas относятся к премиум-блокам, и каждый тариф включает все премиум-блоки. Отдельного дополнения для магазина и тарифа eCommerce нет. Другие темы часто продают это отдельно: быстрый просмотр — функция Astra Pro, а OceanWP продаёт свой плагин eCommerce Pro как отдельный продукт.
Занимайтесь магазином, а не технической рутиной
В каждый тариф входят все 24 блока для магазина, все 18 шаблонов для магазина и все 21 демо-магазин. Отдельного тарифа для e-commerce, на который нужно перейти, не существует.