Quand un CSS « ne marche pas » sur une page WooCommerce construite avec Divi, le problème n’est pas toujours le code. Très souvent, le style est correct, mais il cible le mauvais élément, il est écrasé par une règle plus prioritaire, ou il ne s’affiche pas à cause du cache.

Le symptôme est frustrant : vous collez une règle, vous rechargez la page, et rien ne bouge. Pourtant, l’inspecteur vous montre bien un sélecteur qui semble exact.

Hypothèses

La page est construite avec Divi et un module boutique WooCommerce en grille. Le style à appliquer concerne l’alignement (centrage au lieu d’un rendu collé à gauche). Le CSS est ajouté dans Divi ou dans WordPress, mais le rendu ne change pas.

Le piège principal : un sélecteur exact peut viser un élément inutile

Dans le cas d’une boutique WooCommerce dans Divi, on a vite tendance à copier un sélecteur très long depuis l’inspecteur, par exemple une chaîne avec plusieurs niveaux et une liste de classes.

Le problème, c’est que ce sélecteur peut viser un div qui occupe déjà 100 % de la largeur.

Résultat : même si la règle CSS s’applique, l’effet visuel est nul.

C’est exactement ce qui arrive quand on essaye de « centrer » un conteneur plein large. Si un bloc fait déjà toute la largeur de son parent, il ne peut pas paraître plus centré.

Étape 1 : vérifier si l’élément ciblé peut réellement être centré

Avant d’écrire du CSS, il faut vérifier une chose simple : la largeur réelle de l’élément ciblé.

Procédure.

Ouvrez la page concernée en front (pas uniquement dans le builder).

Ouvrez l’inspecteur du navigateur.

Cliquez sur l’élément que vous essayez de centrer.

Regardez la largeur calculée.

Si la largeur est égale à celle de l’écran, l’élément est déjà en plein large.

Dans ce cas, vous ne devez pas « centrer ce div ». Vous devez soit limiter sa largeur, soit centrer ce qui est à l’intérieur.

Étape 2 : comprendre les deux types de centrage

Le mot « centrer » recouvre deux besoins différents.

Premier besoin : centrer le module lui-même.

Vous voulez que le bloc boutique soit plus étroit, avec une marge de chaque côté, comme une colonne de contenu classique.

Deuxième besoin : centrer les produits à l’intérieur.

Vous voulez que la grille de produits se recentre, surtout quand la dernière ligne n’est pas complète.

Si vous traitez le mauvais niveau, vous aurez l’impression que « ça ne marche pas ».

Étape 3 : première correction fiable, centrer le module shop

Dans la discussion, une règle efficace a été proposée : donner une largeur maximum au module Divi shop, puis le centrer avec des marges automatiques.

Cette logique a un avantage : elle produit un effet visible immédiatement.

Elle est aussi plus stable qu’un sélecteur ultra profond.

Procédure de test.

Ciblez le module WooCommerce Divi avec une classe de module.

Appliquez une limite de largeur (max-width).

Ajoutez des marges automatiques.

Neutralisez le float si nécessaire.

Exemple.

#et_pb_section_0_particles .et_pb_shop_0 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  float: none !important;
}

Résultat attendu.

Le bloc boutique devient plus étroit.

Il s’aligne au centre.

Il ne colle plus au bord gauche.

Si le résultat n’apparaît pas, ce n’est pas forcément parce que la règle est mauvaise. Il faut passer à la vérification suivante.

Étape 4 : si rien ne change, votre cible n’est probablement pas la bonne

Dans Divi, les identifiants de modules du type “et_pb_shop_0” changent facilement.

Ils dépendent de l’ordre d’apparition des modules sur la page.

Vous pouvez donc avoir un module boutique qui est en réalité “et_pb_shop_1”, “et_pb_shop_2”, etc.

Procédure.

Dans l’inspecteur, cliquez le module boutique.

Remontez dans la hiérarchie jusqu’à trouver une classe proche de “et_pb_shop”.

Vérifiez si l’élément contient aussi un suffixe numérique.

Si le suffixe ne correspond pas au CSS, la règle ne cible rien.

Solution.

Utilisez une cible moins fragile.

Par exemple, viser la classe générique du module boutique peut être plus stable.

Cela évite de dépendre d’un numéro.

Étape 5 : si le module est centré mais que les produits restent « à gauche »

C’est l’autre grand cas.

Vous avez un bloc boutique correctement positionné, mais la grille de produits donne encore un effet de décalage.

C’est particulièrement visible si vous avez un nombre de produits qui ne remplit pas parfaitement la dernière ligne.

Dans ce cas, le problème est interne : ce n’est pas le module, c’est la grille.

La solution logique est de centrer la distribution des produits.

Dans WooCommerce, les produits sont souvent dans “ul.products”.

Procédure.

Passez le conteneur en flex.

Autorisez le retour à la ligne.

Centrez les éléments.

Exemple.

#et_pb_section_0_particles .et_pb_shop_0 ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Résultat attendu.

Chaque ligne de produits est centrée.

La dernière ligne n’est plus collée à gauche.

Si la mise en page devient étrange, il y a une explication probable.

Des floats ou des calculs de largeur existants se battent avec flex.

Étape 6 : neutraliser ce qui empêche flex de fonctionner

Si vous voyez les produits se superposer, ou des largeurs incohérentes, il faut vérifier les styles des éléments “product”.

Dans certains thèmes, WooCommerce force des floats sur les items.

Dans ce cas, vous pouvez neutraliser ces floats.

Exemple.

#et_pb_section_0_particles .et_pb_shop_0 ul.products li.product {
  float: none !important;
}

Le but n’est pas de tout réécrire.

Le but est d’empêcher une vieille logique de grille (float) de contredire une logique moderne (flex).

Étape 7 : le centrage visible peut venir du texte, pas de la grille

Un autre piège courant : le bloc est correct, la grille est correcte, mais le texte des cartes reste aligné à gauche.

Visuellement, cela donne une impression de manque de centrage.

Dans ce cas, ce n’est pas un problème de layout. C’est un problème typographique.

Solution.

Appliquer un text-align au module.

Exemple.

#et_pb_section_0_particles .et_pb_shop_0 {
  text-align: center;
}

Limite.

Ce réglage peut aussi centrer des boutons ou d’autres éléments.

Il doit être utilisé seulement si c’est réellement l’objectif.

Étape 8 : pourquoi copier un sélecteur complet depuis l’inspecteur peut échouer

Dans la discussion, plusieurs sélecteurs ont été testés, dont un ciblage très long.

Ce type de sélecteur semble précis.

Mais il est fragile.

Une page Divi contient souvent des wrappers générés.

Le builder et l’affichage front ne sont pas toujours identiques.

Un réglage du module peut ajouter ou retirer un conteneur.

Résultat : le sélecteur ne matche plus.

C’est pour cela que viser des classes stables est souvent plus durable.

Le module boutique (classe “et_pb_shop”).

La grille WooCommerce (classe “products”).

Les produits (classe “product”).

Étape 9 : vérifier la priorité, et comprendre pourquoi votre règle est écrasée

Même quand le sélecteur est bon, le CSS peut être écrasé.

Dans Divi, beaucoup de styles sont très spécifiques.

Si votre règle n’a pas assez de priorité, elle apparaît dans l’inspecteur, mais elle est barrée.

Procédure.

Ouvrez l’inspecteur.

Cliquez sur l’élément.

Repérez votre règle dans l’onglet “Styles”.

Si elle est barrée, elle est moins prioritaire qu’une autre.

Solutions possibles.

Simplifier le ciblage, mais l’ancrer dans une section spécifique.

Ajouter !important seulement sur la propriété nécessaire.

Éviter de mettre !important partout, car cela rend la maintenance pénible.

Dans la discussion, un !important a été proposé sur float, car c’est un point bloquant classique.

Étape 10 : vérifier le cache, sinon vous testez dans le vide

Dernier piège : le CSS est bon, le sélecteur est bon, mais le navigateur affiche une version ancienne.

Cela arrive souvent sur WordPress.

Cela arrive aussi sur Divi.

Même sans outil externe, un simple cache navigateur peut suffire à fausser un test.

Procédure.

Faites un rechargement forcé.

Testez en navigation privée.

Comparez l’heure de modification si votre CSS est dans un fichier.

Si vous utilisez un espace “CSS personnalisé” dans Divi, vérifiez que vous modifiez bien le bon endroit.

Si vous avez plusieurs endroits possibles (theme options, page options, customizer), vous pouvez écrire au mauvais endroit sans le savoir.

Quand il vaut mieux arrêter d’empiler des correctifs

Si votre page a plusieurs modules shop, ou plusieurs gabarits, un centrage fait “au cas par cas” devient vite ingérable.

Vous vous retrouvez avec des sélecteurs longs et un CSS difficile à maintenir.

Dans ce cas, une correction globale, propre, et documentée est plus rentable.

Si vous rencontrez le même symptôme et voulez un diagnostic rapide avec plan d’action, contactez-nous: assistance informatique et dépannage.

Pour un site WordPress, la version la plus adaptée est un dépannage ciblé. Pour remettre votre site d’aplomb sans perdre de données, demandez un dépannage prioritaire: dépannage WordPress en urgence.

Conclusion

Quand un CSS ne change rien sur une boutique WooCommerce dans Divi, la cause se trouve presque toujours dans un de ces points.

Vous centrez un bloc déjà en pleine largeur.

Vous ne centrez pas le bon niveau (module vs grille interne).

Votre règle ne cible rien, car le module n’a pas le bon identifiant.

Votre règle est écrasée par une priorité plus forte.

Ou le cache vous fait croire que rien ne s’applique.

Une méthode propre consiste à vérifier la largeur réelle, puis à appliquer le bon centrage au bon niveau.

FAQ

Comment savoir si mon CSS est bien appliqué ?

Dans l’inspecteur, votre règle doit apparaître et ne pas être barrée. Si elle est visible mais barrée, elle est écrasée.

Pourquoi mon div ne se centre pas avec margin auto ?

Parce qu’il fait déjà 100 % de largeur, ou qu’il est en float. Dans ce cas, il faut limiter la largeur ou neutraliser le float.

Pourquoi mon sélecteur copié depuis l’inspecteur ne marche pas ?

Parce que la structure peut varier (builder vs front) et qu’un niveau peut changer. Visez des classes stables.

Est-ce que flex peut casser WooCommerce ?

Si le thème impose des floats, oui. Il suffit souvent de neutraliser les floats sur les produits.

Quelle est l’approche la plus durable ?

Centrer le module avec une max-width, puis centrer la grille interne uniquement si nécessaire. Évitez les chaînes de sélecteurs trop longues.