Documentation Dr Tech

Documentation 9 Page Panier et Checkout 9 Personnaliser ses pages Panier et Checkout

Personnaliser ses pages Panier et Checkout

Sur Dr Tech, vous pouvez personnaliser intégralement le contenu ainsi que le design de vos pages “Panier” et “Checkout”. Vous pouvez ajouter les éléments que vous souhaitez, modifier les couleurs, ainsi que l’organisation générale… C’est vous qui décidez!

Suivez ce tutoriel pour apprendre comment modifier vos pages “Panier” et “Checkout” via notre “Visual Builder”. 🙂

Dans ce tutoriel, nous allons voir les différents modules disponibles pour créer une page “Panier” et/ou “Checkout” personnalisée en partant de 0. Pour vous aider, nous avons mis à votre disposition des modèles prêts à l’emploi. Visualisez-les en cliquant ici.

Voici la page “Panier” que nous allons créer:

Et voici la page “Checkout”:

1. Page “Panier”

1.1 Les modules disponibles

Les modules suivants vous permettent d’afficher les différents éléments de votre page “Panier”.

 

  • “Woo Notice”: permet d’afficher un bandeau avec les différentes infos. Par exemple, lorsque le panier est vide ou encore, un message de confirmation lors de l’ajout d’un code promo.
  • “Woo Cart Product”: permet d’afficher le contenu du panier.
  • “Woo Cart Totals”: permet d’afficher le prix total de ce qu’il y a dans le panier et d’afficher un bouton pour aller sur la page “Checkout”.
  • “Woo Cross sells”: ce module permet d’afficher des produits similaires à ceux ajoutés au panier.

1.2 Utiliser les modules

Rendez-vous dans votre “Dashboard -> Page -> Page Panier -> Éditer avec Divi”. Vous allez ainsi ouvrir le “Visual Builder” sur votre page “Panier”.

Par défaut, les modules sont déjàs présents sur votre page “Panier”; vous n’avez pas besoin de les ajouter. Cependant, vous pouvez choisir de les organiser différement, d’en changer le style ou d’effectuer toute autre modification qu’il vous plaira. 🙂

Par exemple, vous pouvez afficher le panier (via le module “Woo Cart Product”), ainsi que le total du panier (“Woo Cart Totals”) côte à côte, en dessous du module “Woo Notice”.

Pour ce faire, commencez par ajouter une rangée verte avec une colonne unique.

Ajoutez un module “Texte”, écrivez dedans “Panier” et choisissez par exemple la taille de police “Heading 1”.

Ajoutez ensuite le module “Woo Notice”.

Puis sélectionnez “Cart Page” dans “Page Type”.

Et voilà, le haut de votre page est customisé et les informations pourront s’afficher. 🙂

Ajoutez ensuite une nouvelle ligne verte avec 2 colonnes pour afficher le contenu du “Panier”, ainsi que le prix total.

Ajoutez le module “Woo Cart Product” sur la gauche.

Puis, ajoutez le module “Woo Cart Totals” sur la droite.

Et voilà. 🙂

En accédant aux réglages de chaque module, vous aurez plusieurs options pour afficher/cacher des éléments et modifier le style de ces modules.

Pour plus d’informations sur l’utilisation du “Visual Builder”, nous vous invitons à suivre cette vidéo vous montrant en détail les options disponibles.

Une question ? N’hésitez pas à écrire à notre service client, en bas à droite de votre écran. Notre équipe sera râvie de vous aider. 🙂

 

2. Page “Checkout”

1.1 Les modules disponibles

Les modules suivant vous permettent d’afficher les différents éléments de votre page “Checkout”.

  • “Woo Checkout Billing”: permet à votre client d’entrer ses informations de facturation.
  • “Woo Checkout Details”: affiche le contenu du panier.
  • “Woo Checkout Information”: affiche un champ “Informations complémentaires” que votre client  est libre de remplir ou non.
  • “Woo checkout paiement”: affiche les moyens de paiement disponible sur votre boutique et permet à votre client de vous régler.
  • “Woo Checkout Shipping”: permet d’entrer une adresse d’expédition différente de l’adresse de facturation.

1.2 Utiliser les modules

Rendez-vous dans votre “Dashboard -> Page -> Page de paiement -> Éditer avec Divi”. Vous allez ainsi ouvrir le “Visual Builder” sur votre page “Checkout”.

Comme pour votre page panier, par défaut les modules sont déjà présents. Vous n’avez donc pas besoin de les ajouter vous-même.

Dans ce tutoriel, nous allons voir comment créer une page “Checkout” comme celle qui s’affiche ci-dessous:

Commencez par ajouter une rangée (verte) de 2 colonnes.

Ajoutez le module “Woo Checkout Billing” sur la gauche.

Maintenant, pour modifier le style, rendez-vous dans les paramètres de ce module, cliquez sur “Style”, puis sur :

  • “Modèle”: sélectionnez “2Column”.
  • “Champs” : couleur d’arrière plan, blanc.
  • Toujours dans “Champs”, descendez un peu plus bas et mettez la largeur de la bordure sur “1px”.
  • Puis juste au dessus, mettez 10px dans “Champs Rectangle Arrondi.

Ensuite, ajoutez en dessous le module “Woo Checkout Information”.

Sur la droite, ajoutez le module “Woo Checkout Details”.

Puis “Woo Checkout Paiement” en dessous.

Il ne nous reste plus qu’à faire l’effet “Boîte” sur la colonne de droite. Pour cela, allez dans les réglages de votre rangée verte.

Puis, accédez aux réglages de la 2ème colonne.

Ensuite, rendez-vous dans “Style -> Bordure -> et régler la largeur de la bordure sur 1px”.

Toujours dans “Style”, remontez maintenant vers “Espacement”, puis réglez la marge interne sur 15px.

Et voilà! Bravo! 🙂

Vous savez maintenant comment personnaliser vos pages “Panier” et “Checkout”.

Vous pouvez aussi accéder aux modèles prêts à l’emploi en cliquant ici.