Core Shop
An “Add to cart” form with quantity
wp="add-to-cart" The buyer picks a quantity and adds the product without a page reload; the cart counter and mini cart update at once.
Where it goes
On a <form> with a submit button. Inside: wp="product-qty" on the quantity field, wp="product-qty-minus" and -plus on the buttons.
wp="stocked" wraps what is shown when the product is in stock, wp="not-stocked" what is shown when it is sold out.
Example: buying a bag of beans
Markup 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>In the admin Products → Edit product
Regular price ($) 14.00
Stock status In stock
Stock quantity 12
On the site the product page
Ethiopia Yirgacheffe
− 1 +
Add to cart
What matters
- Needs WooCommerce.
- The quantity cannot go above the stock when the product tracks stock.
- The “−” and “+” buttons work only inside the form.
- For products with variations there are separate values for the variation’s price and stock.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
Not like this
<a href="#" class="button" wp="add-to-cart">Add to cart</a>On a link: the build logs the attribute and drops it.
Like this
<form wp="add-to-cart">
<input type="submit" value="Add to cart" class="button">
</form>A form with a submit button.
Alternative spelling
wp="add_to_cart" works the same: the build gives an identical theme.