Unser Game Changer. Hier geht's zu unserer Videomarketing App...

Categories
Code-Schnipsel News Plugins WooCommerce Wordpress

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

Mittlerweile sind wir schon beim 5. Teil unserer Woocommerce Shop-Plugin Serie angekommen. Und jetzt stehen wir vor der wichtigsten Herausforderung, nämlich der Gestaltung des Checkout-Prozesses. Im Besonderen möchte ich hier den Fokus auf das Thema der rechtssicheren Gestaltung des Checkout für den deutschen Markt legen.

Die Ausgangssituation

WooCommerce Checkout

So in etwa dürfte auch bei Euch der "Kassen"-Bereich von WooCommerce aussehen:

Der Checkout von WooCommerce ist der Teil, der mir sowohl von der Optik als auch aus Sicht der Rechtssicherheit am wenigsten zusagt. Sicher sind nicht alle folgenden Veränderungen unbedingt erforderlich, aber unterstützen den Kaufabschluss unmittelbar. OK, was sind also die Dinge, die wir ändern wollen.

  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

Da ist einiges zusammen gekommen. Aber dies sind die Punkte, die wir jetzt nacheinander in unseren Checkout-Prozess integrieren. In diesem Teil unserer Serie reicht es nicht mehr aus, unsere "functions.php" zu ergänzen, sondern wir müssen auch umfangreiche Änderungen in einer PHP-Datei von WooCommerce vornehmen. Damit diese Änderungen bei einem Update nicht verloren gehen, müssen wir diese Datei in unseren Theme Ordner integrieren. Zum Glück hat WooCommerce für diesen Zweck vorgesorgt. Und zwar können wir alle Dateien, die im Template-Ordner von WooCommerce liegen, durch gleichnamige Dateien in unserem Theme-Ordner ersetzen.

Bitte geht deshalb jetzt in Euer Theme-Verzeichnis und erstellt einen neuen Ordner. Diesen nennt Ihr bitte "woocommerce" (ohne Anführungszeichen). Im Ordner "woocommerce" erstellen wir zwei weitere Ordner, und zwar den Ordner "order" (ohne Anführungszeichen) und den Ordner "checkout" (ohne Anführungszeichen). Den letzteren benötigen wir aber erst später.

Jetzt navigiert bitte in Euer Plugin-Verzeichnis. In einer normalen WordPress-Umgebung findet Ihr dies unter "wp-content/plugins". Dort findet Ihr den Ordner "woocommerce". Bitte diesen nicht verwechseln mit "wocommerce-de". Dies ist nämlich die deutsche Spracherweiterung. Jetzt öffnet den Ordner "templates/checkout/" und kopiert die Datei "review-order.php" in Euren eben erstellten Ordner "checkout". WooCommerce erkennt dies automatisch und greift zukünftig auf die Datei in unserem Ordner zu. Damit ist sicher gestellt, dass durchgeführte Updates nicht unsere individuellen Anpassungen überschreiben.

Für die später ersichtliche Bestellbestätigung benötigen wir noch die Datei "order-details.php". Daher kopiert bitte diese Datei von "/wp-content/plugins/woocommerce/templates/order/" in "/euertheme/woocommerce/order/". Damit sind die Vorarbeiten abgeschlossen und wir können mit den ersten Änderungen beginnen.

AGB

Punkt 1 und 2 auf unserer Liste erledigen wir in einem Aufwasch, da letztlich das Prozedere gleich ist. Ich möchte, dass meine Kunden meine AGB bestätigen und das Widerrufsrecht zur Kenntnis nehmen müssen. Für diesen Zweck soll jeweils eine Checkbox eingerichtet werden. Wird diese nicht angehakt und dennoch versucht den Bestellvorgang abzuschließen, erscheint ein entsprechender Hinweis. Beide Checkboxen sind somit Pflicht. An dieser Stelle möchte ich nicht unerwähnt lassen, dass WooCommerce hierfür schon eine Lösung hat. Diese wird in der Nähe des "Kaufen"-Buttons eingeblendet, sobald man unter "Einstellungen->Seiten" eine AGB-Seite ausgewählt hat. Diese Lösung sagt mir aber aus mehreren Gründen nicht zu. Zum einen, weil ich eh noch eine Lösung für das Widerrufsrecht benötige und weil ich die Bestätigung weiter oben haben möchte. Der Kunde soll am Ende, nachdem er schon alle möglichen Angaben gemacht hat, nicht mehr von der Auslösung einer Bestellung abgelenkt werden. Entscheidend ist für mich aber ein anderer Punkt. Mit dieser Lösung ist nicht sicher, was im Falle eines Updates genau passiert, ob hier Änderungen vorgenommen werden oder nicht. Die Anpassungen für den deutschen Markt und die Rechtssicherheit möchte ich hier nicht aus der Hand geben. Schließlich muss ich im Falle eines Falles ja auch dafür haften!

Jetzt aber zu unserer eigenen Lösung. Unter WooCommerce ist es möglich jegliche Felder im Checkout-Prozess sowohl individuell anzupassen als auch neue Felder hinzuzufügen. Wir möchten 2 neue hinzufügen. Diese Aufgabe können wir noch mittels eines Action Hooks in der "functions.php" erledigen. Ich stelle hier kurz den Code vor und gehe im Anschluss darauf ein:

/*-------------- Hinweis auf AGB mit Checkbox     --------------*/
add_action('woocommerce_after_order_notes', 'agb_abfrage');
function agb_abfrage( $check ) {

echo '<div id="agb_check">';

woocommerce_form_field( 'agb_check', array(
'type'          => 'checkbox',
'class'         => array('notes'),
'label'         => __('Mit Abgabe einer Bestellung best&auml;tigen Sie, unsere <a href="http://vertrieb-im-netz.de/agb">AGB</a> gelesen, verstanden und akzeptiert zu haben.'),
'placeholder'       => __('AGB'),
'required'         => true,
), $check->get_value( 'agb_check' ));
echo '</div>'; }

/*-------------- AGB Feld prüfen   --------------*/
add_action('woocommerce_checkout_process', 'agb_check_gueltig');
function agb_check_gueltig() {
global $woocommerce;
if (!isset($_POST['agb_check']))

$woocommerce->add_error( __('Bitte best&auml;tigen Sie unsere <a href="http://vertrieb-im-netz.de/agb">AGB</a>.') );
}

In der ersten Zeile rufen wir den Hook "woocommerce_after_order_notes" mit unserer Funktion "agb_abfrage" auf. Dieser führt unsere Funktion direkt unter den persönlichen Angaben aus. Die Funktion haben wir in ein "div " gepackt, um gegebenenfalls die Ausgabe in unserer "CSS-Datei " gestalten zu können. Bei dem Typ der Abfrage/Eingabe handelt es sich um eine "Checkbox" (Zeile 7), d. h. wir können abfragen, ob diese angehakt wurde oder nicht. Wenn nicht, wird eine entsprechende Fehlermeldung nach Betätigen des Kauf-Buttons ausgegeben. In dieser Fehlermeldung verlinken wir auf unsere AGB-Seite (Zeile 21). Unter 'label' wird der Ausgabetext mit der Verlinkung auf unsere AGB-Seite hinterlegt (Zeile 9). Wichtig ist noch die Angabe 'required' (Zeile 11). Hier lautet der Wert 'true' und besagt zweierlei. Zum einen, dass diese Checkbox angehakt werden muss und zum anderen, dass am Ende unseres Textes ein Sternchen gesetzt wird. Dies verdeutlicht unseren Kunden, dass die Angabe verpflichtend ist. Die Prüfung erfolgt mit der Funktion "agb_check_gueltig" und einer eventuellen Fehlermeldung.

Widerrufsbelehrung

Bevor wir uns das Endergebnis anschauen, setzen wir den Hook "woocommerce_after_order_notes" analog für die Widerrufsbelehrung um. Der Code hierfür sieht folgenermaßen aus:

/*---------- Hinweis auf WRB mit Checkbox     --------------*/
add_action('woocommerce_after_order_notes', 'wrb_abfrage');
function wrb_abfrage( $check ) {

echo '<div id="wrb_check">';

woocommerce_form_field( 'wrb_check', array(
'type'          => 'checkbox',
'class'         => array('notes'),
'label'         => __('Mit Abgabe einer Bestellung best&auml;tigen Sie, das <a href="http://vertrieb-im-netz.de/widerrufsrecht">Widerrufsrecht</a> zur Kenntnis genommen zu haben.'),
'placeholder'       => __('WRB'),
'required'         => true,
), $check->get_value( 'wrb_check' ));
echo '</div>'; }

/*-------------- WRB Feld prüfen   --------------*/
add_action('woocommerce_checkout_process', 'wrb_check_gueltig');
function wrb_check_gueltig() {
global $woocommerce;
if (!isset($_POST['wrb_check']))

$woocommerce->add_error( __('Bitte best&auml;tigen Sie die Kenntnisnahme des <a href="http://vertrieb-im-netz.de/widerrufsrecht">Widerrufsrechts</a>.') );
}

Das Endergebnis sieht dann so aus. Beide Checkboxen müssen angehakt werden, sonst kann der Bestellvorgang nicht abgeschlossen werden.

WooCommerce Checkout

Schauen wir uns doch kurz einmal an, was wir von unseren Vorhaben bisher umgesetzt haben:

  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

Wie Ihr seht war der 5. Teil zwar relativ umfangreich, aber bisher haben wir nur die ersten beiden Punkte umgesetzt. Zuerst wollte ich alles in diesen 5. Teil packen. Dieser wäre dann aber viel zu umfangreich geworden. Daher mache ich jetzt  hier einen Cut und fahre mit der Änderung des Kaufen-Buttons im 6. Teil fort. Die angekündigten umfangreichen Änderungen in einer PHP-Datei von WooCommerce muss also noch warten. Ich hoffe, es waren einige interessante Ansätze für Euch dabei. Also, bis zum 6. Teil.

[fb_share]
0 0 votes
Article Rating
Abonnieren
Benachrichtige mich bei
guest
29 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Wilde Moehren
5 Jahre zuvor

Hallo Ralf,

Dein Tutorial ist wirklich toll, mit der Anleitung habe ich es als IT-Laie vor zwei Jahren geschafft, einen kleinen Shop einzurichten (WP, Woocommerce, Pinboard Theme), der problemlos läuft. Danke dafür!

Nun bin ich gerade dabei, alles upzudaten auf WordPress 4.5.2 mit Pinboard-Child-Theme und Woocommerce 2.5.5, glücklicherweise erstmal auf meiner Testinstallation. Ein Punkt macht dabei immer noch Probleme: Die Bestätigung von AGB und Widerruf. Ich habe in den Kommentaren hier einen Hinweis vom letzten Jahr (Frank Schultze) gefunden und habe daraufhin in meiner functions.php bei AGB und Widerruf statt

$woocommerce->add_error( __(‚Bitte bestätigen Sie die Kenntnisnahme der AGB.‘) );

nun das stehen:

wc_add_notice(__(‚Bitte bestätigen Sie die Kenntnisnahme der AGB.‘), $notice_type = ‘error’ );

Die Folge ist nun leider, dass ich (test)bestellen kann, ohne die Kreuzchen bei AGB und Widerruf zu setzen. Hast Du vielleicht eine Idee, woran das liegen könnte? Ich wäre wirklich superdankbar für einen Hinweis.

Viele Grüße
Wilde Möhren

Wilde Moehren
5 Jahre zuvor
Reply to  Ralf

Hallo Ralf,

genial! Es funktioniert! Ich hatte tatsächlich nicht bemerkt, dass bei „error“ noch die falschen Zeichen standen – so ist das leider, wenn man keine Programmiererin ist. Mit Deinem Hinweis (so schnell!) hat es gleich geklappt. Danke, danke! Und ich bin gespannt auf die weiteren Teile Deines Tutorials. Ein großartiges Projekt, dass Du da hast und ohne das es meinen Shop nicht gäbe.

Viele Grüße
Wilde Möhren

Patrick
6 Jahre zuvor

Hallo Ralf,

Danke für deine super Anleitung. Das wäre genau das was ich suche. Leider funktionierts bei mir nicht.
– habe deinen AGB Code kopiert und in meiner functions.php des Templates am Ende hinzugefügt.
– Aber wie und vor allem wo scheint das dann im checkout auf ? Wie kann ich die Position dort verändern ? Derzeit sehe ich nichts.
– Muss ich trotzdem die AGB in den Einstellungen des Woocommerce aktivieren ?

danke dir
lg
Patrick

Murat
Murat
6 Jahre zuvor

Hallo Ralf,

ich habe alles gemacht, aber bei mir funktioniert es nicht bzw. die Checkbox erscheint nicht.
Ich brauche lediglich nur die Checkbox für die Wiederrufsbelehrung.
Was könnte ich falsch machen?
Wie sollte der Ordner von meinem Child Theme sein, habe eins selber erstellt mit style.css und functions.php.
In functions.php ist der Text (änderung) von oben drin.
Würde mich um eine schnelle Antwort freuen.
Lg

Murat
Murat
6 Jahre zuvor
Reply to  Ralf

Hallo Ralf,

Ich bräuchte deine Mail Adresse.
Wenn ich den Child Theme aktiviere kommt der Text der in functions.php steht einfach ganz oben auf der Seite, was mach ich falsch?
Grüße

Frank Schultze
6 Jahre zuvor

Hallo, ich sehe, dass der letzte Kommentar schon über ein halbes Jahr her ist. Ich hoffe, du bekommst meine Frage trotzdem. Bis hierhin hast du mir schon sehr weitergeholfen. Du hast genau das geändert, was mir auch an Woocommerce missfiel. Nur jetzt habe ich ein Problem. Bei dem Nichtankreuzen der AGB und des Widerrufrechts bekomme ich keine Meldungen, die den Kunden dazu bringen anzukreuzen, sondern es erscheint ohne beide Kreuze der Fehler:

Fatal error: Call to undefined method WooCommerce::add_error() in C:\xampp\htdocs\wordpressshop\wordpress-4.1.1-de_DE\wordpress\wp-content\themes\travelify\functions.php on line 146

und wenn ich die AGB ankreuze und den Widerruf nicht, dann kommt zu dem Fehler Zeile 146 noch

Fatal error: Call to undefined method WooCommerce::add_error() in C:\xampp\htdocs\wordpressshop\wordpress-4.1.1-de_DE\wordpress\wp-content\themes\travelify\functions.php on line 170 hinzu. Beide Fehler weisen jeweils auf folgende Zeilen hin::

146 ist: $woocommerce->add_error( __(‚Bitte bestätigen Sie unsere AGB.‘) );

170 ist: $woocommerce->add_error( __(‚Bitte bestätigen Sie die Kenntnisnahme des Widerrufsrecht.‘) );

Kannst du dir das erklären? Oder hast du eine Möglichkeit, das zu ändern. Die eingearbeiteten Links sind in Ordnung.
So sieht die Fehlermeldung für den Kunden nach einem Fehler der Homepage aus. Es wäre aber doch schön, wenn er merkt, dass er eteas übersehen hat. Wäre schön, wenn du helfen könntest.
Vielen Dank und ich bin gespannt, wie es weitergeht. Insgesamt alles extrem hilfreich, was du da ausgearbeitet hast.

Frank

PS sollte ich auf deine Entgegnung oder Fragen nicht sofort antworten können, liegt das daran, dass ich aus Zeitgründen immer nur nachts an meiner Homepage arbeiten kann.

Frank Schultze
6 Jahre zuvor
Reply to  Ralf

Hallo Ralf, danke für deine Antwort, super, dass du dich um Probleme anderer kümmerst. Ich bin leider erst heute dazu gekommen, es auszuprobieren. Ich komme dennoch nicht weiter. Die Anzeigen sind jetzt nach der Änderung wie folgt:

Fatal error: Call to undefined method WooCommerce::wc_add_notice() in C:\xampp\htdocs\wordpressshop\wordpress-4.1.1-de_DE\wordpress\wp-content\themes\travelify\functions.php on line 170

Fatal error: Call to undefined method WooCommerce::wc_add_notice() in C:\xampp\htdocs\wordpressshop\wordpress-4.1.1-de_DE\wordpress\wp-content\themes\travelify\functions.php on line 146

In der functions Php habe ich in den Zeilen folgende Codes:

$woocommerce->wc_add_notice( __(‚Bitte bestätigen Sie unsere AGB.‘), $notice_type = ‘error’ ); in der Zeile 146

$woocommerce->wc_add_notice( __(‚Bitte bestätigen Sie die Kenntnisnahme des Widerrufsrecht.‘), $notice_type = ‘error’ ); in der Zeile 170

Da aus deiner Antwort nicht ganz klar war, ob es wp_…. oder wc_….. heißen sollte, habe ich beides ausprobiert. Nachdem das nicht funktionierte, habe ich deine Angabe alleine eingefügt, also ohne $woocommerce-> davor und ohne den Link, aber auch da bekomme ich die Anzeige. Hast du noch eine Idee???
Gruß Frank

Benjamin
7 Jahre zuvor

Hallo Zusammen,

es wird hier auf eine functions.php Bezug genommen, leider habe ich keinen Hinweis darauf gefunden, wo ich diese functions.php finde. Um welche Datei handelt es sich? Und um welches PlugIn was sich in der Endphase befindet handelt es sich? Fragen über fragen …

Viele Grüße
Benjamin

Petra
Petra
7 Jahre zuvor

Hallo Ralf,

immer, wenn ich die Checkboxen versetzen möchte (hätte sie gerne oberhalb der customer details), erhalte ich den Fehler:

Call to a member function get_value() on a non-object in …

Oder warte ich einfach auf dein Plugin? :o)

Elvis Martínez
7 Jahre zuvor

Hallo Ralf,

ich habe endlich eine Lösung gefunden für fast alle WordPress-WooCommerce-Probleme denke ich. Ich warte nur darauf dein Plugin auf http://www.puenktchenkommastrich.com zu installieren.

Aber was anderes warum ich eigentlich schreibe. Ich würde gerne über dein Plugin auf mein Blog http://www.emart-digital.com/blog-digitale-gesellschaft-und-forschung/ berichten. Wann ist die Lancierung?

Viele grüße
Elvis Martínez @eMART Digital

Stefan
Stefan
7 Jahre zuvor

Vielen Dank für die gute Anleitung!

Leider funktioniert auf unserer Seite die Weiterleitung zur Kasse nicht mehr, nachdem die functions.php angepasst wurde. Manuell lässt sich die Seite noch laden. Wir wären sehr dankbar für Lösungsvorschläge.

Stefan
Stefan
7 Jahre zuvor
Reply to  Ralf

Danke für die schnelle Rückmeldung. Konnte das Problem beheben, war wohl ein Fehler mit dem child-theme

Peter
7 Jahre zuvor

Vielen Dank für die tolle Anleitung. Hat alles wunderbar funktioniert!
Ich hätte allerdings eine Frage:
Ist es möglich die beiden Felder für AGB und Widerruf ganz am Ende einzublenden? Für mich wäre es optimal zwischen Gesamtsumme und Zahlung oder zwischen Zahlung und Kaufen-Button. Habe es mit verschiedenen Hooks probiert ohne Erfolg.

Grüße,
Peter

Klaus
Klaus
7 Jahre zuvor

Super Anleitung, danke!

Habe ich so 1:1 übernommen und die Anzeige der Checkboxen und das Prüfen, ob die Haken gesetzt wurden, funktioniert wunderbar. Nur die Fehlermeldung wenn der Haken nicht gesetzt wird erscheint nicht. Irgendeine Idee, woran das liegen könnte?

Danke!

trackback

[…] Funktionen in der ” functions.php ” haben sich nicht geändert. Diese könnte Ihr in Teil 5 meiner WooCommerce Reihe […]

Mathias
8 Jahre zuvor

Hallo und vielen Dank,
für die vielen Tipps!
Ich bastele grad an einem Shop und konnte einiges von dem, was du geschrieben hast schon umsetzen.
Eine Sache aber verstehe ich nicht, vielleicht kannst du mir helfen ?!:

Wie auch in deinem Warenkorb und Checkout habe auch ich in den meinigen Radiobuttons für die Versandmethoden. Bei dir macht es Sinn, weil vielleicht jemand das Produkt abholen soll. Bei mir aber ist es so: Bis 39,00€ gibts eine Versandkostenpauschale von 3,00€…funktioniert. Darüber ist alles versandkostenfrei…funktioniert auch. Nun aber hat der Kunde die Möglichkeit, eben zwischen diesen beiden Methoden zu wählen. Wir könnten meinen er wäre schön dumm, wenn er sich statt für die kostenfreie Variante nun doch die Versandkosten wählte. Lieber wäre mir, wenn in diesem Falle die Wahl für ihn nicht mit Auswahlfeld/Radiobutton stünde, sondern eben einfach nur : Versandkostenfrei.
Hoffe du hast mein Problem verstehen können. Wenn du eine Idee hast, wie ich das anstellen könne, die Versandkosten, welche ja ab 39€ nicht mehr anstehen, verbergen kann, so gib mir bitte bescheid.
Danke,
Mathias Illing

29
0
Would love your thoughts, please comment.x
()
x