Comment ajouter un champ de date à la caisse dans WooCommerce

De nombreux magasins en ligne ont besoin de champs personnalisés sur la page de paiement. Par exemple, une pâtisserie peut avoir besoin d'un champ de date de livraison sur la page de paiement.

La beauté de WooCommerce est qu'il vous permet d'ajouter des champs personnalisés sur la page de paiement, comme après les champs de facturation et d'expédition, ou avant le bouton de commande.

WooCommerce Ajouter un champ de date à la caisse

Dans cet article, vous apprendrez à ajouter un champ de date de livraison sur la page de paiement WooCommerce. Je l'ajouterai après le champ de facturation. Ce champ permettra aux clients de sélectionner la date de livraison de leur commande. De plus, je vais partager comment vous pouvez afficher le champ personnalisé sur les notifications par e-mail et la page de commande reçue.

1. Ajout du champ de date personnalisé sur la page de paiement WooCommerce

WooCommerce vous permet d'ajouter des champs personnalisés à divers endroits en fonction des crochets que vous utiliserez. Il existe de nombreuses actions définies par WooCommerce sur la page de paiement. Pour ce tutoriel, j'ajouterai le champ après les champs d'adresse de facturation ou d'expédition.

Pour ajouter le champ personnalisé ici, nous utiliserons l'action woocommerce_after_checkout_billing_form . Ajoutez le code suivant dans le fichier functions.php :

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

fonction njengah_extra_fields_after_billing_address () {

            _e( "Date de livraison : ", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Date de livraison">

  <?php

}

Voici le résultat :

Les clients doivent sélectionner la date de livraison de la commande. Cela signifie que nous devons ajouter un calendrier pour ce champ. Alternativement, vous pouvez essayer cela avec un simple champ de texte pour le garder simple.

Nous utiliserons le datepicker jQuery. Cela signifie que nous devrons inclure ses fichiers JavaScript et CSS nécessaires en utilisant l'action WordPress wp_enqueue_scripts.

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

fonction display_extra_fields_after_billing_address () {

_e( "Date de livraison : ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Date de livraison">

<script>

jQuery(document).ready(fonction( $ ) {

$( ".add_delivery_date").datepicker( {

Date min: 0,

} );

} );

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

fonction enqueue_datepicker() {

si ( is_checkout() ) {

// Charge le script datepicker (pré-enregistré dans WordPress).

wp_enqueue_script( 'jquery-ui-datepicker' );

// Vous avez besoin d'un style pour le sélecteur de date. Pour plus de simplicité, j'ai lié au CSS de l'interface utilisateur jQuery hébergé par Google.

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

wp_enqueue_style( 'jquery-ui' );

}

}

Voici le résultat :

Comment fonctionne le code

J'ai joint la fonction display_extra_fields_after_billing_address() à l'action WooCommerce. Tout d'abord, nous imprimons l'étiquette "Date de livraison" et ajoutons un champ de type texte d'entrée pour le sélecteur de date, que nous pouvons utiliser la fonction jquery datepicker( ).

Après cela, j'ai joint la fonction enqueue_datepicker() avec l'action WordPress. Dans cette fonction, j'ai ajouté le datepicker jQuery et son style en utilisant wp_enqueue_script() .

Une fois que nous avons ajouté l'extrait de code ci-dessus, il affichera notre champ personnalisé sous les champs d'adresse de facturation.

2. Affichage du champ personnalisé dans les notifications par e-mail

L'étape suivante consiste à ajouter le champ personnalisé à afficher sur l'e-mail du client. Ajoutez le code suivant au fichier functions.php :

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

fonction 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'] ) );

}

}

Comment fonctionne le code

J'ai joint la fonction add_order_delivery_date_to_order() à l'action WooCommerce. Il ajoutera la date de livraison à la méta-table de publication. Il vérifiera que le client a sélectionné la date avant de l'ajouter à la base de données.

Si un client sélectionne la date, elle est stockée dans la table wp_postmeta à l'aide de la fonction WordPress add_post_meta() . Cette fonction nécessite post_id , méta clé et méta valeur. Dans notre cas, nous avons utilisé Order id comme post_id , la méta clé sera _delivery_date et la méta valeur sera la date de livraison sélectionnée par le client.

Je vous recommande de nettoyer vos données variables $_POST . Il supprime les sauts de ligne, les tabulations et les espaces blancs supplémentaires de la chaîne.

Après avoir stocké la date de livraison dans la base de données, nous l'afficherons dans l'e-mail du client. Ajoutez le code suivant dans le fichier functions.php :

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

function 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();

} autre {

$order_id = $order->id ;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $date_de_livraison ) {

$fields[ 'Date de livraison' ] = array(

'label' => __( 'Date de livraison', 'add_extra_fields' ),

'value' => $delivery_date,

);

}

renvoie $champs ;

}

3. Affichage du champ personnalisé sur la page de remerciement WooCommerce

Pour afficher le champ personnalisé sur la page WooCommerce Order Received, nous utiliserons le filtre WooCommerce woocommerce_order_details_after_order_table . Ajoutez le code suivant dans le fichier functions.php :

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

fonction add_delivery_date_to_order_received_page ( $commande ) {

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

$order_id = $order->get_id();

} autre {

$order_id = $order->id ;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $date_de_livraison ) {

echo '<p><strong>' . __( 'Date de livraison', 'add_extra_fields' ) . ' :</strong> ' . $date_de_livraison ;

}

}

Voici le résultat :

Comment fonctionne le code

J'ai joint add_delivery_date_to_order_received_page() au filtre WooCommerce. Le paramètre de cette fonction est utilisé pour récupérer l'identifiant de la commande. L'ID de commande est nécessaire pour récupérer la date de livraison sélectionnée dans la table wp_postmeta .

Voici le résultat :

Extrait de code complet

Au cas où vous auriez eu des problèmes en suivant le tutoriel, voici l'extrait de code complet. Collez-le dans le fichier functions.php :

 /*

Nom du plugin : Ajoutez des champs sur la page de paiement WooCommerce.

Description : Un plugin de démonstration simple sur la façon d'ajouter des champs supplémentaires sur la page de paiement WooCommerce.

*/

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

fonction display_extra_fields_after_billing_address () {

_e( "Date de livraison : ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Date de livraison">

<script>

jQuery(document).ready(fonction($) {

$(".add_delivery_date").datepicker({

Date min: 0,

});

});

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

fonction enqueue_datepicker() {

si ( is_checkout() ) {

// Charge le script datepicker (pré-enregistré dans WordPress).

wp_enqueue_script( 'jquery-ui-datepicker' );

// Vous avez besoin d'un style pour le sélecteur de date. Pour plus de simplicité, j'ai lié au CSS de l'interface utilisateur jQuery hébergé par Google.

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);

fonction 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 );

function 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();

} autre {

$order_id = $order->id ;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $date_de_livraison ) {

$fields[ 'Date de livraison' ] = array(

'label' => __( 'Date de livraison', 'add_extra_fields' ),

'value' => $delivery_date,

);

}

renvoie $champs ;

}

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

fonction add_delivery_date_to_order_received_page ( $commande ) {

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

$order_id = $order->get_id();

} autre {

$order_id = $order->id ;

}

$delivery_date = get_post_meta( $order_id, '_delivery_date', true );

if ( '' != $date_de_livraison ) {

echo '<p><strong>' . __( 'Date de livraison', 'add_extra_fields' ) . ' :</strong> ' . $date_de_livraison ;

}

}

C'est ça!

Conclusion

En résumé, vous avez appris à ajouter un champ de date personnalisé à la caisse, à l'afficher dans les notifications par e-mail et à l'afficher sur la page de remerciement. Cependant, si vous n'êtes pas familiarisé avec l'édition de code, vous pouvez utiliser un plug-in de personnalisation de paiement. Je recommande d'utiliser un thème enfant afin que vos modifications ne soient pas perdues lors d'une mise à jour.

Articles similaires

1. Comment ajouter un champ de sélection à la caisse WooCommerc
2. Comment configurer l'espace réservé du champ de paiement WooCommerce
3. Comment masquer des produits sans prix dans WooCommerce
4. Comment masquer les produits sans image dans WooCommerce
5. Comment masquer n'importe quel onglet de la page Mon compte WooCommerce
6. Comment masquer le bouton de mise à jour du panier WooCommerce Cart Page
7. Comment masquer la quantité en stock dans WooCommerce
8. Comment créer un compte à la caisse WooCommerce
9. Comment modifier les champs de paiement WooCommerce requis
10. Comment créer des champs de paiement conditionnels WooCommerce
11. Comment modifier le modèle de page de paiement WooCommerce
12. Comment ajouter la page de paiement du numéro de TVA WooCommerce
13. Comment ajouter un champ caché sur la page de paiement WooCommerce
14. Comment déplacer le menu principal Storefront WooCommerce
15. Comment masquer les tarifs d'expédition si la livraison gratuite est disponible WooCommerce
16. Comment ajouter une page de paiement de facture WooCommerce
17. Comment ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce
18. Comment ajouter le pays par défaut de WooCommerce Checkout
19. Comment masquer l'en-tête de la description du produit WooCommerce