Avez-vous rencontré une situation nécessitant une image pour chacune de vos balises WooCommerce ? Heureusement pour vous, nous aussi ! Nous avions un tas de produits et un tas de catégories, mais nous voulions garder les marques séparées des catégories réelles, donc plutôt que d'utiliser des sous-catégories sous un parent de "Marques", nous avons utilisé des balises. Des centaines de produits plus tard, notre client a voulu afficher une image sur chacune des pages de balises, en particulier le logo de la marque. Oh oh ! Aucune option de ce type.
Nous pourrions passer en revue chaque produit, saisir son étiquette de marque, créer une catégorie et l'attribuer à une catégorie parente de "Marques", mais cela semble demander beaucoup de travail supplémentaire. Cela est d'autant plus vrai que nous avons vraiment aimé la façon dont les marques étaient affichées dans un nuage de tags sur le front-end du site.
Solution :le plugin Taxonomy Images
Le plug-in d'images de taxonomie fonctionne avec des taxonomies personnalisées et attribue une option d'interface graphique pour attacher des images à cette taxonomie. Dans ce cas, notre taxonomie est une étiquette de produit. La mise en œuvre prend deux étapes, l'installation/configuration du plug-in et le téléchargement d'images ainsi que la configuration de votre modèle de balise WooCommerce.
Configuration du plug-in et téléchargement d'images
- Connectez-vous à votre administrateur WordPress et choisissez Plugins > Ajouter un nouveau
- Recherchez et installez le plug-in "Images de taxonomie". Assurez-vous de l'activer après l'installation !
- Accédez à Paramètres > Images de taxonomie
- Cochez la case "Tags de produit" et choisissez "Enregistrer les modifications"
Vous devriez maintenant voir l'option de télécharger une image à côté de chaque balise de produit sous Produits> Balises. Nous sommes déjà à mi-chemin ! Allez-y et téléchargez une image pour chaque balise comme vous le feriez normalement pour télécharger des images dans WordPress - assurez-vous de sélectionner le bouton "Associer à tag_name" après le téléchargement (où tag_name est votre nom de balise réel). Mettez à jour votre balise et vous êtes presque prêt !
Configuration de votre modèle WooCommerce
Nous devons maintenant informer WooCommerce que vous souhaitez afficher l'image sur la page à balise unique. C'est un peu plus compliqué et nécessite de modifier du code. Vous aurez également besoin d'un accès FTP à votre installation WordPress afin d'ajuster certains fichiers de modèle.
Commencez par configurer votre fichier modèle :
- Connectez-vous via FTP et accédez à votre répertoire de thèmes WordPress (wp-content/themes/{your_theme_name})
- Créez un nouveau dossier appelé woocommerce s'il n'existe pas déjà (ce dossier contient tous les remplacements de modèles)
- Copiez le modèle de page de balises dans ce dossier. Le modèle de page de balise se trouve sous wp-content/plugins/woocommerce/templates/taxonomy-product_tag.php . Mais attendez! Il y a une astuce ici, elle extrait en fait tout le contenu de wp-content/plugins/woocommerce/templates/archive-product.php , même si nous voulons vraiment remplacer les balises uniquement… pas toutes les pages de produits. Pour cela, copiez le archive-product.php fichier de wp-content/plugins/woocommerce/templates dans wp-content/themes/{your_theme_name}/woocommerce puis renommez-le en taxonomy-product_tag.php
Nous avons maintenant configuré un fichier de modèle de remplacement qui remplacera uniquement les balises de produit tout en contenant tout le contenu dont nous avons besoin. Nous devons maintenant modifier le fichier de modèle pour insérer du code qui affichera les images de vos étiquettes de produit. Voici comment :
Ouvrez votre nouveau fichier de modèle (wp-content/themes/{your_theme_name}/woocommerce/taxonomy-product_tag.php ) avec votre éditeur de texte préféré.
Juste au-dessus de la ligne qui ressemble à ceci :
<?php do_action( 'woocommerce_archive_description' ); ?>
Insérez ce qui suit :
<aside id="tag-brand-logo"><?php print apply_filters( 'taxonomy-images-queried-term-image', '' ); ?></aside>
Enregistrez le fichier et dirigez-vous vers l'une de vos pages de balises de produit uniques (assurez-vous que c'est celle sur laquelle vous avez réellement téléchargé une image !) Et profitez de la gloire d'avoir piraté WooCommerce pour obtenir vos images là où vous les vouliez.
Vous pouvez également styliser votre image avec du CSS comme celui-ci (par exemple) :
#tag-brand-logo{ float:right !important; margin-top:-25px; } Avez-vous trouvé ce message utile ? Vous voulez plus de conseils d'experts dans les blogs de votre hébergeur et directement de la part de votre équipe de support technique d'hébergement ? Hébergez votre site Web WordPress avec Websavers où l'assistance va au-delà de l'hébergement !