Receta 5 pasos

La página de un producto: precio, descripción y compra

Una sola plantilla para todos los productos de la tienda. El cliente edita la imagen, el precio, la descripción y las existencias en el producto de WooCommerce, y el aspecto de la página sigue siendo tuyo.

Qué obtienes

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

En el panel Products → Ethiopia Yirgacheffe

Products → Ethiopia Yirgacheffe

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

En el sitio la página del producto

bean.jpg Ethiopia Yirgacheffe

Sale $12.00

Was $14.00

Floral, with notes of bergamot and peach.

− 1 + Add to cart

Durante una oferta, el precio normal se oculta, y tu estilo tacha el anterior.

Paso a paso

Imagen y nombre

wp="post-image" y wp="post-title" muestran la imagen y el nombre del producto.

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

Precio

Tres bloques juntos: el normal, el rebajado y el anterior. El tema muestra los que corresponden: sin oferta, el normal; durante una oferta, los otros dos.

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

Descripción

wp="post-content" en un <div>: la descripción del producto, escrita en su editor.

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

Compra

wp="add-to-cart" en un <form>: dentro, la cantidad con los botones «−» y «+» y el botón de envío. wp="stocked" envuelve lo que se ve mientras el producto tiene existencias.

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

Producto agotado
wp="not-stocked" es el bloque que se ve en lugar de la compra cuando el producto se ha agotado.
```
<div class="buy__soldout" wp="not-stocked">Sold out, back next roast.</div>
```

Lo importante

Necesita WooCommerce.
La cantidad no supera las existencias cuando el producto gestiona su inventario.
Las reseñas del producto se marcan aparte: consulta la receta «Comentarios y reseñas».

Errores frecuentes

El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.

Así no

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

El botón es un enlace: la generación anota el atributo en el registro y lo descarta, y el producto no llega al carrito.

Así sí

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

Un formulario con un botón de envío.

Así no

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

El botón está fuera del formulario: al pulsarlo no se envía nada y el producto no llega al carrito. El registro no dice nada.

Así sí

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

El botón dentro de <form wp="add-to-cart">.

Atributos de esta receta

wp="post-title" Título y texto de una entrada wp="product-price" Precio del producto wp="add-to-cart" El botón «Añadir al carrito»