Cuando tienes una tienda en línea creada con WooCommerce, es importante que los clientes sepan cuándo un producto no está disponible. Una de las formas más efectivas de hacer esto es mostrando un aviso de «Agotado» directamente en los listados de productos. Aunque existen muchos plugins que pueden agregar esta funcionalidad, hacerlo de manera manual y sin depender de un plugin tiene varias ventajas, como la optimización de rendimiento y el control total sobre el diseño.
En este artículo, te explicaremos paso a paso cómo agregar un mensaje de «Agotado» en los listados de productos de WooCommerce utilizando un simple código que puedes implementar directamente en tu tema o en un plugin personalizado.
Paso 1: Añadir el Aviso de «Agotado» en el Loop de Productos
Para mostrar el mensaje de «Agotado» en el listado de productos (loop) de WooCommerce, utilizaremos el hook woocommerce_before_shop_loop_item. Este hook nos permite agregar contenido justo antes de la imagen de cada producto en el listado.
A continuación te mostramos el código que puedes agregar a tu archivo functions.php o a un plugin personalizado:
add_action( 'woocommerce_before_shop_loop_item', 'dcms_show_out_stock', 5 );
function dcms_show_out_stock() {
global $product;
if ( ( $product->managing_stock() && $product->get_stock_quantity() === 0 ) || ! $product->is_in_stock() ) {
echo '<p class="stock out-of-stock">'.__('Agotado','woocommerce').'</p>';
}
}Este código verifica si el producto tiene stock gestionado y si la cantidad es cero, o si el estado del inventario está marcado como «Sin existencias». En cualquiera de estos casos, mostrará un mensaje «Agotado» sobre la imagen del producto en el listado.
Paso 2: Personalizar el Estilo del Aviso
Para que el aviso de «Agotado» sea visualmente atractivo y claro para tus clientes, puedes personalizar su apariencia mediante CSS. Aquí te dejamos un ejemplo básico de CSS que puedes añadir a tu hoja de estilos:
.stock.out-of-stock {
margin: 0;
padding: 3px 6px;
display: block;
position: absolute;
color: #fff;
z-index: 9;
font-size: 12px;
background: #dd2323;
line-height: 1;
}Este código hará que el aviso «Agotado» se muestre como una etiqueta roja sobre la imagen del producto. Puedes ajustar el diseño según las necesidades de tu tienda, como el tamaño del texto, los colores, o la ubicación del aviso.
Una vez que hayas agregado ambos códigos, el mensaje de «Agotado» aparecerá automáticamente en los productos que no estén disponibles, sin necesidad de plugins adicionales. Esto no solo mejora la experiencia del usuario al navegar por tu tienda, sino que también es una excelente práctica para aumentar la transparencia y evitar posibles frustraciones entre tus clientes.
Ventajas de No Usar Plugins
Aunque existen plugins que pueden hacer esta tarea, al implementar esta solución manual tienes varias ventajas:
- Optimización de rendimiento: Menos plugins significa menos carga en tu sitio web, lo que se traduce en una mejor velocidad de carga.
- Compatibilidad garantizada: Esta solución funciona perfectamente con cualquier tema o versión de WooCommerce, ya que no dependes de un plugin que pueda quedarse obsoleto o generar conflictos.