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

LucusHost, el mejor hosting

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

extender la descripcion corta woocommerce

Cualquier duda como siempre os leo en comentarios!

¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 1)
mailerlite diegol

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 realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

comentarios

  1. Ángeles says

    Hola Diego, he implementado el snippet en una web que estoy creando y no hace cambios 🙁

    Tengo Elementor Pro y Generate Press Premium

    • Diegol says

      Hola Angeles,

      Funciona en una configuración de plantilla de WooCommerce por defecto. Es decir, si la personalizas con bloques de elementor por ejemplo, el código no funcionaría.

      Si no es eso, tiene que haber otra función que choque.

      Un saludo!

  2. Alex says

    Hola Diego, muy buen tutorial, lo he probado y ha funcionado perfectamente, pero donde no he conseguido que vaya bien es en las descripciones de las categorías de producto. Supongo que habría que añadir otro tipo de código, ¿verdad?

    Gracias.

    Saludos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *