Champs personnalisés WooCommerce: comment les créer et les afficher

Vous cherchez un moyen de collecter et d’afficher des informations supplémentaires sur votre WooCommerce des produits? Les champs personnalisés de WooCommerce sont la solution, et vous allez apprendre à les utiliser dans cet article.

En particulier, vous apprendrez deux parties très importantes du puzzle:

  1. Ajouter des champs personnalisés au backend du produit WooCommerce où vous pouvez les utiliser pour ajouter des informations supplémentaires sur un produit.
  2. Prendre ces champs personnalisés de WooCommerce et les afficher sur l’interface pour vos visiteurs (c’est souvent la partie la plus délicate, mais je vais vous montrer une solution sans code)

Pour cette deuxième pièce du casse-tête, je me concentrerai tout particulièrement sur l’affichage des champs personnalisés. dans un tableau comme ci-dessous. La raison en est que le faire de cette façon permet une solution entièrement sans code:

Exemple de tableau

Si vous souhaitez afficher les champs personnalisés de WooCommerce sur une seule page de produit, ce n’est pas l’objet principal de cet article, bien que je traiterai de l’approche de base que vous devez adopter et vous oriente dans la bonne direction.

Ce que vous devez suivre dans ce tutoriel sur les champs personnalisés WooCommerce

Pour suivre ce guide, vous aurez besoin de quelques plugins.

Tout d’abord, pour gérer l’ajout des champs personnalisés de WooCommerce eux-mêmes, vous utiliserez le Plugin Advanced Custom Fields de WordPress.org.

Ensuite, pour afficher ces champs personnalisés dans une présentation de table facile à utiliser, vous utiliserez le WooCommerce Product Table plugin. La disposition de la table offerte par ce plugin est particulièrement intéressante pour:

  • Commerce de gros
  • Produits numériques (par exemple, livres numériques, photos, audio, vidéo, etc.)
  • Restaurants (y compris un système de commande)
  • Construisez vos propres produits
  • Etc.

En gros, c’est une excellente option pour créer tout type de Formulaire de commande WooCommerce.

Prêt à commencer? Creusons…

Partie 1: Utiliser des champs personnalisés avancés pour ajouter des champs

Une fois que vous avez installé et activé le logiciel gratuit Plugin Advanced Custom Fields de WordPress.org, dirigez-vous vers Champs personnalisés → Ajouter nouveau dans votre tableau de bord WordPress pour créer les champs personnalisés pour vos produits WooCommerce.

1. Créer un nouveau groupe de champs

A partir de là, donnez un nom à votre groupe de terrain (le nom n’est pas très important, il suffit de le préciser et de le rappeler facilement).

Puis, en utilisant le Règles de localisation, choisissez d’afficher ce groupe de champs si Type de posteest égal à Produit. Cela indique aux champs personnalisés avancés que vous voulez que ces champs personnalisés apparaissent uniquement pour les produits WooCommerce.

Et c’est tout! Alors que vous pouvez modifier le Réglages Si vous le souhaitez, vous pouvez les laisser comme valeurs par défaut et cliquer sur Publier:

Créer un nouveau groupe de champs

2. Ajouter des champs personnalisés WooCommerce au groupe de champs

Ensuite, utilisez le + Ajouter un champ bouton pour ajouter votre premier champ personnalisé:

Ajoutez vos champs personnalisés WooCommerce

Pour commencer, donnez-lui un Étiquette de champ. Une fois l’étiquette ajoutée, les champs personnalisés avancés renseigneront automatiquement le Nom de domaine.

Une option importante à prendre en compte est la Type de champ. Vous voudrez modifier ce menu déroulant en fonction des informations que vous souhaitez collecter. Les champs personnalisés avancés vous offrent de nombreuses options, notamment:

  • Texte – bon pour un texte court d’une seule ligne
  • Zone de texte – utile si vous souhaitez entrer plusieurs phrases / paragraphes
  • Nombre
  • Site Internet
  • Image
  • Fichier

Par exemple, disons que vous vendez du granola fait maison et que vous voulez:

  • Utilisez un o ou un ❌ emoji pour indiquer des produits équitables
  • Joignez un document PDF contenant des informations détaillées sur la source de chaque ingrédient de votre granola.

Remarque secondaire – ceci est un exemple loufoque, mais les mêmes principes de base s’appliquent quelle que soit la raison pour laquelle vous souhaitez utiliser vos champs personnalisés. Note complémentaire sur le bonus – cet exemple me fait penser à cette esquisse de poulet Portlandia.

Vous souhaitez deux champs personnalisés:

  • Emoji – vous pouvez utiliser un champ de texte ou une approche plus conviviale consisterait à utiliser un bouton radio avec les deux options déjà sélectionnées
  • Fichier – utiliser un type de champ de fichier vous permettra de télécharger un document PDF (ou d’autres types de fichiers que vous spécifiez)
type de champ

Assurez-vous de Mettre à jour votre groupe de champs lorsque vous avez ajouté tous les champs personnalisés WooCommerce que vous souhaitez utiliser.

3. Entrer des données dans des champs personnalisés lors de la modification de produits

Maintenant, lorsque vous allez créer un nouveau produit ou modifier un produit existant, vous devriez voir vos nouveaux champs personnalisés. Par défaut, ils apparaissent directement sous l’éditeur de texte. Vous pouvez également utiliser les paramètres de groupe de champs pour les déplacer sous la zone Données du produit, si vous le souhaitez:

metabox de terrain

Vous souhaiterez entrer les données pertinentes dans les champs personnalisés pour tous les produits auxquels les champs personnalisés s’appliquent.

À ce stade, vous avez créé avec succès des champs personnalisés sur le backend et enregistré ces informations dans votre base de données.

Toutefois, si vous accédez à la page du produit, les données de ce champ personnalisé sont introuvables:

page de produit unique

C’est là que la partie 2 de ce didacticiel entre en jeu!

Partie 2: Afficher les champs personnalisés WooCommerce avec la table de produits WooCommerce

N’oubliez pas que pour ce didacticiel, nous nous concentrons principalement sur l’utilisation de ces données de champ personnalisées et leur insertion dans un formulaire de commande WooCommerce comme celui-ci:

Exemple de tableau

Pour ce faire, vous aurez besoin de le plugin WooCommerce Product Table installé et activé sur votre site WooCommerce.

1. Choisissez les colonnes à afficher

Pour commencer, allez à WooCommerce → Paramètres → Produits → Tables de produits:

Champs personnalisés WooCommerce: comment les créer et les afficher 1

La première chose que vous voudrez configurer est le Les colonnes option dans le Contenu de la table section. C’est là que vous direz à la table des produits WooCommerce d’afficher vos champs personnalisés WooCommerce (avec toutes vos informations produit régulières).

Au niveau de base, vous souhaiterez probablement inclure les informations de produit génériques suivantes:

  • prénom – le nom du produit
  • image – l’image sélectionnée du produit
  • courtla description – la courte description du produit
  • prix – le prix du produit
  • ajouteràChariot – un bouton Ajouter au panier (vous pouvez contrôler le fonctionnement de ce bouton en une seconde).

Chaque objet (séparées par des virgules) apparaîtra dans sa propre colonne avec les données de produit pertinentes:

Champs personnalisés WooCommerce: comment les créer et les afficher 2

Ensuite, pour ajouter vos champs personnalisés en tant que leurs propres colonnes, vous pouvez utiliser ce format:

cf:champprénom

Où nom-champ est le nom réel du champ personnalisé que vous souhaitez afficher. N’oubliez pas que vous pouvez trouver le nom d’un champ dans les paramètres du champ personnalisé avancé (ACF le génère automatiquement en fonction de l’étiquette):

nom de domaine

Vous pouvez également modifier l’en-tête d’une colonne en ajoutant deux points après. Par exemple,

cf:champprénom:Titre Titre

En fin de compte, cela pourrait ressembler à ceci:

ajouter des champs personnalisés à la table

2. Configurer d’autres paramètres

Les paramètres de colonne sont les paramètres les plus importants pour l’affichage des champs personnalisés de WooCommerce. Cependant, la table des produits WooCommerce vous propose également un certain nombre d’options utiles que vous voudrez peut-être configurer.

