Si gestionas el inventario de tu tienda en línea, es posible que en algún momento te hayas preguntado cómo mostrar stock en WooCommerce dentro de la lista de productos. De forma predeterminada, WooCommerce solo muestra la cantidad de stock dentro de la ficha individual del producto, lo que significa que los clientes deben ingresar a cada artículo para conocer su disponibilidad.
Esta limitación puede generar incertidumbre en los usuarios, ya que no saben si el producto que les interesa está disponible o si quedan pocas unidades. Esto puede llevar a que abandonen la compra o se frustren al descubrir que un artículo que desean ya no está en stock.
Para evitar estos inconvenientes, podemos implementar un método que permita mostrar stock en WooCommerce, incluyendo la página de tienda y categorías. Con esta mejora, los usuarios podrán ver rápidamente cuántas unidades quedan de cada producto o si un artículo está agotado, lo que optimiza la experiencia de compra y puede aumentar las conversiones.
Beneficios de mostrar el stock en la lista de productos
Implementar esta funcionalidad (mostrar stock en WooCommerce) en tu tienda WooCommerce tiene varias ventajas:
- Mayor claridad y transparencia: Los clientes pueden ver de inmediato la disponibilidad de cada producto sin necesidad de hacer clic en él.
- Facilita la toma de decisiones: Al conocer la cantidad de stock disponible, los compradores pueden decidir con mayor rapidez si desean adquirir un producto.
- Genera urgencia en la compra: Si los usuarios ven que quedan pocas unidades de un producto, es más probable que lo compren antes de que se agote.
- Optimiza la experiencia del usuario: Reducir la cantidad de clics necesarios para obtener información clave hace que la navegación en la tienda sea más fluida y eficiente.
Al implementar este método, el resultado final en tu tienda WooCommerce será similar a lo que se muestra en la siguiente imagen:
Código para mostrar stock en WooCommerce (en lista de productos)
Si deseas mostrar stock en WooCommerce dentro de la página de tienda, en las categorías de productos o en cualquier listado donde se muestren productos, puedes hacerlo mediante un pequeño fragmento de código.
De forma predeterminada, WooCommerce solo muestra la cantidad de stock en la ficha del producto, lo que significa que los clientes deben hacer clic en cada producto para conocer su disponibilidad. Sin embargo, con este código, podemos mejorar la experiencia del usuario mediante una funcionalidad que permite mostrar stock en WooCommerce directamente en la lista de productos, brindando información clara y accesible sobre la disponibilidad de cada artículo.
Este método es especialmente útil en tiendas donde la disponibilidad de los productos varía constantemente o en aquellos negocios que manejan inventario limitado y desean generar urgencia en los clientes para que realicen una compra antes de que se agote el stock.
A continuación, te mostramos el código necesario para implementar esta funcionalidad que te permite mostrar stock en WooCommerce:
Código PHP
Añade este código en el archivo functions.php de tu tema hijo o utiliza un plugin de snippets:
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">' . esc_html( $product->get_stock_quantity() ) . ' en stock</div>';
} else {
echo '<div class="out-stock">No hay stock</div>';
}
}
Explicación detallada del código
- Uso del hook
woocommerce_after_shop_loop_item_title: Este hook se ejecuta justo después del título del producto en la lista de productos de WooCommerce (tienda, categorías, etc.). Lo utilizamos para insertar la cantidad de stock disponible en esa posición. - Función
dcms_show_stock_list_products(): Esta función personalizada es la encargada de obtener y mostrar la información de stock de cada producto en la tienda. - Uso de la variable global
$product: WooCommerce gestiona los productos mediante la claseWC_Product. Para acceder a la información del producto en cada iteración del bucle de la tienda, utilizamos la variable global$product, lo que nos permite extraer datos específicos. - Verificación con
is_in_stock(): Esta función de WooCommerce comprueba si el producto tiene unidades disponibles o si está agotado. - Condición para mostrar el stock:
- Si el producto tiene stock (
is_in_stock()devuelvetrue), se muestra la cantidad disponible usando$product->get_stock_quantity(). - Si el producto no tiene stock (
is_in_stock()devuelvefalse), se muestra un mensaje indicando que no hay unidades disponibles.
- Si el producto tiene stock (
Este método (mostrar stock en WooCommerce), permite que los clientes puedan ver rápidamente la disponibilidad de los productos sin necesidad de ingresar a la ficha de cada uno, optimizando la experiencia de compra en la tienda.
Código CSS Opcional
Para mejorar la apariencia, puedes agregar el siguiente CSS en style.css de tu tema hijo:
li.product .stock,
li.product .out-stock {
font-weight: bold;
background-color: yellow;
max-width: 120px;
margin: 10px auto;
color: black;
padding: 5px;
text-align: center;
border-radius: 5px;
}
li.product .out-stock {
background-color: lightcoral;
}
Resumen
Por defecto, WooCommerce solo muestra la cantidad de stock en la página individual de cada producto, lo que obliga a los clientes a hacer clic en cada artículo para verificar su disponibilidad. Sin embargo, con este método, puedes mostrar stock en WooCommerce (en la lista de productos), incluyendo la página de tienda, categorías y cualquier otra sección donde se visualicen productos.
Esta mejora aporta múltiples beneficios a la experiencia del usuario:
- Mayor transparencia: Los clientes pueden ver de inmediato si un producto está disponible o si hay pocas unidades en stock.
- Decisiones de compra más rápidas: Al conocer la cantidad de stock sin necesidad de ingresar a cada ficha de producto, los usuarios pueden tomar decisiones de compra con mayor rapidez.
- Generación de urgencia: Si un producto tiene pocas unidades restantes, los clientes podrían sentirse motivados a comprarlo antes de que se agote.
- Optimización de la navegación: Al reducir la necesidad de hacer clic en cada producto, la navegación en la tienda se vuelve más eficiente y fluida.
En conclusión, implementar esta funcionalidad (mostrar stock en WooCommerce) no solo mejora la usabilidad de la tienda, sino que también puede aumentar las conversiones al proporcionar información clave de manera clara y accesible.
Si estás profundizando tus conocimientos en WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.
