Guide complet pour ajouter et personnaliser les informations sur les produits dans WooCommerce - OpenByt - Your Ultimate Source for Free WordPress Knowledge

Dans WooCommerce, les attributs de produit offrent un moyen flexible de définir diverses caractéristiques pour différents types de produits. La mise en place d'attributs de produit peut améliorer l'expérience utilisateur en aidant les clients à trouver rapidement des détails essentiels, tels que couleur, tailleou matériel. Enrichir les pages de produits avec des informations détaillées augmente la profondeur du contenu, ce qui favorise l'optimisation des moteurs de recherche (SEO) et améliore la visibilité des produits.

Cet article présente plusieurs méthodes pour ajouter des informations supplémentaires aux pages de produits de WooCommerce, notamment en utilisant la fonction L'interface de WooCommerce les fonctions intégrées, le Champs personnalisés avancés (ACF) et code personnalisé. Choisissez la méthode qui vous convient le mieux.

Pourquoi l'ajout d'informations supplémentaires améliore-t-il l'expérience de l'utilisateur et le référencement ?

Par exemple, si vous vendez des vêtements, les clients peuvent vouloir connaître la couleur, la taille et le tissu. En définissant ces attributs, WooCommerce les affiche automatiquement sous la rubrique "Informations complémentaires"Cette fonctionnalité permet aux utilisateurs de mieux comparer les produits et d'améliorer les performances de la page en matière de référencement grâce à l'ajout d'un contenu pertinent. Cette fonctionnalité permet aux utilisateurs de mieux comparer les produits et améliore les performances de la page en matière de référencement grâce à l'ajout d'un contenu pertinent.

Méthode 1 : Ajouter des informations supplémentaires en utilisant les fonctionnalités intégrées de WooCommerce

WooCommerce offre un moyen simple d'ajouter des attributs de produit directement dans l'écran d'édition du produit. Voici les étapes à suivre :

Étape 1 : Connectez-vous au tableau de bord de WooCommerce

Naviguez vers le tableau de bord de WordPress, cliquez sur "Produitset sélectionnez le produit pour lequel vous souhaitez ajouter des informations supplémentaires.

Étape 2 : Localisez la section "Données sur les produits".

Dans l'éditeur de produit, faites défiler la page jusqu'à la mention "Données sur le produit"et sélectionnez l'option "AttributsOnglet ".

Étape 3 : Ajouter des attributs

Cliquez sur le bouton "Ajouter un nouveau"pour définir de nouveaux attributs tels que "Couleur" ou "Taille.”

Saisissez le nom de l'attribut, par exemple, "Couleur.”
Séparez les valeurs des attributs par une barre verticale (|), par exemple "Rouge | Bleu | Vert".

Étape 4 : Définir la visibilité de l'attribut

Cochez l'option "Visible sur la page du produit" pour que ces attributs apparaissent sous l'onglet "Informations complémentaires" de la page du produit.

Étape 5 : Enregistrer et mettre à jour le produit

Cliquez sur le bouton "Mise à jour"pour enregistrer vos modifications. Une fois les modifications enregistrées, l'onglet "Informations complémentaires" de la page du produit affichera automatiquement ces attributs.

Exemple

Si vous vendez un T-shirt disponible en trois couleurs (rouge, bleu, vert) et en trois tailles (S, M, L), vous pouvez définir l'attribut "Couleur" sur "Rouge | Bleu | Vert" et l'attribut "Taille" sur "S | M | L". Lorsque l'option "Visible sur la page du produit" est cochée, les clients verront ces options sous l'onglet "Informations complémentaires".

Méthode 2 : Ajout d'informations supplémentaires à l'aide du plugin Secure Custom Fields (SCF)

Bien que les attributs intégrés de WooCommerce soient utiles, il en faut plus pour répondre à certains besoins. Avec les attributs Champs personnalisés sécurisés (SCF) plugin, vous pouvez ajouter d'autres champs personnalisés pour afficher des détails supplémentaires sur le produit, comme le matériau et les instructions d'entretien.

