Comment ajouter un champ de texte personnalisé Woocommerce sur la page produit

Publié: 2020-09-21

Dans cet article, je vais vous montrer une solution très simple pour ajouter un champ de texte personnalisé WooCommerce sur la page produit. Ces champs personnalisés sont également appelés modules complémentaires de produit et comprennent des champs de texte, des champs de sélection, des cases à cocher, etc. La raison principale de cet ajout est de permettre au client de saisir des informations supplémentaires et personnalisées sur un produit moyennant un coût.

WooCommerce est une puissante solution de commerce électronique pour WordPress qui a gagné en popularité au fil des ans. On estime que WooCommerce alimente plus de 42% de toutes les boutiques en ligne disponibles.

Il s'agit d'un pourcentage très élevé et si vous recherchez une boutique en ligne facile à configurer et à gérer, alors WooCommerce est la meilleure option pour vous. Il s'agit d'une solution gratuite et open source, qui est devenue une solution de commerce électronique très compétente pour les sites Web basés sur WordPress.

Champ de texte personnalisé Woocommerce sur la page produit

Si vous effectuez une recherche rapide sur Internet, de nombreuses personnes vous proposeront des solutions complexes et difficiles à mettre en œuvre. Dans ce bref tutoriel, je partagerai un extrait de code PHP qui ajoutera cette fonctionnalité à votre page produit.

À la fin de ce didacticiel, les utilisateurs de votre boutique en ligne pourront ajouter une note personnalisée à chaque produit. Si le champ personnalisé n'est pas rempli, il générera une erreur.

De plus, si vous cherchez un moyen plus simple d'ajouter des champs personnalisés, le plugin Product Extras for WooCommerce sera la meilleure solution pour vous. Cependant, il s'agit d'un plugin premium et vous devrez payer un tarif annuel de 59 $. Extras de produit pour le plugin WooCommerce

Pourquoi ajouteriez-vous des champs personnalisés sur la page produit ?

La principale raison de le faire est d'améliorer la fidélisation de la clientèle, ce qui est susceptible de stimuler les ventes, car les clients pourront ajouter une note personnalisée sur la commande.

Par exemple, un client peut souhaiter un emballage cadeau ou des cartes de vœux personnalisées sur le produit et il peut ajouter la note personnalisée sur le produit.

Avec tout cela sur la table, examinons les étapes à suivre pour ajouter un champ de texte personnalisé sur la page du produit dans votre boutique WooCommerce. La page produit par défaut ressemble à ceci :

Étapes pour ajouter un champ de texte personnalisé Woocommerce sur la page produit

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l' éditeur de thème est ouverte, recherchez le fichier de fonctions de thème où nous ajouterons la fonction qui ajoutera un champ personnalisé WooCommerce sur la page produit .
Ajoutez le code suivant au fichier functions.php :

 /**

 * @snippet Ajouter un champ de saisie aux produits - WooCommerce

 */

// -----------------------------------------

// 1. Afficher le champ de saisie personnalisé au-dessus d'Ajouter au panier

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_product_add_on', 9 );

function njengah_product_add_on() {

    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['_custom_text_add_on'] ) : '';

    echo '<div><label>Module complémentaire de texte personnalisé <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>' ;

}

// -----------------------------------------

// 2. Lancer une erreur si le champ de saisie personnalisé est vide

add_filter( 'woocommerce_add_to_cart_validation', ' njengah_product_add_on_validation', 10, 3 );

function njengah_product_add_on_validation( $passed, $product_id, $qty ){

   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {

      wc_add_notice( 'Le module complémentaire de texte personnalisé est un champ obligatoire', 'error' );

      $passé = faux ;

   }

   return $passé ;

}

// -----------------------------------------

// 3. Enregistrer la valeur du champ de saisie personnalisé dans les données de l'article du panier

add_filter( 'woocommerce_add_cart_item_data', ' njengah_product_add_on_cart_item_data', 10, 2 );

function njengah_product_add_on_cart_item_data( $cart_item, $product_id ){

    if( isset( $_POST['custom_text_add_on'] ) ) {

        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );

    }

    retourner $cart_item ;

}

// -----------------------------------------

// 4. Afficher la valeur du champ de saisie personnalisé @ Cart

add_filter( 'woocommerce_get_item_data', ' njengah_product_add_on_display_cart', 10, 2 );

function njengah_product_add_on_display_cart( $data, $cart_item ) {

    si ( isset( $cart_item['custom_text_add_on'] ) ){

        $données[] = tableau(

            'name' => 'Module complémentaire de texte personnalisé',

            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )

        );

    }

    retourne $données ;

}

// -----------------------------------------

// 5. Enregistrer la valeur du champ de saisie personnalisé dans la méta de l'élément de commande

add_action( 'woocommerce_add_order_item_meta', ' njengah_product_add_on_order_item_meta', 10, 2 );

function njengah_product_add_on_order_item_meta( $item_id, $values ) {

    si ( ! vide( $values['custom_text_add_on'] ) ) {

        wc_add_order_item_meta( $item_id, 'Complément de texte personnalisé', $values['custom_text_add_on'], true );

    }

}

// -----------------------------------------

// 6. Afficher la valeur du champ d'entrée personnalisé dans la table de commande

add_filter( 'woocommerce_order_item_product', ' njengah_product_add_on_display_order', 10, 2 );

function njengah_product_add_on_display_order( $cart_item, $order_item ){

    if( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'] ;

    }

    retourner $cart_item ;

}

// -----------------------------------------

// 7. Afficher la valeur du champ de saisie personnalisé dans les e-mails de commande

add_filter( 'woocommerce_email_order_meta_fields', ' njengah_product_add_on_display_emails' );

function njengah_product_add_on_display_emails( $fields ) {

    $fields['custom_text_add_on'] = 'Complément de texte personnalisé';

    renvoie $champs ;

}

Pour voir le résultat , actualisez simplement la page du produit et vous devriez voir ceci :

Si un utilisateur n'a pas saisi les détails, une erreur s'affichera jusqu'à ce que l'utilisateur ajoute le texte personnalisé comme indiqué ci-dessous : erreur si l'utilisateur n'a pas saisi les détails

La note personnalisée apparaîtra également sur les détails de la commande, comme indiqué ici : addon de texte personnalisé sur le panier

Comment fonctionne le code

Tout d'abord, le code affiche le champ de saisie personnalisé au-dessus de Ajouter au panier, puis une erreur est ajoutée si le champ de saisie personnalisé est vide. Ensuite, la valeur du champ de saisie personnalisé est enregistrée et affichée dans le panier, l'article de commande, le tableau de commande et dans les e-mails de commande.

Conclusion

Dans cet article, je vous ai fourni une solution plus simple pour les utilisateurs peu avertis qui impliquent l'utilisation d'un plugin. Ensuite, j'ai partagé un extrait de code PHP qui doit être placé dans le fichier functions.php pour afficher le module complémentaire client dans le panier, l'article de commande, le tableau de commande et dans les e-mails de commande. J'espère que cet article vous a aidé à ajouter un champ de texte personnalisé WooCommerce sur la page du produit.