En este artículo te explico cómo diseñamos una single page producto personalizada para un e‑commerce en WooCommerce. Verás qué cambios hicimos y cómo otorgamos al cliente independencia total para gestionar productos relacionados y galerías multimedia desde el backend.
¿Qué es una single page producto personalizada?
Es una página individual para cada producto que va más allá del diseño básico: incluye secciones inteligentes como productos relacionados automáticos y galerías de fotos y vídeos que el cliente puede actualizar sin depender de desarrolladores.
Beneficios de esta implementación
- Gestión autónoma desde el backend WooCommerce, sin necesidad de tocar código.
- Mejora del ticket medio mediante la recomendación dinámica de productos relacionados.
- Mayor confianza visual gracias a fotos y vídeos autogenerados por el equipo de contenidos o influencers.
Cambios realizados: antes y después
🧱 Antes
- Página simple: título, precio, variable personalizable, descripción, información adicional y productos relacionados estáticos.
🔄 Después (versión nueva)
- Diseño final inspirado en Figma clonado al desarrollo.
- Botones más compactos y sección “También te podría interesar” con scroll dinámico según la categoría del producto.
- Galería multimedia configurable: vídeos e imágenes que pueden reorganizarse libremente.
Cómo funciona desde el backend y la gestión de estos productos.
- Se añadieron dos nuevos campos en WooCommerce: uno para productos relacionados dinámicos y otro para la galería.
- Al conectar otro producto, se inserta automáticamente como relación; al desconectarlo, desaparece del frontend.
- La galería se puede gestionar: subir vídeos o imágenes y reordenarlos a gusto del cliente.
Ejemplo práctico real
Si tienes un producto estrella (por ejemplo, un bolso), puedes relacionarlo con accesorios como gorras o camisetas desde el backend. Al cambiar cualquier producto relacionado (como una gorra), se actualiza automáticamente en todas las páginas donde esté vinculado. También puedes subir vídeos de una influencer usando el producto, dando confianza a los compradores.
Conclusión
La creación de una single page producto personalizada con funciones como productos relacionados y galería multimedia gestionables por el cliente permite mejorar la UX, aumentar el ticket medio y reducir costos en gestión técnica. Todo esto se logró gracias a un diseño inicial en Figma y una implementación técnica que respeta branding y facilita la autonomía del equipo.
