So ändern Sie WooCommerce Checkout-Fehlermeldungen
Veröffentlicht: 2021-12-21Suchen Sie nach Möglichkeiten, die Fehlermeldungen an der Kasse zu aktualisieren? Wir geben dir Deckung. In dieser Anleitung zeigen wir Ihnen verschiedene Methoden zum Ändern der WooCommerce Checkout-Fehlermeldungen.
Wenn Sie einen Online-Shop betreiben, werden Sie irgendwann mit Konflikten und Fehlern konfrontiert. Wir haben bereits gesehen, wie man allgemeine Probleme an der Kasse behebt, was zu tun ist, wenn die Schaltfläche „In den Warenkorb“ nicht funktioniert, und einige Lösungen, wenn die Shop-Seite leer ist. In diesem Tutorial zeigen wir verschiedene Möglichkeiten, die WooCommerce Checkout-Fehlermeldungen zu ändern und benutzerdefinierte zu erstellen.
Bevor wir uns die verschiedenen Möglichkeiten dazu ansehen, wollen wir die Vorteile der Anpassung der Fehlermeldungen auf der Checkout-Seite besser verstehen.
Warum die Checkout-Fehlermeldungen ändern?
Standardmäßig enthält WooCommerce grundlegende und recht allgemeine Checkout-Fehlermeldungen. Die meisten Ladenbesitzer lassen sie so, wie sie sind. Wenn Sie also diese Botschaften ändern, können Sie sich leicht von der Masse abheben.
Die Checkout-Benachrichtigungen unverändert zu lassen, ist eine große verpasste Gelegenheit. Der Checkout ist der wichtigste Moment, da er bestimmt, ob Sie den Verkauf abschließen oder nicht. Wenn während des Bezahlvorgangs ein Fehler auftritt, weichen Käufer möglicherweise zurück und Sie verlieren möglicherweise den Verkauf. Indem Sie diese Fehlermeldungen an der Kasse anpassen, können Sie sie optimal nutzen und erklären, was passiert ist, um den Kunden Sicherheit zu bieten.
Standardmäßig zeigt WooCommerce Fehlermeldungen an, wenn erforderliche Felder fehlen oder wenn die vom Kunden eingegebene Zahlungsmethode nicht gültig ist. Dies sind die typischen Fehlermeldungen, die Sie an der Kasse sehen:
Wie Sie sehen können, sind sie klar, aber Sie können noch viel mehr damit machen. Sie können beispielsweise Elemente hinzufügen, die Ihre Marke widerspiegeln, mehr Text hinzufügen und so weiter.
Nachdem Sie nun wissen, warum Sie die Checkout-Fehlermeldungen in WooCommerce ändern sollten, sehen wir uns an, wie Sie die Aufgabe erledigen können.
So ändern Sie die WooCommerce Checkout-Fehlermeldungen
Es gibt zwei Möglichkeiten , die WooCommerce Checkout-Fehlermeldungen zu bearbeiten :
- Mit Plugins
- Programmatisch
Lassen Sie uns einen Blick auf beide Methoden werfen, damit Sie die richtige für Ihre Fähigkeiten und Bedürfnisse auswählen können.
1) Passen Sie die Checkout-Fehlermeldungen mit Plugins an
Wenn Sie keine Programmierkenntnisse haben oder lieber Plugins verwenden, um WooCommerce-Fehlermeldungen zu bearbeiten, können Sie das Say What-Plugin verwenden. Dieses Tool hilft Ihnen, Ihre Website-Strings zu ändern, ohne eine einzige Codezeile zu schreiben oder Vorlagendateien zu bearbeiten.
Die kostenlose Version enthält grundlegende Funktionen, während die Premium-Version bei 39 USD pro Jahr beginnt und erweiterte Anpassungsmöglichkeiten freischaltet.
Nachdem Sie das Plugin installiert und aktiviert haben, sehen Sie auf der linken Seite die Konfigurationsoptionen. Von dort aus können Sie die zu ersetzende Zeichenfolge auswählen und den Zielinhalt eingeben. Wenn Sie das getan haben, klicken Sie auf Speichern und das war's.
Wenn Sie Hilfe mit dem Plugin benötigen, können Sie ein Support-Ticket erstellen oder dem Support-Team über das Kontaktformular eine E-Mail senden.
2) Bearbeiten Sie Checkout-Fehlermeldungen programmgesteuert
Wenn Sie kein Plugin verwenden möchten und über Programmierkenntnisse verfügen, können Sie die Fehlermeldungen mit ein wenig Code bearbeiten. In diesem Abschnitt zeigen wir Ihnen, wie Sie PHP verwenden, um die Fehlermeldungen in WooCommerce zu ändern.
Hier können Sie viel tun. In dieser Demonstration konzentrieren wir uns auf die Anzeige einer Fehlermeldung anstelle der standardmäßigen mehreren Warnungen auf der Checkout-Seite.
Dazu ändern wir die Datei functions.php des Themes. Bevor Sie beginnen, empfehlen wir Ihnen daher, Ihre Website zu sichern und ein Child-Theme zu erstellen, falls Sie noch keines haben.
Danach kannst du den folgenden Code zur Datei functions.php deines Child-Themes hinzufügen. Wie bereits erwähnt, wird anstelle mehrerer Hinweise eine einzelne Fehlermeldung auf der Checkout-Seite angezeigt.
add_action( 'woocommerce_after_checkout_validation', 'quadlayers', 9999, 2);
Funktion Quadlayers( $fields, $errors ){
// im Falle von Validierungsfehlern
if( !empty( $errors->get_error_codes() ) ) {
// alle vorhandenen Fehlermeldungen weglassen
foreach( $errors->get_error_codes() as $code ) {
$fehler->entfernen( $code );
}
// benutzerdefinierte einzelne Fehlermeldung anzeigen
$errors->add( 'validation', 'Ihre benutzerdefinierte Nachricht kommt hierher!!!' );
}
}
Wenn Sie sich den Code genauer ansehen, werden Sie sehen, dass wir Quadlayers als Funktion festgelegt haben, und Your Custom Message Goes Here!!! als einzige Botschaft. Nehmen Sie dieses Snippet gerne als Grundlage und passen Sie es Ihren Anforderungen entsprechend an.
Für diese Demonstration verwenden wir ein seitenspezifisches Plugin, um den Code einzufügen, wie Sie unten sehen können.
Überprüfen Sie nun das Frontend, fügen Sie ein beliebiges Produkt in den Warenkorb und gehen Sie zur Checkout-Seite. Wenn Sie versuchen, den Kauf abzuschließen, ohne die erforderlichen Felder auszufüllen, wird ein Fehler wie dieser angezeigt:
Auf diese Weise können Sie die WooCommerce Checkout-Fehlermeldungen mit ein wenig Code ändern.
Wie Sie sehen können, ist dies ein einfaches Beispiel. Wir empfehlen Ihnen, diesen Ansatz mit Konditionen zu kombinieren, um das Einkaufserlebnis Ihrer Kunden zu verbessern. Um mehr darüber zu erfahren, schau dir unsere Anleitung zum Hinzufügen von bedingten Feldern zur WooCommerce-Kaufabwicklung an.
Bisher haben wir einige Möglichkeiten gesehen, die Fehlermeldungen an der Kasse anzupassen. Aber Sie können noch mehr tun, um Ihren Online-Shop zu verbessern. Sehen wir uns an, wie Sie benutzerdefinierte Nachrichten hinzufügen können.
So fügen Sie eine benutzerdefinierte Checkout-Nachricht hinzu
In diesem Abschnitt erfahren Sie, wie Sie eine benutzerdefinierte Nachricht auf Ihrer Checkout-Seite anzeigen. Gehen Sie zunächst in Ihrem Dashboard zu Pages > Checkout .
Hier können Sie den Seiteninhalt ändern und benutzerdefinierte Nachrichten anzeigen, Medien hinzufügen und vieles mehr. Standardmäßig enthält die Checkout-Seite den WooCommerce-Checkout-Shortcode.
Wenn Sie vor und nach den Checkout-Feldern eine benutzerdefinierte Nachricht anzeigen möchten, können Sie den Absatzblock verwenden. Für diese Demonstration fügen wir einen Absatzblock vor und einen weiteren nach dem Checkout-Shortcode hinzu. Wir nennen sie einfach „Before Content“ und „After Content“.
Nachdem Sie die Seite aktualisiert haben, werfen Sie einen Blick auf die Checkout-Seite vom Frontend und Sie sehen die benutzerdefinierten Nachrichten, die wir gerade hinzugefügt haben.
Ebenso können Sie jede Art von Inhalten wie Bilder, benutzerdefinierte Nachrichten, Gutscheincodes und mehr zur Checkout-Seite hinzufügen.
So ändern Sie die Position der Fehlermeldung
Standardmäßig zeigt WooCommerce die Fehlermeldungen auf der linken Seite an. Die gute Nachricht ist, dass Sie das mit ein bisschen CSS ändern können. In diesem Abschnitt zeigen wir Ihnen, wie Sie die Position der Fehlermeldung mit einem CSS-Snippet ändern können.
Melden Sie sich zuerst bei Ihrem WordPress-Admin-Dashboard an und gehen Sie zu Darstellung > Anpassen .
Öffnen Sie den Customizer und gehen Sie zum Abschnitt Zusätzliches CSS .
Hier können Sie Ihre CSS-Snippets hinzufügen. Der WordPress Customizer zeigt die Änderungen in der Live-Vorschau an, sodass Sie jedes Update in Echtzeit sehen können.
Kopieren Sie einfach dieses Snippet und fügen Sie es in den Assistenten ein.
form.checkout {
-ms-flex-wrap: umwickeln;
Flex-Wrap: Wrap;
}
.woocommerce-NoticeGroup-checkout {
-webkit-box-flex: 1;
-ms-flex: 1 1 100 %;
Flex: 1 1 100 %;
maximale Breite: 100 %;
Breite: 100 %;
Rand unten: 40px;
Rand oben: 20px;
}
.woocommerce-NoticeGroup-checkout ul.woocommerce-Fehler {
Position: relativ;
oben: automatisch;
unten: automatisch;
links:auto;
rechts: automatisch;
Polsterung rechts: 30px;
z-index: auto;
Cursor: Standard;
-ms-transformation: keine;
transformieren: keine;
-webkit-transform: keine;
Animation: keine;
-webkit-animation: keine;
}
.woocommerce-NoticeGroup-checkout ul.woocommerce-Fehler: nach {
Inhalt: keine;
}
.woocommerce-NoticeGroup-checkout ul.woocommerce-error.hidden-notice {
Animation: keine;
-webkit-animation: keine;
}
In diesem Fall geben wir der Nachricht einen Rand von 40 Pixel unten, 20 Pixel oben, 30 Pixel Abstand rechts und 100 % Breite. Passen Sie diese Werte nach Ihren Wünschen an und denken Sie daran, die Änderungen zu speichern.
Bonus: So verbergen Sie WooCommerce-Fehler
Bevor wir diesen Leitfaden beenden, werfen wir einen Blick auf eine andere Alternative. Was ist, wenn Sie die Fehlermeldungen ausblenden möchten, anstatt die WooCommerce-Checkout-Fehlermeldungen zu ändern? Wenn das Ihr Fall ist, ist dieser Abschnitt für Sie. Wir zeigen Ihnen, wie Sie Fehler mit ein wenig Code beseitigen.
Da wir einige Kerndateien bearbeiten werden, stellen Sie sicher, dass Sie eine vollständige Sicherung Ihrer Website erstellen und ein untergeordnetes Design verwenden, falls Sie noch keines haben.
Um Fehler auszublenden, passen wir die Datei wp-config.php an . Zunächst empfehlen wir, eine Kopie der Datei wp-config.php auf Ihren lokalen Computer herunterzuladen, um ein Backup zu haben, das Sie bei Bedarf wiederherstellen können.
Es gibt mehrere Möglichkeiten, auf WordPress-Kerndateien zuzugreifen. Für diese Demo verwenden wir ein dediziertes Plugin namens File Manager. Gehen Sie zunächst in Ihrem Dashboard zu Plugins > Neu hinzufügen und suchen Sie nach Dateimanager. Wenn Sie das Plugin gefunden haben, installieren Sie es und aktivieren Sie es auf Ihrer Website.
Nach der Aktivierung sehen Sie auf der linken Seite die Konfiguration des Plugins. Suchen Sie nach der Datei wp-config.php .
Klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie die Option Code-Editor .
In der Mitte der Datei sehen Sie eine der folgenden Zeilen:
define('WP_DEBUG', true);
oder
define('WP_DEBUG', false);
Sobald Sie es gefunden haben, ersetzen Sie diese Zeile durch den folgenden Code und speichern Sie die Datei:
ini_set('display_errors','Off');
ini_set('error_reporting', E_ALL);
define('WP_DEBUG', false);
define('WP_DEBUG_DISPLAY', false);
Der Code schaltet alle Fehlermeldungen aus.
Das ist es! Von nun an zeigt Ihr Shop keine Fehlermeldungen mehr an.
Weitere Möglichkeiten, den Checkout anzupassen
Sehen wir uns zum Schluss noch andere Möglichkeiten an, um Ihre WooCommerce-Kaufabwicklung weiter anzupassen.
Fügen Sie benutzerdefinierte Felder zur Kasse hinzu
In diesem Abschnitt zeigen wir Ihnen, wie Sie der Checkout-Seite benutzerdefinierte Felder hinzufügen können.
Wie Sie sich vorstellen können, können Sie viele verschiedene Arten von Feldern hinzufügen. Für diese Demonstration fügen wir am Ende der Checkout-Seite ein benutzerdefiniertes Kontrollkästchen hinzu, um Käufern die Möglichkeit zu geben, Ihren Newsletter zu abonnieren und Ihre E-Mail-Liste aufzubauen.
Fügen Sie einfach das folgende Skript in die Datei functions.php Ihres Child-Themes ein:
// Checkbox-Feld add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' ); Funktion quadlayers_subscribe_checkout( $checkout ) { woocommerce_form_field( 'Abonnent', array( 'Typ' => 'Kontrollkästchen', //'erforderlich' => wahr, 'class' => array('custom-field form-row-wide'), 'label' => 'Abonnieren Sie unseren Newsletter.' ), $checkout->get_value( 'Abonnent' ) ); }
Wie Sie sehen, haben wir neben dem Kontrollkästchen das Label „Newsletter abonnieren“ hinzugefügt. Diese können Sie als Basis nehmen und an Ihren Shop anpassen.
Machen Sie Felder optional
Eine weitere interessante Option ist es, Pflichtfelder optional zu machen. Auf diese Weise lassen Sie Käufer nur die Felder ausfüllen, die für die Transaktion erforderlich sind. Auf diese Weise beschleunigen Sie den Checkout-Prozess und verbessern das Kundenerlebnis.
Wenn du zum Beispiel virtuelle Produkte verkaufst, kannst du das Feld „ Adresse “ im Bereich „ Abrechnung “ optional machen, indem du den folgenden Code in die Datei „ functions.php “ deines untergeordneten Designs einfügst.
add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional'); Funktion wc_address_field_optional( $Felder ) { $fields['billing']['billing_address_1']['required'] = false; $felder zurückgeben; }
Weitere Informationen dazu finden Sie in unserem Leitfaden zum Anpassen der WooCommerce-Kaufabwicklung.
Fazit
Zusammenfassend lässt sich sagen, dass Sie durch Bearbeiten der Checkout-Hinweise Ihrem Checkout eine weitere Anpassungsebene hinzufügen und sich von Ihren Mitbewerbern abheben können.
In diesem Leitfaden haben wir zwei Hauptwege gesehen, um WooCommerce-Checkout-Fehlermeldungen zu ändern: mit einem dedizierten Plugin und programmgesteuert mit ein wenig Code. Die Verwendung eines Plugins ist eine gute Alternative für diejenigen, die keine Programmierkenntnisse haben oder es vorziehen, ihre Shops mit wenigen Klicks anzupassen.
Wenn Sie hingegen über Programmierkenntnisse verfügen und keine weiteren Plugins installieren möchten, können Sie Ihre eigene Lösung codieren. Dies gibt Ihnen viel mehr Flexibilität und ermöglicht es Ihnen, alles zu tun, was Sie wollen. Stelle sicher, dass du das Snippet in dein Child-Theme einfügst, damit du deine Anpassung nicht verlierst, nachdem du dein Parent-Theme aktualisiert hast.
Wir hoffen, dass Sie diesen Artikel hilfreich fanden und erfahren haben, wie Sie WooCommerce Checkout-Fehlermeldungen ändern können. Wenn ja, teilen Sie diesen Beitrag bitte mit Ihren Freunden in den sozialen Medien.
Weitere interessante Artikel finden Sie in diesen Beiträgen:
- So ändern Sie den Text „Zur Kasse gehen“.
- Beste WooCommerce-Checkout-Plugins
- So erstellen Sie direkte Checkout-Links in WooCommerce