¿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.
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
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
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:
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.
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.
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
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
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
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
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
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
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
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
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:
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 (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.
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 web, blog o tienda online WordPress desde el principio.
Soy muchas cosas, pero todo empezó como blogger hace más de 20 años. Desde ahí he ido ido creciendo como persona y profesional hasta que decidí dejar un buen trabajo, emprender por mi cuenta y poner en marcha mi propia agencia de marketing digital. Ahora, junto con un equipo joven, motivado y muy cualificado, ayudo a profesionales y empresas a crear y hacer crecer su negocio en Internet ofreciendo un servicio de marketing digital atento, cercano, integral y profesional.
Ú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.
Ú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.