Карточка товара и понятное обещание
Карточка товара должна помочь понять предложение до добавления в корзину. Для цифрового файла особенно важны состав, формат, язык, лицензия и ограничения: по красивой обложке нельзя узнать, есть ли внутри пять заданий или одна страница. В «Полке» настроим single product template и уточним описания так, чтобы интерфейс согласовывался с реальными учебными файлами.
Исходное состояние — каталог показывает три simple products и «Практикум HTML». После урока страница товара соберёт gallery, название, price, краткий текст, выбор/добавление и подробное описание. Мы не делаем снимок якобы запущенной витрины: template подготовлен в архиве, его внешний вид и работа blocks остаются для вашей локальной проверки.
Общий шаблон получает текущий Product
Single product template не должен хранить название GRID-PDF прямо в разметке. На том же файле откроются FORM-ZIP и HTML-LAB. Поэтому post-title получает название текущего товара, product-price — цену, post-excerpt с Woo namespace — его short description. Add-to-cart-form использует тип позиции и предоставляет нужное действие, включая выбор variation.
В архиве полный theme/templates/single-product.html. Он опирается на текущие Woo block templates, сохраняя понятную структуру двух колонок. Названия gallery и add-to-cart-form сверены с официальным исходником.
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:woocommerce/store-notices /-->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:post-title {"level":1} /-->
<!-- wp:woocommerce/product-price /-->
<!-- wp:post-excerpt {"__woocommerceNamespace":"woocommerce/product-query/product-summary","excerptLength":100} /-->
<!-- wp:woocommerce/add-to-cart-form /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:woocommerce/product-details /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->Страница содержит один h1 через post-title. Несколько одинаковых больших заголовков не улучшают предложение: они затрудняют восприятие структуры. Подробный текст расположен в product-details, поэтому короткое объяснение рядом с ценой можно оставить действительно коротким. Не копируйте весь Description в Short description только ради большего количества текста над кнопкой.
Store Notices показывают результат операций. Если выбранная variation недоступна, сообщение должно происходить из актуального состояния WooCommerce. Статический предупреждающий абзац не заменит validation формы. При изменениях в Site Editor сохраните исходный template и помните, что пользовательская версия может иметь приоритет над файлом темы.
Обещание связано с файлом
Для GRID-PDF уточните: «Учебный TXT-конспект о трёх карточках CSS Grid. Язык русский. Личное использование в лаборатории. Проверка преподавателем и будущие обновления не входят». Такое описание конкретнее фразы «полный профессиональный курс». Оно соответствует маленькому файлу grid-notes.txt и не приписывает ему свойства, которых нет.
FORM-ZIP содержит HTML-пример формы без серверной отправки. Напишите это явно, чтобы покупатель не ожидал обработчик писем или готовую защиту формы. Мы позже создадим архив из подготовленного HTML и привяжем его через Downloadable files. Наличие кнопки в HTML fixture не означает, что форма отправляет реальные сведения.
У HTML-LAB сравните комплекты по предметному результату. Basic — три задачи по документу, заголовку и ссылке. Extended — те же три плюс форма с label и смысловые секции. Нельзя назвать Extended «с консультацией», если в лаборатории нет такой услуги. Variation price должна соотноситься с различием содержимого, а не только с другим словом в dropdown.
Эти условия являются учебным описанием, а не универсальной юридической офертой. Перед реальной продажей правила лицензии, возврата и информации для покупателя зависят от страны и конкретного договора. В этой серии мы не подставляем придуманные обязательные тексты и не подключаем реальные платёжные реквизиты.
Изображение помогает, но не заменяет свойства
Для галереи можно использовать собственную простую обложку с названием материала и учебным обозначением. Не выдавайте снимок чужого магазина за результат «Полки». Если изображение не подготовлено, пустая gallery или placeholder допустимы на этапе разработки; однако выпускная карточка должна осмысленно объяснять материал без него.
Публичную обложку загружают в Media Library. Продаваемый файл позже загружают через WooCommerce Edit product, чтобы использовать правила downloadable delivery. Это два разных объекта. Перенос TXT-конспекта в обычную общую медиатеку и вставка URL в описание сделает его доступным по прямой ссылке, минуя ожидаемый путь заказа.
Alternative text обложки отражает её информационный смысл. Если на ней только повторяется название, избыточное длинное описание может создать ненужный повтор. Если обложка показывает состав архива, alt должен передать важные элементы. Не заполняйте поле именем файла product-final2.png: оно рассказывает о рабочем хранении автора, а не о предложении.
Размер изображения связан с performance. Большой оригинал из графического редактора не обязательно нужен для небольшой gallery. WordPress может создать варианты размеров, но конкретную загрузку и responsive behavior следует проверить локально. В курсе нет измеренного Lighthouse результата и не обещается определённая скорость загрузки без наблюдений.
Действие соответствует выбранному комплекту
Откройте GRID-PDF: ожидается цена 12.00 и возможность добавить одну копию. Откройте HTML-LAB: должен быть понятный выбор Basic/Extended и соответствующая цена. Если кнопка неактивна, это может быть нормальным состоянием до выбора variation. Посетителю нужно видеть причину, а не считать магазин сломанным.
Не создавайте собственную кнопку со ссылкой на checkout, обходя форму выбора. Она может не передать variation ID и обязательные attributes. Стандартная add-to-cart-form связывает выбранные значения с операцией WooCommerce. Если требуется новый дизайн, меняют presentation в пределах поддерживаемого поведения, а не подменяют его случайным URL.
Для маленького экрана проверьте последовательность: заголовок, объяснение, цена, выбор и действие. Две columns на широком экране должны оставаться понятными после перехода в один поток. Focus по клавиатуре должен добраться до выбора и кнопки. Эти наблюдения оператор выполнит после запуска; исходники серии не подтверждают их автоматически.
Разбор карточки удобно начать с одного решения покупателя: нужен конспект или практикум с заданиями. Для GRID-PDF достаточно названия, состава текстового материала, цены и понятной кнопки. Для HTML-LAB добавляется выбор Basic либо Extended и объяснение двух дополнительных задач. Общий шаблон обслуживает оба предложения благодаря данным и динамическим блокам. Если ради различий приходится копировать весь template для каждой позиции, сначала проверьте, какие сведения относятся к товару и могут быть записаны в его описание или атрибуты.
Предметный конец урока — один общий template и четыре согласованных предложения. Заголовки, цены и variation options берутся из каталога, а текст объясняет фактические файлы. В следующем шаге добавление станет проверяемой строкой корзины: покупатель увидит не только обещание на карточке, но и выбранную позицию с суммой, которую можно проверить арифметически.