Cómo Crear VARIACIONES en Woocommerce [+PLUGINS]
- Ignacio Santiago
- septiembre, 2021
- Sin respuestas
¿Has creado una tienda online con WooCommerce y quieres crear productos con variaciones pero no sabes cómo hacerlo? ¿Te gustaría embellecer el selector de opciones por defecto de WooCommerce? ¡Estás en el sitio correcto! Los productos variables son un tipo de producto en los e-commerce que te permite ofrecer un conjunto de variaciones en woocommerce de un producto, con control sobre los precios, el inventario, la imagen y más para cada variación. Se pueden utilizar para un producto como una camisa, donde puedes ofrecer una talla grande, mediana y pequeña, y en diferentes colores.
Las variaciones de WooCommerce son una herramienta fundamental para un mejor funcionamiento de una tienda creada con WordPress, y es que este plugin de comercio electrónico incluye en su instalación todo lo necesario para crear y configurar variaciones de producto de forma fácil e intuitiva. Estas variaciones de producto son necesarias para que el usuario pueda comprar el producto con las características que quiera, lo que permite hacer un mejor seguimiento de las ventas de cada cliente. El producto no varía, lo único que cambia son esas variaciones de producto para que este se adapte mejor a las necesidades e intereses de los usuarios, y es importante saber gestionarlo.
Qué es una variación de un producto, cómo funciona y para qué sirve
Un producto variable es un tipo de producto dentro de WooCommerce que permite establecer variaciones según la elección de ciertos valores de atributos. Dentro de estas variaciones puedes determinar tipo de producto (físico o virtual) precio, descuento, stock, peso, dimensiones, clase de envío, descripción, GTIN e imágenes.
Aunque el producto se trate del mismo, cada atributo o combinación deriva en una variación del producto principal, por lo que normalmente deben ser tratados y gestionados de forma independiente. Con respecto al producto simple de WooCommerce, los productos variables tienen dos propiedades, que son las siguientes:
- Disponen de una administración separada para cada combinación de los atributos (variación del producto). Y aunque se pueden asignar atributos a productos simples, no pueden ser administrados.
- El usuario debe elegir la variación que le interesa antes de poder añadir el producto al carrito de la compra, salvo que existan valores por defecto. Es decir, que un producto variable solo se define por completo cuando cada atributo tiene un valor.
Gracias a las variaciones de productos una tienda online en WooCommerce puede ampliar la oferta de su catálogo, de forma que, en un producto dado, el usuario pueda seleccionar cuáles de sus características o atributos son adecuadas para él. El objetivo es poder dar a elegir entre diferentes opciones (colores, tamaños, etc) y separar cada atributo como si se tratase de un producto individual.
La combinación de los distintos atributos y términos define cada variación del producto.
Cómo crear productos con variaciones en WooCommerce correctamente
Crear productos con variaciones en WooCommerce es muy fácil, pero para hacerlo correctamente es necesario tener en cuenta una serie de detalles. Por ello, vamos a ejemplificar todo el proceso con un producto real de pastelería. Un roscón de reyes con el que vamos a ir explicándote cómo crear las variaciones en WooCommerce. Sigue estos pasos:
#1 Crea un listado de atributos para tus productos
Dirígete a la seccion «Productos > Atributos» y rellena la información del atributo y haz click en «Añadir atributo»
Comprueba el listado de atributos y asegúrate de que están todos
#2 Edita la información del atributo (si te has equivocado)
Edita la información de cada atributo pasando el ratón por encima del atributo y haciendo click en «Editar»
Cambia nombre, slug o el orden de clasificación y haz click en «Actualizar»
#3 Activa las páginas de archivo para los atributos (si es necesario)
Activa las páginas de archivo para los atributos (si es necesario) y haz click en «Actualizar»
#4 Añade términos a cada atributo que hayas creado
Pasa el ratón por encima del atributo que has creado y haz click en «Configurar términos»
Añade «Nombre», «Slug» (no es obligatorio) y «Descripción» (no es obligatorio) y haz click en «Añadir nuevo término»
Comprueba el listado de términos y asegúrate de que están todos
#5 Edita la información del término (si te has equivocado)
Edita la información de cada término pasando el ratón por encima del término y haciendo click en «Editar»
Cambia nombre, slug o descripción y haz click en «Actualizar»
#6 Ordena los atributos en WooCommerce según tus necesidades
Selecciona el icono de las tres barras y, sin soltarlo, muévelo arriba o abajo
Comprueba que el orden de los atributos es correcto
#7 Configura el producto como «variable» (en la ficha del producto)
Dirígete a la ficha del producto (a la sección «Datos del producto») y elige «Producto variable» (viene «Producto simple por defecto»)
#8 Selecciona los atributos del producto
Dirígete a la pestaña «Atributos» y selecciona la opción «Atributo de producto personalizado»
En el despeglable elige el atributo del producto y haz click en «Añadir»
#9 Selecciona los términos de los atributos del producto
Elige los términos del atributo que acabas de añadir haciendo click en «Elige términos»
Elige los términos del atributo
Elige todos los términos del atributo si es necesario
#10 Activa la opción «usado para variaciones»
Activa la opción «usado para variaciones» para cada atributo
#11 Guarda los cambios que has hecho hasta este punto
Haz click en «Guardar cambios» para guardar los cambios que has hecho hasta este punto
#12 Crea automáticamente todas las variaciones del producto
En la pestaña «Variaciones», selecciona la opción «Añadir varación» y, en el despleglable, elige la opción «Crear variaciones para todos los atributos»
#13 Añade la información a cada variación de tu producto
Comprueba que se han creado todas las variaciones del producto
Añade la información a cada variación del producto (como mínimo el precio)
#14 Revisa que aparece un selector de opciones en la ficha de producto
Revisa que aparece un selector de opciones en la ficha de producto
Crear variaciones para los productos en Woocommerce es un proceso fácil y rápido, aunque es importante tener en cuenta detalles como la información de cada variación y de si quieres un archivo de cada atributo (no es más que un listado de productos visible que tiene un atributo en particular).
Cómo añadir un selector de color e imagen a las variaciones
Una vez que has creado las variaciones de tu producto verás que el selector que utiliza WooCommerce, aunque funciona y es suficiente (el usuario tiene que que desplegar la opción y buscar la variación deseada), es un poco feo e incompleto.
Pero esto, si tu producto ofrece muchas opciones, significa más pasos. Eso, en el mundo de ecommerce, significa que son demasiados pasos, ya que siempre hay que intentar minimizar las acciones que tiene que hacer un usuario para realizar una compra. Por ello, te vamos a explicar cómo cambiar el selector de opciones en WooCommerce y hacerlo más atractivo y usable.
#1 Encuentra un plugin que mejore la funcionalidad de variaciones en WooCommerce
Ofrecer un selector más avanzado en WooCommerce es posible. El objetivo es dar al usuario la opción de elegir cualquier de las opciones de una manera más visual y rápida. Para ello, es necesario la instalación de ciertos plugins que ofrezcan la posibilidad de cambiar el selector por defecto de WooCommerce en selectores de colores, tallas, pesos, etc. Para ello, hemos hecho un listado de los mejores plugins para mejorar la funcionalidad de variaciones en WooCommerce:
#1 YITH WooCommerce Color and Label Variations
YITH WooCommerce Color and Label Variations te permite reemplazar los selectores estándar de WooCommerce con colores, iconos, imágenes personalizadas y etiquetas dinámicas. Es un plugin versátil que se adapta a cualquier tipo de producto, por lo que, independientemente de lo que vendas, al mostrar tus opciones de producto con imágenes e iconos, ayudarás al cliente a comprender qué opciones de compra están disponibles para ese producto. Posee una versión gratuita y otra de pago.
Características
- Colores y etiquetas de variaciones: Permite mostrar variaciones de productos mediante colores y etiquetas.
- Swatches interactivos: Ofrece swatches interactivos para una experiencia visualmente atractiva.
- Etiquetas personalizables: Permite la personalización de etiquetas de variaciones para claridad y branding.
- Actualización dinámica de precio: Actualiza automáticamente los precios según las variaciones seleccionadas.
- Cambio rápido de variación: Facilita el cambio rápido entre diferentes variaciones de productos.
Planes de precios
- Premium (79€/Año).
Ofrecen un plan gratuito.
#2 Variation Swatches and Photos
Variation Swatches and Photos de WooCommerce te permite sustituir el menú desplegable para seleccionar variaciones en los productos variables por cuadros con imágenes o colores, de manera que los clientes puedan seleccionar una variación de producto de forma visual y sencilla con estilos y tamaños diferentes. Y su interfaz de administración te permite seleccionar colores o imágenes a nivel de producto o atributo.
Características
- Swatches de imágenes: Integra swatches de imágenes para una representación más visual de las variaciones de productos.
- Diseño responsivo: Asegura una experiencia sin problemas en diferentes dispositivos al adaptarse a diferentes tamaños de pantalla.
- Información de tooltip: Muestra tooltips informativos para proporcionar detalles adicionales sobre cada variación.
- Estilos configurables de swatch: Permite a los usuarios elegir entre diferentes estilos de swatches para que coincidan con el diseño del sitio.
Planes de precios
- Desde $99 al año.
#3 WooCommerce Extra Product Options
WooCommerce Extra Product Options es un complemento de producto de WordPress ideal, puesto que permite crear opciones, formularios y complementos de productos con precios, diseñar y validar características, convertir los menús desplegables de atributos de variación en botones de opción, muestras de imagen, admite casillas de verificación, de entrada o selección, botones de radio, áreas de textos, etc. Incluso puede controlar la ubicación de sus nuevos campos con el creador de formularios y es un soporte muy completo lleno de características interesantes.
Características
- Campos personalizados ilimitados: Proporciona la capacidad de agregar un número ilimitado de campos personalizados a las páginas de productos.
- Lógica condicional: Permite la creación de campos personalizados con lógica condicional basada en las selecciones del usuario.
- Opciones de precios: Admite opciones de precios adicionales para campos personalizados, mejorando la flexibilidad de precios del producto.
- Capacidad de carga de archivos: Permite a los clientes cargar archivos o imágenes como parte de su personalización del producto.
- Configuración a nivel global y de producto: Ofrece configuraciones tanto a nivel global como de producto para una personalización integral.
Planes de precios
- Básico ($39).
- Premium ($139).
#4 Additional Variation Images Gallery
Additional Variation Images Gallery es una de las características más imprescindibles de una tienda online. Ayuda al propietario a presentar detalles en profundidad de la variación de su producto insertando imágenes ilimitadas relacionadas con dicha variación. Y para conseguir que su presentación de imagen de variación sea impresionante, se agregan otras características útiles que le permiten impulsar la conversión de su producto.
Características
- Galería de imágenes ampliable: Amplía la galería de productos para mostrar imágenes adicionales para cada variación.
- Funcionalidad de zoom: Proporciona capacidades de zoom para que los clientes examinen más de cerca las imágenes de variación.
- Galería compatible con dispositivos móviles: Asegura un diseño receptivo para la galería de imágenes en dispositivos móviles.
- Navegación de slider: Incorpora un slider para una navegación fácil entre múltiples imágenes de variación.
- Integración con Lightbox: Se integra con la funcionalidad de lightbox para una experiencia visual atractiva.
Planes de precios
- 1 Dominio ($49/Año).
- 5 Dominios ($149/Año).
- Ilimitados ($299/Año).
Ofrecen un plan gratuito.
#5 Bulk Variation Forms
Bulk Variation Forms es un complemento de WooCommerce que permite a los usuarios, desde un solo formulario, agregar múltiples variaciones de un producto a su carrito de compra de una sola forma, pudiendo configurar fácilmente productos con 2 atributos de variación para una entrada masiva. Es un plugin que facilita la organización de los productos de forma eficiente y rápida, y permite a los clientes ordenar todo lo que necesitan.
Características
- Edición masiva eficiente: Agiliza el proceso de edición y gestión de variaciones de productos en masa.
- Importación/Exportación CSV: Admite la importación y exportación de archivos CSV para la manipulación rápida y sencilla de datos de variación.
- Gestión de inventario: Permite la gestión eficiente de niveles de stock y atributos para múltiples variaciones.
- Opciones de actualización rápida: Proporciona opciones para actualizaciones rápidas de precios, stock y otros detalles de variación.
- Interfaz que ahorra tiempo: Diseñada para ahorrar tiempo y esfuerzo al trabajar con un gran número de variaciones.
Planes de precios
- Desde $49 al año.
#6 Variation Swatches for WooCommerce
Variation Swatches for WooCommerce es el complemento de muestras de variación de atributos más popular en el directorio de complementos de WordPress. Se trata de un complemento simple que convierte el menú desplegable de selección de atributos del producto en muestras. Además, los usuarios no tienen que revelar el campo de selección desplegable y ver qué variaciones están disponibles para el producto variable, ya que sin presionar clics extras, pueden seleccionar la variación deseada.
Características
- Estilos de swatch: Ofrece varios estilos de swatch, incluyendo color, imagen y texto.
- Visualización de tooltip: Muestra tooltips informativos para proporcionar detalles adicionales cuando los usuarios pasan el cursor sobre los swatches.
- Vista previa en vivo: Proporciona una vista previa en vivo de las variaciones seleccionadas antes de agregar productos al carrito.
- Selección rápida de variación: Permite a los clientes elegir rápidamente las variaciones del producto utilizando la interfaz intuitiva de swatch.
- Compatibilidad: Garantiza la compatibilidad con diferentes temas y diseños de WooCommerce.
Planes de precios
- 1 Dominio ($49/Año).
- 5 Dominios ($149/Año).
- Ilimitados ($299/Año).
Ofrecen un plan gratuito.
#7 Variation Images Gallery for WooCommerce
Variation Images Gallery for WooCommerce permite agregar imágenes adicionales ilimitadas para cada variación de producto. Es un complemento con una opción de clasificación personalizada sencilla, pues muestra un conjunto diferente de imágenes cuando un cliente selecciona una combinación particular de descripciones de productos diferentes. Además, admite incrustaciones de vídeo de Youtube y Vimeo, y es fácil habilitar o deshabilitar el uso de una flecha para la navegación deslizante, y puede activar la altura del control deslizante para adaptarse a la apariencia de la página.
Características
- Integración de galería: Se integra sin problemas con imágenes adicionales en la galería de productos para cada variación.
- Diseño responsivo: Asegura una experiencia consistente y amigable para el usuario en varios dispositivos.
- Múltiples vistas de imágenes: Admite múltiples vistas de imágenes de variación, mejorando la presentación del producto.
- Configuración fácil: Ofrece una interfaz fácil de usar para una configuración y gestión sencillas.
- Liviano y rápido: Optimizado para velocidad y rendimiento para mejorar la eficiencia general del sitio web.
Planes de precios
- 1 Dominio ($29/Año).
- 5 Dominios ($119/Año).
- Ilimitados ($199/Año).
Ofrecen un plan gratuito.
#8 WooCommerce Additional Variation Images
La extensión WooCommerce Additional Variation Images permite añadir imágenes de la galería por cada variación de los productos variables en WooCommerce. Los visitantes de la tienda pueden ver distintas imágenes al seleccionar una variación de producto con un color y estilo predeterminado. Pero cabe destacar que al utilizar imágenes adicionales por cada variación, el resto de imágenes de la galería se ocultarán al seleccionar una variación concreta.
Características
- Cargas de imágenes adicionales: Permite la adición de imágenes adicionales para cada variación del producto.
- Interfaz de arrastrar y soltar: Facilita una interfaz de usuario amigable para la gestión fácil de imágenes.
- Opciones de clasificación de imágenes: Permite a los usuarios organizar y priorizar fácilmente el orden de las imágenes de variación.
- Funcionalidad de zoom de imágenes: Incorpora funciones de zoom para que los clientes vean las imágenes de variación en detalle.
- Compatibilidad: Garantiza la compatibilidad con las últimas versiones de WooCommerce y WordPress.
Planes de precios
- Desde $49 al año.
#9 WooCommerce Bulk Variations
WooCommerce Bulk Variations facilita la visualización de variaciones de productos en una cuadrícula o matriz de precios fácil de usar, con dos opciones de diseño de cuadrícula. Este plugin es perfecto para cualquier producto con 1 o 2 atributos que se utilizan para variaciones y está diseñado para funcionar con cualquier tema y adaptarse a todos los tamaños de pantalla.
Características
- Capacidad de edición masiva: Permite a los usuarios editar y gestionar múltiples variaciones simultáneamente.
- Gestión de atributos: Simplifica el proceso de gestión de atributos para numerosas variaciones de productos.
- Actualizaciones rápidas de variación: Permite actualizaciones rápidas de detalles de variación como precios, stock y más.
- Opciones de filtrado: Proporciona opciones de filtrado para ordenar e identificar eficientemente variaciones específicas.
- Interfaz fácil de usar: Diseñada con una interfaz intuitiva para simplificar las tareas de gestión de variaciones en masa.
Planes de precios
- Personal (79€/Año).
- Premium (139€/Año).
- Profesional (249€/Año).
Ofrecen un plan gratuito.
#10 WooCommerce Variation Master
WooCommerce Variation Master es un complemento que permite implementar muestras de variación para productos en tiendas WooCommerce, y diseñar estas muestras de variación cambiando la imagen, el color, o el texto. Incluye una personalización de variaciones con una facilidad suave de muestras de color e imágenes que se pueden editar en el carrito. Proporciona 4 conjuntos exclusivos de características que mejorarán la visualización de la página del producto con una galería de variaciones, muestras de atributos, una ventana emergente de actualización del carrito para variaciones y un control deslizante de la galería de productos.
Características
- Control maestro de variaciones: Centraliza el control sobre las variaciones de productos para una gestión eficiente.
- Precios dinámicos: Admite reglas de precios dinámicos para diferentes variaciones de productos.
- Lógica condicional: Implementa lógica condicional para crear reglas complejas basadas en las selecciones del usuario.
- Gestión de inventario: Facilita el seguimiento y la gestión de inventario para cada variación.
- Integración con WooCommerce: Se integra sin problemas con WooCommerce para una experiencia de tienda en línea cohesiva.
Planes de precios
- Básico ($35).
- Premium ($199).
#11 WooSwatches
WooSwatches es un complemento de muestras de variación de color o imagen que permite la selección desplegable de un atributo variable en una selección de color o imagen de buen aspecto, pudiendo mostrar imágenes o colores en todos los tamaños con forma cuadrada o redonda. Incluye una interfaz de usuario de administración sencilla de usar que permitirá configurar el color, la imagen y otras opciones. Puede mostrar muestras del atributo de un producto debajo del título en las páginas de archivo de tienda, categoría o etiqueta, y las imágenes se reemplazan por una imagen flotante de muestra.
Características
- Personalización de swatches: Permite la personalización de estilos de swatch, incluyendo color, imagen y texto.
- Navegación basada en AJAX: Incorpora navegación basada en AJAX para una selección de variaciones suave y dinámica.
- Información de tooltip: Muestra tooltips para proporcionar información adicional sobre cada variación.
- Diseño responsivo: Asegura una visualización receptiva y atractiva en varios dispositivos.
- Compatibilidad: Compatible con temas populares de WordPress y versiones de WooCommerce para una integración sin problemas.
Planes de precios
- Básico ($19).
- Premium ($105).
#2 Instala el plugin y configura sus ajustes correctamente
Dependiendo del plugin que elijas, tendrás unas opciones u otras. Dependiendo de qué objetivo persigas, te recomiendo el plugin WooCommerce Extra Product Options para casi todo o YITH WooCommerce Color and Label Variations Premium si quieres cambiar la apariencia del selector de WooCommerce. En este caso, voy a utilizar este bolso para ponerte un ejemplo. Lo primero, como siempre, es instalar el plugin y configurar sus ajustes correctamente:
Instala el plugin YITH WooCommerce Color and Label Variations Premium y revisa sus ajustes
Revisa la configuración de las variaciones del plugin YITH WooCommerce Color and Label Variations Premium
#3 Elige el tipo de selector (color, imagen o etiqueta) para el atributo del producto
En la sección de «Atributos», comprueba que aparece una nueva opción (Tipo) y una nueva columna (Tipo)
Cuando creas un nuevo atributo debes elegir el tipo de selector que prefieres (o no hacerlo y utilizar el que viene por defecto)
Edita la información de cada atributo pasando el ratón por encima del atributo y haciendo click en «Editar»
Edita los atributos, cambia el tipo de selector en cualquier momento y haz click en «Actualizar»
#4 Edita la informacion de los términos de cada atributo
Pasa el ratón por encima del atributo y haz click en «Configurar términos»
En el listado de términos puedes configurar el «Color» (o imagen o etiqueta) y el «Tooltip» (no es obligatorio)
Edita la información de cada término y elige el «Color» (o imagen o etiqueta) y el «Tooltip» (no es obligatorio)
#5 Revisa que aparece el nuevo selector de opciones en la ficha de producto
Revisa que aparece el nuevo selector de opciones (en este caso de color) en la ficha de producto
Conclusión: Eleva las opciones de tu tienda online con variaciones
Como has podido comprobar, crear variaciones de producto en una tienda WooCommerce es fácil y rápido. En definitiva, se trata de tener muy claros los atributos y términos que tienen tus productos, cambiar el tipo de producto, seleccionar los atributos y términos idóneos y editar la información de cada variación. Siguiendo con el ejemplo del roscón de reyes, el usuario puede elegir el tamaño y el relleno, pero esto lo puedes llevar a cualquier tipo de producto.
Una vez que has creado las variaciones de tu producto verás que el selector que utiliza WooCommerce, aunque funciona y es suficiente (el usuario tiene que que desplegar la opción y buscar la variación deseada), es un poco feo e incompleto. Pero esto, si tu producto ofrece muchas opciones, significa más pasos. Eso, en el mundo de ecommerce, significa que son demasiados pasos, ya que siempre hay que intentar minimizar las acciones que tiene que hacer un usuario para realizar una compra.
Por ello, es una buena idea embellecer los selectores con colores, imágenes o etiquetas. Aunque son muchos los plugins de WooCommerce que existen para poder hacerlo, te recomendamos WooCommerce Extra Product Options y YITH WooCommerce Color and Label Variations Premium.
¿Qué te ha parecido esta guía sobre cómo crear variaciones en WooCommerce? ¿Conocías todos los plugins que hemos mencionado? ¿Hay alguna que te haya llamado la atención? ¿Crees que nos hemos dejado alguna? ¿Te has quedado con alguna duda o pregunta? Entonces te pedimos que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero nos alegraremos mucho de leerlo y responderlo.
