Comment ajouter un bouton de fermeture aux notifications de la page commande WooCommerce ?

Les messages et les notifications d’erreur de WooCommerce s’affichent sur la page produit, la page panier, la page de paiement, la page mon compte et peuvent s’afficher au chargement de la page ou à la suite d’une action spécifique de l’utilisateur.

Le problème potentiel est que – comme pour le back-office de WordPress – les messages de WooCommerce peuvent utiliser beaucoup d’espace vertical, ce qui peut repousser le contenu utile plus bas dans la page, et éventuellement perturber la navigation – en particulier sur la page de paiement.

Une solution intéressante consisterait à placer un bouton « x » sur les messages de WooCommerce, afin que les clients puissent les fermer rapidement et regagner de l’espace.

Nous utiliserons un mélange de PHP, JS et CSS dans le snippet ci-dessous afin d’atteindre notre objectif final. Bonne lecture !

Le snippet ci-dessous ajoute un bouton de fermeture pour chaque notification (ou groupe de notifications) sur la page de commande WooCommerce. En cliquant sur ce bouton, la notification ou le groupe de notifications s’efface et disparaît progressivement.
add_action( 'wp_loaded', 'wootimeo_dismiss_woocommerce_message' );
 
function wootimeo_dismiss_woocommerce_message() {
   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('.dizmiz').length) $(this).append('<span class=\'dizmiz\' title=\'Fermer\'>x</span>').css('position','relative');
         });
      });
      $(document).on('click','.dizmiz',function(){
         $(this).parent().hide(600);
      });
   " );
}Langage du code : PHP (php)

Et voici le code CSS pour la rendu visuel du bouton :

.dizmiz {
    right: 1em;
    top: 1em;
    position: absolute;
    background: black;
    border-radius: 50%;
    height: 23px;
    width: 23px;
    line-height: 21px;
    font-size: 17px;
    text-align: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
}Langage du code : CSS (css)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *