Comment ajouter un champ de paiement personnalisé à un e-mail WooCommerce

Publié: 2020-12-17

Ajouter un champ de paiement personnalisé à l'e-mail WooCommerce Souhaitez-vous ajouter un champ de paiement personnalisé à envoyer par e-mail dans votre boutique WooCommerce ?

WooCommerce est un puissant plugin de commerce électronique pour WordPress qui est flexible pour la personnalisation.

Dans cet article, vous verrez comment vous pouvez personnaliser dynamiquement des champs supplémentaires tels que la suppression de l'adresse de facturation, l'ajout/la modification de champs de paiement personnalisés et l'enregistrement de ces champs personnalisés dans la base de données. De plus, je vais vous montrer comment vous pouvez ajouter ces champs personnalisés pour commander des e-mails.

Supprimer les informations supplémentaires des champs de paiement personnalisés

La première étape consiste à ajouter un extrait de code PHP personnalisé dans le fichier function.php de votre thème pour supprimer les champs d'adresse de l'écran de facturation :

 fonction woocommerce_remove_additional_information_checkout($fields){

    unset( $fields["billing_first_name"] );

    unset( $fields["billing_last_name"] );

    renvoie $champs ;

}

add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );

Voici le résultat : supprimer les champs d'adresse de l'écran de facturation

Les extraits de code suivants ajouteront un champ personnalisé à la page de paiement, enregistreront les données dans la méta de la commande et afficheront la méta de la commande dans l'administrateur des commandes. J'ai reçu plusieurs questions sur le processus d'ajout de plusieurs champs. Pour aider à résoudre le problème, nous allons ajouter un extrait de code pour ajouter deux champs.

Ajouter un champ de paiement personnalisé à l'e-mail WooCommerce

Les extraits de code doivent être ajoutés au fichier functions.php de votre thème. Je recommande d'utiliser un thème enfant afin que vos modifications ne soient pas perdues lors d'une mise à niveau.

1. Ajouter un champ de paiement personnalisé WooCommerce

Ajoutez le code suivant dans le fichier functions.php pour ajouter un champ de paiement WooCommerce personnalisé :

 fonction njengah_custom_checkout_fields($fields){

$champs['njengah_extra_fields'] = tableau(

'njengah_text_field' => tableau(

'type' => 'texte',

'obligatoire' => vrai,

'label' => __( 'Champ de saisie de texte' )

),

'njengah_dropdown' => tableau(

'type' => 'sélectionner',

'options' => array( 'first' => __( 'First Option' ), 'second' => __( 'Second Option' ), 'third' => __( 'Third Option' ) ),

'obligatoire' => vrai,

'étiquette' => __( 'Champ déroulant' )

)

);

renvoie $champs ;

}

add_filter( 'woocommerce_checkout_fields', 'njengah_custom_checkout_fields' );

fonction njengah_extra_checkout_fields(){

$checkout = WC()->checkout(); ?>

<div class="extra-fields">

<h3><?php _e( 'Champs supplémentaires' ); ?></h3>

<?php

foreach ( $checkout->checkout_fields['njengah_extra_fields'] as $key => $field ) : ?>

<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

</div>

<?php }

add_action( 'woocommerce_checkout_after_customer_details' ,'njengah_extra_checkout_fields' );

Voici le résultat : section champs supplémentaires

2. Enregistrer les données des champs WooCommerce de paiement personnalisés

Ajoutez le code suivant dans le fichier functions.php pour enregistrer les données des champs WooCommerce de paiement personnalisés.

 function njengah_save_extra_checkout_fields( $order_id, $posted ){

// n'oubliez pas le nettoyage approprié si vous utilisez un type de champ différent

if( isset( $posted['njengah_text_field'] ) ) {

update_post_meta( $order_id, '_njengah_text_field', sanitize_text_field( $posted['njengah_text_field'] ) );

}

if( isset( $posté['njengah_dropdown'] ) && in_array( $posté['njengah_dropdown'], array( 'premier', 'deuxième', 'troisième' ) ) ) {

update_post_meta( $order_id, '_njengah_dropdown', $posté['njengah_dropdown'] );

}

}

add_action('woocommerce_checkout_update_order_meta', 'njengah_save_extra_checkout_fields', 10, 2);

3. Afficher les données des champs personnalisés WooCommerce à l'utilisateur

Ajoutez le code suivant dans le fichier functions.php pour afficher les données des champs personnalisés WooCommerce à l'utilisateur.

 fonction njengah_display_order_data( $order_id ){ ?>

<h2><?php _e( 'Informations supplémentaires' ); ?></h2>

<table class="shop_table shop_table_responsive informations_supplémentaires">

<tbody>

<tr>

<th><?php _e( 'Champ de saisie de texte :' ); ?></th>

<td><?php echo get_post_meta( $order_id, '_njengah_text_field', true ); ?></td>

</tr>

<tr>

<th><?php _e( 'Champ déroulant :' ); ?></th>

<td><?php echo get_post_meta( $order_id, '_njengah_dropdown', true ); ?></td>

</tr>

</tbody>

</table>

<?php }

