Si tienes configurado el stock de productos en tu tienda , es posible que te hayas preguntado ¿cómo mostrar el valor del stock o el estado del stock en la lista de productos?, ya que por defecto esta funcionalidad no esta incluida por defecto.
Resultado Final
Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:
Generalidades
En un artículo anterior habíamos visto cómo mostrar la descripción en la lista de productos, sin embargo usando un procedimiento similar, a través de código, podemos mostrar el stock.
Código para mostrar el stock en la lista de productos
Con este código se mostrará el stock en la página de tienda, página de categoría de productos, o cualquier sección que muestre una lista de productos.
add_action( 'woocommerce_after_shop_loop_item_title', 'dcms_show_stock_list_products' );
function dcms_show_stock_list_products() {
global $product;
if ( $product->is_in_stock() ) {
echo '<div class="stock" >' . $product->get_stock_quantity() . ' en stock</div>';
} else {
echo '<div class="out-stock" >No hay stock</div>';
}
}
En el código anterior:
- Usamos el hook woocommerce_after_shop_loop_item_title que hace referencia a la función dcms_show_stock_list_products
- Dentro de esta función definimos la variable global de producto
- Usamos el método is_in_stock() para saber si un producto esta o no en stock
- De acuerdo a la condición mostramos un mensaje de stock o fuera de stock
Código CSS Complementario
Este es un código opcional que puedes agregarlo al archivo style.css de tu tema hijo
li.product .out-stock,
li.product .stock {
font-weight: bold;
background-color: yellow;
max-width: 120px;
margin: 10px auto;
color: black;
}
li.product .out-stock {
background-color: lightcoral;
}
Conclusión
Usualmente se muestra el stock en el detalle de producto, sin embargo, como hemos visto, podemos mostrar el stock de un producto incluso en la lista de productos de manera simple a través de código.
Ver comentarios (10)
excelente!!
gracias :)
Muchas Gracias Bro nuevo sub en tu canal de YouTube
De nada :)
Felicidades por tu blog, Jhon!
Nos puedes indicar cómo podemos mostrar sólo el mensaje “no hay stock”, por favor.
Gracias por adelantado! :)
excelente hermano, gracias por compartir
Buena!, pero ¿es posible agregar la "cantidad" de productos en stock?
Hola, si son productos variables se complica, pero para productos simples si, de hecho el código agrega también la cantidad para productos simples.
Hola,
He estado probando este código y solo funciona con productos simples , ¿como sería para productos variables?
Gracias
En el caso de productos variables es más complejo, evaluare hacer un articulo sobre esto.