So richten Sie eine WooCommerce-Checkout-Seite mit Divi ein

Die wichtigste Phase einer Online-Shopping-Reise ist der Abschluss eines Kaufs. Egal, wie lange ein Benutzer damit verbringt, in Ihrem Online-Shop zu stöbern, wenn es nicht zu einem Verkauf führt, ist es nicht relevant.

Es ist entscheidend, den Checkout-Prozess für Ihre Kunden so reibungslos wie möglich zu gestalten. Wie erstellen Sie also eine benutzerfreundliche Checkout-Seite in Ihrem WooCommerce-Shop? In diesem Beitrag werden wir uns ansehen, wie Sie mit Divi eine benutzerdefinierte WooCommerce-Checkout-Seite einrichten.

Warum brauchen Sie eine angepasste WooCommerce-Checkout-Seite?

Kein Kunde muss sich mit einem umständlichen Bezahlvorgang auseinandersetzen. Die Wahrheit ist, dass Ihre Kunden nicht herumhängen würden, wenn Ihre Checkout-Seite und Ihr Prozess stressig sind. Wenn Sie derzeit verlassene Warenkörbe auf Ihrer E-Commerce-Website feststellen, ist es möglicherweise eine gute Idee, Ihre Checkout-Seite zu überarbeiten.

Sie müssen Ihren Kunden vom Beginn des Einkaufserlebnisses bis zur letzten Phase einen „Wow“-Effekt vermitteln. Wenn Sie die herkömmliche Checkout-Seite von WooCommerce wählen, würden Sie diesen Effekt nicht erzielen.

Sie müssen einen einzigartigen, nahtlosen und benutzerfreundlichen Checkout-Prozess erstellen, um Ihren Kunden ein reibungsloses Einkaufserlebnis zu bieten. Einige der Vorteile der Erstellung einer benutzerdefinierten Checkout-Seite sind wie folgt:

• Weniger Warenkorbabbrüche

Verpasste Verkaufschancen werden oft durch das Verlassen des Einkaufswagens verursacht. Es ist eine Situation, in der Kunden bereits Artikel in ihren Einkaufswagen legen, aber irgendwann die Website ohne Abschluss des Kaufs verlassen. Eine komplizierte Checkout-Seite führt oft dazu, dass der Warenkorb abgebrochen wird.

Wenn Ihr Kunde einen langen Prozess durchlaufen muss oder der Meinung ist, dass der Prozess nicht sicher ist, verliert er wahrscheinlich das Interesse am Abschluss der Transaktion. Mit einer angepassten Checkout-Seite besteht eine hohe Chance, dass Ihre Kunden den Prozess einfacher und sicherer finden.

• Schnelle und einfache Transaktionen

Ihr Verkaufstrichter sollte so kurz und schnell wie möglich sein. Wenn Sie Ihre WooCommerce-Checkout-Seite einrichten und anpassen, entfernen Sie ganz einfach die unnötige Belastung und konzentrieren sich nur auf wichtige Details im Transaktionsprozess.

Bei einem Checkout-Prozess mit mehreren auszufüllenden Seiten werden Kunden wahrscheinlich müde und verlassen Ihre Website. Wenn der gesamte Prozess jedoch optimiert ist, können Sie Ihren Kunden dabei helfen, den Kaufprozess schneller und einfacher abzuschließen.

So richten Sie eine benutzerdefinierte WooCommerce-Checkout-Seite ein

Ihre WooCommerce-Seite verfügt über eine Standard-Checkout-Seite. Sie können dies mit einem Plugin oder Shortcode eines Drittanbieters bearbeiten. Wenn Sie ein neuer Benutzer sind, fällt es Ihnen möglicherweise schwer, Ihre Checkout-Seite mit diesen Optionen zu bearbeiten. Hier kommt die Verwendung eines Plugins wie dem Divi Builder ins Spiel.

Divi Builder verfügt über ein Divi-Shop-Modul, mit dem Sie einen beeindruckenden Online-Shop mit einer benutzerdefinierten Checkout-Seite erstellen können. In diesem Abschnitt sehen wir uns die Schritt-für-Schritt-Anleitung zum Einrichten Ihrer benutzerdefinierten WooCommerce-Checkout-Seite an.

Zuvor ist es wichtig, die Bedeutung von SSL-Zertifikaten, Datenschutz und Sicherheit auf Ihrer Website zu verstehen. Sie benötigen ein SSL-Zertifikat für eine zusätzliche Sicherheitsebene, um auf Ihrer Plattform gespeicherte Daten zu verschlüsseln.

Ein SSL-Zertifikat zeigt Ihren Kunden, dass Ihre Website sicher ist, um Kreditkartendaten bereitzustellen. Nachdem wir diesen Teil nun geklärt haben, lassen Sie uns in die Details der Erstellung einer benutzerdefinierten WooCommerce-Checkout-Seite eintauchen.

Erster Schritt: Richten Sie Ihre Checkout-Seite in den WooCommerce-Plugin-Einstellungen ein, bevor Sie das Divi Builder-Plugin verwenden. Gehen Sie dazu in Ihr WooCommerce-Dashboard und klicken Sie auf „Einstellungen“.

