Élevez vos pages de produits WooCommerce à l'aide de champs personnalisés

Si vous souhaitez améliorer votre boutique WooCommerce, apprendre à utiliser les champs personnalisés WooCommerce est un excellent outil à avoir dans votre boîte à outils.

Les champs personnalisés vous permettent de collecter et d'afficher des informations supplémentaires sur vos produits WooCommerce, ce qui est très utile pour personnaliser votre boutique.

Avec les bons outils, les champs personnalisés WooCommerce ne doivent pas non plus être compliqués. Bien que vous puissiez certainement utiliser du code pour insérer des champs personnalisés, Elementor offre un moyen plus simple de travailler avec des champs personnalisés qui vous permet de tout faire à partir de l'interface visuelle d'Elementor.

Dans cet article, nous allons couvrir tout ce que vous devez savoir sur les champs personnalisés WooCommerce, y compris les suivants :

• Un examen plus approfondi de ce que sont les champs personnalisés WooCommerce et de la manière dont ils contribuent à améliorer votre boutique.
• Les différents types de champs personnalisés que vous pouvez ajouter à WooCommerce.
• Quand utiliser les champs personnalisés WooCommerce par rapport aux attributs/taxonomies de produit.
• Comment créer des champs personnalisés WooCommerce sur le backend.
• Comment afficher des champs personnalisés sur le frontend de votre boutique, en utilisant Elementor Pro ou un code personnalisé.

Commençons!

Les champs personnalisés WooCommerce vous permettent de stocker et d'afficher des informations supplémentaires sur les produits de votre site. Ils ressemblent à des champs personnalisés WordPress classiques, mais ils collectent spécifiquement des informations sur vos produits WooCommerce.

Par défaut, WooCommerce propose des champs de haut niveau qui s'appliquent à la plupart des produits, tels que les prix et les descriptions de produits. Mais cela ne vous permet pas de créer des champs uniques à votre boutique.

C'est là que les champs personnalisés peuvent être utiles.

Sur le backend, des champs personnalisés facilitent le stockage de détails et d'informations uniques sur vos produits. Au lieu d'essayer de mettre des informations personnalisées dans la boîte de description de produit non structurée, vous pouvez créer des champs dédiés pour tous les détails importants, ce qui facilite la gestion et la mise à jour des produits.

Sur le frontend, des champs personnalisés vous aident à afficher toutes ces informations de manière structurée. Si nécessaire, ils vous permettent également de collecter des informations supplémentaires auprès des acheteurs, par exemple en leur permettant de saisir un message de gravure personnalisé à inclure sur un bijou qu'ils achètent dans votre magasin.

Si vous ne savez toujours pas comment tout cela s'articule, ne vous inquiétez pas ! Dans la section suivante, nous vous donnerons quelques exemples concrets de la façon dont vous pouvez utiliser des champs personnalisés pour améliorer votre boutique.

Il existe deux types courants de champs personnalisés que vous verrez pour les boutiques WooCommerce :

• Champs de données produit – ils vous permettent de stocker des informations supplémentaires sur un produit. En tant qu'administrateur du magasin, vous entrerez ces données à partir de votre tableau de bord WordPress principal. Ensuite, vous afficherez les données sur vos pages de produits.
• Champs de saisie personnalisés - ceux-ci vous permettent de collecter des informations supplémentaires sur un produit auprès des acheteurs. En règle générale, il s'agit de vous aider à créer un type de produit personnalisable. La principale différence ici est que vos acheteurs saisissent les données à partir de l'interface de votre site.

Selon la situation de votre boutique, vous pouvez n'utiliser qu'un seul type de champs personnalisés WooCommerce. Ou, vous pouvez utiliser les deux types afin de pouvoir à la fois afficher des informations supplémentaires et collecter des informations supplémentaires auprès de vos acheteurs.

Regardons-les plus en détail.

L'utilisation la plus courante des champs personnalisés WooCommerce consiste à afficher des informations supplémentaires sur un produit. Les champs de saisie du backend WooCommerce sont "taille unique", mais vous pouvez avoir des situations où vous souhaitez afficher des informations uniques sur vos produits de manière structurée.

Par exemple, vous avez peut-être une librairie en ligne et vous souhaitez inclure des extraits d'avis positifs de critiques sur les livres que vous vendez. Bien sûr, vous pouvez les inclure directement dans la description du produit, mais l'utilisation de champs personnalisés vous permettrait de donner à ces devis des champs de saisie dédiés et vous auriez plus de contrôle sur l'endroit où vous les placez.

Ou peut-être vendez-vous des t-shirts graphiques et souhaitez-vous collecter et afficher des informations sur le créateur de chaque t-shirt.

Voici un exemple d'ajout de champs personnalisés sur le backend :

Et puis vous pourriez afficher ces informations où vous voulez sur vos pages produits comme ceci :

Fondamentalement, si vous souhaitez afficher n'importe quel type d'informations supplémentaires sur un produit, placer ces informations dans des champs personnalisés peut être très utile pour les raisons suivantes. Tu peux…

1. Créez des champs de saisie dédiés, ce qui facilite l'ajout d'informations et la mise à jour des informations à l'avenir.
2. Affichez les informations exactement là où vous voulez les mettre. Vous pouvez le placer n'importe où sur vos pages de produits. Et avec Elementor, vous n'avez même pas besoin de connaître de code pour le faire.
3. Formatez les informations comme vous le souhaitez. Par exemple, vous pouvez ajouter des couleurs pour attirer l'attention, des bordures, etc.

Une autre option pour utiliser les champs personnalisés WooCommerce consiste à créer des champs de saisie personnalisés sur vos pages de produit uniques afin que les acheteurs puissent personnaliser le produit ou fournir des informations supplémentaires.

Par exemple, vous vendez peut-être un certain type de bijoux et vous souhaitez donner à vos acheteurs la possibilité de créer une gravure personnalisée sur l'article qu'ils achètent. Ou peut-être souhaitez-vous laisser les acheteurs entrer un message personnalisé à sérigraphier sur une chemise.

Pour accomplir ces cas d'utilisation, vous pouvez ajouter un champ de saisie de texte à la page du produit frontal.

Voici un exemple qui ajoute un tel champ de saisie en plus des champs de données personnalisés de la section précédente :

Si vous souhaitez collecter des données produit supplémentaires, une autre option populaire est les attributs et taxonomies WooCommerce. Vous ne verrez que ceux-ci appelés "attributs" lorsque vous personnalisez un produit, mais ce que WooCommerce fait sur le backend est de créer une nouvelle taxonomie personnalisée pour chaque attribut que vous créez.

Les attributs et les taxonomies sont également un moyen très utile de stocker des informations sur un produit, mais ils remplissent une fonction différente, il est donc important de comprendre la différence :

• Attributs/taxonomies - vous les utilisez pour regrouper des produits, un peu comme une catégorie. Vos acheteurs pourraient utiliser ces informations pour filtrer tous les produits avec un certain attribut. WooCommerce inclut déjà deux taxonomies par défaut - les catégories de produits et les balises - mais vous pouvez utiliser des attributs pour ajouter un nombre illimité de taxonomies personnalisées.
• Champs personnalisés - vous les utilisez pour stocker des informations uniques à chaque produit individuel. Les produits ne sont pas regroupés par les informations du champ personnalisé.

Regardons quelques exemples d'utilisation de chaque…

Tout d'abord, disons que vous vendez une gamme de modèles de t-shirts différents dans différentes couleurs. Vous voulez un moyen de stocker des informations sur la couleur de chaque t-shirt afin que vos acheteurs puissent filtrer tous les t-shirts de la ou des couleurs qui les intéressent.

Pour ce cas d'utilisation, vous souhaitez utiliser un attribut de produit (taxonomie). Cela regroupera différents articles en fonction de la couleur qui leur est attribuée et permettra aux acheteurs de les filtrer. Par exemple, parcourir toutes les chemises vertes.

Mais disons que vous souhaitez également ajouter une note sur la façon dont le produit s'adapte. Par exemple, s'il correspond à la taille ou s'il est un peu plus serré ou plus lâche que la normale. Ces informations sont uniques à chaque t-shirt et ne sont pas quelque chose que la plupart des acheteurs voudront filtrer, vous feriez donc mieux de mettre ces détails dans un champ personnalisé.

