Mostrar bien las páginas de productos es el sueño del emprendedor.
Una buena UX significa una probabilidad mucho mayor de que el cliente interesado agregue al carrito y complete el pago.
Sin embargo, los productos variables de WooCommerce vienen con molestos menús desplegables para cada atributo (color, tamaño, estilo, etc., según las opciones que haya configurado). Y como ya tiene una pista de mi opinión personal, los menús desplegables son asesinos de UX.
Hoy, echamos un vistazo a complementos útiles que puede usar para mostrar opciones de productos (variaciones) de una manera fácil de usar. Los he usado en muchos sitios web y son bastante confiables. Como de costumbre, ¡es solo el clic de un botón!
1. Complemento YITH WooCommerce Color and Label Variations (GRATIS Y PREMIUM)
El complemento YITH viene en una versión gratuita (disponible en el repositorio de WP) y una versión premium.
Mientras que la versión gratuita le permite crear atributos de tipo de color, tipo de etiqueta y tipo de imagen, la versión premium le brinda funciones adicionales. Estos son los mejores en mi opinión:
- Puede mostrar una descripción de cada atributo en la página de un solo producto
- Puede mostrar una información sobre herramientas para cada atributo
- Puede personalizar el color y la animación de entrada de la información sobre herramientas
- Puede cambiar la imagen del producto dinámicamente al pasar el mouse sobre el atributo
- Puede mostrar todos los atributos en la pestaña «Información adicional»
Aquí hay algunas capturas de pantalla (haga clic en cualquier imagen para abrir lightbox):
2. Complemento de muestras de atributos de WooCommerce (PREMIUM)
IconicWP tiene un buen complemento que reemplaza los menús desplegables de variación con muestras de imagen, color y texto. Conozco bien a James Kemp (desarrollador de IconicWP), y puede estar seguro de que invertiría en un complemento liviano y correctamente codificado que genera una visualización suave y hermosa.
También va a editar los filtros de productos de WooCommerce, aplicando el mismo diseño que ha decidido agregar a sus muestras de productos variables.
Además de eso, también agrega bonitas muestras en la página de la tienda/categoría, para que los clientes ya puedan cambiar su elección desde allí.
3. Muestras de variación para el complemento WooCommerce (GRATIS)
Este complemento gratuito se puede descargar desde el repositorio de WordPress y tiene más de 80,000 instalaciones activas. Sin embargo, no se ha actualizado desde junio de 2020 y el soporte parece no responder . Para mí, eso es una gran bandera roja.
a) Editar atributos existentes, por ejemplo, «Color»
Una vez que el complemento esté instalado, vaya a Panel de WordPress> Productos> Atributos y abra uno de los atributos existentes, por ejemplo, «Color» si ya lo tiene.
La página de edición de atributos ahora tendrá un nuevo campo de selección llamado «Tipo». Ahora puede elegir «Color» en el menú desplegable para indicar que desea que este atributo se muestre como un selector de color.
b) Editar términos de atributos existentes
Ahora que el atributo se ha asignado a una muestra de variación (color), es hora de asignar el color correcto a cada término de atributo.
Si tiene rojo, azul y amarillo, abrirá cada término y elegirá un color para cada uno (#ff0000, #0000ff y #ffff00 respectivamente).
c) Echa un vistazo a la página de un solo producto
¡Eso es realmente! Una vez que guarde los colores, la página de un solo producto mostrará automáticamente los colores como muestras.