add_action( 'woocommerce_thankyou', 'njengah_display_order_data', 20 );

add_action( 'woocommerce_view_order', 'njengah_display_order_data', 20 );

Voici le résultat : informations supplémentaires

4. Afficher les champs de commande personnalisés de l'administrateur WooCommerce

Cet extrait de code fonctionnera comme les données d'adresse d'expédition et de facturation et révélera les entrées lorsque l'utilisateur clique sur l'icône du petit crayon.

 function njengah_display_order_data_in_admin( $order ){ ?>

<div class="order_data_column">

<h4><?php _e( 'Informations supplémentaires', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Modifier', 'woocommerce' ); ?></a></h4>

<div class="adresse">

<?php

echo '<p><strong>' . __( 'Champ de texte' ) . ':</strong>' . get_post_meta( $order->id, '_njengah_text_field', true ) . '</p>' ;

echo '<p><strong>' . __( 'Menu déroulant' ) . ':</strong>' . get_post_meta( $order->id, '_njengah_dropdown', true ) . '</p>' ; ?>

</div>

<div class="edit_address">

<?php woocommerce_wp_text_input( array( 'id' => '_njengah_text_field', 'label' => __( 'Some field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>

<?php woocommerce_wp_text_input( array( 'id' => '_njengah_dropdown', 'label' => __( 'Another field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>

</div>

</div>

<?php }

add_action( 'woocommerce_admin_order_data_after_order_details', 'njengah_display_order_data_in_admin' );




function njengah_save_extra_details( $post_id, $post ){

update_post_meta( $post_id, '_njengah_text_field', wc_clean( $_POST[ '_njengah_text_field' ] ) );

update_post_meta( $post_id, '_njengah_dropdown', wc_clean( $_POST[ '_njengah_dropdown' ] ) );

}

add_action( 'woocommerce_process_shop_order_meta', 'njengah_save_extra_details', 45, 2 );

Voici le résultat : modifier les informations supplémentaires

5. Ajouter des champs personnalisés WooCommerce aux e-mails de commande

Ajoutez le code suivant dans le fichier functions.php pour ajouter des champs personnalisés WooCommerce aux e-mails de commande. Si vous souhaitez personnaliser la sortie des e-mails, vous pouvez ajouter du texte à l'un des crochets disponibles dans les modèles d'e-mail. 

 function njengah_email_order_meta_fields( $fields, $sent_to_admin, $order ) {

$champs['instagram'] = tableau(

'label' => __( 'Un champ' ),

'value' => get_post_meta( $order->id, '_njengah_text_field', true ),

);

$champs['licence'] = tableau(

'label' => __( 'Un autre champ' ),

'value' => get_post_meta( $order->id, '_njengah_dropdown', true ),

);

renvoie $champs ;

}

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

function njengah_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {

$njengah_text_field = get_post_meta( $order->id, '_njengah_text_field', true );

$njengah_dropdown = get_post_meta( $order->id, '_njengah_dropdown', true );

si( $plain_text ){

echo 'La valeur d'un champ est ' . $njengah_text_field . ' alors que la valeur d'un autre champ est ' . $njengah_dropdown ;

} autre {

echo '<p>La valeur du <strong>champ de saisie de texte</strong> est ' . $njengah_text_field. ' tandis que la valeur de <strong>liste déroulante</strong> est ' . $njengah_dropdown . '</p>' ;

}

}

add_action('woocommerce_email_customer_details', 'njengah_show_email_order_meta', 30, 3 );

Conclusion

En résumé, j'ai illustré comment vous pouvez ajouter, modifier et enregistrer des champs personnalisés sur la page de paiement WooCommerce. De plus, j'ai modifié les modèles d'e-mails pour ajouter les informations des champs personnalisés des e-mails. Si vous avez besoin de personnaliser davantage la page de paiement, vous pouvez utiliser un plug-in de personnalisation de paiement.

Articles similaires

  1. Comment ajouter un champ de texte personnalisé Woocommerce sur la page produit
  2. Comment créer une zone de widget personnalisée dans WordPress étape par étape
  3. Comment déplacer le menu principal Storefront WooCommerce
  4. Comment masquer les tarifs d'expédition si la livraison gratuite est disponible WooCommerce
  5. Comment masquer la quantité en stock dans WooCommerce
  6. Comment masquer le SKU, la catégorie, les balises Meta Product Page WooCommerce
  7. Comment masquer le bouton de mise à jour du panier WooCommerce Cart Page
  8. Comment masquer l'en-tête de la description du produit WooCommerce
  9. Comment masquer n'importe quel onglet de la page Mon compte WooCommerce
  10. Comment modifier les messages d'erreur de paiement WooCommerce