Un catalogue de produits

Où le placer

Sur la grille de archive-product.html (la boutique) et de taxonomy-product-cat.html (une catégorie). La première carte sert de modèle : à l’intérieur, wp="post-link", wp="post-image", wp="post-title" et le prix.

Un bloc avec wp="no-results" juste après la grille s’affiche quand rien n’est trouvé.

Des produits sur une autre page, comme la page d’accueil : wp-product-query, avec des réglages comme pour wp-query.

Exemple : la boutique de grains de café

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

À retenir

• Nécessite WooCommerce.
• Le tri : un <form wp="sort"> avec un <select wp="orderby"> à l’intérieur.
• Les numéros de page : wp-paginate sous la grille.

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.

<select wp="orderby">
  <option value="price">Price</option>
</select>

<form wp="sort">
  <select wp="orderby">
    <option value="price">Price</option>
  </select>
</form>

Tâches liées

Utilisé dans les recettes