Cómo crear atributos de color para productos variables WooCommerce 2024

Actualizado el 12 de enero de 2024

¿Quieres darle más opciones a tus clientes a la hora de comprar tus productos en WooCommerce? Una forma de hacerlo es creando atributos de color para productos variables, que te permiten ofrecer diferentes variantes del mismo producto, como por ejemplo camisetas de distintos colores o tallas. En este tutorial te explicaremos cómo crear atributos de color para productos variables WooCommerce paso a paso, y cómo configurarlos correctamente en tu tienda online.

Paso 1: Crear atributo

Primero debes descargar e instalar el plugin WooCommerce Variation Swatches

Cómo crear atributos de color para productos variables WooCommerce 2024 - img_64ce5ae42767f

Al principio, tenemos que crear atributos de color y sus variaciones globalmente. Para crear un atributo de color globalmente, vaya a Productos >> Atributos. Como crearemos un atributo de color para nuestro producto. Rellene el campo de nombre con el nombre de atributo deseado. En este tutorial, he denominado nombre de atributo: Color. 

Puede dejar el campo Slug vacío. Genera automáticamente el slug para el atributo. En el menú desplegable Tipo, seleccione el tipo de atributo Color. Cuando se completen los campos obligatorios, seleccione el botón Agregar atributo.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

Después de crear el atributo, notará que se crea una lista en el lado derecho. Verifique la siguiente captura de pantalla.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

Paso 02: crear variaciones de atributos

Cuantas más variaciones agregue, se agregarán a esta lista. Cuando se crea un atributo, necesitamos crear variaciones de atributo. Para crear variaciones de productos, haga clic en Configurar términos de la lista de atributos.

Cómo crear atributos de color para productos variables WooCommerce 2024 - Como hemos creado un atributo Color. Agregaremos colores como variaciones dentro del atributo Color. En este tutorial, agregaremos variaciones de verde, azul y rojo. Para crear variación dentro del atributo Color. Rellene el campo Nombre con el nombre de variación deseado, deje el campo de slug vacío y seleccione el color deseado del selector de color.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

Paso 03: habilitar la variación de atributos en el producto variable

Es hora de habilitar la muestra de color dentro de un producto variable. Para habilitar la muestra de color en su producto deseado. Ingrese al modo de edición de su producto deseado. Asegúrese de haber seleccionado el producto variable de Datos del producto.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

 

Después de seleccionar el producto Variable del menú desplegable Datos del producto, diríjase a la pestaña Atributos. Haga clic en el menú desplegable Atributo de producto personalizado. En este menú desplegable, puede ver todos sus atributos creados globalmente. Como solo hemos creado un atributo de color, ahora muestra el atributo de color.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

 

Ahora seleccione el atributo Color y haga clic en Agregar. Puede ver que aparecen las siguientes pantallas después.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

Si desea seleccionar todas las variaciones disponibles del atributo de color, haga clic en el botón Seleccionar todo. Si desea anular la selección de todas las variaciones seleccionadas a la vez. Haga clic en Seleccionar ninguno. Botón. Agregue todas las variaciones seleccionando el botón Seleccionar todo, marque Usado para la configuración de variaciones y haga clic en el botón Guardar atributos. Consulte la siguiente captura de pantalla como guía.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

 

Ahora ve a la pestaña Variaciones. Haga clic en el menú desplegable Agregar variación. Aquí notarás dos opciones. El primero es Agregar variación y el segundo es Crear variaciones de todos los atributos. 

Cómo crear atributos de color para productos variables WooCommerce 2024 -

 

En este tutorial, seleccionaré Crear variación de todos los atributos y haré clic en el botón Ir. Agregará todas las variaciones disponibles como la siguiente.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

Puede ver en la imagen de arriba que hay variaciones de color azul, verde y rojo. Desde esta pantalla puede agregar la imagen de la variación, el precio de la variación y otros detalles específicos de la variación. Cuando haya terminado de agregar todos los detalles requeridos en cada variación, haga clic en el botón Guardar cambios.

¡Recordar! No olvide agregar el precio en cada variación; de lo contrario, las variaciones no serán visibles en la interfaz del producto.

Si puede agregar con éxito muestras de variación de color de WooCommerce puede ver la siguiente vista en la interfaz de su producto.

Cómo crear atributos de color para productos variables WooCommerce 2024 -

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *