Mostrar el stock en la lista de productos de WooCommerce

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

mejoras woocommerce

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.

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

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...