Страница товара: цена, описание и покупка

Что получится

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

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

Ещё рецепты