Un catalogue de produits : tri, cartes et prix

Ce que vous obtenez

<body wp-fields-group="Shop">
<header class="shop-hero">
  <h1 wp="post-title">Beans</h1>
  <p class="shop-hero__lead" fld-area="Shop lead">Roasted on Mondays, shipped on Tuesdays.</p>
</header>
<form class="sort" wp="sort">
  <select class="sort__select" wp="orderby">
    <option value="menu_order">Default</option>
    <option value="price">Price: low to high</option>
  </select>
</form>
<div class="beans" wp="products">
  <div class="bean-card">
    <a href="#" wp="post-link"><img src="images/bean.jpg" alt="" wp="post-image"></a>
    <h3><a href="#" wp="post-title-link">Ethiopia Yirgacheffe</a></h3>
    <div class="bean-card__prices">
      <span wp="product-price">$14.00</span>
      <span wp="product-price-sale">$12.00</span>
      <span class="is--old" wp="product-price-regular">$14.00</span>
    </div>
  </div>
</div>
<div class="beans__empty" wp="no-results">No beans match.</div>
<div class="pagination" wp-paginate="mid_size=1"></div>
</body>

Étape par étape

1. Titre et texte d’introduction

   wp="post-title" et fld-area au-dessus des cartes lisent la page boutique, celle qui est choisie dans WooCommerce → Réglages → Produits. Le client la modifie comme une page ordinaire.

   <h1 wp="post-title">Beans</h1>
   <p class="shop-hero__lead" fld-area="Shop lead">Roasted on Mondays, shipped on Tuesdays.</p>

2. Le tri

   <form wp="sort"> avec un <select wp="orderby"> à l’intérieur. Les valeurs des options sont les modes de tri de WooCommerce : menu_order, price, price-desc, date, popularity, rating.

   <form class="sort" wp="sort">
     <select class="sort__select" wp="orderby">
       <option value="menu_order">Default</option>
       <option value="price">Price: low to high</option>
     </select>
   </form>

3. Les cartes de produits

   wp="products" sur la grille ; la première carte sert de modèle. À l’intérieur : le lien, l’image, le nom et trois blocs de prix, dont le thème masque lui-même ceux qui ne s’appliquent pas. À côté, wp="no-results".

   <div class="beans" wp="products">
     <div class="bean-card">
       <a href="#" wp="post-link"><img src="images/bean.jpg" alt="" wp="post-image"></a>
       <h3><a href="#" wp="post-title-link">Ethiopia Yirgacheffe</a></h3>
       <div class="bean-card__prices">
         <span wp="product-price">$14.00</span>
         <span wp="product-price-sale">$12.00</span>
         <span class="is--old" wp="product-price-regular">$14.00</span>
       </div>
     </div>
   </div>
   <div class="beans__empty" wp="no-results">No beans match.</div>

4. Les numéros de page

   wp-paginate sur un bloc vide placé après la grille.

   <div class="pagination" wp-paginate="mid_size=1"></div>

À retenir

• Nécessite WooCommerce.
• Sans fichier taxonomy-product-cat.html à part, les catégories de produits s’ouvrent avec ce même modèle, et wp="products" affiche les produits de la catégorie ouverte.
• Pour des produits sur une autre page, comme la page d’accueil : wp-product-query.

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.

<div class="beans" wp-query="'post_type'=>'product','posts_per_page'=>12">
  <div class="bean-card">
    <h3 wp="post-title">Ethiopia Yirgacheffe</h3>
  </div>
</div>

<div class="beans" wp="products">
  <div class="bean-card">
    <h3 wp="post-title">Ethiopia Yirgacheffe</h3>
  </div>
</div>

<select class="sort__select" wp="orderby">
  <option value="price">Price: low to high</option>
</select>

<form class="sort" wp="sort">
  <select class="sort__select" wp="orderby">
    <option value="price">Price: low to high</option>
  </select>
</form>

Attributs de cette recette

Autres recettes