So passen Sie Ihre WooCommerce-Checkout-Seite im Jahr 2025 an

Veröffentlicht: 2025-01-11

Käufer lieben einen schnellen und reibungslosen Checkout. Aber wenn es auch nur eine kleine Ablenkung gibt, werden sie ihren Einkaufswagen ohne einen zweiten Gedanken aufgeben. So schnell verliert man einen Verkauf.

Mit der Standard-Checkout-Seite von WooCommerce verlieren Sie möglicherweise bereits wertvolle Kunden. Durch die individuelle Gestaltung können Sie ein konsistentes Markenerlebnis schaffen, Ablenkungen beseitigen und den Kaufabschluss für Ihre Kunden vereinfachen . So können Sie Ihren durchschnittlichen Bestellwert verbessern und den Umsatz steigern.

Lesen Sie diesen Beitrag weiter, während wir Ihnen zeigen, wie Sie eine WooCommerce-Checkout-Seite so einfach wie möglich anpassen und Sie durch die Optimierung für höhere Konversionsraten führen.

Inhaltsverzeichnis
  • 1 Warum eine WooCommerce-Checkout-Seite anpassen?
  • 2 Möglichkeiten, die WooCommerce-Checkout-Seite anzupassen
    • 2.1 1. Verwendung des Site-Editors und der WooCommerce-Blöcke
    • 2.2 2. Verwendung eines WooCommerce Builders wie Divi
  • 3 Warum Divi perfekt zum Anpassen von WooCommerce-Checkout-Seiten ist
    • 3.1 1. Divi Quick Sites zum Generieren einer WooCommerce-Site (mit einer Checkout-Vorlage)
    • 3.2 2. Professionell gestaltete WooCommerce-Site-Layouts
    • 3.3 3. Divis native WooCommerce-Checkout-Module
    • 3.4 4. Divi Theme Builder für WooCommerce-Sites schnell
    • 3.5 5. Integrierte Marketing-Tools zur Optimierung der Checkout-Seiten
  • 4 So passen Sie Ihre WooCommerce-Checkout-Seite an (Schritt für Schritt)
    • 4.1 1. Erstellen Sie eine Checkout-Seitenvorlage
    • 4.2 2. Passen Sie Ihre Checkout-Seitenvorlage an
    • 4.3 3. Speichern Sie Ihre Checkout-Vorlage und zeigen Sie eine Vorschau an
  • 5 weitere Möglichkeiten zur Optimierung von WooCommerce-Checkout-Vorlagen
  • 6 Tools, die zum Erstellen von WooCommerce-Checkout-Vorlagen erforderlich sind
  • 7 Divi + WooCommerce ist die ultimative E-Commerce-Lösung
  • 8 FAQs zum Anpassen von WooCommerce-Checkout-Seiten

Warum eine WooCommerce-Checkout-Seite anpassen?

Da Sie nur dann Einnahmen erzielen, wenn Ihre Kunden zur Kasse gehen, muss Ihre Kaufabwicklung sorgfältig optimiert werden. Mit WooCommerce erhalten Sie zusammen mit anderen Seiten bereits einen vorgefertigten Checkout, der jedoch schlicht und unnötig langwierig ist, was das Risiko birgt, dass Ihre Kunden den Checkout verlassen, ohne eine gewünschte Aktion auszuführen.

Standard-Checkout

Wenn Ihr Checkout jedoch angepasst ist, hilft es Ihnen:

  • Erhöhen Sie den durchschnittlichen Bestellwert (AOV): Sie vereinfachen den Checkout-Prozess Ihrer Kunden, indem Sie unnötige Schritte eliminieren, einseitige Checkouts ermöglichen und grundlegende Details automatisch ausfüllen. Das beschleunigt die Zahlungsabwicklung und steigert den Wunsch der Kunden, häufiger zu bestellen.
  • Verbessern Sie die Benutzererfahrung: Sie optimieren den Checkout basierend auf dem Produkttyp. Für ein einzelnes Produkt lassen Sie ihn als Gast zur Kasse gehen. Bei monatlichen SaaS-Abonnements erlauben Sie ihnen, sich mit ihren Google-Kontodaten anzumelden. Für Miet- oder andere Online-Buchungen mit einem langwierigen (aber notwendigen) Prozess aktivieren Sie einen mehrstufigen Checkout, um ihn aufzuschlüsseln.
  • Behalten Sie die Markenkonsistenz bei: Der Checkout ist immer noch Teil Ihres Geschäfts. Daher ist die Anpassung, um Ihr Branding hinzuzufügen und störende Elemente wie Fuß- und Kopfzeile zu entfernen, eine hervorragende Möglichkeit, sicherzustellen, dass Ihre Kunden ihre Einkäufe abschließen.

Möglichkeiten zum Anpassen der WooCommerce-Checkout-Seite

Je nachdem, wie viel Sie anpassen möchten, können Sie den Site-Editor von WordPress oder einen WooCommerce-Builder verwenden, um Ihre Checkout-Seite zu ändern. Mit WooCommerce Blocks können Sie beispielsweise geringfügige Änderungen am Branding vornehmen, etwa an Farben, Schriftarten und Größe. Aber mit einem WooCommerce-Builder wie Divi können Sie jeden Zentimeter Ihrer Checkout-Seite ändern.

Ich zeige Ihnen, wie es auf beide Arten geht.

1. Verwendung des Site-Editors und der WooCommerce-Blöcke

Beachten Sie, dass Sie nur dann auf den WordPress Site Editor zugreifen können, wenn Sie ein Block-Theme installiert haben. Dies bedeutet, dass es nicht funktioniert, wenn Sie ein klassisches Theme oder ein Drittanbieter-Theme verwenden. Für unser Beispiel verwenden wir das Thema „Twenty Twenty-Four“.

Gehen Sie zu „Darstellung“ > „Editor“ > „Seiten“ > „Auschecken“ > „Bearbeiten“, um auf den Site-Editor zuzugreifen. (Wenn Sie ein klassisches Theme verwenden, können Sie die Checkout-Seite ändern, indem Sie zu WordPress-Dashboard > Seiten > Checkout > Bearbeiten gehen. )

Greifen Sie im Site-Editor auf die Kasse zu

Sie sehen den standardmäßigen WooCommerce-Checkout-Shortcode. Löschen Sie es, da Sie es überhaupt nicht anpassen können.

Löschen Sie den Woocommerce-Checkout-Shortcode

Fügen Sie den Block „Checkout WooCommerce“ hinzu, indem Sie auf das Plus-Symbol klicken.

Checkout-Block hinzufügen

Entfernen Sie einige Elemente des Blocks, z. B. Bestellhinweise, Geschäftsbedingungen, Telefonnummern, Abschnittsüberschriften, Links zur Rückkehr zum Warenkorb usw. Um ein Element zu löschen, klicken Sie auf die drei Punkte (Einstellungen) und dann auf Löschen.

Elemente aus der Kasse löschen

Überprüfen Sie die Vorlage und entscheiden Sie, welche Elemente entfernt werden sollen. Übertreiben Sie es jedoch nicht, denn das Entfernen wichtiger Schritte kann dazu führen, dass Sie nicht die notwendigen Informationen für Ihre Kunden erhalten. Sie können beispielsweise die Zeile „Adresse 2“ entfernen, da Kunden sie meist leer lassen, nicht jedoch die Spalte „Telefonnummer“, wenn Sie Marketingnachrichten per SMS oder WhatsApp versenden möchten.

Da es sich beim Checkout von WooCommerce um einen übergeordneten Block handelt, der durch die Kombination vieler untergeordneter Blöcke entsteht, können Sie Stileinstellungen wie Schriftart und Farbe nicht direkt ändern. Da übergeordnete Blöcke Stile aus den globalen Einstellungen des Themes anpassen, ist die Anpassung von WordPress Gutenberg begrenzt. Sie können nicht viel anpassen, es sei denn, Sie programmieren oder erwerben Erweiterungen, was letztendlich dazu führt, dass Sie mehr Geld ausgeben.

2. Verwendung eines WooCommerce Builders wie Divi

Wenn Sie die vollständige Kontrolle über das Design Ihres Online-Shops haben und Geld sparen möchten, ist die Anpassung Ihres Checkouts (und anderer Seiten) mit einem WooCommerce-Builder wie Divi genau das Richtige für Sie. Es vereinfacht die Anpassung, bietet unbegrenzte Flexibilität und ermöglicht Ihnen die Änderung aller Bereiche Ihres Online-Shops, einschließlich der Checkout-Seite.

Divi eignet sich ideal zum Anpassen von WooCommerce-Checkout-Seiten (und zum Erstellen von E-Commerce-Websites), da es einen einsteigerfreundlichen Drag-and-Drop-Builder ohne Code , dynamische WooCommerce-Checkout-Elemente für die Funktionalität und beeindruckende vorgefertigte Checkout- und Website-Layouts bietet , was das Entwerfen erleichtert. Divi passt perfekt zu WooCommerce, dank seiner Marketing-Tools wie Divi Leads, mit denen Sie Split-Tests und Bedingungen durchführen können, die Ihnen bei der Optimierung für verschiedene User Journeys helfen.

Sie erhalten außerdem einzigartige Tools wie Divi Quick Sites zum Entwerfen einer Checkout-Seite, eines Online-Shops oder einer Website in zwei Minuten und Divi AI zum Erstellen von Seitenlayouts, optimierten Texten passend zu Ihrem Markenstil und schönen Bildern in wenigen Minuten. Divi bietet alles, was Sie zum Betreiben und Erweitern Ihres Online-Shops benötigen, ohne in Erweiterungen von Drittanbietern investieren zu müssen, um die Funktionalität hinzuzufügen.

Beginnen Sie mit Divi

Warum Divi perfekt zum Anpassen von WooCommerce-Checkout-Seiten ist

Divi Woocommerce Builder

In Kombination mit WooCommerce ist Divi eine perfekte E-Commerce-Lösung, mit der Sie mühelos Marken-Onlineshops und Checkout-Seiten entwerfen können. Es ergänzt WooCommerce durch diese leistungsstarken Funktionen:

1. Divi Quick Sites zum Erstellen einer WooCommerce-Site (mit einer Checkout-Vorlage)

Divi Quick Sites ist ein Lebensretter für Websitebesitzer, die ihre Website nicht gerne von Grund auf neu gestalten möchten. Sie müssen nicht einmal eine Codezeile berühren oder Ihren Cursor bewegen. Divi Quick Sites erstellt für Sie in weniger als zwei Minuten einen Marken-Onlineshop. Alles, was Sie tun müssen, ist, die Schaltfläche „Shop“ zu aktivieren, während Sie Ihre Website-Details eingeben, und WooCommerce wird automatisch installiert und aktiviert. Es erstellt auch Marken-WooCommerce-Seitenvorlagen wie Produkt, Warenkorb und Kasse .

Gehen Sie zu Divi > Neue Site erstellen > Vorgefertigte Vorlage auswählen.

Ihre Website ist fertig! Gehen Sie zu Divi > Theme Builder > Checkout, um auf Ihre Checkout-Seitenvorlage zuzugreifen. Klicken Sie auf das Stiftsymbol neben dem benutzerdefinierten Körper, um ihn zu bearbeiten.

2. Professionell gestaltete WooCommerce-Site-Layouts

Wenn Sie es hassen, wie ich auf den leeren Bildschirm zu starren, ist Divi genau das Richtige für Sie. Mit über 2.000 Divi-Layouts können Sie professionell gestaltete Website-Layoutpakete für E-Commerce-Websites in jeder Branche importieren. Sobald Sie eines importiert haben, kann es mithilfe des Divi-Builders und der WooCommerce-Module angepasst werden, was das Entwerfen einer gebrandeten Checkout-Vorlage vereinfacht.

Vergessen wir nicht die kostenlosen Checkout-Vorlagen, die wir veröffentlicht haben, um den Vorgang noch weiter zu vereinfachen. Vorlage importieren, Branding anpassen, fertig! Divi-Experten (die sich mit Webdesign und UX-Optimierung in allen Einzelheiten auskennen) haben diese Vorlagen erstellt, sodass jedes Design konvertierungsoptimiert ist, um Ihnen mehr Umsatz zu verschaffen.

Checkout- und Warenkorb-Seitenvorlage

3. Divis native WooCommerce-Checkout-Module

Divi verfügt über mehr als 200 native und über 30 WooCommerce-Module, einschließlich Checkout-Modulen, sodass Sie sie nicht von Grund auf neu erstellen müssen. Die Checkout-Module von Divi enthalten nur die notwendigen Felder, um den Checkout für Ihre Kunden schnell und kurz zu gestalten.

Im Gegensatz zum Checkout-Block von WooCommerce im Site Editor, der ein übergeordneter Block mit vielen untergeordneten Blöcken war, die nicht separat bearbeitet werden können, sind die Module von Divi separat, sodass Sie entscheiden, welche Elemente Sie einschließen möchten. Fügen Sie beispielsweise Woo Checkout-Informationen nur hinzu, wenn Sie personalisierte Produkte verkaufen und die Eingabe von Kunden benötigen.

4. Divi Theme Builder schnell zu WooCommerce-Sites hinzufügen

Mit dem Divi Theme Builder können Sie Ihre gesamte Website und WooCommerce-Seiten auf Site-Ebene mithilfe des Drag-and-Drop-Divi-Builders entwerfen und anpassen. Sie erstellen beispielsweise eine Checkout -Seitenvorlage (die weitgehend von den Einkaufswagen der Kunden abhängt) und Divi Theme Builder hilft Ihnen in Kombination mit der dynamischen Content-Funktion von Divi dabei, Ihren Kunden ein einheitliches Branding-Erlebnis ohne manuellen Aufwand Ihrerseits zu bieten.

Zur Kasse mit dem Divi-Theme-Builder

Wenn Sie Änderungen an einer Vorlage vornehmen, werden diese überall aktualisiert. Dies ist ideal für Geschäfte mit mehreren Produkten, da Sie nur die Produktvorlage anpassen, um alle Produktseiten zu ändern. Ebenso können Sie Vorlagen für andere WooCommerce-Seiten erstellen und anpassen, z. B. Warenkorb- und sogar produktspezifische Landingpages.

5. Integrierte Marketing-Tools zur Optimierung der Checkout-Seiten

Divi verfügt über leistungsstarke Marketing-Tools als integrierte Funktionen, mit denen Sie Ihre Checkout-Seiten für bessere Konversionsraten optimieren können. Mit Divi Leads können Sie beispielsweise Split-Tests durchführen und einen Gewinner aus zwei Elementen auswählen. Sie können ganze Checkout-Seiten, Überschriften, Beschreibungskopien, CTAs oder andere Komponenten testen.

Angenommen, Sie sind sich nicht sicher, ob Sie den Site-Header beim Bezahlvorgang ausblenden sollen. Sie können ganz einfach einen Split-Test erstellen und anhand einer hohen Conversion-Rate zwischen beiden einen Gewinner auswählen.

Ebenso können Sie mit Conditions personalisierte Kauferlebnisse erstellen. Sie können Benutzern beispielsweise dynamische Nachrichten anzeigen, z. B. „Willkommen zurück!“ an eingeloggte Kunden oder „Exklusive Rabatte für Mitglieder!“ Erstellen Sie jetzt Ihr Konto!“ an Erstbesucher. Divi enthält außerdem Premium-Plugins wie Bloom, um hochkonvertierende E-Mail-Optins zu erstellen, und Monarch, um mehr Traffic zu vermarkten und zu generieren.

Holen Sie sich Divi + WooCommerce

So passen Sie Ihre WooCommerce-Checkout-Seite an (Schritt für Schritt)

Dieses Tutorial konzentriert sich auf die Anpassung einer WooCommerce-Checkout-Seite. Eine Schritt-für-Schritt-Anleitung zum Starten eines Online-Shops finden Sie in unserem Leitfaden zum Einrichten eines E-Commerce-Shops.

Um dieses Tutorial durchführen zu können, muss das Divi-Theme in Ihrem Online-Shop installiert und aktiv sein.

Die jährliche Divi-Mitgliedschaft kostet 89 US-Dollar, Sie können sie jedoch gegen eine einmalige Zahlung von 249 US-Dollar ein Leben lang erhalten. Nachdem Sie Divi gekauft haben, melden Sie sich mit Ihren Elegant Themes-Anmeldeinformationen an und laden Sie die Divi.zip-Datei herunter. Laden Sie den ZIP-Ordner auf die Registerkarte „WordPress -Darstellung“ > „Themen“ > „Neu hinzufügen “ hoch. Aktivieren Sie abschließend Ihre Divi-Lizenz.

Hier ist eine Schritt-für-Schritt-Anleitung zur Installation und Aktivierung von Divi:

Holen Sie sich Divi + WooCommerce

1. Erstellen Sie eine Checkout-Seitenvorlage

Gehen Sie zu Divi > Theme Builder > Neue Vorlage hinzufügen, um von Grund auf zu erstellen.

Erstellen Sie eine neue Theme-Builder-Vorlage

Wählen Sie „Checkout from WooCommerce Pages“ als Quelle.

Wählen Sie „Kasse“ als Quelle

Das nächste Fenster ist der Drag-and-Drop-Divi-Builder zum Entwerfen Ihrer Checkout-Vorlage. Bewegen Sie den Mauszeiger darüber und klicken Sie auf das Plus-Symbol, um eine Zeile hinzuzufügen und mit dem Divi Theme Builder eine Checkout-Seitenvorlage zu erstellen.

