Le bloc Checkout vous permet d'intégrer un formulaire de paiement WooCommerce entièrement personnalisé sur n'importe quelle page SeedProd. Il vous offre un contrôle total sur la mise en page et le style visuel du paiement, depuis les couleurs des champs, la typographie des étiquettes et l'espacement des lignes jusqu'à la conception des boutons, le style du panier et l'apparence de la section de paiement. Vous pouvez ainsi créer une expérience de paiement qui correspond à votre marque sans toucher au code.
Utilisez ce bloc pour créer une page de paiement simplifiée et conforme à votre image de marque, qui réduit les frictions et permet aux clients de se concentrer sur la finalisation de leur achat. Une fois votre page publiée, il vous suffit de la définir comme page de paiement dans les paramètres WooCommerce afin que les clients y soient automatiquement redirigés.
Ajouter le bloc de paiement à vos pages
Suivez ces étapes pour ajouter un bloc Checkout à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > WooCommerce, glissez-déposez le bloc Checkout dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de style
Une fois ajouté, cliquez sur le bloc « Checkout » pour ouvrir ses paramètres. Dans l'onglet « Styles », les paramètres sont organisés en sept sections.
Mise en page :
- Colonnes de mise en page : choisissez entre une mise en page à une colonne (champs de facturation et récapitulatif de la commande empilés verticalement) ou une mise en page à deux colonnes (champs de facturation à gauche, récapitulatif de la commande à droite).
En-têtes :
- Couleur de l'en-tête : définissez la couleur du texte des en-têtes de section dans le formulaire de paiement.
- Typographie : définissez la police, la taille, l'interligne, l'espacement des lettres, le poids, le style et la casse du texte de l'en-tête de la page de paiement.
Domaines :
- Couleur d'arrière-plan du champ : définit la couleur d'arrière-plan des champs de saisie lors du paiement.
- 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éfinit la couleur de la bordure des champs de saisie.
- Largeur de la bordure du champ : définit l'épaisseur de la bordure de chaque côté des champs de saisie.
- Couleur du libellé : définissez la couleur du texte des libellés des champs.
- Typographie des étiquettes : définissez la police, la taille, la hauteur de ligne, l'espacement des lettres, le poids, le style et la casse du texte des étiquettes de champ.
- Espacement des lignes : ajustez l'espacement vertical entre les lignes du champ de formulaire à l'aide d'un curseur (valeur par défaut : 6 px).
Boutons :
- Style des boutons : choisissez un style visuel pour les boutons de paiement : plat, 2D, vintage, fantôme ou lien.
- Couleur des boutons : définissez la couleur d'arrière-plan des boutons d'action de paiement.
- Rayon de la bordure : ajustez l'arrondi des coins des boutons de paiement à l'aide d'un curseur.
Alertes :
- Couleur des informations importantes : définissez la couleur utilisée pour les messages d'alerte informatifs.
- Couleur de mise en évidence des erreurs : définissez la couleur utilisée pour les messages d'alerte d'erreur.
- Couleur de mise en évidence des 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 tableau récapitulatif du panier.
- Largeur de la bordure du panier : définissez l'épaisseur de la bordure de chaque côté du tableau du panier.
- Rayon de bordure : ajustez l'arrondi des coins du tableau du panier à l'aide d'un curseur.
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan du tableau du panier.
- Couleur du texte : définissez la couleur générale du texte dans le tableau du 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 tableau du panier.
- Famille de polices d'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 tableau du panier.
Section Paiement :
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan de la section des modes de paiement.
- Couleur du texte : définissez la couleur du texte dans la section des modes de paiement.
- Famille de polices : choisissez la police utilisée pour le texte de la section paiement.
Étape 3 : Choisissez un modèle
Dans l'onglet Modèles, vous pouvez choisir parmi une collection de styles de paiement prédéfinis. Chaque modèle applique en un seul clic un ensemble coordonné de styles de champs, de boutons et de mise en page à votre formulaire de paiement. Les styles de champs de saisie disponibles sont les suivants : Clair, Sans bordure, Bordure large, Ombre intérieure, Gris, Foncé, Bordure inférieure et Transparent.
Étape 4 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez affiner davantage la mise en page et le comportement de votre bloc Checkout.
Espacement :
- Marge : définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des commandes indépendantes pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
- Remplissage : définissez l'espacement intérieur à l'intérieur du bloc wrapper sur les quatre côtés, avec des commandes par appareil.
Attributs :
- Classe personnalisée : ajoutez une ou plusieurs classes CSS personnalisées à l'enveloppe du bloc pour un style ciblé.
- Identifiant CSS : SeedProd génère automatiquement un identifiant CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans un CSS ou un JavaScript personnalisé.
- Attributs personnalisés : ajoutez des attributs HTML personnalisés à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité des appareils :
- Masquer sur le bureau : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran d'ordinateur.
- Masquer sur tablette : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran de tablette.
- Masquer sur mobile : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran mobile.
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 commandes de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet souris : appliquez un effet de parallaxe basé sur les mouvements de la souris au bloc.
Étape 5 : Définir comme page de paiement WooCommerce
Après avoir publié votre page, accédez à WooCommerce > Paramètres > Avancé et définissez votre nouvelle page SeedProd comme page de paiement désignée. Cela garantit que les clients sont redirigés vers votre page de paiement personnalisée lorsqu'ils procèdent à un achat.
Étape 6 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Checkout et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc « Checkout » à votre page ! Grâce aux options de mise en page, aux modèles prédéfinis et au contrôle précis de chaque détail visuel (des libellés des champs et styles des boutons aux en-têtes du panier et typographie de la section paiement), vous pouvez créer une expérience de paiement fluide et professionnelle. N'oubliez pas d'attribuer cette page comme page de paiement dans les paramètres WooCommerce afin que vos clients arrivent toujours au bon endroit.