So passen Sie die WooCommerce-Dankeseite mit Code an
Veröffentlicht: 2022-09-15Der wichtigste Aspekt einer erfolgreichen Dankesseite ist sicherzustellen, dass die Leute sie sehen. Sie brauchen nichts Ausgefallenes oder Kompliziertes. Es muss nur einen guten ersten Eindruck hinterlassen, indem es sich vom Rest der Website abhebt.
Der Zweck dieses Artikels ist es, Ihnen ein allgemeines Tutorial zur Verfügung zu stellen, wie Sie die WooCommerce-Dankeschön-Seite anpassen oder die empfangene Seite mit Code bestellen können.
Warum die WooCommerce-Dankeseite anpassen?
Die Dankesseite bietet Ihnen die Möglichkeit, nach dem Kauf mit Ihren Kunden in Kontakt zu bleiben.
Sie können die Bedeutung der Bestellbestätigung oder Dankesseite in Ihrem Online-Shop übersehen, aber sie ist tatsächlich ein entscheidender Teil des Verkaufsprozesses.
Die Standard-Dankeseite von WooCommerce ist langweilig und eine Sackgasse für Kunden. Kunden sind verwirrt, was als nächstes kommt.
Stattdessen können Sie, wenn Sie es anpassen, Folgendes tun:
- Onboarding-Anweisungen hinzufügen, nächste Schritte…
- Bewerben Sie verwandte Produkte durch Cross-Selling und Upselling
- Verwenden Sie Coupons, um zu Wiederholungskäufen anzuregen
- Stellen Sie Kunden wertvolle Ressourcen zur Verfügung
- Binden Sie Kunden mit Social Proof, Videos usw. ein.
Sehen wir uns vor diesem Hintergrund an, wie wir mithilfe von Code ganz einfach eine benutzerdefinierte Dankesseite erstellen und anpassen können. Liebe Entwickler, alle Augen hier!
Passen Sie die WooCommerce-Dankeseite mit Code an
Es gibt drei Möglichkeiten, die Dankesseite oder die Bestellempfangsseite mit Code anzupassen:
- Erstellen einer Weiterleitung
- Verwenden von Filtern
- Vorlagendateien überschreiben
Lassen Sie diesen Beitrag zum sicheren Hinzufügen von Code zur Datei auch in einem anderen Tab als Referenz geöffnet.
Sehen wir uns jede der drei Möglichkeiten im Detail an.
Anpassen der Dankesseite durch Erstellen einer Weiterleitung
Es ist einfach, eine Umleitung vorzunehmen, indem Sie ein neues Plugin erstellen oder die Datei functions.php öffnen und den folgenden Code am Ende der Datei eingeben.
add_action( 'template_redirect', 'sa_custom_redirect_after_purchase' );
Funktion sa_custom_redirect_after_purchase() {
global $wp;
if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' );
Ausfahrt;
}
}
Hier ist die benutzerdefinierte Dankesseite nach der Bestellung.
Die Umleitung scheint gut zu sein, aber es fehlen wichtige Dinge wie die Übersichtstabelle der Bestellung, Rechnungs- und Versanddetails und andere wichtige Informationen, die WooCommerce derzeit bereitstellt.
Anpassen der Dankesseite mit Filtern
Anstatt eine Dankesseite zu erstellen, möchten Sie vielleicht den Seitentitel oder einen Text vor den Bestellinformationen ändern. In solchen Fällen können Sie Filter verwenden.
Titel der Dankesseite ändern
add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
Funktion sa_title_order_received( $title, $id ) {
if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
$title = "Vielen Dank für Ihre Bestellung :)";
}
$title zurückgeben;
}
WooCommerce stellt die Funktion is_order_received_page() in der Datei Includes/wc-conditional-functions.php bereit. So würde der geänderte Titel aussehen:
Personalisieren des Titels der Dankesseite
Sie können dies tun, um den Namen des Kunden in den Titel oder etwas anderes aufzunehmen.
add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
Funktion sa_personalize_order_received_title( $title, $id ) {
if ( is_order_received_page() && get_the_ID() === $id ) {
global $wp;
// Holen Sie sich die Bestellung. Die folgenden Zeilen sind in order_received() in der Datei include/shortcodes/class-wc-shortcode-checkout.php vorhanden
$order_id = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );
$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );
if ( $order_id > 0 ) {
$order = wc_get_order( $order_id );
if ( ! $order || ! hash_equals( $order->get_order_key(), $order_key ) ) {
$order = falsch;
}
}
if ( $order-Instanz von WC_Order ) {
$title = sprintf( "Du bist großartig, %s!", esc_html( $order->get_billing_first_name() ) );
}
}
$title zurückgeben;
}
Das wird so aussehen:
Anpassen des Textes vor Bestellinformationen
Der Standardtext, der vor den Bestellinformationen angezeigt wird, lautet „Danke. Ihre Bestellung ist eingegangen.".
Dieser Text stammt aus der Datei templates/checkout/thankyou.php. Sie können diesen Text mit einem in WooCommerce verfügbaren Filter ändern, woocommerce_thankyou_order_received_text .
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
Funktion sa_update_order_received_text( $text, $order ) {
$text .= 'Wir haben Ihnen die Bestellbestätigung per E-Mail zugeschickt.';
$text zurückgeben;
}
An diesen Code wird der Text „Wir haben Ihnen die Bestellbestätigung per E-Mail gesendet“ angehängt. zum bestehenden Text.
Wenn Sie den Text vollständig überschreiben möchten, müssen Sie vermeiden, die Variable $text zu verketten .
$text = 'Wir haben Ihnen den Kaufbeleg per E-Mail zugeschickt.';
Wenn Sie hier Anweisungen hinzufügen möchten, die erfordern, dass der Kunde ein Formular herunterlädt, können Sie dies auch tun.
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
Funktion sa_change_order_received_text( $text, $order ) {
$text = 'Wir haben Ihnen den Kaufbeleg per E-Mail zugeschickt. Bitte stellen Sie sicher, dass Sie <a href="https://demo.storeapps.org/form.pdf">dieses Formular ausfüllen, bevor Sie an der Veranstaltung teilnehmen.';
$text zurückgeben;
}
Das wird so aussehen:
Anpassen der Dankesseite durch Überschreiben von WooCommerce-Vorlagendateien
WooCommerce zeigt den Inhalt der Dankesseite aus der thankyou.php , die sich im Ordner woocommerce/templates/checkout/ befindet.
Sie benötigen einige PHP-Kenntnisse, wenn Sie diese Methode zum Anpassen der WooCommerce-Dankeseite wählen möchten.
Sie können Ihre eigene Vorlage verwenden, indem Sie die Datei thankyou.php in den Ordner Ihres Designs in einer ähnlichen Ordnerstruktur kopieren.
Wenn Sie beispielsweise das Storefront-Design verwenden, sollte Ihre thankyou.php kopiert werden nach:
Ordner wp-content/themes/storefront/woocommerce/checkout/ . Sie müssen die beiden Ordner „woocommerce“ und „checkout“ erstellen.
Wenn WooCommerce feststellt, dass dieselbe Vorlage in Ihrem eigenen Design vorhanden ist, wird der in Ihrem Design vorhandenen Vorlage Priorität eingeräumt.
Nehmen wir ein Beispiel. Auf der Standard-Dankeseite wird die Zahlungsmethode am Anfang und in den Bestelldetails angezeigt.
Wir möchten dem Kunden einen Gutscheincode für seinen nächsten Einkauf zur Verfügung stellen und die Zahlungsmethode aus dem oberen Abschnitt entfernen.
Unten ist die Vorlage thankyou.php:
<?php
if ( ! definiert( 'ABSPATH' ) ) {
Ausfahrt;
}
?>
<div class="woocommerce-order">
<?php if ( $order ): ?>
<?php if ( $order->has_status( 'failed' ) ) : ?>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( 'Leider kann Ihre Bestellung nicht bearbeitet werden, da die ursprüngliche Bank/Händler Ihre Transaktion abgelehnt hat. Bitte versuchen Sie Ihren Kauf nochmal.', 'woocommerce' ); ?></p>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Pay', 'woocommerce' ) ?>
<?php if ( is_user_logged_in() ) : ?>
<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'Mein Konto', 'woocommerce' ); ?>
<?php endif; ?>
</p>
<?php sonst : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Danke. Ihre Bestellung ist eingegangen. Wir haben Ihnen die Bestellbestätigung für diese Transaktion.', 'woocommerce' ), $order ); ?></p>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order">
<?php _e( 'Transaktions-ID:', 'woocommerce' ); ?>
<strong><?php echo $order->get_order_number(); ?></strong>
</li>
<li class="woocommerce-order-overview__date date">
<?php _e( 'Datum:', 'woocommerce' ); ?>
<strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong>
</li>
<li class="woocommerce-order-overview__total total">
<?php _e( 'Total:', 'woocommerce' ); ?>
<strong><?php echo $order->get_formatted_order_total(); ?></strong>
</li>
</ul>
<?php endif; ?>
<p>Herzlichen Glückwunsch zu Ihrer ersten Bestellung. Hier gibt es 15 % Rabatt auf Ihre nächste Bestellung. Verwenden Sie den Gutscheincode <strong>WELCOME15</strong>, um den Rabatt in Anspruch zu nehmen.</p>
<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<?php sonst : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Danke. Ihre Bestellung ist eingegangen.', 'woocommerce' ), Null ); ?></p>
<?php endif; ?>
</div>
Möglicherweise möchten Sie die in der Bestelldetailtabelle angezeigten Daten und die Kundendaten (wenn Sie eingeloggt sind) ändern.
Diese stammen aus einer anderen Datei. WooCommerce verwendet eine Funktion woocommerce_order_details_table() , die an den woocommerce_thankyou hook angehängt ist.
Die Funktion woocommerce_order_details_table() ist in der Datei Includes/wc-template-functions.php definiert.
Die Dankesseite ist eine Sammlung von vier verschiedenen Vorlagendateien:
- templates/checkout/danke.php
- templates/order/order-details.php
- templates/order/order-details-item.php
- templates/order/order-details-customer.php
Sobald Sie wissen, welche Daten aus welcher Vorlage stammen, müssen Sie nur noch die richtige Vorlage in den Ordner Ihres Themas kopieren und das war's.
Sehen wir uns nun an, wie Sie die WooCommerce-Dankeseite für eine Produktvariation anpassen können.
Wie kann ich mit Hook auf eine benutzerdefinierte Dankesseite umleiten, die auf der Variations-ID basiert?
add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 );
Funktion sa_redirect_product_attribute_based( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order-Instanz von WC_Order ) {
foreach( $order->get_items() as $item ) {
// Fügen Sie hier unten die gewünschte Variations-ID hinzu
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
// Ändern Sie unten die URL, an die Sie Ihren Kunden weiterleiten möchten
wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' );
}
}
}
}
Drucken Sie den Text auf der Dankesseite basierend auf dem Produktattribut
Wenn Sie das obige Beispiel erweitern, können Sie auch jeden benutzerdefinierten Text auf der WooCommerce-Dankeschön-Seite basierend auf der Variations-ID anzeigen. Hier ist der Code dafür:
add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 );
Funktion sa_show_custom_text_by_variation_id( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order-Instanz von WC_Order ) {
foreach( $order->get_items() as $item ) {
// Fügen Sie hier unten die gewünschte Variations-ID hinzu. Meine Attribute sind Farbe, Größe
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
echo '<p>Zögern Sie nicht, uns zu kontaktieren, falls Sie das T-Shirt gegen eine andere Größe umtauschen möchten.</p>';
}
}
}
}
Wenn Sie den Code hinzufügen, würde die Danke-Seite so aussehen:
Das sind ziemlich viele Codeschnipsel hier. Wenn Sie sich nicht mit Codierung beschäftigen und eine einfache Lösung suchen, lesen Sie unten, um ein leistungsstarkes Plugin zu entdecken.
Wie richte ich mit einem Plugin eine benutzerdefinierte Dankesseite pro Produkt und Website ein?
Das Anpassen der Dankesseite umfasst viele Elemente. Es ist nicht so einfach, es scheint so. Ein kleiner Fehler, den Sie beim Hinzufügen des Code-Snippets machen, und alles geht drunter und drüber.
Wenn Sie sich also mehr auf Ihren Vertrieb und Ihr Marketing konzentrieren und sich den Programmieraufwand ersparen möchten, empfehlen wir die Verwendung des Custom Thank You Page for WooCommerce-Plugins.
Es hilft Ihnen, eine benutzerdefinierte Dankesseite für jedes Produkt sowie für die gesamte Website einzurichten. Wir werden bald Unterstützung für Produktvariationen hinzufügen.
Eine mit diesem Plugin optimierte Dankesseite ermöglicht Ihnen Upselling (mit Smart Offers), den Aufbau einer E-Mail-Liste, die Bewerbung Ihrer Angebote, das Sammeln von Feedback, das Anzeigen von Videobotschaften, Coupons und andere Dinge.
Ihre standardmäßige WooCommerce-Dankeseite wird in ein leistungsstarkes Marketingtool wie dieses umgewandelt:
Weitere Plugin-Funktionen :
- Vier vorgefertigte hochkonvertierende Dankesseiten-Vorlagen, die Ihnen den Einstieg erleichtern.
- Leiten Sie Benutzer nach dem Kauf/der Zahlung zu Affiliate-Links, Links von Drittanbietern oder Ressourcen weiter.
- Gibt Ihnen die Möglichkeit, die Dankesseite gemäß Ihrem bevorzugten Thema, Plugins und Seiteneditoren zu erstellen und die Seite nach Ihren Wünschen zu gestalten.
Probieren Sie die Live-Demo aus
Letzte Worte
Hoffentlich hat Ihnen dieser Artikel geholfen zu verstehen, wie wichtig es ist, eine benutzerdefinierte Dankesseite anzupassen, zusammen mit einem guten Verständnis dafür, wie man dies über einen Code und ein Plugin macht.
Die Nutzung dieser kleinen Seite kann eine hervorragende Gelegenheit sein, den Umsatz zu steigern, unabhängig davon, wie normal es uns erscheinen mag.