PrestaShop Documentation, PrestaShop Tutorials

Prestashop : comment afficher la description du produit en pleine largeur sur la version 1.7

Très bonne question 👍
Sur PrestaShop 1.7, la description produit est limitée par la structure du thème. Pour l’afficher en pleine largeur, il faut généralement modifier le template du thème (et parfois le CSS).

Voici la méthode propre et la plus utilisée 👇


🧠 Principe

Par défaut, la page produit est souvent structurée ainsi :

[ Images ] [ Infos produit ]
----------------------------
[ Onglets : Description / Avis ]

L’objectif est de faire passer la description sous les colonnes, en full width.


✅ Méthode 1 (recommandée) : Modifier le fichier product.tpl

1️⃣ Fichier à modifier

Selon ton thème (souvent Classic) :

/themes/TON_THEME/templates/catalog/product.tpl

⚠️ Fais une sauvegarde avant modification


2️⃣ Trouver la description

Cherche ce bloc (ou similaire) :

{block name='product_description'}
  <div class="product-description">
    {$product.description nofilter}
  </div>
{/block}

Ou parfois dans :

/templates/catalog/_partials/product-tabs.tpl

3️⃣ Déplacer la description en pleine largeur

Place ce bloc après la section images + infos produit, par exemple juste avant le footer du produit.

Exemple (structure simplifiée) :

<div class="row">
  <div class="col-md-6">
    {include file='catalog/_partials/product-cover-thumbnails.tpl'}
  </div>

  <div class="col-md-6">
    {include file='catalog/_partials/product-prices.tpl'}
  </div>
</div>

<!-- DESCRIPTION FULL WIDTH -->
<div class="row">
  <div class="col-12 product-description-full">
    {$product.description nofilter}
  </div>
</div>

🎨 Étape 4 : CSS pour pleine largeur

Ajoute dans :

/themes/TON_THEME/assets/css/custom.css
.product-description-full {
  width: 100%;
  max-width: 100%;
  margin-top: 40px;
}

🧹 Étape 5 : Vider le cache

Back-office → Paramètres avancés → Performance

  • Désactiver le cache temporairement
  • Vider le cache
  • Réactiver

✅ Méthode 2 (sans toucher au cœur du thème)

Si ton thème supporte le Layout Builder ou hooks personnalisés :

  • déplacer displayProductExtraContent
  • utiliser un hook full-width

👉 dépend fortement du thème


❌ Ce qui ne marche PAS

  • Modifier uniquement le CSS ❌
  • Modifier le Back-office ❌

La largeur est contrôlée par le HTML du thème.


🧪 Test rapide

  • Ouvre une fiche produit
  • Redimensionne l’écran
  • La description doit s’étendre sur toute la largeur

💡 Conseil SEO

Une description en pleine largeur :

  • améliore la lisibilité
  • augmente le temps passé sur la page
  • bon point pour le SEO

 

About zohaibk

We develop useful addons for #E-Commerce and #CRM software to provide extra features.#PrestaShop,#Magento,#SugarCRM,#Vtiger & #Android #apps
View all posts by zohaibk →