Wie bearbeite ich eine WooCommerce Checkout-Seite? (Ratgeber für Anfänger)

Veröffentlicht: 2022-09-27

Letzte Woche habe ich versucht, ein Hemd in einem Online-Shop zu kaufen. Ich habe das Design, die Größe und die Farbe ausgewählt, die mir gefallen, und versucht, den Einkaufswagen zu leeren. Die Checkout-Seite war riesig und auf mehrere Seiten aufgeteilt. Jedes Mal, wenn ich dachte, ich wäre mit dem Prozess fertig, musste ich weitere Informationen eingeben. Nach 10 Minuten hatte ich die Nase voll und ging zu einer anderen Seite.

Obwohl dies möglicherweise nicht Ihre genaue Erfahrung ist, haben Sie wahrscheinlich einige Unannehmlichkeiten erlebt, die Sie davon abgehalten haben, ein Produkt online zu kaufen. Seien Sie versichert, Ihre Kunden werden es auch haben. Aus diesem Grund ist es für Ihre Verkäufe wichtig, ein großartiges Checkout-Erlebnis zu schaffen. Dieser Artikel enthält alles, was Sie über die Anpassung der WooCommerce-Checkout-Seite wissen müssen, um schneller, schneller und besser für Ihre Käufer zu sein.

TL;DR: Ihre gesamte WooCommerce-Seite ist mit Seitenerstellungs-Plugins wie SeedProd oder Elementor einfach anpassbar. Bevor Sie jedoch Änderungen an Ihrer Website vornehmen, empfehlen wir Ihnen, Ihre WordPress-Website mit BlogVault zu sichern. Die Echtzeit-Backups von BlogVault wurden speziell zum Schutz von WooCommerce-Sites entwickelt. Es macht Backup und Wiederherstellung mit nur wenigen Klicks einfach und stellt sicher, dass Ihre Website sicher ist, egal was passiert.

Inhalt verstecken
1 Wie sieht die standardmäßige Checkout-Seite von WooCommerce aus?
2 So passen Sie die WooCommerce-Checkout-Seite einfach mit Elementor an
3 So passen Sie das Design Ihrer Checkout-Seite mit dem integrierten Editor an
3.1 Text hinzufügen
3.2 Bilder hinzufügen
3.3 Schaltflächen hinzufügen
4 So passen Sie die Felder der Checkout-Seite an
4.1 Anpassen von Seitenfeldern mit einer Erweiterung
4.2 Seitenfelder mit Code anpassen
5 So ändern Sie das Layout der Checkout-Seite
5.1 Verwenden eines Snippet-Verwaltungs-Plugins
5.2 Manuelles Hinzufügen des Codes
6 Zusätzliche Plugins und Erweiterungen für Ihre Checkout-Seite
7 Warum sollten Sie Ihre WooCommerce-Checkout-Seite anpassen?
Die 8 besten Möglichkeiten, Ihre WooCommerce-Checkout-Seite anzupassen
9 Abschließende Gedanken
10 Häufig gestellte Fragen

Wie sieht die standardmäßige Checkout-Seite von WooCommerce aus?

Die standardmäßige Checkout-Seite von WooCommerce ist nicht schlecht; es ist einfach nicht toll. Es ist als generische Checkout-Seite konzipiert, die für eine Vielzahl von Produkten funktioniert. Während wir also darüber sprechen, wie man die Checkout-Seite von WooCommerce anpasst, werden wir die Standardseite sicherlich nicht zerstören. Es ist ein großartiger Ausgangspunkt, und wir empfehlen, es basierend auf Ihrem Wissen über Ihre Produkte, Ihre Kunden und deren Verhalten zu optimieren.

Öffnen Sie Ihre Website in einem Inkognito-Tab und fügen Sie Produkte zu Ihrem Warenkorb hinzu. Gehen Sie zur Kasse und werfen wir einen Blick auf die Standard-Kasse-Seite:

Standardmäßig fragt die Checkout-Seite von WooCommerce Ihren Kunden nach grundlegenden Rechnungsdaten wie Name, Adresse und Telefonnummer. Es enthält auch Details zu Ihrer Bestellung und Zahlungsmethode. Das ist das Mindeste, was Sie brauchen, schafft aber nicht das beste Erlebnis für Ihre Kunden. Dieser Artikel zeigt Ihnen, wie Sie die Checkout-Seite von WooCommerce auf verschiedene Arten bearbeiten können.

