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.

Tachar la variación y que sea clicable

En el caso anterior, la variación quedaba tachada pero no era posible hacer clic, en el caso de tener un plugin de suscripción a los productos como explico aquí. No será posible mostrar el formulario, esto no se puede modificar en ese plugin. Así que en este caso, os dejo un código para poder hacerlo, en este caso, sin tener que instalar el plugin anterior usando el tema de Astra:

/**
 * 1. Marcar cada variación con una propiedad 'agotado'
 */
function marcar_variacion_agotada( $variation_data, $producto, $variation ) {
    // Si la variación no está en stock, se marca como agotada.
    $variation_data['agotado'] = ! $variation->is_in_stock();
    return $variation_data;
}
add_filter( 'woocommerce_available_variation', 'marcar_variacion_agotada', 10, 3 );

/**
 * 2. Script para agregar la clase 'agotado' a los botones de variación
 * que correspondan a una variación sin stock.
 *
 * Se recorre el array de variaciones (almacenado en el formulario) y,
 * para cada variación agotada, se busca el elemento que tenga en su
 * data-slug el valor del atributo (se asume un solo atributo) y se le
 * añade la clase 'agotado'.
 */
function script_variaciones_agotadas() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Obtenemos el formulario de variaciones.
        var $form = $('.variations_form');
        if ( $form.length ) {
            // Se asume que las variaciones están en data-product_variations.
            var variations = $form.data('product_variations');
            if ( variations ) {
                $.each( variations, function( index, variation ) {
                    if ( variation.agotado ) {
                        // Asumiendo un único atributo, obtenemos su valor.
                        var attrValues = Object.values( variation.attributes );
                        if ( attrValues.length ) {
                            var attrValue = attrValues[0];
                            // Selecciona el botón que tenga el data-slug igual al valor del atributo.
                            $('.ast-single-variation[data-slug="' + attrValue + '"]').addClass('agotado');
                        }
                    }
                });
            }
        }
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'script_variaciones_agotadas' );
/**
 * Estilos CSS para mostrar variaciones agotadas con la cruz superpuesta en el centro,
 * usando una cruz más fina.
 */
function estilo_variaciones_agotadas() {
    ?>
    <style type="text/css">
        /* Se asegura que el contenedor permita posicionamiento absoluto */
        .ast-single-variation.agotado {
            position: relative;
            opacity: 0.5;
        }
        /* Cruz en el centro, más fina */
        .ast-single-variation.agotado::before {
            content: "\00D7"; /* Símbolo de multiplicación, generalmente más delgado */
            color: red;
            font-size: 24px; /* Ajusta el tamaño según necesites */
            font-weight: 300; /* Peso ligero para hacerla visualmente más fina */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2; /* Se asegura de que se superponga al contenido */
        }
    </style>
    <?php
}
add_action( 'wp_head', 'estilo_variaciones_agotadas' );

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