So fügen Sie der WooCommerce-Checkout-Seite benutzerdefinierte Felder hinzu
Veröffentlicht: 2020-07-21Möchten Sie Ihre Kasse anpassen ? In dieser Anleitung zeigen wir Ihnen, wie Sie benutzerdefinierte Felder zur Checkout-Seite in WooCommerce hinzufügen , um Ihren Shop auf die nächste Stufe zu bringen.
Warum den WooCommerce-Checkout anpassen?
In QuadLayers haben wir bereits gesehen, wie man die Shop-Seite in WooCommerce anpasst. Heute sehen wir uns an, wie Sie dasselbe tun und benutzerdefinierte Felder in den Checkout aufnehmen können. Der Checkout ist eine der wichtigsten Seiten für jeden Online-Shop . Hierhin möchten Sie Ihre Käufer führen, damit sie den Kauf abschließen und Sie den Verkauf abschließen. Um Ihre Konversionsraten und Ihren Umsatz zu verbessern, ist es daher ein Muss, den Checkout mit benutzerdefinierten Feldern zu optimieren.
Wie sieht die perfekte Checkout-Seite aus? Das hängt stark von Ihrem Unternehmen ab. Beispielsweise unterscheidet sich der Checkout für physische Produkte von dem für digitale Produkte. Du wählst einen einseitigen oder mehrseitigen Checkout, zeigst Felder an oder versteckst sie, verwendest verschiedene Farben und so weiter. Das Wichtigste ist jedoch, dass Ihr Checkout Vertrauen beim Benutzer erzeugt, nicht ablenkt und so optimiert ist, dass der Käufer so wenig Zeit wie möglich verbringt.
Wie füge ich der WooCommerce-Checkout-Seite benutzerdefinierte Felder hinzu?
Es gibt zwei Möglichkeiten, benutzerdefinierte Felder auf der Checkout-Seite in WooCommerce hinzuzufügen oder auszublenden:
- Mit Plugins
- Programmatisch
Wenn Sie keine Programmierkenntnisse haben, empfehlen wir Ihnen, sich diese Plugins anzusehen:
- WooCommerce Direct Checkout : Es ist ein hervorragendes Tool, um den Checkout-Prozess zu vereinfachen und Benutzer von der Produktseite zum Checkout umzuleiten. Es hat eine kostenlose Version und Premium-Pläne, die bei 19 USD beginnen.
- WooCommerce Checkout Manager : Mit mehr als 90.000 aktiven Installationen ist der Checkout Manager ein großartiges Plugin zur Steigerung Ihrer Konversionsraten. Sie können Felder auf der Checkout-Seite hinzufügen, anpassen und löschen. Es ist ein Freemium-Tool mit einer kostenlosen Version und Pro-Plänen ab 19 USD.
Diese Checkout-Plugins sind eine ausgezeichnete Wahl und erledigen die Arbeit reibungslos. Wenn Sie jedoch keine Plugins installieren möchten, können Sie Ihre Lösung codieren. In diesem Leitfaden konzentrieren wir uns darauf, wie Sie mit etwas Codierung benutzerdefinierte Felder zur WooCommerce-Checkout-Seite hinzufügen können . 
Fügen Sie programmgesteuert benutzerdefinierte Felder zur WooCommerce-Kaufabwicklung hinzu
In diesem Abschnitt erfahren Sie, wie Sie der Checkout-Seite von WooCommerce programmgesteuert benutzerdefinierte Felder hinzufügen . Wir zeigen Ihnen, wie Sie Folgendes einbinden:
- Text
- Kontrollkästchen
- Arten von Funkeingängen
Es gibt andere benutzerdefinierte Felder, die Sie hinzufügen können, aber bitte beachten Sie, dass sie möglicherweise eine Art Validierung benötigen. In diesem Tutorial konzentrieren wir uns also auf diese 3 Typen und überspringen Felder, die eine Validierung der eingegebenen Werte erfordern. Darüber hinaus werden wir benutzerdefinierte Felder in der Backend-Bestellliste und den E-Mail-Vorlagen anzeigen.
HINWEIS : Denken Sie daran, dass Sie eine Sicherheitsvalidierung implementieren müssen, wenn Sie Ihren Projekten andere Felder hinzufügen möchten.
Um benutzerdefinierte Felder zur Checkout-Seite von WooCommerce hinzuzufügen, gibt es also zwei Optionen:
- Sie können Ihre Skripte in einem untergeordneten Thema codieren
- Erstellen Sie ein benutzerdefiniertes Plugin
Um eine besser skalierbare und gut organisierte Lösung zu erstellen, erstellen wir ein benutzerdefiniertes Plugin . Darüber hinaus kann ein benutzerdefiniertes Plugin im Gegensatz zum Child-Theme-Ansatz auch der Ausgangspunkt für die Weiterentwicklung sein. Wenn Sie jedoch lieber ein Child-Theme verwenden, empfehlen wir Ihnen, sich diese Anleitung anzusehen.
Fügen Sie mit einem benutzerdefinierten Plugin benutzerdefinierte Felder zur WooCommerce-Kaufabwicklung hinzu
Das benutzerdefinierte Plugin, das wir erstellen werden, wird drei Dateien haben.
- Hauptsächlich
- Vorderes Ende
- Backend
Die Hauptdatei fungiert als Gateway-Eingang zur Front-End-Datei, die wir für unsere Front-End-Skripte verwenden werden. Außerdem fügen wir die dritte Datei hinzu, in der sich die Backend-Skripts befinden. Es ist erwähnenswert, dass diese Front-End-Datei die Hauptbasisdatei sein wird und in eine Hierarchiedatei auf niedriger Ebene verschoben werden sollte (genau wie unsere Back-End-Datei), wenn Sie weitere Klassen hinzufügen. Sehen wir uns nun an, wie Sie mithilfe eines benutzerdefinierten Plugins benutzerdefinierte Felder zur Checkout-Seite von WooCommerce hinzufügen .
1. Öffnen Sie Ihre bevorzugte IDE und erstellen Sie einen Ordner mit drei Dateien:
QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (Frontend-Datei) /__/__class_qlccf_back.php (Backend-Datei) /__QuadLayers_checkout_fields.php (Hauptdatei)
2. Hauptdatei
Die Hauptdatei ist QuadLayers_checkout_fields.php :
<?php
/**
* @link https://quadlayers.com/
* @seit 1.0.0
* Plugin-Name: Benutzerdefinierte QuadLayers Checkout-Felder
* Plugin-URI: https://quadlayers.com/
* Beschreibung: Plugin zum Erstellen benutzerdefinierter Felder auf der Checkout-Seite von WooCommerce, Drucken in Backend-Bestellungen und E-Mail-Vorlagen
* Version: 1.0.0
* Autor: Sebastopolys
* Autoren-URI: https://quadlayers.com/
* Textdomäne: qlccf
*/
if(!defined('ABSPATH')){sterben('-1');}
elseif(!class_exists('run_init')){
letzte Klasse run_init{
öffentliche statische Funktion run(){
return include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
}
}
run_init::run();
}
anders{
echo "<h3>FEHLER - Vorhandene run_init-Klasse in QuadLayers_checkout_fields.php !</h3>";
}
Sie können die Plugin-Informationen, Funktionen und Dateinamen ändern und Ihre eigenen eingeben. Aber wir empfehlen Ihnen, die Skripte zuerst zu kopieren und einzufügen, ohne etwas zu bearbeiten, damit Sie besser verstehen, wie sie funktionieren.
3. Front-End-Klassendatei
Die Frontend-Datei ist class_qlccf_base.php . Hier befindet sich die Hauptklasse, und Sie können eine unbegrenzte Anzahl von Klassen und Funktionen hinzufügen. Eine abstrakte Klasse kann nicht instanziiert werden, also muss sie von einer anderen Klasse geerbt werden. Hier ist die Frontend-Datei und eine detaillierte Erklärung nach dem Code:
<?php
if(!defined('ABSPATH')){sterben('-1');}
elseif(!class_exists('base_class')){
abstrakte Klasse base_class{
public const VERS = '1.1.0';// <-- Version des Plugins
public const PREFIX = 'qlccf';// <-- Plugin-Präfix
public const PLDIR = __DIR__ ;// <-- Plugin Dir Pfad
public const PLPAT = __FILE__ ;// <-- Dateipfad
öffentliche Funktion add_base_hooks(){
add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));
add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
add_action( 'woocommerce_checkout_update_order_meta', array($this, 'quadlayers_save_function' ));
}
// Kontrollkästchen in der Woocommerce-Kasse einfügen - Hook: after_order_notes
öffentliche Funktion quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field( 'subscriptor', array(
'Typ' => 'Kontrollkästchen',
//'erforderlich' => wahr,
'class' => array('custom-field form-row-wide'),
'label' => 'Abonnieren Sie unseren Newsletter.'
), $checkout->get_value( 'subscriptor' ) );
}
// Text in den Checkout woocommerce einfügen - Hook: after_billing_form
öffentliche Funktion quadlayers_email_checkout($checkout2){
woocommerce_form_field( 'altmail', array(
'Typ' => 'E-Mail',
//'erforderlich' => wahr,
'class' => array('custom-field form-row-wide'),
'label' => 'Alternative E-Mail.'
), $checkout2->get_value( 'altmail' ) );
}
// Benutzerdefiniertes Funkfeld in Checkout WooCommerce einfügen - Hook: before_order_notes
öffentliche Funktion quadlayers_radio_checkout($checkout3){
woocommerce_form_field( 'feed', array(
'Typ' => 'Radio',
//'erforderlich' => wahr,
'class' => array('custom-field form-row-wide'),
'label' => 'Wie haben Sie uns gefunden?.',
'Optionen' => Array(
'Google' => 'Google',
'Freund' => 'Freund',
'Facebook' => 'Facebook',
'Youtube' => 'YouTube',
'Andere' => 'Andere'
)
));
}
// Alle benutzerdefinierten Feldwerte speichern
öffentliche Funktion qualayers_save_function( $order_id ){
if ( ! empty( $_POST['Subskriptor'] ) ) {
update_post_meta( $order_id, 'subscriptor', sanitize_text_field( $_POST['subscriptor'] ) );
}
if ( ! empty( $_POST['altmail'] ) ) {
update_post_meta( $order_id, 'altmail', sanitize_text_field( $_POST['altmail'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed', sanitize_text_field( $_POST['feed'] ) );
}
}
}// Backend-Klasse einschließen
include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
anders{
echo "<h3>INITIALISIERUNGSFEHLER - Existierende base_class-Klasse !</h3>";
}
Nachdem wir die Klasse deklariert haben, definieren wir einige Konstanten, die wir später verwenden können. Dann schließen wir alle WooCommerce-Hooks, die wir verwenden werden, in eine einzige Methode ein, die wir add_base_hooks() nennen.
Da eine abstrakte Klasse nicht instanziiert werden kann, führen wir diese Methode von unserer Backend-Datei aus, damit sie alle hier deklarierten Hooks ausführt. Wir verwenden jeden der Haken für eine andere Aufgabe und weisen jedem von ihnen eine der folgenden Methoden zu. Dh dieser Hook: woocommerce_after_order_notes in unserer Methode add_base_hooks() führt die Methode quadlayers_subscribe_checkout() aus, die beide in der Klasse base_class definiert sind.
Beachten Sie, wie wir einige der WordPress- und WooCommerce-Funktionen verwenden: woocommerce_form_field() Es gibt ein benutzerdefiniertes Feld im WooCommerce-Checkout-Formular aus. update_post_meta() Diese native WordPress-Funktion wird häufig verwendet, um die Datenbankmetadaten von Beiträgen, Produkten und anderen benutzerdefinierten Beitragstypen zu aktualisieren. Darüber hinaus sind die verfügbaren Eingabefeldtypen:
| Text | wählen | Radio |
| Passwort | Terminzeit | datetime-lokal |
| Datum | Monat | Zeit |
| Woche | Nummer | |
| URL | Tel |
4.Die Backend-Datei, class_qlccf_back.php
Hier erbt die Klasse qlccf_back_class die zuvor in der Datei base_class definierte class_qlccf_base.php file :
<?php
if(!defined('ABSPATH')){sterben('-1');}
if(!class_exists('qlccf_back_class')):
Klasse qlccf_back_class erweitert base_class{
öffentliche Funktion __construct(){
parent::add_base_hooks();
if(is_admin()):
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
add_action( 'woocommerce_email_order_meta',array($this,'qlccf_email_template'));
endif;
}
# den Wert der benutzerdefinierten Felder in der Backend-Bestellliste anzeigen
öffentliche Funktion qlccf_column_content($column){
globaler $post;
if ( 'subscriptor' === $column ) { # Kontrollkästchen
$order = wc_get_order( $post->ID);
$c_meta = $order->get_meta('subscriptor');
if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
sonst:$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
endif;
echo '<img src="'.$img_url.'"/>';
}
elseif('altmail' === $column ){ # Alternative Mail
$order = wc_get_order( $post->ID);
$e_meta = $order->get_meta('altmail');
echo $e_meta;
}
anders{}
}
# Spalte der Checkbox setzen
öffentliche Funktion qlccf_checkbox($columns){
$columns['Subskriptor'] = __( 'Subskriptor');
$Spalten zurückgeben;
}
# Spalte von Alt-Mail festlegen
öffentliche Funktion qlccf_email($columns1){
$columns1['altmail'] = __( 'Alternative Mail');
gib $spalten1 zurück;
}
# Das Feld „Alt Mail“ in die WC-E-Mail-Vorlage aufnehmen
öffentliche Funktion qlccf_email_template($order_obj){
$is_set = get_post_meta( $order_obj->get_order_number());
// zurückgeben, wenn kein benutzerdefiniertes Feld festgelegt ist
if(leer( $is_set ) )
Rückkehr;
// ok, wir machen weiter und echoen das benutzerdefinierte Feld
$alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true );
echo '<h2>Mein benutzerdefiniertes Feld</h2><p>Alternative E-Mail:'.$alt_email.'</p>';
}
}
$run=neue qlccf_back_class;
endif;
In dieser Datei definieren wir einen Konstruktor, um die Front-End-Hooks auszuführen, die wir in unserer anderen Datei angegeben haben. Dann fügen wir die Hooks hinzu, die benötigt werden, um die benutzerdefinierten Felder in der Backend-Bestellliste und den WooCommerce-E-Mail-Vorlagen anzuzeigen, indem wir ein bedingtes if() und die WordPress-Funktion is_admin() , um sie nur anzuwenden, wenn sich der Benutzer im Admin-Backend-Bildschirm befindet. Der manage_shop_order_posts_custom_column() fügt eine Spalte in die Bestellliste ein, sodass wir Felder in unserer Funktion qlccf_column_content() anzeigen können.
Sobald wir in die WooCommerce-Schleife eingehakt sind, prüfen wir, ob der Feldname zu einem unserer benutzerdefinierten Felder gehört, und wenn dies der Fall ist, drucken wir ihn aus. Mit einem bedingten if()else können wir alle unsere benutzerdefinierten Felder in derselben Funktion überprüfen.
Danach erstellen wir ein Kontrollkästchen und benutzerdefinierte Textfeldspalten in der Backend-Bestellliste. Wir müssen unsere benutzerdefinierten Spalten so einstellen, dass sie unsere benutzerdefinierten WooCommerce-Felder anzeigen, sobald ein Kunde den Bestellvorgang abgeschlossen und die Bestellung erstellt hat.
Schließlich verwenden wir in der letzten Methode den Hook woocommerce_email_order_meta , um unser benutzerdefiniertes Textfeld in der Admin-E-Mail-Vorlage anzuzeigen. Verwendete WordPress & WooCommerce Funktionen:
wc_get_order() : Ruft das aktuelle Auftragsobjekt mit allen daran angehängten Daten ab
get_meta() : Um die Metadaten der Bestellung zu erhalten
get_post_meta() : Ruft die Werte unserer benutzerdefinierten Felder ab, die in der Datenbank gespeichert sind
get_order_number() : Um die ID-Nummer der aktuellen Bestellung zu erhalten 
Einpacken
Alles in allem ist das Anpassen der Checkout-Seite ein Muss für jeden Online-Shop. In diesem Leitfaden haben wir Ihnen gezeigt, wie Sie mit ein wenig Codierung benutzerdefinierte Felder programmgesteuert zur WooCommerce-Checkout-Seite hinzufügen können. Sie haben gelernt, wie Sie Schritt für Schritt ein benutzerdefiniertes Plugin erstellen, um den Checkout zu optimieren.
Wenn Sie außerdem die Checkout-Seite anpassen und auf die nächste Stufe bringen möchten, empfehlen wir Ihnen, sich diese Schritt-für-Schritt-Anleitung anzusehen.
Haben Sie diese Methode ausprobiert? Können Sie sich Verbesserungsmöglichkeiten vorstellen? Bitte teilen Sie uns Ihre Erfahrungen im Kommentarbereich unten mit!
Wenn Sie Ihre Conversions in WooCommerce verbessern möchten, empfehlen wir Ihnen, einen Blick auf diese Anleitungen zu werfen:
- Die besten Schnellkauf-Buttons für WooCommerce
- So optimieren Sie den Checkout in WooCommerce
- Wie bearbeite ich die Shop-Seite in WooCommerce per Codierung?