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

Версия плагина: 4.24.0
 
WordPress плагин YITH WooCommerce Product

Особенности плагина

  • Предлагайте дополнительные услуги на страницах вашего продукта (гарантия, страхование, специальные услуги по передаче, настройки и т.д.), чтобы увеличить стоимость заказа;
  • Продвигайте товары, которые являются необязательными или связаны с тем, который просматривают пользователи, чтобы побудить их приобрести больше товаров с тем же заказом;
  • Разрешить пользователям загружать фотографии, изображения или файлы для запроса индивидуального продукта;
  • Настройте свои параметры с помощью обширной библиотеки элементов, включенных в плагин: текстовые поля, раскрывающиеся списки выбора, переключатели, флажки, изображения, средства выбора даты, поля загрузки, образцы цветов и т.д.;
  • Используйте изображения, значки, этикетки и образцы цветов, чтобы показать доступные варианты продукта;
  • Установите правила зависимостей для отображения различных параметров в соответствии с выбором пользователя (например, показывать поле загрузки только в том случае, если пользователь установил флажок "Настроить продукт");

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

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

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

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

С помощью YITH WooCommerce Product Add-ons & Extra Options вы можете создать несколько блоков опций для вставки в свои продукты: после создания блока вы можете добавить необходимые параметры, выбрав элементы в потрясающей библиотеке (поля ввода, текстовые области, раскрывающиеся списки, флажки, изображения, метки, переключатели, поля загрузки, средства выбора даты и т.д.). Для каждого варианта вы можете установить дополнительную стоимость, которая будет добавлена к стандартной цене продукта, и через несколько минут вы будете готовы продавать сложные или настраиваемые продукты и предлагать любые дополнительные услуги для ваши клиенты.

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

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

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

После добавления опции в блок вы можете настроить способ ее отображения на странице продукта: указать, какой заголовок и/или описание показывать; добавить всплывающую подсказку и изображение, чтобы легко идентифицировать опцию (вы также можете выбрать, заменит ли это изображение изображение продукта по умолчанию, когда оно выбрано пользователем); вы также можете установить опцию как “обязательную” и решить, показывать ли ее как выбранную по умолчанию на странице.

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

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

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

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

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

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

Выберите, где на странице будет отображаться блок с параметрами (до или после кнопки “Добавить в корзину”), и настройте кнопку “Выбрать параметры” в циклах WooCommerce (т.е. Короткие коды товаров, страница магазина, страницы категорий и т.д.).

Расширьте возможности, скрыв кнопку “Добавить в корзину”, пока пользователь не выберет все необходимые опции. Только после того, как пользователь сделает выбор из всех доступных опций, появится кнопка, и пользователь сможет добавить товар в корзину.

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

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

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

В плагине вы найдете множество опций для настройки блоков опций. Вы можете использовать либо стиль темы (для флажков, переключателей, раскрывающихся списков и т.д.), либо стиль плагина; вы можете редактировать цвета (блокировать цвет фона, выделять цвет для выбранного параметра и т.д.), Отображать всплывающие подсказки и задавать их цвет и положение, указывать, показывать ли параметры в кнопке переключения (по умолчанию открыто или закрыто) и многие другие параметры стиля.

Спецификации:

Дата выхода: 20-05-2015
Дата обновления: 18-06-2025
Тип расширения: Платный
Лицензия: GPL
Тематика: Интернет-коммерция Специфические для WooCommerce
Совместимость: W5.x W6.x
Включает в себя: Плагин
Языковые пакеты: Английский
Разработчик: YIThemes

Рейтинг:
4.536496350365 1 1 1 1 1 (Оценок: 274)
4.536496350365 274

Скачивание по подписке!

Вам необходимо авторизоваться на сайте и приобрести клубную подписку!

Поделись с друзьями!

 

Руководство по настройке YITH WooCommerce Product для товарных опций WooCommerce

YITH WooCommerce Product в этой задаче относится к плагину YITH WooCommerce Product Add-Ons & Extra Options: инструменту для добавления платных и бесплатных опций на страницы товаров WooCommerce. В руководстве ниже разберём не рекламное описание, а практическую работу с плагином: как подготовить магазин, где создавать блоки опций, как назначать их товарам, как строить правила показа, как проверять цену, корзину и данные заказа.

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

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

YITH WooCommerce Product и связь настроек с результатом на странице товара
Обложка показывает основную идею руководства: настройка блока опций в админ-панели должна приводить к понятному результату на странице товара.

Когда товарным опциям нужен отдельный плагин, а не вариации WooCommerce

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

YITH WooCommerce Product Add-Ons & Extra Options решает именно эту задачу: он добавляет к товару блоки опций и позволяет настроить, какие поля видит покупатель. В официальной документации и на странице продукта подтверждены текстовые поля, текстовые области, списки, радиокнопки, чекбоксы, изображения или ярлыки, цветовые образцы, выбор даты, загрузка файла, выбор связанного товара и правила условного показа. Поэтому плагин особенно полезен там, где товар меняется под заказ, а не просто продаётся в нескольких стандартных вариантах.

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

Есть ещё одна важная граница: опции не должны скрывать складскую логику. Если дополнительный элемент является отдельным товаром со своим остатком, лучше использовать тип опции Product, если он доступен в вашей версии, или другой механизм комплектов. Документация YITH указывает, что Product-опция может связывать существующий товар или вариацию и учитывать склад выбранного связанного товара. Если же опция - просто текст гравировки, цвет печати или подарочная упаковка, отдельный склад обычно не нужен.

Кому плагин подходит и когда он будет лишним

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

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

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

Перед внедрением сформулируйте одну фразу: что покупатель должен выбрать или ввести перед добавлением товара в корзину. Если эту фразу нельзя объяснить без длинной схемы, сначала упростите коммерческое предложение, а уже потом настраивайте поля.

Что проверить перед установкой на рабочем магазине

YITH WooCommerce Product Add-Ons зависит от WooCommerce. В каталоге WordPress.org прямо указано, что WooCommerce должен быть установлен и активирован до работы плагина. Это базовая проверка, но не единственная. Плагин меняет поведение страницы товара, корзины и заказа, поэтому перед установкой нужно оценить тему, шаблон карточки товара, кэширование и сценарии оформления заказа.

Состояние WooCommerce и товаров

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

  • WooCommerce активен, страницы корзины и оформления заказа открываются без ошибок.
  • Есть тестовый товар с ценой, изображением и стандартной кнопкой Add to cart.
  • Включена возможность делать тестовый заказ через безопасный способ оплаты или через локальную тестовую среду.
  • Администратор понимает, где в заказе будут проверяться выбранные покупателем опции.

Тема, конструктор и шаблон товара

Самый частый риск для плагинов товарных опций - нестандартный шаблон страницы товара. Если тема или конструктор страницы заменяет стандартные WooCommerce hooks, блок опций может не появиться там, где ожидается. В help center YITH для такой ситуации указан шорткод [yith_wapo_show_options], но документация подчёркивает важное условие: он должен находиться внутри формы WooCommerce товара. Поэтому шорткод - не универсальная магическая вставка, а инструмент для шаблонов, где есть правильный контекст товара.

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

Кэш и оптимизация

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

Установка, активация и первая проверка без риска для заказов

Установка зависит от того, используете ли вы бесплатную версию из WordPress.org или коммерческий пакет разработчика. В статье не разбирается покупка, лицензирование и получение платной версии. Для уже имеющегося файла или бесплатной версии логика обычная: установить плагин, активировать его, убедиться, что появился пункт управления YITH и что WooCommerce продолжает работать.

  1. Сделайте резервную копию сайта или используйте staging-копию, если магазин принимает реальные заказы.
  2. Убедитесь, что WooCommerce активен, а тестовый товар открывается в публичной части сайта.
  3. Установите и активируйте плагин через Plugins или через загрузку ZIP-файла.
  4. Откройте раздел YITH и найдите пункт Product Add-ons.
  5. Не включайте сложные правила сразу. Создайте один простой блок с одним полем и назначьте его тестовому товару.

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

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

Блоки, наборы и назначение товарам: основа логики YITH Product Add-ons

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

Блок отвечает за область применения

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

Хорошая практика - называть блоки не по внутренним номерам, а по коммерческому смыслу: Gift wrap options, Custom print fields, Computer components. Через месяц такие названия быстрее объяснят, почему блок назначен категории, чем абстрактные Block 1 или Premium options.

Набор опций отвечает за тип выбора

Набор определяет, что именно делает покупатель: выбирает один вариант, выбирает несколько вариантов, вводит текст, загружает файл, выбирает дату или добавляет связанный товар. Это место, где важно не путать похожие элементы. Радиокнопки подходят для выбора одного варианта. Чекбоксы - для нескольких независимых дополнений. Select удобен, когда вариантов много, но изображения не нужны. Label or image полезен, когда покупателю нужно видеть цвет, форму, материал или визуальный вариант.

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

Опция отвечает за конкретный выбор и цену

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

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

Настройка типов полей, внешнего вида и поведения на странице товара

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

Текстовые поля и текстовые области

Input text подходит для коротких значений: имя для гравировки, инициалы, номер, короткая надпись. В документации указано, что для такого поля можно задавать минимальную и максимальную длину. Это особенно полезно, когда производство физически ограничено: например, на маленькой табличке нельзя разместить длинную фразу.

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

Чекбоксы, радиокнопки и списки

Радиокнопки используйте там, где допустим только один выбор. Это может быть тип упаковки, сторона печати, способ обработки, размер рамки. Чекбоксы подходят для независимых добавок: страховка, ускоренная обработка, подарочная открытка, дополнительный аксессуар. Список Select удобен, когда варианты занимают много места и не требуют визуального сравнения.

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

Изображения, ярлыки, цветовые образцы и замена главного изображения

Для визуальных товаров лучше работают Label or image, Color swatch и Color picker. Покупатель быстрее понимает результат, когда видит цвет, материал, картинку аксессуара или пример отделки. Документация YITH также описывает настройки замены главного изображения товара: можно не заменять изображение, заменить его изображением блока или изображением выбранной опции.

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

Файлы, даты и связанные товары

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

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

Опция Product отличается от обычных дополнений тем, что связывает с основным товаром другой товар или вариацию WooCommerce. Это хороший вариант для рамок, аксессуаров, дополнительных комплектующих и услуг, которые сами существуют в каталоге. В документации указано, что такой тип может использовать цену связанного товара или скидку для связанного товара, купленного как add-on.

Цена, обязательность и корзина: как не запутать покупателя

Цена опции может не менять стоимость товара, увеличивать её, уменьшать её, работать как фиксированная сумма или как процент. Для некоторых типов доступны особые расчёты: цена по длине строки для текстовых полей и текстовых областей, расчёт по числовому значению, использование цены связанного товара. Это мощно, но именно здесь чаще всего появляются ошибки ожиданий.

Где показывать стоимость

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

Для сложных товаров полезно включить отображение деталей опций в корзине и проверить, насколько понятны подписи. В документации YITH есть настройки Show options in cart page, Allow options editing in the cart, Show the replacement image in the cart и Hide options in the order email. Не включайте всё сразу. Сначала решите, кто должен видеть эти данные: покупатель в корзине, менеджер в заказе, получатель письма или только администратор.

Когда делать опцию обязательной

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

В некоторых сценариях удобно скрывать кнопку Add to cart до выбора всех обязательных опций. Эта возможность описана на странице продукта. Она может повысить дисциплину заполнения, но её нужно тестировать на мобильном экране: покупатель должен видеть, что именно осталось выбрать, иначе он решит, что товар нельзя купить.

Как проверять расчёт

Для каждого платного блока сделайте тестовую таблицу вручную: базовая цена товара, выбранные опции, ожидаемая доплата, ожидаемая итоговая сумма. Затем повторите выбор в публичной части сайта и сравните цену на странице товара, в корзине и в заказе. Если цена совпала только на странице товара, но не в корзине, внедрение ещё не готово.

Схема расчёта цены и сохранения опций YITH WooCommerce Product в корзине
Схема показывает путь цены: базовый товар, выбранные опции, итог на странице товара, строка корзины и данные заказа.

Условная логика, роли пользователей и видимость блоков

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

Где настраивается условие

Важный нюанс из документации: правило условной логики настраивается внутри того набора, который должен скрываться или показываться. Если у вас есть вопрос «Нужна персонализация?» и поле «Загрузите логотип», правило нужно задавать на поле загрузки, потому что именно оно зависит от ответа. Это кажется мелочью, но экономит много времени при диагностике.

Пример логики: покупатель выбирает Yes в радиокнопке Customize product. Только после этого появляется поле загрузки файла и поле для текста. Если выбран No, эти поля скрыты, а товар можно купить без персонализации. Такой подход уменьшает визуальный шум и снижает количество пустых обязательных полей.

Видимость для ролей

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

Почему лучше начинать с простых правил

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

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

Рассмотрим сценарий, близкий к официальным use case YITH: магазин продаёт футболку, а покупатель может выбрать цвет, размер, загрузить логотип и добавить короткий текст. Цель - получить один понятный товар, который не требует создавать вариацию на каждую комбинацию печати, файла и надписи.

Цель и подготовка

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

Подготовка: нужен простой товар WooCommerce с базовой ценой и изображением, активный YITH WooCommerce Product Add-ons, тестовый покупатель и возможность оформить тестовый заказ. Если магазин использует вариации размера или цвета, заранее решите, что останется вариациями, а что будет add-on. Не дублируйте размер одновременно в вариациях и в опциях без причины.

Шаги настройки

Блок и назначение

  1. Создайте блок в YITH - Product Add-ons - Options blocks и назовите его так, чтобы было понятно назначение, например Custom T-shirt.
  2. Назначьте блок только тестовому товару или отдельной тестовой категории, чтобы случайно не показать поля на всём каталоге.
  3. Добавьте набор Label or image для цвета. Для каждого цвета задайте понятную подпись и изображение, если оно помогает покупателю.
  4. Добавьте набор для размера. Если размеры уже сделаны вариациями WooCommerce, этот шаг пропустите.
  5. Добавьте поле File upload для логотипа. В описании укажите требования к файлу простым языком.
  6. Добавьте поле Textarea или Input text для короткой надписи и включите ограничение длины, если производство ограничено.
  7. Для платных опций выберите увеличение цены и задайте стоимость так, чтобы покупатель видел причину изменения.
  8. Если логотип и текст нужны только при выборе персонализации, добавьте радиокнопку Customize product и настройте условный показ зависимых полей.

Цена и данные заказа

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

Проверка результата

Откройте товар в публичной части сайта и пройдите путь покупателя. Выберите цвет, размер, загрузите тестовый файл, введите надпись и проверьте, как меняется цена. Затем добавьте товар в корзину. В корзине должны быть понятны выбранные опции, а в заказе должны сохраниться данные, необходимые для обработки. Если включено редактирование опций в корзине, проверьте, что кнопка Edit options открывает ожидаемое окно и не теряет данные.

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

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

Практичные идеи применения в разных магазинах

YITH Product Add-ons ценен не только для одной футболки. Если смотреть на продукт как на конструктор вопросов к покупателю, сценариев становится больше. Ниже идеи, которые опираются на подтверждённые типы полей: текст, файл, дата, чекбоксы, изображения, связанные товары, цена и условная логика.

Подарки и сувениры

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

Еда, наборы и товары с множественным выбором

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

Техника и комплектующие

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

Услуги и цифровые заказы

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

Матрица сценариев применения YITH WooCommerce Product для разных типов товаров
Матрица сценариев помогает выбрать, какой тип поля использовать для подарков, наборов, техники и услуг.

Проверка результата после запуска

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

Путь покупателя

Откройте товар в приватном окне браузера. Выберите минимальный набор опций, затем максимальный набор, затем комбинацию с условной логикой. Проверьте, что обязательные поля ясно обозначены, скрытые поля появляются вовремя, цена меняется ожидаемо, а кнопка Add to cart не исчезает без объяснения. На мобильном экране проверьте, что подписи и изображения не становятся слишком мелкими.

Путь корзины и заказа

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

Путь обновления и отката

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

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

Плагин работает внутри WooCommerce, но итоговый вывод зависит от темы и шаблона товара. Поэтому совместимость лучше проверять не в абстрактном режиме, а на той карточке товара, которую видит покупатель. Если страница товара собрана нестандартно, начните с официальной рекомендации YITH для случая, когда add-ons не выводятся: проверьте тему, временно переключитесь на стандартную тему для теста и используйте шорткод [yith_wapo_show_options] только в корректном месте внутри формы товара.

Не правьте файлы плагина. После обновления такие изменения пропадут, а в магазине будет трудно понять, почему поведение изменилось. Для внешнего вида сначала используйте настройки Display & Style: позицию изображений, сетку, количество элементов в строке, переключатель, показ или скрытие подписи и цены. Если этого недостаточно, добавляйте аккуратный CSS в дочернюю тему или в стандартный механизм дополнительного CSS темы, но только после просмотра реальных классов в вашем шаблоне через инструменты браузера.

Я не добавляю готовый CSS-snippet с классами YITH, потому что публичная документация не фиксирует стабильный контракт фронтенд-классов для всех тем и версий. Без подтверждения конкретного селектора такой код был бы хрупким. Безопаснее дать правило: сначала настройте внешний вид штатными параметрами, затем точечно меняйте CSS только по реальному HTML вашего товара, не меняя PHP, шаблоны ядра WooCommerce и файлы плагина.

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

Почему опции не работают как ожидалось и как это диагностировать

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

Опции не отображаются на странице товара

Быстрая проверка назначения

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

Что проверить: откройте список блоков, убедитесь, что блок включён, назначен нужному товару и доступен текущему типу пользователя. Затем временно проверьте товар на стандартной теме или в простом шаблоне. Если проблема связана с конструктором, используйте подтверждённый шорткод [yith_wapo_show_options] внутри формы товара, а не в произвольном месте страницы.

Цена меняется не так, как ожидалось

Изоляция одной платной опции

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

Что проверить: для одной опции выпишите базовую цену, тип расчёта и ожидаемую сумму. Отключите другие платные опции и повторите тест. Если расчёт стал понятным, возвращайте остальные опции по одной. Если цена связанного товара влияет на итог, проверьте сам связанный товар в WooCommerce: цена, наличие, вариации и налоговые настройки.

Условное поле не появляется

Симптом: покупатель выбирает вариант, но зависимое поле остаётся скрытым. Возможные причины: правило настроено не на зависимом наборе, выбран режим All of the following rules вместо более подходящего условия, проверяется не тот вариант, кэш или оптимизация задерживает JavaScript.

Что проверить: откройте настройки именно того поля, которое должно появиться. Убедитесь, что условие ссылается на правильный набор или опцию, а выбранное состояние совпадает с логикой: Selected, Not selected, Empty или Not empty. После сохранения очистите кэш страницы товара и проверьте в приватном окне.

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

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

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

Кнопка добавления в корзину недоступна

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

Что проверить: временно отключите скрытие кнопки и обязательность для спорного набора, затем повторите тест. Если товар добавился, возвращайте ограничения по одному и следите, какое поле блокирует покупку. Откатывайте не весь блок, а последнюю включённую спорную настройку.

Диагностика ошибок YITH WooCommerce Product на странице товара и в корзине
Диагностическая карта связывает видимый симптом с причиной, проверкой, исправлением и повторным тестом.

Видео по созданию блока опций

У YITH есть точный ролик по созданию блока опций для Product Add-ons. Он полезен тем, кто хочет увидеть интерфейсный путь: создать блок, назначить его товару, добавить опции и проверить результат на странице продукта. Видео закрывает намерение «как пользоваться YITH WooCommerce Product Add-ons» именно для первого практического запуска, поэтому его уместно смотреть после прочтения разделов о блоках и практическом примере.

Вопросы, которые стоит решить до запуска

Можно ли использовать YITH WooCommerce Product Add-ons вместо вариаций?

Можно, если речь идёт о дополнительных параметрах, персонализации, услугах, текстах, файлах и визуальных вариантах. Но если вариант товара влияет на SKU, склад, изображение и базовую структуру каталога, стандартные вариации WooCommerce часто остаются более правильным ядром товара.

Где после установки искать настройки?

После активации в админ-панели появляется раздел YITH с пунктом Product Add-ons. В документации для блоков указан путь YITH - Product Add-ons - Options blocks. Интерфейс может немного отличаться между бесплатной и платной версиями, поэтому точный набор вкладок сверяйте с вашей установленной версией.

Почему в бесплатной версии может не быть нужной функции?

У продукта есть бесплатная версия в WordPress.org и коммерческая версия у разработчика. Страница продукта содержит сравнение Free Vs Premium, а WordPress.org описывает возможности бесплатной версии отдельно. Если конкретная опция не видна в вашей админ-панели, сначала проверьте таблицу сравнения и документацию, а не пытайтесь найти её в скрытых настройках.

Что делать, если опции не видны в Elementor или другом конструкторе?

Проверьте, выводит ли шаблон стандартную форму товара WooCommerce. YITH указывает шорткод [yith_wapo_show_options] для случаев, когда тема или конструктор не выводит add-ons через стандартные hooks. Но шорткод должен быть внутри формы WooCommerce, иначе выбор может не попасть в добавление товара в корзину.

Можно ли скрывать цену опций?

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

Как проверить файл-загрузку перед запуском?

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

Повлияет ли плагин на скорость страницы товара?

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

Когда лучше выбрать другой плагин?

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

Когда YITH WooCommerce Product будет удачным выбором

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

Перед переносом на рабочий товар создайте тестовую копию, проверьте вывод в вашей теме, сделайте тестовый заказ и убедитесь, что менеджер понимает выбранные опции без дополнительных объяснений. Если этот путь прошёл без ошибок, можно скачать последнюю версию YITH WooCommerce Product и переходить к аккуратной настройке на реальном каталоге.

Автор: Редакция JoomFox.org

Вы не зарегистрированы, чтобы оставлять комментарии.