Wie man die WooCommerce-Checkout-Seite mit Elementor anpasst

Suchen Sie nach dem einfachsten Weg, die WooCommerce-Checkout-Seite anzupassen?

In der Vergangenheit mussten Sie sich für das Design der Checkout-Seite auf Ihr WooCommerce-Theme verlassen. Alternativ hätten Sie möglicherweise benutzerdefiniertes CSS oder ein WooCommerce-Checkout-Plugin von Drittanbietern verwendet.

Aber mit dem neuen Checkout-Widget in Elementor Pro können Sie nun Ihre Checkout-Seite vollständig mittels Elementors visueller Schnittstelle und codefreier Optionen anpassen. Dieses Widget funktioniert in Verbindung mit den Elementor-Widgets für Warenkorb und Benutzerkonto, um Ihnen bei der Gestaltung aller wichtigen Seiten Ihres Shops zu helfen.

In diesem Tutorial werden Sie lernen, wie Sie das Elementor Pro Checkout-Widget verwenden, um die Checkout-Seite Ihres Shops anzupassen und zu optimieren, ohne Elementor verlassen zu müssen.

Anschließend werden wir auch einige zusätzliche Tipps zur Verwendung von WooCommerce-Action-Hooks teilen, um die Checkout-Seite weiter anzupassen.

Während Sie bei der Verwendung des Elementor Pro Checkout-Widgets keinen Code benötigen, können diese Action-Hooks nützlich sein, wenn Sie benutzerdefinierte Inhalte zu Ihrer Checkout-Seite hinzufügen möchten, wie beispielsweise eine Reihe von Vertrauensabzeichen, die unter den Kreditkartenfeldern erscheinen.

Wenn Sie ein Video-Tutorial bevorzugen, können Sie sich das obige Video ansehen, das erklärt, wie man das Elementor Checkout-Widget verwendet.

Andernfalls lesen Sie weiter für das vollständige textbasierte Tutorial, das dem Video parallel läuft, sowie einige zusätzliche Tipps zur Verwendung von WooCommerce-Action-Hooks, die wir im Video nicht behandelt haben.

Wie funktioniert das Elementor Pro Checkout-Widget?

Die WooCommerce-Checkout-Seite ist die Seite, auf der Käufer ihre Bestellungen abschließen, indem sie ihre Adressen, Kontaktdaten, Zahlungsinformationen und so weiter eingeben.

Es ist eine essentielle Seite für jeden Shop, daher ist es wichtig, dass Sie sie für Conversions optimieren und so benutzerfreundlich wie möglich gestalten.

Mit dem Elementor Checkout-Widget können Sie die Checkout-Seite Ihres Shops direkt in Elementor vollständig anpassen. Dies hilft Ihnen, ein konsistentes Design mit dem Rest Ihres Shops zu erstellen und wichtige Details auf Ihrer Seite zu optimieren.

Sie können Farben und Typografie ändern, Abstände anpassen, Abschnitts- und Formulartext ändern und vieles mehr. Sie können Änderungen für den gesamten Checkout vornehmen oder granulare Optionen aktivieren, um verschiedene Stile auf bestimmte Teile Ihres Checkouts anzuwenden.

Wenn Sie beispielsweise die Aufmerksamkeit auf das Gutscheinfeld lenken möchten, können Sie spezielle Farben, einen Rahmen und so weiter hinzufügen – alles ohne Code erforderlich.

Wie man die WooCommerce-Checkout-Seite mit Elementor anpasst

Lassen Sie uns nun in eine detaillierte Anleitung übergehen, wie Sie das Checkout-Widget in Elementor Pro verwenden können, um die Checkout-Seite Ihres Shops anzupassen.

Abermals, falls Sie es vorziehen, dieses Tutorial im Videoformat anzusehen, können Sie es oben betrachten. Beide Tutorials beinhalten dieselben Informationen.

1. Bearbeiten Sie die Standardwarenkorb-Seite Ihres Shops in Elementor

Wenn Sie einen WooCommerce-Shop erstellen, generiert WooCommerce automatisch eine Kassenseite für Ihren Shop, die den WooCommerce-Kassen-Shortcode verwendet.

In diesem Tutorial können Sie der Einfachheit halber dieselbe Seite verwenden. Anstatt sich jedoch auf den WooCommerce-Shortcode zu verlassen, werden Sie die Seite in Elementor bearbeiten und das Kassen-Widget hinzufügen.

Um zu beginnen, navigieren Sie zur Seiten-Liste in Ihrem WordPress-Dashboard und lokalisieren Sie die Kassenseite. WooCommerce wird diese automatisch mit einem Identifikator kennzeichnen, der „Kassenseite“ lautet.

Sobald Sie die korrekte Seite gefunden haben, klicken Sie auf die Schaltfläche Bearbeiten, um den WordPress-Editor zu öffnen.

Sobald Sie sich im Editor befinden, klicken Sie auf die Schaltfläche Mit Elementor bearbeiten, um Elementor für diese Seite zu aktivieren und Elementors Editor zu starten.

2. Ersetzen Sie den WooCommerce-Kassen-Shortcode durch das Elementor-Kassen-Widget

Wenn Sie die Standard-Warenkorbseite in Elementor öffnen, sollten Sie ein sehr einfaches Design sehen. Die einzigen Elemente auf der Seite werden der [woocommerce_checkout] Shortcode innerhalb eines Elementor-Texteditor-Widgets sein.

Um Elementor zur Steuerung Ihrer Kasse zu verwenden, sollten Sie zunächst das vorhandene Widget/den Shortcode löschen:

Fügen Sie dann an dessen Stelle das Elementor-Kassen-Widget hinzu. Sobald Sie das Kassen-Widget hinzufügen, sehen Sie eine Live-Vorschau der Kassenseite direkt im Editor.

Hinweis – Da der Elementor-Editor Ihnen eine visuelle Vorschau bietet, die exakt dem entspricht, was die Besucher Ihrer Website sehen werden, sollten Sie einige Artikel in Ihren Warenkorb legen, damit Sie sehen können, wie der tatsächliche Kassenprozess aussieht. Hier ist alles, was Sie tun müssen:

1. Gehen Sie zur Frontend-Ansicht Ihres Shops.
2. Fügen Sie einige Artikel zu Ihrem Warenkorb hinzu.
3. Laden Sie die Elementor-Oberfläche neu.

Sobald Sie Elementor neu geladen haben, sollten diese Artikel in der Kassenzusammenfassung erscheinen, während Sie an Ihrem Design arbeiten.

3. Passen Sie die allgemeinen Einstellungen Ihrer Kassenseite an

Nun ist es an der Zeit, mit der Anpassung zu beginnen.

Öffnen Sie zunächst die Einstellungen für das Kassen-Widget in der Elementor-Seitenleiste.

Lassen Sie uns zuerst alle Einstellungen im Inhalt-Tab des Widgets durchgehen.

Allgemein – Einspalten- oder Zweispalten-Layout

Zunächst können Sie im Bereich Allgemein zwischen einem einspaltigem oder zweispaltigem Layout für Ihre Kassenseite wählen.

Wenn Sie ein zweispaltiges Layout wählen, können Sie die rechte Spalte auch als fixiert einstellen. Wenn Sie die fixierte rechte Spalte aktivieren, erhalten Sie eine zusätzliche Option, um einen Versatz hinzuzufügen, der verhindert, dass Ihr Header die Spalte überlappt.

Rechnungs- und Versanddetails

Der Abschnitt Rechnungs- und Versanddetails ermöglicht es Ihnen, die Rechnungs- und Versandformulardetails anzupassen.

Sie werden diese Felder zusammen sehen, wenn Sie in den WooCommerce-Einstellungen festgelegt haben, dass die Rechnungs- und Versanddetails identisch sein sollen. Sie können dies aktivieren, indem Sie zu WooCommerce → Einstellungen → Versand gehen und Versand an die Rechnungsadresse des Kunden erzwingen auswählen. Andernfalls werden Sie sie getrennt sehen.

Zunächst können Sie den Abschnittstitel und die Ausrichtung für diesen Bereich festlegen.

Dann können Sie die Einstellungen für jedes einzelne Feld öffnen, um die Beschriftungen und Platzhalter anzupassen.

Zusätzliche Informationen

Der Abschnitt Zusätzliche Informationen ermöglicht es Ihnen, diesen Bereich der Kassenseite anzupassen. Standardmäßig ist dies der Ort, an dem Kunden spezielle Bestellhinweise hinterlassen können, obwohl Sie je nach Einrichtung Ihres Shops möglicherweise zusätzliche Details sehen.

Wie bei den anderen Abschnitten Ihrer Kassenseite können Sie die Ausrichtung und Beschriftungen dieses Abschnitts anpassen.

Alternativ haben Sie auch die Option, diesen Abschnitt von der Kassenseite auszublenden, was nützlich sein könnte, wenn Kunden keine benutzerdefinierten Hinweise hinterlassen müssen.

Ihre Bestellung

Die Einstellungen Ihre Bestellung ermöglichen es Ihnen, den Bestellübersichtsteil der Kasse anzupassen. Wenn Sie ein zweispaltiges Layout verwenden, erscheint dieser Abschnitt oben in der rechten Spalte. In einem einspaltigen Layout erscheint er unterhalb der Rechnungs- und Versanddetails.

Gutschein

Die Gutschein-Einstellungen ermöglichen Ihnen zudem, den Titel und die Ausrichtung des Gutschein-Bereichs individuell anzupassen. Darüber hinaus haben Sie die Option, den Linktext für die Anwendung des Gutscheincodes anzupassen. Dies kann Ihnen dabei helfen, eine optimierte und benutzerfreundlichere Erfahrung für Kunden zu schaffen, die Gutscheine einlösen möchten.

Zahlung

Die Zahlungs-Einstellungen ermöglichen es Ihnen, die Ausrichtung der Kaufschaltfläche zu ändern sowie die Nachricht zu den Allgemeinen Geschäftsbedingungen und den entsprechenden Linktext anzupassen.

Um die Nachricht zu den Allgemeinen Geschäftsbedingungen zu sehen, müssen Sie zunächst die entsprechende Seite in Ihren WooCommerce-Einstellungen festgelegt haben. Zur Vereinfachung können Sie diese Seite auswählen, ohne Elementor zu verlassen:

1. Klicken Sie auf das Hamburger-Menü-Symbol in der oberen linken Ecke der Elementor-Benutzeroberfläche.
2. Wählen Sie Seiteneinstellungen.
3. Wählen Sie WooCommerce.
4. Verwenden Sie das Feld Allgemeine Geschäftsbedingungen, um nach der richtigen Seite für Ihre AGB zu suchen und diese auszuwählen.

Wiederkehrender Kunde

Wenn Sie in den WooCommerce-Einstellungen Gastkäufe zulassen, erhalten Sie einen zusätzlichen Einstellungsbereich namens Wiederkehrender Kunde, in dem Sie die Nachricht anpassen können, die wiederkehrende Kunden auffordert, sich in ihre bestehenden Konten einzuloggen.

4. Passen Sie die Stileinstellungen Ihrer Checkout-Seite an

Als Nächstes können Sie zum Reiter Stil in den Einstellungen des Checkout-Widgets wechseln, um das Aussehen und Design der Checkout-Seite weiter anzupassen und sicherzustellen, dass es zum Rest Ihres Shops passt.

Hier sind die allgemeinen Designoptionen, die Sie in den verschiedenen Einstellungsbereichen konfigurieren können…

Abschnitte

In den Abschnitte-Einstellungen können Sie den gesamten Stil aller verschiedenen Checkout-Bereiche steuern.

Wenn Sie beispielsweise die Hintergrundfarbe ändern, wirkt sich dies auf den Hintergrund aller Abschnitte aus. Sie können auch den Rahmen und den Abstand nach Bedarf anpassen.

Typografie

In den Typografie-Einstellungen können Sie die Farben und Typografie der meisten Texte auf Ihrer Checkout-Seite anpassen, einschließlich Überschriften, Untertitel, Beschreibungen, Nachrichten, Radiobuttons, Checkboxen und mehr.

Der einzige Typografiebereich, den Sie hier nicht anpassen können, sind Ihre Formulare, was Sie im nächsten Abschnitt tun werden.

Formulare

In den Formulare-Einstellungen können Sie alles an den Formularen und Formularfeldern Ihrer Checkout-Seite steuern, was sich hauptsächlich auf die Rechnungs-/Versandfelder und das Gutscheinformular auswirkt.

Sie können den Spalten- und Zeilenabstand für die verschiedenen Formularfelder anpassen. Sie können auch die Typografie von Beschriftungen und Feldern anpassen sowie Abstände, Rahmen und Hintergründe einstellen.

Darüber hinaus haben Sie die Möglichkeit, die Gutschein-Schaltfläche zu gestalten, genau wie jede andere Schaltfläche auf Ihrer Website.

Bestellübersicht

In Bestellübersicht können Sie die Zeilen steuern, was sich auf den Abstand in der Liste der Artikel im Warenkorb eines Kunden auswirkt.

Sie können auch die Farben und Typografie der verschiedenen Übersichtselemente steuern. Sie könnten beispielsweise eine Typografieeinstellung für die Artikel und eine andere für die Bestellsummen verwenden.

Kaufschaltfläche

In den Kaufschaltfläche-Einstellungen können Sie die Kaufschaltfläche vollständig anpassen, einschließlich Typografie, Farben, Abstände, Rahmen und mehr.

