Le bloc Panier Menu vous permet d'ajouter une icône de panier d'achat WooCommerce à n'importe quelle page SeedProd. Ce bloc affiche une icône de panier avec un badge indiquant le nombre d'articles, ce qui permet aux clients de voir facilement ce qu'il y a dans leur panier et de naviguer vers la page de paiement depuis n'importe quelle page que vous créez.
Vous pouvez éventuellement afficher le sous-total du panier à côté de l'icône, contrôler son alignement et personnaliser entièrement la couleur de l'icône, la couleur du badge et la couleur du texte du badge pour correspondre à la marque de votre boutique.
Ajouter le bloc Panier Menu à vos pages
Suivez ces étapes pour ajouter un bloc Panier Menu à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Panier Menu dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Panier Menu pour ouvrir ses paramètres. Dans l'onglet Contenu, configurez l'affichage de l'icône du panier.
- Masquer si vide : Activez cette option pour masquer complètement l'icône du panier lorsque le panier du client ne contient aucun article.
- Afficher le sous-total : Activez cette option pour afficher le montant du sous-total du panier à côté de l'icône du panier.
- Alignement : Définissez l'alignement horizontal de l'icône du panier — Gauche, Centre ou Droite.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence et l'espacement de votre bloc Panier Menu.
Styles :
- Typographie : Ajustez la famille de polices, l'épaisseur, la taille, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour le sous-total et tout texte affiché avec l'icône du panier. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Couleur : Définissez la couleur de l'icône du panier et du texte du sous-total.
- Couleur du badge : Définissez la couleur d'arrière-plan du badge indiquant le nombre d'articles qui apparaît sur l'icône du panier.
- Couleur du texte du badge : Définissez la couleur du texte du numéro d'article affiché dans le badge.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Panier Menu (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Panier Menu (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Panier Menu, créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Panier Menu sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Panier Menu sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Panier Menu sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez un effet d'animation qui se joue lorsque le bloc Panier Menu apparaît à l'écran, tel que Bounce, Fade In, Zoom In, Rotate In, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc Panier de menu et la personnalisation de son apparence, assurez-vous d'enregistrer votre travail.
Vous avez ajouté avec succès un bloc Panier de menu à votre page ! Placer une icône de panier dans votre en-tête ou votre zone de navigation aide les acheteurs à suivre leurs sélections et les dirige vers le paiement. Utilisez les paramètres de couleur du badge pour faire ressortir le nombre d'articles, et l'option Afficher le sous-total pour donner aux acheteurs une vue d'ensemble de leur total de commande.