3 effektive Möglichkeiten zum Anpassen und Bearbeiten der WooCommerce-Checkout-Seite

Suchen Sie nach der besten Möglichkeit , die Checkout-Seite von WooCommerce zu bearbeiten ?

Wenn Sie lernen, wie Sie die Checkout-Seite von WooCommerce anpassen, haben Sie mehr Kontrolle über das Design und erhöhen das Potenzial für mehr Verkäufe.

‍ In diesem ausführlichen Tutorial zeigen wir Ihnen drei codefreie Möglichkeiten, die Checkout-Seite anzupassen, einschließlich der vollständigen Anpassung des Designs und/oder der Änderung der Felder, die auf der Checkout-Seite erscheinen.

Wir gehen auch auf alle integrierten Funktionen ein, die WooCommerce bietet, um das Checkout-Erlebnis anzupassen.

Lass uns anfangen…

Gründe für die Bearbeitung der WooCommerce-Checkout-Seite

Gibt es einen offensichtlichen Grund, die Checkout-Seite von WooCommerce von Anfang an zu ändern? Kommt darauf an. Das integrierte Checkout-Modul ist sauber, funktional und schnell genug, um Zahlungen zu verarbeiten, ohne Ihre Kunden zu verärgern.

Aber Sie können auch seine Nachteile bemerken. Hier sind die Hauptgründe, warum Sie die Checkout-Seite von WooCommerce bearbeiten sollten :

• Um die standardmäßigen WooCommerce-Branding-Elemente wie ihre voreingestellten Schriftarten, Stile und das WooCommerce-Lila zu ersetzen.
• Zum Hinzufügen von Webelementen, die sich auf Ihr Unternehmen beziehen, wie ein Logo, Markenfarben und Links zur Support-Dokumentation.
• Wenn nach dem Testen der Checkout für Conversions optimiert werden muss.
• Beschleunigen Sie den Checkout-Prozess, indem Sie ihn in einen Schritt umwandeln.
• Um Upsells, Cross-Sells und verwandte Produkte einzubinden.
• Zum Hinzufügen benutzerdefinierter Felder oder zum Entfernen einiger von WooCommerce bereitgestellter Felder.
• Um die Versandoptionen zu ändern.
• Zum Ändern von Designelementen wie Schaltflächentext, voreingestelltem Feldtext und Checkout-Optionen für Gäste.

So bearbeiten Sie die Checkout-Seite von WooCommerce

Sie haben mehrere Möglichkeiten, die Checkout-Seite von WooCommerce zu bearbeiten. Die für Sie am besten geeignete Methode hängt von den spezifischen Änderungen ab, die Sie vornehmen möchten, und davon, ob Sie für die Verwendung eines Plugins offen sind oder nicht.

Im Folgenden gehen wir auf drei der besten Methoden ein:

1. Native WooCommerce-Einstellungen – WooCommerce enthält viele integrierte Optionen zum Anpassen des Checkouts, die wir in der ersten Methode detailliert beschreiben. Ihr Design bietet möglicherweise auch eigene Optionen zum Anpassen des Designs der Checkout-Seite.
2. Elementor Pro – Elementor Pro bietet jetzt ein eigenes Checkout-Widget, mit dem Sie das Design der Checkout-Seite vollständig anpassen können. Dies ist eine großartige Option, wenn Sie speziell das Design der Seite bearbeiten möchten.
3. Kassenfeld-Editor – Dies ist eine großartige Option, wenn Sie die Formularfelder bearbeiten möchten, die auf der Kassenseite erscheinen. Sie können damit neue Felder hinzufügen, Standardfelder entfernen und alles nach Bedarf neu anordnen.

Gehen wir sie durch..

Methode 1: Verwenden Sie die standardmäßigen Checkout-Einstellungen von WooCommerce

WooCommerce bietet integrierte Einstellungen zum Bearbeiten Ihres Checkout-Moduls, und Ihr WordPress-Theme bietet möglicherweise bereits Tools zum Anpassen einiger Felder und Checkout-Einstellungen im WordPress Customizer.

Es ist immer ratsam, diese Einstellungen zu überprüfen, bevor Sie nach einem zusätzlichen Plugin, Design oder Feld-Anpasser suchen, da Sie möglicherweise bereits über die Funktionen verfügen, die Sie benötigen.

WooCommerce verfügt beispielsweise über Tools zum Entfernen bestimmter Felder, zum Aktivieren von Steuersätzen während des Bezahlvorgangs und zum Anzeigen von Gutscheinfeldern.

Schritt 1: Fügen Sie an der Kasse Steuerberechnungen und ein Gutscheinfeld hinzu

WooCommerce verfügt über integrierte Einstellungen, um Steuerberechnungen zu automatisieren und Coupons an der Kasse zu akzeptieren.

Um entweder ein- oder auszuschalten, gehen Sie zu WooCommerce > Einstellungen in WordPress.

Wählen Sie die Registerkarte Allgemein und scrollen Sie nach unten zum Abschnitt Steuern aktivieren . Aktivieren Sie das Kontrollkästchen, um Steuersätze und -berechnungen während des Bezahlvorgangs zu aktivieren. Dies generiert und zeigt Steuergebühren basierend auf den Sätzen an, die Sie in WooCommerce konfigurieren ( WooCommerce > Einstellungen > Steuern > Standardsätze ).

Aktivieren Sie das Kontrollkästchen, um die Verwendung von Gutscheincodes zu aktivieren, um ein Feld anzuzeigen, in das Kunden Rabattcodes eingeben können.

Wenn Sie bestimmte Elemente lieber nicht anzeigen möchten, entfernen Sie einfach die Kontrollkästchen. Stellen Sie sicher, dass Sie auf die Schaltfläche Speichern klicken, um Ihre Änderungen im Frontend anzuzeigen.

Schritt 2: Produktpreise mit oder ohne Steuer anzeigen

Es ist eine Sache, die Steuern am Ende der Kasse zu berechnen, aber Sie müssen auch entscheiden, ob Sie die Steuern in die Gesamtkosten der Produkte einbeziehen möchten, insbesondere wenn Kunden zur Kasse gehen.

Im Allgemeinen zeigt dies mehr Transparenz, anstatt den Preis mit Steuern zu erhöhen, bevor der Kunde bezahlt.

Um Steuern mit Preisen in den Checkout-Prozess aufzunehmen, gehen Sie zu WooCommerce > Einstellungen > Steuern .

Scrollen Sie auf der Seite nach unten, um das Feld „Preise im Warenkorb und an der Kasse anzeigen“ zu finden.

Wählen Sie aus der Dropdown-Liste:

• Mit Steuern
• Steuer nicht inbegriffen

Klicken Sie auf Änderungen speichern .

Schritt 3: Legen Sie fest, welche Versandartikel an der Kasse angezeigt werden

Außerdem können Sie unter WooCommerce > Einstellungen markieren, welche Versandzonen, Methoden und Berechnungen in der WooCommerce-Kaufabwicklung angezeigt werden.

Gehen Sie einfach auf die Registerkarte Versand und passen Sie Folgendes an:

• Berechnungen: Um den Versandrechner auf der Warenkorbseite zu aktivieren
• Berechnungen: um die Versandkosten im Checkout auszublenden, bis eine Adresse eingegeben wird
• Versandziel: Zum Festlegen von Standard-Versandadressen an der Kasse

Klicken Sie auf Änderungen speichern .

Schritt 4: Verwalten Sie Konten und Datenschutz an der Kasse

Bleiben Sie unter WooCommerce > Einstellungen und wechseln Sie zur Registerkarte Konten & Datenschutz .

Oben auf der Seite sehen Sie zwei Felder:

• Gast-Checkout: Gast-Checkouts und vorhandene Kontoanmeldungen einschließen/entfernen
• Kontoerstellung: Erlauben Sie Kunden, während des Bezahlvorgangs ein Konto zu erstellen oder ein Abonnement zu starten

Fahren Sie auf der Seite „ Konten & Datenschutz “ fort, um den Bereich „Datenschutzrichtlinie “ zu finden.

Füllen Sie das Textfeld Datenschutzrichtlinie für die Kasse aus, um sicherzustellen, dass Kunden die Richtlinie beim Auschecken sehen. Lassen Sie das Feld leer, wenn Sie in diesem Bereich lieber keine Datenschutzrichtlinie anzeigen möchten.

Schritt 5: Wählen Sie die eigentliche Checkout-Seite und andere erweiterte Einstellungen

Navigieren Sie zur Registerkarte „ Erweitert “, um einen Abschnitt „ Seite einrichten “ anzuzeigen. Dies fordert die Händler auf, WooCommerce mitzuteilen, wohin sie Kunden schicken sollen, wenn sie auschecken.

Standardmäßig generiert WooCommerce die Seiten Warenkorb , Kasse , Mein Konto und Allgemeine Geschäftsbedingungen , die Sie finden, indem Sie auf Seiten > Alle Seiten in WordPress gehen.

Sie haben jedoch die Möglichkeit, eine komplett neue Seite zu generieren und hier zu verlinken. Dadurch werden die standardmäßigen Checkout-Seiten überschrieben und Kunden zu den benutzerdefinierten weitergeleitet.

Eine weitere Option auf der Registerkarte „ Erweitert “ ist „ Force Secure Checkout “, wofür ein SSL-Zertifikat erforderlich ist.

Schritt 6: Ändere das Checkout-Design deines Themes im WordPress Customizer

WordPress-Themes mit WooCommerce-Funktionalität installieren häufig WordPress Customizer-Tools, um Ihr Checkout-Design einfach anzupassen.

Denken Sie daran, dass alle WooCommerce-Designs einzigartige WordPress Customizer-Einstellungen bieten (einige haben überhaupt keine Einstellungen), aber insgesamt lohnt es sich, den WordPress Customizer zu überprüfen, um eine schnelle Kontrolle über den Checkout zu erhalten.

Gehen Sie zunächst zu Darstellung > Anpassen in WordPress.

Falls verfügbar, sollte Ihr Theme irgendwo im WordPress Customizer einen WooCommerce-Button anzeigen. Klicken Sie darauf.

Dies ist nur ein Beispiel mit dem Storefront-Theme (so dass Sie möglicherweise nicht dasselbe sehen), aber es ist ziemlich üblich, dass Themes im Customizer einen Checkout -Tab haben. Wählen Sie das oder etwas Ähnliches, das auf die Kontrolle über den Checkout hinweisen kann.

Gehen Sie alle von Ihrem Thema angebotenen Checkout-Einstellungen durch. Im Storefront-Design können Sie diese Felder optional, erforderlich oder ausgeblendet machen:

• Feld Firmenname
• Adresszeile 2 Feld
• Telefonfeld

Es ist auch möglich, Pflichtfelder mit einem Sternchen zu markieren.

Schließlich bietet das Storefront-Design Optionen zum Anzeigen einer Datenschutzrichtlinie und einer Seite mit den Allgemeinen Geschäftsbedingungen am Ende des Bezahlvorgangs.

Methode 2: Verwenden Sie einen Seitenersteller, um WooCommerce-Checkout-Felder und den Gesamtstil zu bearbeiten

Seitenersteller wie Elementor, Beaver Builder und Themify bieten alle WooCommerce-Inhalts-Widgets an, um zu überschreiben, was sich derzeit auf der WooCommerce-Checkout-Seite befindet.

Seitenersteller reservieren ihre WooCommerce-Checkout-Module fast ausschließlich für ihre Premium-Pläne, daher besteht eine gute Chance, dass Sie für diese Funktionalität bezahlen müssen. Beispielsweise erhalten Sie das Elementor Checkout-Widget mit dem Pro-Plan.

Allerdings gibt Ihnen ein Seitenersteller fast die vollständige Kontrolle über Ihre Checkout-Seite, so dass es eine einfache Möglichkeit ist, den WooCommerce-Checkout ohne Programmierkenntnisse zu bearbeiten, und das nur für etwa 50 bis 100 US-Dollar pro Jahr.

In diesem Tutorial zeigen wir Ihnen, wie die Checkout-Anpassung im Allgemeinen mit einem Page Builder unter Verwendung von Elementor funktioniert.

