Cómo usar las tablas comparativas

Las tablas comparativas de Wasabi Theme se generan de forma automática según el contenido de los productos que se hayan insertado en el post.

Para usarlas solo tienes que hacer 2 cosas:

  1. Añadir productos al post usando el bloque de productos de Wasabi.
  2. Añadir el bloque de tabla comparativa y configurar los estilos a tu gusto, así como los CTA, las insignias, etc.

Si quieres definir una configuración para todos los bloques de tablas comparativas nuevos y así evitarte tener que configurar cada una en todos los posts, lee el siguiente punto.

Configuración global de tablas comparativas

Se puede establecer la configuración por defecto de la mayoría de bloques de Wasabi Theme en el “menú de Wasabi” ➡ Todos los ajustes ➡ Ajustes por defecto de Gutenberg.

En este caso en particular, llegados a ese punto, entraríamos en “Comparativa de productos”

Cómo hacer que los pros y los contras de la tabla comparativa sean una versión reducida de los de los productos

Para que el contenido de pros y de contras no redunde entre la tabla comparativa y los bloques de producto, se debe configurar un delimitador. Escribiríamos la frase en el bloque de producto usando un delimitador y, lo que se encuentra la izquierda del delimitador aparecerá en la tabla de comparativa y, la frase entera, en la ficha de producto.

Ejemplo: si en un “Pro” de un producto escribo “Buen precio: El precio destaca sobre la media del mercado”, en la tabla aparecería “Buen precio” y en el producto aparecería toda la frase.
¿Cómo se hace?
  1. Haz clic en el bloque de tabla comparativa para abrir las opciones del bloque
  2. Configura el delimitador
  3. Escribe el pro o contra usando dicho delimitador.

¿Es posible incorporar estrellas y número de opiniones?

La API de Amazon no devuelve datos relativos a reviews (opiniones y estrellas). Algunos plugins (como AAWP) lo que hacen para obtener esos datos es escrapear Amazon. El uso de bots o web scrapers para obtener datos de Amazon está prohibido en sus políticas legales y podría significar desde baneo de API hasta demanda legal: Condiciones de Uso de Amazon

Wasabi funciona 100% con la API, no hace web scraping para minimizar el riesgo legal al que se exponen sus clientes.

¿Se pueden añadir celdas con más características manualmente?

Las tablas comparativas de Wasabi Theme están pensadas para que se actualicen automáticamente con los productos, no permiten personalización de contenido para facilitar el mantenimiento y reducir el tiempo de publicación (ya que no tendrías que actualizar producto y tabla, solo haría falta actualizar el producto). Es por esto que el contenido que muestran es el contenido que se resume de los propios productos.

Estamos trabajando en una funcionalidad que permitirá añadir manualmente características a cada producto para que estas se muestren en la tabla comparativa. Por el momento, lo que están haciendo algunos clientes para publicar rápidamente y sin desperdiciar recursos consiste en crear ágilmente los posts usando las tablas comparativas automáticas de Wasabi para luego, si algún post destaca en visitas, añadir tablas personalizadas de AAWP para intentar mejorar la conversión (Wasabi y AAWP son totalmente compatibles).

Cómo añadir más de una tabla comparativa en una entrada

Como hemos comentado en el punto anterior, el bloque de tabla comparativa está pensado para ser lo más automático y desatendido posible y, para ello, se nutre de los datos de los propios productos de una entrada sin requerir acción por parte del usuario.

Esto nos imposibilita crear dos tablas comparativas, ya que ambas mostrarían los mismos productos. Una solución a este problema sería la siguiente:

  1. Añadir en la entrada todos los bloques de producto que necesitemos (de la primera y la segunda tabla comparativa).
  2. Añadir las dos tablas comparativas en la posición que queramos dentro del post. No te alarmes si en ambas aparecen los mismos productos, lo solucionaremos en el punto 3. Se recomienda usar la tabla comparativa 1 porque simplifica el proceso.
  3. Añadimos un bloque Gutenberg llamado HTML personalizado y, dentro de dicho bloque, añadimos el código CSS necesario para esconder los productos concretos de cada tabla comparativa. Ejemplo:
<style>
.comparison-style-1:nth-of-type(1) tbody tr:nth-child(1) {
	display: none!important;
}

.comparison-style-1:nth-of-type(1) tbody tr:nth-child(2) {
	display: none!important;
}

.comparison-style-1:nth-of-type(2) tbody tr:nth-child(3) {
	display: none!important;
}

.comparison-style-1:nth-of-type(2) tbody tr:nth-child(4) {
	display: none!important;
}
</style>

¿Qué hace el código anterior?

  • .comparison-style-1:nth-of-type(1) ➜ Selecciona la primera tabla comparativa. Aquí tendrás que cambiar el (1) por la tabla que quieras modificar. Si es la segunda, pondrías (2)
  • tbody tr:nth-child(1) ➜ Selecciona la primera fila de la tabla. Si quisieramos seleccionar la tercera, cambiaríamos (1) por (3)
  • display: none!important; ➜ Esconde el contenido seleccionado.

Agrupándolo todo, podríamos decir que el siguiente código lo que hace es “esconder la primera fila de la primera tabla comparativa con estilo 1”.

.comparison-style-1:nth-of-type(1) tbody tr:nth-child(1) {
	display: none!important;
}

Resultado: dos tablas con diferentes productos en una misma entrada:

Y así se vería el editor:

Cómo transformar los títulos de las tablas comparativas en mayúsculas

1. Instala un child theme

Lo necesitas porque vamos a editar el fichero functions.php. Con esto, prevenimos la pérdida de las modificaciones cuando se actualice Wasabi a una nueva versión.

Puedes hacerlo siguiente este tutorial: https://wasabitheme.com/documentacion/art/que-es-un-child-theme-y-como-se-usa-con-wasabi/

2. Añade estas líneas en el fichero functions.php del child theme:

add_filter( 'wasabi_comparison_title', function ( $title ) {
    return strtoupper( $title );
} );

Cómo cambiar colores de las tablas comparativas

Para cambiar los colores de los CTA la tabla comparativa se debe añadir este código CSS (cambiando el valor de los colores) en el apartado de CSS personalizado en la configuración de apariencia:

/* Cambia color del CTA del primer producto */
.comparison-style-2 .item-1.cta.highlight .button {
    background: #F39C12!important;
}

/* Cambia color del CTA del segundo producto */
.comparison-style-2 .item-1.cta.highlight .button {
    background: #F39C12!important;
}

/* Cambia color del CTA del tercer producto */
.comparison-style-2 .item-2.cta.highlight .button {
    background: #F39C12!important;
}

También puedes cambiar el color de las insignias destacadas en los ajustes del producto, en la sección “ajustes de tabla comparativa” o haciendo click en el link “¿Destacar?” que aparece encima del nombre de producto en el editor de la tabla comparativa:



Otro tipo de contenido en el blog de Wasabi