Klicken Sie als Nächstes auf die Registerkarte „Erweitert“ und suchen Sie die Checkout-Seite. Wählen Sie die Option „Zur Kasse“ aus dem Dropdown-Menü und scrollen Sie zum Ende der Seite, um auf die Schaltfläche „Speichern“ zu klicken, um die Änderungen zu speichern.

Schritt Zwei: Wenn die Checkout-Seite bereits eingerichtet ist, besteht der nächste Schritt darin, das Divi Shop Builder-Plugin zu installieren. Navigieren Sie also zur offiziellen Website von Elegant Theme, um das Divi Shop Builder-Plugin zu kaufen. Klicken Sie zum Herunterladen auf den Download-Link auf Ihrer „Mein Konto“-Seite.

Installieren und aktivieren Sie nach dem Download das Plugin. Das Plugin wird nach Abschluss der Installation im Divi-Menü angezeigt. Bevor Sie fortfahren, stellen Sie sicher, dass Sie das Plug-in für Ihren Kauf authentifizieren.

Gehen Sie dazu auf der Elegant Theme-Website auf die Seite „Mein Konto“, um den Lizenzschlüssel zu kopieren. Wenn Sie das Plugin authentifiziert haben, können Sie damit beginnen, es zu verwenden. Der Divi Shop Builder funktioniert im Divi Builder-Plugin, wodurch der Aufbau Ihres WooCommerce-Shops zu einer sehr nahtlosen Aufgabe wird.

Schritt drei: Der nächste Schritt besteht darin, Ihre benutzerdefinierte WooCommerce-Checkout-Seite zu erstellen. Klicken Sie dazu, um die Checkout-Seite zu öffnen und den gekauften Divi Builder zu aktivieren. Öffnen Sie als Nächstes das Divi Builder-Plugin und beginnen Sie, Module hinzuzufügen.

Sie werden fünf neue Module (Checkout Billing, Checkout Coupon, Checkout Order, Checkout Shipping und Cart/Checkout Notices) finden, die Divi Builder hinzugefügt wurden. Diese Module helfen Ihnen, Ihre benutzerdefinierte Checkout-Seite in Ihrem WooCommerce-Shop einzurichten. So funktionieren diese Module.

Kassenabrechnung: Dies ermöglicht die Anpassung aller Formulareingabefelder, in die Kunden ihre Rechnungsdaten eingeben können. Sie können die Feldbezeichnungen entsprechend bearbeiten.

Kassenversand: Damit können Ihre Kunden eine Zweitadresse angeben. Wie bei der Checkout-Abrechnung können Sie auch die Formularfelder nach Bedarf bearbeiten.

Checkout Coupon: Damit können Ihre Kunden einen eindeutigen Promo-Code eingeben, der ihnen zugewiesen wurde, um einen Sonderrabatt zu erhalten. Sie sollten das Checkout Coupon-Modul getrennt von anderen Modulen platzieren, damit sie funktionieren. Wenn Sie eine Platzbeschränkung haben, reduzieren Sie die Polsterung zwischen den Zeilen und Abschnitten, um mehr Platz zu schaffen.

Checkout-Bestellung: Hier erstellt und bestätigt Ihr Kunde die Bestellung, bevor er mit der Zahlungsoption fortfährt. Sie können diesen Teil auch per Drag & Drop entsprechend bearbeiten.

Checkout Notice: Wenn Sie anderen Checkout-Seiten eine Notiz hinzufügen möchten, können Sie dieses Modul verwenden. Sie können in Ihrem Design so aufwendig oder einfach sein, wie Sie möchten.

Wenn Sie die Checkout-Module verwenden, müssen Sie sicherstellen, dass sie sich nicht in denselben Abschnitten wie andere Formularmodule befinden. Wenn Sie sie zusammen platzieren, würden sie nicht funktionieren. Sie sollten das Kontaktformular-Modul, das Opt-in-Formular-Modul, das Kommentar-Modul und das Anmelde-Modul in separaten Abschnitten platzieren, wenn Sie die Checkout-Seite erstellen, damit sie ordnungsgemäß funktionieren.

Wie andere Module innerhalb des Divi-Designs können Sie Ihre Checkout-Module mit dem Divi Builder individuell gestalten. Führen Sie dazu die folgenden Schritte aus:

• Klicken Sie auf , um die Checkout-Module zu öffnen

• Klicken Sie auf die Registerkarte „Design“.

• Verwenden Sie die verschiedenen Elemente, um Ihre Seite so zu gestalten, dass sie zu Ihrem Design und Ihrer Markenidentität passt

• Sie können auch weitere Anpassungen über die Registerkarte „Erweitert“ hinzufügen. Auf der Registerkarte „Erweitert“ können Sie Bildlaufeffekte, Übergänge, Positionierung und Sichtbarkeitseinstellungen für ein Gerät festlegen. Sie können auch benutzerdefinierte IDs und Klassen für erweitertes CSS-Scripting hinzufügen.

Fazit

Divi nimmt Ihnen den Stress ab, eine WooCommerce-Checkout-Seite einzurichten. Sie können damit Ihre aktuelle Checkout-Seite bearbeiten und auch eine benutzerdefinierte Warenkorbseite erstellen. Das Divi-Plug-in verfügt über zahlreiche Funktionen, um Ihren Shop so einladend für Kunden zu gestalten, wie Sie es sich nur vorstellen können. Es macht auch den Einkauf und den Bezahlvorgang sehr nahtlos.