Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Websites, die E-Commerce betreibenCheckout-Seiteist einer der wichtigsten Aspekte. Schließlich ist dies das endgültige Ziel des Kunden, nachdem er eine Bestellung aufgegeben hat. Wenn die WebsiteDie WooCommerce-Kassenseite ist schwer zu bedienenvielleichteinen Zeitraum von (x Zeit) benötigenkönnen Käufer ihre Käufe abbrechen und einen schlechten Eindruck von der Website hinterlassen.

Effektive und gut konvertierende Kassenseiten sehen alle unterschiedlich aus. Die Seite der KasseStil, Struktur, Anzahl der Felderim Gesang antwortenAndere FunktionenVariiert je nach Branche und Art des verkauften Produkts. 

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Zum Beispiel, wenn der Verkauf voneinzelnes physisches ProduktSie müssen kein Konto erstellen, schnell und einfach!Einseitiger CheckoutEs ist die beste Wahl.

Aber wenn die VerkäufeReservierungEs kann notwendig seinmehrstufiger CheckoutDies ist das erste Mal, dass eine Buchung vorgenommen wird. Es enthält eine Reihe von zusätzlichen Feldern zur Erfassung der für die Buchung erforderlichen Kundendaten. 

Wenn Sie Software auf Abonnementbasis verkaufen, müssen Sie möglicherweise ein Konto einrichten, damit Sie auf Ihre Schlüssel zugreifen und Abonnementverlängerungen verwalten können.

 Achtung!Wenn Sie die Kassenseite manuell mit Code anpassen möchten, installieren Sie am besten zuerst das Child-Theme und fügen dann den Code in die Child-Theme-Datei ein. Wenn Sie das Child-Theme verwenden, bleiben die Codeänderungen bei Aktualisierungen des Themes erhalten, da bei jeder Aktualisierung des Themes dieÜberschreiben von Änderungen an der Haupttheme-Datei. Wenn Sie nicht wissen, wie man das macht, haben wir einen Artikel darüber, wie manUnterthemen erstellenDer Artikel kann nachgelesen werden.

Warum sollten Sie Ihre WooCommerce-Kassenseite anpassen?

Das ultimative Ziel der Anpassung Ihrer WooCommerce-Kassenseite ist es, mehr Käufer zu konvertieren und den durchschnittlichen Bestellwert (AOV) zu erhöhen. Die Standard-Kassenseite von WooCommerce und diethematischEs ist nicht immer möglich zu garantieren, dass zwischenCheckout-Optimierung. Jeder Shop-Betreiber hat andere Bedürfnisse und andere Kundenerwartungen, weshalb eine individuelle Anpassung notwendig ist. 

Generell müssen die Kassenseiten jedoch so gestaltet werden, dass der Kaufvorgang schnell und reibungslos verläuft. Die Kassenseiten sollten außerdem gut lesbar sein und zum Stil der übrigen Website passen, um das Einkaufserlebnis zu optimieren. 

Es ist auch wichtig, die Bedürfnisse Ihrer Käufer zu berücksichtigen. Indem Sie an der Kasse Informationen bereitstellen, die nützlich sein können fürKundenspezifische VorteileDie Optionen (Beispiele hierfür sind mehrere Zahlungsmöglichkeiten, Lieferoptionen und die Möglichkeit, sich für Treueprogramme anzumelden.), können Kunden eine Auswahl treffen, die ihren Bedürfnissen entspricht. 

Die WooCommerce-Kassenseite ist eine großartige Möglichkeit, Kunden auf Marketingkanäle wie E-Mail und SMS zu verweisen.

WooCommerce Kassenseite Anpassungsarten

Welche Arten von Anpassungen können an der WooCommerce-Kassenseitenvorlage vorgenommen werden, um diese Probleme zu lösen? Wir unterteilen den Prozess in fünf Arten von Anpassungszielen und erläutern im Detail, wie Sie diese erreichen können.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

1. verbesserte Benutzerprozesse und Effizienz beim Checkout 

Die Kunden möchten nicht länger an der Kasse verweilen. Tatsächlich würden 18% Kunden abspringen, wenn die Kassenseite zu kompliziert wäre, und 25% Kunden würden abspringen, wenn sie ein Konto erstellen müssten. 

Dies kann geschehen durchMehrere Möglichkeiten zur individuellen Anpassung des Bezahlvorgangs, beschleunigen Sie den Einkauf.

Minimieren Sie die Anzahl der Checkout-Felder

