Si utilizas Woocommerce te habrás dado cuenta que el selector de variaciones deja mucho que desear visualmente.

Es decir, el selector con el que seleccionamos el valor del atributo del producto es muy poco visual. De hecho, si tenemos que seleccionar un valor del atributo color de un producto con Woocommerce no podremos hacer que aparezcan los típicos cuadrados de color para elegir uno de ellos.

Pero no te preocupes, porque hay varios plugins gratis que permitirán mejorar el selector de valores de atributos de productos en Woocommerce. De esta manera podrás elegir el color del producto de una manera mucho más atractiva.

 

APÚNTATE A MI PLATAFORMA DE CURSOS. ACCEDE A TODOS LOS CURSOS POR SOLO 10€/MES

 

VER CURSOS

 

 

 

1.- Selector de variaciones o atributos de producto por defecto Woocommerce

 

Es muy triste tener que elegir el color de un producto en Woocommerce con el selector que viene por defecto, como puedes ver en la siguiente imagen.

 

Selector de colores variaciones de producto woocommerce

Selector de atributos por defecto Woocommerce

 

Para la elección del atributo talla de un producto en Woocommerce no queda tan mal que sea un desplegable, pero si pudiéramos mejorarlo con un plugin mucho mejor.

 

Habrás visto que en la mayoría de tiendas online en las que hay productos en los que hay que seleccionar atributos de tipo color, lo que aparece son cuadrados o círculos de color en vez de un selector tipo desplegable como puedes ver en la siguiente imagen:

 

Selector de color habitual de producto en tienda online

Selector de colores de productos en Prestashop

 

 

2.- Plugin selector de atributos Woocommerce: «Variation swatches for Woocommerce»

 

 

Para instalar el plugin “Variation swatches for woocommerce iremos a “Plugins > Añadir Nuevo” e introduciremos el nombre del plugin en el campo de búsqueda.

 

Instalar plugin selector colores forma circulo woocommerce

Instalar plugin Variation Swatches for woocommerce

 

Haremos clic en el botón de “Instalar ahora” y después en el botón “Activar”.

 

Ahora cuando vayamos a crear un atributo podremos decidir si queremos que el selector de variaciones de ese atributo se muestre de una de estas 3 formas:

a.- Color (Color): si elegimos este tipo el selector de valores en woocommerce estará formado por círculos de colores. Este tipo solo se usa para el atributo color.

b.- Image (Image): Si elegimos este tipo de selector podremos insertar imágenes para cada valor del atributo que se mostrarán en un círculo. Este tipo es muy típico para utilizar con atributos de producto tipo texturas o acabados y para mostrar pequeñas imágenes el producto en diferentes colores.

c.- Label (Etiqueta): Aparecerá un círculo con el nombre del valor del atributo. Muy utilizado para tallas.

 

 

3.- Ejemplo de uso del selector de variaciones de color de producto Woocommerce.

 

Para crear el atributo color cuyas variaciones se muestren con este tipo de selector iremos a “Productos > Atributos”.

A continuación pondremos en el campo “Nombre” el nombre del atributo, que en este caso es “Color”.

En el selector “Tipo” elegiremos “Color” (aquí elegimos el diseño del selector de atributos) y haremos clic en el botón “Añadir atributo”.

 

Crear el atributo color woocommerce con plugin

Crear atributo color con el selector tipo «Color» Woocommerce

 

Una vez creado el atributo haremos clic en el enlace “configurar términos” (valores del atributo) para añadir los diferentes colores.

Iremos añadiendo cada uno de los colores (valores) disponibles para el atributo color rellenando:

  • Nombre: nombre del color
  • Color: haremos clic en el botón “Elige un color” y seleccionaremos un color de la paleta o introduciremos el código html del color.

A continuación haz clic en el botón “Añadir nuevo color” para guardar.

 

Añadir valor del atributo color Woocommerce con cuadrado color

Añadir valor (término) del atributo color con Woocommerce

 

De esta manera iremos añadiendo cada uno de los colores para crear las variaciones del producto.

Ahora habría que crear una serie de variaciones del producto utilizando este atributo color que acabamos de crear

Aquí tienes más info sobre los atributos y características en Woocommerce

Vamos a ver ahora como se visualizar el selector de atributos color al utilizar este plugin en Woocommerce.

Habrás notado que en la mayoría de tiendas el selector de variaciones para el atributo color está formado por cuadraditos de colores. Pues este plugin rompe con esa línea e introduce los diferentes colores del producto en círculos.

 

Elegir el color de un producto woocommerce con circulos de colores