Conecta con nosotros

Ecomemrce

Como crear productos variables con atributos de color en Woocommerce

En este tutorial te voy a explicar Como crear productos variables con atributos de color en Woocommerce

Publicado

en

Como crear productos variables con atributos de color en Woocommerce
Imagen de WPaldia.com

¿Para que sirve crear productos variables con atributos de color en Woocommerce? Bien, seguramente cuando has hecho compras online, por ejemplo en Amazon, te has encontrado que puedes cambiar el color del producto cuando este te lo permite.

Me refiero a esto:

Como crear productos variables con atributos de color en Woocommerce
Como crear productos variables con atributos de color en Woocommerce

Esta función de Woocommerce es posible gracias a los atributos del producto, cuando a los productos de nuestra tienda le agregamos los atributos, como peso, color, tamaño o cualquier especificación técnica, esta se mostrará en la ficha.

Nuestros clientes al tener esta función habilitada en la ficha tienen la libertad de escoger su producto con mayor precisión sin tener que navegar por otras páginas internas de nuestra tienda y eso es una señal positiva de experiencia de usuario, un factor importante que los motores de búsqueda utilizan para clasificar las webs en sus rankings.

Te aconsejo que veas la serie sobre SEO que tenemos en nuestra web.

Como hemos dicho, podemos agregar los atributos que consideremos necesarios, en nuestro caso y para efectos de este artículo lo haremos con los colores, tú en cambio, puedes hacerlo con el peso y los colores y al ver como funciona en tu tienda, pues vienes a nuestra web y nos deja un comentario

Bien, dicho esto, empecemos por subir nuestros productos variables hasta conseguir este resultado:

Como crear productos variables con atributos de color en Woocommerce
Como crear productos variables con atributos de color en Woocommerce

Subir productos variables en Woocommerce con atributos de color

Primero, necesitamos instalar un plugin, ya que de no hacerlo el resultado sería otro, igual tendriamos la clasdificación por atributos pero a nivel estético sería totalmente distinto. Te muestro como queda eliminando el plugin que tenía instalado.

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

La paleta de colores se elimina y en su lugar nos queda una lista desplegable para elegir el color del modelo del producto que queremos. Funciona igual, incluso en la variación del precio, pero a nivel visual no se vé como esperamos.

Como he dicho antes, estos atributos se aplican para cualquier característica del producto, peso, talla, especificaciones técnicas, etc.

Por ello, vamos al repositorio de plugins de WordPress y ponemos esto: Variation Swatches for WooCommerce

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

Una vez instalado y activado, cargamos las imágenes de nuestros productos, no olvides las imágenes que corresponden al color del atributo (en tu caso, si vas usar otro tipo de atributo carga la imagen correpsondiente a ese atributo).

Y le damos a añadir nuevo producto, en esta parte no me voy a detener mucho, porque en este punto ya debes saber cargar productos a tu tienda.

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

Ya tenemos nuestro producto cargado con los siguientes campos completados:

  • Nombre del producto
  • Descripción del producto
  • Descripción corta del producto
  • Categoría y etiqueta del producto
  • Imagen del producto
  • Galeria de imagenes del producto

Ahora nos toca elegir el tipo de producto, como es un producto que ofrece distintos modelos desde la misma ficha de producto debemos marcar que es el Producto Variable.

Como crear productos variables con atributos de color en Woocommerce
Subir productos variables en Woocommerce con atributos de color

Ya en este punto, voy a ir paso por paso, llenando cada uno de los campos.

Cuando cambio a producto variable me muestra uno nuevos campos, que he completado según la información que tengo del producto, como esto es un artículo de ejemplo, los datos que ingreso no son reales, pero tu, como dueño de la tienda si debes tener todos estos detalles que piden, a bien de la estabilidad de tu inventario y de la información que le proveas al cliente.

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

Los otros campos, asociados al peso y método de envío y productos relacionados te lo dejo a ti para que lo completes, pero si aún no lo tienes controlado te aconsejo que veas este artículo donde explico como cargar productos a Woocomerce desde cero.

Configurando los atributos en productos variables en Woocommerce

Como vamos a hacer la variación del producto por color, vamos a elegir el item de color y una vez elegido podemos configurarlo haciendo click en configurar términos..

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

Escribimos el nombre del color y lo seleccionamos de la paleta de colores que te señalo con la flecha, por defecto incluye el color blanco y luego hacemos click en añadir color.

Y asi con cada uno de los colores del producto que tengamos. El resultado final tiene que ser este:

Subir productos variables en Woocommerce con atributos de color
Subir productos variables en Woocommerce con atributos de color

Si te fijas, puedes añadir colores usando el código hexadecimal.

Otro punto importante, como el atributo es global, por eso nos señala la cantidad, y eso se refiere a la cantidad de productos con ese atributo en concreto. Por tanto, puedes reciclar ese mismo atributo para otros productos en caso de que lo compartan.

Ahora volvamos a nuestro producto para aplicar estos atributos que hemos añadido a la tienda.

Aplicando atributos a productos en Woocommerce

Retomamos la ficha dle productos que habiamos creado y hacemos click en la sección de atributos para elegir el atributo de color que recien hemos creado.

Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce

Seleccionamos el atributo, le damos a añadir y luego seleccionamos los atributos que hemos creado.

Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce

En el futuro, cuando tengas más atributos creados, puedes elegir entre ellos, incluso puedes eliminar los atributos señalados, tal y como sumas o eliminas etiquetas de un artículo. Guardamos y vamos a Variaciones.

Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce

En variaciones marcamos las pestañas que nos correspondan. Por ejemplo, yo he usado la de color, que la variaciones sean globales y empiezo a elegir cada uno de los colores de los atributos y los relaciones con una image y con la descripción que correspondan y luego le hacemos click a el botón de IR.

Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce

Una vez completado, tenemos ya todos los atributos asociados a nuestro producto.

Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce

Ya solo queda publicar nuestro producto y verlo.

Aplicando atributos a productos en Woocommerce
Aplicando atributos a productos en Woocommerce

Y con eso ya lo tendríamos. Ahora debes probar los demas atributos o puedes consutar nuestra guía sobre Woocommerce, dónde tambien te explicaremos como usar los demás atributos.

WPaldia.com Blog para el aprendizaje de WordPress, comparativas, reviews y tutoriales de plantillas y plugins para WordPress.

Seguir Leyendo
Click para comentar

Salir y deshacer

Tu dirección de correo electrónico no será publicada.

Publicidad

Categorías

Popular