Recipe 5 steps

A product page: price, description and buying

One template for every product in the shop: the client edits the image, price, description and stock in the WooCommerce product, and the look of the page stays yours.

What you get

Markup single-product.html

<main class="product">
  <img class="product__img" src="images/bean.jpg" alt="" wp="post-image">
  <h1 wp="post-title">Ethiopia Yirgacheffe</h1>
  <div class="product__prices">
    <div class="product__price" wp="product-price">$14.00</div>
    <div class="product__price" wp="product-price-sale">$12.00</div>
    <div class="product__price is--old" wp="product-price-regular">$14.00</div>
  </div>
  <div class="product__text" wp="post-content">
    <p>Floral, with notes of bergamot and peach.</p>
  </div>
  <form class="buy" wp="add-to-cart">
    <div class="buy__row" wp="stocked">
      <a href="#" class="buy__step" wp="product-qty-minus">−</a>
      <input type="number" class="buy__qty" wp="product-qty">
      <a href="#" class="buy__step" wp="product-qty-plus">+</a>
      <input type="submit" value="Add to cart" class="button">
    </div>
    <div class="buy__soldout" wp="not-stocked">Sold out, back next roast.</div>
  </form>
</main>

In the admin Products → Ethiopia Yirgacheffe

Products → Ethiopia Yirgacheffe

Regular price ($): 14.00
Sale price ($): 12.00
Stock status: In stock
Product image: bean.jpg

On the site product page

bean.jpg Ethiopia Yirgacheffe

Sale $12.00

Was $14.00

Floral, with notes of bergamot and peach.

− 1 + Add to cart

During a sale the regular price is hidden, and your style strikes through the old one.

Step by step

Image and name

wp="post-image" and wp="post-title" show the product’s image and name.

<img class="product__img" src="images/bean.jpg" alt="" wp="post-image">
<h1 wp="post-title">Ethiopia Yirgacheffe</h1>

Price

Three blocks side by side: the regular, sale and old price. The theme shows the ones that apply: the regular one without a sale, the other two during one.

<div class="product__prices">
  <div class="product__price" wp="product-price">$14.00</div>
  <div class="product__price" wp="product-price-sale">$12.00</div>
  <div class="product__price is--old" wp="product-price-regular">$14.00</div>

Description

wp="post-content" on a <div>: the product description from its editor.

<div class="product__text" wp="post-content">
  <p>Floral, with notes of bergamot and peach.</p>

Buying

wp="add-to-cart" on a <form>: inside are the quantity with “−” and “+” buttons and a submit button. wp="stocked" wraps what is visible while the product is in stock.

<form class="buy" wp="add-to-cart">
  <div class="buy__row" wp="stocked">
    <a href="#" class="buy__step" wp="product-qty-minus">−</a>
    <input type="number" class="buy__qty" wp="product-qty">
    <a href="#" class="buy__step" wp="product-qty-plus">+</a>
    <input type="submit" value="Add to cart" class="button">

Out of stock
wp="not-stocked" is the block shown instead of buying when the product has run out.
```
<div class="buy__soldout" wp="not-stocked">Sold out, back next roast.</div>
```

What matters

Needs WooCommerce.
The quantity never goes above the stock when the product tracks inventory.
Product reviews are marked up separately: see the comments and reviews recipe.

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>

The button is a link: the build notes the attribute in the log and removes it, and nothing goes into the cart.

Like this

<form class="buy" wp="add-to-cart">
  <input type="submit" value="Add to cart" class="button">
</form>

A form with a submit button.

Not like this

<form class="buy" wp="add-to-cart">
  <input type="number" wp="product-qty">
</form>
<input type="submit" value="Add to cart" class="button">

The button is outside the form: pressing it sends nothing, and nothing goes into the cart. The log stays silent.

Like this

<form class="buy" wp="add-to-cart">
  <input type="number" wp="product-qty">
  <input type="submit" value="Add to cart" class="button">
</form>

The button goes inside <form wp="add-to-cart">.

Attributes in this recipe

wp="post-title" A post’s title and text wp="product-price" Product price wp="add-to-cart" The “Add to cart” button