• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Mostrar el stock en la lista de productos de WooCommerce

Mostrar el stock en la lista de productos de WooCommerce

Mostrar el stock en la lista de productos de WooCommerce

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

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Mostrar stock lista productos resultado final

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Etiqueta de Agotado en lista de productos WooCommerce sin pluginsEtiqueta de Agotado en lista de productos WooCommerce sin plugins
  • Mostrar la descripción corta del producto en la página de tienda de WooCommerceMostrar la descripción corta del producto en la página de tienda de WooCommerce
  • agregar Tabs personalizados en WooCommerceAgregar Tabs personalizados en WooCommerce sin plugins
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Cuadrod Decorativos

    13 diciembre, 2020

    excelente!!

    • Jhon Marreros Guzmán

      14 diciembre, 2020

      gracias 🙂

  2. Hugo

    5 marzo, 2021

    Muchas Gracias Bro nuevo sub en tu canal de YouTube

    • Jhon Marreros Guzmán

      8 marzo, 2021

      De nada 🙂

  3. Xavier

    31 marzo, 2021

    Felicidades por tu blog, Jhon!

    Nos puedes indicar cómo podemos mostrar sólo el mensaje “no hay stock”, por favor.

    Gracias por adelantado! 🙂

  4. jhon

    15 mayo, 2021

    excelente hermano, gracias por compartir

  5. Robert Cisterna

    20 enero, 2023

    Buena!, pero ¿es posible agregar la “cantidad” de productos en stock?

    • Jhon Marreros Guzmán

      25 enero, 2023

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Página estática y entradas recientes en el inicio de WordPress

Cómo usar la cache de objetos en WordPress

Agregar código a tu sitio sin usar functions.php

Copiar al portapapeles en WordPress sin plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados