Aber mit dem neuen Checkout-Widget in Elementor Pro<\/a> k\u00f6nnen Sie nun Ihre Checkout-Seite vollst\u00e4ndig mittels Elementors visueller Schnittstelle und codefreier Optionen anpassen. Dieses Widget funktioniert in Verbindung mit den Elementor-Widgets f\u00fcr Warenkorb<\/a> und Benutzerkonto<\/a>, um Ihnen bei der Gestaltung aller wichtigen Seiten Ihres Shops zu helfen.<\/p>\n\n In diesem Tutorial werden Sie lernen, wie Sie das Elementor<\/a> Pro Checkout-Widget verwenden, um die Checkout-Seite Ihres Shops anzupassen und zu optimieren, ohne Elementor verlassen zu m\u00fcssen.<\/p>\n\n Anschlie\u00dfend werden wir auch einige zus\u00e4tzliche Tipps zur Verwendung von WooCommerce-Action-Hooks teilen, um die Checkout-Seite weiter anzupassen. <\/p>\n\n W\u00e4hrend Sie bei der Verwendung des Elementor Pro Checkout-Widgets keinen Code ben\u00f6tigen, k\u00f6nnen diese Action-Hooks n\u00fctzlich sein, wenn Sie benutzerdefinierte Inhalte zu Ihrer Checkout-Seite hinzuf\u00fcgen m\u00f6chten, wie beispielsweise eine Reihe von Vertrauensabzeichen, die unter den Kreditkartenfeldern erscheinen.<\/p>\n\n Wenn Sie ein Video-Tutorial bevorzugen, k\u00f6nnen Sie sich das obige Video ansehen, das erkl\u00e4rt, wie man das Elementor Checkout-Widget verwendet. <\/p>\n\n Andernfalls lesen Sie weiter f\u00fcr das vollst\u00e4ndige textbasierte Tutorial, das dem Video parallel l\u00e4uft, sowie einige zus\u00e4tzliche Tipps zur Verwendung von WooCommerce-Action-Hooks, die wir im Video nicht behandelt haben.<\/p>\n\n Die WooCommerce-Checkout-Seite ist die Seite, auf der K\u00e4ufer ihre Bestellungen abschlie\u00dfen, indem sie ihre Adressen, Kontaktdaten, Zahlungsinformationen und so weiter eingeben.<\/p>\n\n Es ist eine essentielle Seite f\u00fcr jeden Shop, daher ist es wichtig, dass Sie sie f\u00fcr Conversions optimieren und so benutzerfreundlich wie m\u00f6glich gestalten.<\/p>\n\n Mit dem Elementor Checkout-Widget k\u00f6nnen Sie die Checkout-Seite Ihres Shops direkt in Elementor vollst\u00e4ndig anpassen. Dies hilft Ihnen, ein konsistentes Design mit dem Rest Ihres Shops zu erstellen und wichtige Details auf Ihrer Seite zu optimieren.<\/p>\n\n Sie k\u00f6nnen Farben und Typografie<\/a> \u00e4ndern, Abst\u00e4nde anpassen, Abschnitts- und Formulartext \u00e4ndern und vieles mehr. Sie k\u00f6nnen \u00c4nderungen f\u00fcr den gesamten Checkout vornehmen oder granulare Optionen aktivieren, um verschiedene Stile auf bestimmte Teile Ihres Checkouts anzuwenden.<\/p>\n\n Wenn Sie beispielsweise die Aufmerksamkeit auf das Gutscheinfeld lenken m\u00f6chten, k\u00f6nnen Sie spezielle Farben, einen Rahmen und so weiter hinzuf\u00fcgen – alles ohne Code erforderlich.<\/p>\n\n Lassen Sie uns nun in eine detaillierte Anleitung \u00fcbergehen, wie Sie das Checkout-Widget in Elementor Pro<\/a> verwenden k\u00f6nnen, um die Checkout-Seite Ihres Shops anzupassen.<\/p>\n\n Abermals, falls Sie es vorziehen, dieses Tutorial im Videoformat anzusehen, k\u00f6nnen Sie es oben betrachten. Beide Tutorials beinhalten dieselben Informationen.<\/p>\n\n Wenn Sie einen WooCommerce-Shop erstellen<\/a>, generiert WooCommerce automatisch eine Kassenseite f\u00fcr Ihren Shop, die den WooCommerce-Kassen-Shortcode<\/a> verwendet.<\/p>\n\n In diesem Tutorial k\u00f6nnen 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\u00fcgen.<\/p>\n\n Um zu beginnen, navigieren Sie zur Seiten<\/strong>-Liste in Ihrem WordPress-Dashboard und lokalisieren Sie die Kassenseite. WooCommerce wird diese automatisch mit einem Identifikator kennzeichnen, der „Kassenseite“ lautet.<\/p>\n\n Sobald Sie die korrekte Seite gefunden haben, klicken Sie auf die Schaltfl\u00e4che Bearbeiten<\/strong>, um den WordPress-Editor zu \u00f6ffnen. <\/p>\n\n Sobald Sie sich im Editor befinden, klicken Sie auf die Schaltfl\u00e4che Mit Elementor bearbeiten<\/strong>, um Elementor f\u00fcr diese Seite zu aktivieren und Elementors Editor zu starten.<\/p>\n\n Wenn Sie die Standard-Warenkorbseite in Elementor \u00f6ffnen, sollten Sie ein sehr einfaches Design sehen. Die einzigen Elemente auf der Seite werden der [woocommerce_checkout] Shortcode innerhalb eines Elementor-Texteditor-Widgets sein.<\/p>\n\n Um Elementor zur Steuerung Ihrer Kasse zu verwenden, sollten Sie zun\u00e4chst das vorhandene Widget\/den Shortcode l\u00f6schen:<\/p>\n\n F\u00fcgen Sie dann an dessen Stelle das Elementor-Kassen-Widget hinzu. Sobald Sie das Kassen-Widget hinzuf\u00fcgen, sehen Sie eine Live-Vorschau der Kassenseite direkt im Editor.<\/p>\n\n Hinweis<\/strong> – 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\u00f6nnen, wie der tats\u00e4chliche Kassenprozess aussieht. Hier ist alles, was Sie tun m\u00fcssen:<\/p>\n\n Sobald Sie Elementor neu geladen haben, sollten diese Artikel in der Kassenzusammenfassung erscheinen, w\u00e4hrend Sie an Ihrem Design arbeiten.<\/p>\n\n Nun ist es an der Zeit, mit der Anpassung zu beginnen.<\/p>\n\n \u00d6ffnen Sie zun\u00e4chst die Einstellungen f\u00fcr das Kassen-Widget in der Elementor-Seitenleiste.<\/p>\n\n Lassen Sie uns zuerst alle Einstellungen im Inhalt-Tab des Widgets durchgehen.<\/p>\n\n Zun\u00e4chst k\u00f6nnen Sie im Bereich Allgemein<\/strong> zwischen einem einspaltigem oder zweispaltigem Layout f\u00fcr Ihre Kassenseite w\u00e4hlen.<\/p>\n\n Wenn Sie ein zweispaltiges Layout w\u00e4hlen, k\u00f6nnen Sie die rechte Spalte auch als fixiert einstellen. Wenn Sie die fixierte rechte Spalte aktivieren, erhalten Sie eine zus\u00e4tzliche Option, um einen Versatz hinzuzuf\u00fcgen, der verhindert, dass Ihr Header die Spalte \u00fcberlappt.<\/p>\n\n Der Abschnitt Rechnungs- und Versanddetails<\/strong> erm\u00f6glicht es Ihnen, die Rechnungs- und Versandformulardetails anzupassen.<\/p>\n\n Sie werden diese Felder zusammen sehen, wenn Sie in den WooCommerce-Einstellungen festgelegt haben, dass die Rechnungs- und Versanddetails identisch sein sollen. Sie k\u00f6nnen dies aktivieren, indem Sie zu WooCommerce \u2192 Einstellungen \u2192 Versand<\/strong> gehen und Versand an die Rechnungsadresse des Kunden erzwingen<\/strong> ausw\u00e4hlen. Andernfalls werden Sie sie getrennt sehen.<\/p>\n\n Zun\u00e4chst k\u00f6nnen Sie den Abschnittstitel und die Ausrichtung f\u00fcr diesen Bereich festlegen.<\/p>\n\n Dann k\u00f6nnen Sie die Einstellungen f\u00fcr jedes einzelne Feld \u00f6ffnen, um die Beschriftungen und Platzhalter anzupassen.<\/p>\n\n Der Abschnitt Zus\u00e4tzliche Informationen<\/strong> erm\u00f6glicht es Ihnen, diesen Bereich der Kassenseite anzupassen. Standardm\u00e4\u00dfig ist dies der Ort, an dem Kunden spezielle Bestellhinweise hinterlassen k\u00f6nnen, obwohl Sie je nach Einrichtung Ihres Shops m\u00f6glicherweise zus\u00e4tzliche Details sehen.<\/p>\n\n Wie bei den anderen Abschnitten Ihrer Kassenseite k\u00f6nnen Sie die Ausrichtung und Beschriftungen dieses Abschnitts anpassen.<\/p>\n\n Alternativ haben Sie auch die Option, diesen Abschnitt von der Kassenseite auszublenden, was n\u00fctzlich sein k\u00f6nnte, wenn Kunden keine benutzerdefinierten Hinweise hinterlassen m\u00fcssen.<\/p>\n\n Die Einstellungen Ihre Bestellung<\/strong> erm\u00f6glichen es Ihnen, den Bestell\u00fcbersichtsteil 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.<\/p>\n\n Die Gutschein<\/strong>-Einstellungen erm\u00f6glichen Ihnen zudem, den Titel und die Ausrichtung des Gutschein-Bereichs individuell anzupassen. Dar\u00fcber hinaus haben Sie die Option, den Linktext f\u00fcr die Anwendung des Gutscheincodes anzupassen. Dies kann Ihnen dabei helfen, eine optimierte und benutzerfreundlichere Erfahrung f\u00fcr Kunden zu schaffen, die Gutscheine einl\u00f6sen m\u00f6chten.<\/p>\n\n Die Zahlungs<\/strong>-Einstellungen erm\u00f6glichen es Ihnen, die Ausrichtung der Kaufschaltfl\u00e4che zu \u00e4ndern sowie die Nachricht zu den Allgemeinen Gesch\u00e4ftsbedingungen und den entsprechenden Linktext anzupassen.<\/p>\n\n Um die Nachricht zu den Allgemeinen Gesch\u00e4ftsbedingungen zu sehen, m\u00fcssen Sie zun\u00e4chst die entsprechende Seite in Ihren WooCommerce-Einstellungen festgelegt haben. Zur Vereinfachung k\u00f6nnen Sie diese Seite ausw\u00e4hlen, ohne Elementor zu verlassen:<\/p>\n\n Wenn Sie in den WooCommerce-Einstellungen Gastk\u00e4ufe zulassen, erhalten Sie einen zus\u00e4tzlichen Einstellungsbereich namens Wiederkehrender Kunde<\/strong>, in dem Sie die Nachricht anpassen k\u00f6nnen, die wiederkehrende Kunden auffordert, sich in ihre bestehenden Konten einzuloggen.<\/p>\n\n Als N\u00e4chstes k\u00f6nnen Sie zum Reiter Stil<\/strong> 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.<\/p>\n\n Hier sind die allgemeinen Designoptionen, die Sie in den verschiedenen Einstellungsbereichen konfigurieren k\u00f6nnen…<\/p>\n\n In den Abschnitte<\/strong>-Einstellungen k\u00f6nnen Sie den gesamten Stil aller verschiedenen Checkout-Bereiche steuern. <\/p>\n\n Wenn Sie beispielsweise die Hintergrundfarbe \u00e4ndern, wirkt sich dies auf den Hintergrund aller Abschnitte aus. Sie k\u00f6nnen auch den Rahmen und den Abstand nach Bedarf anpassen.<\/p>\n\n In den Typografie<\/strong>-Einstellungen k\u00f6nnen Sie die Farben und Typografie der meisten Texte auf Ihrer Checkout-Seite anpassen, einschlie\u00dflich \u00dcberschriften, Untertitel, Beschreibungen, Nachrichten, Radiobuttons, Checkboxen und mehr.<\/p>\n\n Der einzige Typografiebereich, den Sie hier nicht anpassen k\u00f6nnen, sind Ihre Formulare, was Sie im n\u00e4chsten Abschnitt tun werden.<\/p>\n\n In den Formulare<\/strong>-Einstellungen k\u00f6nnen Sie alles an den Formularen und Formularfeldern Ihrer Checkout-Seite steuern, was sich haupts\u00e4chlich auf die Rechnungs-\/Versandfelder und das Gutscheinformular auswirkt.<\/p>\n\n Sie k\u00f6nnen den Spalten- und Zeilenabstand f\u00fcr die verschiedenen Formularfelder anpassen. Sie k\u00f6nnen auch die Typografie von Beschriftungen und Feldern anpassen sowie Abst\u00e4nde, Rahmen und Hintergr\u00fcnde einstellen. <\/p>\n\n Dar\u00fcber hinaus haben Sie die M\u00f6glichkeit, die Gutschein-Schaltfl\u00e4che zu gestalten, genau wie jede andere Schaltfl\u00e4che auf Ihrer Website.<\/p>\n\n In Bestell\u00fcbersicht<\/strong> k\u00f6nnen Sie die Zeilen steuern, was sich auf den Abstand in der Liste der Artikel im Warenkorb eines Kunden auswirkt.<\/p>\n\n Sie k\u00f6nnen auch die Farben und Typografie der verschiedenen \u00dcbersichtselemente steuern. Sie k\u00f6nnten beispielsweise eine Typografieeinstellung f\u00fcr die Artikel und eine andere f\u00fcr die Bestellsummen verwenden.<\/p>\n\n In den Kaufschaltfl\u00e4che<\/strong>-Einstellungen k\u00f6nnen Sie die Kaufschaltfl\u00e4che vollst\u00e4ndig anpassen, einschlie\u00dflich Typografie, Farben, Abst\u00e4nde, Rahmen und mehr.<\/p>\n\n Dies ist wahrscheinlich die wichtigste Schaltfl\u00e4che auf der Checkout-Seite, daher sollten Sie sicherstellen, dass sie Aufmerksamkeit erregt und zum Rest Ihres Designs passt.<\/p>\n\n Zuletzt erm\u00f6glicht Ihnen der Punkt Anpassen<\/strong>, individuelle Stilsteuerungen f\u00fcr spezifische Teile Ihrer Checkout-Seite hinzuzuf\u00fcgen. Sie k\u00f6nnen sie f\u00fcr die folgenden Bereiche hinzuf\u00fcgen:<\/p>\n\n Sie m\u00f6chten beispielsweise die Bestell\u00fcbersicht vom Rest der Checkout-Seite abheben, indem Sie einen benutzerdefinierten Rahmen hinzuf\u00fcgen. <\/p>\n\n Dies k\u00f6nnten Sie tun, indem Sie die Anpassungseinstellungen f\u00fcr den Bestell\u00fcbersichtsbereich aktivieren und sie nach Ihren Vorstellungen konfigurieren. <\/p>\n\n Nachdem Sie die Anpassung der Checkout-Seite f\u00fcr Desktop-Benutzer abgeschlossen haben, sollten Sie in den responsiven<\/a> Modus wechseln, um zu sehen, ob Anpassungen f\u00fcr mobile oder Tablet-Besucher erforderlich sind.<\/p>\n\n Wie bei allen Designs, die Sie mit Elementor erstellen, ist Ihr Checkout-Seitendesign standardm\u00e4\u00dfig responsiv. <\/p>\n\n Gleichwohl k\u00f6nnen Sie auch die mobilen Steuerungselemente von Elementor nutzen, um das Design bei Bedarf anzupassen. Sie m\u00fcssen lediglich nach dem Ger\u00e4tesymbol neben den Einstellungen Ausschau halten, die f\u00fcr verschiedene Ger\u00e4te modifiziert werden k\u00f6nnen.<\/p>\n\n Beispielsweise k\u00f6nnten Sie die Abst\u00e4nde zwischen verschiedenen Elementen f\u00fcr Ihr mobiles Design geringf\u00fcgig anpassen wollen.<\/p>\n\n Dieser letzte Schritt ist vollkommen fakultativ, jedoch ist es erw\u00e4hnenswert, dass Sie auch die zentralen WooCommerce-Seitenzuweisungen aus dem Elementor-Websiteeinstellungsbereich<\/a> steuern k\u00f6nnen.<\/p>\n\n Dies k\u00f6nnte n\u00fctzlich sein, wenn Sie eine neue Seite f\u00fcr Ihre Kassenseite erstellt haben, anstatt die von WooCommerce standardm\u00e4\u00dfig generierte Seite zu verwenden.<\/p>\n\n Sie k\u00f6nnen auf diese Optionen \u00fcber den WooCommerce<\/strong>-Reiter im regul\u00e4ren Websiteeinstellungsbereich zugreifen. Sie finden die WooCommerce-Option unter dem Abschnitt Einstellungen<\/strong>.<\/p>\n\n F\u00fcr zus\u00e4tzliche Anpassungen der WooCommerce-Kassenseite k\u00f6nnen Sie Code verwenden und die zahlreichen Checkout-Aktionshooks von WooCommerce nutzen. <\/p>\n\n Dies kann besonders praktisch sein, wenn Sie der Kassenseite neue Inhalte hinzuf\u00fcgen m\u00f6chten, wie beispielsweise das Einf\u00fcgen von Vertrauenssiegeln unterhalb des Zahlungsbuttons.<\/p>\n\n Der Vorteil dieses Ansatzes ist, dass er weiterhin mit dem Elementor Checkout-Widget funktioniert, was ihn zu einer hervorragenden Erg\u00e4nzung zu Elementor f\u00fcr zus\u00e4tzliche \u00c4nderungen macht.<\/p>\n\n WordPress-Aktionshooks erm\u00f6glichen es Ihnen im Wesentlichen, mittels PHP Inhalte an verschiedenen Stellen der Kassenseite einzuf\u00fcgen. Sie k\u00f6nnten beispielsweise eine neue Textnachricht hinzuf\u00fcgen, ein Bild einf\u00fcgen (m\u00f6glicherweise ein Vertrauenssiegel) und so weiter.<\/p>\n\n Insgesamt bietet WooCommerce 16 verschiedene Aktionshooks f\u00fcr die Kassenseite.<\/p>\n\n Die ersten neun Hooks sind stets verf\u00fcgbar:<\/p>\n\n Die letzten sieben Hooks sind m\u00f6glicherweise verf\u00fcgbar oder auch nicht, abh\u00e4ngig von Ihren WooCommerce-Einstellungen. Wenn Sie beispielsweise die Registrierung auf der Kassenseite nicht aktiviert haben, k\u00f6nnen Sie den Aktionshook f\u00fcr das Registrierungsformular nicht verwenden:<\/p>\n\n Um zu verstehen, wo diese Hooks Inhalte zur Kassenseite hinzuf\u00fcgen, unterh\u00e4lt Business Bloomer einen exzellenten visuellen Leitfaden f\u00fcr jeden Standort<\/a>:<\/p>\n\n Um Inhalte mit einem Aktionshook einzuf\u00fcgen, m\u00fcssen Sie ein Code-Snippet zur functions.php<\/strong>-Datei Ihres Kindthemes<\/a> hinzuf\u00fcgen oder ein Plugin wie Code Snippets<\/a> verwenden. <\/p>\n\n Da Sie Code zu Ihrer Website hinzuf\u00fcgen werden, empfehlen wir dringend, ein Backup zu erstellen<\/a>, bevor Sie fortfahren, und\/oder die \u00c4nderungen zun\u00e4chst auf einer Staging-Site<\/a> zu testen.<\/p>\n\n W\u00e4hlen Sie zun\u00e4chst den Hook-Standort, an dem Sie Inhalte hinzuf\u00fcgen m\u00f6chten. <\/p>\n\n Angenommen, Sie m\u00f6chten eine Reihe von Vertrauenssiegeln unterhalb des „Jetzt kaufen“-Buttons hinzuf\u00fcgen. Daf\u00fcr w\u00fcrden Sie den woocommerce_review_order_after_submit<\/strong>-Hook verwenden.<\/p>\n\n Dann w\u00fcrden Sie ein Code-Snippet wie dieses hinzuf\u00fcgen:<\/p>\n\n add_action( ‚action_name‘, ‚your_function_name‘ );<\/p>\n\n function your_function_name() {<\/p>\n\n \/\/ Ihr Code<\/p>\n\n }<\/p>\n\n Um beispielsweise ein Vertrauenssiegel-Bild hinzuzuf\u00fcgen, k\u00f6nnte der Code so aussehen:<\/p>\n\n add_action( ‚woocommerce_review_order_after_submit‘, ‚display_trust_badges‘ );<\/p>\n\n function display_trust_badges() {<\/p>\n\n echo ‚ ;}<\/p>\n\n Unten k\u00f6nnen Sie sehen, dass die Vertrauenssiegel unterhalb des Bestellbuttons erscheinen, selbst w\u00e4hrend der Arbeit mit dem Checkout-Widget in der Elementor-Oberfl\u00e4che:<\/p>\n\n Bevor Sie die \u00c4nderungen an Ihrer Kassenseite live schalten, empfehlen wir dringend, alles zu testen, um sicherzustellen, dass keine Probleme auftreten. Schlie\u00dflich wird alles, was die Kassenseite Ihres Shops beeintr\u00e4chtigt, einen direkten negativen Einfluss auf Ihr Endergebnis haben.<\/p>\n\n Viele WooCommerce-Zahlungsmethoden beinhalten Testmodi, die Sie zur Einreichung von Bestellungen nutzen k\u00f6nnen. Dies trifft sowohl auf das offizielle Stripe-Gateway-Plugin<\/a> und das offizielle PayPal-Gateway-Plugin<\/a> zu, als auch auf WooCommerce Payments<\/a>. Alle Links im vorherigen Satz f\u00fchren Sie zur entsprechenden Dokumentationsseite f\u00fcr die Testfunktionalit\u00e4t des jeweiligen Gateways.<\/p>\n\n Alternativ k\u00f6nnen Sie auch das kostenlose WC Order Test Plugin<\/a> verwenden, welches ein neues „Order Test“ Zahlungs-Gateway hinzuf\u00fcgt. Sie k\u00f6nnen dieses Gateway einrichten, indem Sie zu WooCommerce \u2192 Einstellungen \u2192 Zahlungen<\/strong> navigieren.<\/p>\n\n Sobald Sie ein Test-Zahlungs-Gateway aktiviert haben, k\u00f6nnen Sie einige Testbestellungen aufgeben, um sicherzustellen, dass alle Checkout-Felder funktionieren und keine Ihrer Inhalts- oder Design\u00e4nderungen den Checkout-Prozess beeintr\u00e4chtigen.<\/p>\n\n Wir empfehlen, sowohl auf Desktop- als auch auf mobilen Ger\u00e4ten zu testen.<\/p>\n\n Mit dem Checkout-Widget in Elementor Pro k\u00f6nnen Sie nun die WooCommerce-Checkout-Seite vollst\u00e4ndig mit Elementors visuellem Drag-and-Drop-Design anpassen.<\/p>\n\n F\u00fcr die meisten Anwender wird Elementor ausreichend sein, da es Ihnen erm\u00f6glicht, Farben, Typografie, Text, Abst\u00e4nde, R\u00e4nder und mehr anzupassen.<\/p>\n\n Wenn Sie noch weiter gehen und neue Inhalte zu Ihrer Checkout-Seite hinzuf\u00fcgen m\u00f6chten, k\u00f6nnen Sie auch die in WooCommerce integrierten Action Hooks nutzen, die vollst\u00e4ndig mit dem Elementor Checkout-Widget kompatibel sind.<\/p>\n\n Das Beste daran ist, dass Elementor Sie nicht darauf beschr\u00e4nkt, nur die Checkout-Seite anzupassen.<\/p>\n\n Der Elementor WooCommerce Builder<\/a> kann Ihnen auch dabei helfen, andere Teile Ihres Shops mit Elementors visuellem Drag-and-Drop-Builder anzupassen. Sie k\u00f6nnen beispielsweise auch die WooCommerce-Warenkorbseite, die WooCommerce-Einzelproduktseite<\/a>, die WooCommerce-Mein-Konto-Seite und mehr anpassen.<\/p>\n\n Haben Sie noch Fragen zur Anpassung Ihrer WooCommerce-Checkout-Seite mit Elementor oder Action Hooks? Lassen Sie es uns in den Kommentaren wissen!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Mit dem neuen Checkout-Widget in Elementor Pro k\u00f6nnen Sie nun Ihre Checkout-Seite vollst\u00e4ndig mittels Elementors visueller Schnittstelle und codefreier Optionen anpassen. Dieses Widget funktioniert in Verbindung mit den Elementor-Widgets f\u00fcr Warenkorb und Benutzerkonto, um Ihnen bei der Gestaltung aller wichtigen Seiten Ihres Shops zu helfen. Erlernen Sie die schrittweise Anwendung.<\/p>\n","protected":false},"author":129304,"featured_media":117148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[291,367],"tags":[446],"marketing_persona":[47,51,50],"marketing_intent":[49],"class_list":["post-124574","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-de","category-woocommerce-de","tag-video"],"acf":[],"yoast_head":"\nInhaltsverzeichnis<\/h4>\n\n\n\n
Wie funktioniert das Elementor Pro Checkout-Widget?<\/h2>\n\n
Wie man die WooCommerce-Checkout-Seite mit Elementor anpasst<\/h2>\n\n
1. Bearbeiten Sie die Standardwarenkorb-Seite Ihres Shops in Elementor<\/h3>\n\n
2. Ersetzen Sie den WooCommerce-Kassen-Shortcode durch das Elementor-Kassen-Widget<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-1-delete-checkout-shortcode-1-1024x517.jpg\")
<\/figure>\n\n3. Passen Sie die allgemeinen Einstellungen Ihrer Kassenseite an<\/h3>\n\n
Allgemein – Einspalten- oder Zweispalten-Layout<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-2-column-layout-1024x516.jpg\")
<\/figure>\n\nRechnungs- und Versanddetails<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-3-billing-shipping-fields-1024x532.jpg\")
<\/figure>\n\nZus\u00e4tzliche Informationen<\/h4>\n\n
Ihre Bestellung<\/h4>\n\n
Gutschein<\/h4>\n\n
Zahlung<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-4-terms-and-conditions-1024x601.jpg\")
<\/figure>\n\nWiederkehrender Kunde<\/h4>\n\n
4. Passen Sie die Stileinstellungen Ihrer Checkout-Seite an<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-5-style-settings-1024x551.jpg\")
<\/figure>\n\nAbschnitte<\/h4>\n\n
Typografie<\/h4>\n\n
Formulare<\/h4>\n\n
Bestell\u00fcbersicht<\/h4>\n\n
Kaufschaltfl\u00e4che<\/h4>\n\n
Anpassen<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-6-order-summary-1024x508.jpg\")
<\/figure>\n\n5. Passen Sie Ihren Checkout f\u00fcr mobile K\u00e4ufer an<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-7-mobile-design-1024x662.jpg\")
<\/figure>\n\n6. Passen Sie bei Bedarf die WooCommerce-Seitenzuweisungen in den Websiteeinstellungen an<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-8-site-settings-1024x503.jpg\")
<\/figure>\n\nWie man die WooCommerce-Kassenseite mit Code anpasst<\/h2>\n\n
Was sind WooCommerce Checkout-Aktionshooks?<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-code-1-hook-locations-1024x998.png\")
<\/figure>\n\nWie man WooCommerce Checkout-Aktionshooks verwendet<\/h3>\n\n
![](\"trust-badges.png\"\/)
‚<\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/trust-badge-in-checkout-widget-1024x692.jpg\"){kind=icon}
<\/figure>\n\nWie man seine WooCommerce-Kassenseite testet<\/h2>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/woocommerce-order-test-gateway-for-checkout-page-1024x800.png\")
<\/figure>\n\nBeginnen Sie mit der Anpassung Ihrer WooCommerce-Seiten mit Elementor<\/h2>\n\n