Comment créer un modèle de page de paiement woocommerce en utilisant Divi

La conception d’une page de paiement woocommerce nécessite généralement une personnalisation avancée des fichiers de modèles PHP à l’arrière – plan et fournit un bon CSS personnalisé. Mais avec le module Divi Woo, le processus devient simple et amusant! Lorsque vous modifiez la page de paiement WC en utilisant Divi, le raccourci WC devient une disposition structurée du module de facturation dynamique Woo, qui peut être visualisée avec de puissantes options de conception intégrées. Cela vous donne un contrôle total sur la conception de la page de paiement. Dans ce tutoriel, nous vous montrerons comment utiliser Divi pour créer une page de paiement woocommerce entièrement personnalisée à partir de zéro. Tout d’abord, nous concevons la page de paiement woocommerce en utilisant le module dynamique Woo disponible sur la page de paiement. Une fois terminé, nous vous montrerons comment ajouter la conception de la page de paiement au modèle de page de paiement dans Theme Builder. Par conséquent, Divi vous aidera, que vous personnalisiez la page de paiement réelle ou que vous créiez un modèle de page de paiement. Vous serez bientôt en mesure de concevoir des pages de paiement étonnantes.
Allons – y! Voici une vue rapide de la page de paiement par défaut de Divi par rapport à la nouvelle page de paiement que nous allons concevoir dans ce tutoriel. Voici un aperçu plus détaillé de la conception des pages de paiement sur le Bureau et les appareils mobiles. Vous pouvez également voir une démonstration en direct de la conception de cette page de paiement. Téléchargement gratuit Checkout mise en page pour en savoir plus sur la conception de modèles de page Checkout dans ce tutoriel, vous devez d’abord télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit de mise en page Divi ou
(En milliers de dollars des États – Unis) Les modules Woo utilisés pour la conception des pages de paye dans Divi Divi sont accompagnés de divers modules qui sont essentiels pour ajouter du contenu dynamique aux modèles de page. Certains d’entre eux comprennent des modules Woo spécifiques à la page de paiement. Les formulaires essentiels à la création d’une page ou d’un modèle de paiement comprennent: publier le titre: lorsque vous créez un modèle de page de paiement, il affiche dynamiquement le titre de la page de paiement. Woo notice – ce module peut être configuré pour différents types de pages (page panier, page produit, page paiement). Il affiche dynamiquement les notifications importantes à l’utilisateur au besoin. Facturation de clôture en bois: ce formulaire affiche le formulaire de détails de facturation utilisé lors de la clôture. Expédition de vérification du bois – ce formulaire affiche le formulaire de détails d’expédition utilisé lors de la vérification. Woo Checkout info – ce formulaire affiche les formulaires d’information supplémentaires utilisés lors de la fermeture. Woo Checkout details – ce formulaire affiche les détails de la commande, y compris les produits achetés lors de la clôture et leur prix. Paiement de vérification du bois: Ce module affiche la sélection du type de paiement et les détails du formulaire de paiement à la clôture. Un autre module Woo optionnel:
Woo Crumb – Ceci affiche la barre de navigation woocommerce Crumb. Concevoir une page de paiement ou un modèle comme décrit ci – dessus, nous pouvons facilement concevoir une page de caisse woocommerce personnalisée en utilisant le module Divi woo. Cependant, vous pouvez choisir de créer un modèle de vérification personnalisé en utilisant le même processus de conception. Pour ce tutoriel, nous créerons une mise en page de paiement personnalisée pour la page de paiement. Nous vous montrerons ensuite comment créer un modèle de page en utilisant une mise en page de paiement personnalisée
Payez avec Divi Theme Builder.
Utilisez Divi pour concevoir la mise en page des paiements de woocommerce pour la page des paiements de woocommerce dans ce tutoriel, l’objectif est de créer une mise en page personnalisée pour la page des paiements de woocommerce, qui est spécifiée comme la page des paiements de woocommerce dans woocommerce. À la fin de ce tutoriel, nous vous montrerons comment enregistrer et importer facilement cette mise en page de paiement pour créer un nouveau modèle de page de paiement en utilisant Theme Builder. Pour commencer: modifier la page de paiement woocommerce à partir du tableau de bord WordPress, cliquez sur modifier la page de paiement woocommerce. Par défaut, la page ne contiendra que du Code court pour générer le contenu de la page de paiement.
Cliquez sur le bouton utiliser Divi Builder en haut de l’éditeur de page. Ensuite, utilisez Divi Builder pour démarrer Divi Builder en cliquant sur le bouton Édition. Comme indiqué ci – dessus, la page chargera tous les modules Divi personnalisables (y compris le module wookey) qui composent le contenu de la page de paiement. Si nécessaire, vous pouvez utiliser une mise en page existante et commencer à personnaliser le formulaire existant. Mais pour ce tutoriel, nous commencerons à zéro. Pour effacer la mise en page, ouvrez le menu paramètres au bas de la page, cliquez sur le bouton Supprimer la mise en page (icône corbeille) et Sélectionnez Oui. Pour commencer à créer un fond de section, de ligne et de colonne pour une section, ajoutez une couleur de fond à une nouvelle section normale comme suit: couleur de fond: \ # f7f3f0 Lignes et colonnes, puis ajouter une ligne de la colonne à la Section Créer un titre de page de paiement dynamique pour créer un titre de page dynamique pour une page de paiement, ajoutez un formulaire de titre de poste à la colonne. Konton.
RNA Link Text: Link font Weight: bold Link text color: # 999e75 Étiquettes de champs d’alerte en bois page de paye les alertes comprennent des étiquettes de champs pour les champs et les articles, comme les formulaires d’inscription et les codes de coupon. Pour modifier le style de l’étiquette de champ pour ces champs, mettre à jour ce qui suit: couleur requise de l’indicateur de champ: # FFF caractères de l’étiquette de champ: poids de la police de l’étiquette de champ Robot: gras Woo Alert Fields ensuite, mettez à jour les options de style de champ comme suit: couleur du substituant: # FFF Field Background color: transparent Field text color: # FFF Field text Color Focus: # FFF Field fill: 12px top, 12px Bottom Field Border width: 1px Field Border color: rgba (255255255,0,32) Boutons d’alerte en bois chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 14px couleur du texte du bouton: # FFF couleur de fond du bouton: # 999e75 largeur de la bordure du bouton: 1px couleur de la bordure du bouton: # 999e75 rayon de la bordure du bouton: 0px espacement des lettres du bouton: 1px caractères du bouton: Robot poids de la police du bouton: gras style de police du bouton: tt remplissage du bouton: 12px up, 12px down, 24px left, 24px right Les modules d’alarme Woo peuvent définir chaque module d’alarme dans le Groupe d’options du module. Pour fournir des bords clairs au module, mettre à jour ce qui suit: forme filet: 0px largeur du bord du module: 1px couleur du bord du module: rgba (255255255,0,32) Shadow of Woo notice Box pour fournir une conception similaire au bord supérieur de la barre d’avertissement Woo, mettre à jour les options d’ombre de cadre comme suit: Shadows de cadre: voir la position horizontale de l’ombre de cadre de capture d’écran: 0px position verticale de l’ombre de cadre: 3px Shadow color: # 999e75 Woo Checkout Billing form design maintenant que le titre de notre page et les alertes sont prêts, nous pouvons ajouter du contenu
Commençons par le style de texte du titre. Ouvrez les paramètres du module de facturation woocheck et copiez le style de texte du titre en utilisant le menu raccourci. Sélectionnez ensuite les modules d’expédition et d’information Woo Check en utilisant la fonction multi – select. Collez ensuite le style de texte du titre dans l’un des modules sélectionnés. Copier et coller les styles d’étiquettes de champ répéter la même procédure pour copier et coller les styles d’étiquettes de champ. Ouvrez les paramètres du module de facturation woocheck et copiez les styles d’étiquettes de champ en utilisant le menu raccourci. Sélectionnez ensuite les modules d’expédition et d’information Woo Check en utilisant la fonction multi – select. Collez ensuite le style de l’étiquette de champ dans l’un des modules sélectionnés. Copier et coller les styles de champs répétez la même procédure pour copier et coller les styles de champs. Ouvrez les paramètres du module de facturation woocheck et copiez les styles de champs en utilisant le menu raccourci. Sélectionnez ensuite les modules d’expédition et d’information Woo Check en utilisant la fonction multi – select. Le style de champ est ensuite collé à l’un des modules sélectionnés. Copier et coller le remplissage répéter la même procédure pour copier et coller le remplissage. Ouvrez les paramètres du module de facturation woocheck et copiez le remplissage à l’aide du menu raccourci. Sélectionnez ensuite les modules d’expédition et d’information Woo Check en utilisant la fonction multi – select et collez le remplissage sur l’un des modules sélectionnés. Copier et coller les bordures répétez la même procédure pour copier et coller les bordures. Ouvrez les paramètres du module de facturation woocheck et Copiez la bordure en utilisant le menu raccourci. Alors utilisez funzi
Ckout pour appliquer un style aux cellules de table d’une table, mettre à jour ce qui suit: remplissage des cellules de table: 0px style de bordure des cellules de table de gauche: aucune ceci Aligne le contenu des cellules de table de gauche et supprime complètement la bordure des cellules de table. Woocheckout details padding and Edge to keep the module design consistent with other modules, Update padding and Edges as follows: padding: 16px top, 16px Bottom, 16px left, 16px right Edge width: 1px Edge color: rgba (255255255,0,1) Woo check – out payment Module Design Now our check – out details are completed, we are ready to add Woo check – out payment content. C’est le dernier élément clé de la page de paiement. Comprend des boutons d’option optionnels et des boutons de paiement principaux pour différentes options de paiement. Il comprend également des alertes sur les modules intégrés. Pour ajouter du contenu de paiement à un caissier, ajoutez un nouveau module de paiement de caissier Woo sous détails de caissier dans la colonne 2. Woo Checkout payment Fund ouvre les paramètres Woo Checkout payment et spécifie un fond transparent pour le formulaire: couleur de fond: transparent Woo Checkout payment Body text then Update text BODY STYLE as follows: body Character: Robot Update Link text Color in the link Tab: Link text color: # 999e75 Woo Checkout payment option buttons Next, Update options button style as follows: options button text color: # FFF options button Characters: roboto options button font: bold Woo Checkout payment tips recommande une zone de texte qui s’affiche lorsque le bouton Options est ouvert. Nous avons mis à jour le style de description de commande comme suit: des
Script Command Background color: transparent Edge Command Description: – 10px top, 17px left prompt Characters: Robot Puisque le module de paiement de la vérification de bois partage les mêmes options de notification de formulaire, nous pouvons copier les styles de formulaire de notification existants du module de facturation de la vérification de bois et les coller dans le module de paiement de la vérification de bois. Woo check pour définir les styles de boutons de paiement pour le module de paiement Woo caissier, copiez les styles de boutons du module d’alerte woo. Ensuite, collez le style du bouton dans le module de paiement woocheckout. Pour compléter le dessin, ajoutez le remplissage et les bordures comme suit: remplissage: 16px en haut, 16px en bas, 16px à gauche, 16px à droite filet: 0px largeur du bord: 1px couleur du bord: rgba (255255255,0,1) Voilà à quoi ressemble notre page de paiement! Ajoutez plus au besoin à ce stade, nous avons tous les éléments clés du modèle de page de paiement. Mais tu n’as pas à t’arrêter ici. Vous pouvez ajouter n’importe quoi à la page au besoin. Pour une présentation en vedette de ce modèle de page de paiement (disponible en téléchargement ici), nous avons inclus une barre latérale fixe avec quelques liens de navigation personnalisés. Créer un modèle personnalisé pour une page de paiement si vous créez un modèle de page de paiement, vous pouvez utiliser Theme Builder pour créer une mise en page du modèle de page de paiement, comme nous l’avons fait avec le modèle de page de paiement. Cependant, comme nous avons déjà une mise en page conçue pour ce tutoriel, nous pouvons simplement l’ajouter au modèle de page de paiement. Enregistrer la mise en page woocommerce dans la Bibliothèque Divi avant d’ajouter la mise en page de paiement à un m
Pour les pages de paiement, nous devons d’abord enregistrer la mise en page dans la Bibliothèque Divi. Pour ce faire, ouvrez le menu de configuration Divi Builder au bas de la page de paiement. Cliquez sur l’icône ajouter à la bibliothèque, nommez la mise en page, puis cliquez sur enregistrer à la bibliothèque. Créer un nouveau modèle de page de paiement après avoir sauvegardé la mise en page de la page de paiement dans la bibliothèque, nous pouvons créer un nouveau modèle de page de paiement. Voici comment: Allez sur le tableau de bord WordPress, puis allez sur Divi > Theme Builder. Cliquez ensuite sur l’icône ajouter un nouveau modèle plus dans la zone vide de la boîte grise pour ajouter un nouveau modèle. En mode configuration du modèle, sous l’onglet temps d’utilisation, sélectionnez caissier dans la liste des pages woocommerce. Enfin, cliquez sur créer un modèle. Lorsque vous ajoutez une mise en page de paiement à un modèle de paiement créez un nouveau modèle checkout, cliquez sur la zone ajouter un corps personnalisé pour le modèle. Dans la liste déroulante, sélectionnez ajouter à partir de la bibliothèque. À partir de l’onglet mise en page enregistrée de la fenêtre contextuelle upload from Library, sélectionnez la mise en page de la page de paiement enregistrée dans la bibliothèque. Une fois terminé, le modèle Checkout est disponible dans Theme Builder. Pour modifier un modèle, cliquez sur l’icône Édition dans la zone corps du modèle. Résultats finaux examinons les résultats finaux du modèle de page de paiement. Voici comment il se présente sur les tablettes et les appareils mobiles. Grâce au puissant générateur de page visuelle Divi et au module Woo intuitif, le processus de conception de modèles de page de paiement woocommerce personnalisés est grandement simplifié et amplifié. Dans ce tutoriel, nous avons mis en évidence les éléments clés qui composent la page des paiements. Mais rappelez – vous, tout le reste