Schritt 1: Öffnen Sie die angegebene Checkout-Seite in Elementor

Um die WooCommerce-Kaufabwicklung in Elementor zu bearbeiten, müssen Sie auf die von WooCommerce automatisch erstellte Kassenseite gehen. Das finden Sie unter Seiten > Alle Seiten .

Öffnen Sie die Seite mit der Bezeichnung „Checkout Page“ und klicken Sie dann auf Edit with Elementor .

Schritt 2: Entfernen Sie den Checkout-Shortcode von WooCommerce

WooCommerce hat automatisch seine „WooCommerce checkout“-Shortcode in den Editor, der das Standard-WooCommerce-Checkout-Modul rendert.

Das Ziel ist es, das gegen ein Checkout-Modul aus Ihrem Seitenersteller auszutauschen. Löschen Sie also den Checkout-Shortcode von WooCommerce.

Schritt 3: Legen Sie das Elementor Checkout-Widget ab

Jetzt ist es an der Zeit, das Checkout-Widget Ihres Seitenerstellers zu finden. Elementor bietet einen namens Checkout an, den Sie über die Suchleiste finden oder indem Sie unter der Überschrift WooCommerce stöbern. Klicken Sie auf das Checkout -Widget und ziehen Sie es auf die leere Seite, wo „Widget hierher ziehen“ steht.

Hinweis: Das Checkout- Widget wird möglicherweise nicht angezeigt, wenn Sie nicht auf die Premium-Version von Elementor aktualisiert haben. Dies ist bei den meisten Seitenerstellern der Fall.

Schritt 4: Passen Sie Inhalt, Stil und erweiterte Funktionen an

Nach dem Ziehen über das Checkout-Widget rendert Elementor die Checkout-Vorschau. Sie können dann auf diese Registerkarten auf der linken Seite klicken, um jeden Aspekt des Checkouts anzupassen:

Als Beispiel könnten Sie das allgemeine Layout auf eine Spalte umstellen und den Platzhaltertext für das Vornamensfeld anpassen.

Weitere Anpassungsregisterkarten sind:

• Rechnungsdetails
• zusätzliche Information
• Deine Bestellung
• Coupon
• Zahlung

Es gibt auch endlose Möglichkeiten, die WooCommerce-Kaufabwicklung auf der Registerkarte „ Stil “ zu bearbeiten.

Verwenden Sie diese Registerkarten:

• Abschnitte
• Typografie
• Formen
• Bestellübersicht
• Kaufen-Schaltfläche

Als Beispiel haben wir den blauen Kaufen -Button gegen einen grünen ausgetauscht.

Schließlich bietet die Registerkarte „ Erweitert “ noch leistungsfähigere Werkzeuge zum Bearbeiten:

• Grundrisse
• Bewegungseffekte
• Transformationen
• Hintergründe
• Grenzen
• Masken
• Empfänglichkeit
• Attribute
• Benutzerdefinierte CSS

Solange Sie bei der zuvor als „Checkout-Seite“ für WooCommerce festgelegten Seite bleiben und den WooCommerce-Checkout-Shortcode gegen das Checkout-Widget des Seitenerstellers austauschen, können Sie Änderungen speichern und den Vorgang abschließen!

Methode 3: Installieren Sie ein Customizer-Plugin, um Felder zu bearbeiten

Es gibt viele WooCommerce-Checkout-Customizer-Plugins, wie zum Beispiel:

Die meisten WooCommerce-Checkout-Plugins bieten zusätzliche Anpassungstools zum Ändern und Hinzufügen von Feldern, aber es gibt einige, mit denen das Design komplett überarbeitet werden kann, wie das Multi-Step Checkout-Plugin.

Wir empfehlen Ihnen, sich alle empfohlenen Plugins oben anzusehen, aber wir werden ein kurzes Tutorial mit dem Checkout Field Editor-Plugin durchgehen, um Ihnen zu helfen, zu verstehen, wie Sie die WooCommerce-Kaufabwicklung mit einem Plugin bearbeiten.

Schritt 1: Installieren und aktivieren Sie das Checkout Field Editor-Plugin

