# Panier et checkout WooCommerce avec Elementor Pro : personnaliser sans casser

> Personnaliser les widgets Cart et Checkout d'Elementor Pro pour WooCommerce, champs de formulaire et compatibilité avec les extensions de paiement.

- Auteur : Clément Hadrot
- Publié le : 2024-02-29
- Mis à jour le : 2024-02-29
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/panier-checkout-woocommerce-elementor-pro/

## L’essentiel

- Les widgets Cart et Checkout restent liés aux hooks WooCommerce natifs
- Modifier des champs demande de rester compatible avec les extensions de paiement
- Un test avec chaque mode de paiement actif est indispensable

Sur un site de vente de matériel de jardinage, le client voulait un tunnel d'achat visuellement aligné avec le reste du site, sans les limites graphiques du checkout WooCommerce par défaut. Les widgets Cart et Checkout d'Elementor Pro permettent justement de reconstruire ces pages avec l'éditeur visuel, tout en restant connectés au moteur WooCommerce sous-jacent. L'exercice a ses pièges, en particulier quand plusieurs extensions de paiement et de livraison sont actives en même temps.

Voici le retour d'expérience complet de cette personnalisation, des champs de formulaire jusqu'aux tests de compatibilité qui ont révélé plusieurs conflits inattendus.

## Construire la page Panier avec le widget Cart

Le widget Cart affiche une reproduction fidèle du panier WooCommerce, avec ses propres réglages de style pour chaque élément : tableau des produits, champ de code promo, totaux, bouton de passage au checkout. Contrairement à un widget Elementor classique, la structure des champs eux-mêmes (les colonnes du tableau produit, par exemple) reste largement héritée de WooCommerce, et seule leur apparence est personnalisable depuis Elementor.

Sur ce projet, le principal ajustement a porté sur la présentation du champ de code promo, replié par défaut dans un lien discret : le client souhaitait un champ visible en permanence, ce qui a nécessité une légère surcharge CSS ciblée sur la classe générée par le widget, plutôt qu'un réglage natif du panneau Elementor.

## Construire la page Checkout avec le widget Checkout

Le widget Checkout reprend la structure classique de WooCommerce : formulaire de facturation, formulaire de livraison, récapitulatif de commande, moyens de paiement. Chaque section peut être réordonnée et stylée séparément depuis le panneau Elementor, ce qui a permis de placer le récapitulatif de commande en haut de page sur mobile, un changement demandé explicitement par le client pour rassurer l'acheteur avant qu'il ne remplisse ses coordonnées.

> L'essentiel à retenir : Les widgets Cart et Checkout restent liés aux hooks WooCommerce natifs ; Modifier des champs demande de rester compatible avec les extensions de paiement ; Un test avec chaque mode de paiement actif est indispensable

## Ajouter et retirer des champs de formulaire

Le client voulait retirer le champ « Nom de l'entreprise », jugé inutile pour une clientèle presque exclusivement particulière, et ajouter un champ « Instructions de livraison ». Ces modifications ne se font pas depuis le panneau Elementor lui-même mais via le filtre WooCommerce classique `woocommerce_checkout_fields`, dans un plugin de fonctionnalités dédié plutôt que dans les fichiers du thème :

```
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    unset( $fields['billing']['billing_company'] );

    $fields['order']['order_instructions'] = [
        'type'        => 'textarea',
        'label'       => __( 'Instructions de livraison', 'mon-theme' ),
        'required'    => false,
        'class'       => [ 'form-row-wide' ],
        'priority'    => 120,
    ];

    return $fields;
} );
```

Un point important : ces modifications de champs sont indépendantes d'Elementor et continuent de s'appliquer même si le checkout venait à repasser sur un template WooCommerce classique. C'est une bonne pratique générale : garder la logique métier des champs dans du code, et réserver Elementor à la présentation visuelle.

## Compatibilité avec les extensions de paiement

Le site utilisait trois passerelles de paiement : carte bancaire via un prestataire européen, virement pour les commandes professionnelles, et un service de paiement en plusieurs fois. Chaque extension de paiement injecte ses propres champs ou redirections dans le flux de checkout, et il est arrivé qu'une surcharge CSS trop large sur le widget Checkout masque involontairement le bouton de confirmation spécifique à l'une des passerelles, invisible dans le test initial qui n'utilisait que la carte bancaire.

> Conseil maison : après toute modification du widget Checkout, repasser une commande de test complète avec chaque mode de paiement activé sur le site, pas seulement celui utilisé en développement. C'est le seul moyen fiable de repérer un conflit avant qu'un client réel ne tombe dessus.

## Ce qu'il ne faut pas toucher légèrement

- La structure des champs obligatoires liés à la fiscalité (adresse de facturation complète pour les pays qui l'exigent).
- Les hooks d'affichage des messages d'erreur de validation, souvent stylés par les extensions de paiement elles-mêmes.
- L'ordre des sections sur la page Checkout si des extensions tierces s'attendent à une position précise pour insérer leur propre contenu.

## En résumé

Les widgets Cart et Checkout d'Elementor Pro permettent une vraie personnalisation visuelle du tunnel d'achat WooCommerce, mais ils ne remplacent pas la logique métier native de WooCommerce, qui continue de se piloter par le code et les filtres habituels. La règle qui a le mieux fonctionné sur ce projet : Elementor pour l'apparence, le code pour la structure des données, et un test systématique avec tous les moyens de paiement actifs avant chaque mise en production.