Cómo ocultar productos o variaciones con inventario agotado, sin stock en WooCommerce (actualizado)

WooCommerce es un sistema estupendo para crear tiendas online, pero de base tiene sus carencias, aunque puedas solucionarlas todas fácilmente.

Por ejemplo, si no lo remedias, muestra las variaciones de productos agotadas, o no muestra solo el precio más barato cuando es un producto variable.

¿Qué pasa si quito u oculto todos los productos agotados y variaciones en WooCommerce?

Aunque es una decisión comercial, casi estratégica, en ocasiones un gestor de tienda online querrá ocultar productos con inventario agotado, o variaciones de producto sin stock en su tienda WooCommerce.

¿Por qué digo que es una decisión comercial o estratégica?

Pues porque no siempre es conveniente ocultar productos agotados de la tienda, ya que estos generan una sensación de ansiedad por la compra, de éxito de ventas, que favorece las ventas. Misterios del marketing comercial, pero probados.

Volviendo al tema que nos ocupa, si llegas a la conclusión de que quieres ocultar productos o variaciones de los que ya no tengas existencias es fácil, la solución para ambos casos es la misma.

Ve a tu escritorio de WordPress y desde ahí a WooCommerce > Ajustes > Productos > Inventario, y activa la casilla denominada «Ocultar en el catálogo los artículos agotados».

Guarda los cambios y ya está.

Los productos agotados no se mostrarán en el catálogo de productos de la tienda, pero aún se podrá llegar a ellos desde búsquedas o enlaces externos (de buscadores por ejemplo).

Y, en cuanto a las variaciones, solo se mostrarán aquellas disponibles que tengan existencias, ocultándose las que estén agotadas.

El problema

A pesar de lo dicho anteriormente, en algunas tiendas online te puede hacer perder clientes mostrar en la tienda los productos con el inventario agotado, sin stock.

¿Por qué puede ser un problema? Pues porque le muestras al cliente un producto en la tienda, aparentemente como el resto de productos…

Pero cuando el cliente hace clic para ver, incluso comprar el producto, resulta que no puede hacerlo.

Y es un problema porque has hecho navegar al cliente a una página en la que le has provocado una decepción, una insatisfacción, y las emociones negativas se pagan caras en la compra, no digamos en la compra online.

A no ser que tengas bien estudiada la estrategia, de manera que ofrezcas algún producto alternativo en la misma página del producto agotado, el cliente es muy probable que abandone tu tienda, pensando que pierde el tiempo en tu Ecommerce, que ofreces productos que no tienes, y muy probablemente no volverá si esta fue su primera experiencia en tu tienda online.

La solución

Solucionar este problema pasa, lógicamente, por ocultar los productos cuando su inventario esté agotado, cuando no tengan stock, y que vuelvan a mostrarse cuando haya existencias.

Y la manera de conseguirlo es con un poco de código, que añadiremos a nuestro plugin de personalizaciones, para que no se pierda si cambiamos de tema, este:

/* Ocultar productos agotados */
add_filter( 'woocommerce_product_query_meta_query', 'ayudawp_ocultar_agotados_tienda', 10, 2 );
function ayudawp_ocultar_agotados_tienda( $meta_query, $query ) {
// Solo en páginas de archivo de la tienda
if( is_admin() || is_search() || ! is_shop() ) return $meta_query;
$meta_query[] = array(
'key' => '_stock_status',
'value' => 'outofstock',
'compare' => '!='
);
return $meta_query;
}

Guarda los cambios y el producto dejará de mostrarse en todas las páginas de catálogo de productos, como la página de tienda y el archivo de resultados de búsqueda.

Si quieres que los productos agotados estén ocultos solo en la página de portada, el código sería así:

/* Ocultar productos agotados en portada */
add_filter( 'woocommerce_product_query_meta_query', 'ayudawp_ocultar_agotados_portada', 10, 2 );
function ayudawp_ocultar_agotados_portada( $meta_query, $query ) {
// Solo en la página de inicio
if( is_front_page() ){
$meta_query[] = array(
'key' => '_stock_status',
'value' => 'outofstock',
'compare' => '!=',
);
}
return $meta_query;
}

Otra posibilidad sería que solo quieras ocultar productos agotados en las páginas de búsqueda, en cuyo caso el código será así:

/* Ocultar productos agotados en búsquedas */
add_action( 'pre_get_posts', ayudawp_ocultar_agotados_buscador' );
function ayudawp_ocultar_agotados_buscador( $query ){
if( $query->is_search() && $query->is_main_query() ) {
$query->set( 'meta_key', '_stock_status' );
$query->set( 'meta_value', 'instock' );
}
}

Y, también, puedes incluso ocultar productos agotados en la lista de productos relacionados que se muestra en las páginas de productos individuales, también muy conveniente, para evitar cabreos de los clientes.

El código sería este:

/* Ocultar productos agotados en relacionados */
function ayudawp_ocultar_agotados_relacionados( $option ){
return 'yes';
}
add_action( 'woocommerce_before_template_part', function( $template_name ) {
if( $template_name !== "single-product/related.php" ) {
return;
}
add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'ayudawp_ocultar_agotados_relacionados' );
} );
add_action( 'woocommerce_after_template_part', function( $template_name ) {
if( $template_name !== "single-product/related.php" ) {
return;
}
remove_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'ayudawp_ocultar_agotados_relacionados' );
} );

¡Nada más por hoy! Espero que hayas aprendido algo útil para tu tienda online WooCommerce que evite que enfades a tus clientes por llevarles a productos agotados, cuando no tienes una estrategia para mostrarles otro tipo de productos alternativos.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!