So fügen Sie ein Datumsfeld zur Kasse in WooCommerce hinzu

Veröffentlicht: 2020-12-20

WooCommerce Datumsfeld zur Kasse hinzufügen Viele Online-Shops benötigen benutzerdefinierte Felder auf der Checkout-Seite. Beispielsweise benötigt eine Konditorei möglicherweise ein Lieferdatumsfeld auf der Checkout-Seite.

Das Schöne an WooCommerce ist, dass Sie benutzerdefinierte Felder auf der Checkout-Seite hinzufügen können, z. B. nach Rechnungs- und Versandfeldern oder vor der Schaltfläche „Bestellung aufgeben“.

WooCommerce Datumsfeld zur Kasse hinzufügen

In diesem Beitrag erfahren Sie, wie Sie ein Lieferdatumsfeld auf der Checkout-Seite von WooCommerce hinzufügen. Ich werde es nach dem Abrechnungsfeld hinzufügen. In diesem Feld können Kunden das Lieferdatum für ihre Bestellung auswählen. Außerdem werde ich Ihnen mitteilen, wie Sie das benutzerdefinierte Feld auf der Seite „E-Mail-Benachrichtigungen und Bestellung erhalten“ anzeigen können.

1. Hinzufügen des benutzerdefinierten Datumsfelds auf der WooCommerce-Checkout-Seite

WooCommerce ermöglicht es Ihnen, benutzerdefinierte Felder an verschiedenen Stellen hinzuzufügen, abhängig von den Hooks, die Sie verwenden werden. Es gibt viele Aktionen, die von WooCommerce auf der Checkout-Seite definiert werden. Für dieses Tutorial füge ich das Feld nach den Rechnungs- oder Lieferadressenfeldern hinzu.

Um das benutzerdefinierte Feld hier hinzuzufügen, verwenden wir die Aktion woocommerce_after_checkout_billing_form . Fügen Sie den folgenden Code in der Datei functions.php hinzu: 

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_extra_fields_after_billing_address' , 10, 1 );

Funktion njengah_extra_fields_after_billing_address () {

            _e( "Lieferdatum: ", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Lieferdatum">

  <?php

}

Das ist das Ergebnis: Feld Lieferdatum

Kunden müssen das Lieferdatum für die Bestellung auswählen. Das bedeutet, dass wir für dieses Feld einen Kalender hinzufügen müssen. Alternativ können Sie dies mit einem einfachen Textfeld versuchen, um es einfach zu halten.

Wir verwenden den jQuery-Datumspicker. Das bedeutet, dass wir die erforderlichen JavaScript- und CSS-Dateien mithilfe der WordPress-Aktion wp_enqueue_scripts einbinden müssen.

 add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );

Funktion display_extra_fields_after_billing_address () {

_e( "Lieferdatum: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Lieferdatum">

<Skript>

jQuery(Dokument).ready(Funktion( $ ) {

$( ".add_delivery_date").datepicker( {

Mindestdatum: 0,

} );

} );

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

Funktion enqueue_datepicker() {

if ( is_checkout() ) {

// Laden Sie das Datepicker-Skript (in WordPress vorregistriert).

wp_enqueue_script( 'jquery-ui-datepicker' );

// Sie brauchen Styling für die Datumsauswahl. Der Einfachheit halber habe ich auf das von Google gehostete jQuery-UI-CSS verlinkt.

wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );

wp_enqueue_style( 'jquery-ui' );

}

}

Das ist das Ergebnis: Kalender auf dem Feld

Wie der Kodex funktioniert

Ich habe die Funktion display_extra_fields_after_billing_address() an die WooCommerce-Aktion angehängt. Zuerst drucken wir das Etikett „Lieferdatum“ und fügen ein Eingabefeld vom Typ Text für die Datumsauswahl hinzu, das wir mit der Funktion jquery datepicker( ) verwenden können.

Danach habe ich die Funktion enqueue_datepicker() mit der WordPress-Aktion angehängt. In dieser Funktion habe ich den jQuery-Datepicker und seinen Stil mithilfe von wp_enqueue_script() .

Sobald wir das obige Code-Snippet hinzugefügt haben, wird unser benutzerdefiniertes Feld unter den Feldern für die Rechnungsadresse angezeigt.

2. Anzeigen des benutzerdefinierten Felds in E-Mail-Benachrichtigungen

Der nächste Schritt besteht darin, das benutzerdefinierte Feld hinzuzufügen, das in der Kunden-E-Mail angezeigt werden soll. Fügen Sie der Datei functions.php den folgenden Code hinzu:

 add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

Funktion add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

Wie der Kodex funktioniert

Ich habe die Funktion add_order_delivery_date_to_order() an die WooCommerce-Aktion angehängt. Das Lieferdatum wird der Post-Meta-Tabelle hinzugefügt. Es wird überprüft, ob der Kunde das Datum ausgewählt hat, bevor es der Datenbank hinzugefügt wird.

Wenn ein Kunde das Datum auswählt, wird es mithilfe der WordPress-Funktion add_post_meta() in der Tabelle wp_postmeta gespeichert. Diese Funktion erfordert post_id , Metaschlüssel und Metawert. In unserem Fall haben wir die Bestell-ID als post_id verwendet, der Metaschlüssel ist _delivery_date und der Metawert ist das vom Kunden ausgewählte Lieferdatum.

Ich empfehle Ihnen, Ihre $_POST Variablendaten zu bereinigen. Es entfernt Zeilenumbrüche, Tabulatoren und zusätzliche Leerzeichen aus der Zeichenfolge.

Nach Speicherung des Lieferdatums in der Datenbank zeigen wir es in der Kunden-E-Mail an. Fügen Sie den folgenden Code in der Datei functions.php hinzu:

 add_filter( 'woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails' , 10, 3 );

Funktion add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} anders {

$order_id = $order->id;

}

$Lieferdatum = get_post_meta( $order_id, '_Lieferdatum', true );

if ( '' != $Lieferdatum ) {

$fields[ 'Lieferdatum' ] = array(

'label' => __( 'Lieferdatum', 'add_extra_fields' ),

'value' => $Lieferdatum,

);

}

$felder zurückgeben;

}

3. Anzeigen des benutzerdefinierten Felds auf der WooCommerce-Dankeschön-Seite

Um das benutzerdefinierte Feld auf der Seite WooCommerce Order Received anzuzeigen, verwenden wir den WooCommerce-Filter woocommerce_order_details_after_order_table . Fügen Sie den folgenden Code in der Datei functions.php hinzu:

 add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

Funktion add_delivery_date_to_order_received_page ( $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} anders {

$order_id = $order->id;

}

$Lieferdatum = get_post_meta( $order_id, '_Lieferdatum', true );

if ( '' != $Lieferdatum ) {

echo '<p><strong>' . __( 'Lieferdatum', 'add_extra_fields' ) . ':</strong> ' . $Lieferdatum;

}

}

Das ist das Ergebnis: Lieferdatum auf der Dankesseite

Wie der Kodex funktioniert

Ich habe add_delivery_date_to_order_received_page() an den WooCommerce-Filter angehängt. Der Parameter dieser Funktion wird verwendet, um die Auftrags-ID abzurufen. Die Bestell-ID wird benötigt, um das ausgewählte Lieferdatum aus der wp_postmeta Tabelle abzurufen.

Das ist das Ergebnis:

Vollständiger Codeausschnitt

Falls Sie Probleme hatten, dem Tutorial zu folgen, finden Sie hier das vollständige Code-Snippet. Fügen Sie es in die Datei functions.php ein:

 /*

Plugin-Name: Fügen Sie Felder auf der WooCommerce-Checkout-Seite hinzu.

Beschreibung: Ein einfaches Demo-Plugin zum Hinzufügen zusätzlicher Felder auf der Checkout-Seite von WooCommerce.

*/

