Comment rendre les attributs de produits WooCommerce plus importants

Les attributs de produit WooCommerce sont très utiles, mais ils sont cachés par défaut assez loin de la page, dans le Information additionnelle section. Selon votre thème, ils peuvent ne pas être visibles tant que l'utilisateur n'a pas cliqué sur un onglet, ce qui signifie que de nombreux utilisateurs peuvent ne pas les consulter.. 

Parfois, il est plus utile de les répertorier dans la partie supérieure de la page de produit unique avec les catégories de produits. Dans ce tutoriel, je vais vous montrer comment déplacer des attributs de produit de Information additionnelle onglet à la partie supérieure de la page.

Ce dont vous aurez besoin

Pour suivre, vous aurez besoin de:

• Une installation de développement de WordPress.
• Un éditeur de code.
• WooCommerce installé et activé.
• Produits ajoutés: j'ai importé les données de produit fictives fournies avec WooCommerce; pour plus de détails sur la procédure à suivre, consultez ce guide.
• Un ou plusieurs attributs de produit ajoutés (l'attribut de couleur intégré avec les données factices ne fonctionne pas de manière standard).
• Un thème compatible WooCommerce activé-j'utilise Storefront.

Pour ajouter les attributs plus près du haut de la page de produit unique, procédez comme suit:

1. Créer un plugin vide et l'activer.
2. Examinez le code source de WooCommerce pour identifier le filtre qui contrôle les attributs de produit ajoutés aux onglets vers le bas de la page..
3. Ajouter une fonction liée à ce filtre pour supprimer l'onglet d'attributs.
4. Examinez à nouveau les fichiers source pour identifier le point d'ancrage qui attire le contenu en haut de la page..
5. Accrocher une fonction à cette place.

Commençons par examiner la manière dont nos attributs de produit seront affichés par défaut. J'ai créé un attribut appelé Taille et j'y ai ajouté trois valeurs: petite, moyenne et grande. Ici, il est affiché dans le Information additionnelle section au bas d'une page de produit:

Nous voulons déplacer ces attributs de produit du bas de l'écran vers le haut à gauche, sous la description du produit..

Créer le plugin

Dans votre dossier wp-content / plugins, créez un nouveau fichier. J'appelle le mien woocommerce-proéminent-produit-attributs.php. Ouvrez ce fichier et ajoutez ce qui suit:

Enregistrez votre fichier et allez à la Plugins écran dans votre tableau de bord WordPress. Activer le plugin.
Code source WooCommerce: Affichage de l'attribut du produit
Commençons par identifier la fonction et le crochet utilisés pour générer les attributs du produit. Cela implique de parcourir quelques-uns des fichiers du plugin:
 
Le modèle qui génère la page de produit unique est woocommerce / templates / single-product.php.
 
Dans ce fichier, il y a un get_template_part () appeler le content-single-product.php fichier.
 
Dans ce fichier, il y a une action appelée woocommerce_after_single_product_summary. Trois fonctions sont liées à celle-ci: celle que nous devons examiner est woocommerce_output_product_data_tabs ().
 
Vous pouvez trouver le woocommerce_output_product_data_tabs () fonctionner dans woocommerce / includes / wc-template-functions.php.
 
La fonction utilise wc_get_template () chercher une autre partie du template, dans ce cas wooocommerce / templates / single-product / tabs / tabs.php.
 
Dans ce fichier (on y arrive, je promets!), Il y a une variable appelée $ tabs, qui est défini comme apply_filters ('woocommerce_product_tabs', array ());.
 
Donc, pour supprimer l'onglet d'attributs du produit, nous devons créer une fonction supprimant cet onglet et l'accrocher au woocommerce_product_tabs filtre. 
 
Phew! Nous sommes arrivés à la fin.
Suppression d'attributs de produit des onglets à l'aide d'un filtre
Heureusement, la documentation WooCommerce explique comment supprimer les onglets à l'aide de ce filtre, ce qui facilite un peu notre travail..
Dans votre fichier plugin, ajoutez ce code:
/ ** * Supprime l'onglet "Informations complémentaires" qui affiche les attributs du produit. * * @param array $ tabs Les onglets WooCommerce à afficher. * * @return array WooCommerce tableau à afficher, moins "Informations complémentaires". * / function tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information'])); retourne $ tabs;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Cette fonction a $ tabs comme objet parce que c'est la variable avec laquelle nous travaillons. Ça enlève le 'Information additionnelle' onglet du tableau de valeurs stockées par le $ tabs variable. Notez que j'ai utilisé une priorité numérotée élevée de 100 lors de l'accrochage de ma fonction pour s'assurer qu'elle se déclenche après les fonctions qui ajoutent les onglets en premier.
Enregistrez votre fichier et actualisez votre page produit:
Donc, c'est l'onglet enlevé. Nous devons maintenant ajouter les attributs du produit en haut de la page..
Trouver la place dans le code pour ajouter des attributs
Une fois encore, nous devons identifier où, dans le code, nous devons ajouter une fonction pour afficher les attributs du produit. En d'autres termes, nous devons trouver un crochet d'action.
Retour à la content-single-product.php fichier, il y a un crochet appelé woocommerce_single_product_summary qui est utilisé par sept fonctions qui génèrent chacune un bit de données différent sur le produit, à savoir:
 
le titre
 
le classement
 
le prix
 
l'extrait (c'est-à-dire la courte description)
 
le bouton ajouter au panier
 
métadonnées
 
partage de liens
 
Je veux ajouter mes attributs dans la section relative aux métadonnées, jetons donc un coup d'œil à la fonction qui génère.
La fonction est dans le wc_template_functions.php fichier, et il utilise wc_get_template () appeler un autre fichier d'inclusion, woocommerce / templates / single / product / meta.php.
dans le meta.php fichier, il existe un code pour sortir les métadonnées sur le produit, avec le woocommerce_product_meta_start accrocher devant et le woocommerce_product_meta_end accrocher après. Nous pouvons donc utiliser l'un de ces deux crochets pour générer les attributs de nos produits. Utilisons le dernier, car cela fera apparaître les attributs après les catégories et les balises.
Écrire une fonction pour afficher les attributs du produit
Dupliquer le code déjà fourni par WooCommerce
Pour afficher une liste de termes de taxonomie pour notre produit, nous pouvons utiliser la fonction fournie par WooCommerce list_attributes (). Vous trouverez cette fonction dans le templates / single / product / tabs / additional-information.php fichier.
Dans votre fichier plugin, ajoutez ceci:
/ ** * Affiche les attributs du produit en haut à droite de la page du produit. * * @param $ product * / function tutsplus_list_attributes ($ product) global $ product; $ product-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Notez qu'il n'est pas nécessaire d'utiliser une priorité, car WooCommerce n'a aucune autre fonction accrochée à ce hook d'action..
Maintenant, actualisez votre page produit:
Maintenant, les attributs sont affichés. Ils utilisent une interface semblable à un onglet avec le thème Storefront car c'est ce qui est configuré pour la valeur par défaut. Information additionnelle onglet, et le HTML de sortie utilise un tableau, qui fournit la mise en page par défaut. 
Approche alternative sans table
Ce tableau n'est pas idéal: il serait préférable de disposer d'une liste d'attributs de produits, afin de correspondre à la liste de catégories de produits située au-dessus. Faisons cela.
WooCommerce stocke les attributs en tant que taxonomies personnalisées. Le slug que vous créez pour chacune de vos valeurs d'attribut est précédé d'un Pennsylvanie_ suffixe lorsque l'attribut est stocké dans la base de données. 
Cependant, il ne stocke pas ces taxonomies dans le wp_term_taxonomy table et wp_terms comme vous le feriez lors de l’enregistrement d’une taxonomie personnalisée normale dans WordPress. Au lieu de cela, WooCommerce crée des tables pour les attributs, ce qui signifie que les données sont stockées différemment. Cela signifie que nous devons adopter une approche plus détournée pour accéder à l'étiquette de chaque taxonomie lorsque nous produisons cette liste..
Dans ton tutsplus_list_attributes () fonction, supprimez les deux lignes à l'intérieur de la fonction. Remplacez-les par ce code:
produit global $; global $ post; $ attributs = $ product-> get_attributes (); if (! $ attributs) return;  foreach ($ attributs en tant qu'attributs $) // Récupère la taxonomie. $ terms = wp_get_post_terms ($ product-> id, $ attribut ['nom'], 'tout'); $ taxonomy = $ terms [0] -> taxonomy; // Récupère l'objet taxonomie. $ taxonomy_object = get_taxonomy ($ taxonomy); // Récupère l'étiquette d'attribut. $ attribut_label = $ taxonomy_object-> étiquettes-> nom; // Affiche l'étiquette suivie d'une liste de termes cliquables. echo get_the_term_list ($ post-> ID, $ attribut ['nom'], '
'. $ attribut_label. ':', ',', '
'); 
Voici ce que ce code fait:
 
Il définit le global $ produit variable (qui est un objet de notre fonction).
 
Il utilise $ product-> get_attributes () chercher tous les attributs pour ce produit.
 
S'il n'y en a pas, ça ne fait rien.
 
S'il y a des attributs, il ouvre un pour chaque boucle pour chacun d'eux.
 
Pour récupérer l'étiquette, il utilise le wp_get_post_terms () et get_taxonomy () fonctions pour récupérer le tableau de données relatives à cette taxonomie pour ce poste.
 
Il fait ensuite apparaître le nom (ou étiquette) de la taxonomie (ou attribut), suivi d'une liste de liens vers les archives pour chacune des valeurs utilisant get_the_term_list ().
 
Les attributs sont maintenant affichés dans une liste:
Beaucoup mieux!
Crédit: Merci à Isabel Castillo pour le code pour afficher l'étiquette d'attribut. 
Résumé
Le déplacement d'attributs de produit dans la page de produit nécessite un peu de travail dans le code source de WooCommerce et dans l'identification des fichiers de modèle, des points d'ancrage et des fonctions jouant un rôle dans l'affichage des attributs de produit.
En trouvant le filtre qui contrôle quels onglets sont sortis, nous avons pu supprimer le Information additionnelle onglet, qui a supprimé les attributs du bas de l'écran. Ensuite, en ajoutant une nouvelle fonction à un crochet situé plus haut dans la page, nous avons pu les afficher où nous le voulions..
Si vous souhaitez intégrer d'autres fonctionnalités de WooCommerce à votre site, consultez également ce qui est disponible sur le marché..



		
			
	   
	




Code