WooCommerce – Ein Shop-Plugin für WordPress – Teil 6
Weiter geht's mit dem 6. Teil unserer WooCommerce Serie. Zum Einstieg zeige ich Euch noch einmal kurz unsere Übersicht über die geplanten Änderungen:
- Unbedingt erforderlich, ist ein Hinweis auf und die Akzeptanz unserer AGB
- Die Kenntnisnahme des Widerrufrechtes
- Die Änderung des “Kaufen”-Buttons in “kostenpflichtig bestellen”. Dies erfordert die sogenannte “Button-Lösung”, die zum 1. August 2012 in Kraft trat.
- Kurzbeschreibung der gekauften Artikel, um dem Käufer die wesentlichen Eigenschaften wie Farbe, Größe etc. zu vermitteln
- Ein Bild zum jeweiligen Produkt
- Die gekaufte Menge deutlicher in einer separaten Spalte herausstellen
- Den Einzelpreis der gekauften Artikel aufführen
- Ein Hinweis unter “Gesamtsumme”, dass Mehrwertsteuer und Versandkosten enthalten sind
Checkout-Button ändern
Die grün markierten Punkte haben wir beim letzten Mal erledigt. Heute beginnen wir mit der Änderung des "Kaufen"-Buttons in "kostenpflichtig bestellen". Dies ist ein guter Einstieg, um warm zu werden. Hintergrund ist die sogenannte Button-Lösung, die zum 1. August 2012 in Kraft trat. Die Bezeichnung "Kaufen" für den Checkout-Button ist zwar zulässig, ich habe mir aber angewöhnt, die Bezeichnung "kostenpflichtig bestellen" zu verwenden. Ihr könnt natürlich auch eine andere Beschriftung wählen. Aber VORSICHT: Bezeichnungen wie "bestellen", "Bestellung abgeben" oder "Bestellung abschließen" sind nicht zulässig. Nachlesen könnt Ihr dies z. B. hier.
Nun aber wieder zum eigentlichen Thema. Bei Euch dürfte der untere Teil des Checkout-Prozesses so oder ähnlich aussehen:
Den "Kaufen"-Button unten rechts möchte ich nun ändern in "kostenpflichtig bestellen". Dies geschieht, Ihr werdet es kaum erraten, wieder über einen Filter-Hook. Folgenden Code kopier Ihr bitte ans Ende Eurer "functions.php":
/*-------------- WooCommerce Checkout Button --------------*/
add_filter('woocommerce_order_button_text', 'eigener_checkout_button');
function eigener_checkout_button() {
return "kostenpflichtig bestellen"; }
Damit ist "der Drops schon gelutscht" und der Button wurde umbenannt. Das Ergebnis seht Ihr im Anschluss:
An dieser Stelle möchte ich noch darauf hinweisen, dass es auch eine Lösung für alle gibt, die das WordPress Plugin "WooCommerce German (de_DE)" mit den deutschen Sprachdateien installiert haben. Hier gibt es gleich 3 sogenannte "Helfer-Funktionen". Diese findet Ihr hier. Ich habe das Plugin zwar auch installiert, habe aber meine eigene Lösung gewählt, die ja nicht wirklich umfangreich und kompliziert ist.
Kurzbeschreibung der gekauften Artikel
Jetzt wird es etwas komplizierter und es ist etwas Handarbeit erforderlich. Nun benötigen wir auch die Dateien, die wir in den Ordner "woocommerce" in unseren Theme-Ordner kopiert haben. Diese Dateien werden dort von WooCommerce erkannt und sind vor eventuellen Änderungen durch ein Update geschützt. Natürlich haben auch Verbesserungen oder Fehlerkorrekturen durch ein Update keinen Einfluss auf diese Dateien. Daher ist es wichtig, dass wir unsere Änderungen gut dokumentieren, damit wir Sie gegebenenfalls in eine korrigierte oder fehlerbereinigte Version übernehmen können.
Lasst mich kurz erklären, was ich genau und warum ich dies ändern möchte. Der Kunde muss, bevor er den Kaufvorgang abschließt, eine Übersicht der wesentlichen Eigenschaften seiner gekauften Artikel erhalten (Button-Lösung). Wie Ihr oben in der Abbildung erkennen könnt, stehen dort lediglich die Namen oder Bezeichnungen der gekauften Produkte und dahinter die Menge. Das reicht nicht aus und kann den Kunden auch dazu verleiten, den Kaufvorgang abzubrechen oder er sucht noch einmal den entsprechenden Artikel, um bestimmte Dinge nachzulesen. Weiterhin bin ich der Meinung, dass die Darstellung der Mengen irgendwie blöd aussieht. Es steht auch dort nicht, dass es sich um die Mengen im Warenkorb handelt. Los geht's: Geht bitte in den Ordern "woocommerce" in Eurem Theme-Ordner. Dort müsstet Ihr 3 weitere Ordner finden: "cart", "checkout" und "order". Im Ordner "cart" findet Ihr die Datei "cart.php" Diese ist für die Darstellung des Warenkorbes zuständig. Im Ordner "order" findet Ihr die Datei "order-details.php". Diese ist verantwortlich für die Bestellzusammenfassung. Und im Ordner "checkout" findet Ihr die Datei "review-order.php". Diese benötigen wir jetzt.
Damit Ihr seht, was ich genau vorhabe und selber entscheiden könnt, ob Ihr überhaupt diese Änderungen umsetzen wollt, seht Ihr hier schon einmal das Endergebnis:
Wie Ihr erkennen könnt, hat sich hier einiges getan. Zu jedem Produkt gibt es nun eine Abbildung und neben dem Produktnamen eine Kurzbeschreibung. Weiterhin wir zu jedem Produkt neben der Mengen-Spalte nun auch der Einzelpreis angezeigt. Und unter der Gesamtsumme wird noch einmal ausdrücklich darauf hingewiesen, dass dies der Endpreis inklusive der Mehrwertsteuer und der Versandkosten ist. Ich hoffe, Euch gefällt's, denn jetzt machen wir uns an die Umsetzung. Zuerst ergänzen wir den Produktnamen mit einer Kurzbeschreibung. Diese könnt Ihr unter "Produkte" im Backend zu jedem Produkt einpflegen. Öffnet hierzu bitte jetzt die Datei "review-order.php" aus EUREM "woocommerce/checkout/" Ordner:
<tbody>
<?php
do_action( 'woocommerce_review_order_before_cart_contents' );
if (sizeof($woocommerce->cart->get_cart())>0) :
foreach ($woocommerce->cart->get_cart() as $cart_item_key => $values) :
$_product = $values['data'];
if ($_product->exists() && $values['quantity']>0) :
echo '
<tr class="' . esc_attr( apply_filters('woocommerce_checkout_table_item_class', 'checkout_table_item', $values, $cart_item_key ) ) . '">
<td class="product-name">' .
apply_filters( 'woocommerce_checkout_product_title', $_product->get_title(), $_product ) . ' ' .
apply_filters( 'woocommerce_checkout_item_quantity', '<strong class="product-quantity">× ' . $values['quantity'] . '</strong>', $values, $cart_item_key ) .
$woocommerce->cart->get_item_data( $values ) .
'</td>
<td class="product-total">' . apply_filters( 'woocommerce_checkout_item_subtotal', $woocommerce->cart->get_product_subtotal( $_product, $values['quantity'] ), $values, $cart_item_key ) . '</td>
</tr>';
endif;
endforeach;
endif;
do_action( 'woocommerce_review_order_after_cart_contents' );
?>
</tbody>
Sucht Euch nun die Zeile mit dem Filter "woocommerce_checkout_product_title" (hier Zeile 12). Darunter fügen wir nun folgendes Code-Schnipsel ein:
apply_filters( 'woocommerce_short_description', $_product->post->post_excerpt ) . ' ' .
Dies ist der Filter für die Artikel-Kurzbeschreibung. Das Ergebnis im Checkout sieht dann so aus:
Einfügen des Produktbildes
Nun steht unter jedem Produkt eine Kurzbeschreibung. Damit können wir unseren Kunden den Artikel mit den wichtigsten Eigenschaften noch einmal ins Gedächtnis bringen, ohne dass er dafür den Checkout Prozess unterbrechen muss. Weiterhin möchten wir jedes Produkt nicht nur in Textform, sondern auch in Bildform präsentieren. Hierzu bleiben wir in unserer "review-order.php" Datei und suchen folgende Stelle:
<tbody>
<?php
do_action( 'woocommerce_review_order_before_cart_contents' );
if (sizeof($woocommerce->cart->get_cart())>0) :
foreach ($woocommerce->cart->get_cart() as $cart_item_key => $values) :
$_product = $values['data'];
if ($_product->exists() && $values['quantity']>0) :
echo '
<tr class="' . esc_attr( apply_filters('woocommerce_checkout_table_item_class', 'checkout_table_item', $values, $cart_item_key ) ) . '">
<td class="product-name">' .
apply_filters( 'woocommerce_checkout_product_title', $_product->get_title(), $_product ) . ' ' .
apply_filters( 'woocommerce_short_description', $_product->post->post_excerpt ) . ' ' . //einfuegen der Kurzbeschreibung
apply_filters( 'woocommerce_checkout_item_quantity', '<strong class="product-quantity">× ' . $values['quantity'] . '</strong>', $values, $cart_item_key ) .
$woocommerce->cart->get_item_data( $values ) .
'</td>
<td class="product-total">' . apply_filters( 'woocommerce_checkout_item_subtotal', $woocommerce->cart->get_product_subtotal( $_product, $values['quantity'] ), $values, $cart_item_key ) . '</td>
</tr>';
endif;
endforeach;
endif;
do_action( 'woocommerce_review_order_after_cart_contents' );
?>
</tbody>
Wie Ihr unschwer erkennen könnt, handelt es sich um den gleichen Code-Auszug wie vorhin. Natürlich schon ergänzt mit unserem Code-Schnipsel für die Artikel-Kurzbeschreibung (Zeile 13). Jetzt fügen wir einen Hook für die Darstellung des Produktbildes ein, und zwar über dem Filter "woocommerce_checkout_product_title" in Zeile 12. Hier ist der Code dafür:
apply_filters( 'woocommerce_in_cart_product_thumbnail', $_product->get_image(), $values, $cart_item_key ) . ' ' . '<br>' . /* <br> Leerzeile einfügen */
Damit die Darstellung "sauber" ist fügen wir am Ende noch eine Leerzeile ein. Diese führt dazu, dass der Produkttitel ordentlich unter dem Bild erscheint:
Ihr habt bestimmt festgestellt, dass oben im Endergebnis die Bilder links angeordnet sind. Über die genaue Darstellung machen wir uns aber jetzt noch keine Gedanken. Wir führen erst alle Änderungen durch und dann schauen wir uns die Optik noch einmal an. Schauen wir zum Abschluss dieses 6. Teiles auf unsere Aufgabentabelle:
- Unbedingt erforderlich, ist ein Hinweis auf und die Akzeptanz unserer AGB
- Die Kenntnisnahme des Widerrufrechtes
- Die Änderung des “Kaufen”-Buttons in “kostenpflichtig bestellen”. Dies erfordert die sogenannte “Button-Lösung”, die zum 1. August 2012 in Kraft trat.
- Kurzbeschreibung der gekauften Artikel, um dem Käufer die wesentlichen Eigenschaften wie Farbe, Größe etc. zu vermitteln
- Ein Bild zum jeweiligen Produkt
- Die gekaufte Menge deutlicher in einer separaten Spalte herausstellen
- Den Einzelpreis der gekauften Artikel aufführen
- Ein Hinweis unter “Gesamtsumme”, dass Mehrwertsteuer und Versandkosten enthalten sind
Langsam kommen wir unserem Ziel näher. Es bleiben "nur noch" 3 Punkte übrig. Hier machen wir dann mit dem 7. Teil weiter. Ich wünsche Euch viel Spaß bei der Umsetzung. Bis zum nächsten Mal.
[fb_share]
Hallo Ralf,
hatte letztes Jahr deine Code-Schnippsel bei mir eingebaut.
Heute habe ich die neuste Version von WooCommerce installiert und jetzt zeigt meine Check-out Seite nicht mehr alle Zahlungsmethoden und der Kaufen Button ist verschwunden.
Das liegt mit Sicherheit an den im Themen-Ordner hinzugefügten woocommerce Ordner.
Hast du eine Idee? Kannst du mir helfen. Der Update hat meinen ganzen Shop lahmgelegt.
Danke, mustafa
Hallo lieber Ralf,
deine Tutorials sind exzellent, herzlichen Dank dafür!
Ich hänge derzeit an der Zahlungsweise „Paypal“, denn trotz des von dir veröffentlichten Codes in der functions.php bleibt es an der Kasse bei „Weiter zu Paypal“. Hast du eine Idee?
LG!
…hat sich erledigt mit dem Update vom 26.02.!
[…] “anschauen möchte oder diesen entsprechend anpassen will, findet Informationen in Teil 6 der […]
Hallo Ralf,
die modifizierte Datei “review-order.php” funktioniert nicht mehr und wird dadurch auch nicht dargestellt. Ich hatte heute mehrere Stunden meinen Shop soweit fertig (dank Deiner Hilfe) und plötzlich sehe ich das ein neues Update raus ist. Mist. Leider wurde ja der Aufbau bestimmter Theme Dateien verändert.
Ich überlege nun ob ich ein Backup durchführe und die alte WooCommerce Version nutze. Habe aber bedenken was die Sicherheit des Shops betrifft.
Naja ich werde mich dann die Tage nochmak neu an die Arbeit machen.
LG,
Max
Hattes Du denn vorher ein Backup gemacht? Damit Du dieses wieder einspielen kannst.
Mein Vorschlag: Ich schreibe morgen einen Beitrag, in dem ich meine „review-order.php“ vorstelle. Die Button-Änderung habe ich ja schon heute veröffentlicht. Dann kannst Du Dir die für Dich relevanten Anpassungen rauspicken. Denke, der Checkout ist auch der Teil, der die meisten anderen interessiert. Die Themen sind dann wieder:
Tabelle erweitern (Spalten)
Bild einbinden
AGB und Widerruf (hat sich prinzipiell nicht geändert)
Neu: Zahlungsmodalitäten nach oben ziehen (macht den Checkout rechtssicherer)
Und weitere kleine Änderungen. Hoffe, dass hilft Dir weiter.
Grüße Ralf
Ja ein Backup hatte ich gemacht.
Das würde mir wirklich sehr weiterhelfen.
Vielen Dank schonmal.
LG,
Max
Der WooCommerce Checkout nach dem Update auf Version 2.1.1 bzw. 2.1.2 ist jetzt überarbeitet. Meine kompletten Anpassungen findet Ihr hier.
Grüße Ralf
Leider funktioniert das Turtorial nicht mehr für die neue WooCommerce Version. Ich habe heute geupdatet und nun funktioniert gar nichts mehr. Hast Du eine Idee wie man Dein Tutorial auch bei der neuen Version anwenden kann?
Hallo Max,
ja, das ist sehr ärgerlich. Hier sind umfangreiche Änderungen an den Template Dateien gemacht worden. Insbesondere im Checkout ging auch bei mir nicht mehr viel. Mittlerweile habe ich die wichtigsten Änderungen umgesetzt. Ich hoffe, Du hast einen entsprechenden WooCommerce Ordner in Deinem Theme.
In den nächsten Tagen werde ich die wichtigsten Änderungen auf meiner Webseite veröffentlichen. Allerdins außerhalb der Serie. Hier geht es dann vornehmlich um den Checkout und die Datei „review-order.php“. Eben habe ich was zum Checkout-Button geschrieben. Schau mal hier.
Was läuft denn bei Dir nicht mehr?
Grüße
Ralf
Wirklich super erklärt und funktionert einwandfrei, vielen Dank dafür!