Dies ist wahrscheinlich die wichtigste Schaltfläche auf der Checkout-Seite, daher sollten Sie sicherstellen, dass sie Aufmerksamkeit erregt und zum Rest Ihres Designs passt.

Anpassen

Zuletzt ermöglicht Ihnen der Punkt Anpassen, individuelle Stilsteuerungen für spezifische Teile Ihrer Checkout-Seite hinzuzufügen. Sie können sie für die folgenden Bereiche hinzufügen:

• Rechnungsdetails
• Zusätzliche Informationen
• Lieferadresse
• Bestellübersicht
• Gutschein
• Zahlung

Sie möchten beispielsweise die Bestellübersicht vom Rest der Checkout-Seite abheben, indem Sie einen benutzerdefinierten Rahmen hinzufügen.

Dies könnten Sie tun, indem Sie die Anpassungseinstellungen für den Bestellübersichtsbereich aktivieren und sie nach Ihren Vorstellungen konfigurieren.

5. Passen Sie Ihren Checkout für mobile Käufer an

Nachdem Sie die Anpassung der Checkout-Seite für Desktop-Benutzer abgeschlossen haben, sollten Sie in den responsiven Modus wechseln, um zu sehen, ob Anpassungen für mobile oder Tablet-Besucher erforderlich sind.

Wie bei allen Designs, die Sie mit Elementor erstellen, ist Ihr Checkout-Seitendesign standardmäßig responsiv.

Gleichwohl können Sie auch die mobilen Steuerungselemente von Elementor nutzen, um das Design bei Bedarf anzupassen. Sie müssen lediglich nach dem Gerätesymbol neben den Einstellungen Ausschau halten, die für verschiedene Geräte modifiziert werden können.

Beispielsweise könnten Sie die Abstände zwischen verschiedenen Elementen für Ihr mobiles Design geringfügig anpassen wollen.

6. Passen Sie bei Bedarf die WooCommerce-Seitenzuweisungen in den Websiteeinstellungen an

Dieser letzte Schritt ist vollkommen fakultativ, jedoch ist es erwähnenswert, dass Sie auch die zentralen WooCommerce-Seitenzuweisungen aus dem Elementor-Websiteeinstellungsbereich steuern können.

Dies könnte nützlich sein, wenn Sie eine neue Seite für Ihre Kassenseite erstellt haben, anstatt die von WooCommerce standardmäßig generierte Seite zu verwenden.

Sie können auf diese Optionen über den WooCommerce-Reiter im regulären Websiteeinstellungsbereich zugreifen. Sie finden die WooCommerce-Option unter dem Abschnitt Einstellungen.

Wie man die WooCommerce-Kassenseite mit Code anpasst

Für zusätzliche Anpassungen der WooCommerce-Kassenseite können Sie Code verwenden und die zahlreichen Checkout-Aktionshooks von WooCommerce nutzen.

Dies kann besonders praktisch sein, wenn Sie der Kassenseite neue Inhalte hinzufügen möchten, wie beispielsweise das Einfügen von Vertrauenssiegeln unterhalb des Zahlungsbuttons.

Der Vorteil dieses Ansatzes ist, dass er weiterhin mit dem Elementor Checkout-Widget funktioniert, was ihn zu einer hervorragenden Ergänzung zu Elementor für zusätzliche Änderungen macht.

Was sind WooCommerce Checkout-Aktionshooks?

WordPress-Aktionshooks ermöglichen es Ihnen im Wesentlichen, mittels PHP Inhalte an verschiedenen Stellen der Kassenseite einzufügen. Sie könnten beispielsweise eine neue Textnachricht hinzufügen, ein Bild einfügen (möglicherweise ein Vertrauenssiegel) und so weiter.

Insgesamt bietet WooCommerce 16 verschiedene Aktionshooks für die Kassenseite.

Die ersten neun Hooks sind stets verfügbar:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• woocommerce_after_checkout_form

Die letzten sieben Hooks sind möglicherweise verfügbar oder auch nicht, abhängig von Ihren WooCommerce-Einstellungen. Wenn Sie beispielsweise die Registrierung auf der Kassenseite nicht aktiviert haben, können Sie den Aktionshook für das Registrierungsformular nicht verwenden:

• woocommerce_checkout_before_terms_and_conditions
• woocommerce_checkout_after_terms_and_conditions
• woocommerce_before_checkout_billing_form
• woocommerce_before_checkout_registration_form
• woocommerce_after_checkout_registration_form
• woocommerce_before_checkout_shipping_form
• woocommerce_after_checkout_shipping_form

