Le bloc Paiement vous permet d'intégrer un formulaire de paiement WooCommerce entièrement personnalisé sur n'importe quelle page SeedProd. Il vous donne un contrôle total sur la mise en page et le style visuel du paiement — des couleurs des champs, à la typographie des étiquettes et à l'espacement des lignes, en passant par la conception des boutons, le style du panier et l'apparence de la section de paiement — afin que vous puissiez créer une expérience de paiement qui correspond à votre marque sans toucher à une seule ligne de code.
Utilisez ce bloc pour créer une page de paiement rationalisée et conforme à votre marque, qui réduit les frictions et maintient les clients concentrés sur la finalisation de leur achat. Une fois votre page publiée, attribuez-la simplement comme page de paiement dans les paramètres WooCommerce afin que les clients y soient automatiquement dirigés.
Ajouter le bloc Paiement à vos pages
Suivez ces étapes pour ajouter un bloc Paiement à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > WooCommerce, faites glisser et déposez le bloc Paiement dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de style
Une fois ajouté, cliquez sur le bloc Paiement 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 en une colonne (champs de facturation et résumé de la commande empilés verticalement) ou une mise en page en deux colonnes (champs de facturation à gauche, résumé 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 famille de polices, la taille, la hauteur de ligne, l'espacement des lettres, l'épaisseur, le style et la casse du texte de l'en-tête de paiement.
Champs :
- Couleur d'arrière-plan des champs : Définissez la couleur d'arrière-plan des champs de saisie de 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é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.
- Couleur des étiquettes : Définissez la couleur du texte des étiquettes de champ.
- Typographie des étiquettes : Définissez la famille de polices, la taille, la hauteur de ligne, l'espacement des lettres, l'épaisseur, le style et la casse du texte des étiquettes de champ.
- Espacement des lignes : Ajustez l'espacement vertical entre les lignes de champs du formulaire à l'aide d'un curseur (par défaut : 6px).
Boutons :
- Style de bouton : Choisissez un style visuel pour les boutons de paiement — Plat, 2D, Vintage, Fantôme ou Lien.
- Couleur du bouton : Définissez la couleur d'arrière-plan des boutons d'action de paiement.
- Rayon de bordure : Ajustez l'arrondi des coins des boutons de paiement à l'aide d'un curseur.
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 bordure du panier : Définissez la couleur de la bordure du tableau du résumé de la commande.
- Épaisseur de 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 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 tableau du panier.
Section de paiement :
- Couleur de fond : Définissez la couleur d’arrière-plan de la section des méthodes de paiement.
- Couleur du texte : Définissez la couleur du texte dans la section des méthodes de paiement.
- Police de caractères : Choisissez la police utilisée pour le texte de la section de paiement.
Étape 3 : Choisir un modèle
Dans l’onglet Modèles, vous pouvez choisir parmi une collection de styles de paiement préconçus. Chaque modèle applique un ensemble coordonné de styles de champs, de boutons et de mise en page à votre formulaire de paiement en un seul clic. Les styles de champs de saisie disponibles incluent Clair, Sans bordure, Bordure large, Ombre intérieure, Gris, Foncé, Bordure inférieure et Transparent.
Étape 4 : Personnaliser la conception
Dans l’onglet Avancé, vous pouvez affiner davantage la mise en page et le comportement de votre bloc de paiement.
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 5 : Définir comme votre page de paiement WooCommerce
Après avoir publié votre page, accédez à WooCommerce > Réglages > Avancé et définissez votre nouvelle page SeedProd comme page de paiement désignée. Cela garantit que les clients sont dirigés vers votre page de paiement personnalisée lorsqu’ils finalisent un achat.
Étape 6 : Enregistrer vos modifications
Une fois que vous avez terminé de configurer le bloc de paiement et de personnaliser son apparence, assurez-vous d’enregistrer votre travail.
Vous avez ajouté avec succès un bloc de paiement à votre page ! Avec des options de mise en page, des modèles préconçus et un contrôle granulaire sur chaque détail visuel — des étiquettes de champs et des styles de boutons aux en-têtes de table du panier et à la typographie de la section de paiement — vous pouvez créer une expérience de paiement qui semble transparente et professionnelle. N’oubliez pas d’attribuer la page comme page de paiement dans les réglages WooCommerce afin que vos clients atterrissent toujours au bon endroit.