Comment masquer l'UGS

Si vous administrez une boutique WooCommerce, vous avez probablement constaté que la référence produit — appelée UGS (Unité de Gestion de Stock, SKU en anglais) — s'affiche par défaut sur chaque fiche produit publique. Sur la quasi-totalité des thèmes, elle apparaît sous cette forme :

UGS : PROD-2024-001

Cette donnée est précieuse en back-office : elle identifie chaque article de manière unique, facilite le traitement des commandes, alimente vos flux produits vers des marketplaces et permet la synchronisation avec un ERP ou un logiciel de caisse. Côté client, en revanche, elle n'apporte généralement aucune valeur et peut même dégrader l'expérience utilisateur en encombrant visuellement la fiche produit.

La bonne nouvelle : WooCommerce expose un filtre natif pour contrôler précisément cet affichage, sans plugin supplémentaire, sans toucher aux templates du thème. Dans ce guide, nous détaillons les trois approches disponibles — du filtre PHP recommandé jusqu'à la solution CSS de dépannage — avec leurs implications techniques respectives, des cas d'usage avancés et une FAQ complète pour répondre aux situations les plus courantes.

---

Ce que représente l'UGS dans l'architecture WooCommerce

Avant d'aborder les solutions, comprendre comment WooCommerce gère l'UGS en interne vous permettra de choisir la méthode la plus adaptée à votre contexte.

Stockage et accès à la donnée

Dans WooCommerce, l'UGS est stockée comme une métadonnée de post sous la clé _sku dans la table wp_postmeta. Elle est liée au post de type product ou product_variation. On peut y accéder programmatiquement via :

$product = wc_get_product( $post->ID );
$sku     = $product->get_sku();

Cette donnée est entièrement indépendante de son affichage front-end. La masquer visuellement — quelle que soit la méthode — ne supprime ni ne modifie l'entrée en base de données. Elle reste accessible depuis le tableau de bord, via l'API REST WooCommerce, et dans tous les exports CSV.

Comment WooCommerce affiche-t-elle l'UGS côté front-end ?

Par défaut, WooCommerce utilise le template single-product/meta.php (situé dans woocommerce/templates/single-product/meta.php) pour afficher les métadonnées d'un produit, dont l'UGS. Ce template appelle la fonction conditionnelle suivante :

if ( wc_product_sku_enabled() && ( $sku || $product->is_type( 'variable' ) ) ) {
    echo '<span class="sku_wrapper">' . esc_html__( 'SKU:', 'woocommerce' ) . ' <span class="sku">' . ( $sku ? esc_html( $sku ) : esc_html__( 'N/A', 'woocommerce' ) ) . '</span></span>';
}

La fonction wc_product_sku_enabled() est le point d'entrée que l'on va cibler. Elle applique le filtre wc_product_sku_enabled avant de retourner son résultat, ce qui nous donne un levier propre et documenté pour intervenir sans modifier le template.

---

Pourquoi masquer l'UGS ? Les trois justifications techniques et commerciales

1. Optimisation de l'expérience utilisateur (UX) et du taux de conversion

Une fiche produit efficace concentre l'attention du visiteur sur les éléments décisionnels : visuels, description bénéfices, prix, avis clients, bouton d'achat. Chaque information sans valeur directe pour l'acheteur est un vecteur de distraction. L'UGS fait partie de ces données internes qui, exposées publiquement, n'ont d'intérêt que pour vous.

De nombreux tests A/B menés sur des boutiques e-commerce confirment qu'une fiche produit épurée, débarrassée des métadonnées techniques non pertinentes, améliore le taux de clic sur le bouton d'ajout au panier.

2. Confidentialité des données commerciales

Dans certains secteurs (revendeurs, distributeurs, marques blanches), la nomenclature interne des références peut révéler des informations stratégiques à vos concurrents : codification des gammes, codes fournisseurs, volume du catalogue, logique de versioning des produits. Cacher le SKU de votre boutique en ligne WordPress peut dans ce cas relever d'une démarche de protection commerciale.

3. Conformité avec les standards UX des acteurs professionnels

Les plateformes e-commerce performantes n'exposent pas leurs identifiants internes sur les fiches publiques. En retirant l'UGS du front-end, vous alignez l'expérience proposée sur les standards attendus par les acheteurs habitués aux grands sites marchands.

---

Prérequis avant toute modification

Travailler exclusivement dans un thème enfant

Toute modification de code — functions.php, style.css — doit impérativement se faire dans un thème enfant. Modifier les fichiers du thème parent expose vos personnalisations à être écrasées à la prochaine mise à jour thème, sans avertissement.

Si votre thème enfant n'existe pas encore, la méthode la plus rapide est de créer manuellement un dossier dans /wp-content/themes/nom-du-theme-child/ contenant un style.css avec l'en-tête requise et un functions.php minimaliste. Des outils comme le plugin Child Theme Configurator automatisent cette étape.

Alternative recommandée : gérer les snippets via WPCode

Pour les équipes qui préfèrent ne pas toucher directement aux fichiers du thème, le plugin WPCode (anciennement Code Snippets) offre une interface propre pour insérer et activer des snippets PHP. Son avantage principal : en cas d'erreur de syntaxe dans votre code, WPCode détecte le problème et désactive automatiquement le snippet défaillant plutôt que de provoquer une erreur 500 sur l'ensemble du site.

Faire une sauvegarde préalable

Avant toute intervention sur un site de production, assurez-vous de disposer d'une sauvegarde récente de la base de données et des fichiers. Des solutions comme UpdraftPlus, BlogVault ou les snapshots proposés par votre hébergeur (o2switch, Kinsta, WP Engine…) remplissent ce rôle efficacement.

---

Méthode 1 : filtre PHP wc_product_sku_enabled (solution recommandée)

C'est l'approche à privilégier dans la grande majorité des cas. Elle utilise l'API de filtres de WordPress pour intervenir au bon niveau : avant le rendu HTML, sans modifier le template.

Le snippet

/**
 * Masquer l'UGS sur les pages produits WooCommerce (front-end uniquement)
 *
 * Utilise le filtre natif wc_product_sku_enabled pour retourner false
 * uniquement sur les pages produits individuelles côté visiteur.
 * L'UGS reste accessible et modifiable dans l'administration WooCommerce.
 *
 * @param bool $enabled Valeur courante du filtre (true par défaut).
 * @return bool
 */
add_filter( 'wc_product_sku_enabled', 'agency_hide_sku_on_product_page' );

function agency_hide_sku_on_product_page( bool $enabled ): bool {
    if ( ! is_admin() && is_product() ) {
        return false;
    }
    return $enabled;
}

Analyse technique

add_filter( 'wc_product_sku_enabled', ... )
On s'accroche au filtre exposé par wc_product_sku_enabled(). Ce filtre est appliqué à chaque appel de la fonction, ce qui garantit qu'aucune autre partie du code — template, shortcode, bloc Gutenberg — ne passera outre notre condition.

! is_admin()
Cette condition exclut le contexte d'administration WordPress. Sans elle, le filtre s'appliquerait également dans le back-office, rendant l'UGS invisible dans les fiches produits de l'administration. Le ! s'applique bien à is_admin() et non à is_product().

is_product()
Vérifie que la requête courante correspond à une page produit individuelle (post type product). Cette condition évite de supprimer l'UGS dans d'autres contextes front-end comme les pages de catégorie, les résultats de recherche ou le panier.

Typage PHP strict
L'ajout du typage bool sur le paramètre et le retour est une bonne pratique en PHP 7.4+ qui renforce la fiabilité du code et évite des conversions de type implicites.

Variante : masquer l'UGS sur l'ensemble du front-end

Si votre thème affiche l'UGS dans d'autres contextes que la page produit (archives, pages de recherche, widgets…) et que vous souhaitez une suppression complète côté visiteur :

add_filter( 'wc_product_sku_enabled', 'agency_hide_sku_frontend' );

function agency_hide_sku_frontend( bool $enabled ): bool {
    if ( ! is_admin() ) {
        return false;
    }
    return $enabled;
}

La suppression de la condition is_product() étend le masquage à toutes les pages front-end, tout en préservant l'affichage dans l'administration.

Variante avancée : masquer l'UGS pour certaines catégories seulement

Certaines boutiques ont des gammes hétérogènes : des produits B2B pour lesquels la référence a du sens pour l'acheteur, et des produits grand public pour lesquels elle ne sert à rien. WooCommerce permet de conditionner l'affichage par catégorie :

add_filter( 'wc_product_sku_enabled', 'agency_hide_sku_by_category' );

function agency_hide_sku_by_category( bool $enabled ): bool {
    if ( ! is_admin() && is_product() ) {
        global $post;
        // Masquer l'UGS uniquement pour les produits de la catégorie 'grand-public'
        // Remplacez 'grand-public' par le slug de votre catégorie cible
        if ( has_term( 'grand-public', 'product_cat', $post->ID ) ) {
            return false;
        }
    }
    return $enabled;
}

has_term() vérifie si le post courant appartient à un terme donné d'une taxonomie. Ici, on cible la taxonomie product_cat (catégories WooCommerce). Vous pouvez passer un tableau de slugs en premier argument pour cibler plusieurs catégories simultanément.

---

Méthode 2 : désactiver la référence produit WooCommerce avec __return_false

Si vous souhaitez désactiver la référence produit WooCommerce de manière totale et définitive — sans condition, sans distinction de contexte — la solution la plus concise est :

/**
 * Désactiver les SKUs / UGS globalement sur WooCommerce
 * (front-end ET administration)
 */
add_filter( 'wc_product_sku_enabled', '__return_false' );

__return_false est une fonction utilitaire native de WordPress qui se contente de retourner false. Elle est conçue précisément pour être passée en callback à add_filter() ou add_action() sans avoir à déclarer une fonction anonyme ou nommée.

Impact concret de cette méthode

• Le champ UGS disparaît de l'interface d'édition des produits dans le back-office
• L'UGS n'est plus affichée sur les fiches produits publiques
• La donnée elle-même reste en base de données (la métadonnée _sku n'est pas supprimée)
• Les imports/exports CSV continuent de fonctionner sur la colonne SKU
• L'API REST WooCommerce retourne toujours le champ sku dans ses réponses

Cette méthode est adaptée aux boutiques simples qui n'ont pas de flux produits vers des marketplaces, pas d'intégration ERP et pas de besoin de référencement interne par SKU. Pour toute boutique amenée à évoluer vers une gestion de stock sérieuse, la méthode 1 est préférable.

---

Méthode 3 : solution CSS pour masquer l'UGS visuellement

La troisième approche consiste à masquer l'élément HTML via CSS. Elle est la plus rapide à mettre en place mais la moins robuste techniquement.

Le code

À insérer dans le fichier style.css de votre thème enfant, ou dans le champ CSS additionnel de votre thème (Apparence › Personnaliser › CSS additionnel) :

/* Masquer le wrapper UGS sur les pages produits WooCommerce */
.woocommerce div.product .sku_wrapper {
    display: none !important;
}

La classe .sku_wrapper est définie par le template single-product/meta.php de WooCommerce. Le sélecteur .woocommerce div.product augmente la spécificité pour éviter les conflits avec les styles du thème. L'ajout de !important est parfois nécessaire si le thème cible cette classe avec une spécificité plus élevée.

Limites techniques à connaître

1. L'UGS reste dans le DOM
display: none masque l'élément visuellement mais il est toujours présent dans le code source HTML de la page. N'importe quel utilisateur — concurrent, robot d'indexation — peut le lire en consultant le source.

2. Accessibilité dégradée
Un élément masqué via display: none est généralement ignoré par les lecteurs d'écran (NVDA, JAWS, VoiceOver). Ce comportement n'est pas garanti à 100 % selon les versions et configurations, et peut créer une expérience incohérente pour les utilisateurs malvoyants.

3. Dépendance à la structure HTML du thème
Si votre thème surcharge le template meta.php en utilisant une structure HTML ou des classes différentes, votre règle CSS n'aura aucun effet. Vous devrez adapter le sélecteur, ce qui introduit une dette technique à maintenir dans le temps.

4. Non applicable via l'API
Cette méthode est strictement visuelle : elle ne masque rien pour les requêtes API REST ou les robots qui parsent votre HTML sans exécuter le CSS.

Quand utiliser cette méthode malgré tout ?

La solution CSS reste pertinente comme mesure temporaire si vous n'avez pas accès aux fichiers PHP du site ou si vous cherchez à tester rapidement l'effet du masquage avant d'implémenter la solution PHP pérenne.

---

Tableau comparatif des trois méthodes

Critère	Filtre PHP ciblé	__return_false	CSS
Supprimé du DOM HTML	✅	✅	❌
UGS conservée en back-office	✅	❌	✅
Masquage conditionnel possible	✅	❌	✅ (partiel)
Indépendant du thème	✅	✅	❌
Accessible aux lecteurs d'écran	✅	✅	⚠️
Complexité de mise en place	Faible	Très faible	Très faible
Recommandée pour	La majorité des boutiques	Boutiques sans gestion SKU	Dépannage rapide

---

Bonus : renommer le libellé "UGS" en "Référence"

Dans certains cas de figure — notamment pour des boutiques B2B ou des catalogues spécialisés — vous souhaitez conserver l'affichage de la référence produit mais en remplaçant le libellé "UGS :" par un terme plus adapté à votre secteur : "Réf. :", "Code produit :", "Référence article :", etc.

WooCommerce utilise en interne la chaîne anglaise "SKU" et "SKU:", même dans la version française. Le filtre gettext de WordPress permet d'intercepter les traductions à la volée :

/**
 * Remplacer le libellé "UGS" par "Référence" sur les fiches produits
 * et dans l'interface d'administration WooCommerce.
 *
 * @param string $translation  Traduction courante.
 * @param string $text         Texte source anglais.
 * @param string $domain       Domaine de traduction.
 * @return string
 */
function agency_rename_sku_label( string $translation, string $text, string $domain ): string {
    if ( 'woocommerce' === $domain ) {
        switch ( $text ) {
            case 'SKU:':
                return 'Référence :';
            case 'SKU':
                return 'Référence';
        }
    }
    return $translation;
}
add_filter( 'gettext', 'agency_rename_sku_label', 10, 3 );

Ce filtre est appliqué à chaque appel de __(), _e() ou esc_html__() dans le domaine woocommerce. Il cible uniquement les chaînes "SKU" et "SKU:" pour éviter tout effet de bord sur d'autres traductions.

---

FAQ technique

Masquer l'UGS a-t-il un impact sur le SEO ?

Non. Les moteurs de recherche n'accordent aucune valeur particulière à la présence d'une référence interne sur une fiche produit. L'UGS n'est pas un signal de pertinence pour Google. En revanche, supprimer des éléments visuels superflus peut contribuer à améliorer les Core Web Vitals (moins de DOM à parser) et l'expérience utilisateur globale, deux facteurs pris en compte dans l'algorithme de classement de Google.

La donnée est-elle vraiment supprimée ou seulement masquée ?

Avec les méthodes PHP (méthode 1 et 2), l'UGS est exclue du rendu HTML : elle n'est plus dans le code source de la page. Elle reste en revanche intacte en base de données. Avec la méthode CSS, elle est uniquement masquée visuellement — elle est bien présente dans le HTML pour quiconque consulte le code source.

L'UGS reste-t-elle visible dans les emails de commande ?

Oui. Les emails transactionnels WooCommerce (confirmation de commande, facture) utilisent leurs propres templates et n'appliquent pas le filtre wc_product_sku_enabled. L'UGS continuera d'apparaître dans ces emails si votre thème d'email ou vos templates personnalisés l'incluent. C'est un comportement souhaitable : votre client et vous-même avez besoin de cette référence pour le suivi de commande.

Mon site affiche une erreur 500 après avoir modifié functions.php — que faire ?

Une erreur HTTP 500 après modification du functions.php est presque toujours causée par une erreur de syntaxe PHP : point-virgule oublié, parenthèse non fermée, guillemet mal appairé. La procédure de récupération est la suivante :

1. Connectez-vous à votre serveur via FTP (FileZilla, Cyberduck) ou via le gestionnaire de fichiers de votre hébergeur
2. Ouvrez le fichier functions.php de votre thème enfant
3. Localisez et corrigez (ou supprimez) le code que vous venez d'ajouter
4. Enregistrez et rechargez votre site

C'est l'une des raisons pour lesquelles nous recommandons l'utilisation de WPCode pour la gestion des snippets : en cas d'erreur PHP, le plugin désactive automatiquement le snippet défaillant et affiche un message d'erreur lisible plutôt que de planter le site.

Mon thème surcharge meta.php — le filtre PHP fonctionnera-t-il quand même ?

Oui. Le filtre wc_product_sku_enabled est appliqué par la fonction PHP wc_product_sku_enabled(), qui est appelée quelle que soit la version du template utilisée (template WooCommerce natif, template surchargé dans le thème, ou builder comme Elementor ou Divi via leurs intégrations WooCommerce). Tant que le thème ou le builder utilise cette fonction pour conditionner l'affichage, votre filtre sera efficace. En revanche, si le thème contourne complètement wc_product_sku_enabled() et affiche l'UGS directement depuis la base de données, le filtre PHP n'aura aucun effet et il faudra recourir au CSS ou modifier le template concerné.

Peut-on faire la même chose pour masquer les catégories ou les étiquettes produit ?

Oui. WooCommerce expose des filtres et des actions similaires pour contrôler l'affichage des autres métadonnées. Pour masquer les catégories produit sur la fiche, on peut par exemple retirer l'action correspondante :

// Masquer les catégories sur les fiches produits
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

Attention : cette action supprime l'intégralité du bloc méta (UGS + catégories + étiquettes). Si vous souhaitez masquer uniquement les catégories en conservant l'UGS, il faut soit surcharger le template meta.php dans votre thème enfant, soit filtrer la sortie via CSS.

---

Conclusion

Masquer l'UGS sur les pages produits WooCommerce est une personnalisation en apparence anodine, mais elle illustre bien la logique de l'API WordPress : plutôt que de modifier les fichiers du cœur ou des templates, on utilise les points d'extension prévus à cet effet — ici, le filtre wc_product_sku_enabled. C'est plus propre, plus maintenable, et compatible avec les mises à jour.

Pour résumer les options disponibles :

• Méthode 1 (recommandée) : filtre PHP wc_product_sku_enabled avec condition is_product() — solution ciblée, propre, sans impact back-office
• Méthode 2 : __return_false — désactivation totale pour les boutiques qui n'exploitent pas les SKUs
• Méthode 3 : CSS display: none — masquage visuel uniquement, à réserver au dépannage rapide

Ce type d'optimisation — améliorer l'expérience utilisateur sans plugin supplémentaire, en s'appuyant sur l'API native — est au cœur de notre approche en tant qu'agence spécialisée WordPress et WooCommerce.

---

Article rédigé par [Nom de votre agence] — Agence spécialisée WordPress & WooCommerce.
Maillage interne suggéré : thème enfant WordPress · WPCode snippets · optimisation fiches produits WooCommerce · Core Web Vitals e-commerce