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

Masquer une section spécifique dans WordPress 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 </body>. 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 '<style type="text/css">.votreclass{ display: none; }</style>';: 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 ?

Dire merci, c'est bien aussi.

Partagez cet article

2
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x

Vous avez une question ?

Vous avez une question sur un article ?
Découvert un bug inexpliqué ? 😱
Ou vous avez des articles à me soumettre ? 🤔
N’hésitez pas à me contacter, je serais ravi de vous aider.

Parce que chaque projet est unique !

Pour une meilleure compréhension, merci de décrire au maximum votre projet, vos besoins, vos attentes…
Vous préférez en parler au téléphone, n’hésitez pas, je suis à votre écoute : 06 35 31 45 64

Tes modifications ont bien été sauvegardées

Bravo !

Vous êtes maintenant inscrit.

Votre réponse a bien été publiée

Votre demande a bien été envoyé, merci.

Le délai de réponse peut varier de 24h à 48h.
Merci de votre compréhension

J'ai besoin d'aide pour mon projet !

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