Establecer un leer más en la descripción corta de Woocommerce

La descripción corta de un producto es una parte muy importante, ya que nos ayuda a entender con unas simples líneas en qué consiste o para qué sirve el producto. Todo esto lo explico en esta guía de cómo tiene que ser un producto en una tienda online.

El problema con esto es que a veces la descripción corta es muy larga y nos perjudica a la hora de ver el producto bien, sobretodo en móvil, por ejemplo:

En la pantalla de ordenador ni se ve del primer vistazo el botón de añadir al carrito.

Esto es algo que el propio Amazon soluciona en su ficha de producto. Como puedes ver en la siguiente imagen:

Podríamos ir cambiando las descripciones para mostrar menos texto, pero quizás es importante. Es por eso que en este tutorial os voy a mostrar una función para que automáticamente si el texto tiene más de X caracteres salga un leer más como este ejemplo en móviles:

Para conseguir esto vamos a añadir el siguiente código en el functions.php de nuestro child theme o en nuestro plugin de funcionalidades como explico aquí.

add_action( 'woocommerce_before_single_product', 'dl_comprimir_descripcion_corta_productos' );
  
function dl_comprimir_descripcion_corta_productos() { 
   wc_enqueue_js('
      var show_char = 400;
      var ellipses = "... ";
      var content = $(".woocommerce-product-details__short-description").html();
      if (content.length > show_char) {
         var a = content.substring(0, show_char);
         var html = "<span class=\'truncated\'>" + a + ellipses + "<a class=\'read-more\'>Leer más</a></p></span><span class=\'truncated\' style=\'display:none\'>" + content + "<a class=\'read-less\'>Leer menos</a></span>";
         $(".woocommerce-product-details__short-description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".woocommerce-product-details__short-description .truncated").toggle();
      });
     $(".read-less").click(function(e) {
         e.preventDefault();
         $(".woocommerce-product-details__short-description .truncated").toggle();
      });
   ');
}

En este caso son 50 caracteres, si quieres más o menos debes cambiarlos en esta parte del código:

var show_char = 50;

Con esto conseguimos que se vea el botón de añadir al carrito y las ventajas competitivas:

Cualquier duda como siempre os leo en comentarios!