blog webempresa

¿Cómo cambiar el orden de las variaciones en WooCommerce?

por | Abr 28, 2023 | Tutoriales sobre WooCommerce

¿Cómo cambiar el orden de las variaciones en WooCommerce?

Si tenemos un sitio que ofrece tanto productos como planes de suscripción, es posible que hayamos tenido el problema de que las variaciones no se encuentran de forma ordenada. Es por esto que vamos a ver cómo cambiar el orden de las variaciones en WooCommerce para no crear confusión en los visitantes del sitio web.

Un ejemplo de esto puede ser el de una página de servicios, por ejemplo: plan básico, plan pro y plan premium. Si se muestra de forma desorganizada, puede causar confusión en cuál es mejor que el otro. Aunque esto parezca algo sin importancia, puede ser un punto negativo en la experiencia del usuario.

Si necesitamos solucionar este problema, podemos seguir una serie de pasos que vamos a ver en esta guía, los cuales son sencillos de aplicar y no necesitan un plugin para lograrse. Sin embargo, veremos algunos plugins que nos pueden ayudar a mejorar todo.

¿Cuándo cambiar el orden de las variaciones en WooCommerce?

 

Cambiar el orden de las variaciones es un punto en la experiencia de usuario importante para cumplir. En algunas situaciones en las que nuestra tienda WordPress tiene productos variables, como por ejemplo: tamaño, colores, tallas, diseños y más, ordenar las opciones es algo importante. También el hacerlo basándonos en la popularidad de una variación, además de ser útil para evitar confusiones sobre la variante.

Ordenar las opciones de menor a mayor puede ayudar a los clientes a encontrar más rápido una talla que necesitan para su compra. Si tenemos muchos productos en nuestra tienda, resulta útil, no solo puede aplicarse a ropa, esto aplica tanto a productos físicos como a productos virtuales en WooCommerce.

Es importante tener en cuenta cómo puede ver el usuario nuestro sitio. Si bien nosotros lo conocemos porque lo hemos trabajado, los clientes a menudo necesitan algo más sencillo para poder comprar.

Orden incorrecto de variaciones

¿Cómo cambiar el orden de las variaciones en WooCommerce?

 

Si tenemos productos que son variables en nuestra tienda y deseamos cambiar el orden de las variaciones para beneficiar a nuestros clientes, vamos a ver una serie de pasos para poder hacerlo de forma sencilla y sin plugins de por medio.

Organización de los atributos

 

Si ingresamos a WooCommerce, tenemos algunos ajustes que nos permiten trabajar con los valores de los atributos de un producto. Para esto, solo debemos ingresar en el menú de ajustes del mismo.

Productos > Atributos

Una vez dentro, vamos a ver todos los atributos creados en nuestro sitio. Vamos a hacer clic en el botón de editar que se presenta cuando colocamos nuestro mouse sobre cada elemento.

Ingreso a productos, atributos

Una vez dentro de esta opción, tendremos la edición del atributo general. Aquí vamos a ver algunos elementos, pero nos concentraremos en el que indica orden de clasificación por defecto. En este ajuste, podemos seleccionar varias opciones.

Orden personalizado: por lo general, se encuentra de primero. Este nos permite establecer el orden de forma personalizada y, en la mayoría de los casos, esta opción está activa por defecto. por lo que, si la tenemos activa, no debemos hacer ningún cambio.

Nombre: esta opción ordena alfabéticamente los nombres que tengamos en las variaciones.

Nombre (numérico): por lo general se utiliza para organizar los números, ya que, de igual forma a como sería la opción de nombre, esta toma un orden con estos mismos. Es bastante útil cuando nuestra tienda es de zapatos y tenemos una gran cantidad de números para vender.

ID de término: esta opción nos permite organizar las variaciones según el ID, es decir, en el orden en que se agregan a la página.

Orden de talla personalizado

Cuando tengamos establecido el orden que queremos para nuestra web, podemos hacer clic en el botón de actualizar y los cambios se van a guardar en el sitio.

Cambiar el orden de los atributos en WooCommerce

 

Para poder personalizar en nuestro sitio el orden de los atributos WooCommerce que se muestran, como hemos visto en el paso anterior, debemos tener seleccionada la opción de orden personalizado. Una vez tenemos esto, volvemos a ingresar a Productos > Atributos, pero esta vez debemos entrar en configurar términos.

Esta opción la vamos a ver si situamos el mouse sobre los atributos de la variación, del lado derecho. Es aquí donde vamos a continuar con la configuración.

Moviendo las variaciones de un producto

Cuando estemos dentro de la página, vamos a poder ver todos los atributos que hemos creado para las variaciones. No va a tomar mucho tiempo el lograr modificar este orden, ya que el propio WooCommerce cuenta con una herramienta para poder mover a gusto los elementos.

Si situamos el mouse sobre cada opción, vamos a ver cómo se muestra un ícono a la derecha del todo de cada elemento. Este nos permitirá hacer clic y mantener pulsado para mover cada variación.

En este caso, solo tenemos que mover según el orden que queramos sea el que se muestre en nuestro producto. Una vez realizado este ajuste tendríamos los valores de los atributos organizados.

Como NO organizar las variaciones de un producto

 

Una vez completemos el orden de las variaciones de los productos en WooCommerce, es importante conocer dónde no realizar este ajuste. Aunque esto pueda parecer sencillo de comprender, a veces nos encontramos en la situación de cometer el error de editarlo en donde no se va a tomar.

Cuando ingresamos a un producto variable, tanto físico como un producto digital, vamos a ver una pestaña de Variaciones, y en esta tendremos un símbolo similar al que tenemos en los ajustes de los productos.

Como no realizar el cambio de variaciones

