[Resuelto] Como agregar etiqueta de agotado en Woocomerce

Que tal Nicolas,

Puedes agregar el siguiente código en tu archivo de functions.php o bien usar el plugin de Code snippets para gestionar con mas facilidad estos codigos especiales https://es.wordpress.org/plugins/code-snippets/

add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="now_sold">Agotado</span>';
}
});

Podras fijarte que el elemento span tiene el texto de "Agotado" el cual es posible cambiar por lo que gustes, por otra parte es necesario que incluyamos estilos para que se vea bien nuestro enunciado, dichos estilos puedes agregarlos desde la opcion si la tiene disponible tu tema o bien desde las opciones Apariencia-> Personalizar-> CSS agregado

.now_sold {
background: #C83344;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 6px 12px;
position: absolute;
right: 0;
top: 0;
}

Prueba y nos comentas, Saludos! 

Hola gracias por responder, cuando ingreso el codigo con el plugin code-snippets, funciona muestra el mensaje agotado, pero cuando utilizo el codigo css desaparece el texto alguna forma de solucionar para que se pueda ver por favor.

Hola Nicolas,

Veo que se estan aplicando los estilos de forma correcta:

Puedes compartirnos una captura sobre a que te refieres con que no logras ver el texto.

Si lo deseas también puedes utilizar un complemento:

https://wordpress.org/plugins/sold-out-badge-for-woocommerce/

Dale un vistazo primero a lo que nos comentas ya que logro ver bien el texto y nos comentas.

Un saludo 🖐️ 

Respondido por: @argenis

Hola Nicolas,

Veo que se estan aplicando los estilos de forma correcta:

Puedes compartirnos una captura sobre a que te refieres con que no logras ver el texto.

Si lo deseas también puedes utilizar un complemento:

https://wordpress.org/plugins/sold-out-badge-for-woocommerce/

Dale un vistazo primero a lo que nos comentas ya que logro ver bien el texto y nos comentas.

Un saludo 🖐️ 

Para que se pudiese ver modifique la posición en el css, a center y quedo como en la captura de imagen , habra una forma de darle otro estilo alas letras para que se vea diferente?

Sera posible agregarle el estilo como en esta imagen? donde dice Out of Stock

Hola Nicolas,

Algo un poco cercano a esto puede ser esto:

.now_sold {
background: #ffffffc9;
color: #000;
font-size: 20px;
font-weight: 700;
padding: 20px 0px;
top: 30%;
position: absolute;
width: 100%;
z-index: 999999;
display: block;
}

Sustituye el que ingresaste previamente por este, igualmente este código es solo visible en la miniatura, en cambio el complemento es visible en todo tanto miniatura como el producto como tal podrías darle un intento a este complemento.

Un saludo 🖐️ 

Respondido por: @argenis

Hola Nicolas,

Algo un poco cercano a esto puede ser esto:

.now_sold {
background: #ffffffc9;
color: #000;
font-size: 20px;
font-weight: 700;
padding: 20px 0px;
top: 30%;
position: absolute;
width: 100%;
z-index: 999999;
display: block;
}

Sustituye el que ingresaste previamente por este, igualmente este código es solo visible en la miniatura, en cambio el complemento es visible en todo tanto miniatura como el producto como tal podrías darle un intento a este complemento.

Un saludo 🖐️ 

Mil gracias quedo super bien se ve como yo queria, estoy feliz de estar en webempresa y voy a renovar mis planes sin pensarlo dos veces.

Hola Nicolas,

Encantados de poder ayudarte 😎  , nos pone muy contentos que nuestros clientes estén felices con nuestro trabajo. 😀  

¿Te importaría dedicarle un minuto a dejarnos una reseña / opinión en TrustPilot, Facebook o Google, lo que te vaya mejor?

TrustPilot:  https://es.trustpilot.com/evaluate/webempresa.com

Facebook:  https://www.webempresa.com/testimonio-facebook

Google:  https://www.webempresa.com/testimonio-google

Nos ayudaría a que otr@s usuarios se decidan por nosotr@s si saben lo que nos decís.

Gracias de parte de todo el equipo. 😊