add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );

Funktion display_extra_fields_after_billing_address () {

_e( "Lieferdatum: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Lieferdatum">

<Skript>

jQuery(Dokument).ready(Funktion($) {

$(".add_delivery_date").datepicker({

Mindestdatum: 0,

});

});

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

Funktion enqueue_datepicker() {

if ( is_checkout() ) {

// Laden Sie das Datepicker-Skript (in WordPress vorregistriert).

wp_enqueue_script( 'jquery-ui-datepicker' );

// Sie brauchen Styling für die Datumsauswahl. Der Einfachheit halber habe ich auf das von Google gehostete jQuery-UI-CSS verlinkt.

wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );

wp_enqueue_style( 'jquery-ui' );

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

Funktion add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

add_filter( 'woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails' , 10, 3 );

Funktion add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} anders {

$order_id = $order->id;

}

$Lieferdatum = get_post_meta( $order_id, '_Lieferdatum', true );

if ( '' != $Lieferdatum ) {

$fields[ 'Lieferdatum' ] = array(

'label' => __( 'Lieferdatum', 'add_extra_fields' ),

'value' => $Lieferdatum,

);

}

$felder zurückgeben;

}

add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

Funktion add_delivery_date_to_order_received_page ( $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} anders {

$order_id = $order->id;

}

$Lieferdatum = get_post_meta( $order_id, '_Lieferdatum', true );

if ( '' != $Lieferdatum ) {

echo '<p><strong>' . __( 'Lieferdatum', 'add_extra_fields' ) . ':</strong> ' . $Lieferdatum;

}

}

Das ist es!

Fazit

Zusammenfassend haben Sie gelernt, wie Sie dem Checkout ein benutzerdefiniertes Datumsfeld hinzufügen, es in den E-Mail-Benachrichtigungen anzeigen und auf der Dankesseite anzeigen. Wenn Sie jedoch nicht mit dem Bearbeiten von Code vertraut sind, können Sie ein Checkout-Customizer-Plugin verwenden. Ich empfehle die Verwendung eines Child-Themes, damit deine Änderungen bei einem Update nicht verloren gehen.

Ähnliche Artikel

  1. So fügen Sie ein ausgewähltes Feld zur Kasse hinzu WooCommerc
  2. So richten Sie den WooCommerce Checkout-Feldplatzhalter ein
  3. So verstecken Sie Produkte ohne Preis in WooCommerce
  4. So verstecken Sie Produkte ohne Bild in WooCommerce
  5. So verbergen Sie einen beliebigen Tab Meine Kontoseite WooCommerce
  6. So verbergen Sie die Schaltfläche „Warenkorb aktualisieren“ auf der WooCommerce-Warenkorbseite
  7. So verbergen Sie die Menge auf Lager in WooCommerce
  8. So erstellen Sie ein Konto an der Kasse WooCommerce
  9. So bearbeiten Sie erforderliche WooCommerce Checkout-Felder
  10. So erstellen Sie bedingte WooCommerce-Checkout-Felder
  11. So bearbeiten Sie die WooCommerce Checkout-Seitenvorlage
  12. So fügen Sie die Checkout-Seite der WooCommerce-Umsatzsteuernummer hinzu
  13. So fügen Sie ein verstecktes Feld auf der WooCommerce-Checkout-Seite hinzu
  14. So verschieben Sie das Hauptmenü Storefront WooCommerce
  15. So verbergen Sie Versandkosten, wenn kostenloser Versand verfügbar ist WooCommerce
  16. So fügen Sie eine WooCommerce-Rechnungs-Checkout-Seite hinzu
  17. So fügen Sie ein zusätzliches Feld im WooCommerce-Checkout-Formular hinzu
  18. So fügen Sie das WooCommerce Checkout-Standardland hinzu
  19. So verbergen Sie die Produktbeschreibungsüberschrift WooCommerce