Mostrar el stock en la lista de productos de WooCommerce

[ 12 noviembre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

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>';
    }
}

Puedes agregar este código al final de tu archivo functions.php de tu tema hijo o usando algún plugin de snippets.

Podrías cambiar el hook para mostrarlo en otra posición dentro de la ficha de producto, revisa esta guia visual de los hooks disponibles.

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.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.