Woocommerce: agregue la funcionalidad para cerrar la ventana emergente del mensaje de éxito “agregar al carrito”

Esta es mi primera publicación, así que por favor sean amables. Estoy terminando un sitio basado en Woocommerce y mis clientes han solicitado que haya la posibilidad de cerrar (por ejemplo, con un pequeño botón “x”) el pequeño banner emergente para el mensaje “agregado con éxito al carrito” que aparece en el producto paginas (Actualmente solo existe la opción de “ver carrito” a través de esa ventana emergente). Esto no parece ser una configuración integrada para esto en WooCommerce.

Para ver de lo que estoy hablando, puedes ir a https://www.drinkreorient.com/product/rose-root/ y añade este producto al carrito (no es necesario comprar ;-)). A continuación, debería ver la ventana emergente.

Hice algunos intentos buscando en Google y jugando con functions.php y la función “wc_add_to_cart_message”, pero no tuve éxito. No soy muy fluido en el php (o javascript) necesario para que esto suceda. ¡Gracias por adelantado!

Tuve una solicitud similar de un cliente. pero en lugar de una “x” para cerrar la ventana emergente, era para hacer que se desvaneciera después de x cantidad de segundos.

ver el ver este enlace: http://ausauraair.com.au/product/ausaura-air/

al agregar algo de jQuery, pude hacer que la caja se desvaneciera.

jQuery(document).ready(function( $ ) {
$('.woocommerce-message').fadeTo(7000,1).fadeOut(2000);
});

posiblemente podría usar una técnica similar, pero agregue un botón “x” y luego una función de clic para hacer que el cuadro se cierre al hacer clic.

Realmente no deberías necesitar meterte con el wc_add_to_cart_message. En su lugar, debe anular el woocommerce/templates/notices/success.php plantilla, y modifíquela para satisfacer sus necesidades agregando un botón de cierre, junto con algún javascript para realizar esa acción.

Primero, para anular la plantilla, debe seguir las instrucciones que se encuentran en la documentación para Estructura de la plantillaespecíficamente:

Cópielo en un directorio dentro de su tema llamado /woocommerce, manteniendo la misma estructura de archivos pero eliminando el subdirectorio /templates/.

Una vez que hayas copiado esto [your-theme]/woocommerce/notices/success.php archivo en su lugar, algo como esto debería estar bastante cerca de lo que está buscando:

<?php
/* Modified version of [your-theme]/woocommerce/notices/success.php */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if ( ! $messages ){
    return;
}
?>
<style>
    .woocommerce-message .close-button {
        /* customize the close button */
        float:right;
        display:inline-block;
        color:white;
        cursor:pointer;
    }
</style>
<script>
  (function($){
    $(document).ready(function(){
      $('.woocommerce-message .close-button').on('click', function(){
        $('.woocommerce-message').fadeOut(function(){$(this).remove();});
      });
    });
  }(jQuery));
</script>
<?php foreach ( $messages as $message ) : ?>
    <div class="woocommerce-message">
        <?php echo wp_kses_post( $message ); ?>    
        <span class="close-button">X</span>
    </div>
<?php endforeach; ?>

Esos dos pasos deberían darte exactamente lo que estás buscando.

Adicional del código de Christian Caltabiano, esto podría ser más útil para retrasar los mensajes unos segundos…

<script>jQuery(document).ready(function( $ ) {  $('.woocommerce-message').fadeTo(300,1).delay(3000).fadeOut(300);   }); </script>

$('#go').click(function(){
$('#para').fadeOut().delay(3000).fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input id="go" type="button" value="Go" /></p>
<p id="para">This text will fade out and pause</p>