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 produitetPrix 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 produitetAttributs 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
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.