Erstellen Sie den Checkout von Grund auf

Wenn Sie keine erstellen möchten, importieren Sie eine vorgefertigte Vorlage oder bitten Sie Divi AI, eine mit Build with AI zu erstellen.

Importieren oder verwenden Sie AI, um eine Checkout-Vorlage zu generieren

Denken Sie daran, dass Sie nicht von Grund auf neu aufbauen müssen, wenn Sie nicht wissen, wo Sie anfangen sollen. Mit Divi Quick Sites können Sie jederzeit eine gebrandete Checkout-Vorlage erstellen.

2. Passen Sie Ihre Checkout-Seitenvorlage an

Ich verwende die oben generierte Divi Quick Sites-Checkout-Vorlage, um Ihnen den Anpassungsprozess zu zeigen. So sieht es aus:

Von Divi Quick Sites generierte Checkout-Vorlage

Wie Sie sehen, enthält die von Divi Quick Sites generierte Vorlage bereits die erforderlichen WooCommerce-Checkout-Module, sodass Sie nicht viel weiter tun müssen, als Ihre Zahlungsmethoden hinzuzufügen ( WooCommerce > Einstellungen > Zahlungen ), um sie vor der Veröffentlichung funktionsfähig zu machen.

Woocommerce-Zahlungen

Profi-Tipp: Installieren Sie die WooPayments-Erweiterung, damit Kunden ihre bevorzugten lokalen Zahlungsmethoden verwenden können, beispielsweise Paytm in Indien und Pix in Brasilien. Es bietet außerdem viele Vorteile, wie automatische Bankeinzahlungen und die Unterstützung mehrerer Währungen. Das Hinzufügen mehrerer Zahlungsmethoden erhöht die Chancen, dass Ihre Kunden den Zahlungsvorgang abschließen.

Nutzen Sie die WooCommerce-Checkout-Module von Divi

Sehen wir uns die WooCommerce-Checkout-Module von Divi an, auf die Sie Zugriff haben. Im Gegensatz zu den WooCommerce-Blöcken von WordPress Gutenberg sind die WooCommerce-Module von Divi auf Geschwindigkeit optimiert. Beispielsweise enthält das Woo Checkout Bill- Modul nur die erforderlichen Felder mit (optionalen) Feldbezeichnungen und Titeln, wenn diese nicht unbedingt erforderlich sind.

Abgesehen davon sind die Divi-Checkout-Module anstelle eines übergeordneten Blocks separat, sodass Sie entscheiden, ob Sie mit Woo Checkout Shipping eine andere Lieferadresse oder mit Woo Checkout Information Bestellnotizen hinzufügen möchten.

Sie können den Stil eines Moduls ganz einfach anpassen, indem Sie auf das Zahnradsymbol (Einstellungen) klicken und von Inhalt zu Design wechseln. Sie können Farben, Schriftarten, Schaltflächen und andere Einstellungen schnell ändern.

Passen Sie die Elementeinstellungen an

Das Beste an der Verwendung von Divi sind die über 200 nativen Inhaltsmodule, mit denen Sie Ihre Checkout-Seite für mehr Conversions verbessern können. In den folgenden Abschnitten verwenden wir verschiedene Divi-Einstellungen und -Module, um diese Checkout-Vorlage zu optimieren.

Fügen Sie ein Testimonial hinzu, um Glaubwürdigkeit aufzubauen

Das Zeigen von Social Proof an Ihrer Kasse ist eine großartige Möglichkeit, Käufern dabei zu helfen, kurzfristige Zweifel auszuräumen und ihren Einkauf abzuschließen. Mit dem nativen Testimonial- Modul von Divi können Sie eine dauerhafte Kundenreferenz hinzufügen, um Glaubwürdigkeit aufzubauen. Gehen Sie zu den Einstellungen, um es hervorzuheben, indem Sie eine Hintergrundfarbe oder einen Rahmen hinzufügen oder die Schriftart, Farben usw. ändern.

Fügen Sie Erfahrungsberichte hinzu, um die Glaubwürdigkeit Ihrer WooCommerce-Checkout-Seite zu stärken

Da es nicht dynamisch ist, erscheint das Testimonial für alle Kunden gleich. Stellen Sie daher sicher, dass Sie ein markenspezifisches Testimonial anstelle eines produktspezifischen auswählen – etwas, das die Marke als vertrauenswürdig und zuverlässig darstellt.