Installieren Sie das Checkout Field Editor-Plug-in und gehen Sie dann durch den Aktivierungsprozess des Plug-ins.

Sobald es aktiv ist, fügt das Plugin eine neue Registerkarte in WordPress hinzu, auf die Sie zugreifen können, indem Sie zu WooCommerce > Checkout Form gehen.

Schritt 2: Bearbeiten Sie die aktuellen Felder

Das Plugin zeigt alle aktuellen Felder in Ihrem WooCommerce-Checkout an, außer dass das Plugin jetzt mit dem standardmäßigen WooCommerce-Checkout verknüpft ist, sodass Sie die volle Kontrolle über die Felder haben.

Sie können Folgendes bearbeiten:

• Abrechnungsfelder
• Versandfelder
• Weitere Felder

Um WooCommerce-Checkout-Felder zu bearbeiten , klicken Sie neben dem Feld, das Sie ändern möchten, auf Bearbeiten. Für dieses Beispiel ändern wir das Feld Firmenname .

Im Fenster „ Feld bearbeiten “ können Sie Optionen für das Feld ändern, z. B.:

• Etikett
• Platzhalter
• Standardwert
• Klasse
• Validierung

Es ist auch möglich, das Kontrollkästchen Erforderlich zu deaktivieren, sodass Kunden nicht verpflichtet sind, das Feld auszufüllen. Sie können das Feld auch deaktivieren, sodass es im Checkout überhaupt nicht angezeigt wird. Achten Sie darauf, auf Speichern & Schließen zu klicken.

Das Plugin speichert danach normalerweise alles, aber Sie können erneut auf die Schaltfläche Änderungen speichern klicken, um sicherzustellen, dass es funktioniert.

Wie Sie sehen können, haben wir das Feld Firmenname aus dem Checkout-Bereich entfernt.

Und es ist aus dem Frontend-Checkout verschwunden.

Möglicherweise möchten Sie auch etwas wie den Platzhaltertext bearbeiten. In diesem Fall ist es der gleiche Vorgang, das betreffende Feld zu öffnen und die Einstellungen zu ändern.

Das Feld „ Vorname “ an unserer Kasse zeigt jetzt einen neuen Platzhaltertext.

Schritt 3: Fügen Sie der WooCommerce-Kaufabwicklung ein neues Feld hinzu

Um ein völlig neues Feld hinzuzufügen, klicken Sie auf die Schaltfläche Feld hinzufügen.

Wählen Sie den Feldtyp und wählen Sie aus Optionen wie:

• Text
• Nummer
• Versteckt
• Passwort
• Telefon
• Kontrollkästchen
• Monat
• URL
• und viele mehr

Als Beispiel erstellen wir ein Nummernfeld und bitten Kunden, ihre Loyalty Rewards- Nummer einzugeben. Sie können auch Elemente wie Platzhalter, Standardwerte und angeben, ob es sich um ein Pflichtfeld handelt.

Stellen Sie sicher, dass Sie das Kontrollkästchen Aktiviert aktiviert haben, und klicken Sie dann auf Speichern und schließen .

Schritt 4: Sehen Sie sich die Ergebnisse an

Im Backend sehen Sie das neue Checkout-Feld am Ende der Liste. Es wird standardmäßig am Ende platziert, aber Sie können klicken und ziehen, um es neu anzuordnen.

Und das neue Feld erscheint auch im Frontend-Checkout-Modul.

Erstellen Sie noch heute die perfekte Checkout-Seite

Wir empfehlen, mit den standardmäßigen Checkout-Einstellungen von WooCommerce zu beginnen, um zu sehen, ob sie dazu beitragen, die gewünschten Ergebnisse zu erzielen. Erwägen Sie für erweiterte Bearbeitungen die Verwendung benutzerdefinierter Felder. Und für erweiterte, aber relativ einfach zu implementierende Anpassungen verwenden Sie einen der vorgeschlagenen Seitenersteller.

Was sind Ihre wichtigsten Fragen zum Bearbeiten der WooCommerce-Kaufabwicklung? Teilen Sie Ihre Gedanken in den Kommentaren!