L'extension Popup – Ajouter au panier ajoute une fonctionnalité de popup à Easy Digital Downloads. Lorsqu'elle est activée, après qu'un client clique sur un bouton « Ajouter au panier », une petite fenêtre modale apparaît et lui donne la possibilité d'aller directement à la page de paiement ou de continuer ses achats. Voici un exemple utilisant le style par défaut du thème TwentyFifteen.
Here’s how to configure the popup.
Instructions de configuration pour le Popup – Ajouter au panier
- Une fois installé, localisez les paramètres de cette extension via admin WordPress → Downloads → Settings → Extensions → Popup – Ajouter au panier
- Lorsque vous activez le plugin, le popup sera désactivé par défaut. Cela vous donne la possibilité d'ajuster les paramètres avant de l'activer sur votre site. Le popup peut ensuite être activé en cochant la case Activer le Popup.
Remarque : Lors de l'utilisation de la fonctionnalité « Acheter maintenant » ou de l'extension Téléchargements gratuits, le popup sera automatiquement désactivé afin de ne pas interférer avec les redirections des passerelles de paiement ou les popups de tiers.
Personnalisation
Apparence générale
Aperçu du Popup : Ce bouton vous permet de déclencher un popup sur la page des paramètres pour voir vos modifications avant de les enregistrer. Vous pouvez également utiliser le lien « Aperçu du Popup » sur la barre d'administration. Nous l'avons ajouté afin que vous n'ayez pas à faire défiler constamment vers le haut de la page des paramètres pour prévisualiser le popup.
Notez que l'aperçu peut ne pas être entièrement précis lors de l'utilisation de shortcodes, car certains styles pourraient ne pas être chargés dans l'administration WordPress. Il est recommandé de prévisualiser sur le front-end de votre site une fois que vous avez terminé pour confirmer l'apparence du popup.
Texte du Popup : Ici, vous pouvez définir le texte affiché dans le popup. Si le plugin détecte « %s » (sans les guillemets) n'importe où dans le texte de cette option, il sera remplacé par le nom du téléchargement que l'utilisateur a ajouté à son panier. Vous avez également la possibilité d'ajouter des fichiers multimédias (tels que des images), des intégrations et même des shortcodes dans le popup.
Texte Pluriel du Popup : Similaire au Texte du Popup, ce texte est affiché dans le popup lorsque plusieurs articles ont été ajoutés au panier en même temps. Ceci est typique lorsque vous utilisez des options de prix variables qui permettent d'ajouter plusieurs options simultanément. Encore une fois, vous avez également la possibilité d'ajouter des fichiers multimédias (tels que des images), des intégrations et même des shortcodes dans le popup.
N'oubliez pas que vous pouvez développer la barre d'outils de l'éditeur en cliquant sur le bouton le plus à droite de l'éditeur !
Taille de la police : Ceci vous permet de changer la taille globale de la police utilisée dans le popup. Divers formats CSS sont acceptés ici.
- Les tailles en pixels sont des tailles fixes absolues. Exemple : 12px
- Les tailles en pourcentage sont relatives à la taille de police par défaut du thème. Exemple : 120 % (20 % plus grand que la taille de police du thème).
- Les valeurs « em » sont similaires aux pourcentages, où 1em est la taille de police par défaut. Exemple : 2em (deux fois plus grande que la taille par défaut).
Couleur du texte : La couleur du texte de la popup. Pour définir la couleur, cliquez sur la boîte de couleur pour révéler le sélecteur de couleur.
Couleur de fond : La couleur de fond de la popup. Pour définir la couleur, cliquez sur la boîte de couleur pour révéler le sélecteur de couleur.
Voici un exemple avec la couleur du texte définie sur jaune et la couleur de fond définie sur bleu :
Bordure : Cette option vous permet de styliser la bordure de la popup, qui apparaît autour du bord de la boîte de popup. Les trois options sont la largeur (ou épaisseur), le style et la couleur, respectivement.
Rayon de bordure : Le rayon des coins de la bordure. Plus cette valeur est élevée, plus les coins seront arrondis. Ceci s'applique également si vous avez défini la bordure comme non visible (largeur nulle, style « aucun » ou couleur transparente).
Ombre : Cette option vous permet d'ajouter une ombre à la popup en définissant la quantité d'ombre (taille et épaisseur) et la couleur de l'ombre. L'exemple ci-dessous ajoute une ombre vert foncé avec une quantité d'ombre de 15 :
Couleur de superposition : Le terme superposition fait référence à la couleur qui couvre le reste de la page lorsque la popup est affichée. Vous pouvez changer sa couleur en cliquant sur la boîte de couleur pour révéler le sélecteur de couleur, qui comprend également une option de transparence. L'exemple ci-dessous change la superposition en un orange semi-transparent clair :
Dimensions de la popup
Taille : Ici, vous pouvez contrôler la taille de la popup. Divers formats CSS sont acceptés ici, y compris les pixels et les pourcentages.
- Les tailles en pixels sont des tailles fixes. Exemple : 500px (500 pixels sur l'écran de l'utilisateur)
- Les tailles en pourcentage sont relatives à la taille de la fenêtre du navigateur de l'utilisateur. Exemple : 60 % (60 % de l'écran de l'utilisateur)
Si la largeur ou la hauteur sont laissées vides, la popup les calculera automatiquement pour s'adapter au contenu.
L'exemple suivant montre une popup avec une largeur définie sur 500px et une hauteur laissée vide pour être calculée automatiquement.
Marge intérieure : La marge intérieure fait référence à l'espacement entre le bord de la popup et son contenu, comme montré dans l'image suivante :
La zone en vert est ce à quoi on fait référence comme « marge intérieure ».
Styles des boutons
Bordure du bouton : La bordure des boutons affichés dans la popup, similaire à l'option Bordure précédente. Vous pouvez définir respectivement l'épaisseur, le style et la couleur de la bordure.
Rayon des coins : Le rayon des coins du bouton. Plus cette valeur est élevée, plus les coins seront arrondis. Ceci s'applique également si la bordure du bouton n'est pas visible (largeur définie à 0, style « aucun » ou couleur transparente).
Par exemple : une bordure « pointillée » bleue avec une largeur de 5px et un rayon de coin de 3px :
Marge intérieure du bouton : Similaire à l'option de Marge intérieure de la popup, cela vous permet d'ajuster l'espacement à l'intérieur du bouton. Par exemple, ce qui suit utilise une marge intérieure de 6px en haut et en bas et de 30px à gauche et à droite.
Direction des boutons : Vous pouvez choisir d'afficher les boutons côte à côte horizontalement ou de les empiler verticalement les uns sur les autres. Le réglage par défaut est horizontal.
Alignement des boutons : Vous pouvez choisir entre un alignement à gauche, au centre et à droite. Choisir à gauche ou à droite poussera les boutons sur le côté respectif, tandis que choisir au centre positionnera les boutons au centre de la fenêtre contextuelle.
Ordre des boutons : Cette option vous permet de choisir quel bouton est affiché en premier. Si la Direction des boutons est réglée sur horizontal, cette option déterminera quel bouton est affiché à gauche. Si la Direction des boutons est réglée sur vertical, cette option déterminera quel bouton est affiché en haut.
Bouton de paiement/continuer
Les deux sections suivantes se composent d'options identiques qui vous permettent d'ajuster l'apparence individuelle des deux boutons.
Activé : Choisissez d'afficher ou de masquer le bouton.
Texte : Vous pouvez personnaliser le texte de chaque bouton comme vous le souhaitez.
Couleur du texte : La couleur du texte à l'intérieur du bouton.
Couleur du texte au survol : La couleur du texte à l'intérieur du bouton lorsque le curseur de la souris survole le bouton.
Couleur d'arrière-plan : La couleur d'arrière-plan du bouton.
Couleur d'arrière-plan au survol : La couleur d'arrière-plan du bouton lorsque le curseur de la souris survole le bouton.
L'exemple suivant utilise des boutons blancs avec du texte noir qui deviennent des boutons rouges avec du texte blanc lorsque le curseur de la souris est sur le bouton.
Le sélecteur de couleurs, expliqué
