Cuando trabajas con una tienda online en WordPress, lo normal es que quieras mostrar solo los productos que realmente se pueden comprar. Para eso, WooCommerce ofrece una opción muy práctica que es ocultar automáticamente los productos que se quedan sin stock del catálogo visible para los clientes.
En teoría, esta funcionalidad mejora bastante la experiencia de usuario, sobre todo cuando el catálogo es grande. El cliente ve únicamente productos disponibles y no pierde tiempo entrando en fichas que no puede comprar. Hasta aquí, todo tiene sentido.
El problema aparece cuando, aun activando esta opción, los productos agotados desaparecen pero dejan su hueco en el listado. El resultado es un catálogo con espacios en blanco, visualmente roto y poco profesional. Si el número de productos sin stock es alto, el efecto puede ser bastante desastroso.
Y en este punto es donde uno empieza a arrugar el morro, porque desde el backend la opción está activa y efectivamente los productos desaparecen, pero ¿por qué se reservan sus espacios?
Por qué a veces aparecen huecos en el catálogo
WooCommerce permite ocultar los productos agotados desde sus propios ajustes. Para activarlo basta con ir al panel de administración y acceder a WooCommerce >> Ajustes >> Productos. Ahí encontramos la opción «Ocultar en el catálogo los artículos agotados».
Cuando está marcada, se evita que esos productos se muestren en el catálogo, categorías y resultados normales.
En la mayoría de instalaciones estándar esto funciona correctamente. Los productos sin stock simplemente no aparecen y el catálogo se reordena sin dejar rastro. El problema es que no siempre estamos ante una instalación estándar.
Cuando los productos se ocultan pero el espacio se mantiene, normalmente no es WooCommerce el culpable directo, sino la forma en la que se está construyendo el catálogo.
Trabajando en tiendas online como desarrollador WooCommerce, este comportamiento lo he visto sobre todo en tres escenarios muy concretos que se repiten:
- Temas personalizados o muy visuales, donde el diseño del catálogo no recalcula bien la cuadrícula (o grid) cuando falta un elemento.
- Loops de productos modificados mediante código, shortcodes o bloques personalizados. Esto es bastante habitual porque el bucle habitual de consulta está adulterado.
- Filtros o plugins que cambian la consulta original de productos antes de que WooCommerce aplique sus propias reglas. Pasa lo mismo que en caso anterior.
En estos casos, el producto desaparece a nivel lógico, pero el contenedor visual sigue reservando su espacio. De ahí esos huecos en blanco tan molestos en la maqueta.
Forzar la consulta para mostrar solo productos con stock
Antes de tocar código, conviene identificar bien dónde está realmente el fallo. Porque si aplicas un parche para solucionar un problema que está en otro sitio, puedes terminar generando otro problema.
Si el problema es puramente visual (el producto no existe en la consulta, pero el diseño no se reajusta), la solución suele estar en el tema o en la maquetación del catálogo. Primero trata de ajustar el CSS o revisar cómo se construye el grid, con un par de nuevas clases bien afinadas puede ser suficiente.
Cuando el problema está en la consulta de productos (es decir, los productos agotados siguen entrando en el listado y luego se ocultan), entonces sí tiene sentido actuar a nivel de query.
Una forma efectiva de evitar este problema es asegurarnos de que la consulta principal de productos solo devuelva artículos con stock disponible, en lugar de ocultarlos después.
Para ello podemos modificar la consulta de productos desde código, añadiendo una función en el archivo functions.php del tema:
add_action('woocommerce_product_query', 'mostrar_solo_productos_con_stock');
function mostrar_solo_productos_con_stock($consulta) {
if (is_admin() || ! $consulta->is_main_query()) {
return;
}
$meta_query = $consulta->get('meta_query');
$meta_query[] = array(
'key' => '_stock_status',
'value' => 'instock',
'compare' => '='
);
$consulta->set('meta_query', $meta_query);
}Lo que hace este código es bastante simple: modifica la consulta principal de productos para que solo se devuelvan aquellos cuyo estado de stock sea «instock». De este modo, los productos agotados ni siquiera llegan a formar parte del listado, y el catálogo se muestra sin huecos ni espacios vacíos.
Además limitamos el ámbito de acción de la función con ese condicional al comienzo, de modo que no se ejecute en la consulta principal de productos cuando estamos en el frontend.
Cuándo tiene sentido tocar código (y cuándo no)
La solución anterior funciona y sigue siendo válida hoy, pero no debería aplicarse a ciegas. Así que no te líes la manta a la cabeza sin haberle dedicado el tiempo suficiente a analizar la situación.
Modificar la consulta de productos afecta a cómo WooCommerce obtiene los datos, y si no se hace con cuidado puede tener efectos secundarios en otros listados, widgets o bloques. Por eso es importante limitar el cambio a la consulta principal y evitar aplicarlo en el panel de administración.
En muchas tiendas actuales, especialmente las más sencillas, WooCommerce gestiona correctamente los productos sin stock sin necesidad de añadir nada. Si aparecen huecos, lo más habitual es que el problema esté en el tema o en una personalización concreta del catálogo.
En tiendas más complejas o desarrolladas a medida, este tipo de ajustes siguen siendo habituales y forman parte del día a día del desarrollo de tiendas online. Bien aplicados, evitan comportamientos extraños y mejoran tanto la experiencia de usuario como el mantenimiento del proyecto.
Si necesitas ayuda profesional para revisar este tipo de detalles en una tienda, es justo el tipo de cosas que suelo analizar cuando trabajo como desarrollador WooCommerce freelance. La resolución de este tipo de pequeños problemas técnicos que no siempre se ven a simple vista, marcan la diferencia en una tienda bien hecha y mejoran la experiencia de usuario.
Responder a Edgar Romero Cancelar la respuesta