Je mehr Informationen ein Kunde in ein Kassenformular eingeben muss, desto irritierender wird es. Die gute Nachricht ist, dass viele BrowserSpeichern Sie Daten wie Benutzernamen, Adressen und sogar Kreditkartendetails früherer Einkäufe. Dies ist jedoch auf die Fälle beschränkt, in denen der Benutzer diese Funktion aktivieren möchte.Es ist immer am besten, wenn Sie versuchen, die Anzahl der angezeigten Felder und die Anzahl der Felder, die der Kunde ausfüllen muss, zu begrenzen.

Es gibt mehrere Möglichkeiten, umVerringerung der Anzahl der Felderum den Kassiervorgang zu verbessern. Sie können die WooCommerce-Kassenseiten mit der FunktionBlockeditorWenn das Thema die Bearbeitung von Blöcken nicht unterstützt, kann der Customizer verwendet werden. Es ist auch möglich, diePlug-in (Softwarekomponente)könnteDie benutzerdefinierten Funktionen werden in derDie Datei functions.php des Child-ThemesMitte.

So bearbeiten oder löschen Sie WooCommerce-Kassenfelder mit dem Block-Editor:

Wenn Sie das Block-Thema verwenden, können Sie dies tun, indem Sie in derErscheinungsbild → Editor → Seiten → Kasse, Felder mit dem Seiteneditor bearbeitenSie können zum WordPress-Dashboard navigieren und zum MenüpunktSeite → Zur Kasse gehen. 

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Mit dem Block-Editor können nur einige Elemente bearbeitet oder gelöscht werden. Zu diesen Elementen gehören: 

  • Bestellung Bemerkungen
  • Bedingungen und Konditionen
  • Coupon Code
  • Rufnummer
  • Unternehmensidentifikation
  • Adresse 2 (Wohnungsnummer, Suite, etc.)
  • Titel des Kapitels und Schrittnummer
  • Kapitel Beschreibung
  • Zurück zum Einkaufswagen Link

Wenn alle oben genannten Optionen aus dem Block-Editor entfernt werden, sieht die benutzerdefinierte WooCommerce-Kassenseite wie folgt aus.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial
So löschen oder bearbeiten Sie WooCommerce-Kassenfelder mit dem Customizer:

Abhängig von Ihrem Thema, wenn Sie dieEinstellerEinige Felder ausblenden. Im Customizer gibt es weniger Anpassungsmöglichkeiten als im Block-Editor. 

Erscheinungsbild im WordPress-Dashboard → CustomiserDarunter finden Sie verschiedene Optionen zur individuellen Gestaltung Ihrer WordPress-Website. Navigieren Sie im linken Menü zuWooCommerce → Kasse.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Hier ist es möglich, Folgendes zu verbergenUnternehmensidentifikationundAdresse Zeile 2im Gesang antwortenTelefoneFeld. Es ist auch möglich, das FeldDatenschutzbestimmungenleer gelassen wird, um es von der Kassenseite zu entfernen. 

So löschen oder bearbeiten Sie Felder mit dem WooCommerce Checkout Field Editor Plugin

Für fortgeschrittenere Optionen können Sie eine speziell entwickelte Erweiterung verwenden, die WooCommerce-Kassenfelder entfernt, hinzufügt und bearbeitet. In diesem Beispiel verwenden wir dieKassenfeld-EditorErweiterung.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Die Erweiterung Checkout Field Editor bietet die Möglichkeit, Felder in drei verschiedenen Bereichen zu bearbeiten, zu löschen und hinzuzufügen:Felder für die RechnungsstellungundTransport Felderim Gesang antwortenZusätzliche Felder. Wenn in den einzelnen Bereichen Felder hinzugefügt, bearbeitet oder gelöscht werden, werden sie in einem bestimmten Bereich der Kassenseite angezeigt (oder verschwinden daraus).

Aktivieren Sie dazu die Kontrollkästchen links von jeder Zeile und wählen Sie die OptionDeaktivieren/Löschenum das Feld zu deaktivieren.

Bitte beachten Sie, dass die Deaktivierung der Kernfelder (lila hervorgehoben) zu Problemen beim Checkout oder zu Konflikten mit anderen Plugins führen kann, die auf diese Felder angewiesen sind.

So löschen oder bearbeiten Sie WooCommerce-Kassenfelder mit PHP-Funktionen:

Hinweis: Dies funktioniert nur, wenn die Checkout-Seite den Shortcode [woocommerce-checkout] verwendet. Es funktioniert nicht für Kassenseiten, die mit dem Block-Editor erstellt wurden.

Wenn die WooCommerce-Kassenseite nicht mit einem Block-Editor angepasst wird, können die Kassenfelder entfernt oder mit Code bearbeitet werden. Die PHP-Operationen und -Funktionen sollten im Child-Theme in derfunktionen.phpDokumentation.

Verwenden Sie einen SFTP-Dienst (z.B.FileZillavielleichtCyberduck)Laden Sie das Unterthema vom Server für diefunktionen.phpDatei. Kann in einem Texteditor bearbeitet werdenfunktionen.php.

existierenfunktionen.phpfügen Sie den Code für das Feld hinzu, das Sie entfernen möchten. Lassen Sie uns zum Beispiel das Feld "Telefonnummer" von der Kassenseite entfernen.

add_filter( 'woocommerce_checkout_fields', 'remove_checkout_phone_field' );

function remove_checkout_phone_field( $fields ) {

unset( $fields['billing']['billing_phone' ] );

return $fields;

}

Unten sehen Sie einen Vorher-Nachher-Vergleich des Bereichs für das Rechnungsfeld, der die Auswirkungen der Bearbeitung zeigt:

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Die Anzeige der Kopfzeilennavigation und der Fußzeile der Website auf der Bezahlseite ist zwar nützlich, lenkt aber eher ab und führt zur Abwanderung der Nutzer. Die Anzeige des Logos der Website in der Kopfzeile während der Kaufabwicklung sorgt für ein konsistentes Markenerlebnis, aber alle anderen Inhalte, die Käufer dazu bringen könnten, die Kaufabwicklungsseite zu verlassen, müssen entfernt werden. 

Wenn Sie ein Theme verwenden, das den Block-Editor unterstützt, können Sie die Kopf- und Fußzeile bearbeiten oder entfernen, indem Sie eine neue Kassenvorlage über den vollständigen Site-Editor erstellen, die auf der WooCommerce-Kassenseite verwendet wird. Wenn Sie das Page Builder-Plugin verwenden, prüfen Sie in der Dokumentation, ob es eine einfache Möglichkeit zur Erstellung einer Kassenvorlage bietet. Viele beliebte WordPress-Plugins für den Seitenaufbau bieten solche Optionen. 

Es ist auch möglich, die Kopf- und Fußzeile einer bestimmten Seite mit Hilfe von CSS oder PHP komplett auszublenden.

In diesem Beispiel verwenden wir dieTwenty Twenty-Four ThemeEntfernen Sie die Kopf- und Fußzeile von der WooCommerce-Kassenseite im Site-Editor.

Es wird nicht möglich sein, diese Änderungen mit dem Block-Editor vorzunehmen, indem Sie die Checkout-Seite im Bereich Seiten des WordPress-Dashboards bearbeiten. Für den Zugriff auf dieErscheinungsbild → Editor → Vorlagen → WooCommerce → Seite: KasseKlicken Sie dann auf das Stiftsymbol zum Bearbeiten der Vorlage, um die Vorlage für die WooCommerce-Kassenseite tatsächlich zu bearbeiten.

Von dort aus klicken Sie einfach auf die Kopf- und Fußzeilenblöcke und löschen sie. Stellen Sie sicher, dass Sie die Änderungen speichern.

Wenn das Theme keine einfache Möglichkeit bietet, die WooCommerce-Kassenseite mit dem Block-Editor oder anderen Drag-and-Drop-Editor-Tools anzupassen, können Sie die Kopf- und Fußzeile auf der benutzerdefinierten Kassenseite mit CSS ausblenden.

.page-id-11 #header, #footer{

display:none;

}

Fügen Sie an der Position über .page-id-11 die Seiten-ID-Nummer nach .page-id- ein.

Platzieren Sie diesen Code im Site-Editor (Oder den Customizer, wenn das Thema keine vollständige Bearbeitung der Website unterstützt.) in einem zusätzlichen CSS-Feld im Child-Theme oder direkt in derstyle.css DateiMitte.

Hinweis: Checkout-Seiten, die den Block-Editor verwenden, sind davon nicht betroffen.

Wenn Sie einige PHP-Funktionen verwenden möchten, um die Kopf- und Fußzeile auf einer benutzerdefinierten Kassenseite zu entfernen, können Sie den folgenden Codeschnipsel in dieDatei functions.phpMitte:

function remove_header_footer_from_checkout() {

if(is_checkout()){ ? >
Kopfzeile { display:none; }
Fußzeile { display:none; }

<?php }
}

add_action( 'wp_header', 'remove_header_footer_from_checkout');

Bieten Sie bequeme Zahlungsmöglichkeiten

Wenn Sie eine Website erstellen, denken Sie an den KundenDie meistgewünschte ZahlungsmethodeSehr wichtig. Wenn Sie einen zuverlässigen Zahlungsabwickler verwenden und bequeme Alternativen wie digitale Geldbörsen, Kryptowährungen oder Zahlungspläne von Drittanbietern anbieten, können Sie Ihren Kunden den Checkout erleichtern. 

Welches Zahlungsgateway verwendet wird, hängt von dem Land ab, in dem das Unternehmen ansässig ist, von der Währung, die Sie akzeptieren möchten, und davon, wo der Kunde lebt. Allein in der WooCommerce-Erweiterungsbibliothek finden Sie etwa70 Zahlungserweiterungsoptionen.

Einige beliebte Zahlungsabwickler sindWooPayments, Stripe, WorldPay und Authorize.net. Zu den Optionen für digitale Geldbörsen gehörenPayPalFür weitere Informationen besuchen Sie bitte den WooCommerce Store. Was die Zahlungspläne von Drittanbietern betrifft, so sind Affirm, Klarna, Afterpay und sogar die Pay Later-Funktion von PayPal bewährt, vertrauenswürdig und einfach in Ihren WooCommerce-Shop zu integrieren.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Gespeicherte Kundeninformationen vorausfüllen, aber eine Gast-Kasse zulassen

Für Verkäufer ist es viel einfacher, ein Konto zu erstellen. Eingeloggte Benutzer können ihre Bestellhistorie und verfügbare Downloads einsehen, Kreditkarteninformationen speichern und bearbeiten sowie Rechnungsdaten und Lieferadressen aktualisieren.

Browser-basiertes Autofill

Kunden können die Autofill-Funktion in ihren Browsern nutzen. Google-, Safari- (über iCloud) und Firefox-Konten (unter anderem) verfügen alle über Autofill-Funktionen, die Benutzernamen, Passwörter, Kreditkartendaten und Adressinformationen speichern. Wenn Sie während des Online-Kaufvorgangs auf die entsprechenden Felder klicken, schlägt Ihr Browser auf der Grundlage der zuvor gespeicherten Informationen automatische Ausfülloptionen vor.

Autofill-Plugin

Wenn ein Interessent die automatische Ausfüllfunktion seines Browsers nicht nutzt, kann er jederzeit dieGoogle Autofill Kundenadressenusw. füllen die Adressfelder auf der Grundlage der IP-Adresse des Benutzers aus. 

In der digitalen Brieftasche gespeicherte Zahlungsdaten

Eine weitere Möglichkeit zum Bezahlen ist eine digitale Brieftasche. Ihre Google Pay-, PayPal-, Venmo-, Apple Pay- und anderen Konten enthalten Zahlungsdetails und Rechnungsinformationen, die die Kaufabwicklung im Geschäft beschleunigen können. 

Es ist jetzt also einfacher, die Gast-Kasse zu aktivieren, aber wie können Sie Ihren Kunden trotzdem die Möglichkeit geben, ein Konto an der Kasse zu erstellen?

existierenWooCommerce → Einstellungen → Konto & DatenschutzEs ist sehr einfach, sich einzuschalten.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

ZeckeKunden die Möglichkeit geben, Bestellungen ohne ein Konto aufzugeben. Dann kreuzen Sie dasErlauben Sie Kunden, an der Kasse Konten zu erstellenund speichern Sie die Änderungen.

Erwägen Sie eine mehrstufige oder eine einseitige Kaufabwicklung

Am einfachsten ist es, eine einseitige Checkout-Seite zu entwerfen, die perfekt auf den Benutzer zugeschnitten ist. Aber das ist nicht immer möglich.

Auf dem Handy zum Beispiel erfordert eine einseitige Kasse eine Menge lästiges Scrollen, auch ohne überflüssige Felder. Wenn der Checkout außerdem nicht funktioniert, weil dieVerkaufte Produkteoder eine Dienstleistung, die mehrere Schritte erfordert (Produkte mit mehreren Attributen), dann kann eine einseitige Kaufabwicklung umständlich sein, selbst auf einem Computer. 

