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

Selector de colores de producto con círculos

 

 

4.- Selector de Variaciones de atributos Woocommerce con etiquetas.

 

Ahora vamos a ver otra manera de mostrar las variaciones de un producto en Woocommerce utilizando este plugin: “Variation swatches for woocommerce”.

Vamos usar el selector de variaciones tipo “etiquetas”.

En el ejemplo vamos a utilizar este tipo de selector de variaciones de producto para mostrar las diferentes tallas del producto.

Para ello iremos otra vez a “Productos > Atributos”, y rellenaremos:

  • Nombre: Aquí pondremos el nombre del atributo. En nuestro ejemplo pondremos “Talla”
  • Tipo: Aquí elegiremos el tipo de selector de atributos del producto. En el ejemplo seleccionaremos “Label” (que se traduce como “Etiqueta”)

 

Creado el atributo, haremos clic en “Configurar términos” para añadir los diferentes valores del atributo “talla”.

Procederemos como en el caso anterior, aunque en este caso añadiendo las diferentes tallas del producto.

Luego añadiremos este atributo y valores al producto.

En la siguiente imagen puedes ver como se aparece el selector de atributos tipo talla en woocommerce con este plugin.

 

elegir talla producto con circulos

Selector de tallas de producto (selector tipo «Label» etiqueta)

 

 

5.- Selector variaciones de atributos tipo texturas o acabados Woocommerce.

 

Vamos a ver ahora el tercer tipo de selector de atributos que permite este plugin para Woocommerce.

Este tipo de selector es denominado por el plugin como tipo  “image” (Imagen) y mostrará una imagen dentro de un círculo.

Este tipo de selector de variaciones es típicamente utilizado para texturas y acabados de productos. También se podría utilizar para mostrar pequeñas imágenes del producto en diferentes colores.

Vamos a ver un ejemplo añadiendo un nuevo atributo que hemos denominado “estampado” con dos valores.

Al crear el atributo “estampado” elegiremos el tipo “image”.

Al añadir los valores del atributo “estampado” subiremos la imagen de la textura de cada tipo de estampado.

 

selector atributos tienda online para texturas, imagenes pequeñas, texturas

Selector de atributos woocommerce tipo image (imagen)

 

El resultado lo puedes ver en la siguiente imagen:

 

selector texturas y acabados woocommerce

Selector variaciones de producto tipo label: para texturas y acabados

 

 

 

6.- Otros plugins para mostrar selectores de variaciones en Woocommerce.

 

Existen tres plugins gratuitos para añadir nuevos selectores de variaciones en Woocommerce:

 

a.- Variation swatches for woocommerce: este es el plugin que hemos visto en este post. Es el más utilizado ya que tiene más de 5000 instalaciones activas en el momento de escribir esta entrada de blog.

Me llamó la atención por mostrar un selector de atributos en forma circular en contra de los tradicionales cuadraditos.

 

b.- Color and image Swatches for variable product Attributes: este plugin muestra los selectores de variaciones de productos en woocommerce con forma de cuadrado.

Tiene más de 2000 instalaciones activas por lo que es bastante menos utilizado que el anterior.

Tiene los mismos tipos de selectores que hemos visto en el otro plugin: selector tipo color, etiqueta e imagen.

Además también tiene un selector tipo icono. Aunque realmente no hace falta, ya que un icono siempre se puede subir con el tipo imagen.

IR AL PLUGIN

 

c.- Woo Variations style buttons: Este es el menos utilizado de todos. Sólo tiene 200 instalaciones activas en el momento de escribir este post.

Lo que me gusta de este plugin es que parece que muestra el selector tipo imagen más grande que los otros. Esto es muy interesante si vamos a usar imágenes de productos en diferentes colores, algo que también he visto en muchas tiendas online, ya que las imágenes se verán lo suficientemente grandes.

IR AL PLUGIN

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO PRESTASHOP (56 Clases)
2.- CURSO WOOCOMMERCE (39 Clases)
3.- CURSO SEO TIENDAS ONLINE (12 Clases)
4.- CURSO PLANTILLA WAREHOUSE (26 Clases)
5.- CURSO PLANTILLA FLATSOME (36 Clases)
6.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
7.- CURSO WORDPRESS (44 Clases)
8.- CURSO DIVI (33 Clases)
9.- CURSO ANALYTICS (10 Clases)
10.- CURSO IMÁGENES WEB (15 Clases)
11.- CURSO SEO GENERAL (19 Clases)
12.- CURSO BLOG WORDPRESS (32 Clases)
13.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribed!