Comparación de productos en WooCommerce: tablas lado a lado

Quien decide entre tres productos parecidos tropieza con un obstáculo pequeño pero muy real. Hay que retener en la cabeza precios, datos técnicos y niveles de existencias mientras se hace clic de una página a otra, o abrir una pestaña propia para cada candidato y compararlos con esfuerzo a golpe de vista. De un modo u otro, la comparación ocurre fuera de tu tienda, en la memoria de trabajo o en una maraña de pestañas del navegador, y justo ahí es donde las compras meditadas se pierden en silencio. La comparación de productos elimina ese obstáculo poniendo a los candidatos lado a lado en una única tabla, en la página donde el botón de carrito ya está. Esta guía explica qué es la comparación de productos en WooCommerce, por qué importa en las compras meditadas, qué necesita de verdad una buena herramienta de comparación y cómo el plugin gratuito Versus añade exactamente eso.

Qué es la comparación de productos

La comparación de productos es una función con la que la clientela puede reunir varios productos y verlos juntos lado a lado en una única tabla. En lugar de abrir cada producto en su propia pestaña y cotejar precios, propiedades y disponibilidad a ojo, ve todos los candidatos alineados en columnas, con una fila por dato: la imagen, el nombre, el precio, el número de artículo (SKU), la indicación de si el producto está en existencias, una breve descripción y una fila por cada propiedad del producto como color, talla o material.

Este formato logra algo que una página de producto por sí sola no puede. Una página de producto vende bien un único producto, pero responde mal a la pregunta que en realidad hace una clienta que compara. Esa pregunta no es “¿es bueno esto?”, sino “¿cuál de todos es el adecuado para mí?”. Una tabla de comparación orienta la página justo hacia esa pregunta: las filas que importan quedan directamente una junto a otra, los valores se distinguen visiblemente de columna a columna, y la elección se convierte en un vistazo en vez de en un ejercicio de memoria.

Por qué cuenta

La comparación importa sobre todo en las compras meditadas: electrónica, herramientas, electrodomésticos, cualquier cosa con datos técnicos que determinan la decisión más que el gusto por sí solo. En una compra impulsiva nadie compara, ahí el producto va directo al carrito. En una compra meditada siempre se compara, y la única pregunta es dónde. Si tu tienda no ofrece un modo de hacerlo, ocurre en un lugar sobre el que no tienes influencia: repartido en varias pestañas, en una hoja de cálculo, en la página de un competidor que sí tiene una tabla de comparación, o en la cabeza, mientras la atención se dispersa.

Mantener la comparación en tu tienda tiene tres efectos. La decisión permanece en la página, de modo que el botón de carrito queda a un solo clic en cuanto la clienta se ha decidido. Las diferencias se presentan en tu forma de mostrarlas, con las filas que quieres enseñar. Y el esfuerzo de comparar baja lo suficiente para que más personas lleven la comparación hasta el final, en lugar de abandonarla a medio hacer. Nada de esto requiere descuentos ni persuasión, simplemente elimina el trabajo tedioso entre “interesada en varios” y “decidida por uno”.

Qué necesita una buena herramienta de comparación

No todas las herramientas de comparación están hechas igual, y una descuidada puede costar más de lo que aporta. Usa lo siguiente como lista de comprobación, ya sea que lo desarrolles tú, lo compres o lo instales:

• Una tabla clara lado a lado. Imagen, nombre, precio, SKU, disponibilidad y una breve descripción, más una fila por cada propiedad del producto, de modo que las diferencias se reconozcan de un vistazo y nada importante se pierda.
• Resaltado de diferencias. Las filas con valores distintos deberían destacar, idealmente con un conmutador que oculte todo lo que los productos tienen en común, de modo que solo permanezcan en pantalla los factores decisivos.
• Un límite superior razonable de productos. Una tabla que crece sin límite se vuelve ilegible en el smartphone. Un límite superior configurable mantiene las columnas manejables.
• Soporte para invitados y clientes. También las personas visitantes no registradas deberían poder armar una comparación, y esa lista debería seguirlas hasta la cuenta al iniciar sesión, en lugar de desaparecer.
• Sin penalizaciones de rendimiento. La comparación no debería cargar JavaScript voluminoso en cada página de lista de la tienda. JavaScript puro sin dependencia de jQuery, cargado solo donde se necesita, mantiene la tienda rápida.
• Accesibilidad. Los elementos de comparación deberían ser botones de verdad con el estado correcto, manejables por teclado, y los cambios deberían anunciarse a las tecnologías de asistencia, en lugar de ocurrir en silencio.
• Datos que se quedan donde están. Una comparación se compone de datos de producto de tu propio catálogo. Estos no pintan nada en un servidor ajeno.

Fíjate en lo que no está en esta lista: ingenio. Una tabla de comparación no necesita animaciones ni florituras. Debe ser correcta, rápida y legible, y luego apartarse en cuanto la clienta se ha decidido.

Cómo lo implementa Versus