Die Lösung für dieses Problem besteht darin, die WooCommerce-Kassenseite mit dem mehrstufigen Ansatz anzupassen. Mehrstufige Kaufabwicklung (wo die Felder für jeden Schritt vollständig im Gerätefenster angezeigt werden) können den Kaufprozess für Kunden reibungsloser gestalten und ihnen helfen, den Fortschritt bei der Fertigstellung ihrer Bestellungen zu verstehen. 

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Flux Kasse für WooCommerceErweiterung ist eine hervorragende mehrstufige Checkout-Lösung. Mit ihr ist es möglich, den Checkout-Prozess in überschaubare Teile zu unterteilen, die Anzahl der Felder in jedem Schritt anzupassen und sogar das Adressfeld des Kunden mithilfe von Geolocation automatisch auszufüllen.

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

Wenn jeder Schritt des Prozesses abgeschlossen ist, werden ihre Informationen gespeichert und sie werden automatisch zum nächsten Schritt weitergeleitet, bis die Zahlung abgeschlossen ist.

Alternativ können Sie das Kassenformular auch direkt auf die Produktseite verlagern und einen einseitigen Kassenvorgang einrichten. Dies ist die besteGeeignet für Websites mit weniger Produktenoder wenn Sie gezielte Landing Pages erstellen möchten, die direkt mit digitalen Werbekampagnen verknüpft sind.

One Page Checkout Erweiterung für WooCommerce von WooCommerce.

Sie können dieWooCommerce One Page CheckoutExtension.WooCommerce One Page Checkout ermöglicht es, das Kassenformular an einer beliebigen Stelle auf der Website zu platzieren. Es kann der Seite hinzugefügt werden"Produktdaten"auf der Produktseite, oder Sie können den Shortcode im WordPress-Editor manuell ändern in[woocommerce_one_page_checkout]Zu jeder Seite, jedem Beitrag oder benutzerdefinierten Beitragstyp hinzufügen.

WooCommerce Produkt eine Seite Checkout-Option.

Das Kassenformular wird direkt auf der entsprechenden Seite angezeigt, so dass Sie als Kunde schnell zur Kasse gehen können.

Die Sonnenbrillen sind auf der Produktseite mit einem "Coupon" gekennzeichnet.

Gutscheine automatisch auf berechtigte Bestellungen anwenden

In der Standard-Kassenfunktion von WooCommerce gibt es ein Feld, in dem Kunden Gutscheincodes anwenden können

Vermeiden Sie dies, indem Sie den Coupon einfach automatisch auf berechtigte Einkäufe anwenden. Wenn es mehrere Gutscheinoptionen gibt, die für eine Bestellung in Frage kommen, können Sie diese auf der WooCommerce-Kassenseite anzeigen lassen, damit Ihre Kunden sie auswählen können. 

Die Standardoptionen von WooCommerce für Gutscheine enthalten zwar keine Einstellungen, um Gutscheine automatisch auf den Einkaufswagen eines Kunden anzuwenden oder um verfügbare Gutscheine an der Kasse anzuzeigen, aber es ist möglich, dasIntelligente CouponsErweiterung Aktivieren Sie diese Funktion.

WooCommerce-Gutscheinfeldoptionen werden angezeigt oder automatisch angewendet.

Nachdem Sie Smart Coupons installiert haben, gehen Sie zuMarketing → Gutscheineerstellen Sie einen neuen Coupon oder wählen Sie den Coupon aus, der auf der Kassenseite erscheinen oder automatisch angewendet werden soll.

existierenCoupon-Daten → AllgemeinScrollen Sie dann nach unten zuIm Einkaufswagen, an der Kasse und in meinem Konto anzeigen?und aktivieren Sie das Kontrollkästchen. Wenn Sie möchten, dass der Coupon automatisch angewendet wird, markieren Sie das FeldAutomatische Anwendung?daneben und speichern Sie die Änderungen.

Jetzt müssen sich die Kunden nicht mehr mühsam an Gutscheincodes erinnern und können den Kaufvorgang schneller abschließen.

Ein Mann arbeitet in seinem Büro an einer Kalkulationstabelle und hat die Sanduhr halb durchlaufen.

Schnellere Ladezeiten für Seiten

Es handelt sich dabei zwar nicht unbedingt um eine Anpassung der WooCommerce-Kassenseite, aber wenn Sie sicherstellen, dass Ihre WordPress-Website für schnelle Ladezeiten optimiert ist, können Sie den Kassiervorgang schnell und einfach gestalten. Auch wenn Sie dieCaching-Pluginim Gesang antwortenContent Delivery Network(CDN), Einkaufswagen und Kassenseiten bieten in der Regel auch keine zwischengespeicherten Inhalte.

