¿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 WooCommerce que te permite ofrecer un conjunto de variaciones en 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. Por ello, a continuación, en esta guía te detallo cómo crear variaciones de producto en WooCommerce y cómo mejorar el selector de opciones.

mejores plugins wordpress variaciones woocommerce productos

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 (color, talla, tamaño, etc), 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. Por ello, en esta guía te explico todo lo que necesitas saber para crear y gestionar variaciones de producto en WooCommerce.

Índice de contenidos

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.

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, voy a ejemplificar todo el proceso con un producto real de pastelería. Un roscón de reyes con el que voy a ir explicándote cómo crear las variaciones en WooCommerce. Sigue estos pasos:

#1 Crea un listado de atributos para tus productos

como crear variaciones productos woocommerce crear atributos

Dirígete a la seccion «Productos > Atributos» y rellena la información del atributo y haz click en «Añadir atributo»

como crear variaciones productos woocommerce crear atributos listado atributos

Comprueba el listado de atributos y asegúrate de que están todos

#2 Edita la información del atributo (si te has equivocado)

como crear variaciones productos woocommerce crear atributos editar informacion

Edita la información de cada atributo pasando el ratón por encima del atributo y haciendo click en «Editar»

como crear variaciones productos woocommerce crear atributos editar informacion

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)

como crear variaciones productos woocommerce editar atributos activar archivos

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

como crear variaciones productos woocommerce crear atributos configurar terminos

Pasa el ratón por encima del atributo que has creado y haz click en «Configurar términos»

como crear variaciones productos woocommerce crear atributos configurar terminos

Añade «Nombre», «Slug» (no es obligatorio) y «Descripción» (no es obligatorio) y haz click en «Añadir nuevo término»

como crear variaciones productos woocommerce crear atributos listado terminos

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)

como crear variaciones productos woocommerce crear terminos editar informacion

Edita la información de cada término pasando el ratón por encima del término y haciendo click en «Editar»

como crear variaciones productos woocommerce crear terminos editar informacion

Cambia nombre, slug o descripción y haz click en «Actualizar»

#6 Ordena los atributos en WooCommerce según tus necesidades

como ordenar variaciones atributos woocommerce

Selecciona el icono de las tres barras y, sin soltarlo, muévelo arriba o abajo

como ordenar variaciones atributos woocommerce

Comprueba que el orden de los atributos es correcto

#7 Configura el producto como «variable» (en la ficha del producto)

como crear variaciones productos woocommerce cambiar tipo de producto variable

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

como crear variaciones productos woocommerce añadir atributos ficha producto

Dirígete a la pestaña «Atributos» y selecciona la opción «Atributo de producto personalizado»

como crear variaciones productos woocommerce añadir atributos ficha producto

En el despeglable elige el atributo del producto y haz click en «Añadir»

#9 Selecciona los términos de los atributos del producto

como crear variaciones productos woocommerce añadir atributos ficha producto elegir terminos

Elige los términos del atributo que acabas de añadir haciendo click en «Elige términos»

como crear variaciones productos woocommerce añadir atributos ficha producto elegir terminos

Elige los términos del atributo

como crear variaciones productos woocommerce añadir atributos ficha producto seleccionar todos los terminos

Elige todos los términos del atributo si es necesario

#10 Activa la opción «usado para variaciones»

como crear variaciones productos woocommerce añadir atributos ficha producto listado terminos

Activa la opción «usado para variaciones» para cada atributo

#11 Guarda los cambios que has hecho hasta este punto

como crear variaciones productos woocommerce añadir atributos ficha producto listado atributos terminos

Haz click en «Guardar cambios» para guardar los cambios que has hecho hasta este punto

#12 Crea automáticamente todas las variaciones del producto

como añadir variaciones productos woocommerce crear variaciones todos los productos

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

como añadir variaciones productos woocommerce editar informacion variaciones

Comprueba que se han creado todas las variaciones del producto

como añadir variaciones productos woocommerce editar informacion variaciones

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

como crear variaciones productos woocommerce comprobar funcionamiento

Revisa que aparece un selector de opciones en la ficha de producto

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 voy 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, he hecho un listado de los mejores plugins para mejorar la funcionalidad de variaciones en WooCommerce:

ganador 1

YITH WooCommerce Color and Label Variations

mejores plugins wordpress variaciones woocommerce 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.

ganador 2

Variation Swatches and Photos

mejores plugins wordpress variaciones woocommerce 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.

ganador 3

WooCommerce Extra Product Options

mejores plugins woocommerce tienda online wordpress 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.

Additional Variation Images Gallery

mejores plugins wordpress variaciones woocommerce 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.

Bulk Variation Forms

mejores plugins wordpress variaciones woocommerce 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.

Variation Swatches for WooCommerce

mejores plugins wordpress variaciones woocommerce variation swatches 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.

Variation Images Gallery for WooCommerce

mejores plugins wordpress variaciones woocommerce variation images gallery 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.

WooCommerce Additional Variation Images

mejores plugins wordpress variaciones woocommerce 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.

WooCommerce Bulk Variations

mejores plugins wordpress variaciones woocommerce 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.

WooCommerce Variation Master

mejores plugins wordpress variaciones woocommerce 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.

WooSwatches

mejores plugins wordpress variaciones woocommerce 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.

#2 Instala el plugin y configura sus ajustes correctamente

Dependiendo del plugin que elijas (su funcionamiento es muy parecido), tendrás unas opciones u otras. Dependiendo de qué objetivo persigas, te recomiendo el plugin WooCommerce Extra Product Options para casi todo (es el más barato, completo y fácil de utilizar) o YITH WooCommerce Color and Label Variations Premium si quieres cambiar la apariencia del selector de WooCommerce (con selectores de colores, imágenes o etiquetas). En este caso, voy a utilizar este bolso para ponerte un ejemplo (utilizando el plugin de YITH). Lo primero, como siempre, es instalar el plugin y configurar sus ajustes correctamente:

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium ajustes

Instala el plugin YITH WooCommerce Color and Label Variations Premium y revisa sus ajustes

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium 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

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium atributos

En la sección de «Atributos», comprueba que aparece una nueva opción (Tipo) y una nueva columna (Tipo)

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium atributos

Cuando creas un nuevo atributo debes elegir el tipo de selector que prefieres (o no hacerlo y utilizar el que viene por defecto)

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium editar atributo

Edita la información de cada atributo pasando el ratón por encima del atributo y haciendo click en «Editar»

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium editar atributo

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

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium terminos

Pasa el ratón por encima del atributo y haz click en «Configurar términos»

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium editar termino

En el listado de términos puedes configurar el «Color» (o imagen o etiqueta) y el «Tooltip» (no es obligatorio)

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium editar termino

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

como añadir selector color imagen variaciones productos woocommerce ytih woocommerce color and label variations premium comprobar funcionamiento

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 (a variable), 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 (físico o digital).

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 recomiendo WooCommerce Extra Product Options y YITH WooCommerce Color and Label Variations Premium.

¿Qué te ha parecido mi 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 me he dejado alguna? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.

¿Te ha gustado el contenido?

Puntuación media 5 / 5. Votos: 1352

¡Todavía no hay votos! Sé el primero en valorar el contenido.

También te puede interesar esta guía

WordPress es, sin duda, una de las mejores plataformas para crear una página web, un blog o una tienda online para tu negocio, ya que es fácil de usar, flexible y ofrece muchas opciones para personalizarla de acuerdo a tus necesidades. Empieza con buen pie con WordPress, revisa esta completa guía y aprende a potenciar tu pagina webblog o tienda online WordPress desde el principio.

¿Te ha gustado? Comparte el contenido

Publicado por Ignacio Santiago

Soy muchas cosas, pero todo empezó como Blogger. Desde ahí he crecido como especialista en Marketing Online, aunque con mucha experiencia en Diseño Web, Blogging, SEO y WordPress. Ayudo a emprendedores y pequeñas empresas a crear, mejorar y potenciar su presencia y visibilidad en Internet, con un branding fuerte, que inspire confianza y que genere ventas.

Contenidos relacionados
Deja tu comentario

Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.

servicios marketing digital diseño web wordpress seo fondo
servicios marketing digital diseño web wordpress seo fondo
Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.