• 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 / Etiqueta de Agotado en lista de productos WooCommerce sin plugins

Etiqueta de Agotado en lista de productos WooCommerce sin plugins

Etiqueta de Agotado en lista de productos WooCommerce sin plugins

[ hace 8 meses ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Etiqueta Agotado resultado final

 

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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar el stock en la lista de productos de WooCommerceMostrar el stock en la lista de productos de WooCommerce
  • Personalizar el Loop de WooCommercePersonalizar el Loop de WooCommerce
  • Agregar el campo de cantidad en la lista de productos de WooCommerceAgregar el campo de cantidad en la lista de productos de WooCommerce
  • 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
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Ernesto Jost

    1 junio, 2022

    Muy buena información! La voy a utilizar para mis clientes que tienen un ecommerce, gracias! Muy recomendado

  2. diego

    2 noviembre, 2022

    Gracias mil. Me gustaria saber si me puedes ayudar con un detalle, la función se logró poner y aparece el mensaje de agotado, pero no logro que me funcione el css y pongo tal cual lo señalas, alguna idea? gracias.

    • Jhon Marreros Guzmán

      9 noviembre, 2022

      Hola, es posible que los estilos CSS de tu tema tengan prioridad, para probar podrías usar la palabra !important en los estilos que agregues, revisa: https://www.w3schools.com/css/css_important.asp

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

Cabecera fija en theme WordPress

Agregar el campo de cantidad en la lista de productos de WooCommerce

Cambiar comillas («») en WordPress

Administrar tabla wp_options desde el Backend de WordPress

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