PHP

Masquer une section spécifique avec WooCommerce lorsque le panier est vide

Jean Rémi27 avril 20233 min de lecture

Dans cet article, nous allons examiner un extrait de code qui permet de masquer dynamiquement une section spécifique sur un site WordPress utilisant WooCommerce lorsque le panier est vide. Cette fonctionnalité peut être particulièrement utile pour améliorer l’expérience utilisateur et simplifier l’interface lorsque le panier est vide. Voici le code à intégrer dans votre fichier […]

Masquer une section spécifique avec WooCommerce lorsque le panier est vide

Dans cet article, nous allons examiner un extrait de code qui permet de masquer dynamiquement une section spécifique sur un site WordPress utilisant WooCommerce lorsque le panier est vide. Cette fonctionnalité peut être particulièrement utile pour améliorer l’expérience utilisateur et simplifier l’interface lorsque le panier est vide.

Voici le code à intégrer dans votre fichier functions.php de votre thème enfant : 

				
					add_action( 'wp_footer', function() {    
    if ( sizeof( WC()->cart->get_cart() ) < 1 ) {
        echo '<style type="text/css">.votreclass{ display: none; }</style>';
    }
});
				
			

Explication

Ce code utilise la fonction add_action de WordPress pour ajouter une fonction anonyme au hook wp_footer. La fonction anonyme vérifie si la taille du panier WooCommerce est inférieure à 1, c’est-à-dire vide. Si le panier est vide, le code insère un style CSS pour masquer la section avec la classe .section-resume.

 

  1. add_action( 'wp_footer', function() { ... } ): Cette ligne de code ajoute la fonction anonyme au hook wp_footer. Le hook wp_footer est exécuté à la fin de la page, juste avant la fermeture de la balise . Ainsi, la fonction anonyme sera exécutée à la fin de chaque page chargée.

  2. if ( sizeof( WC()->cart->get_cart() ) < 1 ) { ... }: Cette condition vérifie si le panier WooCommerce est vide. La méthode WC()->cart->get_cart() retourne un tableau contenant les éléments du panier. La fonction sizeof() compte le nombre d’éléments dans le tableau. Si la taille du tableau est inférieure à 1, cela signifie que le panier est vide.

  3. echo '';: Si la condition est remplie, cette ligne de code insère un style CSS dans la page. Ce style CSS masque la section avec la classe .votreclass en définissant sa propriété display à none.

Personnalisation

Il est possible d’adapter ce code pour masquer une section avec une autre classe. Il suffit de remplacer .votreclass par le nom de la classe souhaitée dans la ligne de code suivante :

				
					echo '<style type="text/css">.your-class-name{ display: none; }</style>';

				
			

Conclusion

En utilisant cet extrait de code, vous pouvez facilement masquer une section spécifique sur votre site WordPress avec WooCommerce lorsque le panier est vide. Cette solution est particulièrement utile pour améliorer l’expérience utilisateur et simplifier l’interface de votre site lorsque le panier est vide.

Testé sur WordPress 6.2 & Woocommerce 7.6.1

Un nouveau projet WordPress ? Besoin d’aide ?

Contactez-moi ou visitez mon site et je me ferais un plaisir de vous aider. 

Un nouveau projet web ?

Un nouveau site vitrine ou e-commerce ?
Ou même vous souhaitez faire la refonte de votre site ?

Vous avez un projet de développement web ?

Le meilleur moyen de savoir si nous pouvons vous aider, c'est d'en parler. Réservez un appel de 30 minutes avec notre équipe. Nous échangeons sur votre besoin, nous identifions les pistes possibles, et nous vous donnons une vision claire des prochaines étapes. Sans engagement.

Nous écrire