Cómo ocultar productos agotados solo en las sugerencias de WooCommerce

Si tienes una tienda online con WooCommerce, seguro que te has encontrado con este dilema más de una vez. Configuras con todo el cariño tus productos relacionados, tus ventas dirigidas («up-sells») y tus ventas cruzadas («cross-sells») para aumentar el carrito medio… y de repente, ¡zas!, WooCommerce se pone a sugerir productos que están agotados.

¿El resultado? Una experiencia un poco regulera para tu cliente, que hace clic en algo que le interesa solo para descubrir que no puede comprarlo. Es como enseñarle un caramelo a un niño y luego quitárselo. No mola.

Vamos a ponerle remedio de una forma sencilla y elegante. ¡Vamos al lío!

¿Por qué no vale la opción por defecto de WooCommerce?

Seguramente has pensado: «Jose Ramón, pero si WooCommerce tiene una opción para esto». Y tienes razón.

Si vas a WooCommerce > Ajustes > Productos > Inventario, encontrarás la casilla «Ocultar en el catálogo los productos sin existencias».

El problema de esta opción es que es un todo o nada. Si la marcas, los productos agotados desaparecen de todas partes: de las páginas de categoría, de los resultados de búsqueda y, por supuesto, de las sugerencias.

Pero, ¿y si a ti te interesa que ese producto siga accesible? A lo mejor quieres que la gente pueda apuntarse a una lista de espera, ver sus características o simplemente mantener la URL activa por temas de SEO.

En ese caso, la opción por defecto no te sirve. Necesitas algo más preciso, un bisturí en lugar de un martillo.

La solución: un snippet de código a medida

La forma más limpia y profesional de conseguir esto es con un pequeño fragmento de código, lo que en el mundillo llamamos un snippet. No te asustes, que no tienes que programar nada. Es solo un copiar y pegar.

Este código se engancha a las funciones de WooCommerce que muestran los productos relacionados, las ventas dirigidas y las ventas cruzadas, y les añade una simple condición: «Oye, de esta lista que vas a mostrar, tráeme solo los que tengan stock, ¿vale?».

El código que lo hace posible

Aquí tienes el código. Como ves, es cortito y va directo al grano.

/**
 * Oculta productos agotados en las secciones de productos sugeridos de WooCommerce
 * (relacionados, up-sells y cross-sells).
 */
function jrb_ocultar_agotados_en_sugeridos( $args ) {
    
    // Añadimos una 'meta_query' para filtrar por el estado del stock.
    // Esto asegura que solo se obtengan productos cuyo '_stock_status' sea 'instock'.
    $args['meta_query'] = array_merge( 
        isset( $args['meta_query'] ) ? $args['meta_query'] : array(), 
        array(
            array(
                'key'     => '_stock_status',
                'value'   => 'instock',
                'compare' => '=',
            )
        )
    );

    return $args;
}

// Aplicamos la misma función a los tres filtros de WooCommerce.
add_filter( 'woocommerce_related_products_args', 'jrb_ocultar_agotados_en_sugeridos', 10, 1 );
add_filter( 'woocommerce_upsell_display_args', 'jrb_ocultar_agotados_en_sugeridos', 10, 1 );
add_filter( 'woocommerce_cross_sells_args', 'jrb_ocultar_agotados_en_sugeridos', 10, 1 );
Lenguaje del código: PHP (php)

Cómo añadir este código a tu web (sin liarla parda)

Para que este código funcione, tienes que añadirlo a tu web. Hay dos maneras de hacerlo, una súper fácil y otra un poco más técnica. ¡Elige la que prefieras!

Método 1: Usando un plugin gestor de código (la vía fácil y segura)

Esta es mi recomendación si no te sientes muy a gusto tocando los archivos de tu tema. Usar un plugin para gestionar fragmentos de código (o snippets) es más seguro, fácil de organizar y te evita problemas con las actualizaciones.

Hay varios plugins geniales para esto, pero dos de los más populares y recomendables son Code Snippets y Advanced Scripts. El funcionamiento en ambos es muy similar.

1. Instala y activa el plugin: Ve a Plugins > Añadir nuevo, busca el gestor de tu elección (como "Code Snippets" o "Advanced Scripts") e instálalo.
2. Crea un nuevo script o snippet: Busca la opción en el menú de WordPress para añadir un nuevo fragmento de código.
3. Configura y pega el código: Dale un título para reconocerlo (ej. "Ocultar productos agotados en sugeridos"), pega el código que te he dado y asegúrate de configurarlo para que se ejecute en el front-end de tu web (que es lo habitual). Finalmente, guárdalo y actívalo.

¡Ya está! No tienes que hacer nada más.

Método 2: En el archivo functions.php de tu tema hijo (para gente más pro)

Si ya usas un tema hijo (¡y deberías!), puedes añadir el código directamente en su archivo functions.php.

Ojo al dato: Nunca, NUNCA, modifiques el archivo functions.php de tu tema principal. Perderías los cambios con la siguiente actualización. Y siempre, SIEMPRE, haz una copia de seguridad antes de tocar código.

1. Ve a Apariencia > Editor de archivos de temas.
2. Asegúrate de que estás editando tu tema hijo.
3. Busca y haz clic en el archivo functions.php.
4. Desplázate hasta el final del archivo y pega el código.
5. Haz clic en «Actualizar archivo».

¡Y listo! Sugerencias que de verdad venden

Con este pequeño ajuste, tus secciones de productos sugeridos se volverán mucho más inteligentes y efectivas. Solo mostrarás artículos que tus clientes pueden añadir al carrito en ese mismo instante, mejorando su experiencia y evitando posibles fugas en tu embudo de ventas.

Un pequeño cambio que marca una gran diferencia. ¡Un auténtico puntazo para tu tienda online!

Espero que esta solución te sea de ayuda. Si tienes cualquier duda o conoces algún otro truquito para mejorar WooCommerce o necesitas ayuda, dame un toque.