Dans certaines situations, un attribut et un champ personnalisé peuvent convenir et vous pouvez choisir une approche différente en fonction de vos besoins spécifiques.

Par exemple, supposons que vous souhaitiez ajouter des informations sur le graphiste qui a créé chaque t-shirt que vous vendez. Voici les différents scénarios dans lesquels vous pourriez vouloir utiliser chaque option :

• Attribut - vous l'utiliserez si vous vendez plusieurs chemises de chaque artiste et que vous souhaitez donner aux acheteurs la possibilité de filtrer toutes les chemises d'un artiste spécifique.
• Champ personnalisé - vous l'utiliseriez si vous souhaitez stocker et afficher l'artiste, mais vous n'avez pas besoin de le rendre filtrable. Par exemple, peut-être que l'artiste n'est pas vraiment ce qui intéresse les acheteurs ou peut-être que vous ne vendez qu'une seule chemise de chaque artiste.

Il y a deux parties pour travailler avec les champs personnalisés WooCommerce :

1. Vous devez créer les champs personnalisés sur le backend afin de pouvoir ajouter plus d'informations à vos produits.
2. Vous devez afficher les informations de ces champs personnalisés sur le frontend de votre boutique.

Dans cette première section, nous allons vous montrer comment créer les champs personnalisés WooCommerce dans le backend. Ensuite, dans la section suivante, nous verrons comment les afficher.

La façon dont vous créez vos champs personnalisés dépend si vous souhaitez afficher des champs de données produit supplémentaires ou si vous souhaitez afficher des champs de saisie personnalisés. Passons en revue les deux…

Pour collecter et stocker des données supplémentaires sur les produits WooCommerce, vous pouvez utiliser n'importe quel plugin de champs personnalisés. Les options populaires qui s'intègrent à Elementor incluent :

• Champs personnalisés avancés (ACF)
• Ensemble d'outils
• Gousses
• Méta-boîte

Nous avons une comparaison détaillée d'ACF vs Toolset vs Pods si vous souhaitez en savoir plus sur ces offres, mais nous allons utiliser ACF pour cet exemple car il est populaire, gratuit et flexible. La même idée de base sera cependant valable pour tous les plugins.

Pour commencer, installez et activez le plugin gratuit Advanced Custom Fields de WordPress.org. Ensuite, allez dans Champs personnalisés → Ajouter nouveau pour créer un nouveau "Groupe de champs".

Un groupe de champs est exactement ce que son nom l'indique - un groupe d'un ou plusieurs champs personnalisés que vous souhaitez ajouter à certains ou à tous vos produits WooCommerce.

Pour commencer, utilisez les règles d' emplacement pour contrôler les produits auxquels vous souhaitez ajouter les champs personnalisés.

Tout d'abord, définissez le type de publication égal à Product . Si vous souhaitez afficher ces champs personnalisés sur tous vos produits, c'est tout ce que vous avez à faire :

