Masquer la quantité et le prix HT dans le panier PrestaShop

Pourquoi masquer des colonnes du panier PrestaShop

Certains modèles commerciaux nécessitent de simplifier l'affichage du panier. C'est fréquent dans plusieurs cas de figure :

• **Vente de produits uniques** (prestations de service, formations, produits numériques) : la colonne quantité n'a pas de sens quand chaque ligne représente un article unique non modifiable.
• **Affichage B2C pur** : le prix HT peut perturber le consommateur final qui raisonne exclusivement en TTC.
• **Simplification UX** : réduire le nombre de colonnes améliore la lisibilité du panier, surtout sur mobile.

Ce guide couvre les trois générations de PrestaShop encore en circulation : 1.6 (Smarty classique), 1.7 (Smarty modernisé) et 8.x (architecture identique à 1.7 pour les templates).

PrestaShop 1.6 : modification des templates Smarty

Localiser les fichiers concernés

Sur PrestaShop 1.6, le panier est rendu par deux fichiers Smarty dans votre thème actif :

• `themes/votre-theme/shopping-cart.tpl` — structure globale du tableau (en-têtes)
• `themes/votre-theme/shopping-cart-product-line.tpl` — chaque ligne produit

Règle d'or : ne modifiez jamais les fichiers du thème par défaut. Dupliquez votre thème ou travaillez dans un thème enfant.

Masquer la colonne Quantité

#### Étape 1 : supprimer l'en-tête

Dans shopping-cart.tpl, repérez l'en-tête du tableau du panier et commentez la cellule de quantité :

{* Colonne quantité masquée volontairement *}
{*<th class="cart_quantity item text-center">{l s='Qty'}</th>*}

#### Étape 2 : supprimer la cellule produit

Dans shopping-cart-product-line.tpl, commentez l'intégralité du bloc :

{* Bloc quantité masqué — début *}
{*
<td class="cart_quantity text-center" data-title="{l s='Quantity'}">
    {if (isset($cannotModify) && $cannotModify == 1)}
        <span>
            {if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}
                {$product.customizationQuantityTotal}
            {else}
                {$product.cart_quantity-$quantityDisplayed}
            {/if}
        </span>
    {else}
        ... (tout le bloc input de modification de quantité)
    {/if}
</td>
*}
{* Bloc quantité masqué — fin *}

#### Étape 3 : corriger les colspan

C'est le piège le plus fréquent. Le tableau du panier utilise des attributs colspan sur certaines lignes (totaux, promotions, ligne vide). Si vous retirez une colonne sans ajuster les colspan, vous obtiendrez un décalage visuel.

Recherchez dans shopping-cart.tpl toutes les occurrences de colspan et décrémentez-les de 1 pour chaque colonne supprimée :

{* Avant : 4 colonnes fusionnées *}
<td colspan="4" class="cart_total">

{* Après suppression d'une colonne *}
<td colspan="3" class="cart_total">

Astuce : faites une recherche globale de colspan dans le fichier. Il y en a souvent 3 à 5 occurrences à ajuster.

Masquer le prix unitaire HT

Le prix HT se trouve généralement dans une cellule cart_unit ou cart_unit_price. La logique est identique :

1. Commentez le `` correspondant dans `shopping-cart.tpl`
2. Commentez le `` correspondant dans `shopping-cart-product-line.tpl`
3. Ajustez les `colspan` en conséquence

{* En-tête prix unitaire HT masqué *}
{*<th class="cart_unit item text-right">{l s='Unit price'}</th>*}

PrestaShop 1.7 et 8.x : approche par thème enfant

À partir de PrestaShop 1.7, l'architecture des templates a été refondée. Le panier est désormais géré par des fichiers différents.

Fichiers concernés

themes/votre-theme/templates/checkout/cart.tpl
themes/votre-theme/templates/checkout/_partials/cart-detailed.tpl
themes/votre-theme/templates/checkout/_partials/cart-detailed-product-line.tpl

Créer un thème enfant (recommandé)

Avant toute modification, créez un thème enfant pour préserver vos changements lors des mises à jour :

mkdir -p themes/mon-theme-enfant/templates/checkout/_partials/

Copiez uniquement les fichiers que vous modifiez dans ce répertoire.

Masquer la quantité en 1.7/8.x

Dans cart-detailed-product-line.tpl, la quantité est rendue via un composant plus structuré :

{* Colonne quantité masquée *}
{*
<div class="cart-line-product-quantity">
    <div class="input-group bootstrap-touchspin">
        <input
            class="js-cart-line-product-quantity"
            data-product-id="{$product.id_product}"
            type="number"
            value="{$product.quantity}"
            name="product-quantity-spin"
            min="{$product.minimal_quantity}"
        />
    </div>
</div>
*}

Alternative CSS (non destructive)

Si vous ne souhaitez pas toucher aux templates, une approche CSS peut suffire :

/* Masquer la colonne quantité */
.cart-grid-body .cart-overview .cart-item .qty,
.cart-grid-body .cart-overview .cart-item .cart-line-product-quantity {
    display: none;
}

/* Masquer le prix unitaire HT */
.cart-grid-body .cart-overview .cart-item .product-price {
    display: none;
}

Attention : cette méthode masque visuellement les éléments mais ne les supprime pas du DOM. Les inputs de quantité restent présents et fonctionnels. C'est un avantage (la mécanique du panier reste intacte) mais aussi un risque si l'utilisateur inspecte le code source.

Approche moderne : override propre avec un module

Pour une solution maintenable et compatible avec les mises à jour, encapsulez vos modifications dans un module :

<?php
// modules/mon_module_panier/mon_module_panier.php

class Mon_Module_Panier extends Module
{
    public function __construct()
    {
        $this->name = 'mon_module_panier';
        $this->version = '1.0.0';
        $this->author = 'Votre nom';
        parent::__construct();
        $this->displayName = $this->l('Personnalisation panier');
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('actionFrontControllerSetMedia');
    }

    public function hookActionFrontControllerSetMedia()
    {
        if ($this->context->controller instanceof CartController
            || $this->context->controller instanceof OrderController) {
            $this->context->controller->registerStylesheet(
                'module-cart-custom',
                'modules/' . $this->name . '/views/css/cart-custom.css',
                ['media' => 'all', 'priority' => 200]
            );
        }
    }
}

Cette approche permet de désactiver les modifications simplement en désinstallant le module, sans toucher aux templates.

Bonnes pratiques et pièges à éviter

Les colspan : le piège classique

La première cause de bug visuel après suppression d'une colonne est l'oubli des colspan. Voici comment les repérer systématiquement :

# Rechercher tous les colspan dans les fichiers du panier
grep -rn 'colspan' themes/votre-theme/templates/checkout/

Chaque colspan trouvé doit être décrémenté du nombre de colonnes supprimées.

Impact sur le responsive

Les thèmes modernes (Classic, Starter Theme) utilisent des media queries pour réorganiser le panier en mode mobile. Vérifiez que vos modifications n'affectent pas l'affichage tablette et smartphone :

• Testez sur au moins 3 largeurs : 375px (mobile), 768px (tablette), 1200px (desktop)
• Les `data-title` des cellules sont utilisés en responsive pour afficher les en-têtes — supprimez-les aussi quand vous masquez une colonne

Implications légales du masquage du prix HT

En France, l'affichage du prix HT n'est pas obligatoire pour les ventes B2C. En revanche, pour les boutiques B2B ou mixtes, l'article L441-1 du Code de commerce impose la transparence tarifaire. Avant de masquer le prix HT, vérifiez votre contexte juridique.

Vider le cache après modification

PrestaShop compile et cache les templates Smarty. Après toute modification de fichier .tpl, videz le cache :

Back-office → Paramètres avancés → Performances → Vider le cache

Ou en ligne de commande (PrestaShop 1.7+) :

php bin/console cache:clear --env=prod