Product compare
La función de comparación permite a los clientes colocar varios productos uno al lado del otro en una tabla de características. Facilita la elección, especialmente en tiendas con una amplia oferta.
Activar el módulo
Section titled “Activar el módulo”Vaya a WooCommerce > Polski > Storefront Modules y active la opción Product Compare. En los productos aparecerá un botón de comparación.
Tabla de características
Section titled “Tabla de características”Después de añadir productos a la comparación, el cliente ve una tabla con columnas para cada producto. Las filas de la tabla contienen:
- Imagen del producto
- Nombre con enlace
- Precio (incluyendo promociones y la Directiva Omnibus)
- Valoración (estrellas)
- Descripción corta
- Estado de disponibilidad
- Atributos del producto (color, talla, etc.)
- Plazo de entrega (si está configurado)
- Botón Añadir al carrito
Las filas en las que todos los valores son idénticos pueden ocultarse automáticamente - active la opción Hide identical features en la configuración del módulo. Esto centra la atención del cliente en las diferencias entre los productos.
Número máximo de productos
Section titled “Número máximo de productos”De forma predeterminada, el cliente puede comparar hasta 4 productos simultáneamente. Este límite se puede cambiar en la configuración o con un filtro:
add_filter('polski/compare/max_items', function (): int { return 6;});Al alcanzar el límite, el botón Add to compare se desactiva y se muestra un mensaje sobre el límite alcanzado. El cliente debe eliminar primero uno de los productos.
Reemplazo automático
Section titled “Reemplazo automático”Cuando la opción Auto-replace está activa, añadir un producto por encima del límite reemplaza automáticamente el producto más antiguo de la comparación por el nuevo. El cliente recibe una notificación toast sobre el reemplazo.
Actívelo en la configuración: WooCommerce > Polski > Storefront Modules > Compare > Auto-replace.
O de forma programática:
add_filter('polski/compare/auto_replace', '__return_true');Comportamiento AJAX
Section titled “Comportamiento AJAX”La comparación funciona sin recargar la página. Acciones AJAX:
| Acción | Descripción |
|---|---|
polski_compare_add | Añadir un producto |
polski_compare_remove | Eliminar un producto |
polski_compare_get | Obtener la lista de productos |
polski_compare_clear | Vaciar la comparación |
Los datos de la comparación se almacenan en la sesión de WooCommerce (WC()->session), por lo que funciona tanto para invitados como para usuarios registrados.
Shortcode [polski_compare]
Section titled “Shortcode [polski_compare]”El shortcode muestra la tabla de comparación en cualquier lugar de la tienda.
Parámetros
Section titled “Parámetros”| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
columns | string | all | Características a mostrar (separadas por comas) |
hide_similar | string | no | Ocultar filas con valores idénticos |
show_remove | string | yes | Mostrar el botón de eliminación del producto |
Ejemplo de uso
Section titled “Ejemplo de uso”[polski_compare columns="image,name,price,rating,stock" hide_similar="yes"]Uso en una página dedicada
Section titled “Uso en una página dedicada”Cree una página, por ejemplo Comparación de productos, e inserte el shortcode:
[polski_compare]Luego, en la configuración del módulo, indique esta página como Comparison page. El botón View comparison de la ventana emergente redirigirá a esta página.
Botón de comparación
Section titled “Botón de comparación”El botón se muestra en la ficha del producto (página de categoría) y en la página de producto individual. Controle la posición con un filtro:
add_filter('polski/compare/button_position', function (): string { return 'after_add_to_cart';});Posiciones disponibles: before_add_to_cart, after_add_to_cart, after_summary.
Barra flotante
Section titled “Barra flotante”Después de añadir el primer producto a la comparación, aparece una barra en la parte inferior de la pantalla con miniaturas de los productos seleccionados y un botón Compare. La barra es responsiva - en dispositivos móviles muestra el número de productos seleccionados en lugar de las miniaturas.
Comparación dentro de una categoría
Section titled “Comparación dentro de una categoría”De forma predeterminada, el cliente puede comparar productos de diferentes categorías. Si desea restringir la comparación a productos de la misma categoría:
add_filter('polski/compare/same_category_only', '__return_true');Al intentar añadir un producto de una categoría diferente, el cliente verá un mensaje sobre la restricción.
Estilos CSS
Section titled “Estilos CSS”Clases CSS del módulo:
.polski-compare-button- botón de añadir a la comparación.polski-compare-button--active- el producto está en la comparación.polski-compare-table- tabla de comparación.polski-compare-bar- barra inferior.polski-compare-empty- mensaje de comparación vacía
Resolución de problemas
Section titled “Resolución de problemas”La tabla no muestra los atributos - asegúrese de que los atributos del producto están marcados como Visible en la página del producto en el editor de productos (pestaña Atributos).
El botón no responde a los clics - revise la consola del navegador en busca de conflictos de JavaScript. La causa más común es un jQuery duplicado o un conflicto con un plugin de optimización de JS.
Informar de problemas: github.com/wppoland/polski/issues