WooCommerce: Cómo ocultar productos con inventario agotado, sin stock

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.

Índice de contenidos

El problema

Uno de los errores de WooCommerce, a mi juicio, que te pueden hacer perder clientes, es mostrar en la tienda los productos con el inventario agotado, sin stock.

¿Por qué es 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.

(6 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

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

Sobre el autor

3 comentarios en “WooCommerce: Cómo ocultar productos con inventario agotado, sin stock”

  1. Gracias Fernando. En ocasiones sería interesante mostrar un indicativo de «producto agotado» en lugar de ocultarlo. En tiendas online transaccionales, donde los usuarios entran ocasionalmente, si no ven un producto es como si no existiera. ¿Cómo lo ves?

  2. Hola Fernando, muchas gracias por el aporte.
    Si no me equivoco creo que estos códigos no están contemplado para el caso de que sean páginas de categorias o de etiquetas, ¿cierto?
    ¿Habría alguna manera de quitarlo de toda la web?
    Muchas gracias de antemano
    Un abrazo
    LCa

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido