Si estas gestionando el inventario en tu tienda WooCommerce, es posible que quieras que se indiquen los productos que están agotados directamente cuando se muestran en la lista de productos sin tener que entrar a la página de detalle.
Resultado Final
Lo que al final queremos obtener es una etiqueta en la parte superior de la imagen del producto.

Código para mostrar la etiqueta de agotado
Puedes agregar el siguiente código en el archivo functions.php de tu tema hijo o usando algún plugin de snippets.
add_action( 'woocommerce_after_shop_loop_item_title', 'dcms_show_out_stock', 10 );
function dcms_show_out_stock() {
global $product;
if ( $product->managing_stock() && ! $product->is_in_stock() ){
echo '<p class="stock out-of-stock">'.__('Out of stock','woocommerce').'</p>';
}
}
En el código anterior
- Usamose el hook woocommerce_after_shop_loop_item_title que hace referencia a la función dcms_show_out_stock()
- Dentro de la función definimos la variable global de producto que tendrá la referencia al producto actual de la lista
- Parar el producto actual comprobamos si se gestiona el stock y si no se tiene stock
- Si se cumplen estas condiciones entonces imprimimos el mensaje
Código CSS para mejorar el diseño del mensaje
Puedes agregar el siguiente código en el archivo style.css de tu tema hijo o desde Apariencia > Personalizar > CSS
.woocommerce-LoopProduct-link{
position: relative;
}
.woocommerce-LoopProduct-link .out-of-stock{
position: absolute;
background:red;
color:white;
padding:4px 10px;
right: 0;
top:0;
}
Conclusión
Como has podido comprobar, puedes agregar una etiqueta para indicar que el producto no tiene stock, cuando se muestra una lista de productos, de forma simple y directamente a través de código.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Muy buena información! La voy a utilizar para mis clientes que tienen un ecommerce, gracias! Muy recomendado
Gracias mil. Me gustaria saber si me puedes ayudar con un detalle, la función se logró poner y aparece el mensaje de agotado, pero no logro que me funcione el css y pongo tal cual lo señalas, alguna idea? gracias.
Hola, es posible que los estilos CSS de tu tema tengan prioridad, para probar podrías usar la palabra !important en los estilos que agregues, revisa: https://www.w3schools.com/css/css_important.asp