Cómo crear productos variables en WooCommerce es una de las dudas habituales cuando se empieza a trabajar con este sistema de comercio electrónico porque en un primer contacto es poco intuitivo, pero ya verás como en cuanto hayas visto cómo se hace te parecerá muy fácil.
Y qué mejor que verlo paso a paso, así que vamos a crear nuestro propio producto variable. Por ejemplo, un smartwatch.
Tabla de contenidos
Productos variables en WooCommerce
Para poder entender fácilmente cómo se crea un producto variable con WooCommerce sólo hay que aplicar un sencillo proceso mental. Veamos, ¿qué es un producto variable? Pues fácil, un producto que tiene variaciones. Puede parecer una perogrullada pero ahí está el quid: ¿qué es lo que varía? ¡Pues alguno de sus atributos!
Así que ¡exacto! para poder añadir variaciones es indispensable que el producto tenga atributos, por lo que tendremos que dirigirnos a la pestaña Atributos del producto.
Pero lo primero es lo primero, y vamos a empezar diciéndole a WooCommerce que lo que queremos crear es un producto variable. Para ello sólo tenemos que elegir ese tipo de producto en el desplegable. Como verás, al hacerlo desaparecen algunos de los campos de opciones, entre ellos el del precio:
No te asustes, no pasa nada, es así como funciona: el precio lo indicaremos por separado para cada una de las variaciones.
Así que tras decirle que nuestro producto será variable, y antes de hacer nada en el apartado Variaciones, tenemos que dirigirnos como decía antes al apartado de Atributos. Aquí es donde le vamos a decir qué atributo es el que cambia entre una variación y otra, y qué valores puede tomar.
Para eso hay que pulsar Añadir en el desplegable Atributo de producto personalizado, darle un nombre y, en el apartado de valores, decirle cuáles son los que puede tomar separados por el símbolo «|» (es la barra vertical, en PC se consigue con alt gr + 1 y en Mac con cmd + 1). Además, tienes que marcar la casilla Usado para variaciones. Lo vas a ver muy claro con una captura de pantalla:
Y ahora sí, pulsamos en Guardar atributos y es el momento de irnos a la pestaña Variaciones a crear las distintas variaciones del artículo. Esto lo podemos hacer de dos formas:
- Manualmente, creando las variaciones que necesitemos eligiéndola en el desplegable y pulsando el botón Añadir variación
- Automáticamente, creando todas las variaciones posibles mediante la opción Crear variaciones para todos los atributos
Nota: Este método es útil cuando queremos crear un único producto variable o, mejor dicho, cuando estos atributos sólo van a ser utilizados por este producto concreto. Si tenemos una tienda en la que muchos productos tienen los mismos atributos (por ejemplo, una zapatería, en la que la mayoría de los productos tendrán tallas similares disponibles) es mejor crear los atributos de forma general en Productos > Atributos, tal y como explico en este artículo:
Variaciones de múltiples atributos
Porque claro, ten en cuenta que puede haber muchas variaciones posibles. Para el ejemplo he utilizado variaciones basadas en un sólo atributo, pero imagina que tenemos dos, o incluso tres atributos que varían: puede ser una locura.
Por ejemplo, si tienes un ecommerce de ropa, y uno de los artículos es una camiseta disponible en tres colores, rojo, azul y blanco, y además con tres tallas, S, M y L. Ahí tendríamos nueve variaciones del artículo:
- Camiseta color blanco talla S
- Camiseta color blanco talla M
- Camiseta color blanco talla L
- Camiseta color rojo talla S
- Camiseta color rojo talla M
- Camiseta color rojo talla L
- Camiseta color azul talla S
- Camiseta color azul talla M
- Camiseta color azul talla L
¿Y si la tenemos en cinco colores? ¿Y si también tenemos las tallas XS, XL y XXL? ¿Y si además la tenemos con dos logotipos distintos impresos en la camiseta? Bueno, en este último caso lo correcto sería crear dos artículos distintos, pero creo que entiendes por dónde voy: cuando hay varios atributos que cambian podríamos necesitar hacer literalmente decenas de variaciones. En ese caso se vería algo así:
Para eso existe la posibilidad de crearlas automáticamente (Crear variaciones para todos los atributos). De hecho, en estos casos, es a menudo más eficiente utilizar esta opción y luego eliminar manualmente las variaciones que no estén disponibles e ir añadiendo los precios una a una.
Porque ése sería el siguiente paso: hay que añadir los precios y las imágenes para cada variación, ya que son detalles que WooCommerce actualizará automáticamente en la página de producto cuando el usuario seleccione el valor del atributo.
Si no es el caso y tenemos pocas variaciones como en el ejemplo es más sencillo añadirlas una a una mientras vamos completando la ficha de cada una de ellas (precio, imagen destacada y cualquier otra característica que pongamos en los artículos, como medidas o peso). Si hemos marcado la casilla de ¿Gestionar el stock? nos aparecerán también los campos Cantidad stock, Estado del stock y ¿Permitir reservas?.
Aunque WooCommerce no da esta opción, también hay forma de que la descripción corta cambie para cada una de las variaciones del producto (en otro post sobre cómo mejorar la página de producto veremos cómo hacerlo, pero si necesitas el dato antes de que lo publique no tienes más que contactarme y preguntar). Y es extraño que WooCommerce no lo haga por sí mismo, ya que la descripción corta es el lugar ideal para explicar al cliente las características propias de cada variación.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
La página de producto en los productos variables
Bien, como puedes ver la página de producto en un producto variable cambia ligeramente respecto de la de los productos simples:
En primer lugar puedes ver que, si el precio es distinto de una variación a otra, en lugar de aparecer donde suele estar habitualmente encontramos arriba el rango de precios en que se encuentran las variaciones: el menor y el mayor. Esto también se puede cambiar mediante este plugin:
Más abajo encontramos un desplegable para elegir la variación del atributo (en este ejemplo el color), que aparece con el texto Escoge una opción. Es cuando eliges la variación en ese desplegable cuando ves aparecer el precio concreto para esa variedad en el lugar habitual. Además, la imagen de producto se cambia y se muestra la de la variación concreta que el usuario ha seleccionado (puedes verlo en la imagen que encabeza este post).
También existe la posibilidad de, en lugar de mostrar una imagen genérica y el texto Escoge una opción, que aparezca una de las variaciones por defecto. Eso podemos definirlo en la pestaña de variaciones de la edición del producto, mediante el desplegable Predeterminados o Valores por defecto (depende de la versión de WooCommerce que estés utilizando).
El botón Seleccionar opciones
A diferencia de los productos simples, que muestran el mismo texto del botón Añadir al carrito en todos los sitios donde aparecen, en los productos variables no ocurre así: en la página de producto el botón dice Añadir al carrito, mientras que en las páginas de archivo (tienda, categorías, etiquetas…) el texto que se muestra es Seleccionar opciones.
Es algo lógico, ya que en la página de archivo el cliente aún no ha podido elegir qué variación del artículo quiere, y tiene que entrar a la página del producto para elegirla, por lo que no es viable ofrecerle la opción de añadirlo al carrito desde una página de archivo.
De todos modos, si ese texto (o algún otro de los de ese botón) no te gusta o te parece más adecuado cualquier otro texto, recuerda que se puede personalizar.
Como siempre, si te ha quedado cualquier duda o necesitas alguna aclaración no tienes más que utilizar el formulario de contacto y estaré encantado de ayudarte.
Buenas. Me parece muy buen aporte. Por fin me he aclarado!!. Gracias.
Ahora me surge un par de preguntas. Ya tengo los colores, rojo, azul, etc, y les he añadido una imagen, pero ¿como puedo añadir más imágenes a un producto variable para que me haga un carrusel? y ¿como puedo poner en la página de productos los colores directamente, sin el desplegable?.
No sé si me explico.
Gracias
Hola Alberto. Me alegro que te haya sido útil, gracias a ti por tu comentario.
En cuanto a lo que consultas, por defecto WooCommerce sólo admite una imagen para cada variación. Si quieres mostrar una galería para las variaciones tienes que usar un plugin, como éste de WooThemes.
En cuanto a que no aparezca el desplegable sino un selector directo, eso explico cómo hacerlo en esta otra entrada.
Un saludo.
Muchas gracias. Un saludo
Hola Enrique, mi pregunta, es si puede añadirse un campo para que los clientes inserten texto en el producto, me gustaria vender productos personalizables, y que el cliente escoja producto 1, color rojo, y un campo en blanco para añdir su nombre por ejemplo: enrique, y que a mi me llegue que el cliente mengano que vive en la calle zutano quiere un producto uno de color rojo y que este personalizado con el nombre de enrique, es eso posible?
Hola Alejandro. Sí, por supuesto que se puede hacer, aunque para ello necesitas un plugin adicional de WooThemes: Product Add-ons.
De hecho, no sólo te permitirá que el cliente suba un texto sino también, por ejemplo, una imagen para personalizar el producto, o incluso cargar un extra por cada opción de personalización.
Un saludo.
Hola Enrique,
Te queria hacer una pregunta. Estoy montando una tienda, con productos variables donde la variacion es el embalaje en el que quieres recibirlo, el cual acompaño con imagen.
Mi problema viene, que al visualizar el producto, primero se ve la imagen del embalaje que has seleccionado y yo quiero que primero se vea el producto y como segunda imagen el embalaje seleccionado.
Espero haberme explicado bien.
Muchas gracias,
un saludo.
Hola Mikel
Pues en realidad no estoy muy seguro de entenderte. Ten en cuenta que la que aparecerá como primera imagen será la que pongas como destacada para el producto.
Un saludo.
Hola, buen día
Gracias por el tutorial, pero tengo un inconveniente, al momento de actualizar mi producto, no aparece el selector, sino esto:
Color
Combination Not Avalable Reset
Size
Combination Not Avalable Reset
Reset es un link pero no hace nada.
Podrias ayudarme ?? Gracias
Hola Harrison
¿Qué tema estás utilizando? Vi muchas veces el caso cuando WooCommerce actualizó el modo de manejar los productos variables (a partir de la versión 2.1) en temas que manejaban sus propias plantillas hasta que los desarrolladores se adaptaron a las novedades. Si el tema está desactualizado puede ser esa la causa.
En cualquier caso, prueba cambiando momentáneamente a la plantilla por defecto (alguna twenty-loquesea) y comprobando si funciona bien, así sabremos si es esa la causa.
Un saludo.
Ya pude resolverlo, aunque no entiendo bien el por qué no funciona así; no creé los atributos desde el producto, sino directamente en el panel propio de atributos, y luego los seleccioné desde el producto, y ahora si funciona.
Gracias.
Me alegra que haya quedado resuelto 🙂
Un saludo.
Hola Enrique, tengo una consulta. ¿Conoces algún plugin que a la vez que vas seleccionando vaya filtrando los siguientes atributos? Me explico; tengo camisetas de tipo «unisex» y «entallado», de unisex tengo de todas las tallas (XS,S,M,L,XL,XXL,XXXL) pero de entallado solo tengo XS, S, M y L. Y después irían los colores que unisex están todos pero de entallado hay unos cuantos menos. La historia es que si tu haces la selección de, por ejemplo, «entallado» al principio, luego puedes seleccionar XXL siendo que esa variable no es posible. Habría algún plugin que al seleccionar «entallado» filtrase directamente y dejase solo para seleccionar las variables posibles? Gracias, un saludo.
Hola Dani.
Gracias por tu consulta. Sí, YITH WooCommerce AJAX Product Filter permite hacer búsquedas con varios filtros aplicados secuencialmente. En este artículo explico cómo hacerlo.
Un saludo.
Gracias por la rápida respuesta; creo que o no me he explicado bien. Me refiero a cuando estás seleccionando el producto, no en un filtro (por ejemplo, puesto en el sidebar donde se filtran todos los productos). Es decir, en el mismo producto cuando vas a seleccionar lo que quieres, que vaya eliminando las opciones que no son posibles. En esta captura de pantalla ********* se ve por ejemplo el fallo que da al no haber variable con esa combinación y la idea sería que al seleccionar al principio «entallado» ya eliminase en tallas las que no hay variable posible y así evitar el mensaje de que no hay posibilidad. Gracias y perdón por el tostón jeje.
Disculpa, no te había entendido 🙂
He visto la captura de pantalla. Algo debe estar mal, porque el plugin en realidad sí se comporta como tú pides, es decir, al elegir un atributo elimina de la selección las variantes de los otros atributos que no están disponibles en combinación con ése y no vuelven a aparecer hasta que limpias la selección. De hecho, acabo de hacer un par de pruebas para confirmarlo y efectivamente funciona bien.
El mal funcionamiento en tu caso puede deberse a la plantilla quizá, o que algún otro plugin esté bloqueando los scripts necesarios para hacerlo (un plugin para mejorar la velocidad, o que retrase la carga de los scripts al footer, por ejemplo).
Un saludo.
Hola Enrique,
Gracias por tu genial artículo. Estoy empezando a montar una tienda. Resulta que tenemos tienda física y hay varios artículos (artículos hechos a mano y que raramente se repiten) que comparten un mismo código. Por ejemplo podemos tener el código TARJETA y 8 o 10 modelos en ese momento. Cuando volvamos a fabricar tarjetas serán diferentes por lo que creo que es absurdo ir haciendo códigos que sólo se utilizarán una vez.
Entonces quiero hacer que el cliente elija el producto y basándose en la imagen seleccione el que hay de los que en ese momento tenemos.
¿Són los productos variables la solución a esto? o hay alguna otra forma más óptima de hacerlo
Gracias de antemano
Buenas Joan. Sin duda, yo lo haría como un único producto variable y sus 8-10 variaciones (cada una por un tipo de tarjeta, con su imagen, etc), pero sólo si las tarjetas son productos más o menos equivalentes (misma finalidad y características generales), para no confundir a los compradores.
Un saludo.
Hola! tengo un shop en el que se venden remeras y en el, es posible seleccionar COLOR y TALLE. Cada COLOR tiene su imagen cargada correspondiente, pero solo cambia la imagen de previsualizacion cuando selecciono el COLOR + TALLE y no, cuando solo selecciono el COLOR como entiendo debería ser… Tienes idea cual puede ser el problema??
Hola Ricardo. Efectivamente, ése es el comportamiento del plugin, es como funciona. Te en cuenta que, hasta que no está seleccionada una variación concreta (dada por ambos atributos), el plugin no puede saber qué imagen le corresponde.
Un saludo.
Buenas noche Enrique.
Estoy creando una tienda online. El producto tiene las siguientes variaciones: tamaño, tipo, color y forro( amarillo, azul, sin forro…), todo puede se combina, pero quiero que los productos sin forro sean mas baratos. ¿Cómo puedo hacer esos cambios dentro de una misma variación, porque sólo me deja poner un precio.
Hola Beatriz
Mira bien, cada variación puede tener su propio precio. Sólo tienes que desplegar la variación (Datos del producto > Variaciones) y ahí tienes todos los datos que puedes ponerle a la variación de forma independiente, entre ellos el precio normal y precio rebajado.
Un saludo.
Hola Enrique, tengo una duda, he intentado poner varias imágenes en un producto con variaciones y solo me permite poner una, ¿hay alguna solución?
Gracias.
Hola Jose
WooCommerce sólo permite una imagen por variación. Hay algunos plugins (premium) que te permiten poner galerías a las variaciones.
Un saludo.
Buenas tardes, me gustaria saber, de que forma puedo hacer para crear una lista desplegable en el producto, en el cual se muestre varias opciones y de acuerdo a la opcion que elegi el cliente aparezca un precio, para añadir al carrito. Por ejemplo el producto puede ser un taxi y crear una lista en la cual colocar 1,2,3,4 y 5, que serian numero de pasajeros, y al elegir una opcion se defina el precio que uno asigne. Le agradezco cualquier informacion
Hola Alexander. Eso es precisamente lo que explica esta entrada.
Un saludo.
Buenas Enrique, muy interesante el articulo, y todo lo que nos enseñas, muchas gracias.
En mi caso en mi web tengo un problema ya que son todo suscripciones variables, pero el caso es que en mi tienda solo aparece un botón que te envía a la ficha del producto, y no la posibilidad de ver las opciones y añadir al carrito desde ahí para que los clientes no tengan que estar entrando y saliendo de cada ficha si ya saben lo que quieren. Como podría hacer eso?
Muchas gracias
Hola Benito
No es fácil lo que pides. Hay algunos códigos para ello en internet, como éste pero…. no funcionan.
Yo he desarrollado el mío propio para utilizarlo en caso necesario pero no lo publicado como plugin porque, por desgracia, existe una limitación: el botón de añadir al carrito en la página de la tienda, una vez elegida la variación (en la propia página de tienda, mediante un desplegable como tú mencionas) recarga la página, en lugar de hacerlo por AJAX. De momento estoy trabajando en mejorarlo.
Un saludo.
Hola, quisiera saber si alguien me puede ayudar, me pasa que al crear un producto variable, le doy click en añadir variación, y solo se queda cargando y no me deja continuar, ya están creados mas de un atributo pero con todos me pasa lo mismo. Agradeceria mucho si me pudieran ayudar
Hola Daniel
Es sin duda una imcompatibilidad con algún otro plugin. De hecho, lo que cuentas es típico que ocurra por culpa de Visual Composer. Si lo tienes instalado, prueba a desactivarlo y a añadir el producto variable.
Un saludo.
Hola, Enrique.
Te quiero agradecer por la respuesta tan pronta, no tengo Visual Composer instalado, pero ensaye desactivando otros pluggins y al desactivar TWP Shortcodes, automáticamente pude crear los productos variables, sin ningún problema.
Posdata, perdón por insistir tanto pero tenia mucho trabajo y no había podido avanzar.
Hola Enrique, tengo un problema con mi tienda resulta que cuando creo un producto variable en mi tienda, selecciono la talla y el color pasa lo siguiente: 1º No actualiza la foto de la variación, 2º Al darle añadir al carrito, me aparece un dialogo que dice «Por» y 3º en la parte donde deberia decir Reset o Resetear dice «Claro» nada de esto me suena de haberle tocado, la pagina esta diseñada con un theme de pago pero estoy escribiendole al soporte y son mas lentos que bueno… prefiero no caer ni en detalles primera vez que me sucede esto la verdad me esta superando un poco por que he analizado la mayoria de los archivos .php que podrian estar ocasionando el problema en la carpeta woocommerce del tema y todo parece estar en orden, tambien probe efectivamente cambiar de theme por un instante y probar y todo funciona normal pero en el momento en que vuelvo a mi theme persiste los fallos mencionados.
Hola Roberto
Prueba a desactivar el resto de plugins, seguramente alguno de ellos esté interfiriendo.
Un saludo.
Hola Enrique ayer tuve un apuro y tuve que desactivar todos los plugins vía FTP aproveche y probe a ver si iban los productos variables, resulta que no hay manera sigue dando problemas al intentar añadir el producto al carro me arroja un dialogo que parece un script pero solo me aparece: «O baul branco dice: Por» y un boton de aceptar pero aun asi no me añade el producto al carro sabras que podria estar ocurriendo :(.
Hola de nuevo Roberto
¿Los desactivaste todos? Muchas veces es el que menos espera uno que sea. En cualquier caso, si fue así, deberías probar a cambiar momentáneamente el theme, para ver si es la causa. Si no lo es, ya habría que empezar a investigar: consola del navegador, logs, etc.
Un saludo.
Edito.- Veo una captura de pantalla que me envías y no se corresponde con lo que me dices. Eso está ocasionado por un plugin de add-ons que tienes activo.
Un saludo.
Buenas tardes, tengo una consulta. Yo vendo agendas para descargar e imprimir. Específicamente una de ellas tiene una variable de color. Yo vendo por pack, 3 colores diferentes a $XX. Mi duda es: Como hago para que en un mismo producto con las variables (y los archivos de todos los colores) se puedan descargar 3 variables diferentes y no solo uno? La alternativa es vender de a 1 color, pero es mas engorroso para el cliente.
Otra opción que se me ocurrió pero no sé implementarla, es que a medida que seleccionen más compras el precio vaya disminuyendo y que luego puedan descargar esa cantidad de archivos.
Ejemplo: Agenda 2018 – Variables: Rojo, verde, negro y azul. Yo compró 1x$10 2x$15 y 3x$12. Una vez que finaliza la compra que me deje descargar esas 3 variables.
Es esto posible? Muchas gracias!
Buenos días Leandro
Tienes dos opciones para ello: o crear un producto agrupado de productos variables (esto no lo soporta WooCommerce por defecto, puedes ver cómo se hace aquí) o bien ofrecer descuentos en función de la cantidad, como explico aquí.
Un saludo,
Hola que tal , buen trabajo con las variaciones por otro lado necesito ayuda. He creado dos variantes una a) para tamaño (pequeño-mediano-grande) y otro b) para el tamaño. Pero he aquí la cuestión , tengo para el pequeño dos modelos, para mediano 5 y para grandes 6 todos son diferentes ninguno es igual. En la pagina salen las dos opciones para tamaño y modelos pero el problema es que en si por ejemplo elijo grandes me salen todos los modelos grandes es decir 6 , pero al volver elegir la opción de tamaño solo me salen grande y es correcto porque por ese modelo ya marcado no existe en pequeño , hay alguna forma de que se actualize el combobox deacuerdo al item seleccioando? Gracias
Hola Enrique! Tengo un problema con las variaciones de productos, el caso es que en algunos navegadores el desplegable se muestra correctamente pero en otros no. No se si puede ser problema de woocommerce, de la versión de wp, de la plantilla….
Te ha ocurrido alguna vez o sabes como solucionarlo?
Muchas gracias!!
Hola Carlos
Una cosa así lo lógico es que sea problema de la plantilla. Cambia momentáneamente a Storefront para comprobarlo y, sin con Storefront se visualiza correctamente, pide soporte a los desarrolladores del theme.
Un saludo
Hola Enrique,
No entiendo la diferencia de página de producto y página de archivo. He creado el atributo con sus variables y me aparece en la tienda el boton de seleccionar opciones, y yo quiero que me aparezca el desplegable, eso como se hace?
Muchas gracias
saludos, he eliminado un aviso que me salia despues de ejecutar Crear variaciones para todos los atributos, ahora no me aparece este dialogo que confirmaba la creacion de todos los atributos y no hace nada el boton ir. sin embargo si agrego uno por uno con agregar variacion si funciona uno a uno. que hacer?
Hola Lenin
Echa un vistazo a esto, puede ayudarte a localizar la causa.
Un saludo