Mostrar un selector de variaciones en WooCommerce

Los productos variables en WooCommerce necesitan varios ajustes para que funcionen correctamente. Uno de ellos es mejorar la selección de variaciones en la zona del producto, ya que por defecto podemos ver algo así:

Esto es bastante mejorable, ya que podremos mostrar por ejemplo los colores desde fuera, botones si es solo texto o bien una imagen, como muestro en la siguiente imagen:

Para esto vamos a instalar el mejor plugin gratuito del repositorio de WordPress y lo vamos a configurar paso a paso en este tutorial.

Plugin de selector de variaciones por colores e imágenes

En este caso, vamos a instalar el plugin del repositorio oficial de WordPress Variation Swatches for WooCommerce de Cartflows. Enlace directo aquí. Con ete plugin conseguiremos:

• El selector ahora puede ser de tres formas: botón, color e imagen.
• Poder mostrar el selector en la página de tienda, categorías de producto, etiquetas…
• Diseño totalmente personalizable: ancho, alto, radio del borde…
• Poder tachar las variaciones agotadas.
• Mostrar un mensaje al seleccionar la variación.
• Mostrar o no el título de las variaciones.

Con todo esto se convierte en el plugin más completo para mejorar la visibilidad de las variaciones en WooCommerce.

Configuración del plugin

Para ver la configuración, puedes seguir el tutorial mas abajo en texto o bien el de mi vídeo de YouTube:

Una vez instalado el plugin, nos vamos a la parte de WooCommerce > Variation Swatches. Dentro de este apartado, nos vamos a la parte de Settings:

En la parte de General Settings(ajustes generales), podemos activar las variaciones en la página de productos, en la página de tienda/categorías y autoconvertir todos los selectores de variaciones a botones. Mi recomendación es marcar siempre la primera, la segunda si la vamos a usar.

Tachar variaciones agotadas WooCommerce

En la segunda parte de estilos globales, configuraremos el tamaño y color de los selectores de variaciones, el tooltip, la etiqueta de la variación y como actuar con las variaciones tachadas:

Las podemos tachar, difuminar o bien mostrarlas como siempre.

Mostrar variaciones de producto desde el catálogo

Por último, en la sección de shop page style, podemos cambiar los estilos que se muestran en la tienda/categorías de producto. Todo esto para que enlace bien con nuestro catálogo. Este apartado se mostrará si hemos activado que queremos mostrar el selector de variaciones del producto en la página del catálogo:

Conclusiones

No explico más plugins, porque no hay ninguno mejor personalmente que tenga tantas funciones que funcionen bien y no tengan conflicto con ningún otro plugin o plantilla. Además mencionar una vez más que lo recomiendo para cualquier tienda online con WooCommerce que tenga productos variables.