# Elementor Pro et WooCommerce Blocks : pourquoi le mini-panier s’affiche en double

> Un widget Elementor Pro et un bloc Panier natif peuvent cohabiter sur la même page sans le savoir, et afficher deux mini-paniers l'un sous l'autre. Voici pourquoi, et comment trancher proprement.

- Auteur : WordPress Développement
- Publié le : 2024-11-03
- Mis à jour le : 2024-11-03
- Catégorie : E-commerce
- URL : https://www.wpmoderne.fr/ecommerce/elementor-pro-woocommerce-blocks-mini-panier-double/

## L’essentiel

- Deux scripts de fragments coexistent sur la page
- Le widget Elementor duplique le rendu du bloc natif
- La correction se fait au niveau du header, pas du CSS

Deux icônes de panier, deux compteurs d'articles, parfois deux menus déroulants qui s'ouvrent l'un sur l'autre : c'est le symptôme qui remonte le plus souvent sur les thèmes construits avec Elementor Pro et un en-tête utilisant le bloc `Mini Panier` de WooCommerce Blocks. Le rendu visuel est confus, mais la cause est parfaitement identifiable une fois qu'on regarde le DOM généré plutôt que la feuille de style.

Ce cas concerne les boutiques migrées progressivement vers les blocs : le header du thème est encore construit avec Elementor Pro (widget **Menu Panier**), mais une partie du contenu — souvent la page d'accueil ou une archive — a été reconstruite avec le bloc natif `woocommerce/mini-cart`. Les deux composants finissent par apparaître sur le même gabarit de page.

## Symptôme : deux mini-paniers, deux compteurs qui ne se synchronisent pas toujours

À l'inspection, la page contient deux marqueurs distincts : un élément généré par Elementor Pro (une structure `.elementor-menu-cart`) et un second issu du rendu côté serveur du bloc WooCommerce (`.wp-block-woocommerce-mini-cart`). Chacun s'abonne indépendamment aux mêmes fragments AJAX exposés par le filtre `woocommerce_add_to_cart_fragments`, et chacun se met à jour à sa façon lors de l'évènement JavaScript `added_to_cart`.

Le résultat visible dépend du thème : parfois les deux paniers sont visibles côte à côte dans le header, parfois l'un des deux est caché par le CSS du thème mais reste dans le DOM et continue de charger son propre script, doublant les requêtes AJAX à chaque ajout au panier.

## Diagnostic : identifier qui rend quoi, avant de toucher au code

Avant toute correction, il faut localiser précisément la source de chaque instance :

- Ouvrez l'inspecteur et cherchez les classes `elementor-menu-cart` et `wc-block-mini-cart` dans la page.
- Dans l'éditeur Elementor, vérifiez si le header (souvent un modèle de type *Header* dans Elementor Theme Builder) contient bien le widget **Menu Panier WooCommerce**.
- Dans l'éditeur de site ou l'éditeur de blocs, cherchez si le bloc `Mini Panier` a été inséré séparément dans un template ou un patch de header géré par le thème.

> L'essentiel à retenir : Deux scripts de fragments coexistent sur la page ; Le widget Elementor duplique le rendu du bloc natif ; La correction se fait au niveau du header, pas du CSS

Dans la majorité des cas observés, le bloc natif a été ajouté par erreur lors d'un import de starter template WooCommerce, ou par une mise à jour de thème qui a réintroduit un header par défaut en parallèle du header Elementor personnalisé.

## Correctif : choisir un seul point de vérité pour le panier

Il n'existe pas de bonne raison technique de conserver les deux systèmes actifs en même temps : chacun charge son propre jeu de scripts, gère son propre cache de fragments, et peut désynchroniser le compteur d'articles si l'un des deux rate un rafraîchissement. La solution consiste à choisir une source unique.

### Option A — garder Elementor Pro

Retirez le bloc `woocommerce/mini-cart` du template concerné. S'il a été injecté automatiquement par un template de démarrage, vérifiez le fichier `header.html` du thème bloc ou le template part correspondant dans l'éditeur de site, et supprimez-en le bloc panier.

### Option B — migrer vers le bloc natif

Si l'objectif est de sortir progressivement d'Elementor pour le header, remplacez le widget **Menu Panier** par le bloc `Mini Panier` partout, puis videz le cache d'objets et le cache de page pour éviter qu'une version figée du header Elementor ne persiste.

```
// Vérifier côté PHP qu'un seul jeu de fragments est enregistré
add_action( 'wp_footer', function () {
    global $wp_filter;
    if ( isset( $wp_filter['woocommerce_add_to_cart_fragments'] ) ) {
        error_log( 'Callbacks fragments : ' . count( $wp_filter['woocommerce_add_to_cart_fragments']->callbacks ) );
    }
} );
```

## Prévention : verrouiller le header contre les régressions

Sur les projets où Elementor Pro gère le header de façon définitive, désactivez l'insertion automatique de templates WooCommerce par défaut dans l'éditeur de site, quand le thème le permet via son fichier `theme.json`. Documentez aussi ce choix dans le wiki du projet : un designer qui reprend le site plus tard, en voyant le bloc `Mini Panier` disponible dans l'inserteur, sera tenté de l'ajouter « pour tester », recréant le même bug.

> Sur nos projets, la règle est simple : un seul composant panier par gabarit, documenté dans le README du thème enfant, avec le nom exact du widget ou du bloc à utiliser.

## En résumé

Le mini-panier dupliqué n'est pas un bug d'affichage à corriger en CSS : c'est la coexistence de deux systèmes de fragments WooCommerce qui tournent en parallèle. Identifiez lequel des deux — widget Elementor ou bloc natif — doit rester la source unique du panier, retirez l'autre proprement dans l'éditeur correspondant, et videz les caches. Le correctif prend quelques minutes une fois la cause repérée ; le diagnostic, lui, est tout l'enjeu.