Le bloc Panier vous permet d'intégrer de manière transparente un panier WooCommerce dans n'importe quelle page SeedProd. Il affiche les articles qu'un client a ajoutés, fournit des mises à jour du panier en temps réel et vous donne un contrôle total sur le style visuel du panier — des couleurs des champs et du design des boutons à la typographie et aux paramètres des bordures.
Utilisez ce bloc pour créer une page de panier WooCommerce entièrement personnalisée qui correspond à votre marque, sans toucher à aucun code. Une fois votre page publiée, désignez-la simplement comme votre page de panier dans les paramètres WooCommerce afin que les clients y soient automatiquement dirigés.
Ajouter le bloc Panier à vos pages
Suivez ces étapes pour ajouter un bloc Panier à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > WooCommerce, faites glisser et déposez le bloc Panier dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de style
Une fois ajouté, cliquez sur le bloc Panier pour ouvrir ses paramètres. Dans l'onglet Styles, les paramètres sont organisés en cinq sections.
En-têtes :
- Couleur de l'en-tête : Définissez la couleur du texte pour les en-têtes de section dans le panier.
Boutons :
- Style de bouton : Choisissez un style visuel pour les boutons du panier — Plat, 2D, Vintage, Fantôme ou Lien.
- Couleur du bouton : Définissez la couleur d'arrière-plan des boutons d'action du panier.
- Rayon de bordure : Ajustez l'arrondi des coins des boutons du panier à l'aide d'un curseur.
Champs :
- Couleur d'arrière-plan du champ : Définissez la couleur d'arrière-plan des champs de saisie dans le panier (tels que les champs de code de coupon et de quantité).
- Couleur du texte du champ : Définissez la couleur du texte à l'intérieur des champs de saisie.
- Couleur de la bordure du champ : Définissez la couleur de la bordure des champs de saisie.
- Épaisseur de la bordure du champ : Définissez l'épaisseur de la bordure de chaque côté des champs de saisie.
Alertes :
- Couleur de surlignage d'information : Définissez la couleur utilisée pour les messages d'alerte d'information.
- Couleur de surlignage d'erreur : Définissez la couleur utilisée pour les messages d'alerte d'erreur.
- Couleur de surlignage de succès : Définissez la couleur utilisée pour les messages d'alerte de succès.
Panier :
- Couleur de la bordure du panier : Définissez la couleur de la bordure du conteneur du panier.
- Épaisseur de la bordure du panier : Définissez l'épaisseur de la bordure de chaque côté du conteneur du panier.
- Rayon de bordure : Ajustez l'arrondi des coins du conteneur du panier à l'aide d'un curseur.
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan du conteneur du panier.
- Couleur du texte : Définissez la couleur générale du texte dans le panier.
- Famille de polices : Choisissez la police utilisée pour le texte du corps du panier.
- Couleur d'arrière-plan de l'en-tête : Définissez la couleur d'arrière-plan de la ligne d'en-tête du panier.
- Famille de polices de l'en-tête : Choisissez la police utilisée pour le texte de l'en-tête du panier.
- Couleur de l'en-tête : Définissez la couleur du texte de la ligne d'en-tête du panier.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser davantage la mise en page et le comportement de votre bloc Panier.
Espacement :
- Marge : Définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des contrôles indépendants pour ordinateur, tablette et mobile.
- Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.
Attributs :
- Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
- ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
- Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
- Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.
Effets d'animation :
- Effet de défilement : Appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.
Étape 4 : Définir comme votre page de panier WooCommerce
Après avoir publié votre page, accédez à WooCommerce > Réglages > Avancé et définissez votre nouvelle page SeedProd comme page de panier désignée. Cela garantit que les clients sont dirigés vers votre page de panier personnalisée lorsqu'ils cliquent sur l'icône du panier ou qu'ils procèdent à partir d'une page produit.
Étape 5 : Enregistrer vos modifications
Une fois que vous avez terminé de configurer le bloc Panier et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Panier à votre page ! Avec un contrôle total sur les styles des boutons, les couleurs des champs, la typographie et la mise en page du conteneur du panier, vous pouvez créer une expérience de panier WooCommerce qui semble totalement native à votre marque. N'oubliez pas d'attribuer la page comme page de panier dans les réglages WooCommerce afin que vos clients atterrissent toujours au bon endroit.