Cómo ocultar productos agotados en WooCommerce

¿Está buscando excelentes formas de personalizar sus páginas de productos de WooCommerce y mejorar la experiencia del usuario? Entonces has venido al lugar correcto. En esta guía, aprenderá diferentes métodos para ocultar productos agotados en WooCommerce.

¿Por qué ocultar productos agotados en WooCommerce?

Si tiene un negocio en línea que vende productos físicos, algunos de sus artículos se venderán de vez en cuando. En estos casos, usted puede:

• Oculte el precio y las existencias del producto de las búsquedas de Google y permita que los compradores accedan a la página del producto incluso si el producto no está disponible
• Muestre el producto ocultando el precio y agregue un botón de "notificarme" que los usuarios pueden seleccionar para recibir una notificación automática cuando el producto esté disponible nuevamente
• Eliminar el botón Agregar al carrito para que los clientes no puedan comprar el producto
• Ocultar esos artículos agotados

Cada una de estas opciones tiene pros y contras. En esta guía, nos centraremos en cómo ocultar los productos que no están disponibles. De manera predeterminada, en WooCommerce, si un producto se queda sin existencias, su página de la tienda mostrará un botón Leer más en lugar del botón clásico Comprar o Agregar al carrito . Además, la opción de comprar el producto agotado se desactivará en la página del producto.

Esto puede ser inconveniente para algunos usuarios, especialmente si vende productos por períodos de tiempo limitados o cambia su inventario con frecuencia. Por lo tanto, si solo desea mostrar productos actualmente disponibles y listos para ser enviados, puede ser una buena idea ocultar temporalmente los artículos no disponibles. Echemos un vistazo a cómo puedes hacer eso en WooCommerce.

Cómo ocultar productos agotados en WooCommerce

Hay dos formas principales de ocultar productos agotados en WooCommerce:

1. Desde la configuración de WooCommerce
2. Programáticamente

Echemos un vistazo más de cerca a ambos métodos.

1) Ocultar productos agotados en la configuración de WooCommerce

La forma más sencilla de ocultar sus productos no disponibles es a través de la configuración de WooCommerce . En su panel de WordPress, vaya a WooCommerce > Configuración > Productos > Inventario. Allí verás una opción llamada Visibilidad de artículos agotados . Simplemente habilítelo y haga clic en Guardar cambios .

Ahora, todos sus productos agotados se ocultarán automáticamente en las siguientes páginas:

• página de la tienda
• Resultados de la búsqueda
• categoria de producto
• Páginas de etiquetas de productos
• Sección de productos relacionados
• Secciones de Upsells y Cross-sell

Si quieres una solución sencilla y quieres ocultar los productos no disponibles en todas esas páginas, esta es una excelente alternativa. Sin embargo, si desea más flexibilidad y le gustaría tener la opción de ocultar sus productos agotados en páginas específicas , deberá usar un poco de código.

2) Ocultar productos de WooCommerce agotados programáticamente

Para ocultar productos agotados en WooCommerce mediante programación, deberá usar ganchos de filtro . Si no está familiarizado con los ganchos, le recomendamos que consulte esta guía para obtener más información sobre ellos y cómo aprovecharlos al máximo.

En este tutorial, le mostraremos algunos scripts que puede agregar directamente a su sitio para ocultar productos agotados.

Antes de que empieces

Como editaremos algunos archivos principales, le recomendamos que haga una copia de seguridad de su sitio. Además, cree un tema secundario o use uno de estos complementos para asegurarse de no perder los cambios la próxima vez que actualice su tema.

Los scripts que le mostraremos hoy deben ir en el archivo functions.php . Para abrir este archivo, en su panel de administración de WordPress , vaya a Apariencia > Editor de temas . Luego, haga clic en el archivo functions.php en la barra lateral derecha para abrir el archivo Funciones del tema.

Simplemente puede pegar los scripts que hemos enumerado a continuación en esta sección.

Ahora, veamos algunos ejemplos para ocultar productos agotados en WooCommerce.

