La page produit : prix, description et achat

Ce que vous obtenez

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

Étape par étape

1. Image et nom

   wp="post-image" et wp="post-title" affichent l’image et le nom du produit.

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

2. Le prix

   Trois blocs côte à côte : le prix normal, le prix promotionnel et l’ancien prix. Le thème affiche ceux qui s’appliquent : hors promotion, le prix normal ; sinon, les deux autres.

   <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. La description

   wp="post-content" sur un <div> : la description du produit, issue de son éditeur.

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

4. L’achat

   wp="add-to-cart" sur un <form> : à l’intérieur, la quantité avec les boutons « − » et « + », et un bouton d’envoi. wp="stocked" entoure ce qui s’affiche tant que le produit est en 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">

5. Produit épuisé

   wp="not-stocked" est le bloc qui s’affiche à la place de l’achat quand le produit est épuisé.

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

À retenir

• Nécessite WooCommerce.
• La quantité ne peut pas dépasser le stock quand le produit gère son stock.
• Les avis sur le produit se balisent à part : voir la recette « Commentaires et avis ».

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

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

Attributs de cette recette

Autres recettes