Étape 1 : Installer le plugin ACF

Aller à "Plugins"Dans le tableau de bord de WordPress, recherchez "Champs personnalisés sécuriséset cliquez sur "Installer" et "Activer".

Étape 2 : Créer un groupe de champs

Aller à "SCF"dans le tableau de bord de WordPress et sélectionnez "Ajouter un nouveau groupe de champs". Cela vous permet de définir des champs personnalisés pour vos produits.

Étape 3 : Définir les champs

Dans le groupe de champs, ajoutez de nouveaux champs tels que "Matériau" ou "Instructions d'entretien." Choisissez des types de champs tels que texte, zone de texte ou image selon vos besoins.

Voici un aperçu des types de champs les plus courants :

Texte: Ce champ est idéal pour les entrées courtes, sur une seule ligne. Par exemple, vous pouvez l'utiliser pour un champ "Matériau" si vous n'avez besoin d'énumérer qu'un ou deux matériaux, tels que "100% Cotton" ou "Stainless Steel".
Zone de texte: Cette option est utile pour les descriptions plus longues. Vous pouvez l'utiliser pour les "Instructions d'entretien", où vous pouvez fournir des informations détaillées sur le lavage ou la manipulation, comme "Laver à la main uniquement. Ne pas mettre au sèche-linge".
Image: Cette option vous permet d'ajouter des images. Elle peut être utilisée pour des champs tels que "Certification de produit", où vous souhaitez afficher un logo de certification ou un label de qualité.

Exemple :

Supposons que vous vendiez des meubles en bois et que vous souhaitiez ajouter les champs personnalisés suivants :

Matériau-Il peut s'agir d'un champ "texte" permettant de saisir des types de bois spécifiques, tels que "chêne" ou "érable".

Instructions d'entretien - Définissez cette zone comme une "zone de texte" où vous pouvez détailler des conseils d'entretien, tels que "Essuyez avec un chiffon sec. Évitez la lumière directe du soleil.

Logo de certification - Utilisez un champ "Image" pour télécharger un sceau de certification ou un badge écologique.

Après avoir défini ces champs, ils apparaîtront dans l'éditeur de produit, prêts à ce que vous saisissiez les informations spécifiques à chaque produit.

Étape 4 : Définir les règles d'affichage

Dans la section "Paramètres", définissez les conditions dans lesquelles ces champs personnalisés doivent être affichés sur les pages des produits. Vous pouvez appliquer ces champs à tous les produits ou à des catégories spécifiques, des étiquettes ou même des produits individuels.

Étape 5 : Saisir des informations dans l'éditeur de produit

Une fois les champs définis et les règles d'affichage établies, accédez à l'éditeur de produits WooCommerce pour tout produit répondant aux critères. Vous verrez alors les champs personnalisés que vous avez créés et pourrez saisir les informations pertinentes pour chacun d'entre eux.

Étape 6 : Modifier le modèle de produit (facultatif)

Pour afficher ces champs personnalisés sur le front-end de la page produit, vous devrez peut-être modifier les fichiers de template de WooCommerce (par exemple, single-product.php). Utilisez la fonction the_field() de SCF pour afficher les valeurs des champs comme suit :

<div class="product-material">

    <h4>Matériau :</h4>

    <p><?php the_field('material'); ?></p>

</div>

Méthode 3 : Ajouter des informations supplémentaires à l'aide d'un code personnalisé

En ajoutant du code au fichier functions.php de votre thème, vous pouvez ajouter des champs directement à l'écran d'édition des produits WooCommerce pour une personnalisation plus avancée.

Étape 1 : Ajouter un champ personnalisé à l'éditeur de produit

Utilisez le hook woocommerce_product_options_general_product_data pour ajouter un champ personnalisé à l'écran d'édition du produit.

add_action('woocommerce_product_options_general_product_data', 'add_custom_general_fields' ) ;

function add_custom_general_fields() {

    woocommerce_wp_text_input( array(

        'id' => '_custom_product_text_field',

        'label' => __('Custom Product Field', 'woocommerce' ),

        'desc_tip' => 'true',

        'description' => __('Enter custom field content', 'woocommerce' )

    )) ;

}

Étape 2 : Enregistrer la valeur du champ personnalisé

Utilisez le hook woocommerce_process_product_meta pour enregistrer la valeur du champ personnalisé.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' ) ;

function save_custom_general_fields( $post_id ) {

    $custom_field_value = isset( $_POST['_custom_product_text_field'] ) ? sanitize_text_field( $_POST['_custom_product_text_field'] ) : '' ;

    update_post_meta( $post_id, '_custom_product_text_field', $custom_field_value ) ;

}

Étape 3 : Afficher le champ personnalisé sur la page du produit

Pour afficher le champ personnalisé sur le front-end, utilisez get_post_meta() dans le modèle de produit WooCommerce.

echo '<div class="custom-field">' ;

echo '<label>Champ personnalisé : </label> ' ;

echo get_post_meta( get_the_ID(), '_custom_product_text_field', true ) ;

echo '</div>';

Gérer l'onglet "Informations complémentaires" de WooCommerce

L'onglet "Informations supplémentaires" de WooCommerce est utile pour afficher les attributs détaillés des produits, mais vous pouvez personnaliser son contenu ou même le masquer dans certains cas.

Ajout d'un texte personnalisé à l'onglet "Informations complémentaires

Pour ajouter un contenu personnalisé, comme un lien, à l'onglet "Informations complémentaires", utilisez le code suivant :

add_action('woocommerce_product_additional_information', 'print_custom_html' ) ;

function print_custom_html() {

    echo '<a href="#">Cliquez ici pour plus de détails sur le produit</a>';

}

Masquer ou supprimer l'onglet "Informations complémentaires

Si un produit ne nécessite pas d'informations supplémentaires (par exemple, un produit numérique), vous pouvez supprimer cet onglet à l'aide du code suivant :

add_filter('woocommerce_product_tabs', 'remove_additional_information_tab', 98 ) ;

function remove_additional_information_tab( $tabs ) {

    unset( $tabs['additional_information'] ) ;

    return $tabs ;

}

Conclusion

L'ajout d'informations supplémentaires aux pages produit de WooCommerce améliore l'expérience de l'utilisateur et le référencement. Les fonctionnalités intégrées de WooCommerce, les plugins tels que Secure Custom Fields (SCF) et le codage personnalisé offrent des options flexibles pour enrichir les pages produits avec des détails tels que la couleur, la taille, le matériau, les instructions d'entretien et les certifications.

Utilisation des fonctions intégrées: Ajoutez rapidement des attributs directement dans l'éditeur du produit et améliorez l'expérience de l'utilisateur en affichant les détails essentiels dans l'onglet "Informations complémentaires".
Utilisation du plugin SCF: Allez au-delà de l'essentiel et créez des champs personnalisés pour présenter des détails spécifiques sur les produits, tels que les matériaux ou les instructions d'entretien, ce qui permet une meilleure gestion de l'information et une personnalisation pour différents types de produits.
Utilisation d'un code personnalisé: Pour une personnalisation avancée, l'ajout de champs personnalisés avec du code directement dans le fichier functions.php offre un contrôle total sur la façon dont les informations sont présentées sur les pages de produits.

La gestion de l'onglet "Informations supplémentaires" vous permet d'ajouter, de modifier ou de supprimer du contenu en fonction des besoins du produit, en veillant à ce que vos clients puissent accéder à des informations pertinentes sans encombrement inutile. Dans l'ensemble, l'enrichissement des pages produit de WooCommerce aide les clients à prendre des décisions d'achat éclairées, ce qui augmente les conversions tout en améliorant le référencement de votre site.