Es wird zwar oft empfohlen, dass Websites serverseitiges Caching und Caching-Plugins verwenden, um relativ statische Inhalte schnell auszuliefern. Aber es stimmt, dass es nicht wünschenswert ist, hochdynamische Seiten für Besucher zwischenzuspeichern (wie "Mein Konto", "Einkaufswagen" und "Kasse".).

Wenn Sie dies tun, können viele Probleme auftreten, zum Beispiel:

  • Kunden können ihre Warenkörbe nicht aktualisieren
  • Falscher Artikel im Warenkorb auf der Kassenseite
  • Anzeige von zwischengespeicherten Kasseninformationen aus anderen Benutzerkonten während der Kundenabrechnung
  • Kürzlich getätigte Einkäufe werden nicht in meinem Kontobereich angezeigt

Deshalb umfasst die Optimierung für WooCommerce und die meisten Caching-Plugins standardmäßig diese und anderedynamische SeiteVom Caching ausgenommen. Wenn Sie sich jedoch auf Caching-Plugins und CDNs verlassen, um Ihre Website ohne andere serverseitige Optimierungen zu beschleunigen, kann es sein, dass nicht gecachte Seiten (z. B. Checkout-Seiten) langsamer geladen werden als der Rest Ihrer Website.

2. das Aussehen der Kassenseite zu verbessern

Die WooCommerce-Kassenseite kann die Stile des Themas erben oder die Standardstile von WooCommerce verwenden. In jedem Fall ist die standardmäßige Kassenansicht nicht für jede Website geeignet. 

Ändern Sie das Design der Kassenseite, um sie besser an das Branding Ihrer Website anzupassen, oder passen Sie einfach die Schriftgröße an, damit die Feldbeschriftungen besser lesbar sind. Oder, noch besser, lassen Sie die Feldbeschriftungen ganz weg und sparen Sie Platz, indem Sie die Felder mit Platzhaltertext versehen.

WooCommerce Versandinformationsformulare nebeneinander - eines verwendet Feldbeschriftungen und das andere Platzhalter.

Um Feldbeschriftungen aus einem blockbasierten Checkout-Formular zu entfernen, fügen Sie das folgende CSS zum Child-Theme hinzustyle.css Dateiim vollständigen Site-Editor oder in derin das Feld CSS anhängen.

components-form .wc-block-components-text-input label, .wc-block-components-text-input label {

display:none;

}

.wc-block-components-combobox.is-active .wc-block-components-combobox-control label.components-base-control__label, .wc-block- components-combobox:focus-within .wc-block-components-combobox-control label.components-base-control__label, .wc-block-components- form .wc-block-components-combobox.is-active .wc-block-components-combobox-control label.components-base-control__label, .wc-block- components-form .wc-block-components-combobox:focus-within .wc-block-components-combobox-control label.components-base-control__label {

   Anzeige: keine;

}

Wenn Sie das Eingabefeld jedoch nicht komplett leer lassen wollen, können Sie eine Nachricht an das Child-Theme senden.Datei functions.phpFügen Sie einige Codefragmente hinzu, um den Platzhaltertext wie unten gezeigt anzupassen:

add_filter( 'woocommerce_checkout_fields' , 'override_placeholder_text_checkout_fields', 20, 1 );

function override_placeholder_text_checkout_fields( $fields ) {

$fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_first_name']['placeholder'] = 'Vorname '; $fields['billing']['billing_last_name']['placeholder'] = 'Nachname '; $fields['billing']['billing_postcode']['placeholder'] = 'Postleitzahl ';
$fields['billing']['billing_city']['placeholder'] = 'Stadt/Ort '; $fields['shipping']['shipping_first_name']['placeholder'] = ' Vorname '; $fields['shipping']['shipping_last_name']['placeholder'] = 'Nachname '; $fields['shipping']['shipping_postcode'][' Platzhalter']] = 'Postleitzahl '; $fields['shipping']['shipping_city']['Platzhalter'] = 'Ort *';

return $fields;
}

Welche Aspekte Sie auch immer einrichten möchten, Sie können dies mit einer Kombination aus CSS, Aktionen und Filtern tun. Experimentieren Sie mit Layouts, Schriftarten, Farbschemata und Feld- und Schaltflächengrößen. Vergessen Sie nicht, dafür zu sorgen, dass die Checkout-Seiten gut lesbar und leicht zugänglich sind. 

3. die Kundenzufriedenheit erhöhen und die Loyalität fördern

