Création de sites internet en Lot-et-Garonne (47)

06 12 86 20 98
contact@simplissite.com

WooCommerce | Comment limiter la longueur de la description des catégories avec un bouton Lire plus ?

Publié le

par

Dans les catégories WooCommerce, il est bien sûr judicieux d’insérer une description plutôt étoffée pour le référencement. Seulement, plus cette description est longue, plus les produits se retrouvent bas dans la page. Alors comment masquer une partie de la description ?

Ajoutez la balise « Lire la suite » dans les descriptions des catégories

Au préalable, dans les descriptions de vos catégories, ajoutez une balise « Lire la suite » (<!–more–>) entre votre début de texte – celui à afficher tout le temps – et la deuxième partie de texte – celui à n’afficher qu’après un clic sur « Lire plus ».

Le code à insérer

Collez le code ci-dessous dans le fichier functions.php de votre thème ou dans votre plugin d’ajout de code (code snippets).

// Limite la longueur de la description des catégories avec Lire plus
// On enlève la description initiale
remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10, 2 ); 
// On ajoute la description grâce à notre fonction personnalisée
add_action( 'woocommerce_archive_description', 'bbloomer_woocommerce_short_description_truncate_read_more', 10 );
function bbloomer_woocommerce_short_description_truncate_read_more() {
	if ( is_product_taxonomy() && 0 === absint( get_query_var( 'paged' ) ) ) {
		$description = term_description();
		// On scinde la description en 2 parties selon la balise <!--more-->
		$description_array = explode('<!--more-->',$description );
		if (count($description_array)==2){
			wc_enqueue_js('
				 var ellipses = "... ";
				 var content_resume = "'.$description_array[0].'";
				 var content = $(".term-description").html();
				 var html = "<span class=\'truncated\'>" + content_resume + ellipses + "<a class=\'read-more\'>Lire plus</a></p></span><span class=\'truncated\' style=\'display:none\'>" + content + "<a class=\'read-less\'>Masquer</a></span>";
				 $(".term-description").html(html);
			  $(".read-more").click(function(e) {
				 e.preventDefault();
				 $(".term-description .truncated").toggle();
			  });
			 $(".read-less").click(function(e) {
				 e.preventDefault();
				 $(".term-description .truncated").toggle();
			  });
		   ');
		}
		$description = wc_format_content( $description );
		if ( $description ) {
			echo '<div class="term-description">' . wc_format_content($description) . '</div>';
		}
	}
}

J’ai pu créer ce code grâce aux explications de Oldlastman sur GitHub (2017) et de la réponse de Barbapapa en réponse à ce sujet sur Stackoverflow (2020).

À propos de l’auteure

2 réponses à “WooCommerce | Comment limiter la longueur de la description des catégories avec un bouton Lire plus ?”

  1. Avatar de boutin
    boutin

    bonjour, J’ai testé ce code via code snippets mais cela ne fonctionne pas sur mes pages catégorie . n-y a t-il pas une erreur ? en vous remerciant

    1. Avatar de Delphine Tabard
      Delphine Tabard

      Bonjour,
      C’est un code un peu capricieux. J’ai pu constater que s’il y a un lien ou un effet de style dans le texte avant ça ne fonctionne pas. Je compense en faisant attention à n’avoir que du texte simple dans les premières lignes de ma description.
      Si vous avez un module d’optimisation de la vitesse du site par compression du js ou css, cela peut aussi nuire au bon fonctionnement de ce code.
      Si vous trouvez une amélioration du code ci-dessus, n’hésitez pas à partager.

Laisser un commentaire

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