Versus for WooCommerce es un plugin de comparación gratuito y de código abierto (GPLv2), construido en torno a exactamente esas cualidades. Añade un botón de comparación a las listas de tienda y de archivo de tu WooCommerce, así como a la página de producto, y a partir de ahí la clientela arma una tabla de comparación lado a lado, mientras todos los datos de producto permanecen en tu tienda.

La tabla muestra la imagen del producto, el nombre, el precio, el número de artículo (SKU), la disponibilidad y la descripción corta, más una fila por cada propiedad del producto como color, talla o material. Las filas con valores que difieren entre los productos se resaltan, y un único conmutador oculta todo lo que es idéntico, de modo que las diferencias reales destacan. La comparación en sí se abre para clientes registrados en la pestaña “Comparación” bajo Mi cuenta, o bajo una URL de comparación propia para invitados.

Invitados y clientes

Una persona visitante no registrada arma una comparación que se guarda en una cookie propia (first-party) en su propio navegador y se conserva durante seis meses, de modo que puede abandonar la tienda y volver sin perder su selección. Una clienta registrada obtiene una pestaña “Comparación” bajo Mi cuenta. Si un invitado inicia sesión, la lista de invitado se fusiona con la cuenta, de modo que una comparación iniciada antes de iniciar sesión no se descarta en la puerta. La comparación para invitados se puede desactivar por completo, por si quieres ofrecerla solo a titulares de cuenta.

Diseñado para velocidad y accesibilidad

El script de frontend del plugin es JavaScript puro sin dependencia de jQuery, cargado de forma diferida en el pie de página, y el CSS y el JavaScript se incorporan solo en las páginas donde el botón de comparación o la tabla aparecen realmente. Esto significa que la comparación no arrastra una biblioteca de scripts a cada página de la tienda. La tabla de comparación se desplaza horizontalmente dentro de su propio contenedor, de modo que las columnas adicionales nunca desplazan la maquetación de la página ni causan un salto de diseño. Los elementos de comparación son botones de verdad con un estado aria-pressed que se actualiza vía AJAX, hay una región activa cortés que anuncia los cambios de la comparación a los lectores de pantalla, y los botones son plenamente manejables por teclado con foco visible.

Añadir o quitar un producto es una única petición AJAX protegida por nonce a tu propio sitio, sin recarga completa de página. La construcción tiene en cuenta también los casos discretos: protege contra el doble envío, actualiza la tabla automáticamente tras eliminar, se comporta con indulgencia ante un fallo de red y muestra indicadores de reemplazo amables para los datos que faltan.

La configuración

Poner la comparación en marcha lleva solo unos minutos:

1. Instala Versus mediante Plugins → Instalar, o súbelo a /wp-content/plugins/versus. WooCommerce debe estar instalado y activo.
2. Actívalo.
3. Abre el menú Versus en wp-admin para elegir los campos a comparar y la posición del botón.
4. Eso es todo. El botón de comparación aparece ahora en tus páginas de tienda y de producto, y la clientela puede abrir la comparación desde ahí.

La página de ajustes se rige por un permiso de WooCommerce y lleva en cada ajuste una ayuda ”?” incrustada, enlazada mediante aria-describedby, de modo que no tengas que consultar en paralelo la documentación mientras configuras. Desde ahí puedes:

• Activar o desactivar la comparación y definir cuántos productos se pueden comparar a la vez, entre 2 y 6.
• Elegir dónde aparece el botón de comparación, en las listas y en la página de producto, y si los invitados pueden usarlo.
• Elegir qué campos predeterminados aparecen como filas, es decir, precio, SKU, disponibilidad y descripción corta, y si se incluyen las propiedades del producto.
• Conmutar el resaltado de diferencias, fijar la vista de solo diferencias como predeterminada y controlar los elementos de imagen, carrito y quitar en cada encabezado de columna.
• Personalizar los textos de frontend, es decir, el botón de comparación, el botón de quitar, el enlace de comparación, el conmutador de diferencias, el botón de vaciar todo y el mensaje para una lista vacía, o dejarlos en sus valores predeterminados traducidos.

Todos los textos son traducibles mediante el dominio de texto versus, y una plantilla versus.pot reside en /languages. La tabla en sí se puede diseñar mediante propiedades CSS (custom properties), con un ajuste de tamaño fluido, soporte para el modo oscuro y el movimiento reducido, así como un estado vacío amable mientras aún no se ha añadido nada. Al borrar el plugin se eliminan sus opciones y la tabla de comparación se desmonta de forma limpia.

Dónde residen tus datos

Versus no realiza ninguna petición HTTP saliente ni empaqueta ningún SDK, ninguna fuente web, ningún activo de CDN ni ninguna llamada de analítica. Los ID de los productos comparados residen en una tabla propia en tu propia base de datos, los ajustes en una opción de WordPress y la selección de un invitado en aquella cookie propia (first-party) en su propio navegador. Añadir o quitar un producto es una llamada AJAX del mismo origen a tu propio admin-ajax.php. Para una función que toca cada producto del catálogo, el ajuste predeterminado correcto es mantener los datos en el propio sitio en lugar de en un servidor ajeno.

