Los productos agotados sin stock no se ocultan del todo en WooCommerce

El plugin de tienda online WooCommerce para WordPress permite que cuando un producto se quede sin stock se oculte en el catálogo que será visible por el cliente. Esto facilita la experiencia a los usuarios mostrando solo los productos que pueden comprarse, sobre todo cuando tenemos una gran cantidad.

La manera de activar esta función es muy sencilla, solo tenemos que entrar en nuestro panel de control, e ir a WooCommerce >> Ajustes >> Productos y luego pulsar la opción que dice ‘Ocultar en el catálogo los artículos agotados ‘.

Sin embargo, puede ocurrirnos una cosa muy curiosa y es que cuando la opción se encuentra activa, los productos agotados se ocultan, pero guardan el espacio donde irían, quedando así un hueco en blanco por cada producto sin stock. Lógicamente esto es catastrófico si tenemos un catálogo extenso.

Yo personalmente no he conseguido averiguar a qué se debe este problema ya que no todo el mundo lo tiene, no sé si es un bug, un problema de compatibilidad de la plantilla o el efecto de la luna sobre las mareas. Pero sí que he dado con un modo de solucionarlo en un hilo de GitHub y que paso a comentar.

La solución que veremos a continuación está probada en WooCommerce 3.x, por lo que supongo que no será compatible con versiones anteriores, así que cuidado. Vamos a nuestro archivo functions.php y añadiremos el siguiente script:

add_action('woocommerce_product_query', 'show_only_instock_products');

function show_only_instock_products($query) {
        $meta_query = $query->get( 'meta_query' );
        $meta_query[] = array(
                'key'       => '_stock_status',
                'compare'   => '=',
                'value'     => 'instock'
        );
        $query->set( 'meta_query', $meta_query );
}

Básicamente lo que hacemos es añadir una función que modifica la consulta principal de productos para imprimir solo los que están etiquetados como que tienen stock. Con esto deberíamos haber resuelto el problema.