Ocultar o tachar las variaciones agotadas en WooCommerce

Elegir la talla que quieres de esa prenda, el color del producto o los KW de esa batería son acciones habituales que hacen los clientes en una tienda online. La pega es que muchas veces no tenemos disponible todas las variaciones del producto, el cliente la marca porque sale activa y… ¡Agotada!

A veces esto no sienta muy mal al cliente, te encanta una camiseta, entras a verla, seleccionas tu talla y no hay. Es por eso que en este tutorial vamos a aprender cómo avisar al cliente desde antes que no existe esa variación o bien mostrarle desde un primer momento que no está disponible.

Ocultar los productos agotados en WooCommerce

La vía más rápida y sencilla sería ocultar todos los productos agotados de nuestro WooCommerce, esto se puede hacer desde WooCommerce > Ajustes > Productos > Inventario y marcamos la casilla de ocultar en el catálogo los productos agotados:

El problema de esta opción es que no recomiendo en lo general ocultar los productos, ya que perdemos SEO y se pueden hacer otras estrategias de captación como explicaba aquí.

Así que vamos a ver otras opciones sin tener que hacer esto.

Ocultar las variaciones agotadas(Código)

Si queremos no mostrar las variaciones en el producto que están agotadas, añadiremos el siguiente código al functions.php de nuestro child theme o a nuestro plugin de funcionalidades como explico aquí:

function dl_variation_is_active( $active, $variation ) {
	if( ! $variation->is_in_stock() ) {
		return false;
	}

	return $active;
}

add_filter( 'woocommerce_variation_is_active', 'dl_variation_is_active', 10, 2 );

Esta es la forma más sencilla, cuando la variación esté agotada no se mostrará. Igualmente tampoco me gusta mucho la idea de no mostrarla, ya que quiero decirle al cliente que la tengo, pero no ahora. Así que…

Tachar o difuminar las variaciones agotadas(Plugin)

Lo ideal para mi es marcarla como difuminada o bien tachada, para indicar que la tuvimos disponible y la pueda reservar cuando volvamos a tener inventario por ejemplo. Para esto vamos a usar el mítico plugin Variation Swatches for WooCommerce disponible en el repositorio oficial de WordPress o desde este enlace.

Normalmente se utiliza para quitar el desplegable de variaciones y verlas desde fuera para ahorrar un clic al cliente(muy útil y recomendado). Pero hoy estamos para aprender a cómo mostrar visualmente que está sin stock.

Para esto nos vamos a los ajustes del plugin > Avanzado y en comportamiento del atributo marcamos desenfoque con cruz o sin cruz:

Esto solo funcionará con la versión premium o bien si lo quieres hacer con la free tienes que marcar la opción de ocultar los productos agotados en los ajustes generales de WooCommerce para que funcione. Obteniendo el siguiente resultado:

En el apartado de variaciones también podemos trabajar el botón de limpiar, te lo explico en este tutorial.

Si queréis saber más personalizaciones de productos agotados en este post os explico como ponerlos al final de forma automática en el catálogo. Cualquier duda como siempre os leo en comentarios