WooCommerce: truncar la descripción corta con la palanca "Leer más"

Puede aplicar este simple fragmento de jQuery a cualquier contenido de WooCommerce.

En este ejemplo, veremos cómo truncar la descripción breve del producto único de WooCommerce y colocar un enlace "leer más" para revelar el contenido oculto... sin embargo, también puede aplicar esto a la descripción larga, una pestaña de producto personalizada, la galería de productos, y todo lo que se pueda truncar.

¡Disfrutar!

Después de aplicar el código a continuación, una "breve descripción" larga ahora está limitada a 40 caracteres y aparece un nuevo enlace "Leer más". Al hacer clic, se revela el texto oculto.

Fragmento de código de PHP: trunque mediante programación la descripción breve y reemplácela con el enlace "Leer más" en la página de un solo producto de WooCommerce

Nota: la variable “ show_char ” define el número de caracteres visibles de la breve descripción. En el siguiente ejemplo, estoy usando 40.

/**
 * @snippet       Truncate Short Description @ WooCommerce Single
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
 
add_action( 'woocommerce_after_single_product', 'bbloomer_woocommerce_short_description_truncate_read_more' );
 
function bbloomer_woocommerce_short_description_truncate_read_more() { 
   wc_enqueue_js('
      var show_char = 40;
      var ellipses = "... ";
      var content = $(".woocommerce-product-details__short-description").html();
      if (content.length > show_char) {
         var a = content.substr(0, show_char);
         var b = content.substr(show_char - content.length);
         var html = a + "<span class='truncated'>" + ellipses + "<a class='read-more'>Read more</a></span><span class='truncated' style='display:none'>" + b + "</span>";
         $(".woocommerce-product-details__short-description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".woocommerce-product-details__short-description .truncated").toggle();
      });
   ');
}

Deja una respuesta Cancelar la respuesta

WooCommerce: truncar la descripción corta con la palanca "Leer más"

Fragmento de código de PHP: trunque mediante programación la descripción breve y reemplácela con el enlace "Leer más" en la página de un solo producto de WooCommerce

(adsbygoogle = window.adsbygoogle || []).push({});