Zusammenfassung:
Die WooCommerce-Dankesseite ist der Bestellbestätigungsbildschirm, den Käufer direkt nach dem Auschecken sehen. Es gibt drei Möglichkeiten, sie anzupassen, je nachdem, wie viel Kontrolle Sie wünschen.
- No-Code-Builder: Erstellen Sie eine benutzerdefinierte Dankesseite in SeedProd mit Upsells und Produktgittern und leiten Sie WooCommerce dorthin.
- Plugin-Weiterleitung: Leiten Sie Käufer mit einem kostenlosen Weiterleitungs-Plugin zu Ihrer neuen Seite, am besten für einen Marketing- oder Upsell-Bildschirm.
- Code und Hooks: Bearbeiten Sie Inhalte direkt auf der nativen Bestellbestätigungs-Seite mit dem woocommerce_thankyou-Hook oder einem Template-Override.
- Am besten für die meisten Shops: Der No-Code-Weg, da er Bestelldetails beibehält und Conversion-Blöcke hinzufügt, ohne Dateien zu berühren.
Einer der am meisten übersehenen Momente in einem Online-Shop ist, was direkt nach einem Verkauf passiert. Diese letzte Seite ist nicht nur eine Bestätigung. Dies ist Ihre erste Chance, auf dem Vertrauen aufzubauen, das ein neuer Kunde Ihnen gerade entgegengebracht hat.
In diesem Leitfaden führe ich Sie durch drei Möglichkeiten, eine benutzerdefinierte WooCommerce-Dankesseite zu erstellen: einen No-Code-Builder, eine Plugin-Weiterleitung und die Code- und Hooks-Methode. Beginnen wir mit der einfachsten.
- Warum Ihre WooCommerce-Dankesseite anpassen?
- So erstellen Sie eine benutzerdefinierte WooCommerce-Dankesseite in WordPress
- So bearbeiten Sie die WooCommerce-Dankesseite mit Code
- So ersetzen Sie die Standard-WooCommerce-Dankesseite
- Was macht eine gute WooCommerce-Dankesseite aus?
- Was tun, sobald Ihre Dankesseite live ist
- FAQs zur WooCommerce-Dankesseite
Warum Ihre WooCommerce-Dankesseite anpassen?
Die Standard-WooCommerce-Dankesseite ist nicht darauf ausgelegt, etwas zu verkaufen. Nachdem Käufer Ihre Checkout-Seite abgeschlossen haben, landen sie auf einem einfachen Bestätigungsbildschirm wie diesem:
Wie Ihre Dankesseite aussieht, hängt von Ihrem WordPress-Theme ab. So oder so ist dieser Standardbildschirm nicht für Conversions oder Kundenbindung optimiert.
Ersetzen Sie sie durch ein benutzerdefiniertes Design und Sie können diese Seite in einen hochkonvertierenden Bildschirm verwandeln, der Ihnen hilft:
- Ein Upsell oder Cross-Sell nach dem Checkout hinzufügen
- Bestseller oder Neuankömmlinge präsentieren
- Einen Gutschein für zukünftige Einkäufe anbieten
- Zu Produktleitfäden, Hilfe zur Einrichtung oder Bonusinhalten verlinken
- Social-Sharing-Buttons hinzufügen, um die Reichweite zu erhöhen
So erstellen Sie eine benutzerdefinierte WooCommerce-Dankesseite in WordPress
Wir verwenden SeedProd, um eine benutzerdefinierte WooCommerce-Dankesseite für Ihren Online-Shop zu erstellen.
SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress, der von über 1 Million WordPress-Websites genutzt wird. Es ist einer der besten Website-Builder für WordPress.
Es ermöglicht Ihnen, hochkonvertierende Landing Pages, benutzerdefinierte WordPress-Themes und responsive Layouts ohne Code zu erstellen. Sie können es sogar verwenden, um WooCommerce-Websites zu erstellen, ohne einen Entwickler einstellen zu müssen.
Befolgen Sie die nachstehenden Schritte, um mit SeedProd eine benutzerdefinierte WooCommerce-Dankesseite zu erstellen.
Video-Anleitung
Schritt 1. Installieren Sie das SeedProd-Plugin
Laden Sie zuerst das SeedProd-Plugin herunter und installieren Sie es auf Ihrer WordPress-Website. Hier ist eine Anleitung zur Installation eines WordPress-Plugins, falls Sie Hilfe benötigen.
Sie können eine kostenlose Version von SeedProd erhalten, aber wir werden SeedProd Elite für die WooCommerce-Blöcke verwenden. Die Blöcke „In den Warenkorb“ und „Bestseller-Produkte“ erfordern beide die Elite-Stufe. Überprüfen Sie daher Ihren Plan, bevor Sie beginnen.
Nachdem Sie das Plugin installiert und aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.
Ihren Lizenzschlüssel finden Sie im Kontobereich der SeedProd-Website.
Gehen Sie als Nächstes zu SeedProd » Landing Pages. Hier aktivieren Sie alle Seitenmodi von SeedProd und erstellen eine neue Dankesseite.
Klicken Sie auf die Schaltfläche Neue Landingpage hinzufügen, um Ihre Dankesseite zu erstellen.
Schritt 2. Wählen Sie eine Dankesseiten-Vorlage in SeedProd
Auf dem nächsten Bildschirm können Sie eine Landingpage-Vorlage auswählen, und Hunderte von Vorlagen sind verfügbar.
Klicken Sie auf den Tab Dankesseite, um nur die Vorlagen für Dankesseiten anzuzeigen. Fahren Sie dann mit der Maus über eine Vorlage, die Ihnen gefällt, und klicken Sie auf das Häkchensymbol, um sie zu starten.
Für dieses Tutorial verwenden wir die 'Order Completed Thank You Page'.
Nachdem Sie Ihre Vorlage ausgewählt haben, geben Sie einen Namen und eine Seiten-URL ein. Klicken Sie dann auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen.
Schritt 3. Passen Sie Ihre Dankesseite mit Upsells an
Sie können nun mit dem Drag-and-Drop-Builder mit der Bearbeitung Ihrer Dankesseite beginnen. Der visuelle Editor zeigt eine Live-Vorschau Ihrer Seite auf der rechten Seite.
Um ein beliebiges Element zu bearbeiten, klicken Sie darauf, und ein Einstellungsmenü wird auf der linken Seite angezeigt.
Die linke Seitenleiste enthält Elemente namens Blöcke, die Sie per Drag & Drop auf die Seite ziehen können.
Wir beginnen damit, die Schriftarten der Seite zu ändern, damit sie zu unserem WooCommerce-Theme passen. Klicken Sie auf das Symbol Globale Einstellungen in der unteren linken Ecke und erweitern Sie den Tab Schriftarten.
Sie können dann benutzerdefinierte Google-Schriftarten auswählen und sie global anwenden. Das gleiche Bedienfeld verwaltet globale Farben, Hintergrund und benutzerdefiniertes CSS.
Als Nächstes können Sie Ihre WooCommerce-Dankesseite mit dem Drag-and-Drop-Builder in einen konversionsoptimierten Post-Checkout-Bildschirm verwandeln.
Hinzufügen eines WooCommerce-Upsells
Das Hinzufügen eines Upsells mit verwandten Produkten zu Ihrer Dankesseite hilft, den durchschnittlichen Bestellwert zu erhöhen und mehr Ladenumsätze zu erzielen.
So erstellen Sie einen Upsell auf der Bestellbestätigungsseite Ihres Shops.
Klicken Sie auf den Tab Abschnitte im linken Bedienfeld, um einen Bildschirm mit vorgefertigten Inhaltsabschnitten zu öffnen. Wählen Sie den Tab Hero und dann den Abschnitt Hero 2 aus, indem Sie auf das orangefarbene Plus-Symbol klicken, um ihn einzufügen.
Klicken Sie nun auf den Bildblock im neuen Abschnitt und fügen Sie ein Bild des Produkts hinzu, das Sie als Upsell anbieten möchten.
Dasselbe können Sie für den Produkttitel und die Produktbeschreibung tun.
Jetzt fügen wir eine neue Call-to-Action-Schaltfläche hinzu. Fahren Sie mit der Maus über die vorhandene Schaltfläche und klicken Sie auf das Papierkorbsymbol, um sie zu entfernen.
Scrollen Sie als Nächstes nach unten zu den WooCommerce-Blöcken und ziehen Sie die Schaltfläche In den Warenkorb per Drag & Drop darüber. Sie ersetzt Ihre alte Schaltfläche durch eine, die mit Ihren WooCommerce-Produkten verbunden ist.
Klicken Sie auf die Schaltfläche, um das Einstellungsfeld zu öffnen, und geben Sie dann die Produkt-ID dieses Produkts ein. Dies fügt den Artikel automatisch zum Warenkorb Ihres Kunden hinzu.
Ihre Produkt-ID finden Sie, indem Sie in Ihrem WordPress-Adminbereich zu Produkte » Alle Produkte gehen und Ihr Produkt suchen.
Nachdem Sie die Produkt-ID hinzugefügt haben, aktivieren Sie den Umschalter Direkt zur Kasse. Der Block „In den Warenkorb“ plus „Direkt zur Kasse“ ist der Teil, den die meisten Anfänger übersehen, und er verwandelt das Upsell in einen Ein-Klick-Kauf anstelle eines zusätzlichen Schritts.
Sie können auch auf die Registerkarte Erweitert klicken, um Farbe, Abstände, Ausrichtung und mehr Ihrer Schaltfläche anzupassen.
Fügen wir nun eine Überschrift hinzu, um Ihr Upsell zu bewerben. Ziehen Sie den Überschriftenblock über Ihr Upsell und fügen Sie eine ansprechende Überschrift hinzu, um die Käufer zum Kauf zu ermutigen.
Hinzufügen eines Gitters für meistverkaufte Produkte
Das Hinzufügen von Bestseller-Produkten zu Ihrer Dankesseite ist eine einfache Möglichkeit, den Umsatz zu steigern. Da diese Produkte nachweislich gut verkauft werden, sind Ihre Kunden wahrscheinlich bereit, sie zu kaufen.
Um dies zu tun, scrollen Sie zum Abschnitt WooCommerce-Blöcke und ziehen Sie das Gitter Meistverkaufte Produkte auf Ihre Seite.
Sie können den Block so einstellen, dass er mehrere Produkte, Spalten, Paginierung und mehr anzeigt. Im Tab „Erweitert“ können Sie die Farben, das Styling, die Ausrichtung und den Abstand des Rasters anpassen.
Es gibt viele weitere Möglichkeiten, Ihre Dankesseite mit SeedProd anzupassen, z. B. durch Hinzufügen von:
- Aktuelle Produkte
- Sonderangebote
- Vorgestellte Produkte
- Top-bewertete Produkte
Sie können sogar einen Countdown-Timer hinzufügen, um Käufer zu ermutigen, Sale-Artikel zu ergattern, bevor das Angebot endet.
Denken Sie daran, oben rechts auf die Schaltfläche Speichern zu klicken, um Ihre Änderungen zu speichern.
Schritt 4. Veröffentlichen Sie Ihre WooCommerce-Dankesseite
Wenn Sie mit dem Aussehen Ihrer Bestellbestätigungs-Seite zufrieden sind, können Sie sie live schalten. Klicken Sie auf den Dropdown-Pfeil der Schaltfläche Speichern und wählen Sie Veröffentlichen.
Nun können Sie Ihre Dankesseite besuchen, um zu sehen, wie sie aussieht.
Bereit, Ihre eigene zu erstellen?
Verwandeln Sie Ihre Dankesseite in Ihren umsatzstärksten Bildschirm
Mit den WooCommerce-Blöcken von SeedProd können Sie Upsells, Bestseller und Ein-Klick-Kauf-Buttons einfügen, ohne Code anfassen zu müssen. Bauen Sie es einmal und lassen Sie es nach jeder Bestellung funktionieren.
Meine Dankesseite erstellenSo bearbeiten Sie die WooCommerce-Dankesseite mit Code
Wenn Sie lieber die native Bestellbestätigungs-Seite bearbeiten möchten, anstatt eine separate zu erstellen, können Sie dies mit Code tun. Ich werde ehrlich sein, dass dieser Weg für Entwickler gedacht ist, aber er behält die Live-Bestelldetails von WooCommerce bei, während Sie Ihre eigenen Inhalte hinzufügen.
Die Dankesseite in WooCommerce ist keine normale Seite mit einem Shortcode. Sie wird aus der thankyou.php-Vorlage am Endpunkt order-received gerendert, der wie ihredomain.de/checkout/order-received/ aussieht.
Es gibt zwei Möglichkeiten, zu ändern, was dort angezeigt wird:
- Der woocommerce_thankyou Hook: Fügen Sie Inhalte unter der Bestellbestätigung hinzu, ohne Vorlagendateien zu bearbeiten. Fügen Sie einen Ausschnitt in ein Code-Snippets-Plugin oder Ihr Child-Theme ein.
- Ein Vorlagen-Override: Kopieren Sie die WooCommerce-Datei
templates/checkout/thankyou.phpin Ihr Child-Theme unterwoocommerce/checkout/thankyou.php, lassen Sie den Ordnertemplatesweg und bearbeiten Sie dann die Kopie. WooCommerce lädt nur Ihre Version, wenn der Pfad genau übereinstimmt.
Der Hook ist die sicherere der beiden Optionen. Ein kurzer Ausschnitt wie dieser fügt eine benutzerdefinierte Nachricht unter der Bestätigung hinzu:
add_action( 'woocommerce_thankyou', 'custom_thankyou_message' );
function custom_thankyou_message( $order_id ) {
$order = wc_get_order( $order_id );
echo '<p>Thanks, ' . esc_html( $order->get_billing_first_name() ) . '! Your order is on its way.</p>';
}Eine Sache, die Sie wissen sollten: Ein Vorlagen-Override übersteht Plugin-Updates, aber nicht immer Theme-Updates. Bearbeiten Sie daher immer die Kopie in einem Child-Theme. Wenn Sie die Originaldatei von WooCommerce oder Ihr Parent-Theme bearbeiten, werden Ihre Änderungen beim nächsten Update gelöscht.
So ersetzen Sie die Standard-WooCommerce-Dankesseite
Nachdem Sie Ihre SeedProd-Seite veröffentlicht haben, müssen Sie die Standard-Dankesseite umleiten, damit Käufer stattdessen auf Ihrem neuen Bildschirm landen. Der einfachste Weg ist ein kostenloses Weiterleitungs-Plugin.
Wir empfehlen das Plugin Thanks Redirect for WooCommerce. Es ist kostenlos im WordPress-Plugin-Repository erhältlich und ermöglicht eine schnelle Weiterleitung. Hier ist, wie Sie es einrichten:
- Installieren und aktivieren Sie das Plugin Thanks Redirect for WooCommerce.
- Gehen Sie zu WooCommerce » Einstellungen und klicken Sie auf den Tab Produkte.
- Klicken Sie auf den Link Thanks Redirect und aktivieren Sie dann das Kontrollkästchen Global Thanks Redirect aktivieren.
- Fügen Sie Ihre neue Dankesseiten-URL in das Feld Thanks Redirect URL ein und klicken Sie auf Änderungen speichern.
Sie können auch pro Produkt eine andere Dankesseite festlegen. Das Plugin „Thanks Redirect“ verfügt über eine Weiterleitungseinstellung pro Produkt, und die Hook-Methode kann anhand der Produkt-ID in der Bestellung verzweigen. Das lohnt sich, wenn jedes Produkt ein anderes Upsell erfordert.
Was macht eine gute WooCommerce-Dankesseite aus?
Die besten Dankesseiten, die ich gesehen habe, vereinen ein paar Dinge gut. Sie bestätigen die Bestellung klar und nutzen dann die verbleibende Aufmerksamkeit, um den Käufer zu einer nächsten Aktion zu leiten.
Wenn Sie eine Seite wünschen, die ihren Zweck erfüllt, bauen Sie diese Elemente ein:
- Eine klare Bestätigung: Die Bestellnummer, die Artikel und der Gesamtbetrag, damit der Käufer weiß, dass der Kauf erfolgreich war.
- Ein relevantes Upsell: Ein einzelnes verwandtes Produkt neben der Bestätigung, kein überladenes Raster, das um Aufmerksamkeit konkurriert.
- Ein Grund zur Rückkehr: Ein Gutschein für die nächste Bestellung oder ein Link zu einer Einrichtungsanleitung für das, was sie gerade gekauft haben.
- Eine Aufforderung zum Teilen oder Folgen: Social-Media-Buttons, die einen Käufer zu Reichweite machen, da er sich direkt nach dem Kauf am glücklichsten befindet.
Halten Sie es fokussiert. Eine Dankesseite, die versucht, alles zu tun, konvertiert am Ende nichts.
Was tun, sobald Ihre Dankesseite live ist
Der Aufbau der Seite ist nur die halbe Miete. Sobald sie live ist, richten Sie eine Möglichkeit ein, zu messen, ob sie tatsächlich funktioniert.
- Kauf verfolgen: Fügen Sie ein GA4-Kaufereignis oder Ihr Anzeigen-Pixel zur Bestellbestätigungsseite hinzu, damit Konversionen aufgezeichnet werden.
- Upsell-Rate beobachten: Überprüfen Sie, wie viele Käufer das Upsell-Produkt hinzufügen, und testen Sie dann ein anderes Angebot, wenn es flach ist.
Beginnen Sie mit dem Kaufereignis. Ohne dieses raten Sie, ob irgendetwas davon die Nadel bewegt hat.
FAQs zur WooCommerce-Dankesseite
Wie bearbeite ich die WooCommerce-Dankesseite ohne Plugin?
Sie können sie mit Code bearbeiten. Fügen Sie einen Snippet mit dem Hook `woocommerce_thankyou` hinzu, um Inhalte unter der Bestellbestätigung einzufügen, oder kopieren Sie die Datei `thankyou.php` in Ihr Child-Theme und bearbeiten Sie die Kopie.
Die Hook-Methode ist sicherer, da sie Theme- und Plugin-Updates übersteht. Das Bearbeiten der Original-Vorlagendatei tut dies nicht.
Was ist die URL der WooCommerce-Dankesseite?
Die Standard-Dankesseite befindet sich am Endpunkt `order-received`, der wie `ihre-seite.com/checkout/order-received/` aussieht. Sie können diesen Endpunkt unter WooCommerce » Einstellungen » Erweitert » Checkout-Endpunkte umbenennen.
Kann ich für jedes Produkt eine andere Dankesseite einrichten?
Ja. Ein Weiterleitungs-Plugin mit einer Einstellung pro Produkt kann Käufer jedes Produkts auf eine andere Seite leiten. Sie können auch den Hook `woocommerce_thankyou` anhand der Produkt-ID in der Bestellung verzweigen lassen.
Es lohnt sich der zusätzliche Aufwand, wenn jedes Produkt ein anderes Upsell oder eine andere Nachverfolgung benötigt.
Sehen Kunden ihre Bestelldetails auf einer benutzerdefinierten Dankesseite?
Nur wenn Sie sie behalten. Eine Weiterleitung zu einer separaten Seite verwirft die Live-Bestelldaten, es sei denn, Sie rufen sie dynamisch ab.
Wenn die Bestelldetails wichtig sind, verwenden Sie die Hook- oder Vorlagenmethode auf der nativen Bestellbestätigungs-Seite oder behalten Sie den Bestellübersichtsblock von WooCommerce auf Ihrer benutzerdefinierten Seite bei.
Passen Sie Ihre WooCommerce-Dankesseite an
Sie haben jetzt eine benutzerdefinierte WooCommerce-Dankesseite, die eine einfache Bestätigung in einen Bildschirm verwandelt, der verkauft. Mit SeedProd können Sie sie ohne Code erstellen und an einem Nachmittag live schalten.
Möchten Sie Ihren WooCommerce-Shop weiter verbessern? Sehen Sie sich diese Tutorials als Nächstes an:
- So steuern Sie verwandte Produkte in WooCommerce
- So sichern Sie Ihre WooCommerce-Website
- So blenden Sie nicht vorrätige Produkte in WooCommerce aus
- Passen Sie den Tab „Zusätzliche Informationen“ in WooCommerce an
- So beheben Sie, dass WooCommerce „Warenkorb anzeigen“ nicht funktioniert
- So ändern Sie den Titel der Shop-Seite in WooCommerce
- Verbessern Sie Ihre Produktbildgalerie in WooCommerce
- So fügen Sie Sternbewertungen zu WooCommerce-Produkten hinzu
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