Ne te sens pas comme toi avoir mais je vous recommande de les explorer car vous pouvez faire des choses comme:

  • Ajouter le chargement paresseux pour les grandes listes de produits
  • Changer le fonctionnement de la fonctionnalité d’ajout au panier
  • Ajouter des filtres ou des options de tri
  • Choisissez comment afficher les variations de produit
  • Ajouter un champ de recherche
  • Etc.

Une fois que vous avez terminé, veillez à enregistrer vos modifications.

3. Ajouter le code court de la table de produits WooCommerce

Une fois la configuration du plug-in terminée, vous pouvez utiliser le code abrégé de la table de produits WooCommerce pour afficher votre bon de commande n’importe où sur votre site.

Le shortcode de base est
(produit_table).

Cependant, ce shortcode affichera Chacun produit dans votre magasin, ce qui pourrait ne pas toujours être ce que vous voulez.

Pour contrôler quels produits apparaissent, vous pouvez utiliser Plusieurs règles d’inclusion / exclusion de la table de produits WooCommerce.

Par exemple, pour afficher uniquement les produits de la catégorie “granola”, vous pouvez modifier le code court comme suit:

(produit_table Catégorie=« granola »)

petit code

Une fois que vous avez ajouté le numéro abrégé, vous devriez voir votre formulaire de commande et tous les champs personnalisés pertinents sur la face avant de votre site:

Exemple de tableau

Et c’est tout! Si vous le souhaitez, vous pouvez utiliser plusieurs codes courts avec différentes règles d’inclusion / exclusion pour organiser vos produits. Ou bien, vous pouvez même ajouter le shortcode à la page d’archives de votre boutique au lieu d’utiliser la vue de grille normale.

Et si vous ne voulez pas utiliser un formulaire de commande WooCommerce?

Si vous ne souhaitez pas utiliser le formulaire de commande et préférez ajouter vos champs personnalisés à la page du produit WooCommerce standard, vous devez vous salir les mains (sale avec PHP, c’est).

Plus précisément, vous pouvez utiliser les points d’ancrage de WooCommerce pour «associer» vos champs personnalisés à la page du produit unique de WooCommerce.

Par exemple, si vous souhaitez afficher vos champs personnalisés immédiatement après le résumé du produit, vous pouvez ajouter quelque chose comme ceci à votre thème enfant. functions.php fichier, où nom de domaine est le nom actuel de votre champ:

// Afficher les champs ACF sur la page de produit unique de WooCommerce

add_action( ‘woocommerce_after_single_product_summary’, « ACF_product_content », dix );

une fonction ACF_product_content(){

print_r(get_field(‘nom de domaine’))}

Cela vous donnera le contenu du champ, mais vous aurez toujours besoin d’ajouter un autre contenu et un style pour le rendre joli. Si vous n’êtes pas un expert en technologie, vous comprendrez pourquoi j’ai opté pour la solution sans code!

Réflexions finales sur les champs personnalisés WooCommerce

Avec Champs personnalisés avancés et Tableau des produits WooCommerce, vous pouvez ajouter et afficher des champs personnalisés WooCommerce sans avoir à écrire une seule ligne de PHP.

Rappelez-vous, tout ce que vous devez faire est:

  • Créez un groupe de champs Advanced Custom Fields et affectez-le aux produits WooCommerce.
  • Créez autant de champs personnalisés que vous souhaitez utiliser
  • Ajouter des données aux champs personnalisés lors de l’ajout / de la modification de produits WooCommerce
  • Ajouter des champs personnalisés en tant que colonnes dans la table des produits WooCommerce
  • Placez le shortcode de la table de produits WooCommerce à l’endroit où vous souhaitez que vos formulaires de commande apparaissent

Vous avez des questions sur cette méthode d’utilisation de champs personnalisés pour vos produits WooCommerce? Demandez dans les commentaires!

Divulgation: Certains des liens dans cet article sont des liens d’affiliation, ce qui signifie que nous pouvons gagner sans frais supplémentaire, nous pouvons gagner une commission si vous cliquez à travers et effectuez un achat.

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *