Hoy traigo un snippet de código que he creado mientras trabajaba en la web de un cliente para solucionar un problema muy común en tiendas online. Quería mostrar las descripciones cortas de los productos directamente en la página de tienda y categorías, pero me encontré con que las diferentes longitudes de texto hacían que el diseño se viera desordenado y poco atractivo.
Este código está pensado para mostrar las descripciones de forma atractiva y estructurada. Permite que los usuarios vean la información adicional al hacer clic en un enlace, mostrando el contenido en una cajita emergente sin que los textos largos descuadren el diseño de las tarjetas de producto. Si tienes el mismo reto en tu tienda WooCommerce, este snippet es una solución sencilla y efectiva.
¿Cuál es el problema?
Cuando tienes una tienda online con muchos productos, seguramente habrás notado que las descripciones cortas pueden descuadrar el diseño de tu página de tienda o categoría.
Algunas descripciones son más largas que otras, lo que puede generar inconsistencias en la altura de las tarjetas de producto.
Esto no solo afecta la estética de la tienda, sino también la experiencia del usuario.
El snippet que comparto hoy soluciona este problema permitiendo que las descripciones cortas aparezcan en una cajita emergente al hacer clic en un enlace llamado “Más Info”. Así, los usuarios pueden ver la información adicional sin que el diseño general se vea afectado y cuando hayan terminado pueden volver a cerrar la «cajita».
¿Cómo funciona el código?
Este código utiliza una combinación de PHP, JavaScript y CSS para lograr el efecto deseado:
- PHP: Agrega el enlace “Más Info” y la descripción corta al HTML de cada producto en la página de tienda.
- JavaScript: Implementa la funcionalidad para mostrar y ocultar la descripción corta cuando el usuario hace clic en el enlace o en el botón de cierre.
- CSS: Diseña la cajita emergente y asegura que se integre perfectamente con el estilo de tu tienda.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.
🔐 Este contenido es solo para suscriptores premium.
Estos códigos de la zona premium se mantienen regularmente. Si usas un código y no te funciona correctamente, puedes abrir un ticket de soporte explicando los detalles y lo vemos.
Deja tus opiniones o dudas en los comentarios.