Los mensajes informativos, de advertencia y error que pueden aparecer en la página de finalizar compra de WooCommerce pueden ser múltiples y variados, y tienen una enorme importancia, para que el usuario sea consciente de oportunidades, informaciones o incluso fallos.

Ahora bien, en ocasiones pueden llegar a ser molestos para el mismo proceso de compra, sobre todo cuando son reiterativos, como en el caso de que falten campos por rellenar en el formulario, y terminen siendo innecesarios.

No digo que impidas que aparezcan, pero sí puedes hacer que el usuario pueda cerrarlos una vez leídos, para que no ocupen un espacio quizás necesario para tener una experiencia de pago menos abrumadora.

Para que los usuarios puedan descartar/cerrar los mensajes informativos de WooCommerce debes añadir 2 códigos:

Este en el fichero functions.php del tema hijo o como prefieras si usas otro método:

/* Boton para poder cerrar avisos de WooCommerce */
add_action( 'wp_loaded', 'ayudawp_descartar_mensajes_woo' );

function ayudawp_descartar_mensajes_woo() {
if ( is_admin() ) return;
wc_enqueue_js( "
$(document).on('updated_checkout checkout_error',function(){
$('.woocommerce-message,.woocommerce-info,.woocommerce-NoticeGroup-checkout').each(function(){
if (!$(this).find('.descartar').length) $(this).append('<span class=\'descartar\' title=\'Descartar\'>x</span>').css('position','relative');
});
});
$(document).on('click','.descartar',function(){
$(this).parent().hide(600);
});
" );
}

Y luego estos estilos en el personalizador si usas un tema clásico o en el CSS adicional del editor del sitio en temas FSE:

.descartar {
right: 1em;
top: 1em;
position: absolute;
background: black;
border-radius: 50%;
height: 23px;
width: 23px;
line-height: 23px;
font-size: 17px;
text-align: center;
color: white;
font-weight: 900;
cursor: pointer;
}

Cuando hayas añadido estos códigos tus clientes verán un icono de cierre en los mensajes, pudiendo cerrarlos a voluntad.