blog webempresa

Variaciones de productos en WooCommerce: buenas prácticas

por | May 29, 2023 | Tutoriales sobre WooCommerce

Muchas tiendas online en WooCommerce venden productos que no tiene ninguna complicación: el producto es tal cual es, completamente cerrado, y cuando un comprador lo ve, si le gusta, lo añade al carrito y, cuando ha terminado su visita, lo compra. Sin embargo, también otras muchas tiendas online amplían su oferta permitiendo cambios o variaciones de los productos en WooCommerce; es decir, sobre el mismo producto, que en esencia no cambia, los usuarios pueden elegir varias posibilidades, sobre su formato o sus características. Solo entonces pueden añadir el producto al carrito de la compra.

Estas opciones de selección pueden ser, por ejemplo, elegir dentro un rango predeterminado de colores o entre varias posibilidades de tamaño, forma o disposición, en función de las características del producto.

El producto, como tal, no varía: sigue siendo el mismo. Lo único que cambia son esas variaciones del producto, que hacen que se adapte más y mejor a los intereses o necesidades del usuario.

Al instalar WooCommerce incluye en su instalación todo lo necesario para crear y configurar las variaciones de productos, así como cambiar el orden de las variaciones de producto en WooCommerce de una forma fácil e intuitiva. Sin embargo, no basta con tener variaciones de productos para que los usuarios se decidan a comprarlos.

Puntos como elegir una buena plantilla para WooCommerce pude ayudar a tomar la decisión de compra pero no es todo

Además, también tenemos que hacer que esas variaciones sean fáciles de ver, navegar, elegir y comprar. Para ello, en este artículo veremos una serie de recomendaciones, o buenas prácticas, nos va a permitir sacar el máximo potencial a estas variaciones de productos y aumentar nuestras ventas online.

¿Qué son las variaciones de productos en WooCommerce?

 

Los productos variables son un tipo de producto en WooCommerce que permite hacer variaciones en algunas de las características o atributos en WooCommerce de un producto, con control de precios, inventario, imagen, etc., para cada tipo de variación.

El ejemplo clásico con el que mejor se comprende es para un producto como un pantalón o cualquier prenda de ropa, donde se puede ofrecer varias tallas, diferentes colores o incluso distintos tipos de tejidos.

Aunque el producto se trate del mismo (un pantalón de determinada marca y modelo), cada atributo o combinación de estos resultan en una variación del producto principal, por lo que deben ser tratados y gestionados, en general, como si fuera productos separados (por ejemplo, para inventario).

Con respecto al producto simple de WooCommerce, los productos variables tienen las dos siguientes propiedades:

    • Disponen de una administración separada para cada combinación de los atributos (esto es, cada variación de producto). Aunque se pueden asignar atributos a los productos simples, no se pueden administrar. Por ejemplo, para tener distintos precios o un inventario para cada tipo de atributo.
    • El usuario debe elegir la variación que le interesa antes de poder añadir el producto al carrito de la compra, salvo que haya valores por defecto. Es decir, un producto variable solo se define por completo cuando cada atributo tiene un valor.

    Por ejemplo, una tienda online que venda pantalones puede tener el producto “Vaqueros SLIM FIT”, con los siguientes atributos:

    • Tallas: S, M, L, XL, XL.
    • Colores: Azul, Burdeos, Gris, Negro.

    Las variaciones de este producto (esto es, “Vaqueros SLIM FIT”) serían todas las posibles combinaciones de estos atributos; es decir: “Vaqueros SLIM FIT, talla S, color Azul”, “Vaqueros SLIM FIT, talla S, color Burdeos”, “Vaqueros SLIM FIT, talla S, color Gris”, y así sucesivamente.

    Dado que hay 4 tallas y 4 colores, el producto “Vaqueros SLIM FIT” podrá tener hasta 16 variaciones (4 tallas multiplicado por 4 colores), cada uno de ellas con su propio inventario, ventas, rebajas, etc.

Producto con variaciones

¿Cómo crear y configurar variaciones de productos en WooCommerce?

 

Vamos a ver ahora cómo se pueden crear y configurar las variaciones de productos en WooCommerce, sin necesidad de utilizar ningún plugin, gracias a los atributos de producto que dispone esta plataforma de comercio electrónico.

Antes de nada, es importante diferenciar que podemos tener dos tipos de atributos a la hora de definir las variaciones de un producto:

    • Atributos globales, que se pueden aplicar a todos los productos de la tienda online en WooCommerce, aunque la administración debe hacerse después para cada producto que tenga variaciones con estos atributos.
    • Atributos personalizados, que solo se aplican a un determinado producto y, como tales, se editan y administran solo en la página de ese producto.

Podemos utilizar uno u otro indistintamente; el resultado final es el mismo. Sin embargo, en beneficio de una rápida administración y gestión del catálogo de productos, en el momento que más de un producto tengan los mismos atributos, deberíamos optar por los atributos globales.

En líneas generales, el proceso de crear variaciones de productos tiene los siguientes pasos:

  1. Crear un producto y configurarlo como de tipo “Producto variable”.
  2. Definir los atributos de la variación, que pueden ser globales o personalizados.
  3. Crear las variaciones del producto, combinando los distintos atributos.
  4. Configurar cada variación, en cuanto a precio, inventario, imagen, etc.

En el último paso, hay que tener en cuenta que el proceso puede ser bastante largo, en función del número de atributos y el número de valores. En general, el número máximo de variaciones de un producto será igual a la multiplicación del número de valores de todos sus atributos.

En el siguiente vamos a ver cómo realizar todo este proceso, paso a paso y con recomendaciones o aspectos que debemos tener en cuenta cuando estemos configurando tanto las variaciones como los atributos:

Buenas prácticas para las variaciones de WooCommerce

 

Hemos visto que la creación y administración de las variaciones es sumamente sencilla en WooCommerce, aunque puede ser un proceso un poco tedioso si los productos pueden tener varios atributos con bastantes valores cada uno.

Sin embargo, aunque las variaciones son un elemento de atracción para que los usuarios se conviertan en clientes, si no se integran correctamente, tanto en la página del producto como en su visualización en la página web, puede confundir al usuario y este decidir abandonar la tienda.

Para evitarlo, a continuación vamos a ver una relación de buenas prácticas que, al propietario de la tienda online, le facilitará la gestión del catálogo y las variaciones de productos, y de cara al usuario, les ayudará a decidirse por comprar la variación de producto que encaja en sus necesidades.

Elegir los atributos globales o personalizados

 

Cuando se añaden productos nuevos al catálogo de una tienda online en WooCommerce que presenten variaciones, podemos elegir entre utilizar atributos globales o personalizados, ¿cuál es recomendable?

En general, no habría que pensarlo demasiado: deberíamos usar (casi siempre) atributos globales. Los atributos personalizados tienen una gestión algo más ágil (se hace dentro de la propia página del producto), pero es una arma de doble filo.

Cuando el catálogo es pequeño, quizás no nos encontremos con los problemas que puede acarrear utilizar los atributos personalizados, pero a medida que crezca (y eso esperamos, que nuestra tienda online crezca), acabarán apareciendo inevitablemente:

  • Que tengamos atributos personalizados repetidos en productos distintos, con lo que estamos duplicando su administración.
  • Que haya atributos globales y personalizados con la misma función, lo que de nuevo complica su administración.

En líneas generales, siempre deberíamos crear y utilizar atributos globales, dejando los atributos personalizados solo cuando sean características muy vinculadas al propio producto.

Variaciones generales de color y talla

Incluir previsualizaciones para cada variación

 

La primera indicación que un usuario tiene de que un producto tiene variaciones es la lista desplegable de atributos que muestra las distintas opciones de cada atributo y, si quiere ver la variante del producto, debe seleccionarlo para que aparezca su imagen.

Además, esta lista desplegable solo contiene texto, las etiquetas de los atributos, lo que puede desmotivar al usuario si la lista es larga y desmotivarle para continuar con la compra.

Pero si al usuario ya se le mostrara una previsualización (de pequeño tamaño) de las imágenes o iconos representativos de cada variación en la ficha del producto, estaríamos mejorando su experiencia de usuario en dos aspectos:

    • Las imágenes tienen mayor impacto y atraen muchos más la atención del usuario que el texto, lo que facilita que siga interesado en conocer más sobre el producto y sus variaciones.
    • El usuario no tiene que seleccionar cada valor del atributo para ver su imagen, sino que puede verlos y compararlos directamente sobre la ficha del producto de un solo vistazo.

WooCommerce no soporta esta característica por defecto, pero disponemos de plugins gratuitos que sí, como Variation Swatches for WooCommerce, que permite incluir una imagen de previsualización o un icono prediseñado de cada variación.

Imágenes en variaciones
Plugin variations swatches

El plugin “Variation Swatches for WooCommerce” es una herramienta muy útil para cualquier persona que esté utilizando WordPress y WooCommerce para administrar una tienda en línea. Este plugin convierte los campos de selección de variación de producto en radio, imágenes, colores y etiquetas, lo que permite una visualización más atractiva y fácil de usar de las variaciones de producto. Aquí te detallo sus bondades:

 

  • Experiencia de usuario mejorada: Este plugin cambia los campos de selección de variación de producto en etiquetas, colores e imágenes amigables para el usuario. Esto proporciona una experiencia de usuario refrescante y elegante, permitiendo a los clientes seleccionar los límite de variaciones de producto en WooCommerce que desean antes de realizar un pedido.

  • Personalización: Puedes personalizar los bordes de tus muestras de producto para que coincidan con la sofisticación de tu sitio. Si deseas tener una imagen o un color específico en tu fondo, este plugin te permite hacerlo rápidamente. También ofrece Tooltip para usar en tus páginas de producto y categoría de producto.

  • Compatibilidad: El plugin es altamente compatible con temas y plantillas de WooCommerce. Te permite personalizar el borde, el color de fondo y la imagen. Tooltip es una gran característica de este plugin. Es fácil de instalar y personalizar su comportamiento.

  • Rendimiento de carga mejorado: Este plugin tiene un sistema de caché predeterminado de WordPress que facilita la caché para una carga más rápida de tu sitio.

  • Características destacadas: Permite habilitar muestras de color/imagen/etiqueta/botón para productos variables. Ofrece control de tamaño de muestras en la página del producto, configuraciones de tooltip, trabaja en la ventana emergente de vista rápida, y permite personalizar colores de tooltip/muestras, fondo y tamaños de borde.

  • Características Pro: Algunas de las características Pro del plugin incluyen la posibilidad de habilitar muestras para páginas de archivo, personalización de variaciones para cada producto, personalización de texto de tooltip por producto/atributo, y soporte para atributos personalizados para productos.

Utilizar etiquetas en los atributos fáciles de leer y entender

 

Crear los atributos para asignar a productos variables puede ser un proceso sencillo. Si vendemos una camisa en algunos tamaños, solo habrá que crear y asignar atributos de tamaño, es decir, pequeño, mediano, grande, XL, XXL, etc.

Pero puede surgir la necesidad de crear atributos que sean un poco más complejos. Tal vez tengamos una camisa en tres tonos diferentes de azul, con dos versiones de la misma serigrafía, o diferentes cortes o ajustes de la tela.

Los atributos deben ser claros y fáciles de entender de un vistazo, sin importar cuán complejas sean las variaciones en realidad. Si las descripciones en texto (etiquetas) son confusas, posiblemente desmotive al usuario y no decida realizar la compra.

Los usuarios estarán viendo y leyendo una lista de opciones antes de ver las imágenes, por lo que cuanto más claro describamos lo que vendemos, mucho mejor. Si el tipo de atributo lo permite, añadamos una previsualización o icono de cada variación, tal como vimos en el punto anterior.

Si no hay suficiente espacio para enumerar todos los detalles del atributo, o para aportar aún más información, siempre podemos usar la descripción larga del producto (uno de los campos disponibles en WooCommerce) para aclarar todo lo necesario.

Descripción de producto

Utilizar fotos reales y de alta calidad para cada variación

 

No hay nada que desincentive más a un usuario que ver fotos borrosas, de pequeño tamaño o que solo muestra una parte del producto. Y lo mismo se aplica a cada de sus variaciones.

Crear páginas de productos con tantas fotos, para todas sus variaciones, requiere trabajo y lleva tiempo hacerlo, pero hay una buena razón para hacerlo. Por muy buena que sea una descripción textual, una imagen vale más que mil palabras y, muchas veces, ningún texto puede sustituir a una buena foto.

Lo ideal es añadir fotos para cada variación del producto, de modo que cuando el usuario decida qué elegir, pueda ver un ejemplo real de esa elección. No debemos dejar que se imagine cómo es el producto, tenemos que mostrárselo, y si son necesarios varios ángulos, añadirlos también.

Se puede obviar estas fotos individuales de cada variación si no hay diferencias entre ellas. Por ejemplo, la ropa que se ofrece en diferentes tamaños: una camisa pequeña se verá igual que una grande.

Con esta medida, no solo estaremos incentivando al usuario para que se interese y compre el producto, sino que se haga una idea equivocada del producto y sepa de antemano qué es lo que compra.

De esta forma, reducimos la posibilidad de que quede descontento cuando lo reciba y no sea lo que esperaba, evitando que devuelva del producto.

Subida de imagenes en HD

Añadir múltiples variaciones al carrito de la compra

 

Si vendemos a minoristas, probablemente compren grandes lotes de las distintas variaciones de un productos. Para estos clientes, añadir en el carrito todas las variaciones que quieren comprar puede ser un proceso largo y tedioso.

Sin contar la cantidad de pasarelas de pago para WooCommerce disponibles

Por ejemplo, un cliente de ropa que desea comprar 10 camisetas medianas, 15 grandes y 5 pequeñas desde la misma página de producto, sin tener que hacerlo una vez por cada variación y sin tener que esperar a que refresque la página.

En estos casos, debemos facilitar que los usuarios puedan añadir al carrito múltiples variaciones de un producto en la misma página y sin refrescos. Sin embargo, WooCommerce no contempla esta funcionalidad.

Podemos utilizar plugins para hacerlo, aunque no son gratuitos. Por ejemplo, el plugin “Woocommerce Variations to Table-Grid” permite que se puedan añadir múltiples variaciones de producto al carrito desde la misma página y en una sola operación.

Para ello, visualiza una tabla en página del producto con todas sus variaciones, para que los compradores puedan elegir la cantidad para cada variación y añadirlos conjuntamente al carrito.

Esto reduce la cantidad de trabajo que los usuarios tendrán que hacer para comprar varios productos a la vez, y también deja claro cuál es el precio total de las variaciones seleccionadas.

Conclusiones

 

Gracias a las variaciones de productos, una tienda online en WooCommerce puede ampliar la oferta de su catálogo, de forma que, para un producto dado, el usuario puede seleccionar cuáles de sus características o atributos son adecuadas para él.

La creación y administración de variaciones de productos en WooCommerce está integrado como parte de la página de producto, donde los atributos de un producto establecen la diferencia entre una variación y otra de un mismo producto.

Estos atributos se pueden definir globalmente, con efecto sobre todos los productos del catálogo, o de forma personalizada para cada producto individual. La combinación de los distintos valores de cada atributo define cada variación del producto, como la talla, el color, o las dimensiones.

A pesar de la sencillez de administración de las variaciones de productos en WooCommerce, debemos seguir un conjunto de recomendaciones y buenas prácticas, tanto durante la creación de las variaciones como a la hora de mostrarlos en la tienda online.

Gracias a estas buenas prácticas, muy relacionadas en cómo la información de las variaciones se muestra al usuario, conseguimos que el usuario tenga mayor motivación para decidirse por realizar la compra de una determinada variación y, por tanto, aumentar las ventas de la tienda online.

¿Te ha resultado útil este artículo?

Black Friday 2024