Der Produktkatalog: Sortierung, Karten und Preise

Das Ergebnis

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

Schritt für Schritt

1. Überschrift und Einleitung

   wp="post-title" und fld-area über den Karten lesen die Shop-Seite, also die Seite, die unter WooCommerce → Einstellungen → Produkte gewählt ist. Dein Kunde bearbeitet sie wie eine normale Seite.

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

2. Sortierung

   <form wp="sort"> mit einem <select wp="orderby"> darin. Die Werte der Optionen sind die Sortierungen von 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. Produktkarten

   wp="products" am Raster, die erste Karte ist die Vorlage. Darin stehen Link, Bild, Name und drei Preisblöcke: Die überzähligen blendet das Theme selbst aus. Daneben 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. Seitenzahlen

   wp-paginate an einem leeren Block nach dem Raster.

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

Worauf es ankommt

• Braucht WooCommerce.
• Gibt es kein eigenes taxonomy-product-cat.html, öffnen sich die Produktkategorien mit demselben Template, und wp="products" zeigt die Produkte der geöffneten Kategorie.
• Produkte auf einer anderen Seite, etwa der Startseite, gibt wp-product-query aus.

Typische Fehler

Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.

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

Attribute in diesem Rezept

Weitere Rezepte