So bearbeiten Sie die WooCommerce-Dankeschön-Seite programmgesteuert

Möchten Sie die Danke-Seite Ihres Shops anpassen? In diesem Leitfaden zeigen wir Ihnen verschiedene Möglichkeiten , die WooCommerce-Dankeschön-Seite programmgesteuert zu bearbeiten .

Warum sollten Sie die WooCommerce-Dankeseite anpassen?

Die Dankesseite ist die Seite, die Benutzer sehen, nachdem sie eine Bestellung abgeschlossen haben . Standardmäßig dankt es den Käufern einfach für ihren Einkauf und stellt grundlegende Informationen zur Bestellung bereit, z. B. Bestellnummer, gekaufte Artikel, Preis, Zahlungsmethode usw. Daran ist nichts auszusetzen, aber Sie können diese Seite viel besser nutzen.

Die Danke-Seite wird oft übersehen, kann aber extrem leistungsfähig sein. Denken Sie daran, dass alle Ihre Käufer es sehen werden, nachdem sie eine Bestellung aufgegeben haben, also ist es eine großartige Gelegenheit, Upselling zu betreiben oder Ihren Kunden nützliche Informationen zu geben. Indem Sie die Danke-Seite anpassen, können Sie Ihren Käufern ein viel besseres Einkaufserlebnis bieten.

Wenn jemand Ihre Dankeschön-Seite sieht, liegt das daran, dass er eine Bestellung in Ihrem Shop aufgegeben hat. Das bedeutet, dass sie Ihnen vertrauen (zumindest genug, um bei Ihnen zu kaufen). Wie Sie wahrscheinlich wissen, ist es viel einfacher, an jemanden zu verkaufen, der bereits bei Ihnen gekauft hat, als an neue Kunden. Auch wenn Ihr Hauptziel möglicherweise nicht darin besteht, etwas zu verkaufen, können Sie daran arbeiten, diesen Käufer zu einem wiederkehrenden Kunden zu machen.

Beispielsweise können Sie die Danke-Seite bearbeiten und nützliche Anleitungen, Empfehlungslinks hinzufügen, die Benutzer teilen können, um eine Belohnung, exklusive Angebote, Rabatte auf zukünftige Einkäufe und mehr zu erhalten.

Es gibt mehrere Möglichkeiten, wie Sie die Danke-Seite anpassen können, um die UX zu verbessern und Kunden dazu zu bringen, in Ihr Geschäft zurückzukehren. Im folgenden Abschnitt zeigen wir Ihnen verschiedene Methoden zum programmatischen Bearbeiten der WooCommerce-Dankeschön-Seite .

So bearbeiten Sie die WooCommerce-Dankeschön-Seite programmgesteuert: 2 Methoden

Es gibt zwei Möglichkeiten, die Danke-Seite programmatisch in WooCommerce zu bearbeiten :

1. Haken verwenden
2. Vorlagendateien überschreiben

Darüber hinaus können Sie je nach Anforderung auch beide Methoden kombinieren.

Schauen wir uns beide Wege genauer an.

HINWEIS : Da wir einige Kerndateien bearbeiten werden, empfehlen wir Ihnen, bevor Sie beginnen, ein vollständiges Backup Ihrer Website zu erstellen und ein untergeordnetes Design zu installieren. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie diese Anleitung, um eines zu erstellen, oder verwenden Sie eines dieser Plugins.

1) Passen Sie die Danke-Seite mit Hooks an

Um WooCommerce-Hooks auszuführen, arbeiten wir an der Datei functions.php des Child-Themes. Wir brauchen diese Datei, um die aus dem Parent-Theme zu überschreiben.

Einige der Hooks, die WooCommerce bereitstellt, funktionieren auf der Danke-Seite, wie z. B. woocommerce_before_thankyou und woocommerce_thankyou . Darüber hinaus können Sie Titel und Inhalt mit Filter-Hooks wie woocommerce_endpoint_order-received_title und woocommerce_thankyou_order_received_text .

