Optimiser la fin de processus de commande Prestashop

L’interface de votre boutique en ligne est très importante pour l’acheteur, car elle peut vraiment déterminer la validation de la commande où non, de mon côté j’aime bien limiter les éléments de l’interface pour être toujours le plus clair possible.

Prestashop par défaut

Est-ce que vous avez déjà remarqué le cas suivant… quand vous faites une commande sous Prestashop, vous passez d’abord par l’étape du récapitulatif panier, création du compte, définition de l’adresse, choix du transporteur puis enfin sélection de la méthode de paiement. A l’étape 5 (paiement) on remontre le panier au client.

A l’étape 1 de la commande on montre le détail du panier, ce qui semble assez logique.

A l’étape 5 le tableau est affiché à nouveau… Est-ce une bonne idée ?

Pourquoi retirer le tableau à l’étape 5

Ce qui est important c’est d’éviter que l’acheteur soit distrait durant la validation de la commande. En lui remontrant le panier, il pourrait croire qu’il est revenu en arrière où qu’on lui a ajouté quelque chose dedans (vente forcée). L’acheteur ne focalise pas en priorité sur les méthodes de paiements alors que c’est le but de l’étape n° 5.

La priorité visuelle doit être donnée sur le bloc en rouge, ce qui n’est pas le cas par défaut.

C’est d’autant plus vrai que sur mobile on ne voit pas les méthodes sans scroller.

Optimisation en 1 ligne de code

Actuellement je conseille donc d’ajouter une nouvelle ligne dans le fichier global.css de votre thème (/themes/votre-theme/css/global.css) qui va masquer l’affichage du tableau à l’étape n°5. Pour cela rien de plus facile il suffit d’ajouter le code suivant :

 /* Webbax - masquer tableau étape 5 */
 #order .paiement_block #order-detail-content{display:none;}

Une fois le changement effectué, faites un CTRL+R ou F5 de manière à bien actualiser la modification de votre fichier global.css.

Plus distraction possible pour le client, on focalise sur le paiement.

Sur le mobile cela a un impact très positif sur l’ergonomie, car la place est limitée.

Pourquoi le tableau est affiché par défaut

Pour plusieurs points, pour commencer le but initial c’est de bien montrer le montant total au client avant la validation (mais ça de toute façon il le verra à l’étape suivante du paiement, selon la méthode choisie). D’autre part ça laisse la possibilité au client d’utiliser un bon de réduction dans ce récapitulatif (par contre il ne peut pas faire de suppression de produits). Encore une fois je pense ça peut provoquer la « panique » chez certains, de ne plus pouvoir « éditer » le panier, donc autant le retirer.

Bilan

Laisser ou retirer ? Cette modification je l’applique régulièrement sur les boutiques des clients et dans le 95% des cas le marchand approuve le changement. Il faudrait idéalement appliquer ce raisonnement sur l’ensemble de la boutique pour éviter aussi de surcharger l’interface responsive du mobile. A noter aussi qu’il est possible de définir un masquage de certains éléments avec des règles CSS en fonction de la résolution de l’écran… (je conseille de retirer tout le superflus sur les mobiles). Bonne optimisation à tous !

1 commentaire sur “Optimiser la fin de processus de commande Prestashop”

  1. Super

    Je voudrai ajouter une image Sur mon mode de payment, jarrive a lê faire Sur mon browser , mês lê problema je narrive pás a trouvé lê fichier sir mon server.

    Mercie

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *