Comprimir y expandir descripción corta de WooCommerce… leer más

add_action( ‘woocommerce_before_single_product’, ‘dl_comprimir_descripcion_corta_productos’ );<div style="text-align: center; margin: 20px 0;">
                        <a href="https://ariapsa.com/mb" target="_blank">
                            <img src="https://ariapsa.com/wp-content/uploads/2024/08/Marca-blanca-Diseno-de-paginas-web-mexico-ariapsa.jpg" alt="Banner" style="max-width: 100%; height: auto;">
                        </a>
                       </div>
function dl_comprimir_descripcion_corta_productos() {
wc_enqueue_js(‘
var show_char = 300;
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();
});
‘);
}

Sirve para comprimir la descripción corta de los productos en WooCommerce, mostrando solo una parte limitada del texto y ofreciendo la opción de expandirlo o contraerlo.

Explicación del código:

1. add_action( ‘woocommerce_before_single_product’, ‘dl_comprimir_descripcion_corta_productos’ );
   Esta línea agrega una acción de WordPress para ejecutar la función dl_comprimir_descripcion_corta_productos justo antes de que se muestre un producto en WooCommerce. Específicamente, se engancha en el hook woocommerce_before_single_product.
2. La función dl_comprimir_descripcion_corta_productos
   Dentro de la función, se utiliza wc_enqueue_js para inyectar un bloque de JavaScript que se encargará de manipular la descripción del producto en el lado del cliente.
3. show_char y ellipses
   En el código JavaScript, se define una variable show_char que establece un límite de caracteres a mostrar en la descripción corta del producto (300 en este caso). La variable ellipses define los puntos suspensivos (“…”) que aparecerán al truncar la descripción.
4. Condición para truncar la descripción
   El contenido de la descripción corta del producto se obtiene usando jQuery:
   var content = $(".woocommerce-product-details__short-description").html();
   Si el contenido tiene más de 300 caracteres, se genera una nueva estructura HTML que mostrará los primeros 300 caracteres seguidos por un enlace “Leer más”.
5. Mostrar más o menos texto
   • Si la descripción es truncada, se muestra un enlace para que el usuario pueda expandir y ver el texto completo (Leer más).
   • Al hacer clic en “Leer más”, la descripción completa se despliega, reemplazando el texto reducido. También se muestra el enlace para “Leer menos”, que contrae el texto nuevamente cuando se hace clic.
6. Interacción con los enlaces
   Los eventos .click() están configurados para los enlaces “Leer más” y “Leer menos”, los cuales alternan la visibilidad del contenido truncado y completo cuando el usuario interactúa con ellos.

Mejoras posibles:

• Podrías agregar un efecto de desvanecimiento cuando el contenido se expande o contrae, para que la transición sea más suave. Esto se puede hacer modificando la función toggle() por algo como fadeToggle() para un efecto de desvanecimiento.

En resumen, el código limita la longitud visible de la descripción corta del producto, proporcionando una experiencia de usuario más limpia y permitiendo expandir o contraer el contenido según sea necesario.