So passen Sie die Checkout-Seite in Ihrem WooCommerce-Shop an

Wenn Sie die Checkout-Seite in Ihrem WooCommerce-Shop anpassen möchten, müssen Sie die folgenden Schritte ausführen: 1. Melden Sie sich bei Ihrer WordPress-Website an. 2. Gehen Sie zu Plugins > Neu hinzufügen. 3. Suchen Sie nach den benutzerdefinierten Checkout-Feldern von WooCommerce . 4. Installieren und aktivieren Sie das Plugin. 5. Gehen Sie zu WooCommerce > Checkout-Felder. 6. Hier können Sie Felder hinzufügen, bearbeiten oder löschen. 7. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern. Das ist es. Sie haben die Checkout-Seite in Ihrem WooCommerce-Shop erfolgreich angepasst.

Eine Checkout-Seite ist einer der wichtigsten Schritte beim Abschluss eines Einkaufs in einem Online-Shop. Sowohl Plugins als auch programmgesteuert können verwendet werden, um die Checkout-Seite von WooCommerce zu bearbeiten. In dieser Anleitung gehen wir darauf ein, wie Sie Ihre Checkout-Seite auf beide Arten bearbeiten können. Mit WooCommerce Checkout Manager können Sie Felder wie Vor- und Nachname, Firmenname, Land, Stadt, Postleitzahl, Adresse, Telefonnummer, E-Mail-Adresse und andere hinzufügen oder ausblenden. Sie können auch die Checkout-Seite von WooCommerce ändern, damit Kunden jede Art von Datei während des Checkout-Prozesses hochladen können. Wenn Sie eine Checkout-Seite im WooCommerce Checkout Manager bearbeiten möchten, ist dies eine einfache Lösung. Sie können unbegrenzt benutzerdefinierte Felder erstellen und gleichzeitig so viele Bedingungen anwenden, wie Sie möchten.

In diesem Abschnitt erfahren Sie, wie Sie die Checkout-Seite von WooCommerce mithilfe von Codierung bearbeiten. Mit WooCommerce können Sie der Checkout-Seite Ihrer Website Inhalte hinzufügen. Dazu müssen Sie in der Lage sein, die Werte der benutzerdefinierten Felder aus der Datenbank abzurufen. Sie können die Felder auch optional machen, um die Seite zu bearbeiten. Durch das Hinzufügen von Bedingungsfeldern zu anderen Feldern können diese basierend auf ihren Werten angezeigt oder ausgeblendet werden. Sie können Ihrer Checkout-Seite auf zwei Arten eine zusätzliche Gebühr hinzufügen. Sie können Ihrem Konto auch eine feste oder prozentuale Gebühr hinzufügen.

Es kann von Vorteil sein, wenn die Zahlungsgateways nicht vollständig belastet werden oder wenn zusätzliche Steuern erhoben werden. Weitere Informationen zum Hinzufügen von Gebühren zu Ihrem Shop finden Sie in unserem Leitfaden. Sie können die Checkout-Seite Ihres Shops ganz einfach mit Hilfe von WordPress, WooCommerce oder benutzerdefinierten Shortcodes bearbeiten. Eine Reihe anderer Optionen kann auch verwendet werden, um den Stil der WooCommerce-Checkout-Seite zu ändern. Die Hintergrundfarbe einer Seite kann auch so geändert werden, dass sie einen benutzerdefinierten CSS-Stil enthält. Um diese Seite zu bearbeiten, können Sie eine Vielzahl von Checkout-Hooks in WooCommerce verwenden. Bereits geringfügige Änderungen können die Konversionsrate und den Umsatz steigern. Wir haben Ihnen in unserem vorherigen Beispiel fünf verschiedene Möglichkeiten gezeigt, verschiedene Aspekte des Checkouts zu bearbeiten, aber es gibt unendlich viele Möglichkeiten. Wenn Sie den Checkout-Prozess verkürzen möchten, empfehlen wir die Verwendung eines Schnellkauf-Plugins für WooCommerce oder direkte Checkout-Links.

Diese Vorlagen und Checkout-Abschnitte befinden sich im WooCommerce-Plugin-Ordner. Der Ordner Woocommerce/templates/checkout befindet sich im Ordner des Themes, und Sie können die Vorlagen kopieren, die Sie verwenden möchten.

Können wir die Woocommerce Checkout-Seite anpassen?

Der einfachste Weg, Checkout-Felder anzupassen, ist die Verwendung des Checkout Field Editor-Plugins. Dieses Plugin macht es einfach, Checkout-Felder zu verschieben, zu bearbeiten, hinzuzufügen oder zu entfernen, indem es eine einfache Benutzeroberfläche dafür bereitstellt. Alle Felder, vom Typ über die Beschriftung bis hin zur Position, können bearbeitet werden.

Sie zeigen Ihren Kunden eine Checkout-Seite an, sobald sie sich für eine WordPress-Site anmelden. Der Checkout-Prozess muss in Ordnung sein, wenn Sie möchten, dass sich Ihre Conversion-Raten dramatisch verbessern. WordPress bietet zwei einfache Möglichkeiten, eine WooCommerce-Checkout-Seite anzupassen. Der Inhalt beider Lösungen ist vollständig in einem leistungsstarken Website-Builder geschrieben. Ihr erster Schritt, um ein SeedProd-Kunde zu werden, besteht darin, eine unserer 150 professionell gestalteten Zielseitenvorlagen zu verwenden. Jede Vorlage kann dann im visuellen Editor mit flexiblen Seitenblöcken wie den folgenden angepasst werden: Darüber hinaus verfügt SeedProd über WooCommerce-Landingpage-Blöcke, die Schaltflächen zum Hinzufügen zum Warenkorb, Checkout-Schaltflächen, Warenkorbraster und Produktbeschreibungen enthalten. Mit SeedProd zeigen wir Ihnen, wie Sie Ihre WooCommerce-Checkout-Seite von Grund auf neu erstellen und anpassen.

In dieser Lektion zeigen wir Ihnen, wie Sie dies mit der leeren Vorlage, einem Drag-and-Drop-Editor, tun. Der erste Schritt besteht darin, eine grundlegende Checkout-Seitenstruktur zu erstellen. Klicken Sie danach auf den Checkout-Block und ziehen Sie ihn in eine der Spalten. Klicken Sie im Blockbereich auf Abschnitte, um die Abschnitte anzuzeigen. Sie können Ihrer Seite schnell und einfach mehrere vorgefertigte Layouts hinzufügen, indem Sie hier auf ein einzelnes Bild klicken. Jeder neue Abschnitt auf Ihrer Seite wird normalerweise unten hinzugefügt. Bewegen Sie die Maus über den Abschnitt, in den Sie ihn verschieben möchten, und klicken Sie dann auf das Symbol zum Verschieben des Abschnitts.

Wenn SeedProd eine WooCommerce-Checkout-Seite erstellt, kann diese global angepasst werden. Sie können die Schriftarten, Farben, den Hintergrund und das benutzerdefinierte CSS ändern, damit Ihre Checkout-Seite ein wenig anders aussieht. Es ist einfach, Ihre Zielseite mit Ihrer E-Mail-Liste zu verknüpfen, wenn Sie E-Mail-Marketing-Einstellungen verwenden. Sie können Recaptcha verwenden, um zu verhindern, dass Spam die Leistung Ihrer Website beeinträchtigt, sowie Google Analytics, um die Leistung Ihrer Website zu überwachen. Wenn Sie den Pro Plan von SeedProd verwenden, können Sie jeder Zielseite eine benutzerdefinierte Domain zuweisen, die nicht an Ihre bestehende Website gebunden ist. Der Isolationsmodus deaktiviert bestimmte Header- und Footer-Skripte und schränkt damit die Seitenleistung ein. Wenn Sie eine auf Mobilgeräte reagierende Checkout-Seite haben, wird Ihre Website auf kleineren Touchscreens wie Tablets und Smartphones besser funktionieren.

Sie müssen zuerst die standardmäßige Checkout-Seite Ihrer WooCommerce-Website erstellen, um sie verwenden zu können. Eine Seedprod-Website enthält auch den integrierten WooCommerce-Theme-Builder und Website-Kits, was sie zu einer idealen Wahl für die Erstellung vollständiger WooCommerce-Websites macht. Die Verwendung einer der oben aufgeführten Methoden kann Ihnen dabei helfen, Ihre WooCommerce-Checkout-Seite für Conversion-Conversions zu optimieren. Kunden können eine Online-Kaufabwicklung abbrechen, wenn Ihr Geschäft nur wenige Zahlungsoptionen zulässt. Stellen Sie zur Bekämpfung dieses Problems sicher, dass Ihre Preise klar sind, bevor Benutzer auf die Checkout-Seite gelangen. Die Abbruchrate beim Auschecken kann steigen, wenn der Kunde gezwungen ist, sich vor dem Auschecken für ein Konto zu registrieren.

Woocommerce Checkout-Seite bearbeiten Php

Um die Checkout-Seite von WooCommerce zu bearbeiten, müssen Sie auf die Seite mit den WooCommerce-Einstellungen zugreifen und auf die Registerkarte Checkout klicken. Von hier aus können Sie die Option Checkout-Seite auswählen und auf die Schaltfläche Bearbeiten klicken. Dadurch wird die Checkout-Seite im WordPress-Editor geöffnet, auf der Sie Ihre Änderungen vornehmen können.

Das Anpassen Ihrer Checkout-Seite in WooCommerce erhöht Ihre Conversion-Rate. In 31 % der Fälle kann der Abbruch des Einkaufswagens durch die Optimierung der Checkout-Seite reduziert werden. Da die Checkout-Seite die letzte Hürde bei einem Kauf ist, ist es wichtig, dass sie so weit wie möglich optimiert wird. Kunden können ihre Bestellungen effizienter abschließen, wenn Ihr Checkout-Prozess optimiert ist. Laut der Studie des Baymard Institute sind auf der Checkout-Seite nur sechs bis acht Felder erforderlich. Auf der Standard-Checkout-Seite von WooCommerce müssen 18 bis 20 Felder ausgefüllt werden. Fehler mit Inline-Feldbezeichnungen können das Ausfüllen der Felder auf Ihrer Checkout-Seite erschweren.

Entfernen Sie am besten alle Inline-Beschriftungen und platzieren Sie diese über den Eingabefeldern. Benutzer werden ein optimiertes und übersichtliches Checkout-Erlebnis vorfinden, das auf ihren Mobilgeräten angenehm ist. Etwa 70 % der Kunden verlassen ihren Einkaufswagen aufgrund hoher Versandkosten, komplexer Checkout-Prozesse und anderer Faktoren. Eine Funktion zur Wiederherstellung verlassener Warenkörbe ist ein wichtiger Aspekt eines jeden WooCommerce-Shops. Sie erfahren, wie Sie das CartFlows-Plug-in verwenden, um Bestell-Bumps zur WooCommerce-Checkout-Seite hinzuzufügen. Sie müssen als Site-Administrator angemeldet sein, um auf CartFlows zugreifen zu können. Es gibt eine Reihe von Flow-Vorlagen, die auf diesem Bildschirm sichtbar sind.

Erstellen Sie Ihre eigene Vorlage oder wählen Sie eine bereits erstellte Vorlage aus. Sie können den Shortcode von der Registerkarte Einstellungen auf die Checkout-Seite kopieren. Die Checkout-Seite von WooCommerce hat 18 – 20 Felder, von denen einige nicht erforderlich sind, um eine Bestellung abzuschließen. Mit CartFlows können Sie Felder zu Ihrer Checkout-Seite hinzufügen oder entfernen. Die Felder können im Bereich „Checkout-Seiteneinstellungen“ geändert werden, indem Sie auf die Registerkarte „Checkout-Einstellungen“ klicken. Sie können einen Kunden dazu anregen, eine teurere Version des Produkts zu kaufen, das er in seinem Warenkorb hat, indem Sie es weiterverkaufen. Um ein Upsell-Angebot zu Ihrem Bezahlvorgang hinzuzufügen, gehen Sie zu Neuen Schritt hinzufügen und wählen Sie Neues Angebot hinzufügen aus.

Die Benachrichtigung informiert Sie darüber, dass keine zugeordneten Produkte vorhanden sind. Es wird empfohlen, das Feld aufzunehmen, wenn die Bestellung dringend ist. Wenn Sie einen Bezahlvorgang verwenden, gehen Sie zur Seite Neuen Schritt hinzufügen. Der Bestellvorgang wird durch diesen Schritt vereinfacht. Der nächste Schritt besteht darin, ein Produkt über den Link Bearbeiten in der Produktliste auszuwählen. Sie müssen den Preis des Produkts senken, bevor Sie einen Upsell durchführen können, was einem Upsell entspricht. Wenn Sie eine Bestellung abschließen, wird eine Checkout-Seite angezeigt, auf der Sie aufgefordert werden, Ihre Versand- und Rechnungsinformationen einzugeben.

Auf der Checkout-Seite können auch Aktionshaken verwendet werden, um Elemente zu entfernen. Benutzerdefinierter Code kann zu WordPress und WooCommerce hinzugefügt werden, indem vordefinierte Aktionen verwendet werden. Sie können die Felder auf einer Checkout-Seite mit Checkout Manager for WooCommerce, einem Freemium-Plugin, anpassen. Darüber hinaus enthält das Plugin eine spezielle Funktion, mit der bestimmte Benutzerrollen ein- oder ausgeblendet werden können. Wenn Sie nach einem Plugin suchen, mit dem Sie den Checkout-Prozess aufteilen können, können Sie WooCommerce Multi-Step Checkout ausprobieren. Sie können die Checkout-Seite Ihres WooCommerce-Shops mit dem WooCommerce Multi-Step Checkout-Plugin an Ihre spezifischen Bedürfnisse anpassen. Die Checkout-Seite ist in mehrere kleine Schritte unterteilt und enthält oben einen Fortschrittsbalken.

Im WordPress-Repository gibt es über 10.000 Installationen des Plugins, die ständig aktualisiert werden. Mit dem WooCommerce Menu Cart-Plugin können Sie der Navigationsleiste Ihrer WooCommerce-basierten Website eine Warenkorb-Schaltfläche hinzufügen. Mit dem YITH WooCommerce Ajax-Produktfilter können Benutzer angeben, welche Produktsuchbegriffe sie verwenden möchten. Benutzer können ihre Suche verfeinern und schneller finden, wonach sie suchen, was zu mehr Verkäufen führt.

Passen Sie das Woocommerce Checkout-Seiten-Plugin an

Mit einem guten Woocommerce Checkout-Seiten-Plugin können Sie den Checkout-Prozess an die Bedürfnisse Ihres Geschäfts anpassen. Sie können Dinge wie Layout, Farben und Schriftarten ändern und sogar Ihre eigenen benutzerdefinierten Felder hinzufügen. Dies kann den Checkout-Prozess viel schlanker und effizienter machen und kann auch dazu beitragen, den Abbruch des Einkaufswagens zu reduzieren.

Mit Elementor und ShopEngine können E-Commerce-Unternehmen jetzt WooCommerce- Checkout-Seiten an ihre spezifischen Bedürfnisse anpassen. Abhängig von Ihrem Unternehmenstyp sollten Sie die Checkout-Seite von WooCommerce ändern, um Ihren Kunden den Kauf von Artikeln zu erleichtern. Die Checkout-Seite ist der beste Ort, um Benutzerdaten zu sammeln, die Sie in Zukunft für Ihre Marketingstrategie benötigen. Um zu beginnen, müssen Sie zuerst Elementor und ShopEngine auf Ihrer WordPress WooCommerce-Site installieren. Die Drag-and-Drop-Bearbeitung ist mit ShopEngine einfach, sodass Sie die WooCommerce-Checkout-Seite ändern können. Jedes Element oder Layout kann beliebig konfiguriert werden, einschließlich des Hinzufügens von Widgets. Es ist kein benutzerdefinierter Code oder CSS erforderlich, um eine Checkout-Seitenvorlage zu erstellen.

Die Checkout-Seite sollte jetzt ungefähr 5 Schritte haben, wobei Fortschritt oder Schrittabschluss die beste Möglichkeit sind, die Schritte anzuzeigen. Wenn Sie es noch nicht wissen, sollte Ihr Kunde Ihnen sagen können, wie viele Schritte er oder sie gehen muss. Das Verlassen der Website durch einen Kunden ist in der Regel darauf zurückzuführen, dass er zum Abschließen der Zahlung zu einer anderen Seite wechselt. E-Commerce-Websites, die Upsells und Cross-Sells anbieten, sind einige der besten Optionen. Wenn Ihre Checkout-Seite nicht für Mobilgeräte optimiert ist, verlieren Sie viele Kunden. ShopEngine ist das beste Plugin zum Anpassen Ihrer WooCommerce-Checkout-Seite.

Wie passe ich ein Woocommerce-Plugin an?

Sie müssen ein neues Verzeichnis in Ihrem untergeordneten Design erstellen, wenn Sie eine benutzerdefinierte Datei erstellen möchten. Sie müssen es in den WP-Content/themes/yourthemename/ Ihres Themas aufnehmen. Ihre Änderungen an WooCommerce oder Ihrem Parent-Theme werden nach Ihrem WooCommerce-Update nicht gelöscht.

Woocommerce Checkout-Seitenvorlage

Eine WooCommerce-Checkout-Seitenvorlage ist ein vorgefertigtes Layout, mit dem Sie eine benutzerdefinierte Checkout-Seite für Ihren Online-Shop erstellen können. Diese Vorlage kann verwendet werden, um das Erscheinungsbild Ihrer Checkout-Seite zu ändern sowie Funktionen hinzuzufügen oder zu entfernen.

Ein einzelnes Produkt in WooCommerce One Page Checkout kann mit einer Produktauswahl und einem Checkout-Formular angezeigt werden. Sobald ein Kunde eine Bestellung aufgegeben hat, kann er Produkte hinzufügen oder entfernen und die Zahlung abschließen, ohne die Seite zu verlassen. Darüber hinaus können Sie den Shortcode [woocommerce_one_page_checkout] zu jeder Seite, jedem Beitrag oder benutzerdefinierten Beitragstyp hinzufügen. Wenn Sie Produkte in bestimmten Kategorien anzeigen möchten, verwenden Sie das Attribut category_ids. Die anderen Produkte werden trotzdem angezeigt, wenn eine oder mehrere der im Attribut definierten Produkt-IDs ungültig sind. Möglicherweise möchten Sie keine Produkte anzeigen, wenn Sie eine Schaltfläche zum Hinzufügen zum Warenkorb außerhalb von One Page Checkout verwenden. Die Vorlage „Produktliste“ zeigt eine Liste von Produkten mit einem Optionsfeld an, mit dem Benutzer eine Option aus einer Liste von Produkten auswählen können.

Das Bild eines Produkts kann beispielsweise als guter Anhaltspunkt für die Auswahl einer Maske verwendet werden, und diese Vorlage eignet sich ideal zum Anzeigen von Artikeln, die Ihnen bei der Entscheidungsfindung helfen. Eine Einzelproduktvorlage kann trotz ihres Namens zwei oder mehr Produkte anzeigen. Die integrierte Preistabelle zeigt Produkte in zwei bis fünf Spalten an, wobei der Produkttitel, der Preis und die Bestellmenge oben angezeigt werden. Wenn die Produkte mit demselben Gewicht oder denselben Abmessungen versendet werden, werden sie oben in der Tabelle angezeigt. Taxonomieattribute und benutzerdefinierte Produktattribute werden zusätzlich zu den Taxonomieattributen in der Preistabelle angezeigt. Es ist notwendig, eine WooCommerce-Preistabelle zu erstellen, indem Sie den Anweisungen von Patrick Rauland folgen. Die URL jeder Schaltfläche sollte die folgenden Informationen enthalten: *Produkt-ID *add-to-cart=*Produkt-ID Die Easy Pricing Table-Produktauswahlvorlage gibt an, dass der Vorlagen-Shortcode-Parameter „easy_pricing_table“ festgelegt werden sollte.

