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

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).