Changer l'ordre des champs du formulaire d'adresse PrestaShop

Introduction

Le formulaire d'adresse client est l'un des éléments les plus sensibles d'une boutique PrestaShop. Son organisation impacte directement le taux de complétion des commandes. Pourtant, l'ordre par défaut des champs (nom, prénom, adresse, code postal, ville, pays) ne correspond pas toujours aux conventions locales ni aux attentes UX de votre cible.

Réorganiser ces champs semble simple en théorie — il suffit de déplacer des blocs dans un template — mais en pratique, plusieurs pièges classiques empêchent les modifications de s'afficher. Voici un guide complet pour y parvenir proprement, de PrestaShop 1.6 à 8.x.

Comprendre l'architecture du formulaire d'adresse

PrestaShop 1.6 : templates Smarty directs

Sur PrestaShop 1.6, le formulaire d'adresse est rendu par le template address.tpl situé dans le dossier de votre thème :

themes/votre-theme/address.tpl

Chaque champ est un bloc HTML classique avec des conditions Smarty {if} qui contrôlent l'affichage selon la configuration du pays sélectionné. L'ordre des champs correspond directement à l'ordre des blocs dans le fichier .tpl.

PrestaShop 1.7 et 8.x : le système FormFields

À partir de la version 1.7, PrestaShop a introduit un système plus structuré. Le formulaire d'adresse est géré par la classe CustomerAddressFormatter (située dans src/Core/Form/IdentityConstraint/) qui retourne un objet FormFields contenant la liste ordonnée des champs.

Le template concerné est désormais :

themes/votre-theme/templates/customer/_partials/address-form.tpl

Le rendu des champs se fait via une boucle Smarty :

{foreach from=$formFields item="field"}
  {form_field field=$field}
{/foreach}

Ce changement architectural signifie que déplacer des blocs HTML dans le template ne suffit plus sur 1.7+. Il faut intervenir en amont, au niveau du Formatter.

Méthode 1 : réorganisation dans le template (PrestaShop 1.6)

Sur PrestaShop 1.6, la manipulation est directe :

1. Localisez le fichier `address.tpl` **dans votre thème actif** (pas dans le thème par défaut)
2. Identifiez les blocs de champs (chacun est généralement encapsulé dans une `
   `)
3. Déplacez les blocs dans l'ordre souhaité

{* Exemple : placer le code postal avant la ville *}
<div class="form-group">
    <label for="postcode">{l s='Zip/Postal Code'}</label>
    <input type="text" id="postcode" name="postcode" value="{$address->postcode}" />
</div>
<div class="form-group">
    <label for="city">{l s='City'}</label>
    <input type="text" id="city" name="city" value="{$address->city}" />
</div>

Attention aux conditions `{if}`

Certains champs sont encapsulés dans des conditions Smarty qui dépendent de la configuration du pays :

{if $field_is_required}
    {* bloc du champ *}
{/if}

Si vous déplacez un champ sans conserver son bloc conditionnel englobant, vous risquez soit de casser l'affichage, soit de rendre un champ toujours visible alors qu'il devrait être masqué pour certains pays. Veillez à toujours déplacer le bloc {if}...{/if} complet.

Méthode 2 : override du Formatter (PrestaShop 1.7 / 8.x)

Sur les versions modernes, la méthode recommandée consiste à créer un override ou un module qui modifie l'ordre des champs retournés par le CustomerAddressFormatter.

Via un module (méthode recommandée)

Créez un module qui se greffe sur le hook actionValidateCustomerAddressForm ou qui utilise le système de décoration de service :

<?php
// modules/monmodule/monmodule.php

use PrestaShop\PrestaShop\Core\Form\FormField;

public function hookAdditionalCustomerAddressFields($params)
{
    // Récupérer les champs existants
    $formFields = $params['fields'];
    
    // Définir l'ordre souhaité
    $order = [
        'company',
        'firstname',
        'lastname',
        'address1',
        'address2',
        'postcode',
        'city',
        'Country:name',
        'phone',
    ];
    
    $sorted = [];
    foreach ($order as $fieldName) {
        if (isset($formFields[$fieldName])) {
            $sorted[$fieldName] = $formFields[$fieldName];
        }
    }
    
    // Ajouter les champs non listés à la fin
    foreach ($formFields as $key => $field) {
        if (!isset($sorted[$key])) {
            $sorted[$key] = $field;
        }
    }
    
    $params['fields'] = $sorted;
}

Via un override du Formatter

Pour un contrôle total, vous pouvez surcharger CustomerAddressFormatter :

<?php
// override/classes/form/CustomerAddressFormatter.php
// PrestaShop 8.x

use PrestaShop\PrestaShop\Core\Form\IdentityConstraint\CustomerAddressFormatter 
    as BaseFormatter;

class CustomerAddressFormatterOverride extends BaseFormatter
{
    public function getFormat(): array
    {
        $fields = parent::getFormat();
        
        // Réorganiser selon vos besoins
        $desiredOrder = [
            'firstname', 'lastname', 'company', 'vat_number',
            'address1', 'address2', 'postcode', 'city',
            'Country:name', 'State:name', 'phone', 'phone_mobile',
        ];
        
        $sorted = [];
        foreach ($desiredOrder as $name) {
            if (isset($fields[$name])) {
                $sorted[$name] = $fields[$name];
            }
        }
        
        return $sorted + $fields;
    }
}

N'oubliez pas de supprimer le fichier cache après création de l'override :

rm -rf var/cache/prod var/cache/dev

Les 4 pièges classiques qui bloquent vos modifications

1. Le cache Smarty non vidé

C'est le piège numéro un. PrestaShop compile les templates Smarty et les met en cache. Si vous modifiez un fichier .tpl sans vider le cache, vos modifications seront purement ignorées.

Solution :

• Back-office → Paramètres avancés → Performances → Vider le cache
• Ou en ligne de commande :

# PrestaShop 1.7 / 8.x
php bin/console cache:clear

# Ou manuellement
rm -rf var/cache/*

Conseil : pendant le développement, désactivez la compilation Smarty via le back-office (Paramètres avancés → Performances → Forcer la compilation → Oui, Mettre en cache → Non).

2. Modifier le mauvais template

PrestaShop utilise un système de thème enfant/parent. Le template effectivement rendu peut provenir de :

• Votre thème actif
• Le thème parent (si votre thème est un child theme)
• Le thème `classic` (fallback par défaut)

Si vous modifiez un template dans le mauvais dossier, rien ne changera.

Vérification : consultez le fichier theme.yml de votre thème pour identifier le parent, puis assurez-vous de modifier le template au bon endroit dans la hiérarchie.

3. Les conditions `{if}` qui masquent vos champs

Sur PrestaShop 1.6, certains champs sont conditionnels (DNI, State, etc.). Si vous déplacez un champ en dehors de sa condition {if}, il peut disparaître ou s'afficher à tort.

Règle d'or : toujours déplacer le bloc conditionnel complet, pas juste le HTML du champ.

4. Le format d'adresse par pays

PrestaShop possède un système de format d'adresse défini par pays (Back-office → International → Zones → Pays → modifier un pays → Format d'adresse). Ce format détermine quels champs sont affichés et dans quel ordre pour le rendu de l'adresse (pas le formulaire en 1.6, mais il influence le formulaire en 1.7+).

Si vous ne comprenez pas pourquoi un champ apparaît ou disparaît, vérifiez ce paramètre.

Bonnes pratiques UX pour l'ordre des champs

L'ordre optimal des champs d'adresse dépend du pays cible :

ConventionPaysOrdre recommandé EuropéenneFrance, Belgique, SuissePrénom → Nom → Adresse → CP → Ville → Pays Anglo-saxonneUK, USPrénom → Nom → Adresse → Ville → État → CP → Pays JaponaiseJaponPays → CP → Ville → Adresse → Nom → Prénom

Pour une boutique multi-pays, envisagez d'utiliser le format d'adresse par pays de PrestaShop combiné avec un module qui réorganise dynamiquement les champs selon le pays sélectionné.

Résumé des étapes

1. **Identifier la version** de PrestaShop et la méthode appropriée (template direct vs Formatter)
2. **Localiser le bon template** dans la hiérarchie de votre thème
3. **Réorganiser les champs** en conservant les blocs conditionnels intacts
4. **Vider systématiquement le cache** après chaque modification
5. **Tester sur plusieurs pays** pour vérifier que les champs conditionnels fonctionnent correctement
6. **Désactiver le cache Smarty** pendant la phase de développement pour itérer rapidement