La création d'une page de paiement WooCommerce implique généralement une personnalisation substantielle du fichier de modèle PHP dans le backend et une quantité importante de CSS personnalisé. Cependant, cette procédure est devenue amusante et simple à cause des modules Woo de Divi ! Lorsque vous utilisez Divi pour mettre à jour une page WC Checkout, le shortcode WC se transforme en une disposition structurée de modules Woo Checkout dynamiques prêts à être stylisés visuellement à l'aide d'options de conception intégrées sophistiquées. Cela vous offre un contrôle total sur la conception de la page de paiement.
Ce guide vous apprendra à utiliser Divi pour créer une page de paiement WooCommerce complètement unique. Tout d'abord, nous allons créer la page de paiement WooCommerce en utilisant les modules Woo dynamiques accessibles pour la page de paiement. Ensuite, lorsque vous aurez terminé, nous vous montrerons comment appliquer la conception de la page de paiement à un modèle de page de paiement dans Theme Builder. Ainsi, que vous souhaitiez modifier la page de paiement elle-même ou développer un modèle de page de paiement, Divi est là pour vous. Vous serez sur la bonne voie pour créer des pages de paiement visuellement attrayantes en un rien de temps.
Aperçu de la conception
C'est ainsi que sera notre conception.
WooCommerce Check Out Page et Divi
Lorsque vous installez WooCommerce sur votre site Divi, il créera des pages WC principales telles qu'une page de panier d'achat, une page de panier, un processus de paiement et une page de compte. Ensuite, le contenu de la page est déployé à l'aide d'un shortcode dans l'éditeur de blocs WordPress backend.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer Maintenant
Si vous activez Divi Builder sur cette page de paiement, chacun des composants de contenu de la page de paiement WooCommerce sera chargé en tant que modules Divi Woo pouvant être utilisés pour personnaliser la page.
Modules Woo pour concevoir une page de paiement dans Divi
Divi dispose de plusieurs modules essentiels pour ajouter du contenu interactif à un modèle de page. Certains d'entre eux contiennent des modules Woo adaptés à la page de paiement.
Les modules suivants sont essentiels pour créer la page ou le modèle de paiement :
Titre du message : Â lors de la création d'un modèle de page de paiement, cela affichera dynamiquement le titre de la page de paiement.
Notification Woo : Â Ce module peut être affecté à de nombreux types de pages (panier, produit et paiement). Il affichera dynamiquement les notifications importantes à l'utilisateur selon ses besoins.
Facturation Woo Checkout : Â Ce module affiche le formulaire de détails de facturation qui est utilisé pendant le processus de paiement.
Woo Checkout Shipping : Â Ce module affiche le formulaire de détails d'expédition qui apparaît pendant le processus de paiement.
Woo Checkout Information : Â Ce module affiche le formulaire d'informations supplémentaires qui est utilisé tout au long du processus de paiement.
Woo Checkout Details : Â Ce module affiche les détails de la commande lors du paiement, y compris les produits achetés et leurs prix.
Paiement Woo Checkout : Â Ce module affiche les choix de type de paiement et les détails du formulaire de paiement lors du paiement.
Une autre option de module de woo :
Woo Breadcrumbs : Â La barre de navigation WooCommerce Breadcrumbs sera affichée.
Créer une page de paiement ou un modèle
Comme indiqué précédemment, nous pouvons facilement créer une page de paiement WooCommerce personnalisée à l'aide des modules Divi Woo. Vous pouvez cependant utiliser le même processus de conception pour créer un modèle de paiement personnalisé. Ce didacticiel créera une mise en page de page de paiement personnalisée pour la page de paiement. Ensuite, à l'aide de Divi Theme Builder, nous vous montrerons comment tirer parti de la mise en page de page de paiement personnalisée pour créer un modèle de page de paiement.
Utiliser Divi pour créer une mise en page de caisse WooCommerce
Le but de ce didacticiel sur la page de paiement WooCommerce est de développer une mise en page personnalisée pour la page de paiement WooCommerce, qui s'appelle la page de paiement WooCommerce dans WooCommerce. À la fin de la leçon, nous vous montrerons comment enregistrer et importer sans effort cette présentation de page de paiement dans le générateur de thèmes pour créer un nouveau modèle de page de paiement.
Modification de la page de paiement WooCommerce
Cliquez pour modifier la page de paiement WooCommerce à partir du tableau de bord WordPress. La page contiendra le shortcode utilisé pour produire le contenu de la page de paiement par défaut.
Cliquez sur l'option Utiliser Divi Builder en haut de l'éditeur de page.
Sélectionnez modifier avec le constructeur Divi.
Commencer à partir de zéro
Comme indiqué précédemment, la page se chargera avec tous les modules Divi personnalisables (y compris les modules Woo cruciaux) qui composent le contenu de la page de paiement. Bien sûr, si vous le souhaitez, vous pouvez utiliser la mise en page existante et commencer à modifier les modules déjà présents. Mais pour ce guide, nous partirons de zéro.
Entrez dans le menu d'options en bas de la page et sélectionnez OUI pour le bouton Effacer la mise en page (l'icône de la corbeille) pour effacer la mise en page.
Contexte de la section
Pour commencer, ajoutez une couleur d'arrière-plan à une nouvelle section régulière comme suit :
- Couleur d'arrière-plan : #264653
Ligne et colonne
La prochaine étape consistera à ajouter une ligne à une colonne à cette section.
Création du titre de la page de paiement dynamique
Pour rendre le titre de la page dynamique pour la page de paiement, ajoutez un module de titre de publication à la colonne.
Contenu du titre de l'article
Dans les paramètres du titre de la publication, mettez à jour les éléments pour afficher uniquement le titre comme suit :
- Titre du spectacle : OUI
- Afficher la méta : NON
- Afficher l'image en vedette : NON
Texte du titre du message
Pour styliser le texte du titre du message, mettez à jour les éléments suivants sous l'onglet Conception :
- Police du titre : DM Serif Display
- Couleur du texte du titre : #e9c46a
- Taille du texte du titre : 80px (ordinateur de bureau), 60px (tablette), 42px (téléphone)
- Hauteur de la ligne de titre : 1,2 em
Module d'avis dynamique Woo
C'est toujours une bonne idée de placer le module Woo Notice en haut de la page pour voir les notifications lors de l'engagement avec la page de paiement. Gardez à l'esprit que nous créons des avis qui ne seront affichés qu'en cas de besoin.
Pour ajouter le module Woo Notice, accédez au module de titre de publication et cliquez pour ajouter un nouveau module Woo Notice.
Woo Notice Type de page et arrière-plan
Ensuite, mettez à jour le type de page et la couleur d'arrière-plan de la notification Woo comme suit :
- Type de page : page de paiement
- Couleur de fond : #2a9d8f
Texte du titre
Dans l'onglet Conception, mettez à jour les paramètres suivants.
- Police du titre : Roboto
- Poids de la police du titre : moyen
- Couleur du texte du titre : #e9c46a
- Taille du texte du titre : 14 px
- Hauteur de la ligne de titre : 1,8 em
- Couleur du texte du lien : #f4a261
Champs de notification Woo
Les champs et les noms de champs pour les éléments tels qu'un formulaire de connexion et un code de coupon sont inclus dans les avis de la page de paiement. Pour modifier le style des libellés de ces champs, effectuez les modifications suivantes :
- Couleur de l'indicateur de champ obligatoire : #e9c46a
- Police d'étiquette de champ : Roboto
- Poids de la police du libellé du champ : gras
- Couleur de l'espace réservé : #e9c46a
- Couleur d'arrière-plan des champs : transparent
- Couleur du texte des champs : #e9c46a
- Champs Focus Couleur du texte : #e9c46a
- Remplissage des champs : 12 pixels en haut, 12 pixels en bas
- Largeur de la bordure des champs : 1px
- Couleur de la bordure des champs : rgba(255,255,255,0.32)
Bouton de notification Woo
Il est temps de personnaliser les boutons.
- Utiliser des styles personnalisés pour le bouton : OUI
- Taille du texte du bouton : 14 px
- Couleur du texte du bouton : #e9c46a
- Couleur d'arrière-plan du bouton : #2a9d8f
- Largeur de la bordure du bouton : 1px
- Couleur de la bordure du bouton : #e9c46a
- Rayon de la bordure du bouton : 0px
- Espacement des lettres des boutons : 1px
- Police des boutons : Roboto
- Poids de la police du bouton : gras
- Style de police des boutons : TT
- Remplissage des boutons : 12 pixels en haut, 12 pixels en bas, 24 pixels à gauche, 24 pixels à droite
Formulaire de notification Woo
Sous le groupe d'options Formulaire, chacun des formulaires de notification peut être stylisé. Mettez à jour les éléments suivants pour donner aux formulaires une bordure claire :
- Forme des coins arrondis : 0px
- Largeur de la bordure du formulaire : 1px
- Couleur de la bordure du formulaire : rgba(255,255,255,0.32)
Woo Notice Box Ombre
Pour ajouter un design semblable à une bordure supérieure dans la barre de notification woo, mettez à jour les options d'ombre de la boîte comme suit :
- Box Shadow : voir capture d'écran
- Position horizontale de l'ombre de la boîte : 0px
- Position verticale de l'ombre de la boîte : 3px
- Couleur de l'ombre : #999e75
Module de facturation Woo Checkout
Maintenant que nous avons mis en place notre en-tête de page et nos avis, nous pouvons ajouter le contenu Woo Checkout Billing, qui est un autre élément essentiel de la page de paiement.
Créez une nouvelle ligne avec une disposition de colonnes trois cinquièmes-deux cinquièmes avant d'ajouter le matériel de facturation.
Ajoutez un module de facturation Woo Checkout dans la colonne 1.
Texte du titre de facturation Woo Checkout
À partir du module de facturation Woo Checkout, ouvrez les paramètres et ajustez ce qui suit sous l'onglet conception.
- Police du titre : DM Serif Display
- Couleur du texte du titre : #fff
- Taille du texte du titre : 30px (ordinateur de bureau), 24px (tablette), 18px (téléphone)
- Hauteur de la ligne de titre : 1.4em
Champ de facturation Woo Checkout et étiquettes de champ
Comme le module Notice, ce module inclut des options pour styliser le champ et les étiquettes de champ. Parce que nous voulons que tous nos champs et étiquettes de champ soient cohérents sur toute la page, nous pouvons copier les styles de champ et d'étiquette de champ à partir du module Avis et les coller dans le module Facturation Woo Checkout.
Voici comment procéder :
- Ouvrez les paramètres du module de notification en haut de la page.
- Sous l'onglet Conception, cliquez avec le bouton droit sur le groupe d'options Étiquettes de champ.
- Dans le menu contextuel, sélectionnez "Copier les styles d'étiquettes de champ".
Collez le style copié dans le module nouvellement ajouté.
Et ça ressemblera à quelque chose comme ça.
Avis de formulaire de facturation Woo Checkout
L'avis de formulaire est responsable de l'affichage dynamique de toute notification ou erreur lors du remplissage du formulaire. Pour styliser l'avis de formulaire, accédez aux paramètres de facturation de Woo Checkout et apportez les modifications suivantes :
- Couleur d'arrière-plan de l'avis de formulaire : #e58991
- Remplissage de l'avis de formulaire : 8 pixels en haut, 8 pixels en bas
- Police de l'avis de formulaire : Roboto
- Taille du texte de l'avis de formulaire : 14px
Espacement et bordure de facturation Woo Checkout
Pour terminer le design, ajoutons un peu de rembourrage et une bordure légère au module comme suit :
- Remplissage : 16px en haut, 16px en bas, 16px à gauche, 16px à droite
- Largeur de la bordure : 1px
- Couleur de la bordure : rgba(255,255,255,0.1)
Informations sur l'expédition et le paiement Woo Checkout
Le module Woo Checkout Shipping et le module Woo Checkout Information sont des composants essentiels pour créer le modèle de page de paiement. Avant de terminer le paiement, le module Woo Checkout Shipping affiche le formulaire requis pour saisir les détails d'expédition. De plus, le module Woo Checkout Information affiche un formulaire de saisie qui permet aux utilisateurs de fournir des informations supplémentaires avant de passer à la caisse.
Ajout de modules
Maintenant, allez-y et ajoutez un module d'expédition de caisse Woo.
Ajoutez également un module d'informations Woo Checkout.
Chaque module woo (Checkout Shipping and Checkout Information) doit ressembler au module Woo Checkout Billing. Nous pouvons copier les styles dont nous avons besoin pour chacun à chacun. Copiez et collez le design ici.
Module de détails de caisse Woo
Maintenant que nous avons conçu notre contenu d'expédition et d'informations supplémentaires, nous sommes prêts à ajouter le contenu Woo Checkout Details. Il s'agit d'un autre élément important de la page de paiement qui affiche les détails du bon de commande. Il contient une liste de produits, des sous-totaux et le prix total de l'achat. Il montre également toutes les économies de coupon qui ont été appliquées et peuvent être retirées via un lien.
Ajoutez un nouveau module Woo Checkout Details aux détails de la caisse dans la colonne 2 de la même ligne.
Woo Checkout Détails Titre Texte
Mettez à jour les paramètres du texte du titre comme suit :
- Police du titre : DM Serif Display
- Poids de la police du titre : gras
- Couleur du texte du titre : #e9c46a
- Taille du texte du titre : 24px (ordinateur de bureau), 22px (tablette), 18px (téléphone)
- Hauteur de la ligne de titre : 1.4em
Étiquette de colonne Woo Checkout Details
Stylisons les libellés des colonnes :
- Police d'étiquette de colonne : Roboto
- Poids de la police de l'étiquette de la colonne : gras
- Couleur du texte de l'étiquette de colonne : #ddb17c
Woo Checkout Détails Corps du texte
Pour styliser le corps du texte qui cible les éléments sous chaque colonne de la liste, mettez à jour les éléments suivants :
- Police de caractère : Roboto
- Couleur du corps du texte : #fff
Sous l'onglet Lien, mettez à jour la couleur du texte du lien :
- Couleur du texte du lien : #e0816b
Bordure de tableau Woo Checkout Details
Pour cette conception, nous allons supprimer complètement la bordure de la table. Pour ce faire, mettez à jour les éléments suivants :
- Largeur de la bordure du tableau : 0px
Cellule du tableau des détails de la caisse Woo
Pour styliser les cellules du tableau, mettez à jour les éléments suivants :
- Remplissage des cellules du tableau : 0 px à gauche
- Style de bordure de cellule de tableau : aucun
Woo Checkout Détails Rembourrage et bordure
Pour garder la conception du module cohérente avec les autres modules, mettez à jour le remplissage et la bordure comme suit :
- Remplissage : 16px en haut, 16px en bas, 16px à gauche, 16px à droite
- Largeur de la bordure : 1px
- Couleur de la bordure : rgba(255,255,255,0.1)
Module de paiement Woo Checkout
Nous sommes prêts à ajouter le contenu Woo Checkout Details maintenant que nous avons créé notre contenu d'expédition et d'informations supplémentaires. Il s'agit d'une autre partie cruciale de la page de paiement qui affiche les détails du bon de commande. Il comprend une liste de produits, des sous-totaux et le prix d'achat final. Il affiche également toutes les économies de coupon qui ont été appliquées et peuvent être retirées en cliquant sur un lien.
Ajoutez un nouveau module Woo Checkout Details aux détails de la caisse dans la colonne 2 de la même ligne.
Effectuez les réglages suivants.
- Couleur d'arrière-plan de l'avis de formulaire : #E58991
- Police d'avis de formulaire : Roboto
- Poids de la police d'avis de formulaire : gras
- Taille de la police de l'avis de formulaire : 16px
- Réglage des boutons : comme précédemment
- Espacement : 0px (Haut, Bas, Gauche, Droite)
Résultat final
Voici à quoi ressemble notre page de paiement finale.
Emballer
Avec le constructeur de pages robuste de Divi et les modules Woo intuitifs, la création d'un modèle de page de paiement WooCommerce personnalisé est grandement simplifiée et amplifiée. Ce didacticiel s'est concentré sur l'intégration des éléments essentiels qui composent une page de paiement. Cependant, gardez à l'esprit que tous les autres modules et fonctionnalités uniques de Divi sont à votre disposition pour faire passer vos pages de paiement au niveau supérieur. Cela devrait vous aider à améliorer vos compétences en conception Divi et, plus important encore, conduire à plus de conversions.
