Souhaitez-vous que votre page de paiement ressemble au reste de votre boutique au lieu d'un formulaire par défaut ? Easy Digital Downloads fonctionne avec le constructeur de pages Elementor, vous pouvez donc retoucher chaque partie de votre paiement sans toucher au code.
Ce guide vous guide à travers le bloc EDD Checkout, le widget EDD Checkout dans Elementor, et les widgets de paiement individuels que vous utilisez pour retoucher et réorganiser la page.
Prérequis : Les widgets Elementor ci-dessous nécessitent le plugin Elementor installé et activé, et la fonction Contain définie sur Active sous l'écran Elementor Editor » Settings » Feature.
À partir d'un modèle de paiement
Si vous préférez ne pas créer une page de paiement à partir de zéro, vous pouvez importer un modèle de paiement prêt à l'emploi puis le modifier avec tout ce qui précède. Chaque modèle importé place les quatre widgets de paiement pour vous, de sorte que les étapes de style et de réorganisation de ce guide s'appliquent directement à lui.
Les modèles arrivent avec des titres de substitution et un texte d'exemple autour des champs de paiement actifs, donc remplacer ce texte par le vôtre est généralement la première modification que vous effectuerez.
Configuration du bloc EDD Checkout
La page de paiement est créée pour vous lorsque vous activez Easy Digital Downloads. Elle se trouve dans votre liste de pages WordPress sous le nom Paiement, et elle utilise le bloc EDD Checkout.
Remarque : Le bloc EDD Checkout et ses paramètres sont disponibles pour tous les utilisateurs, que vous utilisiez ou non Elementor.
Ouvrez la page de paiement et les paramètres du bloc apparaissent à droite.
Commencez par le paramètre Aperçu en tant qu'invité, qui vous permet de vérifier l'expérience des visiteurs novices et des clients fidèles. Vous bénéficiez également d'un aperçu en temps réel de la page de paiement et du formulaire de carte de crédit directement dans l'éditeur.
Choisissez l'un de vos produits dans le menu Sélectionner un téléchargement pour voir à quoi ressemble le formulaire avec un article dans le panier.
Les propres paramètres du bloc vous permettent de modifier la mise en page, d'ajuster la taille de la vignette du panier et d'afficher ou de masquer le formulaire de réduction.
Modification de votre paiement avec Elementor
Elementor crée son propre widget EDD Checkout, qui vous offre un contrôle de conception beaucoup plus approfondi que le bloc seul.
Accès à l'éditeur Elementor
Avec le plugin Elementor installé et activé, votre page de paiement offre une option Modifier avec Elementor.
La sélectionner ouvre l'éditeur Elementor.
Ajout du widget EDD Checkout
Dans le panneau des éléments à gauche, recherchez EDD Checkout, puis faites-le glisser sur votre page.
Un widget nouvellement ajouté reste vide jusqu'à ce que vous choisissiez une mise en page, ce qui est la prochaine étape. Une fois que vous l'avez fait, il affiche un aperçu en direct de votre formulaire de paiement, vous pouvez donc voir vos modifications au lieu de publier et de vérifier le front-end.
Ce widget est le conteneur de l'ensemble de votre page de paiement. Ses propres paramètres se trouvent sous trois onglets : Mise en page, Style et Avancé.
Choix d'une disposition de paiement
Dans l'onglet Mise en page, ouvrez Mise en page du paiement. Vous avez le choix entre cinq agencements prêts à l'emploi, couvrant des conceptions à une colonne et à deux colonnes, et des bascules pour afficher ou masquer le panier et le formulaire de réduction.
Remarque : Elementor vous avertit que le changement de mise en page remplace tout le contenu du widget. Choisissez votre mise en page avant d'investir du temps dans le style, afin que votre travail soit conservé.
Style du conteneur de paiement
L'onglet Style gère la page de paiement dans son ensemble, avec des sections pour Arrière-plan, Superposition d'arrière-plan, Bordure, Séparateur de forme et Éléments du formulaire.
Shape Divider est celui à connaître, car il ajoute une forme décorative au bord supérieur ou inférieur de votre paiement au lieu d'une bordure plate. Choisissez un bord, puis une forme.
Personnalisation des widgets de paiement individuels
Votre paiement est composé de quatre widgets distincts : le panier, les informations personnelles, les informations de paiement et le formulaire de remise. Chacun possède ses propres paramètres, ce qui vous permet de styliser une partie du paiement sans affecter le reste.
Vous ne trouverez pas ces quatre éléments dans le panneau des éléments, car vous ne les ajoutez pas manuellement. Ils sont inclus avec le widget EDD Checkout. Pour accéder à leurs paramètres, sélectionnez la pièce que vous souhaitez directement sur la page.
Le widget Panier
Dans l'onglet Contenu, le panier vous offre un bouton de bascule En-tête du panier, un bouton de bascule Miniature du panier, et un curseur Taille pour ces miniatures.
Son onglet Style est le plus complet des quatre. Les contrôles sont regroupés en En-tête du panier, Articles du panier, et Lignes de pied de page, afin que vous puissiez styliser les totaux différemment des articles qui les précèdent.
Le widget d'informations personnelles
Ce widget couvre les champs nom et e-mail, ainsi que les liens de connexion et d'inscription. Son onglet Contenu inclut Aperçu en tant qu'invité, Alignement du compte, et une option Nom sur une seule ligne qui place le prénom et le nom sur une seule ligne.
Le widget d'informations de paiement
Celui-ci gère la zone de paiement. Son onglet Style regroupe les contrôles en Bouton d'achat, Sélecteur de passerelle, Méthode de paiement, et Détails de la carte, de sorte que le bouton sur lequel vos clients cliquent puisse être stylisé indépendamment.
Le formulaire de réduction
Le formulaire de remise a un seul paramètre de contenu, Afficher le champ de remise, et un onglet Style complet couvrant le lien de bascule, le champ lui-même et le bouton d'application.
Réorganisation de votre paiement
Étant donné que chaque partie du paiement est son propre widget, vous pouvez modifier l'ordre d'apparition des éléments. Sélectionnez un widget, ouvrez l'onglet Avancé, puis ouvrez Mise en page. Le contrôle Ordre déplace cet élément au début ou à la fin de son conteneur, et une option personnalisée vous permet de définir une position exacte.
Le moyen le plus rapide de sélectionner la pièce souhaitée est le panneau Structure d'Elementor, qui répertorie tous les éléments de la page. La sélection d'un élément le met en surbrillance sur le canevas et charge ses paramètres.
Lorsque vous êtes satisfait du résultat, sélectionnez la flèche à côté de Publier, puis choisissez Enregistrer le brouillon, Enregistrer comme modèle, ou Voir la page. Sélectionnez Publier pour rendre vos modifications publiques.
Dépannage
Si vous ne voyez pas le bloc EDD Checkout ou les paramètres de widget décrits ci-dessus, vous avez plusieurs options à essayer.
La première consiste à vérifier si l’expérience Conteneur Flexbox d’Elementor est activée. Allez dans Elementor » Éditeur » Paramètres » Fonctionnalités et assurez-vous que l’option Conteneur est définie sur Active.
Assurez-vous également que votre plugin Easy Digital Downloads est à jour. Vérifiez les mises à jour sous Tableau de bord » Mises à jour.
Les widgets de paiement individuels et le sélecteur de mise en page nécessitent Easy Digital Downloads 3.7.0 ou une version ultérieure. Les propres widgets d’Elementor nécessitent Elementor 3.35.0 ou une version ultérieure. Sinon, vous pourriez voir un widget nommé EDD Checkout (Legacy). Il continue de fonctionner, et ses paramètres sont regroupés sur un seul widget au lieu d’être répartis sur les quatre décrits ci-dessus. Ajoutez le widget actuel EDD Checkout à une page pour passer aux nouveaux paramètres.
Pour tout ce qui concerne spécifiquement les contrôles d’Elementor, la base de connaissances des widgets Elementor les couvre en détail.
FAQ : Personnalisation d'EDD Checkout avec Elementor
Voici les réponses à quelques questions courantes sur la personnalisation du paiement EDD dans Elementor.
Ai-je besoin de la version payante d'Elementor ?
Non. Le plugin gratuit Elementor suffit pour le widget EDD Checkout et tous les paramètres abordés ici.
Pourquoi ne puis-je pas trouver le formulaire de panier ou de réduction dans le panneau des éléments ?
Ces quatre widgets ne sont pas ajoutés manuellement. Ils font partie du widget EDD Checkout, vous accédez donc à leurs paramètres en les sélectionnant sur la page plutôt qu'en les faisant glisser.
Changer la disposition du paiement annulera-t-il mon style ?
Cela peut arriver. Elementor avertit que le changement de disposition remplace tout le contenu du widget, choisissez donc d'abord votre disposition, puis stylisez-la.
Puis-je changer l'ordre des sections du paiement ?
Oui. Sélectionnez le widget que vous souhaitez déplacer, puis utilisez le contrôle d'ordre dans l'onglet Avancé sous Disposition.
Le paiement fonctionne-t-il toujours sans Elementor ?
Oui. Le bloc EDD Checkout gère votre paiement de manière autonome, et ses paramètres sont disponibles pour tous les utilisateurs. Elementor ajoute un contrôle de conception par-dessus.
