Comment ajouter une image dans la description des catégories de produit woocommerce

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.

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.

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.