Um einen dieser Hooks zu verwenden, lösen Sie jeden von ihnen aus, indem Sie das folgende Snippet zur Datei functions.php des Child-Themes hinzufügen:

 add_action('woocommerce_before_thankyou','QuadLayers_before_thankyou');
Funktion QuadLayers_before_thankyou(){
    Echo "TEST";
}

Filter-Hooks funktionieren ähnlich, müssen aber einen Wert zurückgeben. Der Filter-Hook „woocommerce_before_thankyou“ bearbeitet den Titel der Danke-Seite wie folgt:

 add_filter( 'woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title' ); 
Funktion QuadLayers_thank_you_title( $old_title ){ 
     return 'Du bist großartig!'; 
}

2) Danke-Seite bearbeiten und Vorlagendateien überschreiben

Eine andere Möglichkeit, die WooCommerce-Dankeschön-Seite programmgesteuert zu bearbeiten, besteht darin, Vorlagendateien zu überschreiben. Es ist erwähnenswert, dass das Überschreiben von Vorlagendateien Ihnen viel Flexibilität bietet, aber wenn Sie eine Vorlagendatei überschreiben, funktionieren die Hooks, die an dieser Datei arbeiten, nicht mehr.

Um Vorlagendateien zu überschreiben, müssen Sie die Datei thankyou.php kopieren, die sich im Ordner WC-Plugin-Vorlagen befindet, und die gleichnamige Datei in den WooCommerce-Ordner Ihres Child-Themes einschließlich des Checkout-Unterordners wie folgt einfügen:

Um mehr darüber zu erfahren, wie man Vorlagendateien in WooCommerce anpasst, sieh dir diese Anleitung an.

Danach kannst du die Datei thankyou.php deines Child-Themes frei bearbeiten und die Standarddatei überschreiben.

Beispielskripte zum programmatischen Bearbeiten der WooCommerce-Dankeschön-Seite

In diesem Abschnitt zeigen wir Ihnen verschiedene Skripte, mit denen Sie Ihre WooCommerce-Dankeschön-Seite programmgesteuert bearbeiten können. Für dieses Tutorial verwenden wir das Storefront-Design, sodass es möglicherweise etwas anders aussieht, wenn Sie ein anderes Design verwenden.

So sieht die Standard-Dankeschön-Seite in WooCommerce aus:

1) Fügen Sie der Danke-Seite benutzerdefinierten Inhalt hinzu

Wie zuvor gesehen, können wir WooCommerce-Hooks verwenden, um einen benutzerdefinierten Titel hinzuzufügen. Dieses Mal werden wir weitere nützliche Inhalte hinzufügen, damit Kunden uns in den sozialen Medien folgen können.

Fügen Sie den folgenden Code in die Datei functions.php Ihres Child-Themes ein:

 add_filter( 'woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title' ); 
Funktion QuadLayers_thank_you_title( $old_title ){ 
     return 'Du bist großartig!'; 
}
add_filter( 'woocommerce_thankyou_order_received_text', 'QuadLayers_thank_you_details', 20, 2 ); 
Funktion QuadLayers_thank_you_details( $thank_you_title, $order ){ 
    $str= '<h3><b>Oh ' . $order->get_billing_first_name() . '</b>, vielen Dank für Ihre Bestellung!</h3>';
    $str.='<p>Wir werden uns in Kürze mit Ihnen in Verbindung setzen, um Ihren Einkauf zu liefern.</p>';
    $str.='<p>Bleib dran, um die neuesten Ankündigungen zu erhalten und folge uns auf unseren Social-Media-Profilen</p>>';
    $str.= '<div><div><a href="#twitter.com"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Twitter_Logo.png" / ></a></div>'; 
    $str.='<div><a href="#facebook.com"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" /></a></div>'; 
    $str.='<div><a href="#instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Instagram_colored_svg_1-512. png" /></a></div></div>';
   $str.='<p>Hier finden Sie alle Informationen zu Ihrer Bestellung. Prost!</p>';    
    $str zurückgeben;
}

Denken Sie daran, die Bild-URLs durch den URL-Pfad Ihrer eigenen Website zu ersetzen. Darüber hinaus müssen Sie Backlinks zu Ihren Social-Media-Profilen einfügen, damit Benutzer, wenn sie auf den Link klicken, zu Followern werden.

Das wird das Ergebnis sein:

2) Zeigen Sie Produktinformationen auf der Danke-Seite an

Eine weitere interessante Alternative ist die Anzeige anderer Produkte, damit Kunden andere Artikel kaufen können, an denen sie interessiert sind. Um bestimmte Produkte anzuzeigen, können Sie WooCommerce-Shortcodes wie diese verwenden:

 add_action( 'woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2 );
Funktion QuadLayers_thankyou_page(){
   $sh = '<h4>Vielleicht möchten Sie diese anderen Produkte überprüfen. </h4>';
  $sh .='<div class="tx_account">'.do_shortcode('
 ').'</div>';
    echo $sch;
}

Hier verwenden wir den Produkt-Shortcode, um vorgestellte Produkte anzuzeigen, und das Ergebnis ist Folgendes:

3) Kontodetails auf der Danke-Seite anzeigen

Ebenso können wir Details des Benutzerkontos anhängen und nützliche Registerkarten mit seinen Bestellungen, Adressen, Kontoinformationen und mehr anzeigen.

 add_action( 'woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2 );
Funktion QuadLayers_thankyou_page(){
   $sh = "<h2>Ihr Konto</h2>";
   $sh .='<div class="tx_account">'.do_shortcode(' [ woocommerce_my_account ] ').'</div>'; echo $sch; }

Nachdem Sie dies in die Datei functions.php eingefügt haben, sollte Ihre Danke-Seite wie folgt aussehen:

4) Geben Sie Coupons aus, wenn Einkäufe einen bestimmten Gesamtpreis überschreiten

Das Anpassen der Dankesseite kann eine großartige Möglichkeit sein, aus einem Gelegenheitskäufer einen treuen Kunden zu machen. Rabattgutscheine für zukünftige Einkäufe sind eine hervorragende Möglichkeit, dies zu erreichen.

Das folgende Skript fügt am Ende der Dankesseite einen Text hinzu, wenn der Gesamtpreis der Bestellung höher als 100 $ ist.

 add_action( 'woocommerce_thankyou', 'QuadLayers_thankyou_order', 10, 2 ); 
Funktion QuadLayers_thankyou_order($order_id){
    $order = wc_get_order( $order_id );
    $gesamt=0;
    foreach ($order->get_items() as $item_key => $item ):
        $item_data=$item->get_data();       
        $item_total=intval($item_data['total']);
        $total+=$item_total;        
    endforreach;
    if($gesamt>100):
        echo "<p>Der Betrag Ihrer Bestellung übersteigt den Bereich von 100 $, sodass Sie mit einem speziellen Gutschein für Ihre nächste Bestellung belohnt werden.</p><p> Keine Sorge, er bleibt aktiv, bis Sie sich entscheiden, wiederzukommen !</p><p> Verwenden Sie den folgenden Gutschein <code>[RTC_discount]</code>bei Ihrer nächsten Bestellung, um einen Sonderrabatt von 33 % zu erhalten</p>";
    endif;
}

In diesem Beispiel haben wir 100 $ gewählt, aber stellen Sie sicher, dass Sie den Wert in Zeile 8 – if($total>100): – so anpassen, dass er für Ihr Unternehmen sinnvoll ist.

5) Bestelldetails auf der Danke-Seite entfernen und bearbeiten

Schauen wir uns nun ein komplexeres Beispiel an und nehmen einige Änderungen an der WooCommerce-Vorlagendatei thankyou.php . Wenn Sie mit der Bearbeitung von Vorlagendateien nicht vertraut sind, können Sie sich diese Anleitung ansehen.

