En este tutorial vamos a ver de forma práctica todo lo que se necesita saber para dominar los atributos y los productos variables en WooCommerce. Vamos a verlo con un ejemplo práctico y sencillo, de forma que puedas entenderlo de forma rápida.
Nuestro escenario
Para este tutorial he decidido trabajar con un producto fácil de entender: las camisetas de colores. Si soy capaz de hacer este ejemplo comprensible en este escenario, podrás aplicarlo a cualquier producto que tengas entre manos.
Nuestras camisetas de colores tienen una particularidad. Imagina que nuestra tienda online es de un mayorista y las vende en grandes cantidades. En este sentido podrá dar a elegir al cliente tres variables de cada tipo de camiseta:
- Cantidad, expresada en lotes (pack de 50, de 100, de 200 y de 500)
- Colores
- Embalaje normal o premium
Para mantenerlo suficientemente simple vamos a suponer, por tanto, que las camisetas son de talla única, y de esta forma evitamos crear una cuarta variable.
Cómo establecer y configurar los atributos en WooCommerce
Vamos a empezar trabajando el concepto de «atributo», tal y como se entiende en WooCommerce. Podemos considerar que los atributos son las «características» del producto, expresadas como un conjunto de valores que puede tomar para cada producto.
Por ejemplo, podemos decir que el color es un atributo, ya que una de las características de la camiseta es si esta es azul, roja, verde… Sin embargo también puede ser un atributo la marca de la camiseta, o el tipo de tela, a pesar de que estos datos no afecten en las variaciones del producto.
Los dos tipos de atributos en WooCommerce
Algo que poca gente sabe es que en WooCommerce distinguimos dos tipos de atributos. Están los que podríamos llamar «genéricos» que compartes distintos productos y los creamos dentro del propio WooCommerce, permitiéndonos incluso usarlos para hacer filtros, y por otro lado encontramos los atributos «específicos», que son propios de un único producto y se crean dentro del producto.
En nuestro ejemplo de las camisetas vamos a crear ambos tipos de atributo, con el fin de que veas con un ejemplo práctico cómo y por qué vamos a hacer cada uno de ellos.
Atributos genéricos
Hemos decidido que todas las camisetas tendrán colores, y que la opción de embalaje premium va a ser también similar en todas. En este caso, vamos a crear esos dos atributos (ahora verás paso a paso cómo se hace). En el caso de los colores, para que nos quede más bonito, vamos a usar el plugin gratuito WooCommerce Variation Swatches, que permite que la elección de colores sea más visual, pero esto es opcional.
Creando el atributo «empaquetado premium»
Vamos a empezar por el más sencillo. Ya que se trata de un atributo genérico. Entra dentro de la administración de WordPress, y una vez dentro vamos a Productos > Atributos. Allí tendremos a la derecha la opción para crear atributos nuevos.
Para nuestro caso, queremos que se abra un desplegable con las opciones. En ese caso vamos a rellenar el campo «Nombre» como queremos que aparezca el selector, y en «Tipo» pondremos «Seleccionar» y le damos a «Añadir Atributo».
Una vez lo hemos creado, el atributo nos aparecerá en la parte derecha. Allí vamos ahora a crear las distintas posibilidades que tiene este atributo. Haremos clic en «Configurar Términos».
Entonces se nos va a abrir una nueva página donde vamos a poder añadir términos al atributo. En nuestro caso, como después vamos a hacer una variación para que el cliente elija si quiere embalaje premium o no. Crearemos uno llamado «Si» y otro llamado «No».
Creando el atributo «color»
Volvemos a ir a Productos > Atributos. Una vez allí crearemos un atributo y le damos tipo «color».
Una vez creado, le daremos a «Configurar Términos»
Vamos a crear cuatro colores: Amarillo, Verde, Azul y Rojo. El sistema es similar que antes, lo que aquí gracias al plugin que te comentaba al principio de este post, podemos también elegir un color.
Atributos específicos
Se trata de aquellos que sólo tiene un determinado producto. Los vamos a configurar dentro de la página de producto a continuación, así que no hay mucho que decir por ahora sobre ellos.
Incorporando los atributos al producto y creando los atributos específicos.
Vamos a ver ahora la parte de configuración de los atributos dentro del producto. Para ello, debemos entrar a crear o editar un producto. Una vez dentro buscamos la caja de configuración del producto de WooCommerce, que tiene esta pinta:
Una vez localizado, vamos a la pestaña «Atributos» para añadir los atributos que tenemos globales y el atributo específico.
Añadiendo atributos globales al producto
Los más fáciles de añadir son los que ya tenemos creados un poco más arriba, así que empecemos por eso. Simplemente habrá que elegirlos en el desplegable y darle a «Añadir». Lo haremos con ambos.
Una vez los hemos añadido, bastará con hacer clic en el recuadro en blanco e ir eligiendo los campos que queremos añadir a este producto. En mi caso voy a añadir solo dos de los cuatro colores que habíamos creado. Además añadiré los valores de «Si» y «No» al empaquetado premium. Desde aquí también podríamos escribir un valor nuevo que no tuviésemos hecho de antes, en ese caso no olvides darle a «Guardar Atributos».
Creando atributos de manera específica para este producto
Ha llegado el momento de hablar de los atributos específicos. Vamos a crear unos para los packs de cantidades. En nuestro ejemplo tendremos la camiseta suelta, el pack de 50 y el de 100. Si el cliente quiere, por ejemplo, 200 debería comprar dos packs de 100. La ventaja de los «packs» que vamos a crear mediante atributos es que van a tener un precio rebajado.
Precisamente la razón por la que en este hipotético escenario voy a hacerlo de manera local en este producto es que el precio unitario supuestamente cambiaría de un modelo a otro de camiseta en la tienda. Por tanto quedaría algo tipo «Pack de 50 camisetas, a X precio cada una». Vamos a suponer entonces que la camiseta suelta vale 10€, las camisetas del pack de 50 valen 8€/ud y las del pack de 100 valen 6€/ud.
Para hacer esto, elegimos en el desplegable la opción de «Añadir Atributo personalizado»
Ahora le pondremos un nombre, por ejemplo «descuento por cantidad», y en el recuadro grande separamos las distintas opciones con la barra vertical que es la alternativa gráfica de 1, es decir, este símbolo: | Quedaría así:
Convertir el producto en variable y usar los atributos para las variaciones
Vamos ahora de lleno con la siguiente fase de nuestro producto, la conversión en producto variable y la creación y edición de las distintas variaciones. ¡Ya casi lo tenemos!
Cómo convertir un producto en variable en WooCommerce
En WooCommerce existen distintos tipos de producto. Por defecto los productos se crean como productos «Simples», esto es, productos que solamente tienen una única versión. El producto es tal cual es, y el cliente lo compra o no lo compra. Sin embargo, muchas veces (como en nuestro ejemplo) debemos dar la opción al cliente de elegir distintas versiones del producto. Por ejemplo, de qué color lo quiere.
Para crear esas distintas «versiones» nos apoyamos en algunos de los atributos del producto. En nuestro caso vamos a hacer combinaciones de los tres atributos que hemos creado, y cada combinación va a tener su precio y sus parámetros. ¡Pero no adelantemos acontecimientos! Vamos primero a hacer que nuestro producto sea variable. Para ello desplegaremos la pestaña superior y seleccionaremos «producto variable», así de sencillo.
Elegir qué atributos definirán las variaciones
El siguiente paso va a ser elegir qué atributos van a condicionar nuestras variaciones. Para ello, en la pestaña «atributos» marcaremos las casillas de «usado para variaciones» que acaban de aparecer, y le datos a «guardar». Lo haremos con los tres atributos en nuestro caso, pero puede darse el escenario que que queramos que el producto tenga algún atributo para usar en filtros o en la propia ficha (por ejemplo, la marca) que no condicione las variaciones porque solo tiene una marca.
¡No te olvides de darle a «Guardar Atributos» Si no no funcionará.
Crear las variaciones
Ya está todo listo para irnos a la pestaña «Variaciones». Una vez allí abrimos el desplegable y elegimos «Crear variaciones para todos los atributos». Una vez hecho esto hacemos clic en «Ir» y comenzará a crear automáticamente todas las combinaciones. Se podría hacer a mano… pero esto es más rápido. Tiene un tope de 50 combinaciones, así que si son más de esta cantidad deberás darle a «ir» varias veces hasta que las tengas todas (no te preocupes, no te las repetirá).
Editar las variaciones
En nuestro caso tenemos 12 variaciones. Vamos a suponer que los dos colores afectan a la elección del usuario pero no al precio. En cambio el embalaje premium valdrá 0.50€ más por unidad. Nos quedaría algo así:
| Embalaje Premium | Color | Cantidad | Precio final |
|---|---|---|---|
| No | Amarillo | 1 | 1*10= 10€ |
| No | Amarillo | 50 | 50*8=400€ |
| No | Amarillo | 100 | 100*6=600€ |
| No | Verde | 1 | 1*10= 10€ |
| No | Verde | 50 | 50*8=400€ |
| No | Verde | 100 | 100*6=600€ |
| Si | Amarillo | 1 | 1*10+0.50= 10,50€ |
| Si | Amarillo | 50 | (50*8)+(0.50*50)= 425€ |
| Si | Amarillo | 100 | (100*6)+(0.50*100)=650€ |
| Si | Verde | 1 | 1*10+0.50= 10,50€ |
| Si | Verde | 50 | (50*8)+(0.50*50)= 425€ |
| Si | Verde | 100 | (100*6)+(0.50*100)=650€ |
Ahora simplemente hay que ir editando cada variación para ponerle su precio. Para ello haremos clic en la variación, de forma que se abrirá, y rellenaremos los datos. Nota que puedes poner su propia foto, medias, stock… es muy versátil. En nuestro ejemplo solo lo usaremos para ponerle precios.
Una vez lo tengas, le das al botón de «Guardar los cambios» y después publicas el producto. Ten en cuenta que esta configuración nos permite hacer que, por ejemplo, las verdes fuesen más baratas que las amarillas (por ejemplo, para reducir stock). También fíjate que en nuestro ejemplo he puedo el precio promocional como precio «normal» de la variación, pero a nivel de márketing quizás te interesa poner este precio como precio promocional, de forma que sea más visible el ahorro. Las posibilidades son infinitas, simplemente estoy tratando de mantener el ejemplo lo más sencillo posible.
El resultado
Quedaría algo así:
Y, de repente, si seleccionamos una de ellas, nos da el precio:
