Hola Marta,
En este caso puedes probar si el siguiente código que debes añadir en el function.php de tu tema o en un plugin como code snippets te permite cambiar el texto del botón cuando un producto se encuentre agotado de «leer más» a «agotado».
// Cambiar "Leer Más" por "Agotado" en el botón
add_filter( 'woocommerce_product_add_to_cart_text', 'cambiar_texto_leer_mas', 10, 2 );
function cambiar_texto_leer_mas( $text, $product ) {
if ( ! $product->is_in_stock() ) {
$text = __( 'Agotado', 'woocommerce' );
}
return $text;
}
// Agregar etiqueta "Agotado" en el producto
add_action( 'woocommerce_before_shop_loop_item_title', 'mostrar_etiqueta_agotado' );
function mostrar_etiqueta_agotado() {
global $product;
if ( ! $product->is_in_stock() ) {
echo '<span class="etiqueta-agotado">Agotado</span>';
}
}
Pruébalo y nos comentas como va todo
Un Saludo
Hola
Me sigue saliendo igual
No ha cambiado nada de nada
Es un JS verdad?
He eliminado cache etc y nada
Gracias
Hola Marta,
No, debes añadirlo como un código PHP; envíanos capturas como lo añades para verificar con mayor detalle lo que nos comentas.
Un Saludo
Hola Marta,
Entiendo, en este caso prueba lo siguiente, sustituye el código que te envie anteriormente por el siguiente:
add_filter( 'woocommerce_product_add_to_cart_text', 'cambiar_texto_leer_mas', 10, 2 );
function cambiar_texto_leer_mas( $text, $product ) {
if ( ! $product->is_in_stock() ) {
$text = __( 'Agotado', 'woocommerce' );
}
return $text;
}
// Agregar clase personalizada al botón cuando está agotado
add_filter( 'woocommerce_loop_add_to_cart_link', 'agregar_clase_boton_agotado', 10, 3 );
function agregar_clase_boton_agotado( $button, $product, $args ) {
if ( ! $product->is_in_stock() ) {
// Reemplazar la clase por defecto o añadir la nueva
$button = sprintf(
'<a href="%s" data-quantity="%s" class="%s boton-agotado" %s>%s</a>',
esc_url( $product->get_permalink() ),
esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
esc_html( $product->add_to_cart_text() )
);
}
return $button;
}
// Agregar etiqueta "Agotado" en el producto (sin cambios)
add_action( 'woocommerce_before_shop_loop_item_title', 'mostrar_etiqueta_agotado' );
function mostrar_etiqueta_agotado() {
global $product;
if ( ! $product->is_in_stock() ) {
echo '<span class="etiqueta-agotado">Agotado</span>';
}
}
Luego de ello accede a Apariencia → Personalizar → CSS personalizado y añade el siguiente código CSS
/* Estilo para el botón agotado */
a.button.product_type_simple.boton-agotado {
background-color: #ff0000 !important; /* Color de fondo rojo */
color: #ffffff !important; /* Texto blanco para contraste */
border-color: #ff0000 !important; /* Borde rojo (si aplica) */
}
/* Estilo existente para la etiqueta "Agotado" */
.etiqueta-agotado {
position: absolute;
top: 10px;
left: 10px;
background-color: #ff0000;
color: #ffffff;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
z-index: 10;
}
Guarda los cambios y revisa si con ello se muestran las opciones de agotado como necesitas
Un Saludo
Ahora sale en rojo pero no la etiqueta
Si se puede, si no tranqui
Gracias
Que tal Marta,
Validando lo sugerido por mis compañeros puedo apreciar que si aparece tanto el botón como la etiqueta sobre el producto
https://estetizar.es/tienda/page/21/
Probablemente, se trate de la caché de tu navegador, en lo posible válida en ventana incógnita
Saludos!
Muchas gracias!
Ya lo veo
Saludos
Hola Marta,
Enhorabuena funciona como necesitas, es un placer para nosotros siempre poder ayudarte.
No dudes en escribirnos si tienes cualquier otra consulta.
Un Saludo 😊