Etiqueta de Agotado en lista de productos WooCommerce sin plugins

Si estas gestionando el inventario en tu tienda WooCommerce, es posible que quieras que se indiquen los productos que están agotados directamente cuando se muestran en la lista de productos sin tener que entrar a la página de detalle.

 

Resultado Final

Lo que al final queremos obtener es una etiqueta en la parte superior de la imagen del producto.

 

Código para mostrar la etiqueta de agotado

Puedes agregar el siguiente código en el archivo functions.php de tu tema hijo o usando algún plugin de snippets.

add_action( 'woocommerce_after_shop_loop_item_title', 'dcms_show_out_stock', 10 );
function dcms_show_out_stock() {
    global $product;
    if ( $product->managing_stock() && ! $product->is_in_stock() ){
      echo '<p class="stock out-of-stock">'.__('Out of stock','woocommerce').'</p>';
    }
}

En el código anterior

• Usamose el hook woocommerce_after_shop_loop_item_title que hace referencia a la función dcms_show_out_stock()
• Dentro de la función definimos la variable global de producto que tendrá la referencia al producto actual de la lista
• Parar el producto actual comprobamos si se gestiona el stock y si no se tiene stock
• Si se cumplen estas condiciones entonces imprimimos el mensaje

Con este código simplemente ya tenemos el mensaje, sin embargo para posicionarlo sobre la imagen de producto será necesario usar código CSS.

 

Código CSS para mejorar el diseño del mensaje

Puedes agregar el siguiente código en el archivo style.css de tu tema hijo o desde Apariencia > Personalizar > CSS

.woocommerce-LoopProduct-link{
  position: relative;
}

.woocommerce-LoopProduct-link .out-of-stock{
  position: absolute;
  background:red;
  color:white;
  padding:4px 10px;
  right: 0;
  top:0;
}

 

Conclusión

Como has podido comprobar, puedes agregar una etiqueta para indicar que el producto no tiene stock, cuando se muestra una lista de productos, de forma simple y directamente a través de código.

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

Suscríbete a DecodeCMS:  

 

La entrada Etiqueta de Agotado en lista de productos WooCommerce sin plugins es un artículo reciente del sitio DecodeCMS.