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

webempresa woocommerce diegol

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:

leer mas descripcion corta woocommerce

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:

leer mas amazon

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:

contraer la descripcion corta woocommerce

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 = 50;
      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:

extender la descripcion corta woocommerce

Cualquier duda como siempre os leo en comentarios!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

Deja una respuesta

Tu dirección de correo electrónico no será publicada.