WooCommerce – Ein Shop-Plugin für WordPress – Teil 7

Jetzt sind wir schon beim 7. Teil der WooCommerce Reihe angelangt und ein Ende ist aus meiner Sicht noch nicht abzusehen. Wie Ihr gleich sehen werdet, ist unsere Liste zwar fast vollständig abgearbeitet, aber zwischenzeitlich haben sich neue Themen ergeben, die zum Teil durch Eure Anregungen entstanden sind. Dafür möchte ich mich bedanken. Denn dadurch habe ich auch festgestellt, dass der ein oder andere von Euch ebenfalls ein echtes Interesse an der individuellen Gestaltung des WooCommerce Plugins entwickelt hat.

Also, schauen wir uns doch mal an wo wir stehen:

  1. Unbedingt erforderlich, ist ein Hinweis auf und die Akzeptanz unserer AGB
  2. Die Kenntnisnahme des Widerrufrechtes
  3. Die Änderung des “Kaufen”-Buttons in “kostenpflichtig bestellen”. Dies erfordert die sogenannte “Button-Lösung”, die zum 1. August 2012 in Kraft trat.
  4. Kurzbeschreibung der gekauften Artikel, um dem Käufer die wesentlichen Eigenschaften wie Farbe, Größe etc. zu vermitteln
  5. Ein Bild zum jeweiligen Produkt
  6. Die gekaufte Menge deutlicher in einer separaten Spalte herausstellen
  7. Den Einzelpreis der gekauften Artikel aufführen
  8. Ein Hinweis unter “Gesamtsumme”, dass Mehrwertsteuer und Versandkosten enthalten sind

Optische Anpassungen vom WooCommerce Checkout

Machen wir uns sofort an die Arbeit und schaffen eine eigene Spalte im Checkout für die gewählte Produktmenge für jeden Artikel. Den ersten Teil von Punkt 7 erledigen wir zeitgleich und bilden den Einzelpreis eines jeden Artikels ebenfalls in einer separaten Spalte ab. Öffnet hierzu bitte jetzt wieder die Datei “review-order.php” aus EUREMwoocommerce/checkout/” Ordner und sucht folgende Stelle:

Zwischen Zeile 6 und 7 fügen wir jetzt folgenden Code ein:

Damit haben wir eine Spalte mit der Überschrift "Einzelpreis" und eine weitere Spalte mit der Überschrift "Menge" erstellt. Bei mir im Shop sieht dies dann so aus:

WooCommerce Checkout

Das ist natürlich noch nicht wirklich hübsch. In der Spalte Einzelpreis steht noch der Gesamtpreis und die Mengenangabe muss noch in die richtige Spalte. Aber das wird schon noch. Machen wir mal weiter. Und zwar nur ein paar Zeilen weiter unten. Wir verschieben jetzt die "Warenkorb-Zwischensumme" in die Spalte für die "Gesamtsumme". Dazu rufen wir folgende Code-Passage auf:

Zwischen Zeile 2 und 3 fügen wir jetzt folgende Zeilen ein. Diese führen zu zwei Spalten-Sprüngen bevor die Zwischensumme mit " <?php echo $woocommerce->cart->get_cart_subtotal(); ?> " ausgegeben wird.

Das Ergebnis sieht so aus:

WooCommerce Checkout

Gleiches machen wir jetzt noch einmal, nämlich um den kompletten Block "Versand" ganz nach rechts zu schieben. Dazu sucht Ihr folgende Zeilen und fügt den obigen Code-Block noch einmal zwischen Zeile 2 und 3 ein:

Der Code sieht dann so aus:

Bildlich sieht das Ergebnis so aus:
WooCommerce Checkout

Wie Ihr seht, gehen wir die gesamte "review-order.php" chronologisch durch und führen die notwendigen Änderungen durch.

Anpassung für die Rechtssicherheit vom WooCommerce Checkout

Damit für unsere Kunden jederzeit transparent ist, wie der zu erwartende Endpreis aussieht, möchte ich in der Endansicht einfügen, dass der Gesamtpreis "inkl. 19% MwSt. und Versandkosten" ist. Dazu suchen wir folgenden Code:

und ändern bzw. ergänzen den Code zu folgendem Ergebnis:

Was ist hier passiert? Zum einen haben wir den Text "inkl. 19% MwSt. und Versandkosten" eingefügt, wobei wir auf unsere Versandkostenseite verlinken. Hier müsst Ihr natürlich Euren Link eintragen. Dem ganzen haben wir einen "style" verpasst, damit der Text kleiner und nicht fett erscheint. Und zum zweiten haben wir wieder mit dem bereits bekannten Code die Gesamtsumme ganz nach rechts geschoben. Das ganze sieht dann so aus:

WooCommercce Checkout

Jetzt wird es ein wenig komplizierter. Denn nun wollen wir uns an die Ausgabe der Produkteinzelpreise machen. Die Schwierigkeit besteht darin, dass diese in der Übersicht nicht zu finden sind. Abgebildet werden nur die Gesamtpreise, also Einzelpreis multipliziert mit der Menge. Hierfür bedienen wir uns einer Code-Zeile aus der "cart.php":

An dieser Stelle möchte ich noch einmal betonen, dass auch ich kein Programmierer bin und das Rad auch nicht neu erfinden kann und möchte. Wichtig ist, dass Ihr die Struktur und die Abläufe von WooCommerce versteht. Dann findet man auch mit ein wenig Aufwand die benötigten Code-Schnipsel und kann diese gegebenenfalls ein wenig anpassen und für die eigenen Bedürfnisse einsetzen. Dies ist auch hier der Fall. Diese Code-Zeile habe ich in der "cart.php" gesucht, weil im Warenkorb die Menge so dargestellt wird wie ich mir das vorstelle.

Diese Zeile integrieren wir nun wie folgt. Sucht Euch bitte die richtige Stelle in Eurer "review-order.php":

Optisch ist hier noch nichts passiert. Sondern wir übernehmen lediglich eine Code-Zeile und speichern das Ergebnis, den Einzelpreis, in der Variablen " $product_price ". Als nächstes löschen wir die Zeilen 17 und 18. Ja, Ihr habt richtig gelesen. Nun fügen wir mal nichts ein, sondern löschen zwei Code-Zeilen. Diese beiden Zeilen sind für die "alte" Ausgabe der Mengen zuständig. Diese standen fett gedruckt in der Produkt-Spalte ("x 1", "x 2", usw.).

Jetzt fügen wir noch folgenden Code ein. Und zwar ab Zeile 20 (vor dem Löschen der beiden Zeilen).

Das Endergebnis sieht dann so aus. Der ergänzte Code ist farblich hervorgehoben. Hier taucht auch wieder die Variable " $product_price " auf, die wir zuvor eingeführt haben. Achtet bitte darauf, dass Ihr die Punkte, die unter PHP als Verbindungs-Operator dienen, nicht vergeßt.

Bei mir im Shop ist dies das Resultat:

WooCommerce Checkout Endergebnis

Damit sind alle Änderungen, die wir uns vorgenommen haben, abgeschlossen. Abschließend noch einmal die Übersicht:

  1. Unbedingt erforderlich, ist ein Hinweis auf und die Akzeptanz unserer AGB
  2. Die Kenntnisnahme des Widerrufrechtes
  3. Die Änderung des “Kaufen”-Buttons in “kostenpflichtig bestellen”. Dies erfordert die sogenannte “Button-Lösung”, die zum 1. August 2012 in Kraft trat.
  4. Kurzbeschreibung der gekauften Artikel, um dem Käufer die wesentlichen Eigenschaften wie Farbe, Größe etc. zu vermitteln
  5. Ein Bild zum jeweiligen Produkt
  6. Die gekaufte Menge deutlicher in einer separaten Spalte herausstellen
  7. Den Einzelpreis der gekauften Artikel aufführen
  8. Ein Hinweis unter “Gesamtsumme”, dass Mehrwertsteuer und Versandkosten enthalten sind

Damit ist auch der Checkout für den Kunden abgeschlossen. Aber noch nicht die WooCommerce-Reihe. Denn was passiert, wenn der Kunde den Button "kostenpflichtig bestellen" geklickt hat? Worauf müssen wir achten, damit auch nach dem Kaufvorgang alles reibungslos funktioniert? Dazu mehr im nächsten Teil. Bis dahin viel Spaß bei der Umsetzung!

[fb_share]

9 Antworten zu “WooCommerce – Ein Shop-Plugin für WordPress – Teil 7”

  1. Hallo Ralf,

    bis hierhin hat alles wunderbar funktioniert, nur sieht der Quellcode in folgenden Teilen anders aus:

    – Versandoptionen nach recht verschieden
    – Menge und Gesamtsumme verschieben

    Liegt das eventuell an einer neueren Version von Woocommerce?

    Ich freue mich auf Antwort 😉

    Viele Grüße,
    Olli

    • Hallo Oliver,

      ja, seit 10. Februar gibt es die neue Version 2.1 (aktuell 2.1.3), die umfassende Veränderungen der Templates mit sich bringt. Gerade, der Bereich Versand (shipping) wurde in eine neue Datei ausgelagert (cart-shipping.php). Näheres dazu findest Du unter https://www.vertrieb-im-netz.de/woocommerce-version-2-1-checkout/. Hier habe ich die neuen Anpassungen des Checkout ausführlich beschrieben. Zudem kannst Du die review-order.php auch komplett einsehen.

      Grüße Ralf

      Grüße Ralf

  2. Ich arbeite gerade an einem Online-Shop für Dessous und bin jetzt alle Teile durchgegangen, nicht nur, dass das wirklich eine supergroße Hilfe ist und alles funktioniert, ich habe jetzt auch gelernt, wie ich noch einige andere Vorhaben umsetzen kann dank der ausführlichen Erklärungen. Dass das hier kostenlos zur Verfügung gestellt wird, verdient wirklich Lob und Anerkennung!

    • Hallo Mia,

      vielen Dank für Dein tolles Feedback. Ich wünsche Dir viel Erfolg mit Deinem Vorhaben. Schau einfach mal wieder vorbei. Denke, dass auch zukünftig der ein oder andere gute Tipp für Dich dabei sein wird.

      Grüße Ralf

  3. Ganz großes Kino,

    ich möchte mich einmal bei Ihnen (Dir) bedanken. Ich habe bestimmt Stunden nach einer Lösung gesucht, um das Woocommerce nach deutschen Richtlinien umzurüsten.

    Vielen, vielen Dank!

    Beste Grüße Markus

    • Hallo Markus,

      vielen Dank für das tolle Feedback. Das spornt mich natürlich an, die Serie fortzuführen bzw. zu bestimmten Themen das ein oder andere Tutorial zu schreiben. Denn es gibt noch einige Dinge, die ich schon umgesetzt habe, aber noch keine Zeit hatte, diese in einen Beitrag zu packen. Z. b. die E-Mail für die Bestellbestätigung mit den AGB und dem Widerruf zu ergänzen. Also, einfach mal wieder vorbei schauen, es geht bald weiter…

      Grüße

      Ralf

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.