Erstellen Sie einen Garantiebereich

Sie können an Ihrer Kasse auch einen Abschnitt „Garantie“ erstellen, um Ihre Kunden daran zu erinnern, warum sie dem Einkauf bei Ihrer Marke vertrauen sollten. Hier bei Elegant Themes bieten wir beispielsweise eine 30-tägige Geld-zurück-Garantie mit einer Richtlinie, bei der keine Fragen gestellt werden . Denn wir glauben, dass unsere Kunden, sobald sie sich an Divi gewöhnt haben, es sofort lieben und eine Rückerstattung vergessen werden.

Sie können auch etwas Einfaches anzeigen, wie Ihre Unternehmenswerte, die Kundenzahl usw., um Ihre Markenautorität hervorzuheben.

Heben Sie Markenwerte in einem Garantiebereich auf Ihrer Checkout-Seite hervor

Um einen solchen Abschnitt zu erstellen, verwenden Sie die nativen Titel-, Symbol- und Textmodule von Divi. Befolgen Sie dieses Tutorial, um Divi Builder und Module zum Hinzufügen und Anpassen von Elementen zu verwenden.

Erstellen Sie ein Last-Minute-Rabattbanner mit der dynamischen Inhaltsfunktion von Divi

Ein weiterer toller Vorteil von Divi-Modulen ist, dass sie dynamisch sind, das heißt, sie beziehen automatisch Daten von bestimmten Produkten, ohne dass Sie diese manuell eingeben müssen. Wenn Ihre Kunden beispielsweise den Warenkorb einrichten und die Produkte auswählen, werden die Informationen automatisch im Woo Checkout Details- Modul von Divi ausgefüllt.

Sie können auch die Einstellungen für dynamische Inhalte in bestimmten Elementen ändern, um das Benutzererlebnis noch individueller zu gestalten. Erstellen Sie beispielsweise ein Last-Minute-Rabattbanner mit einer zeitlichen Begrenzung, um Dringlichkeit zu schaffen und Benutzer zu ermutigen, ihre Einkäufe abzuschließen. Nutzen Sie dazu das Countdown-Timer -Modul. So passen Sie es an:

Zeigen Sie spezielle Rabatte für eingeloggte Kunden anhand der Konditionen von Divi an

Divi's Conditions ist eine weitere leistungsstarke Funktion zur Optimierung von Kaufprozessen basierend auf verschiedenen Kunden. Erstellen Sie beispielsweise ein Exit-Intent-Rabatt-Banner-Popup, um Kunden erneut anzusprechen, die den Kauf nach dem Besuch der Checkout-Seite nicht abgeschlossen haben. Oder präsentieren Sie Kunden, die ein Kundenkonto erstellt haben, einen Rabattcode nur für angemeldete Benutzer oder ein kostenloses Lieferangebot.

Erstellen Sie zunächst ein Bildbanner und fügen Sie es mit dem Bildmodul von Divi hinzu. Gehen Sie dann zu Einstellungen > Erweitert > Bedingungen. Wählen Sie nun den Status „Angemeldet als Benutzer“ aus . So zeigen Sie eingeloggten Benutzern einen Rabattcode an.

Entfernen Sie die Kopf- und Fußzeile der Website, um Ablenkungen zu vermeiden

Um sicherzustellen, dass sich Ihre Kunden auf den Abschluss des Kaufs konzentrieren können, müssen Sie Ablenkungen beim Bezahlvorgang beseitigen. Diese ablenkenden Elemente können Schaltflächen oder Links sein, die Ihre Kunden vom Bezahlen abhalten könnten, im Allgemeinen in der Kopf- und Fußzeile Ihrer Website. Also, verstecken Sie sie. Aber wie stellen Sie sicher, dass sie auf anderen Seiten außer der Kasse und dem Warenkorb sichtbar sind? Dank Divi Theme Builder ist dies mit Divi ganz einfach.

Beim Erstellen von Vorlagen mit dem Divi Theme Builder erstellen und weisen Sie bestimmte Zielseiten zu, auf denen Sie sie verwenden. Beispielsweise haben wir unserer Checkout-Vorlage Checkout von WooCommerce-Seiten zugewiesen, sodass sich alle Änderungen nur auf Checkout-Seiten auswirken.

Nur auf Checkout-Seiten wirksam

Um die Kopf- und Fußzeile aus Ihrer Checkout-Vorlage auszublenden, klicken Sie auf das Augensymbol daneben und auf „Änderungen speichern“ . Das Augensymbol stellt die Sichtbarkeit dar. Da wir es deaktiviert haben, bedeutet es, dass sie nicht sichtbar sind.

Kopf- und Fußzeile auf Ihrer Checkout-Seite ausblenden

Wenn Sie Ihre Kopf- und Fußzeile nicht vollständig ausblenden möchten, können Sie vereinfachte Versionen für Ihre Checkout-Seite erstellen. Klicken Sie einfach, um den Kopf- oder Fußzeilenbereich Ihrer Checkout-Seitenvorlage zu bearbeiten, und nehmen Sie mit dem Builder Anpassungen vor.

Optional: Hinzufügen eines E-Mail-Optin-Popup-Formulars

Bloom-Popup-Beispiel zur Anzeige auf einer Checkout-Seite

Sie können auch das Bloom-Plugin von Divi verwenden, um ein E-Mail-Opt-in-Popup mit Rabattgutscheinen exklusiv für E-Mail-Abonnenten zu erstellen. Bloom verfügt über viele verschiedene Anzeigetypen, einschließlich auslöserspezifischer Popups. Sie können das Popup beispielsweise anzeigen, wenn ein Benutzer auf der Produktseite inaktiv ist. Oder lösen Sie nach Abschluss des Kaufs ein benutzerdefiniertes Popup auf der Dankesseite aus. Dies wäre ein guter Zeitpunkt, um einen Rabatt für die Aufnahme in Ihre E-Mail-Liste anzubieten, damit Sie mehr Verkäufe erzielen können.

Holen Sie sich Divi + WooCommerce

3. Speichern Sie Ihre Checkout-Vorlage und zeigen Sie eine Vorschau an

Wenn Sie mit Ihrem Design zufrieden sind, klicken Sie unten rechts im Divi Builder auf die Schaltfläche „Speichern“ .

Holen Sie sich Divi + WooCommerce

Weitere Möglichkeiten zur Optimierung von WooCommerce-Checkout-Vorlagen

Abgesehen von der Anpassung Ihres WooCommerce-Checkouts mit Divi finden Sie hier einige wichtige Plugins und WooCommerce-Erweiterungen, die Ihnen dabei helfen, Ihren Checkout noch weiter zu optimieren:

  • Bloom: Um die Anzahl der abgebrochenen Warenkörbe zu senken, sammeln Sie E-Mail-Leads direkt auf Ihren Checkout-Seiten, indem Sie im Austausch für E-Mail-Anmeldungen spezielle Rabatte oder Updates anbieten.
  • FunnelKit: Optimieren Sie die Kaufreise Ihrer Kunden, indem Sie automatisierte Verkaufstrichter und One-Page-Checkouts erstellen.
  • DiviFlash: Steigern Sie Ihren Umsatz mit konvertierungsoptimierten, beeindruckenden WooCommerce-Layouts für Shop-, Produkt-, Warenkorb- und Checkout-Seiten. Siehe auch Ultimate WooCommerce UI Kit.
  • Divi Checkout: Bieten Sie mehrere Zahlungsoptionen an, darunter Google Pay und Apple Pay, um die Zahlungsabwicklung für Ihre Kunden zu vereinfachen.
  • WooCommerce One-Page Checkout: Reduzieren Sie den Zeitaufwand für den Checkout, indem Sie One-Page-Checkout-Prozesse erstellen.
  • WooPayments: Akzeptieren Sie Zahlungen in über 135 Währungen und integrieren Sie über 100 Zahlungsmethoden, um Ihren Kunden die bevorzugte Auswahl zu bieten.
  • Checkout Fields Manager: Passen Sie die Beschriftungen der WooCommerce-Checkout-Felder ganz einfach an.
  • Benutzerdefinierte WooCommerce-Felder: Fügen Sie Ihrem standardmäßigen WooCommerce-Checkout-Block ein Dropdown-Menü, ein Kontrollkästchen und eine Mehrfachauswahl für benutzerdefinierte Felder hinzu.
  • WooCommerce-SEO-Plugins: Optimieren Sie Ihre Website für WooCommerce-SEO mithilfe von Plugins, die den Prozess der Indizierung und Optimierung von Produkten, Kategorien und anderen WooCommerce-Seiten vereinfachen.

Wenn Sie sich noch nicht für ein Theme entschieden haben, können Sie sich diese WooCommerce-Themes ansehen, die sofort mehr Anpassungsmöglichkeiten bieten.

Erforderliche Tools zum Erstellen von WooCommerce-Checkout-Vorlagen

Aufgabe Empfohlenes Werkzeug
1 Reduzieren Sie die Anzahl abgebrochener Warenkörbe, indem Sie E-Mail-Leads von Checkout-Seiten sammeln Blühen
2 Optimieren Sie die Kaufprozesse Ihrer Kunden, indem Sie automatisierte Verkaufstrichter erstellen FunnelKit
3 Steigern Sie Ihren Umsatz mit konvertierungsoptimierten WooCommerce-Layouts für Shop-, Produkt-, Warenkorb- und Checkout-Seiten DiviFlash
4 Schauen Sie sich ein umfangreiches WooCommerce UI Kit für schöne Layouts an Ultimatives WooCommerce-UI-Kit
5 Vereinfachen Sie die Zahlungsabwicklung mit mehreren Zahlungsoptionen (Google Pay, Apple Pay) Divi-Kaufabwicklung
6 Reduzieren Sie den Zeitaufwand für den Checkout, indem Sie einen einseitigen Checkout-Prozess erstellen WooCommerce One-Page Checkout
7 Akzeptieren Sie Zahlungen in über 135 Währungen und integrieren Sie über 100 Zahlungsmethoden WooPayments
8 Passen Sie die Beschriftungen der WooCommerce-Checkout-Felder ganz einfach an Checkout-Feldmanager
9 Fügen Sie benutzerdefinierte Felder wie Dropdowns, Kontrollkästchen und Mehrfachauswahloptionen zum WooCommerce-Checkout hinzu Benutzerdefinierte WooCommerce-Felder

Divi + WooCommerce ist die ultimative E-Commerce-Lösung

Divi und WooCommerce sind alles, was Sie brauchen, um einen einzigartigen und funktionalen E-Commerce-Shop aufzubauen, von dem Ihre Kunden begeistert sind. Die Anpassbarkeit von Divi perfektioniert die E-Commerce-Funktionalität von WooCommerce, sodass Sie schnelle und reibungslose Checkout-Seiten erstellen, diese für mehr Conversions optimieren und die Anzahl der abgebrochenen Warenkörbe senken können.

Holen Sie sich Divi + WooCommerce

FAQs zum Anpassen von WooCommerce-Checkout-Seiten

Wie passe ich die WooCommerce-Checkout-Seite ohne Plugin an?
Sie können die WooCommerce-Checkout-Seite ohne Plugin mit dem Site-Editor von WordPress anpassen , aber Sie können damit nur eine begrenzte Menge machen. Um die vollständige Kontrolle über das Design Ihrer Checkout-Seite zu erhalten, ist es besser, ein anpassbares Theme wie Divi zu verwenden, das mit WooCommerce funktioniert und es Ihnen ermöglicht, jeden Zentimeter Ihres Online-Shops zu ändern.
Wie kann ich meine Checkout-Conversions verbessern?
Sie sollten damit beginnen, Ihren Checkout-Prozess zu vereinfachen. Entfernen Sie unnötige Felder und fügen Sie mehrere Zahlungsmethoden hinzu, damit Ihre Kunden wählen können. Nutzen Sie dann Glaubwürdigkeitsfaktoren wie Erfahrungsberichte, Garantien, Rabatte und Last-Minute-Angebote, um Käufern zu helfen, schnelle Kaufentscheidungen zu treffen. Ein hochgradig anpassbares Theme wie Divi kann diese Elemente ganz einfach zu Ihrer Checkout-Seite hinzufügen.
Wie kann ich die Standard-Checkout-Seite von WooCommerce ändern?
Das Ändern der standardmäßigen WooCommerce-Checkout-Seite mit Divi ist ganz einfach. Gehen Sie einfach zu Divi > Theme Builder und erstellen Sie eine neue Checkout-Vorlage. Anschließend können Sie mit Divi Builder Ihre Checkout-Seite nach Ihren Wünschen gestalten. Nur auf Checkout-Seiten wirksam
Wie kann ich in WooCommerce ein benutzerdefiniertes Checkout-Feld hinzufügen?
Sie können in WooCommerce ein benutzerdefiniertes Checkout-Feld hinzufügen, indem Sie die WooCommerce Custom Fields-Erweiterung installieren. Eine bessere Möglichkeit besteht darin, Divi zu verwenden, um auf über 200 Inhaltsmodule zuzugreifen, einschließlich interaktiver Elemente wie Dropdowns, Kontrollkästchen usw.