Die Variable $products enthält alle Elemente, die ein Produktobjekt darstellen, sowie die Variable $product. One Page Checkout enthält eine Schaltfläche, eine Optionsschaltfläche, eine Kontrollkästchenschaltfläche und eine Zahlenschaltfläche zusätzlich zu einer Schaltfläche, einer Optionsschaltfläche, einer Kontrollkästchenschaltfläche und einer Zahlenschaltfläche. Damit Sie ein benutzerdefiniertes Produktauswahlfeld erstellen können, müssen Sie ein data-add_to_cart-Attribut in Ihre Vorlage aufnehmen. Produktauswahlfelder werden im Bereich WooCommerce One Page Checkout mit einer benutzerdefinierten Vorlage angezeigt. Wenn Sie eine große Anzahl von Anfragen haben, priorisieren Sie das Hinzufügen von Support. Es ist nicht möglich, das automatische Scrollen (Neufokussieren) zu deaktivieren, das auftritt, wenn ein Produkt zum Warenkorb hinzugefügt wird, aber es ist möglich, dies über das Einstellungsmenü zu tun. Mit dem One Page Checkout-Shortcode können Sie die Checkout-Felder zu jeder Seite oder jedem Post auf jeder Seite oder jedem Post hinzufügen.

Sie können Felder mit einer WooCommerce-Erweiterung wie dem Checkout Field Editor oder einer benutzerdefinierten Checkout-Vorlage hinzufügen oder entfernen. Jedes einzelne untergeordnete Produkt in einem Produktbehälter wird durch ein eigenes Etikett getrennt. Variable Produkte mit Variationen werden nur angezeigt, wenn sie in einem anderen Shortcode als der Einzelproduktvorlage verwendet werden. Diese Vorlagen erlauben nur die Anzeige von Variationen, die einen Wert für alle Attribute haben. Der Kunde muss die Auswahl treffen, da eine Variation mit einem Attributwert, der einen nicht festgelegten Wert hat, keine entsprechende Variations-ID hat. Der One Page Checkout-Shortcode zeigt sowohl eine Quittung als auch eine Kaufbestätigung an. Mit Links zu Ihrer benutzerdefinierten Checkout-Seite können Sie alle Links in Ihren Menüs oder an anderer Stelle auf Ihrer Website ersetzen.

Fügen Sie den Shortcode zu der Seite hinzu, auf der Sie das Produkt mit dem Warenkorb verknüpfen möchten, um dies zu tun. Kunden können mit One Page Checkout von anderen Seiten zur Kasse gehen, aber WooCommerce zeigt auf seiner Checkout-Seite immer noch Quittungs- und Bestellbestätigungsinformationen an. Alle WooCommerce-Seiten sind weiterhin erforderlich, um Ihren Shop zu betreiben, einschließlich der Warenkorb- und Checkout-Seiten. Stellen Sie sicher, dass die Sichtbarkeit Ihrer Produkte im Katalog nicht ausgeblendet wird. Der Inhalt der Seite muss in einer Vielzahl von Skripten und Stilen in die Warteschlange gestellt werden, bevor er in den One Page Checkout gestellt wird. Über die Elemente der Funkeingabe kann eine der beiden Easy Pricing Tables ausgewählt werden, die die Optionen enthalten. Es zeigt an, dass der Warenkorb derzeit gefüllt ist, bevor neue Artikel aus der Easy Pricing-Tabelle oder einer Funkeingabe hinzugefügt werden. Um diese Änderung vorzunehmen, verwenden Sie ein kostenloses Plugin namens WooCommerce One Page Checkout – Do Not Empty Cart.