Im folgenden Beispiel entfernen wir die E-Mail, den Gesamtbetrag und die Zahlungsmethode von der Bestellseite, da sie auch in den Bestelldetails angezeigt werden. Das bedeutet, dass wir nur die Bestellnummer und das Bestelldatum hinterlassen.

Gleichzeitig haben wir die Liste der Bestelldetails nach oben verschoben und die Labels bearbeitet.

Erstellen Sie dazu eine Datei thankyou.php für Ihr untergeordnetes Thema, wie im vorherigen Abschnitt beschrieben, und fügen Sie den folgenden Code darin ein:

 <?php definiert( 'ABSPATH' ) || beenden;?>
<div class="woocommerce-order">
<?php if ( $order ): do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> <?php if ( $order->has_status( 'failed' ) ) : ?>
 <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_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 esc_html_e( 'Pay', 'woocommerce' ); ?></a><?php if ( is_user_logged_in() ): ?><a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'Mein Konto', 'woocommerce' ); ?></a><?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', esc_html__( 'Danke. Ihre Bestellung ist eingegangen.', 'woocommerce' ), $order ); ></p>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order"><?php esc_html_e( 'Bestellnummer ID:', 'woocommerce' ); ><strong><?php echo $order->get_order_number(); // phpcs: WordPress.Security.EscapeOutput.OutputNotEscaped ignorieren ?></strong></li>
<li class="woocommerce-order-overview__date date"><?php esc_html_e( 'Datum:', 'woocommerce' ); ?><strong><?php echo wc_format_datetime( $order->get_date_created() ); ></strong></li>
</ul>
<?php endif; ?>
<?php else : ?><p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Danke. Ihre Bestellung wurde empfangen.', 'woocommerce' ), null );>
</p><?php endif; ?>
</div>

Wenn alles gut gelaufen ist, sollten Sie so etwas sehen:

Fazit

Alles in allem wird die Dankesseite oft übersehen, aber sie kann einen großen Einfluss auf Ihr Unternehmen haben. Durch das Hinzufügen von Empfehlungslinks, exklusiven Angeboten und Rabatten für zukünftige Einkäufe können Sie Ihren Umsatz steigern und die Anzahl wiederkehrender Kunden steigern.

In diesem Leitfaden haben wir zwei Möglichkeiten gesehen, die WooCommerce-Dankeschön-Seite programmgesteuert zu bearbeiten:

• Mit Haken
• Vorlagendateien überschreiben

Beide Methoden sind effektiv und können in verschiedenen Situationen funktionieren, also wählen Sie diejenige, die Ihren spezifischen Anforderungen am besten entspricht.

Jetzt sollten Sie in der Lage sein, Ihre Danke-Seite anzupassen und:

• Fügen Sie benutzerdefinierte Inhalte wie Social-Media-Links hinzu
• Produkte anzeigen
• Kontodaten anzeigen
• Geben Sie Rabatte, wenn der Kunde einen bestimmten Mindestbetrag erreicht
• Bestelldetails entfernen und bearbeiten

Beachten Sie schließlich, dass die gleichen Hooks, die in den WooCommerce-Vorlagendateien definiert sind, diejenigen sind, die Sie in der Datei functions.php des untergeordneten Designs verwenden können. Wenn Sie also die Hooks aus der Vorlagendatei entfernen, funktionieren sie nicht mehr auf Ihrer Website.

Weitere Anleitungen zum Anpassen Ihres Shops finden Sie unter:

• So passen Sie die Shop-Seite in WooCommerce an
• Bearbeiten Sie die WooCommerce-Produktseite programmgesteuert
• So passen Sie die WooCommerce-Seite „Mein Konto“ an

Haben Sie Ihre Danke-Seite angepasst? Welche Methode hast du verwendet? Lassen Sie es uns im Kommentarbereich unten wissen!