Möchten Sie, dass Ihre Checkout-Seite wie der Rest Ihres Shops aussieht und nicht wie ein Standardformular? Easy Digital Downloads funktioniert mit dem Elementor-Seitenersteller, sodass Sie jeden Teil Ihres Checkouts umgestalten können, ohne Code anfassen zu müssen.
Diese Anleitung führt Sie durch den EDD Checkout-Block, das EDD Checkout-Widget in Elementor und die einzelnen Checkout-Widgets, die Sie zum Umgestalten und Neuanordnen der Seite verwenden.
Voraussetzungen: Die folgenden Elementor-Widgets erfordern das installierte und aktivierte Elementor-Plugin sowie die Einstellung „Contain“ auf „Active“ im Bildschirm „Elementor Editor » Settings » Feature“.
Beginnend mit einer Checkout-Vorlage
Wenn Sie lieber keine Kasse von Grund auf neu erstellen möchten, können Sie eine vorgefertigte Checkout-Vorlage importieren und diese dann mit allem oben genannten bearbeiten. Jede importierte Vorlage platziert die vier Checkout-Widgets für Sie, sodass die Schritte zur Gestaltung und Neuanordnung in dieser Anleitung direkt darauf angewendet werden können.
Vorlagen enthalten Platzhalterüberschriften und Beispielformulierungen für die Live-Zahlungsfelder. Das Ersetzen dieses Textes durch Ihren eigenen ist normalerweise die erste Bearbeitung, die Sie vornehmen werden.
Konfiguration des EDD Checkout-Blocks
Die Checkout-Seite wird für Sie erstellt, wenn Sie Easy Digital Downloads aktivieren. Sie befindet sich in Ihrer WordPress-Seitenliste als Checkout und verwendet den EDD Checkout-Block.
Hinweis: Der EDD Checkout Block und seine Einstellungen sind für jeden Benutzer verfügbar, unabhängig davon, ob Sie Elementor verwenden oder nicht.
Öffnen Sie die Checkout-Seite, und die Blockeinstellungen werden rechts angezeigt.
Beginnen Sie mit der Einstellung Vorschau als Gast, mit der Sie die Erfahrung sowohl von Erstbesuchern als auch von wiederkehrenden Kunden überprüfen können. Sie erhalten auch eine Echtzeit-Vorschau der Checkout-Seite und des Kreditkartenformulars direkt im Editor.
Wählen Sie eines Ihrer Produkte aus dem Menü Download auswählen, um zu sehen, wie das Formular mit etwas im Warenkorb aussieht.
Die eigenen Einstellungen des Blocks ermöglichen es Ihnen, das Layout zu ändern, die Größe des Warenkorb-Thumbnails anzupassen und das Rabattformular anzuzeigen oder auszublenden.
Bearbeiten Ihres Checkouts mit Elementor
Elementor erstellt sein eigenes EDD Checkout-Widget, das Ihnen eine weitaus tiefere Designkontrolle ermöglicht als der Block allein.
Zugriff auf den Elementor-Editor
Wenn das Elementor-Plugin installiert und aktiviert ist, bietet Ihre Checkout-Seite die Option Mit Elementor bearbeiten.
Wenn Sie darauf klicken, öffnet sich der Elementor-Editor.
Hinzufügen des EDD Checkout-Widgets
Suchen Sie im Elementen-Panel auf der linken Seite nach EDD Checkout und ziehen Sie es dann auf Ihre Seite.
Ein neu hinzugefügtes Widget bleibt leer, bis Sie ein Layout auswählen, was der nächste Schritt ist. Sobald Sie dies getan haben, rendert es eine Live-Vorschau Ihres Checkout-Formulars, sodass Sie Ihre Änderungen sehen können, anstatt zu veröffentlichen und das Frontend zu überprüfen.
Dieses Widget ist der Container für Ihre gesamte Kasse. Seine eigenen Einstellungen befinden sich unter drei Tabs: Layout, Stil und Erweitert.
Auswahl eines Checkout-Layouts
Öffnen Sie auf dem Tab Layout das Checkout-Layout. Sie erhalten fünf vorgefertigte Anordnungen zur Auswahl, die Einspalten- und Zweispaltendesigns umfassen, sowie Schalter zum Anzeigen oder Ausblenden des Warenkorbs und des Rabattformulars.
Hinweis: Elementor warnt Sie, dass das Wechseln des Layouts den gesamten Widget-Inhalt ersetzt. Wählen Sie Ihr Layout, bevor Sie Zeit in die Gestaltung investieren, damit Ihre Arbeit weitergetragen wird.
Formatierung des Checkout-Containers
Der Tab Stil behandelt die Kasse als Ganzes mit Abschnitten für Hintergrund, Hintergrundüberlagerung, Rahmen, Formteiler und Formularelemente.
Shape Divider ist derjenige, der es wert ist, ihn zu kennen, da er dem oberen oder unteren Rand Ihres Checkouts eine dekorative Form anstelle einer flachen Grenze hinzufügt. Wählen Sie eine Kante und dann eine Form aus.
Anpassen der einzelnen Checkout-Widgets
Ihr Checkout besteht aus vier separaten Widgets: dem Warenkorb, den persönlichen Informationen, den Zahlungsinformationen und dem Rabattformular. Jedes hat seine eigenen Einstellungen, mit denen Sie einen Teil des Checkouts gestalten können, ohne den Rest zu beeinträchtigen.
Diese vier finden Sie nicht im Element-Panel, da Sie sie nicht von Hand hinzufügen. Sie werden als Teil des EDD Checkout-Widgets geliefert. Um auf ihre Einstellungen zuzugreifen, wählen Sie das gewünschte Teil direkt auf der Seite aus.
Das Warenkorb-Widget
Auf der Registerkarte Inhalt bietet der Warenkorb eine Warenkorb-Kopfzeile-Umschalttaste, eine Warenkorb-Miniaturansicht-Umschalttaste und einen Größe-Schieberegler für diese Miniaturansichten.
Die Registerkarte Stil ist die tiefgreifendste der vier. Die Steuerelemente sind in Warenkorb-Kopfzeile, Warenkorb-Elemente und Fußzeilenzeilen gruppiert, sodass Sie die Summen anders gestalten können als die Zeilenelemente darüber.
Das Widget für persönliche Informationen
Dieses Widget umfasst die Felder für Name und E-Mail sowie die Links zum Anmelden und Registrieren. Die Registerkarte Inhalt enthält Vorschau als Gast, Kontor Ausrichtung und eine Option Einzelzeilenname, die Vor- und Nachname in eine Zeile setzt.
Das Widget für Zahlungsinformationen
Dieses Widget umfasst den Zahlungsbereich. Die Registerkarte Stil gruppiert die Steuerelemente in Kaufschaltfläche, Zahlungsart-Auswahl, Zahlungsmethode und Kartendetails, sodass die Schaltfläche, auf die Ihre Kunden klicken, eigenständig gestaltet werden kann.
Das Rabattformular-Widget
Das Rabattformular hat eine einzige Inhaltseinstellung, Rabattfeld anzeigen, und eine tiefgreifende Stil-Registerkarte, die den Umschaltlink, das Feld selbst und die Schaltfläche zum Anwenden abdeckt.
Anordnung Ihres Checkouts
Da jeder Teil des Checkouts ein eigenes Widget ist, können Sie die Reihenfolge ändern, in der die Dinge erscheinen. Wählen Sie ein Widget aus, öffnen Sie die Registerkarte Erweitert und dann Layout. Die Steuerung Reihenfolge verschiebt dieses Element an den Anfang oder das Ende seines Containers, und eine benutzerdefinierte Option ermöglicht die Festlegung einer genauen Position.
Der schnellste Weg, das gewünschte Teil auszuwählen, ist das Struktur-Panel von Elementor, das jedes Element auf der Seite auflistet. Die Auswahl eines Elements dort hebt es auf der Leinwand hervor und lädt seine Einstellungen.
Wenn Sie mit dem Ergebnis zufrieden sind, wählen Sie den Pfeil neben Veröffentlichen und wählen Sie dann Entwurf speichern, Als Vorlage speichern oder Seite anzeigen. Wählen Sie Veröffentlichen selbst, um Ihre Änderungen live zu schalten.
Fehlerbehebung
Wenn Sie den EDD Checkout-Block oder die oben beschriebenen Widget-Einstellungen nicht sehen, gibt es ein paar Optionen, die Sie ausprobieren können.
Die erste besteht darin, zu überprüfen, ob das Flexbox Container-Experiment von Elementor aktiviert ist. Gehen Sie zu Elementor » Editor » Einstellungen » Funktionen und stellen Sie sicher, dass die Option Container auf Aktiv gesetzt ist.
Stellen Sie außerdem sicher, dass Ihr Easy Digital Downloads-Plugin auf dem neuesten Stand ist. Überprüfen Sie unter Dashboard » Updates auf Updates.
Die einzelnen Checkout-Widgets und der Layout-Selektor benötigen Easy Digital Downloads 3.7.0 oder höher. Die eigenen Widgets von Elementor benötigen Elementor 3.35.0 oder höher. Andernfalls sehen Sie möglicherweise ein Widget namens EDD Checkout (Legacy). Es funktioniert weiterhin und seine Einstellungen befinden sich zusammen in einem Widget, anstatt über die vier oben beschriebenen aufgeteilt zu sein. Fügen Sie das aktuelle EDD Checkout -Widget zu einer Seite hinzu, um zu den neueren Einstellungen zu wechseln.
Für alles, was sich auf die eigenen Steuerelemente von Elementor bezieht, behandelt die Widget-Wissensdatenbank von Elementor diese im Detail.
FAQs: Anpassen von EDD Checkout mit Elementor
Hier finden Sie Antworten auf einige häufig gestellte Fragen zur Anpassung des EDD-Checkouts in Elementor.
Benötige ich die kostenpflichtige Version von Elementor?
Nein. Das kostenlose Elementor-Plugin reicht für das EDD Checkout-Widget und alle hier behandelten Einstellungen aus.
Warum finde ich das Warenkorb- oder Rabattformular nicht im Elementenfeld?
Diese vier Widgets werden nicht von Hand hinzugefügt. Sie sind Teil des EDD Checkout-Widgets, sodass Sie deren Einstellungen erreichen, indem Sie sie auf der Seite auswählen, anstatt sie hineinzuziehen.
Wird der Wechsel des Checkout-Layouts meine Formatierung rückgängig machen?
Das kann er. Elementor warnt, dass der Wechsel des Layouts den gesamten Widget-Inhalt ersetzt. Wählen Sie also zuerst Ihr Layout aus und formatieren Sie es danach.
Kann ich die Reihenfolge der Checkout-Abschnitte ändern?
Ja. Wählen Sie das Widget aus, das Sie verschieben möchten, und verwenden Sie dann die Steuerung „Reihenfolge“ auf der Registerkarte „Erweitert“ unter „Layout“.
Funktioniert der Checkout auch ohne Elementor?
Ja. Der EDD Checkout-Block verwaltet Ihren Checkout eigenständig, und seine Einstellungen sind für jeden Benutzer verfügbar. Elementor fügt Designkontrolle hinzu.
