# WooCommerce Builder d’Elementor Pro : page produit et archives sur mesure

> Construire des templates de page produit unique et d'archives boutique entièrement personnalisés avec les widgets WooCommerce d'Elementor Pro et leurs conditions.

- Auteur : Clément Hadrot
- Publié le : 2020-10-23
- Mis à jour le : 2020-10-23
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/woocommerce-builder-elementor-pro-produit-archives/

## L’essentiel

- Le widget Product Content remplace toute la boucle WooCommerce native
- Les conditions par catégorie permettent des pages produit différentes selon la gamme
- Un template Archive doit conserver le hook woocommerce_before_shop_loop pour les filtres

Une boutique de matériel photo nous a confié un besoin précis : les pages produit des boîtiers devaient afficher un comparatif de caractéristiques techniques, tandis que les pages des accessoires restaient simples, sans ce bloc. Avec un thème WooCommerce classique, cela aurait demandé un template PHP conditionnel. Avec le WooCommerce Builder d'Elementor Pro, la même chose se fait avec deux templates et deux jeux de conditions, sans toucher une ligne de PHP.

Le WooCommerce Builder s'appuie sur le même moteur que le Theme Builder classique : des templates réutilisables, assignés par des conditions, mais avec une bibliothèque de widgets spécifiquement connectés aux données produit de WooCommerce.

## Les deux types de templates WooCommerce

Dans **Templates > Theme Builder**, deux nouvelles catégories apparaissent une fois WooCommerce actif :

- **Single Product** : le gabarit d'une fiche produit individuelle.
- **Product Archive** : le gabarit de la boutique, des pages catégorie et des résultats de recherche produit.

Chacun s'assigne via les mêmes conditions que les autres templates Theme Builder (Entire Site, catégorie de produit, produit spécifique…), ce qui permet exactement le scénario de notre client photo : un template Single Product pour la catégorie « Boîtiers », un autre pour le reste du catalogue.

## Construire une fiche produit

Le widget central est **Product Content** : il rend d'un bloc l'ensemble de la fiche WooCommerce standard (galerie, titre, prix, bouton d'ajout au panier, description courte, onglets). Pour une personnalisation plus fine, Elementor Pro propose des widgets unitaires équivalents, que l'on peut disposer librement dans un conteneur Flexbox :

- **Product Title**, **Product Price**, **Product Rating**.
- **Product Images** (galerie), **Product Add to Cart**.
- **Product Meta** (SKU, catégories, étiquettes), **Product Stock**.
- **Product Data Tabs** pour les onglets description / avis / informations complémentaires.

Pour notre comparatif technique, nous avons simplement ajouté un widget **Text Editor** alimenté par un champ ACF personnalisé (via un Dynamic Tag), positionné entre **Product Price** et **Product Add to Cart**, uniquement sur le template dédié à la catégorie « Boîtiers ».

> L'essentiel à retenir : Le widget Product Content remplace toute la boucle WooCommerce native ; Les conditions par catégorie permettent des pages produit différentes selon la gamme ; Un template Archive doit conserver le hook woocommerce_before_shop_loop pour les filtres

## Construire une page d'archive boutique

Le template Product Archive fonctionne différemment : il ne remplace pas la boucle produit elle-même par défaut, mais l'entoure. Le widget **Archive Products** affiche la grille de produits filtrée par la requête WooCommerce en cours (catégorie visitée, recherche, tri), pendant que le reste du template — en-tête de boutique, bannière, widgets de filtre — se construit librement autour.

```
Structure typique d'un template Product Archive :
- Conteneur "En-tête boutique" (titre dynamique, fil d'ariane)
- Widget Archive Products (grille produits, colonnes réglables)
- Widget Archive Description (texte SEO de la catégorie)
```

Un point de vigilance : les widgets de filtre natifs de WooCommerce (filtre par attribut, par prix) reposent sur les hooks `woocommerce_before_shop_loop` et `woocommerce_sidebar`. Si votre thème ou un plugin tiers de filtrage dépend de ces hooks, il faut vérifier qu'ils sont toujours déclenchés quelque part dans le template Elementor, faute de quoi les filtres disparaissent silencieusement.

## Conditions et priorités : éviter les conflits

Comme pour tout template Theme Builder, plusieurs templates Single Product peuvent techniquement s'appliquer au même produit si les conditions se chevauchent. Elementor Pro résout ce conflit par un ordre de priorité configurable dans la liste des templates : plus une condition est spécifique (un produit précis bat une catégorie, qui bat Entire Site), plus elle gagne par défaut, mais l'ordre reste ajustable manuellement par glisser-déposer.

| Condition | Spécificité |
| --- | --- |
| Produit spécifique | La plus haute |
| Catégorie de produit | Intermédiaire |
| Entire Site (Product) | La plus basse, sert de gabarit par défaut |

> Toujours conserver un template Single Product en condition « Entire Site » comme filet de sécurité : sans lui, tout nouveau produit créé sans catégorie assignée retombe sur le gabarit WooCommerce natif du thème, souvent incohérent visuellement avec le reste du site.

## En résumé

Le WooCommerce Builder transforme la personnalisation des pages produit et boutique en un exercice de composition de widgets plutôt que de développement PHP. Les templates Single Product et Product Archive, combinés aux conditions du Theme Builder, permettent des déclinaisons par catégorie ou par gamme sans dupliquer de code. Le point à ne jamais négliger reste la préservation des hooks WooCommerce attendus par les extensions tierces, en particulier sur les pages d'archive où les filtres en dépendent directement.