Основное Магазин
Форма «В корзину» с количеством
wp="add-to-cart" Покупатель выбирает количество и добавляет товар без перезагрузки страницы; счётчик корзины и мини-корзина обновляются сразу.
Куда ставить
На <form> с кнопкой отправки. Внутри: wp="product-qty" на поле количества, wp="product-qty-minus" и -plus на кнопки.
wp="stocked" оборачивает то, что видно, когда товар есть, wp="not-stocked" — то, что видно, когда он закончился.
Пример: покупка пачки зёрен
Вёрстка single-product.html
<form class="buy" wp="add-to-cart">
<div wp="stocked">
<a href="#" wp="product-qty-minus">−</a>
<input type="number" wp="product-qty">
<a href="#" wp="product-qty-plus">+</a>
<input type="submit" value="Add to cart" class="button">
</div>
<div wp="not-stocked">Sold out, back next roast.</div>
</form>В админке Products → Edit product
Regular price ($) 14.00
Stock status In stock
Stock quantity 12
На сайте страница товара
Ethiopia Yirgacheffe
− 1 +
Add to cart
Что важно
- Нужен WooCommerce.
- Количество не поднимется выше остатка, если у товара ведётся учёт запасов.
- Кнопки «−» и «+» работают только внутри формы.
- Для товаров с вариантами есть отдельные значения цены и наличия варианта.
Частые ошибки
Журнал сборки — вкладка «Логи» вашего проекта на themeforge.pro; те же замечания показывает бесплатная проверка разметки.
Так не надо
<a href="#" class="button" wp="add-to-cart">Add to cart</a>На ссылке: сборка пишет об атрибуте в журнал и убирает его.
Так правильно
<form wp="add-to-cart">
<input type="submit" value="Add to cart" class="button">
</form>Форма с кнопкой отправки.
Альтернативная запись
wp="add_to_cart" работает так же: сборка даёт одинаковую тему.