# Porter un catalogue PrestaShop en templates produit du Site Editor

> Après un import de catalogue, il reste à recomposer la structure visuelle des fiches produit dans les gabarits WooCommerce du Site Editor, sans toucher aux données déjà en place.

- Auteur : WordPress Développement
- Publié le : 2023-03-28
- Mis à jour le : 2023-03-28
- Catégorie : Éditeur de site (FSE)
- URL : https://www.wpmoderne.fr/fse/catalogue-prestashop-woocommerce-site-editor/

## L’essentiel

- Repérer les blocs d'attributs équivalents à PrestaShop
- Recomposer la fiche produit avec les blocs WooCommerce
- Conserver les déclinaisons via les attributs de variation

Comparer une fiche produit PrestaShop et une fiche produit WooCommerce côte à côte révèle d'abord des ressemblances : nom, prix, déclinaisons, description courte, description longue, avis clients. La difficulté n'est jamais l'absence d'équivalent fonctionnel, elle est dans l'agencement visuel auquel les clients d'une boutique sont habitués depuis des années et qu'ils veulent retrouver après la migration.

Ce cas suppose que l'import du catalogue est déjà terminé : les produits, leurs variantes et leurs images existent dans WooCommerce. Reste à reconstituer, dans le gabarit `single-product.html` du thème de blocs, une mise en page qui respecte l'ordre visuel auquel les clients de la boutique sont habitués.

## Cartographier les zones de la fiche PrestaShop

Avant d'ouvrir l'éditeur de site, il faut lister les zones de l'ancienne fiche produit et leur trouver un équivalent en bloc WooCommerce natif :

- Galerie d'images avec vignettes → bloc `Galerie de produit`.
- Nom et prix → blocs `Titre du produit` et `Prix du produit`.
- Sélecteur de déclinaison (couleur, taille) → bloc `Ajouter au panier + choix de variation`.
- Description courte affichée au-dessus du bouton d'achat → bloc `Résumé du produit`.
- Onglets description longue / caractéristiques → blocs `Description du produit` et `Attributs du produit`, disposés en accordéon manuel faute d'équivalent natif en onglets.
- Avis clients en bas de page → bloc `Avis du produit`.

Cette cartographie évite l'écueil classique de la migration : recommencer une mise en page depuis une page blanche sans se référer à l'existant, ce qui multiplie les allers-retours de validation avec le client.

## Recomposer le gabarit dans l'éditeur de site

> L'essentiel à retenir : Repérer les blocs d'attributs équivalents à PrestaShop ; Recomposer la fiche produit avec les blocs WooCommerce ; Conserver les déclinaisons via les attributs de variation

Le gabarit `single-product.html` se modifie directement depuis l'éditeur de site, dans la section dédiée aux modèles WooCommerce. La structure recommandée reprend une disposition en deux colonnes avec un bloc Groupe réglé en `flex-direction: row` : la galerie à gauche, les informations d'achat à droite.

```
<!-- wp:group {"style":{"spacing":{"blockGap":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
    <!-- wp:woocommerce/product-image-gallery /-->
    <!-- wp:group {"layout":{"type":"constrained"}} -->
    <div class="wp-block-group">
        <!-- wp:post-title /-->
        <!-- wp:woocommerce/product-price /-->
        <!-- wp:woocommerce/product-summary /-->
        <!-- wp:woocommerce/add-to-cart-form /-->
    </div>
    <!-- /wp:group -->
</div>
<!-- /wp:group -->
```

La description longue et les attributs techniques trouvent leur place dans une section distincte, sous le bloc précédent, avec un titre de niveau trois pour chaque rubrique plutôt qu'un système d'onglets, absent des blocs natifs WooCommerce à ce stade.

### Le piège des attributs de variation mal mappés

PrestaShop et WooCommerce ne nomment pas les attributs de la même façon : une « déclinaison » côté PrestaShop devient un « attribut de variation » côté WooCommerce, avec une distinction stricte entre attribut global (partagé entre plusieurs produits) et attribut local (propre à un seul produit). Si l'import a créé des attributs locaux là où le catalogue attendait des attributs globaux, le bloc de sélection de variation affiche des libellés incohérents d'un produit à l'autre. Ce point doit être vérifié avant de finaliser le gabarit, sans quoi la mise en page recomposée masquera un problème de données plus profond.

## Adapter les styles pour retrouver l'identité visuelle

La cohérence visuelle passe ensuite par le fichier `theme.json` : couleurs de boutons, épaisseur de bordure des vignettes, typographie du prix barré en cas de promotion. Ces réglages, une fois déclarés en styles globaux, s'appliquent uniformément à toutes les fiches produit sans reprise manuelle bloc par bloc.

| Élément PrestaShop | Équivalent WooCommerce |
| --- | --- |
| Déclinaison produit | Attribut de variation |
| Fiche technique | Bloc Attributs du produit |
| Bloc « produits associés » | Bloc Produits associés (upsell) |

## Ce que ce chantier ne traite pas

La recomposition du gabarit suppose que les données sont déjà correctement importées : références, prix, stocks, images et attributs. Le paramétrage de l'import lui-même, souvent réalisé via un outil dédié ou un script de transformation de flux, reste hors du périmètre de cet article.

> Une migration réussie se juge moins à la fidélité pixel près qu'à la capacité du client à reconnaître immédiatement sa boutique.

## En résumé

Recomposer une fiche produit PrestaShop en gabarit WooCommerce du Site Editor tient en six zones à retrouver, une attention particulière portée aux attributs de variation, et des styles globaux qui assurent la cohérence visuelle sans reprise bloc par bloc. Le résultat n'est jamais identique au pixel près, mais suffisamment fidèle pour que les clients habituels ne soient pas perdus.