Comment ajouter des champs personnalisés aux produits WooCommerce : Méthodologie et bonnes pratiques

Non seulement les champs personnalisés vous permettent de fournir des spécifications et des caractéristiques plus détaillées pour vos produits, mais ils peuvent également améliorer considérablement l'expérience d'achat de vos clients et même augmenter le taux de conversion de votre boutique. Alors, comment ajouter des champs personnalisés à vos produits WooCommerce ? Voici un guide détaillé étape par étape pour les débutants et les utilisateurs expérimentés.

Comment utiliser les champs personnalisés avancés dans Elementor : un guide détaillé

6 septembre 17:34

012470

Que sont les champs personnalisés de WooCommerce ?

Les champs personnalisés sont des outils permettant d'ajouter des zones de saisie ou des fonctionnalités supplémentaires aux pages de produits. Ces champs peuvent fournir une multitude d'informations, telles que des spécifications techniques, des options supplémentaires ou des informations personnalisées sur le produit, afin de répondre aux besoins individuels du client.

Exemple :
Si vous vendez des T-shirts, vous pouvez créer un champ personnalisé qui permet aux clients deoptionleur couleur préférée, ou ajoutez leur nom pour créer un article sur mesure.

Types de champs personnalisés dans WooCommerce

Avec l'aimable autorisation de WooCommercemultiformeChaque type de champ a son propre cas d'utilisation. Vous trouverez ci-dessous les types de champs personnalisés les plus courants :

1. compteur de temps
   Permet de sélectionner une heure de rendez-vous ou de livraison.
2. sélecteur de date
   Il est pratique pour les clients de sélectionner une date de commande spécifique.
3. menu déroulant
   Offre un certain nombre d'options pourrationalisationProcessus de décision.
4. sélecteur de couleurs
   Utilisé pour permettre au client de choisir la couleur du produit.
5. champ de relation
   Utilisé pour lier des produits à des pages ou des articles, tels que le contenu connexe associé.
6. Champs répétables
   Permet d'ajouter plusieurs groupes du même type d'informations, comme une liste de spécifications de produits.
7. champ du produit
   Peut être utilisé pour recommander d'autres produits connexes à promouvoirVente croisée ou vente incitative.
8. champ numérique
   Permet de saisir des valeurs numériques, telles que la quantité ou la taille du stock.
9. bouton radio
   Limite l'utilisateur à la sélection d'une valeur parmi les options.
10. champ de texte
    Utilisé pour que les clients remplissent des informations personnalisées, telles que des messages personnalisés.

Comment ajouter des champs personnalisés aux produits WooCommerce

Il y a deux façons principales d'ajouter des champs personnalisés à WooCommerce : en utilisant des plugins et en les implémentant de manière programmatique.

Méthode 1 : Ajouter des champs personnalisés à l'aide du plugin

Pour la plupart des utilisateurs, l'utilisation de plug-ins (SCFACF) est le moyen le plus simple. Ce qui suit est basé sur le Plug-in Advanced Custom Fields (ACF) A titre d'exemple, les étapes sont décrites en détail :

1. Installation du plugin Advanced Custom Fields

• Rechercher "Champs personnalisés avancés".
• Téléchargez, chargez et installez, puis activez le plugin.

2. Création d'un nouveau groupe de champs

• Dans le backend de WordPress, dans le menu de gauche, trouvez l'option ACF > Groupes de terrain.

• cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage) Ajout de groupes de champsLe nom du groupe de champs, par exemple "Spécification de produit".

3. Ajout de champs personnalisés

• Remplissez les détails du champ sur l'étiquette :
  • Type de champLes fonctions de sélection de texte, de cases à cocher, de menus déroulants, etc.
  • Libellés des champs: Saisissez le nom du champ, par exemple "*", "*" ou "*".couleur".
  • nom du champLe système génère automatiquement des identifiants pour les champs.

4. Définition de règles d'affichage pour les groupes de champs

• existent Règles de positionnement Sélectionnez "Type d'article >" à partir de offres"en veillant à ce que ces champsPour les produits WooCommerce uniquement.

5. Sauvegarder les groupes de champs

• Assurez-vous que le statut du groupe de champs est "activer"Cliquez ensuite sur Enregistrer les modifications.

6. Remplir des champs personnalisés sur les pages de produits

• Ouvrez n'importe quelle page de produit et vous verrez les groupes de champs nouvellement ajoutés, remplissez les informations si nécessaire.

7. Affichage des champs personnalisés sur le front-end

• utiliser [acf field="Field name"] Code court permettant d'afficher le contenu du champ sur le front-end. Par exemple, insérez le code dans la zone de description du produit.

Méthode 2 : ajouter des champs personnalisés par programme

Si vous êtes familier avec le code, vous pouvez mettre en place des champs personnalisés par programme. Veillez à inclure les champs personnalisés dans la section functions.php pour ajouter le code, ouUtilisation de plug-ins(par exemple Extraits de code) pour éviter de modifier directement les fichiers centraux du thème.

Voici les étapes à suivre pour y parvenir :

1. Création de métaframes personnalisés

• Utiliser WordPress add_meta_box pour ajouter une page de produit à la base de donnéesnom du radical en caractères chinois (Kangxi radical 22).

2. Sauvegarde des données de terrain

• utiliser save_post qui définit la valeur du champenregistrer (un fichier, etc.) (informatique)à la base de données.

3. Afficher les données du champ

• utiliser get_post_meta qui affiche la page d'accueilDonnées du champ.

Exemple de code :

// Ajouter un métaframe personnalisé<br>add_action('add_meta_boxes', 'add_custom_meta_box') ;<br>function add_custom_meta_box() {<br>    add_meta_box('product_custom_fields', 'product_custom_fields', 'custom_meta_box_callback', 'product') ;<br>}<br><br>function custom_meta_box_callback($post) {<br>    $custom_field_value = get_post_meta($post->ID, 'custom_field_key', true) ;<br>    echo '<label for="custom_field">Nom du champ:</label>' ;<br>    echo '' ;<br>}<br><br>// Sauvegarde des données du champ<br>add_action('save_post', 'save_custom_meta_box_data') ;<br>function save_custom_meta_box_data($post_id) {<br>    if (isset($_POST['custom_field'])) {<br>        update_post_meta($post_id, 'custom_field_key', sanitize_text_field($_POST['custom_field'])) ;<br>    }<br>}<br>
// Ajouter un métaframe personnalisé<br>add_action('add_meta_boxes', 'add_custom_meta_box') ;<br>function add_custom_meta_box() {<br>    add_meta_box('product_custom_fields', 'product_custom_fields', 'custom_meta_box_callback', 'product') ;<br>}<br><br>function custom_meta_box_callback($post) {<br>    $custom_field_value = get_post_meta($post->ID, 'custom_field_key', true) ;<br>    echo '<label for="custom_field">Nom du champ:</label>' ;<br>    echo '' ;<br>}<br><br>// Sauvegarde des données du champ<br>add_action('save_post', 'save_custom_meta_box_data') ;<br>function save_custom_meta_box_data($post_id) {<br>    if (isset($_POST['custom_field'])) {<br>        update_post_meta($post_id, 'custom_field_key', sanitize_text_field($_POST['custom_field'])) ;<br>    }<br>}<br>
// Ajouter un métaframe personnalisé
add_action('add_meta_boxes', 'add_custom_meta_box') ;
function add_custom_meta_box() {
    add_meta_box('product_custom_fields', 'product_custom_fields', 'custom_meta_box_callback', 'product') ;
}

function custom_meta_box_callback($post) {
    $custom_field_value = get_post_meta($post->ID, 'custom_field_key', true) ;
    echo 'Nom du champ:' ;
    echo '' ;
}

// Sauvegarde des données du champ
add_action('save_post', 'save_custom_meta_box_data') ;
function save_custom_meta_box_data($post_id) {
    if (isset($_POST['custom_field'])) {
        update_post_meta($post_id, 'custom_field_key', sanitize_text_field($_POST['custom_field'])) ;
    }
}

Ajoutez le code ci-dessus à la section functions.php ou dans le fichierExtraits de codeAu milieu.

Différence entre champs personnalisés et attributs

Meilleures pratiques et conseils

1. Planifier l'utilisation des champs
   Avant de créer un champ, clarifiez son objectif et sa finalité.
2. Sélectionnez le type de champ approprié
   Sélectionnez le type de champ approprié en fonction des données requises.
3. Éviter la surcharge d'informations
   Limitez le nombre de champs afin d'améliorer l'expérience de l'utilisateur.
4. Fonctions du champ d'essai
   Veillez à ce que les champs fonctionnent correctement sur tous les appareils et navigateurs.
5. Tenir les champs à jour
   Mettez régulièrement à jour le contenu des plugins et des champs pour garantir la compatibilité et la sécurité.

Foire aux questions (FAQ)

1. Le plugin Advanced Custom Fields est-il gratuit ?
   Oui, il existe une version gratuite et une version payante du plugin ACF. La version gratuite offre des fonctionnalités de base et la version payante des options plus avancées.
2. Les champs personnalisés affectent-ils les performances des pages ?
   Une utilisation correcte n'affecte pas les performances, mais un trop grand nombre de champs peut nuire aux performances.Augmenter le temps de chargement des pages.