WooCommerce Update 2.1.2 – Bestellbutton ändern
Erste Erfahrungen mit dem WooCommerce Update auf Version 2.1.1 bzw. 2.1.2
Nachdem ich die letzten Tage intensiv damit verbracht habe, mir das oder die WooCommerce Update(s), die seit dem 10. Februar veröffentlich wurden, mal genauer anzuschauen, möchte ich nun damit beginnen, Euch über die ersten Erfahrungen zu berichten.
Dies wird jetzt keine Serie und ich werde auch nicht chronologisch vorgehen. Ich werde die Dinge oder Änderungen, die mir aufgefallen sind, beschreiben und Euch meine Ideen und Lösungen vorstellen. Dies muss nicht der beste, schnellste oder einfachste Weg sein, sondern beschreibt nur, wie ich meine Vorstellungen umgesetzt habe. Ich freue mich, wenn Ihr Eurerseits Lösungen, Ideen oder Vorstellungen unten in den Kommentarbereich schreibt.
Nachdem ich das letzte Update von WooCommerce installiert hatte, ging erst einmal im Checkout Bereich wenig bis gar nichts. Darauf war ich allerdings vorbereitet, da mir einige meiner Leser bzw. Kunden bereits über Schwierigkeiten berichtet hatten.
Überarbeitete Templates
Dies liegt vor allem daran, dass in der neuen WooCommerce Version 2.1 die Templates bzw. deren Zuordnung und Abhängigkeiten komplett verändert bzw. neu strukturiert wurden. Dies führte dazu, dass die eigenen Änderungen, die ich aus Gründen der Rechtssicherheit von WooCommerce bzw. aus gestalterischen Gründen vorgenommen hatte, nicht mehr funktionierten.
Datensicherung bzw. Child-Templates
Daher möchte ich an Stelle noch einmal ausdrücklich erwähnen, dass Ihr bitte immer vor einem solch wichtigen Update unbedingt eine Datensicherung durchführt. Und zwar komplett, also von Datenbank und Dateien per FTP. Weiterhin solltet Ihr immer mit einem Child-Theme arbeiten und in diesem einen WooCommerce Ordner mit den Templatedateien anlegen. Diese könnt Ihr dann nach Herzenslust ändern. Diese werden nämlich durch ein Update nicht überschrieben und Ihr könnt immer wieder in den Ausgangszustand zurück.
Erste Änderungen - WooCommerce Checkout-Button
Ziemlich schnell ist mir aufgefallen, dass meine Änderung des Checkout-Buttons nicht mehr richtig funktionierte. Zwar wurde die Änderung erst übernommen, dann aber der Zahlungsmethode entsprechend dynamisch verändert. Bei mir stand also erst die Button-Beschriftung " kostenpflichtig bestellen " und nach der Auswahl " PayPal " änderte sich der Button in " Proceed to PayPal ". Dies möchte ich aber nicht. Da hier der mir bekannte Action Hook nicht mehr richtig arbeitete, habe ich die Änderung in meinen Template Dateien von WooCommerce vorgenommen. Die richtige Datei lautet " review-order.php ". Diese findet Ihr im Original in Eurem WooCommerce-Plugin-Ordner unter " /templates/checkout ". Diese kopiert Ihr in Euren WooCommerce-Ordner in Eurem Child-Theme-Verzeichnis. Diesen findet Ihr unter " /euer_Childtheme/woocommerce/checkout ". Solltet Ihr einen solchen Ordner noch nicht angelegt haben, ist jetzt der richtige Zeitpunkt.
Folgende Änderungen habe ich vorgenommen. Diese sind farblich hervorgehoben in Zeile 4 und 5:
foreach ( $available_gateways as $gateway ) {
?>
<li class="payment_method_<?php echo $gateway->id; ?>">
<?php /* order_button_text aendern */ ?>
<?php $gateway->order_button_text = 'kostenpflichtig bestellen'; ?>
<input id="payment_method_<?php echo $gateway->id; ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
<label for="payment_method_<?php echo $gateway->id; ?>"><?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?></label>
<?php
if ( $gateway->has_fields() || $gateway->get_description() ) :
echo '<div class="payment_box payment_method_' . $gateway->id . '" ' . ( $gateway->chosen ? '' : 'style="display:none;"' ) . '>';
$gateway->payment_fields();
echo '</div>';
endif;
?>
</li>
Aufgrund der dynamischen Anpassung des WooCommerce Checkout Buttons in Version 2.1 musste, ich eine ähnliche Änderung auch noch an einer anderen Stelle der " review-order.php "einfügen. Diese sind farblich hervorgehoben in den Zeilen 3-7:
<?php /* $order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) ); */ $order_button_text = 'kostenpflichtig bestellen'; echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' ); ?>
Den nicht mehr verwendeten Code habe ich auskommentiert. Den Text " kostenpflichtig bestellen " könnt Ihr natürlich an Eure eigenen Bedürfnisse anpassen. Wer sich noch einmal den Hook für die " functions.php "anschauen möchte oder diesen entsprechend anpassen will, findet Informationen in Teil 6 der WooCommerce-Reihe.
Ich hoffe, der eine oder andere hat wieder ein paar wichtige Anregungen oder Tipps gefunden. Viel Spaß und Erfolg bei der Umsetzung. Ich freue mich auf Eure Kommentare. Bis zum nächsten Mal.
[fb_share]
Herzlichen Dank für das Tutorial! Klappt perfekt und ist super erklärt!
Hallo Christian,
danke für Dein Feedback. Weiterhin viel Spaß mit WooCommerce.
Grüße
Ralf
Hallo,
vielen Dank für deine Update bzgl. wc 2.1
Ich habe jetzt den kostenpflichtig bestellen button wie von dir beschrieben aktualisiert und habe plötzlich 2 kostenpflichtig bestellen buttons nebeneinander. Habe ich etwas falsch verstanden, die review-order.php musste doch an zwei Stellen ergänzt werden?
Grüße
mustafa
Hallo Mustafa,
ja, richtig. Die Datei muss an 2 Stellen angepasst werden. Aber da geht es nur um die Beschriftung und nicht um die nochmalige Darstellung des Buttons. Habe eben mal meine “ review-order.php “ online gestellt. Kannst Du ja mal mit Deiner vergleichen. Und schau mal, ob Dein Theme auf dem aktuellen Stand ist, denn hier müsste es auch ein WooCommerce Update gegeben haben. Meine “ review-order.php “ findest Du hier.
Grüße Ralf
[…] Mit diesem Beitrag möchte ich an meinen gestrigen anknüpfen und die von mir unternommenen Änderungen des WooCommerce Checkouts nach den Updates auf die Versionen 2.1.1 bzw. 2.1.2 beschreiben. Wer noch einmal die Anpassung des Checkout-Buttons nachlesen möchte, findet dies hier. […]