É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 trousse à outils.

Les champs personnalisés vous permettent de collecter et d'afficher des informations supplémentaires sur vos produits WooCommerce, ce qui est vraiment 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 façon dont ils aident à 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 du produit.
• Comment créer des champs personnalisés WooCommerce sur le backend.
• Comment afficher des champs personnalisés sur le frontend de votre boutique, à l'aide d'Elementor Pro ou d'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 sont comme 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, les 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 zone de description du 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 donnent également la possibilité 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 n'êtes toujours pas sûr de la façon dont tout cela se déroule, 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 magasins WooCommerce :

• Champs de données de produit - ceux-ci vous permettent de stocker des informations supplémentaires sur un produit. En tant qu'administrateur du magasin, vous saisirez ces données à partir de votre tableau de bord WordPress backend. Ensuite, vous afficherez les données sur vos pages de produits.
• Champs de saisie personnalisés - ils 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 certain type de produit personnalisable. La principale différence ici est que vos acheteurs saisissent les données depuis le frontend de votre site.

Selon la situation de votre boutique, vous pouvez utiliser un seul type de champs personnalisés WooCommerce. Vous pouvez également 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 est d'afficher des informations supplémentaires sur un produit. Les champs de saisie principaux de 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 de critiques positives 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 chemise.

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

Et ensuite, vous pouvez afficher ces informations où vous le souhaitez sur vos pages de produits comme ceci :

Fondamentalement, si vous souhaitez afficher tout type d'informations supplémentaires sur un produit, mettre ces informations dans des champs personnalisés peut être très utile pour les raisons suivantes. Vous pouvez…

1. Créez des champs de saisie dédiés, ce qui facilite l'ajout et la mise à jour d'informations à l'avenir.
2. Affichez les informations exactement 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 le 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 produits 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 saisir un message personnalisé à imprimer en sérigraphie sur une chemise.

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

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 de produit supplémentaires, une autre option populaire est les attributs et taxonomies WooCommerce. Vous verrez simplement 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 propres à chaque produit individuel. Les produits ne sont pas regroupés par les informations du champ personnalisé.

Regardons quelques exemples de quand utiliser chacun…

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 souhaiterez 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 l'ajustement du produit. Par exemple, s'il taille correctement 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 s'adapter et vous pouvez choisir une approche différente en fonction de vos besoins spécifiques.

Par exemple, disons que vous souhaitez ajouter des informations sur le graphiste qui a créé chaque t-shirt que vous vendez. Voici les différents scénarios dans lesquels vous souhaiterez peut-être 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'utiliserez 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 de 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
• Pods
• Boîte méta

Nous avons une comparaison détaillée de 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. Cependant, la même idée de base s'appliquera à tous les plugins.

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

Un groupe de champs est exactement ce que dit son nom – un groupe d'un ou plusieurs champs personnalisés que vous souhaitez ajouter à tout ou partie de 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 sur Product . Si vous souhaitez afficher ces champs personnalisés sur tous vos produits, il vous suffit de :

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

Ensuite, vous pouvez ajouter vos champs personnalisés en utilisant le 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 où 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 d'édition de 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 - les champs de saisie de produits 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 des entrées personnalisées de vos acheteurs sur le front-end. Par exemple, laisser les acheteurs saisir 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 module complémentaire de produit WooCommerce. Ces plugins sont spécialement conçus pour accepter les entrées de produits des acheteurs sur le front-end 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 à l'aide du plugin officiel Product Add-Ons de l'équipe WooCommerce, mais l'idée de base sera la même avec tous les plugins add-on de produit.

Une fois le plugin installé, vous pouvez aller dans 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 mise en place d'ACF, vous pouvez cibler vos champs sur tous les produits ou seulement certaines catégories de produits.

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

La principale différence est que vous avez également la possibilité d'ajuster le prix d'un produit en fonction des choix qu'un acheteur fait.

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 Modules complémentaires dans la zone Données du produit :

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 contrôler manuellement leur placement à l'aide d'Elementor.

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

Nous allons vous montrer deux options ici :

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

Le moyen le plus simple d'afficher vos champs personnalisés WooCommerce consiste à utiliser Elementor Pro et Elementor WooCommerce Builder. À l'aide de l'interface visuelle de 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 design 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 de produit WooCommerce.

Lorsque vous êtes prêt à insérer vos champs personnalisés WooCommerce, ajoutez un widget Éditeur de texte standard, puis choisissez l'option pour 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 de clé et utilisez la liste déroulante 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 de 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é numérique, vous pouvez utiliser ce numéro pour renseigner les notes, 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 plug-ins ci-dessus (comme le plug-in officiel Product Add-Ons que nous avons mentionné), ces plug-ins afficheront généralement automatiquement ces champs sur le frontend de votre boutique, vous ne le ferez 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 connaissez le code, vous pouvez également ajouter des champs personnalisés WooCommerce à la page du 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 à la plupart des gens car elle est complexe.

Non seulement vous aurez besoin de 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 est une meilleure option pour la plupart des propriétaires de magasins.

Si vous souhaitez utiliser la méthode de code manuel, vous vous fierez aux crochets 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 le contenu de vos champs personnalisés. Pour faciliter la visualisation de ces emplacements, vous pouvez utiliser l'excellent guide visuel des crochets WooCommerce de Business Bloomer.

En plus de trouver le hook que vous souhaitez utiliser, vous aurez également besoin de 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. 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 de 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 module complémentaire de produit dédié.

Ensuite, pour le moyen le plus simple d'afficher 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!