Comment modifier les détails de facturation Page de paiement WooCommerce

Publié: 2021-02-22

Il existe plusieurs façons de modifier les détails de facturation dans WooCommerce. Dans ce didacticiel, je souhaite mettre en évidence la manière dont vous pouvez modifier les détails de facturation pour supprimer les champs ou supprimer l'exigence.

Dans le post précédent, j'ai expliqué comment désactiver le champ Code postal/Zip sur la page de paiement ou comment supprimer la validation du code postal/Zip .

Comment modifier les détails de facturation WooCommerce (supprimer des champs, désactiver la validation, ajouter des espaces réservés personnalisés et ajouter des étiquettes de formulaire personnalisées)

Aujourd'hui, je veux vous montrer comment modifier les détails de facturation et supprimer les champs que vous ne voulez pas montrer à vos clients.

WooCommerce Modifier les détails de facturation à l'aide d'un plugin gratuit

Il existe plus d'une douzaine de plugins gratuits et premium que vous pouvez utiliser pour modifier les détails de facturation WooCommerce. comment modifier les détails de facturation woocommerce

Chacun de ces plugins a des fonctionnalités et une conception d'interface uniques. Le meilleur plugin gratuit pour modifier les détails de facturation dans WooCommerce est Checkout Field Editor (Checkout Manager) pour WooCommerce.

Ce plugin vous permet de modifier les champs principaux de facturation, d'expédition et supplémentaires lors du paiement WooCommerce.

Dans le formulaire d'édition, vous pouvez ajouter des options de champ personnalisées telles que : Nom, Type, Étiquette, Espace réservé, Classe, Classe d'étiquette, règles de validation, etc. (la disponibilité de ces options peut changer en fonction des types de champs).

WooCommerce Modifier les détails de facturation à l'aide d'un extrait de code

Vous pouvez également modifier les détails de facturation sur la page de paiement WooCommerce en ajoutant un extrait de code au fichier functions.php de votre thème.

Supprimer les champs de facturation de WooCommerce Checkout

Tout d'abord, vous pouvez supprimer les champs de facturation que vous n'aimez pas à l'aide de l'extrait de code ci-dessous :

 

/**
 * Modifier les détails de facturation pour supprimer les champs dont vous ne voulez pas 
 **/
function njengah_remove_checkout_fields( $fields ) {

    // Champs de facturation
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );
	
	renvoie $champs ;
	
} 

	add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields' );

Vous pouvez supprimer tous les champs et ajouter des champs personnalisés ou vous pouvez supprimer de l'extrait de code ci-dessous ceux que vous souhaitez conserver.

C'est le moyen le plus rapide de supprimer les champs de facturation de la page de paiement WooCommerce sans utiliser de plugin.

Par exemple, si nous voulions uniquement afficher le prénom, le nom et l'adresse e-mail sur les détails de facturation, nous modifierions le code pour qu'il soit comme dans l'extrait de code ci-dessous :

 

function njengah_remove_checkout_fields_keep_email_name( $fields ) {

    // Champs de facturation
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );
	
	renvoie $champs ;
	
} 

	add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_keep_email_name' );

Supprimer les champs de facturation et les champs d'expédition de WooCommerce Checkout

Vous pouvez également étendre cette logique pour supprimer les champs d'expédition ainsi que les champs de facturation . Le code complet qui supprimerait les champs de facturation et les champs d'expédition est le suivant :

 

    function njengah_remove_checkout_fields_billing_shipping( $fields ) {
   
		// Champs de facturation
		unset( $fields['billing']['billing_company'] );
		unset( $fields['billing']['billing_email'] );
		unset( $fields['billing']['billing_phone'] );
		unset( $fields['billing']['billing_state'] );
		unset( $fields['billing']['billing_first_name'] );
		unset( $fields['billing']['billing_last_name'] );
		unset( $fields['billing']['billing_address_1'] );
		unset( $fields['billing']['billing_address_2'] );
		unset( $fields['billing']['billing_city'] );
		unset( $fields['billing']['billing_postcode'] );

		// Champs d'expédition
		unset( $fields['shipping']['shipping_company'] );
		unset( $fields['shipping']['shipping_phone'] );
		unset( $fields['shipping']['shipping_state'] );
		unset( $fields['shipping']['shipping_first_name'] );
		unset( $fields['shipping']['shipping_last_name'] );
		unset( $fields['shipping']['shipping_address_1'] );
		unset( $fields['shipping']['shipping_address_2'] );
		unset( $fields['shipping']['shipping_city'] );
		unset( $fields['shipping']['shipping_postcode'] );

    renvoie $champs ;
  } 
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_billing_shipping' );

Supprimer les champs de facturation, les champs d'expédition et les notes de commande de WooCommerce Checkout

Vous pouvez également supprimer le champ de note de commande qui se trouve sous la section de facturation et la section d'expédition en utilisant la même logique mais en ajoutant l'option de suppression de order_comments comme dans l'extrait de code combiné ci-dessous :

 

    function njengah_remove_checkout_fields_billing_shipping_order( $fields ) {
   
		// Champs de facturation
		unset( $fields['billing']['billing_company'] );
		unset( $fields['billing']['billing_email'] );
		unset( $fields['billing']['billing_phone'] );
		unset( $fields['billing']['billing_state'] );
		unset( $fields['billing']['billing_first_name'] );
		unset( $fields['billing']['billing_last_name'] );
		unset( $fields['billing']['billing_address_1'] );
		unset( $fields['billing']['billing_address_2'] );
		unset( $fields['billing']['billing_city'] );
		unset( $fields['billing']['billing_postcode'] );

		// Champs d'expédition
		unset( $fields['shipping']['shipping_company'] );
		unset( $fields['shipping']['shipping_phone'] );
		unset( $fields['shipping']['shipping_state'] );
		unset( $fields['shipping']['shipping_first_name'] );
		unset( $fields['shipping']['shipping_last_name'] );
		unset( $fields['shipping']['shipping_address_1'] );
		unset( $fields['shipping']['shipping_address_2'] );
		unset( $fields['shipping']['shipping_city'] );
		unset( $fields['shipping']['shipping_postcode'] );

                // Ordonner les champs
                unset( $fields['order']['order_comments'] );

    renvoie $champs ;
  } 
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_billing_shipping_order' );

WooCommerce Modifier l'exigence ou la validation des détails de facturation

Lorsque l'un des champs de facturation n'est pas rempli, WooCommerce génère une erreur comme l'erreur la plus courante - Le code postal de facturation n'est pas un code postal / code postal valide.

Cela se produit car, par défaut, il existe une fonctionnalité de validation sur les champs de paiement de facturation WooCommerce.

Pour résoudre ce problème et éviter que ces erreurs ne s'affichent lorsque le champ est laissé vide, vous devez supprimer la validation des détails de facturation.

L'extrait de code ci-dessous supprimera la validation du champ Téléphone de facturation, ce code doit être ajouté au fichier functions.php de votre thème actif.

 /**
	 * Exemple pour supprimer la validation du champ de facturation
	 **/ 
 
		add_filter( 'woocommerce_billing_fields', 'njengah_remove_phone_field_validation');

		function njengah_remove_phone_field_validation( $fields ) {
		
			$fields['billing_phone']['required'] = false ;
			
			renvoie $champs ;
		}

Vous pouvez étendre cette logique à d'autres champs comme le nom, l'e-mail, etc. Vous devez simplement remplacer la ligne de code suivante par les identifiants de champ du champ dont vous souhaitez supprimer la validation.

$fields['billing_phone']['required'] = false;

WooCommerce Modifier les espaces réservés et les étiquettes des détails de facturation

Une autre façon de modifier les détails de facturation de WooCommerce consiste à modifier les étiquettes et les espaces réservés par défaut du formulaire de page de paiement WooCommerce. Vous pouvez y parvenir en utilisant l'extrait de code ci-dessous :

 add_filter('woocommerce_checkout_fields', 'njengah_edit_checkout_placeholders_labels');
  
		fonction njengah_edit_checkout_placeholders_labels($fields){
		
			 $fields['billing']['billing_company']['placeholder'] = 'Espace réservé personnalisé' ;
			 $fields['billing']['billing_company']['label'] = 'Libellé personnalisé' ;
		 
		 renvoie $champs ;
		 }

Conclusion

Dans ce didacticiel, nous avons mis en évidence les différentes façons dont vous pouvez modifier les détails de facturation WooCommerce pour personnaliser la page de paiement WooCommerce en fonction de vos besoins. Il est important de se rappeler que ces extraits de codes fonctionnent de la même manière que les plugins qui modifient les détails de facturation, les détails d'expédition et les notes de commande.

Il est également conseillé de toujours ajouter ces extraits de code à un thème enfant du thème actif. Si vous n'avez pas de thème enfant, vous pouvez apprendre à créer un thème enfant à l'aide de cet article - créer un thème enfant Storefront.

Il existe plusieurs façons de personnaliser WooCommerce, mais la plus courante consiste à masquer les fonctionnalités que vous n'aimez pas. J'ai partagé un guide complet sur la façon de masquer la plupart des fonctionnalités de votre boutique WooCommerce, Ultimate WooCommerce Hide Guide. Cela peut être un excellent endroit pour vous lancer dans la personnalisation de WooCommerce.

Si vous utilisez le thème par défaut de WooCommerce - thème Storefront, vous pouvez apprendre des 80+ conseils de personnalisation de Storefront sur la façon de donner à votre boutique WooCommerce un aspect professionnel.

Enfin, je suis toujours disponible pour vous aider avec tout problème WooCommerce ou corriger toute erreur sur votre site si vous avez besoin d'engager un expert WordPress ou un développeur WooCommerce.