Mostrar las variaciones como colores o imágenes en WooCommerce

La experiencia de usuario es un factor clave en las ventas de comercio electrónico, mostrar todas las opciones que un producto tiene de una manera sencilla y fácil de entender, aumentará significativamente la tasa de conversión y por ende el total de ventas. En este post te enseñaré cómo mostrar las variaciones como colores o imágenes en WooCommerce, paso a paso.

¿Por qué debo mejorar la experiencia de usuario para aumentar las venta de una tienda virtual?

Mejorar la experiencia de usuario es fundamental para aumentar las ventas de una tienda virtual por varias razones:

Aumenta la confianza del usuario: Si los visitantes tienen una buena experiencia en la página de detalle del producto, es más probable que confíen en la tienda y se sientan más seguros al realizar una compra.

Incrementa la conversión: Cuando los visitantes tienen una experiencia positiva en la página de detalle del producto, es más probable que realicen una compra y, por lo tanto, se aumenta la conversión.

Fideliza a los clientes: Si los visitantes tienen una experiencia positiva en la página de detalle del producto, es más probable que vuelvan a la tienda en el futuro y se conviertan en clientes fieles.

Genera recomendaciones: Si los visitantes tienen una experiencia positiva en la página de detalle del producto, es más probable que recomienden la tienda a sus amigos y familiares, lo que aumenta la visibilidad y el alcance de la tienda.

Mejora el posicionamiento en los motores de búsqueda: Los motores de búsqueda como Google tienen en cuenta la experiencia de usuario al determinar el posicionamiento en las páginas de resultados. Si la experiencia de usuario es buena, es más probable que la tienda tenga un mejor posicionamiento en los resultados de búsqueda, lo que aumenta la visibilidad y el tráfico a la tienda.

Agregar colores, imágenes o botones a los productos variables de Woocommerce

¿Qué es un producto variable en Woocommerce?

Un producto variable es un tipo de producto que tiene diferentes opciones o variaciones que los clientes pueden seleccionar antes de agregar el producto al carrito de compras. Por ejemplo, si una tienda en línea vende camisetas, un producto variable podría ser una camiseta que está disponible en diferentes tallas, colores o estilos.

Cada variación del producto variable tiene su propio precio, SKU, imagen y descripción, lo que permite a los clientes elegir la opción que mejor se adapte a sus necesidades. Los productos variables en WooCommerce son muy útiles para tiendas que venden productos con muchas opciones, como ropa, zapatos, joyas, etc.

Si tienes una tienda virtual que cuenta con productos variables, cambiar los selects por defecto de Woocommerce será de gran ayuda para el usuario, ya que podrá identificar claramente los tipos de variaciones que vendes como tallas, colores, texturas, etc. Pasando de esto:

Producto variable por defecto de woocommerce
A esto, como ves es una gran mejora ya que se muestran las tallas como botones y los colores con las imágenes reales de los colores de los productos. Lo mejor es que puedes hacer esto con cualquier atributo de los productos variables que tengas en tu tienda.

Producto variable de woocomerce mejorado con tallas y colores
Para realizar esta mejora, sigue estos pasos:

Paso 1: Instala el plugin YaySwatches

Dirígete al menú Plugins y haz clic en la opción Añadir Nuevo. En el buscador de plugins busca yayswatches, instala y activa el plugin.

instalar el plugin yayswatches


Puedes encontrar el plugin en el repositorio de WordPress haciendo clic en este enlace.

Una vez activado el plugin, tendrás un nuevo menú que te permitirá configurar cómo quieres mostrar los productos variables en tu sitio web, este se encuentra en el menú Woocommerce > YaySwatches.

Menú de configuración de yayswatches


Haz clic en el nuevo menú para comenzar a configurar el plugin.

Paso 2: Configura la visualización de las muestras

Lo primero que verás serán todos los atributos que tienes creados para tus productos variables, en mi caso tengo Colores y Tallas.

configuracion de atributos de woocommerce como colores y botones


En la opción Choose types, selecciona cómo quieres mostrar cada atributo, por ejemplo para los colores, puedes seleccionar la opción Color or Custom Image swatch, cuando seleccionas esta opción, podrás elegir un color personalizado para cada atributo de color que tengas creado en tu tienda.

Este es el resultado de mi configuración:

colores como atributos personalizados configurados en Woocommerce


Ahora si guardas y revisas tus productos variables que contienen ese atributo que recién configuraste, este sería el resultado:

colores cambiados en la vista de producto como círculos de colores


Con esta opción también puedes agregar una imágen a cada color, esto es muy útil si cuentas con colores muy personalizados o que tienen una textura especial.

Si eliges la opción Automated Variant Image Swatch podrás mostrar la imágen seleccionada como imagen destacada de la variación en vez de un color, que a mi parecer es una gran opción.

Si guardas y vas a ver el producto, este será el resultado:

imagen destacada de producto variable como muestra


Como ves, es una gran mejora en la visualización de las muestras y de los productos variables.

Ahora configuraremos las tallas como botones

Dirígete otra vez a la configuración del plugin y esta vez selecciona otro atributo, en mi caso seleccionaré las tallas y como configuración seleccionaré Button o botón.

configuración de las tallas como botones


Ahora guarda la configuración y mira como se ve el producto.

tallas como botones en la página de producto


Paso 3: Configuración de tamaño y forma de las muestras

Una vez configuraste los atributos del producto, podrás configurar también cómo se muestran en pantalla, qué tamaño tienen, qué forma tienen y cuanto espacio ocupan, esto te dará gran control en tu diseño.

Dirígete a la sección Swatches customizer y cambia la configuración a tu gusto, puedes elegir una forma circular o cuadrada, el tamaño de las muestras y su borde.

Lo mejor de todo es que cuentas con una previsualización en vivo a la derecha que te dirá en tiempo real cómo se verá la muestra o el atributo.

configuracion de visualizacion de muestra de color
Más abajo encontrarás la sección Button Customizer que te permitirá configurar los botones, su tamaño, color, etc. Al igual que con la opción anterior, tendrás una previsualización en tiempo real.

configuracion de visualizacion de los botones


Seguido encontrarás la configuración del comportamiento de las muestras cuando el producto esté agotado, puedes elegir entre esconder las muestras o mostrarlas como agotadas, con una opacidad.

configuración de muestras para variación agotada


Beneficios de tener la versión PRO del plugin

Este plugin también cuenta con una versión PRO la cual te permitirá elegir entre más opciones de configuración de las muestras y lo más importante, mostrar las variaciones como muestras en la página de producto o categoría.

De esta manera el cliente sabrá a primera vista que estos productos cuentan con diferentes variaciones como colores y que pueden dar clic y ver las variaciones inmediatamente, todo desde la página de producto, lo cual es impresionante.

visualización de muestras de productos variables en la página de producto
Si entras de nuevo a la configuración del plugin, tendrás un apartado para configurar la visualización de los atributos en la página de categoría o de tienda, tendrás muchas de las configuraciones de la página de producto disponibles como tamaño de las muestras y comportamiento de muestra fuera de stock.

Lo mejor es que también podrás configurar qué atributos se mostrarán en la página de categoría, en este caso seleccioné los colores.

configuración de muestras de productos variables en la página de tienda o categoría del producto


Haz clic en el siguiente botón para descargar la versión PRO de YaySwatches

Descargar YaySwatches PRO

Fuente: este post proviene de Tutopress, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Con la masificación de internet y su vasto uso en dispositivos móviles, comenzamos a usar diferentes herramientas para comunicarnos, incluyendo redes sociales, aplicaciones de mensajería, buscadores, ...

Etiquetas: BlogEcommerce

Recomendamos

Relacionado

Sin categoría

¿Te ha gustado el artículo? Woocommerce, la mejor opción para montar una tienda online En el dinámico mundo del comercio electrónico, una herramienta ha surgido como un elemento transformador para negocios de todos los tamaños: WooCommerce. Esta plataforma, conocida por su versatilidad y facilidad de integración con WordPress, ha revolucionado la forma en que las empresas abordan la venta onlin ...

blog ecommerce

Como ya hemos hablado en muchos blogs anteriores, Woocommerce es una de las soluciones de comercio electrónico más populares del mundo, y para una gran experiencia de compra es necesario contar con la pasarela de pago que brinde gran facilidad a la hora de terminar una compra, hoy hablaremos de cómo instalar una pasarela de pago en Woocommerce con un par de clics. ¿Qué define una buena pasarela ...

WordPress: Nivel B1

El 26 de mayo voy a estar dando un taller sobre ecommerce en el campus de Google de Madrid y aprovechando la ocasión he querido escribir una serie de artículos relacionados con el plugin Woocommerce. Se trata de un plugin gratuito que se encuentra en el repositorio de WordPress y con el que puedes montar una tienda virtual al nivel de Zara, Amazon… El plugin por si solo únicamente sirve para ...

WordPress: Nivel B1

En el artículo anterior aprendiste como instalar Woocommerce y te lleve de la mano a través de su asistente de instalación, teniendo de esa forma ya configurada la parte básica. Sin embargo, hay un configuración más avanzada que aunque al principio no necesitas es recomendable tener. Por lo que hoy vamos a ver esta configuración y de esa forma dejar ya gran parte de la tienda funcionando al 100%, ...

Consejos Tienda online creada con Prestashop Tiendas Online

Diseño web Madrid Hacer una tienda online con Prestashop o con Woocommerce Asesoramiento Digital Como es habitual, recibo llamadas a diario solicitando asesoramiento digital de nuevos emprendedores que quieren vender su producto online, es decir, hacer una tienda online con Prestashop o con Woocommerce. Muchos de ellos saben perfectamente lo que quieren y saben en qué y cómo lo quieren. El diseño ...

Ecommerce home Wordpress ...

WordPress es el sistema de gestión de contenidos (CMS) más utilizado del momento por los dueños de tiendas online porque es una herramienta que presenta una serie de beneficios muy importante para estos negocios. Son varias las ventajas que presenta Wordpress, como por ejemplo la sencillez de su uso, que no requiere de grandes conocimientos ni habilidad para ordenar el sitio y el catálogo de produ ...

Comercio Electronico

Para aumentar las ventas de tu tienda en línea el proceso de compra debe ser fácil y rápido, por ello debes tener una pasarela de pago eficiente. Si cuentas con un sistema de formas de pago que sea fácil de usar, le brindarás una mejor experiencia de compra al usuario y seguramente se volverá un cliente frecuente. Por ello hice una selección de las pasarelas que cumplen con estas características: ...

seo adsensei b30 como configurar los anuncios de mi pagina web ...

Como mostrar Anuncios en mi Página Web GUÍA COMPLETA PARA SABER COMO MOSTRAR ANUNCIOS EN MI PÁGINA WEB PASO A PASO Bienvenidos Lectores!!!. Esto es algo que estuvieron pidiendo muchas personas. Recibí muchos mensajes para que haga una Guía y que aprendan Como Mostrar Anuncios en sus Páginas Web o Blog. Así que te invito a que te sumerjas en este articulo porque te detallaré a continuación la maner ...

Marketing wordpress

Crear una web de comercio electrónico sin duda alguna es alentador, pero en medio de ese paso importante como lo es ganar presencia digital, es clave tomar cada paso con conciencia para que salga de la mejor forma posible, porque WordPress es sencillo pero el funcionamiento se puede ver opacado cuando actúas sin un plan. Todo comercio electrónico desde su implementación en línea debe seguir una es ...

Aunque uno de los servicios de marketing digital más demandados ultimamente es el diseño web voy a explicarte como montar una tienda online paso a paso sin necesidad de tener conocimientos de programación o contratar una agencia de diseño web. Con una tienda online podemos vender cualquier producto físico pero también productos digitales, es decir, aplicaciones, archivos, etc, que se podrán descar ...