Sin embargo, en este caso los iconos que se utilizan para mover el orden no afectan a la visualización final, esto quiere decir que los cambios que hagamos aquí solo se van a ver en el dashboard WordPress. Por lo tanto, este cambio es solo para personalizar el dashboard de WordPress.

Resultados tras reordenar las variaciones de atributos de los productos

 

Una vez tengamos ordenados los atributos de las variaciones podemos ver como se ven en nuestra tienda.

Orden correcto de variaciones

En algunos casos, los productos que no tienen disponibles las variaciones pueden llegar a ser un problema. Sin embargo, esto no sucede con este método, ya que si, por ejemplo, nuestros zapatos poseen tallas desde la 30 a 40 y faltan algunas intermedias, de igual forma se va a ver con el orden que le hemos dado.

Organizar atributos dentro de un producto en WooCommerce

 

En algunas circunstancias, podemos querer ordenar tanto las variaciones como los propios atributos WooCommerce. En caso de que tengamos una tienda con varios atributos, por ejemplo: color, talla, diseño, y queramos cambiar el orden a primero seleccionar el tamaño, luego el diseño, y por último la talla, podemos hacerlo.

Para realizar este ajuste debemos editar el producto ingresando a Datos del producto, este panel lo encontramos dentro de cada producto, luego de esto vamos a entrar en el panel lateral de atributos.

Aquí, a diferencia de lo que no podemos hacer con las variaciones, estos atributos sí que se mueven y se ven en el front de nuestro sitio.

Cambiar el orden de los atributos

Por lo que, para cambiar el orden movemos los espacios que necesitemos para que se vea de primero una opción u otra. Con estos pasos podemos modificar los atributos del producto.

Algunos plugins para mejorar las variaciones

 

A continuación vamos a ver algunos plugins que nos ayudaran a mejorar un poco más las variaciones en cuanto a front como backend en WordPress.

Plugin WPC Variations Radio Buttons for WooCommerce

 

El plugin WPC Variations Radio Buttons for WooCommerce es una herramienta que nos puede ayudar a mostrarte permite mostrar las variantes de tus productos con botones de radio en lugar de menús desplegables, no solo esto sino también alguna otra mejora:

  • Reemplazo de menús desplegables: los menús desplegables tradicionales son reemplazados por botones, lo que mejora la experiencia del usuario.
  • Personalización de etiquetas: podemos personalizar las etiquetas de las opciones de tus productos para que se adapten a tu marca.
  • Fácil instalación y configuración: el plugin es fácil de instalar y configurar, y no se requiere conocimiento técnico avanzado.
  • Integración con WooCommerce: funciona de forma nativa con WooCommerce, lo que garantiza una compatibilidad perfecta.
  • Optimización para dispositivos móviles: el plugin es totalmente responsivo y se adapta a cualquier tamaño de pantalla.
Wpc radio buttons plugin

Plugin Variation Swatches for WooCommerce

 

El plugin Variation Swatches for WooCommerce es una herramienta que nos permite mostrar las variantes de tus productos con imágenes, colores y etiquetas personalizadas en lugar de menús desplegables de siempre, adicional a esto podemos tener:

  • Personalización de variantes: podemos agregar imágenes, colores y etiquetas personalizadas para cada variante de tus productos.
  • Fácil configuración: el plugin es fácil de instalar y configurar, y no se requiere conocimiento técnico avanzado.
  • Compatibilidad con temas: funciona con una amplia variedad de temas de WooCommerce, lo que te permite mantener la apariencia de nuestra tienda.
  • Optimización para dispositivos móviles: el plugin es totalmente responsivo y se adapta a cualquier tamaño de pantalla.
  • Integración con WooCommerce: funciona de forma nativa con WooCommerce, lo que garantiza una compatibilidad perfecta.
  • Mejora la experiencia de usuario: las imágenes y colores personalizados hacen que la selección de variantes sea más visual y fácil de usar para los clientes.
Variations swatches plugin

Plugin Additional Variation Images Gallery for WooCommerce

 

El plugin Additional Variation Images Gallery for WooCommerce es una herramienta que nos permite agregar múltiples imágenes a las variantes de tus productos algo similar a lo que tenemos en los dos anteriores pero con algunos atributos extras:

  • Añade imágenes a las variantes: el plugin nos permite agregar varias imágenes a cada variante de tus productos.
  • Fácil configuración: el plugin es fácil de instalar y configurar, y no se requiere conocimiento técnico avanzado.
  • Integración con WooCommerce: funciona de forma nativa con WooCommerce, lo que garantiza una compatibilidad perfecta.
  • Optimización para dispositivos móviles: el plugin es totalmente responsivo y se adapta a cualquier tamaño de pantalla.
  • Personalización de la galería de imágenes: puedes personalizar la galería de imágenes de los productos para que se adapte a nuestra marca.
  • Mejora la experiencia de usuario: las imágenes adicionales permiten que los clientes puedan ver más detalles de los productos y hacer una elección informada.
Additional variation plugin

  Conclusiones

 

En conclusión, cambiar el orden de las variaciones en WooCommerce es un proceso sencillo que puede ayudar en gran medida a los usuarios que entran a nuestro sitio web, ya sea para comprar o para ver los productos.

Podemos personalizar las opciones de los productos de una forma más visual y adaptarla a nuestra marca con los plugins que hemos visto, lo que puede traducirse en un aumento de ventas por la satisfacción y comodidad que se les da a los clientes.

Es importante que, al momento de elegir el plugin, este sea compatible con la versión de WordPress que estamos utilizando. Siguiendo todos estos pasos, podremos asegurar el tener un sitio web en buen estado.

¿Te ha resultado útil este artículo?

Promo Hosting Octubre