Avisos
Vaciar todo

[Resuelto] Como agregar etiqueta de agotado en Woocomerce  

 
Nicolas
 Nicolas
Usuario activo

Hola me podrian ayudar por favor, quisiera agregar la etiqueta de agotado en los productos de woocomerce, ya que es fastidioso para un cliente cuando ingrese a un producto y le indica agotado. Me gustaria que desde la vista general de todos los productos le muestre los que estan agotados habra alguna forma de hacerlo?

Si fuese posible que no se utilice ningun plugin para no recargar la pagina.

Contenido solo visible a usuarios registrados

Respondido : 29/10/2021 9:22 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

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! 

 

Respondido : 29/10/2021 9:38 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Nicolas
 Nicolas
Usuario activo

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.

Respondido : 29/10/2021 10:02 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Nicolas,

Veo que se estan aplicando los estilos de forma correcta:

image

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 🖐️ 

Esta publicación ha sido modificada el hace 4 semanas por Argenis
Respondido : 29/10/2021 10:07 pm

Cursos Gratuitos WordPress

Nicolas
 Nicolas
Usuario activo
Respondido por: @argenis

Hola Nicolas,

Veo que se estan aplicando los estilos de forma correcta:

image

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?

 

Esta publicación ha sido modificada el hace 4 semanas por Nicolas
Respondido : 29/10/2021 10:44 pm
Nicolas
 Nicolas
Usuario activo

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

Respondido : 29/10/2021 10:54 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Argenis
 Argenis
Soporte CMS Webempresa Moderator

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 : 29/10/2021 11:06 pm
Nicolas
 Nicolas
Usuario activo
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.

 

Respondido : 29/10/2021 11:09 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Argenis
 Argenis
Soporte CMS Webempresa Moderator

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. 😊

Respondido : 29/10/2021 11:11 pm