Es ist zwar wichtig, den Kassiervorgang im Shop zu rationalisieren, aber es gibt noch weitere Verbesserungen, die auf der Kassenseite vorgenommen werden können, um ein besseres Benutzererlebnis zu bieten. Lieferoptionen, die Bestellung zusätzlicher Produkte und die Möglichkeit, Punkte und Prämien zu sammeln, könnten angeboten werden. 

Das Kassenformular kann mit Optionen gestaltet werden, die nur wenig Platz beanspruchen, aber dennoch beim Bezahlen hervorgehoben werden. Natürlich sollten die meisten dieser Felder völlig optional sein.

Schauen wir uns einige der Möglichkeiten an, mit denen Sie die Checkout-Methode ändern können.

Eine breite Palette von Versand- und Lieferoptionen ist verfügbar

Kunden, die 60% überschreiten, sind von den zusätzlichenFracht, Steuernim Gesang antwortenAndere KostenAbbruch von Käufen.23 %-Kunden brechen ihre Käufe ab, wenn sie die Lieferzeiten als zu langsam empfinden.

Dies können Sie unter WooCommerce → Einstellungen → Versand tun.in der Option Versandbereiche verwalten und wählen Sie den Versandbereich, den Sie bearbeiten möchten.

WooCommerce-Versandeinstellungen im WordPress-Dashboard.

Aktivieren Sie die kostenlose Versandmethode und speichern Sie die Änderungen. Wenn Sie eine weitere Versandart hinzufügen möchten (Für beschleunigte Lieferungen), können Sie aufLiefermethode hinzufügenund wählen Sie dannLieferung zum Festpreis. Wählen Sie den Namen der Versandart, wählen Sie, ob die Versandkosten steuerpflichtig sind oder nicht, und geben Sie dann die Kosten ein.

WooCommerce Flatrate-Versandeinstellungen für das WordPress-Backend.

Erzeugt und speichert eine neue Versandmethode.

Zusätzlich zu den Optionen für kostenlosen und beschleunigten Versand können Kunden mit WooCommerce Order Delivery auch ein bestimmtes Datum und eine bestimmte Uhrzeit für die Lieferung ihrer Bestellung auswählen. Diese Funktionen sind besonders nützlich, wenn Sie ein Restaurant, einen Blumenladen oder ein anderes Unternehmen betreiben, das lokale Lieferdienste anbietet. 

Bestellungslieferungs-Erweiterung für WooCommerce-Banner.

Im Folgenden finden Sie einige der Aktionen, die Sie mit der Bestellungslieferung von WooCommerce durchführen können:

  • Auswahlmöglichkeit für das Lieferdatum anzeigen
  • Geschätztes Lieferdatum anzeigen
  • Erlauben Sie Ihren Kunden, eine bestimmte Lieferzeit oder ein Zeitfenster zu wählen.
  • Definieren Sie Lieferfristen für jede Transportart
  • Begrenzen Sie die Anzahl der Aufträge, die an einem bestimmten Datum oder in einem bestimmten Zeitraum geliefert werden können, um Arbeitsüberlastung und Lieferverzögerungen zu vermeiden.
  • Verlangen Sie von Ihren Kunden zusätzliche Gebühren für bestimmte Liefertermine und Zeitfenster
  • Geben Sie Daten an, an denen eine Lieferung nicht möglich ist (z.B. Wochenenden und Feiertage)

Indem Sie Ihren Kunden bequeme Versand- und Lieferoptionen anbieten, können Sie ihnen das Gefühl geben, dass Sie sich um ihre Erfahrungen kümmern.

Inklusive Zusatzmodul für die Kasse

Kunden an der Kasse optionale Dienstleistungen anzubieten, ist eine gute Möglichkeit, die Kundenzufriedenheit zu erhöhen. Sie können dazu das Feld Bestellnotizen verwenden, aber das hat viele Nachteile.

Wenn man sich auf "Bestellung Bemerkungen"Wenn Sie ein Feld für eine solche Auftragsanpassung verwenden würden, wäre es schwierig, bei der Bearbeitung des Auftrags den Überblick zu behalten - vor allem, wenn der Kunde mehrere Sonderleistungen wünscht. Dies macht es auch unmöglich, zusätzliche Dienstleistungen in Rechnung zu stellen. Außerdem ist es nicht möglich, genau zu zählen, wie viele Kunden die einzelnen Zusatzleistungen angefordert haben.

Skyverge Checkout-Plugin für WooCommerce-Banner.

Das Checkout Add-on lässt sich am besten mit dem BefehlWooCommerce Checkout Add-onsErweiterungen. Mit dem WooCommerce Checkout Add-on können Sie:

  • kostenlose oder kostenpflichtige Dienste anbieten.wie z.B. Gravur oder andere personalisierte Dienstleistungen, Transportversicherung, Firmengeschenke oder beschleunigte Bearbeitung
  • Geschenkoptionen hinzufügenZum Beispiel Geschenknotizen, Verpackungen und Quittungen
  • Beachten Sie den Hinweis.
  • Akzeptieren von Datei-Uploads

Um die Anzahl der Felder auf der WooCommerce-Kassenseite im Auge zu behalten, können Add-Ons abhängig von den Werten der Zwischensummen im Warenkorb, bestimmten Produkten im Warenkorb oder einem anderen Add-On angezeigt werden. 

Bringen Sie das Wertversprechen durch Symbole und Überschriften zum Ausdruck.

Hinzufügen eines Vertrauenssymbols zum Checkout (oder nicht)

Ein weiterer wichtiger Grund, warum Kunden das Einkaufen aufgeben, ist, dass sie der Website nicht vertrauen, wenn es darum geht, ihnen Kreditkarteninformationen zu geben. Wenn die Kunden das Gefühl haben, dass die Website nicht sicher ist, werden sie nicht bezahlen. 

Immer mehr Hosting-Anbieter bieten automatisch kostenlose Versionen von Sicherheitszertifikaten ( SSL/TSL ) an, die den aktuellen Webstandards entsprechen (Seit 2017 kennzeichnet Google jede Website ohne Sicherheitszertifikat als unsicher).

Anpassen der WooCommerce-Kassenseite: Vollständiges Tutorial

4. die Marketingkanäle für Abonnementkunden

Ein weiteres Ziel für die WooCommerce-Kassenseite könnte es sein, die Kunden dazu zu bringen, sich für Remarketing-Kanäle wie E-Mail-Marketing und SMS anzumelden. 

Wenn Sie bereits eine E-Mail-Marketing-Plattform verwenden, dann gibt es eine WooCommerce-Integration. Die meisten dieser Integrationen bieten die Möglichkeit, ein Opt-in-Kontrollkästchen auf der Kassenseite hinzuzufügen. Zum Beispiel.MailPoetBeinhaltet diese Einstellung sowie benutzerdefinierte Opt-in-Nachrichten.

MailPoet Einstellungen WooCommerce Opt-In Anzeigeoptionen.

Wenn Sie möchten, dass Ihre Kunden sich für den Erhalt von Bestellungsaktualisierungen und Sonderangeboten per SMS anmelden, können Sie dasWooCommerce SMS. Diese Erweiterung fügt ein Opt-in-Kontrollkästchen unter dem Telefonnummernfeld auf der WooCommerce-Kassenseite hinzu.

Kundeninformationen (E-Mail, Telefon usw.) in WooCommerce Checkout.

Die Kassenseite ist die letzte Chance für Ihren Shop, mit Ihren Kunden in Kontakt zu bleiben, bevor sie ihn verlassen. Wenn Sie sicherstellen möchten, dass Ihre Kunden wiederkommen, geben Sie ihnen die Möglichkeit, sich für die weitere Kommunikation anzumelden.

Einige Websites müssen möglicherweise Felder auf der Kassenseite hinzufügen oder anpassen, um bestimmte geschäftliche Anforderungen oder rechtliche Verpflichtungen zu erfüllen.

Wenn Sie zum Beispiel lebende Tiere transportieren, wieOnkel Jims WurmfarmMöglicherweise müssen Sie Informationen darüber hinzufügen, wie und wann Ihre Bestellung versandt wird, sowie Lieferzeiten und bestimmte Haftungsausschlüsse.

Kundenorientierte Transportinformationen mit Symbolen, Überschriften und Absätzen.

Kontakt
Sie können den Artikel nicht lesen? Kontaktieren Sie uns für eine kostenlose Antwort! Kostenlose Hilfe für persönliche Websites und Websites kleiner Unternehmen!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-Mail: info@361sale.com
Arbeitszeiten: Montag bis Freitag, 9:30-18:30 Uhr, Feiertage frei
Gepostet von photon fluctuations, retweeted mit Quellenangabe:https://www.361sale.com/de/21256/

Wie (0)
Vorherige 6 Tage zuvor
Weiter 5 Tage zuvor

Empfohlen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kontakt

020-2206-9892

QQ咨询:1025174874

E-Mail: info@361sale.com

Arbeitszeiten: Montag bis Freitag, 9:30-18:30 Uhr, Feiertage frei

Kundendienst WeChat