2.1) Cómo ocultar productos agotados en la página de archivo de la tienda

Puede usar la siguiente función con el gancho de filtro woocommerce_product_query_meta_query para ocultar productos agotados en las páginas de archivo de su tienda . Simplemente agregue el siguiente script al archivo functions.php de su tema secundario y actualice el archivo.

 add_filter('woocommerce_product_query_meta_query', 'shop_only_instock_products', 10, 2);
 función shop_only_instock_products( $meta_consulta, $consulta) {
 // Solo en las páginas de archivo de la tienda
 if( is_admin() || is_search() || ! is_shop() ) return $meta_query;

 $meta_consulta[] = matriz(
 'clave' => '_stock_status',
 'valor' => 'agotado',
 'comparar' => '!='
 );
 devolver $meta_consulta;
 } 

2.2) Cómo ocultar productos agotados en la página de inicio

Si desea ocultar sus productos agotados solo desde su página de inicio, puede usar la siguiente función usando el mismo gancho de filtro woocommerce_product_query_meta_query .

 add_filter('woocommerce_product_query_meta_query', 'filter_product_query_meta_query', 10, 2);
 función filtro_producto_consulta_meta_consulta( $meta_consulta, $consulta) {
 // Solo en la página de inicio de woocommerce
 si(es_primera_pagina()){
 // Excluir productos "agotados"
 $meta_consulta[] = matriz(
 'clave' => '_stock_status',
 'valor' => 'agotado',
 'comparar' => '!=',
 );
 }
 devolver $meta_consulta;
 } 

2.3) Cómo ocultar productos agotados en sus páginas de búsqueda

Para ocultar productos no disponibles de todas sus páginas de búsqueda , puede usar la siguiente función que usa el gancho de acción pre_get_posts . Simplemente péguelo en functions.php de su tema hijo y presione el botón Actualizar archivo . De esta forma, si tus clientes buscan alguno de tus productos agotados, no podrán encontrarlo.

 add_action('pre_get_posts', hide_out_of_stock_in_search' );
 función hide_out_of_stock_in_search ($consulta){
 if( $consulta->es_buscar() && $consulta->es_consulta_principal() ) {
 $consulta->set( 'meta_key', '_stock_status' );
 $consulta->set( 'meta_value', 'instock' );
 }
 } 

2.4) Cómo ocultar productos agotados en las secciones de productos relacionados

Si desea asegurarse de que ninguna de sus secciones de productos relacionados muestre sus productos agotados, puede usar este script. De esta forma, tus clientes solo recibirán recomendaciones de productos que puedan comprar de inmediato.

 función hide_out_of_stock_option( $opción){
 devolver 'sí';
 }
 add_action('woocommerce_before_template_part', function( $template_name ) {
 if( $template_name !== "producto-único/relacionado.php" ) {
 regreso;
 }
 add_filter('pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option');
 });
 add_action('woocommerce_after_template_part', function( $template_name ) {
 if( $template_name !== "producto-único/relacionado.php" ) {
 regreso;
 }
 remove_filter('pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option');
 }); 

Si desea aprender cómo eliminar fácilmente la sección de productos relacionados, consulte esta guía.

Cómo eliminar el texto Agotado en un producto específico

Otra alternativa interesante es ocultar el texto de agotado solo de productos específicos usando un poco de CSS . De esta forma, puedes mostrar ciertos productos en tu tienda pero deshabilitar la opción de comprarlos. Esto puede ser útil si está a punto de lanzar un nuevo producto y desea crear un poco de publicidad o cuando agrega una opción para que los usuarios reciban una notificación cuando el artículo esté disponible nuevamente.

Para eliminar el texto de agotado en un producto específico, debe verificar la identificación del producto del artículo que desea ocultar. Para esto, en su panel de administración de WordPress , vaya a Productos y desplace el cursor sobre el producto, y copie la ID del producto debajo del producto específico de WooCommerce. Por ejemplo, en nuestro caso, el ID del producto es 37.

Luego, ve a Apariencia > Personalizar > CSS adicional .

Después de eso, pegue el siguiente código CSS y presione Publicar . Recuerde reemplazar las xx con el número de ID de su publicación.

 .postid-xx .out-of-stock { display: none !important; }

En nuestro caso, para ocultar el texto de agotado en nuestro producto específico con ID de producto 37, usaremos este código:

 .postid-37 .out-of-stock { display: none !important; } 

Además, también puede ocultar el texto agotado de todos sus productos de WooCommerce utilizando este código CSS.

 .woocommerce-page .out-of-stock { pantalla: ninguno !importante; }

Recuerda guardar los cambios para finalizar la personalización y ¡listo!

Bonificación: no mostrar el stock de productos

En lugar de eliminar los productos agotados, también puede decidir si mostrar el stock de sus productos o no. Si vas a WooCommerce > Configuración > Productos > Inventario y navegas hasta Formato de visualización de stock, verás tres opciones:

1. Mostrar siempre la cantidad restante en stock
2. Solo muestra la cantidad restante en stock cuando es baja
3. Nunca mostrar la cantidad restante en stock

Al seleccionar la tercera opción, no mostrará el stock del producto en la página del producto. Sin embargo, esto no se aplica a los productos variables. En las páginas de productos variables, los usuarios verán las etiquetas " En stock " o " Fuera de stock " para la variación que elijan.

La buena noticia es que puede ocultar la etiqueta de stock del producto con un poco de código.

Para eliminar la información de existencias de productos variables, simplemente agregue el siguiente código a su archivo functions.php .

NOTA : Una vez más, cuando edite los archivos principales, recuerde hacer una copia de seguridad de su sitio y crear un tema secundario antes de agregar el fragmento de código.

 // Eliminar la información de stock de la página del producto para productos variables
función quadlayers_remove_stock_data_variable_products ($ datos) {
    unset ($ datos ['disponibilidad_html']);
    devolver $datos;
}
add_filter('woocommerce_disponible_variación', 'quadlayers_remove_stock_data_variable_products', 99);

¡Eso es! De esa manera, puede eliminar la información de existencias de la página del producto para sus productos variables . Para obtener más información, consulta esta página.

Recomendaciones finales

Agregar líneas de código a sus archivos de tema de manera incorrecta puede dañar su sitio, así que antes de comenzar a personalizar, recuerde lo siguiente:

• Genera una copia de seguridad completa de tu sitio
• Utilice siempre un tema secundario para cualquier modificación de código o secuencia de comandos. Consulte nuestra guía si no sabe cómo crear una
• Pruebe sus cambios individualmente para poder identificar cuál causa problemas
• Si está utilizando varios códigos, asegúrese de que funcionen sin problemas en todos los escenarios posibles cuando los combine

Conclusión

En resumen, si solo desea mostrar productos que los compradores pueden comprar en su tienda, ocultar los artículos no disponibles puede ser una buena idea para quienes venden productos físicos.

En esta guía, le mostramos cómo ocultar productos agotados en WooCommerce de dos maneras diferentes:

1. Desde la configuración de WooCommerce
2. Programáticamente

Si desea una solución fácil y desea ocultar productos no disponibles de todas las páginas, hacerlo desde la configuración de WooCommerce es una excelente opción. Es fácil y rápido y cualquiera puede hacerlo. Si desea tener más flexibilidad y ocultar productos solo en ciertas páginas, entonces necesita usar un poco de código. Hay mucho más que puede hacer, por lo que lo alentamos a que tome estos scripts como base y los personalice para aprovechar al máximo su tienda.

Finalmente, hemos visto cómo eliminar el texto de productos agotados de productos específicos usando un poco de CSS .

Háganos saber si tiene alguna pregunta, estaremos encantados de ayudarle.

¿Conoces alguna otra forma de ocultar los precios agotados? ¡Háganos saber en la sección de comentarios!