Consejos prácticos para una comparación que convierte

El plugin aporta el mecanismo, unas cuantas decisiones hacen que cumpla su cometido:

• Mantén el límite bajo en productos con muchas propiedades. Seis columnas están bien en el escritorio, pero apretadas en el smartphone. Un límite de tres o cuatro mantiene cada columna lo bastante ancha para leerse.
• Muestra solo las filas que deciden la compra. Cada fila es una cosa más que hay que examinar. El precio, la disponibilidad y las dos o tres propiedades que de verdad distinguen los productos entre sí suelen aportar más que cualquier propiedad jamás definida.
• Apuesta por el resaltado de diferencias. El ajuste predeterminado de “solo diferencias” hace que la clienta aterrice directamente en lo que cambia entre los productos, no en las filas que son idénticas en todos. Con productos muy próximos entre sí, ese es el ajuste más útil de todos.
• Ordena primero tus propiedades. Una tabla de comparación es solo tan buena como los datos de producto que hay detrás. Nombres de propiedad inconsistentes o valores que faltan se muestran de inmediato como huecos, así que merece la pena ordenar las propiedades antes de activar la comparación.
• Indícaselo a la clientela. Una breve línea en las páginas de categoría, como “Compara estos lado a lado”, convierte el botón de comparación en un siguiente paso evidente en lugar de en un elemento que nadie advierte.

Versus frente a WooCommerce estándar

WooCommerce no dispone de una comparación de productos integrada. Aquí la diferencia específica para la comparación:

Función	WooCommerce estándar	Versus
Tabla de comparación lado a lado	No integrada	Imagen, precio, SKU, disponibilidad, descripción corta, propiedades
Resaltado de diferencias	No existe	Sí, con conmutador de solo diferencias y ajuste predeterminado opcional
Ubicaciones del botón de comparación	No existe	Listas de tienda y de archivo, así como página de producto, cada una conmutable por separado
Listas de comparación para invitados	No existe	Sí, cookie propia (first-party) durante seis meses, fusionada al iniciar sesión
Lista de comparación para clientes	No existe	Pestaña de comparación bajo Mi cuenta
Límite de productos	No existe	Configurable de 2 a 6
Filas y etiquetas configurables	No existe	Campos seleccionables, cada texto de frontend personalizable
Dependencia de frontend	jQuery en muchos temas	JavaScript puro, sin jQuery, diferido, cargado solo donde se necesita
Accesibilidad	no aplica	Botones de verdad, aria-pressed, región activa, manejable por teclado
Llamadas externas	no aplica	Ninguna, los datos permanecen en tu propia base de datos
Coste	Gratis (inexistente en el núcleo)	Gratis; PRO añade shortcode, barra fija, exportación, comparación por categorías

Gratis frente a PRO

La edición gratuita es una función de comparación completa, no un cebo: botón de comparación, tabla lado a lado, resaltado de diferencias, listas de invitados y de clientes, el límite de 2 a 6, campos configurables y etiquetas personalizables están todos incluidos. Versus Pro es una extensión para tiendas que desean más control sobre cómo y dónde aparece la comparación. Requiere que el plugin gratuito Versus esté instalado y activo, y se distribuye a través de Freemius en lugar del directorio de WordPress.org.

PRO añade un shortcode de página [versus_compare], que renderiza la comparación actual de la clienta como una tabla completa con filas ampliadas, incluidos peso y dimensiones junto a precio, SKU, existencias, descripción y propiedades, alimentado directamente por los botones de comparación del plugin gratuito. Añade filas de comparación configurables bajo Productos → Versus Pro, una barra de comparación fija que flota en el borde inferior de las páginas de tienda, categoría y producto y enlaza directamente con la comparación, la exportación de la tabla a CSV, PDF e impresión, así como una comparación restringida a categorías, que limita una comparación a productos de la misma categoría de producto de WooCommerce, de modo que la clientela solo ponga lado a lado cosas comparables. Estas funciones están disponibles exclusivamente en PRO y se construyen sobre el fundamento gratuito.

La versión corta

La comparación de productos convierte una tarea tediosa repartida por muchas pestañas y hecha a mano en una única tabla lado a lado en tu tienda, y así evita que las compras meditadas se vayan a un lugar sobre el que no tienes influencia. Una buena herramienta de comparación necesita una tabla clara, el resaltado de diferencias, un límite superior razonable, soporte para invitados y clientes, accesibilidad y ninguna penalización de rendimiento, con los datos permaneciendo en el propio sitio. El plugin gratuito Versus entrega todo eso: un botón y una tabla de comparación en JavaScript puro que se carga solo donde se necesita, que resalta lo que difiere, que funciona por igual para invitados y clientes y que conserva cada ID de producto en tu propia base de datos. PRO añade un shortcode para la página de comparación, una barra fija, la exportación y una comparación por categorías, si quieres ir aún más lejos.