Enrichir les descriptions de catégories de produits avec des images peut transformer l’apparence de votre boutique WooCommerce. Cependant, par défaut, WooCommerce bloque l’utilisation des balises <img>
et des shortcodes dans ces descriptions. Dans cet article, découvrez des solutions simples pour contourner ces limitations et améliorer l’attrait visuel de vos catégories de produits.
Problème 1 : La balise <img>
est bloquée par défaut
Pourquoi la balise <img>
est-elle bloquée ?
Par mesure de sécurité, WooCommerce empêche l’insertion directe de la balise <img>
dans les descriptions des catégories de produits. Cela vise à prévenir les attaques XSS (cross-site scripting) et autres vulnérabilités potentielles.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
Solution : Autoriser la balise <img>
Pour autoriser la balise <img>
dans les descriptions de catégories, vous pouvez utiliser le filtre woocommerce_product_description_heading
. Ajoutez le code suivant dans le fichier functions.php
de votre thème enfant :
function allow_img_in_category_description($allowedtags) {
$allowedtags['img'] = array(
'src' => array(),
'class' => array(),
'alt' => array(),
'width' => array(),
'height' => array(),
'loading'=> array()
);
return $allowedtags;
}
add_filter('wp_kses_allowed_html', 'allow_img_in_category_description', 10, 2);
Ce code ajoute les attributs nécessaires pour permettre l’utilisation de la balise <img>
dans les descriptions de catégories.
Problème 2: Les shortcodes sont bloqués
Pourquoi les shortcodes sont-ils bloqués ?
WooCommerce désactive les shortcodes dans les descriptions de catégories pour éviter des problèmes de sécurité et de performance.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
Solution : Activer les shortcodes
Pour activer les shortcodes dans les descriptions de catégories, ajoutez le code suivant dans le fichier functions.php
de votre thème enfant :
function enable_shortcodes_in_category_description() {
add_filter('term_description', 'do_shortcode');
}
add_action('init', 'enable_shortcodes_in_category_description');
Ce code permet l’utilisation de shortcodes dans les descriptions de catégories, vous offrant ainsi plus de flexibilité pour personnaliser vos pages.
Exemple pratique
Insérer une image avec un shortcode
Une fois les balises <img>
et les shortcodes activés, vous pouvez créer un shortcode pour insérer une image. Par exemple :
function my_custom_image_shortcode($atts) {
$atts = shortcode_atts(array(
'src' => '',
'alt' => '',
'class' => '',
'width' => '',
'height' => '',
'loading'=> 'lazy'
), $atts, 'custom_image');
return '<img src="' . esc_url($atts['src']) . '" alt="' . esc_attr($atts['alt']) . '" class="' . esc_attr($atts['class']) . '" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" loading="' . esc_attr($atts['loading']) . '" />';
}
add_shortcode('custom_image', 'my_custom_image_shortcode');
Vous pouvez ensuite utiliser ce shortcode dans la description de catégorie comme ceci :
[custom_image src="URL_DE_VOTRE_IMAGE" alt="Description de l'image" class="votre-classe" width="300" height="200"]
Conclusion
En autorisant la balise <img>
et les shortcodes dans les descriptions de catégories de produits WooCommerce, vous pouvez Utiliser une image dans la description de la categorie de produit de woocommerce et enrichir vos pages de manière significative. Suivez les étapes décrites pour contourner les limitations par défaut de WooCommerce et améliorer l’apparence de votre boutique en ligne.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
Découvrez nos plugins WooCommerce
Améliorez votre boutique en ligne avec nos plugins personnalisés :
Automatisez vos promotions, multiple point de collecte, bon d’achat exclusif à chaque nouveau inscrit, …