Hinweis : Bevor Sie mit der Bearbeitung der WooCommerce-Checkout-Seite beginnen, sollten Sie einige Produkte im Warenkorb haben. Dies ist eine hervorragende Möglichkeit, die Auswirkungen Ihrer Änderungen auf Ihrer Checkout-Seite zu sehen.

So passen Sie die WooCommerce-Checkout-Seite einfach mit Elementor an

Sie können entweder die standardmäßige Checkout-Seite von WooCommerce bearbeiten oder eine vorhandene Vorlage verwenden. Sie können die verschiedenen Vorlagen ausprobieren, indem Sie in der Seitenleiste auf Vorlage klicken. Wenn Sie die standardmäßige Checkout-Seite bearbeiten möchten, ist dieser Abschnitt genau das Richtige für Sie. Der einfachste und schnellste Weg, Ihre Checkout-Seite aufzupeppen, ist die Verwendung eines Seitenerstellers. Wir verwenden dazu den beliebten Elementor, obwohl jeder andere Seitenersteller auf ähnliche Weise funktioniert. Wir mögen Elementor, weil es einfach einzurichten und zu verwenden ist und außerdem eine ganze Reihe WooCommerce-spezifischer Widgets enthält.

Um die Checkout-Seite zu bearbeiten, benötigen Sie lediglich das Checkout-Widget von Elementor. Ersetzen Sie den Shortcode woocommerce_checkout durch das Widget, und Sie erhalten eine vollständig anpassbare Checkout-Seite. Es funktioniert auch hervorragend mit dem Warenkorb-Widget von Elementor und macht den gesamten Designprozess einfach. Denken Sie daran, dass diese All-in-One-Lösung ihren Preis hat. Sie benötigen die Pro-Version von Elementor, um diese Widgets zu verwenden. Wenn Sie in Elementor investieren möchten, sind hier die Schritte:

  1. Installieren und aktivieren Sie Elementor: Klicken Sie in Ihrem WordPress-Dashboard auf Plugins und dann auf Neu hinzufügen. Suche nach dem Elementor. Klicken Sie auf Installieren und aktivieren , wenn Sie dazu aufgefordert werden. Dadurch wird Elementor Pro installiert.

  1. Lizenzschlüssel hinzufügen: Klicken Sie in der Seitenleiste auf Elementor . Klicken Sie auf Lizenz , fügen Sie den Lizenzschlüssel hinzu und klicken Sie auf Aktivieren. Das Plugin ist nun einsatzbereit.
  2. Öffnen Sie die Checkout-Seite im Elementor-Editor: Bewegen Sie den Mauszeiger über Seiten und klicken Sie auf Alle Seiten . Bewegen Sie den Mauszeiger über die Checkout-Seite und klicken Sie auf Bearbeiten . Klicken Sie oben auf Mit Elementor bearbeiten . Warten Sie eine Sekunde und die Seite wird im Elementor-Editor geöffnet.

  1. Machen Sie sich mit der Bearbeitung mit Elementor vertraut: Elementor arbeitet in horizontalen Abschnitten, die Sie anpassen können, indem Sie auswählen, wie viele Spalten jeder Abschnitt haben soll. Klicken Sie im Seiteneditor auf + , um einen Abschnitt hinzuzufügen, und Sie werden aufgefordert, die Anzahl und das Layout der Spalten auszuwählen, die Sie in diesem Abschnitt haben möchten. Ziehen Sie Elemente aus der Seitenleiste, um sie den Spalten hinzuzufügen. Passen Sie jedes Element über die Seitenleiste an. Die entsprechenden Einstellungen sehen Sie, wenn Sie jedes einzelne Element auswählen.
  2. Ersetzen Sie den Checkout-Shortcode durch das Checkout-Widget: Löschen Sie den Shortcode und fügen Sie das Checkout-Widget aus der Bibliothek auf der linken Seite hinzu. Dadurch erhalten Sie eine Vorschau darauf, wie die Checkout-Seite von Elementor aussieht.
  3. Passen Sie die Checkout-Seite an: Sie können die vielen Einstellungen des Elementor Checkout-Widgets in der Seitenleiste erkunden.

Hier sind einige Einstellungen, die Sie ändern können:

  • Allgemein: Wählen Sie aus ein- oder zweispaltigen Layouts und machen Sie sogar eine Spalte klebrig.
  • Rechnungs- oder Versandformulare ändern: Bearbeiten Sie die Kopfzeile für jedes dieser Formulare, jeden Platzhalter und jedes Feld.
  • Zusätzliche Informationen: Stellen Sie Ihren Kunden einen speziellen Abschnitt zur Verfügung, in dem sie Anweisungen oder Informationen für ihre Bestellung hinzufügen können.
  • Gutscheineinstellungen: Passen Sie die Ausrichtung und Typografie Ihrer Gutscheine an.


Sie können weitere Dinge bearbeiten, indem Sie auf Stil klicken:

  • Kaufen-Button: Sie können die Farben, den Text, den Abstand usw. für den Kaufen-Button ändern.
  • Bestellzusammenfassung: Sie können die Typografie und den Abstand der Liste der bestellten Produkte auswählen.
  • Typografie: Sie können den gesamten Text außer Formularen anpassen.
  • Formulare: Passen Sie Typografie und Farbe Ihrer Formulare an. Verwenden Sie die Zeilenabstandseinstellungen , um den Abstand zu vergrößern.
  1. Überprüfen Sie die Seite in der mobilen Ansicht: Responsive Design ist sehr wichtig, und Sie können die integrierte Ansicht von Elementor verwenden, um zu sehen, wie Ihre Seiten auf verschiedenen Bildschirmgrößen aussehen.

Das Bearbeiten der Checkout-Seite kratzt nur an der Oberfläche. Elementor und WooCommerce sind eine leistungsstarke Kombination, mit der Sie Ihren Shop wirklich hervorheben können.

Wir haben also darüber gesprochen, wie einfach es ist, Ihre gesamte Checkout-Seite mit Elementor anzupassen. Aber was ist, wenn Sie kein Plugin wie Elementor verwenden möchten und lieber nur den integrierten Editor verwenden möchten? Lesen Sie weiter, um zu sehen, wie Sie das tun können.

So passen Sie das Design Ihrer Checkout-Seite mit dem integrierten Editor an

In diesem Abschnitt sprechen wir darüber, wie Sie den Gutenberg-Editor verwenden, um Änderungen an der Checkout-Seite von WooCommerce vorzunehmen. Um die Seite im Editor zu öffnen, bewegen Sie den Mauszeiger über Checkout-Seite und klicken Sie auf Bearbeiten.

Dies führt dich zum Gutenberg Block Editor. Der Blockeditor arbeitet in horizontalen Blöcken mit unterschiedlichen Inhaltstypen. Sie können Text, Bilder oder Überschriften hinzufügen, indem Sie links einen Block aus der Bibliothek hinzufügen. Jeder Block kann separat angepasst werden. Sie sehen die Blockbibliothek in der Seitenleiste, indem Sie oben links auf das + klicken. Sie können die Einstellungen jedes Blocks ändern, indem Sie auf die Zahnradschaltfläche oben rechts auf der Registerkarte "Block" klicken.

Auf der eigentlichen Seite sehen Sie auch Text, den Shortcode. Der Shortcode ist die Methode von WooCommerce, Checkout-Felder in Ihre Seite einzufügen. Es sieht aus wie das:

woocommerce_checkout

Löschen Sie diesen Shortcode nicht. Sie können Bilder oder Text unter und über diesem Shortcode hinzufügen. Später in diesem Artikel werden wir über die Bearbeitung dieser Felder sprechen. Aber lassen Sie uns zunächst darüber sprechen, wie Sie Änderungen am allgemeinen Design vornehmen können. Hier sind die Schritte dazu:

Text hinzufügen

  1. Fügen Sie das Absatz-Widget hinzu: Sie können Text unter und über Ihrem Shortcode hinzufügen. Sie sehen einen Text mit der Aufschrift „Block eingeben/wählen“. Sie können das Absatz-Widget entweder ziehen und ablegen oder einfach mit der Eingabe des gewünschten Textes beginnen. Doppelklicken Sie, um zu einem anderen Block zu wechseln.
  2. Passen Sie den Text an: Sie können die Typografie und Farben im Block-Tab auf der rechten Seite bearbeiten. Wählen Sie einfach den Text oder den Block aus.

Um eine Kopfzeile hinzuzufügen, können Sie das Kopfzeilen-Widget ändern und es genauso bearbeiten. Es gibt auch verschiedene Größen wie H1, H2 usw., aus denen Sie wählen können.

Füge Bilder hinzu

  1. Fügen Sie das Bild-Widget hinzu: Klicken Sie auf das + oben links und geben Sie Bild in die Suchleiste ein. Wählen Sie den gewünschten Bild-Widget-Typ aus und klicken oder ziehen Sie ihn per Drag-and-Drop in eine Spalte.
  2. Bild auswählen : Wählen Sie ein Bild aus Ihrer Medienbibliothek aus, indem Sie auf Medienbibliothek klicken, oder klicken Sie auf Hochladen , um eine Datei von Ihrem lokalen Computer auszuwählen. Sie können eine Beschriftung hinzufügen, wenn Sie möchten.

Schaltflächen hinzufügen

  1. Fügen Sie das Schaltflächen - Widget hinzu: Sie können in der Suchleiste in der Blockbibliothek danach suchen.
  2. Schaltfläche anpassen: Ändern Sie die Beschriftung der Schaltfläche, die Ausrichtung und die Typografie der Beschriftung im angezeigten Popup. In den Blockeinstellungen können Sie auch die Farbe, den Rahmen und die Größe ändern.
  3. Verlinke die Schaltfläche: Klicke im Pop-up auf die URL-Schaltfläche und füge eine URL einer Seite ein, zu der du die Schaltfläche verlinken möchtest.

Erkunden Sie andere Widgets im Blockeditor, um die gesamte Seite anzupassen. Wir empfehlen Ihnen außerdem, eine Vorschau der Seite anzuzeigen, indem Sie oben rechts auf Vorschau klicken. Wenn Sie fertig sind, klicken Sie auf Aktualisieren.

Obwohl Sie mit dem Gutenberg-Editor viel tun können, können Sie bestimmte Dinge wie die Felder nicht ändern. Im nächsten Abschnitt erfahren Sie, wie Sie diese Änderungen vornehmen.

So passen Sie die Felder der Checkout-Seite an

Das Ändern der Felder auf der Checkout-Seite kann wirkungsvoller sein, als Sie glauben. Es definiert wirklich das Erlebnis für Ihren Kunden. Es gibt zwei Möglichkeiten, dies zu tun: mit einem Feldmanager-Plugin oder manuell. Wir werden in diesem Abschnitt über beides sprechen.

Anpassen von Seitenfeldern mit einer Erweiterung

Für dieses Tutorial verwenden wir das Plugin Checkout Field Manager for WooCommerce. Sie müssen die Erweiterung kaufen. Sobald Sie dies getan haben, sind hier die Schritte, um loszulegen.

  1. Installieren und aktivieren Sie das Plugin: Bewegen Sie den Mauszeiger in Ihrem wp-admin-Panel über Plugins und klicken Sie auf Add New . Klicken Sie auf Plug -in hochladen und wählen Sie Datei und Design aus und wählen Sie den Zip-Ordner aus, den Sie gerade heruntergeladen haben. Klicken Sie auf Jetzt installieren und aktivieren.

  1. Bearbeiten oder fügen Sie Felder in den WooCommerce-Einstellungen hinzu: Bewegen Sie den Mauszeiger über WooCommerce und klicken Sie auf Zur Kasse . Klicken Sie oben auf Rechnung, Versand und Zusätzliche und hier verwalten Sie alle Ihre Felder wie folgt:
  • Felder deaktivieren: Sie können unnötige Felder deaktivieren, indem Sie die Spalte „ Deaktiviert “ umschalten.
  • Einige Felder zu Pflichtfeldern machen: Sie können Erforderlich aktivieren und einige Felder zu Pflichtfeldern machen.
  • Bearbeiten Sie das Aussehen des Felds: Sie können die Ausrichtung eines Felds entweder linksbündig, rechtsbündig oder breit ändern, indem Sie eine Auswahl aus dem Dropdown-Menü in der Spalte „ Positionen “ treffen.
  • Vorhandenen Inhalt bearbeiten: Klicken Sie am Ende des entsprechenden Felds auf Bearbeiten, und ein Popup-Fenster wird angezeigt. Sie können Name, Typ, Bezeichnung, Beschreibung usw. ändern. Klicken Sie dann auf Speichern .
  • Neue Felder hinzufügen: Klicken Sie oben links auf + Neues Feld hinzufügen. Sie können die Details nach Belieben ausfüllen. Klicken Sie auf Speichern .
  1. Speichern Sie die Änderungen: Wenn Sie fertig sind, klicken Sie unten links auf Speichern .

Passen Sie Seitenfelder mit Code an

Wenn Sie mit Codierung vertraut sind, können Sie der Datei function.php Ihres Themes Code hinzufügen. Wenn Sie ein Design mithilfe von Code ändern, erstellen Sie im Allgemeinen zuerst ein untergeordnetes Design und ändern Sie dieses. Dadurch bleiben Ihre Änderungen und Anpassungen erhalten, wenn das Design aktualisiert wird.

Es ist wichtig zu beachten, dass Checkout Field Manager, die Erweiterung, die wir im vorherigen Abschnitt erwähnt haben, die Änderungen überschreibt, die an der Datei functions.php vorgenommen wurden. Sie können also nicht parallel verwendet werden.

Außerdem ist es wichtig zu verstehen, wie WooCommerce die Seitenfelder überhaupt lädt. WooCommerce durchläuft Felder durch einen Filter. Auf diese Weise können Sie benutzerdefinierten Code hinzufügen, um Änderungen an den Feldern vorzunehmen. Im Fall von WooCommerce-Checkout-Seiten lautet dieser Filter wie folgt:

$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);

Das bedeutet, dass das Einhängen in woocommerce_checkout_fields jeden vorhandenen Code überschreiben kann. Hooks sind im Wesentlichen Codeteile, die WordPress-Kerndateien modifizieren. Ihre Website hat ein paar Haken, die sie enthält:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • Woocommerce_checkout_after_order_review
  • Woocommerce_after_checkout_form

Darüber hinaus gibt es eine lange Liste von Hooks, die WooCommerce anbietet, aus denen Sie auswählen können. Sie können sich auch diese Liste von Hooks auf Business Bloomer ansehen, die Ihnen hilft, die Hooks zu visualisieren. Lassen Sie uns nun darüber sprechen, wie Sie die Felder ändern.

Ändern Sie den Platzhalter im Feld order_comments

// Einhaken
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Unsere eingehängte Funktion – $fields wird über den Filter übergeben
Funktion custom_override_checkout_fields( $fields )
$fields['order']['order_comments']['placeholder'] = 'Mein neuer Platzhalter'
$felder zurückgeben
}

Ändern Sie die Bezeichnung des Felds order_comments

// Einhaken
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Unsere eingehängte Funktion – $fields wird über den Filter übergeben!
Funktion custom_override_checkout_fields( $fields )
$fields['order']['order_comments']['placeholder'] = 'Mein neuer Platzhalter'
$fields['order']['order_comments']['label'] = 'Mein neues Etikett'
$felder zurückgeben;
}

Entfernen Sie ein Feld

// Einhaken
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Unsere eingehängte Funktion – $fields wird über den Filter übergeben!
Funktion custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments'])
$felder zurückgeben;
}

Es gibt einen WooCommerce-Artikel zur Verwendung von Code, mit dem Sie Ihre Checkout-Felder anpassen können.

Lassen Sie uns nun darüber sprechen, wie Sie das Layout Ihrer Checkout-Seite ändern können.

So ändern Sie das Layout der Checkout-Seite

Sie können das Layout Ihrer WooCommerce-Seite anpassen, indem Sie Aktionshaken hinzufügen. Hier sind einige Möglichkeiten, wie Sie es ändern können:

Verwenden eines Snippet-Verwaltungs-Plugins

