Kernattribut Shop
Ein Formular „In den Warenkorb“ mit Menge
wp="add-to-cart" Der Käufer wählt eine Menge und legt das Produkt in den Warenkorb, ohne dass die Seite neu lädt; Warenkorbzähler und Mini-Warenkorb aktualisieren sich sofort.
Wo es hingehört
An ein <form> mit einem Absende-Button. Darin: wp="product-qty" am Mengenfeld, wp="product-qty-minus" und -plus an den Buttons.
wp="stocked" umschließt, was angezeigt wird, wenn das Produkt vorrätig ist, wp="not-stocked", was angezeigt wird, wenn es ausverkauft ist.
Beispiel: eine Packung Bohnen kaufen
Markup single-product.html
<form class="buy" wp="add-to-cart">
<div wp="stocked">
<a href="#" wp="product-qty-minus">−</a>
<input type="number" wp="product-qty">
<a href="#" wp="product-qty-plus">+</a>
<input type="submit" value="Add to cart" class="button">
</div>
<div wp="not-stocked">Sold out, back next roast.</div>
</form>Im Adminbereich Products → Edit product
Regular price ($) 14.00
Stock status In stock
Stock quantity 12
Auf der Website die Produktseite
Ethiopia Yirgacheffe
− 1 +
Add to cart
Worauf es ankommt
- Braucht WooCommerce.
- Wird der Lagerbestand verwaltet, kann die Menge nicht über den Bestand steigen.
- Die Buttons „−“ und „+“ funktionieren nur innerhalb des Formulars.
- Für Produkte mit Varianten gibt es eigene Werte für Preis und Lagerbestand der Variante.
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>An einem Link: Der Build schreibt das Attribut ins Protokoll und verwirft es.
So geht’s
<form wp="add-to-cart">
<input type="submit" value="Add to cart" class="button">
</form>Ein Formular mit Absende-Button.
Alternative Schreibweise
wp="add_to_cart" funktioniert genauso: Der Build ergibt ein identisches Theme.