Si vous souhaitez uniquement afficher ces champs personnalisés sur certains produits (par exemple, les produits d'une certaine catégorie), vous pouvez ajouter d'autres règles si nécessaire. Par exemple, voici à quoi ressemble le ciblage de produits dans les catégories "Vêtements" ou "Décor" :

Ensuite, vous pouvez ajouter vos champs personnalisés à l'aide du bouton + Ajouter un champ en haut de l'interface. Pour chaque champ, vous pouvez choisir parmi différents types de champs (par exemple, nombre vs texte court vs texte long, etc.) et configurer d'autres détails sur ce champ.

Par exemple, voici trois champs personnalisés à collecter…

1. Le nom du créateur.
2. L'année à laquelle le designer a créé le design.
3. Une déclaration sur le design du designer.

Une fois que vous êtes satisfait de l'apparence de tout, allez-y et publiez votre groupe de champs.

Désormais, lorsque vous modifiez un produit, vous verrez ces nouveaux champs personnalisés dans l'interface de modification du produit :

Dans la section suivante, nous vous montrerons comment prendre les informations de ces champs personnalisés et les afficher sur le frontend de votre boutique WooCommerce.

Mais d'abord - parlons de l'autre type de champs personnalisés WooCommerce - champs de saisie de produit personnalisés.

Les plugins ci-dessus sont parfaits si vous souhaitez collecter des informations supplémentaires sur un produit et les afficher sur le frontend de votre site. Cependant, ils ne sont pas parfaits pour collecter les commentaires personnalisés de vos acheteurs sur le frontend. Par exemple, laisser les acheteurs entrer un message de gravure personnalisé qui sera ajouté au produit.

Pour ce cas d'utilisation, vous aurez généralement besoin d'un plug-in de produits complémentaires WooCommerce. Ces plugins sont spécialement conçus pour accepter les entrées de produits des acheteurs sur le frontend de votre magasin.

Vous pouvez trouver de nombreux plugins pour répondre à ce besoin, mais deux bons points de départ sont :

• Le plugin officiel WooCommerce Product Add-Ons - 49 $
• Champs de produits avancés - freemium

Nous allons vous montrer comment cela fonctionne en utilisant le plugin officiel Product Add-Ons de l'équipe WooCommerce, mais l'idée de base sera la même avec tous les plugins de produits complémentaires.

Une fois le plugin installé, vous pouvez accéder à Produits → Modules complémentaires pour créer les champs de saisie personnalisés que vous souhaitez afficher sur certains/tous vos produits.

Tout comme pour la configuration d'ACF, vous pouvez cibler vos champs sur tous les produits ou uniquement sur certaines catégories de produits.

Vous pouvez également ajouter autant de champs que nécessaire et choisir parmi différents types de champs.

La seule différence clé est que vous avez également la possibilité d'ajuster le prix d'un produit en fonction des choix effectués par un acheteur.

Par exemple, vous pouvez facturer 5 $ supplémentaires si l'acheteur souhaite ajouter une gravure/un message personnalisé :

Vous avez également la possibilité d'ajouter des champs de saisie personnalisés directement aux produits lorsque vous travaillez dans l'éditeur de produits. Vous pouvez le faire à partir d'un nouvel onglet Add-ons dans la zone Product data :

Le plugin Product Add-Ons affichera automatiquement ces champs personnalisés sur le frontend de votre boutique. Mais dans la section suivante, nous vous montrerons comment vous pouvez contrôler manuellement leur placement à l'aide d'Elementor.

Maintenant que vous avez créé vos champs personnalisés et que vous y avez ajouté des informations, vous êtes prêt à afficher ces informations sur l'interface de votre site.

Nous allons vous montrer deux options ici :

1. Élémentaire
2. Code personnalisé via le fichier functions.php

Le moyen le plus simple d'afficher vos champs personnalisés WooCommerce est avec Elementor Pro et Elementor WooCommerce Builder. À l'aide de l'interface visuelle par glisser-déposer d'Elementor, vous pouvez créer un ou plusieurs modèles de produits qui incluent les données de vos champs personnalisés.

Pour commencer, accédez à Modèles → Générateur de thèmes et créez un nouveau modèle de produit unique.

Vous pouvez ensuite choisir parmi l'un des modèles prédéfinis ou créer votre propre conception de produit à partir de zéro. Si vous avez besoin d'aide ici, vous pouvez consulter notre guide complet sur la façon de personnaliser la conception de la page produit WooCommerce.

Lorsque vous êtes prêt à insérer vos champs personnalisés WooCommerce, ajoutez un widget d' éditeur de texte standard, puis choisissez l'option permettant de le remplir avec des balises dynamiques. Dans la liste déroulante des balises dynamiques, choisissez ACF FIeld :

Sur l'écran suivant, cliquez sur l'icône en forme de clé et utilisez le menu déroulant Clé pour choisir le champ personnalisé exact que vous souhaitez afficher :

Vous pouvez également utiliser les options avancées pour ajouter du texte statique avant/après les informations du champ personnalisé.

Et c'est tout! Elementor va maintenant extraire dynamiquement les données du champ personnalisé pour le produit que vous prévisualisez.

Vous pouvez également utiliser vos champs personnalisés pour remplir plus que du texte. Par exemple, si vous avez ajouté un champ personnalisé de nombre, vous pouvez utiliser ce nombre pour renseigner les classements par étoiles, les compteurs, etc.

Ou, vous pouvez également remplir dynamiquement des liens. Par exemple, vous pouvez créer un champ personnalisé qui inclut un lien vers la documentation du produit et utiliser ce lien pour remplir un bouton sur la page du produit unique.

Pour en savoir plus sur cette fonctionnalité, vous pouvez lire notre guide complet sur le contenu dynamique dans Elementor Pro.

Ou, pour une autre façon d'afficher ces informations dans Elementor, vous pouvez également créer une table de produits qui inclut vos données de champ personnalisées.

Si vous avez créé des champs de saisie de produit personnalisés avec l'un des plugins ci-dessus (tels que le plugin officiel Product Add-Ons que nous avons mentionné), ces plugins afficheront généralement automatiquement ces champs sur le frontend de votre boutique, vous ne serez donc pas devez les inclure manuellement dans vos modèles Elementor.

Dans Elementor, ces champs complémentaires s'affichent généralement partout où vous ajoutez le widget Ajouter au panier dans vos conceptions. Ainsi, si vous souhaitez les déplacer, vous pouvez ajuster l'emplacement du widget Ajouter au panier .

Si vous maîtrisez le code, vous pouvez également ajouter des champs personnalisés WooCommerce à la page produit à l'aide du fichier functions.php de votre thème enfant ou d'un plugin comme Code Snippets. Cependant, nous ne recommandons pas cette méthode pour la plupart des gens car elle est complexe.

Non seulement vous devrez comprendre le code pour le configurer, mais vous n'obtiendrez pas non plus un aperçu visuel en temps réel et il sera difficile de placer vos champs. C'est pourquoi Elementor constitue une meilleure option pour la plupart des propriétaires de magasins.

Si vous souhaitez utiliser la méthode du code manuel, vous vous fierez aux hooks WooCommerce pour placer vos informations personnalisées. Si vous n'êtes pas familier avec les "hooks", ils vous permettent essentiellement d'injecter du code ou du contenu dans certaines parties de votre boutique WooCommerce.

Par exemple, vous pouvez trouver différents crochets pour injecter du contenu au-dessus du titre du produit, sous le titre du produit, sous le bouton Ajouter au panier, etc.

Pour commencer, vous voudrez choisir le crochet pour l'emplacement où vous souhaitez injecter du contenu à partir de vos champs personnalisés. Pour faciliter la visualisation de ces emplacements, vous pouvez utiliser l'excellent guide visuel des hooks WooCommerce de Business Bloomer.

En plus de trouver le crochet que vous souhaitez utiliser, vous aurez également besoin du PHP pour afficher votre champ à partir d'ACF. Si vous ne savez pas comment l'obtenir, ACF dispose d'une documentation très détaillée.

Ensuite, vous pouvez utiliser un extrait de code comme ci-dessous pour afficher le champ, où insert_hook_location est l'emplacement du crochet que vous souhaitez utiliser et field_name est le slug de nom de champ d'ACF :

Par exemple, l'extrait ci-dessous afficherait le champ personnalisé de déclaration artistique sous les méta-détails du produit WooCommerce :

Voici à quoi cela pourrait ressembler sur le frontend de votre magasin :

Vous pouvez répéter le processus pour afficher des champs personnalisés supplémentaires.

Comprendre comment utiliser les champs personnalisés WooCommerce est vraiment utile pour créer des magasins WooCommerce personnalisés et optimisés.

Vous pouvez les utiliser pour offrir un moyen structuré de saisir des données produit supplémentaires dans le tableau de bord principal et d'afficher ces informations sur votre site frontal. Ou, vous pouvez également créer des champs de saisie personnalisés pour permettre aux acheteurs de personnaliser vos produits.

Pour créer des champs personnalisés pour des données produit supplémentaires, vous pouvez utiliser un plug-in tel que Advanced Custom Fields (ACF), tandis que les champs de saisie personnalisés nécessitent un plug-in de produits complémentaires dédié.

Ensuite, pour afficher plus facilement ces champs personnalisés sur le frontend de votre boutique, vous pouvez utiliser Elementor et Elementor WooCommerce Builder. Avec Elementor, vous pouvez créer vos propres modèles de produits personnalisés qui incluent des informations dynamiques illimitées à partir de vos champs personnalisés - aucun code requis.

Avez-vous encore des questions sur l'utilisation des champs personnalisés WooCommerce sur votre boutique ? Laissez un commentaire et faites-le nous savoir !