Um zu verstehen, wo diese Hooks Inhalte zur Kassenseite hinzufügen, unterhält Business Bloomer einen exzellenten visuellen Leitfaden für jeden Standort:

Wie man WooCommerce Checkout-Aktionshooks verwendet

Um Inhalte mit einem Aktionshook einzufügen, müssen Sie ein Code-Snippet zur functions.php-Datei Ihres Kindthemes hinzufügen oder ein Plugin wie Code Snippets verwenden.

Da Sie Code zu Ihrer Website hinzufügen werden, empfehlen wir dringend, ein Backup zu erstellen, bevor Sie fortfahren, und/oder die Änderungen zunächst auf einer Staging-Site zu testen.

Wählen Sie zunächst den Hook-Standort, an dem Sie Inhalte hinzufügen möchten.

Angenommen, Sie möchten eine Reihe von Vertrauenssiegeln unterhalb des „Jetzt kaufen“-Buttons hinzufügen. Dafür würden Sie den woocommerce_review_order_after_submit-Hook verwenden.

Dann würden Sie ein Code-Snippet wie dieses hinzufügen:

add_action( ‚action_name‘, ‚your_function_name‘ );

function your_function_name() {

// Ihr Code

}

Um beispielsweise ein Vertrauenssiegel-Bild hinzuzufügen, könnte der Code so aussehen:

add_action( ‚woocommerce_review_order_after_submit‘, ‚display_trust_badges‘ );

function display_trust_badges() {

echo ‚‚

;}

Unten können Sie sehen, dass die Vertrauenssiegel unterhalb des Bestellbuttons erscheinen, selbst während der Arbeit mit dem Checkout-Widget in der Elementor-Oberfläche:

Wie man seine WooCommerce-Kassenseite testet

Bevor Sie die Änderungen an Ihrer Kassenseite live schalten, empfehlen wir dringend, alles zu testen, um sicherzustellen, dass keine Probleme auftreten. Schließlich wird alles, was die Kassenseite Ihres Shops beeinträchtigt, einen direkten negativen Einfluss auf Ihr Endergebnis haben.

Viele WooCommerce-Zahlungsmethoden beinhalten Testmodi, die Sie zur Einreichung von Bestellungen nutzen können. Dies trifft sowohl auf das offizielle Stripe-Gateway-Plugin und das offizielle PayPal-Gateway-Plugin zu, als auch auf WooCommerce Payments. Alle Links im vorherigen Satz führen Sie zur entsprechenden Dokumentationsseite für die Testfunktionalität des jeweiligen Gateways.

Alternativ können Sie auch das kostenlose WC Order Test Plugin verwenden, welches ein neues „Order Test“ Zahlungs-Gateway hinzufügt. Sie können dieses Gateway einrichten, indem Sie zu WooCommerce → Einstellungen → Zahlungen navigieren.

Sobald Sie ein Test-Zahlungs-Gateway aktiviert haben, können Sie einige Testbestellungen aufgeben, um sicherzustellen, dass alle Checkout-Felder funktionieren und keine Ihrer Inhalts- oder Designänderungen den Checkout-Prozess beeinträchtigen.

Wir empfehlen, sowohl auf Desktop- als auch auf mobilen Geräten zu testen.

Beginnen Sie mit der Anpassung Ihrer WooCommerce-Seiten mit Elementor

Mit dem Checkout-Widget in Elementor Pro können Sie nun die WooCommerce-Checkout-Seite vollständig mit Elementors visuellem Drag-and-Drop-Design anpassen.

Für die meisten Anwender wird Elementor ausreichend sein, da es Ihnen ermöglicht, Farben, Typografie, Text, Abstände, Ränder und mehr anzupassen.

Wenn Sie noch weiter gehen und neue Inhalte zu Ihrer Checkout-Seite hinzufügen möchten, können Sie auch die in WooCommerce integrierten Action Hooks nutzen, die vollständig mit dem Elementor Checkout-Widget kompatibel sind.

Das Beste daran ist, dass Elementor Sie nicht darauf beschränkt, nur die Checkout-Seite anzupassen.

Der Elementor WooCommerce Builder kann Ihnen auch dabei helfen, andere Teile Ihres Shops mit Elementors visuellem Drag-and-Drop-Builder anzupassen. Sie können beispielsweise auch die WooCommerce-Warenkorbseite, die WooCommerce-Einzelproduktseite, die WooCommerce-Mein-Konto-Seite und mehr anpassen.

Haben Sie noch Fragen zur Anpassung Ihrer WooCommerce-Checkout-Seite mit Elementor oder Action Hooks? Lassen Sie es uns in den Kommentaren wissen!