Rezept 5 Schritte

Die Produktseite: Preis, Beschreibung und Kauf

Ein Template für alle Produkte des Shops: Bild, Preis, Beschreibung und Lagerbestand bearbeitet dein Kunde im WooCommerce-Produkt, und das Aussehen der Seite bleibt deins.

Das Ergebnis

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

Im Adminbereich Products → Ethiopia Yirgacheffe

Products → Ethiopia Yirgacheffe

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

Auf der Website die Produktseite

bean.jpg Ethiopia Yirgacheffe

Sale $12.00

Was $14.00

Floral, with notes of bergamot and peach.

− 1 + Add to cart

Im Angebot ist der normale Preis ausgeblendet, und den alten streicht dein Stil durch.

Schritt für Schritt

Bild und Name

wp="post-image" und wp="post-title" geben Bild und Namen des Produkts aus.

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

Preis

Drei Blöcke nebeneinander: der normale Preis, der Angebotspreis und der alte Preis. Das Theme zeigt die passenden: ohne Rabatt den normalen, im Angebot die beiden anderen.

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

Beschreibung

wp="post-content" an einem <div>: die Produktbeschreibung aus seinem Editor.

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

Kauf

wp="add-to-cart" an einem <form>: darin die Menge mit den Buttons „−“ und „+“ und ein Absende-Button. wp="stocked" umschließt, was sichtbar ist, solange das Produkt vorrätig ist.

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

Ausverkauft
wp="not-stocked" ist der Block, der statt des Kaufbereichs erscheint, wenn das Produkt nicht mehr vorrätig ist.
```
<div class="buy__soldout" wp="not-stocked">Sold out, back next roast.</div>
```

Worauf es ankommt

Braucht WooCommerce.
Wird der Lagerbestand des Produkts verwaltet, kann die Menge nicht über den Bestand steigen.
Produktbewertungen werden separat markiert: siehe das Rezept „Kommentare und Bewertungen“.

Typische Fehler

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

So nicht

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

Der Button ist ein Link: Der Build schreibt das Attribut ins Protokoll und verwirft es, und das Produkt kommt nicht in den Warenkorb.

So geht’s

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

Ein Formular mit Absende-Button.

So nicht

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

Der Button steht außerhalb des Formulars: Ein Klick sendet nichts ab, und das Produkt kommt nicht in den Warenkorb. Das Protokoll meldet nichts.

So geht’s

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

Der Button in <form wp="add-to-cart">.

Attribute in diesem Rezept

wp="post-title" Titel und Text eines Beitrags wp="product-price" Produktpreis wp="add-to-cart" Der Button „In den Warenkorb“