Сторінка товару: ціна, опис і купівля

Що вийде

<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>

Покроково

1. Картинка й назва

   wp="post-image" і wp="post-title" виводять зображення й назву товару.

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

2. Ціна

   Три блоки поруч — звичайна, зі знижкою і стара. Тема показує потрібні: без знижки — звичайну, під час знижки — дві інші.

   <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>

3. Опис

   wp="post-content" на <div> — опис товару з його редактора.

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

4. Купівля

   wp="add-to-cart" на <form>: усередині кількість із кнопками «−» і «+» та кнопка надсилання. wp="stocked" обгортає те, що видно, поки товар є в наявності.

   <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">

5. Товар закінчився

   wp="not-stocked" — блок, який видно замість купівлі, коли товару немає.

   <div class="buy__soldout" wp="not-stocked">Sold out, back next roast.</div>

Що важливо

• Потрібен WooCommerce.
• Кількість не перевищить залишок, якщо для товару ведеться облік запасів.
• Відгуки про товар розмічають окремо, див. рецепт «Коментарі й відгуки».

Типові помилки

Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.

<a href="#" class="button" wp="add-to-cart">Add to cart</a>

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

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

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

Атрибути в рецепті

Ще рецепти