Wir beginnen mit der einfacheren Methode, die darin besteht, sie mithilfe eines Snippet-Verwaltungs-Plugins hinzuzufügen.

  1. Snippet Management Plugin installieren und aktivieren: Wir verwenden Code Snippets. Sie finden es in Ihrem Plugin-Verzeichnis. Bewegen Sie den Mauszeiger über Plugins und klicken Sie auf Neu hinzufügen . Suchen Sie dann nach Code-Snippets   und klicken Sie auf Installieren und aktivieren.

  1. Kopieren Sie den Hook: Gehen Sie zur WooCommerce-Hook-Bibliothek und kopieren Sie den Code oder erstellen Sie einen benutzerdefinierten Hook in einem Texteditor und kopieren Sie ihn. Wenn Sie beispielsweise unten einen Abschnitt mit den Allgemeinen Geschäftsbedingungen hinzufügen möchten, kopieren Sie Folgendes.
  1. Fügen Sie den Code hinzu: Bewegen Sie den Mauszeiger links über Code-Snippets und klicken Sie auf Neu hinzufügen . Fügen Sie einen erkennbaren Namen für den Hook hinzu. Wählen Sie die Registerkarte Funktionen. Fügen Sie den Code unten ein. Stellen Sie sicher, dass die Option Snippet überall ausführen ausgewählt ist, und klicken Sie auf Änderungen speichern und aktivieren. Sie haben jetzt erfolgreich einen Haken hinzugefügt.

Manuelles Hinzufügen des Codes

Wenn Sie es zur Datei function.php Ihres Themes hinzufügen möchten, gehen Sie wie folgt vor:

  1. Designdatei-Editor öffnen: Bewegen Sie den Mauszeiger über Aussehen in der Seitenleiste und klicken Sie auf Designdatei-Editor .
  2. Hook-Code kopieren: Du kannst ihn entweder aus der WooCommerce-Bibliothek kopieren oder einen benutzerdefinierten in einem Texteditor erstellen und kopieren. Wie wir im vorherigen Abschnitt verwendet haben, ist hier der Code, den Sie kopieren würden, wenn Sie einen AGB-Abschnitt hinzufügen möchten. Es gibt noch mehr in der WooCommerce-Hooks-Bibliothek.
  3. Bearbeiten Sie die Datei functions.php: Scrollen Sie rechts durch das Menü der Dateien, bis Sie functions.php finden. Fügen Sie den kopierten Code ein und klicken Sie auf Datei aktualisieren . Herzliche Glückwünsche. Sie haben Ihrem Thema einen Haken hinzugefügt.

Zusätzliche Plugins und Erweiterungen für Ihre Checkout-Seite

Hier sind einige zusätzliche Erweiterungen, die Sie installieren sollten, da sie Ihnen definitiv dabei helfen werden, ein erstaunliches Checkout-Erlebnis zu schaffen:

  1. WooCommerce Checkout Addons: Diese Erweiterung ermöglicht es einem Kunden, Addons wie zum Beispiel Geschenkverpackungen in seine Bestellung aufzunehmen.
  2. WooCommerce One Page Checkout: Damit können Sie jede Seite zu einer Checkout-Seite machen und den Einkaufsprozess vereinfachen, da der Kunde jetzt ein Produkt auf derselben Seite auswählen und kaufen kann.
  3. WooCommerce Social Login: Damit kann sich ein Kunde mit einem Social-Media-Konto anstelle seiner E-Mail-Adresse oder Telefonnummer anmelden.
  4. YITH WooCommerce Order Tracking: Dies hilft bei der einfachen Verwaltung von Versandinformationen. Es ermöglicht Ihren Kunden, ihre Einkäufe zu verfolgen.
  5. YITH Advanced Refund System for WooCommerce: Dies hilft Ihnen, ein Rückerstattungssystem einzurichten.

Warum sollten Sie Ihre WooCommerce-Checkout-Seite anpassen?

Das Hauptziel Ihrer Checkout-Seite besteht darin, Ihre Kunden zu ermutigen, Dinge auf Ihrer Website zu kaufen, und aus diesem Grund tut eine benutzerdefinierte Checkout-Seite genau das:

  1. Schneller für Ihre Kunden: Wenn Sie unnötige Felder entfernen und den Kaufprozess für Ihre Kunden beschleunigen können, ist es weniger wahrscheinlich, dass sie ihren Warenkorb verlassen. Je länger der Prozess dauert, desto weniger motiviert ist ein Kunde, überhaupt etwas zu kaufen.
  2. Mehr Produkte verkaufen: Sie können die Checkout-Seite verwenden, um andere Produkte zu verkaufen, an denen sie interessiert sein könnten, oder verwandte Produkte. Dies ist eine Gelegenheit für Sie, Ihren Kunden zu zeigen, was sie brauchen, aber nicht wussten, dass Sie es verkaufen.
  3. Sorgen Sie dafür, dass sich der Checkout-Prozess sicher anfühlt: Sie können Testimonials hinzufügen, was den Kunden das Gefühl gibt, dass sie Ihnen vertrauen können. Sie können auch transparent darlegen, warum Sie nach bestimmten Informationen fragen.

Die besten Möglichkeiten zum Anpassen Ihrer WooCommerce-Checkout-Seite

  1. Erstellen Sie ganz einfach ein Konto: Gestalten Sie das Erstellen eines Kontos für Ihren Kunden mühelos. Machen Sie die Zeit zwischen dem Hinzufügen eines Produkts in den Warenkorb und dem Bezahlen des Produkts so schnell wie möglich. Entfernen Sie unnötige Felder wie „Firma“. Wenn möglich, machen Sie es optional.
  2. Fügen Sie Vertrauensfaktoren hinzu: Dies schafft Vertrauen beim Kunden, dass sein Geld an einem sicheren Ort landet.
  3. Social-Proof-Elemente hinzufügen: Dies ermutigt Kunden, ihre Erfahrungen mit Ihrem Shop auf ihren Social-Media-Seiten zu teilen.
  4. Transparente Gebühren: Keine unnötigen Zusatzgebühren. Stellen Sie sicher, dass Sie sich darüber im Klaren sind, wohin ihr Geld fließt. Fügen Sie zum Beispiel nur Versandkosten zu den Kosten des Produkts hinzu.
  5. Bieten Sie genügend Checkout-Optionen an: Finden Sie ein Gleichgewicht zwischen dem Hinzufügen von zu vielen und zu wenigen Zahlungsoptionen. Verwenden Sie Zahlungsgateways, die bei Ihrer Zielgruppe beliebt sind. Wir haben Artikel zum Hinzufügen von Stripe oder PayPal zu Ihrer WooCommerce-Seite, die Sie sich ansehen können.

Abschließende Gedanken

Die standardmäßige WooCommerce-Kaufabwicklung ist einfach, aber anpassbar. Jeder Aspekt der Checkout-Seite kann bearbeitet werden, um Ihren Kunden ein fantastisches Einkaufserlebnis zu bieten. Bevor Sie jedoch Änderungen vornehmen, müssen Sie Ihre Website mit BlogVault sichern. So sind Sie versichert, wenn etwas schief geht oder Sie das Einkaufserlebnis versehentlich verschlechtert haben. BlogVault erstellt nicht nur Echtzeit-Backups, sondern der Wiederherstellungsprozess ist ein absolutes Kinderspiel.

FAQ

Was sind Action-Hooks?

Action-Hooks helfen Ihnen, Ihren Kerndateien ein Code-Snippet hinzuzufügen, das sich auf die Funktionsweise Ihrer Website auswirkt. WordPress hat eine überwältigend große Bibliothek von Hooks, die Sie verwenden oder Ihre eigenen benutzerdefinierten erstellen können.

Wie bearbeiten Sie Text auf WooCommerce-Checkout-Seiten?

Sie können Ihren integrierten WordPress-Editor oder ein Seitenerstellungs-Plugin verwenden, um Ihre Schriftarten und Texte auf Ihrer gesamten Website zu bearbeiten und anzupassen. Wir empfehlen die Verwendung eines Seitenerstellers wie SeedProd. Es ist einfach zu bedienen und hat sowohl eine kostenlose als auch eine kostenpflichtige Version.

Wo fügen Sie Hooks und Filter hinzu?

Du solltest Hooks und Filter zur Datei function.php deines Child-Themes hinzufügen. Untergeordnete Themen haben das gleiche Erscheinungsbild wie Ihr übergeordnetes Thema, ermöglichen es Ihnen jedoch, Code zu optimieren und hinzuzufügen. Sie können Ihr Child-Theme identifizieren, indem Sie zu Aussehen > Themes gehen und nach dem Theme ohne Feature-Image suchen.= Wenn Sie kein Child-Theme haben, sehen Sie sich diesen Artikel zum Erstellen eines an.