Un module WooCommerce peut sembler « collé à gauche » même quand on a l’impression d’avoir ciblé le bon élément. Le problème vient souvent du conteneur qui occupe déjà 100 % de la largeur, ou d’un style Divi (float, largeur forcée, alignement interne) qui neutralise le centrage.

L’objectif ici est simple : recentrer visuellement le module boutique (ou la grille de produits) dans la page, sans casser la mise en page.

Hypothèses

La page est construite avec Divi et un module boutique (shop) en mode grille. Le rendu est aligné à gauche sur desktop, et vous voulez que l’ensemble du bloc soit centré à l’écran. Les sélecteurs vus dans l’inspecteur ressemblent à ceux d’un module Divi standard.

Le symptôme réel : « le div est à gauche » ne veut pas dire la même chose selon le cas

Avant de toucher au CSS, il faut comprendre ce qui est réellement aligné à gauche.

Dans Divi + WooCommerce, il y a généralement deux problèmes possibles.

Premier cas : c’est le module entier qui est trop large ou collé à gauche. Visuellement, on a l’impression que la boutique commence trop tôt, et que la zone ne respecte pas une largeur de lecture confortable.

Deuxième cas : le module est bien en pleine largeur, mais les cartes produits à l’intérieur restent alignées à gauche. Ça arrive quand la grille ne remplit pas toute la ligne, ou quand la distribution des colonnes ne “centre” pas les éléments restants.

Dans la discussion, la tentative initiale était de centrer un div via un sélecteur très profond. Ça peut échouer, car centrer un élément qui fait déjà 100 % de largeur ne change rien.

Première tentative classique : margin auto, et pourquoi ça ne marche parfois pas

La première méthode qu’on essaye souvent, c’est de centrer un bloc en lui mettant des marges automatiques.

Quand cette méthode ne fonctionne pas, c’est généralement pour une de ces raisons.

Le bloc n’a pas de largeur limitée. S’il fait 100 %, il n’y a rien à “centrer”.

Le bloc est en float. Un float ignore en partie le comportement attendu de margin-left / margin-right auto.

Un parent impose des contraintes, par exemple un conteneur Divi qui force un alignement.

Dans la discussion, le module semblait être un module Divi WooCommerce (“shop grid”). Même si vous ciblez un élément interne, il peut rester plein large.

Étape 1 : centrer le module shop lui-même, proprement

L’approche la plus fiable est de centrer le module, puis de limiter sa largeur maximum. C’est ce qui donne un rendu « centré sur l’écran » comme une vraie colonne de contenu.

Pour tester, commencez par cibler le module WooCommerce Divi par sa classe de module (souvent proche de “et_pb_shop_0” ou similaire). L’idée est d’éviter les sélecteurs trop longs, qui cassent dès qu’un détail de structure change.

Ajoutez ce CSS dans votre feuille de style (Divi > options du thème > CSS personnalisé, ou dans l’apparence du site selon votre méthode).

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

Comment vérifier si ça a un effet.

Étape 1. Ouvrez la page en mode navigateur (pas uniquement dans le builder).

Étape 2. Rechargez en vidant le cache si nécessaire.

Étape 3. Regardez si le bloc “boutique” devient plus étroit et se place au centre.

Si rien ne change, deux explications reviennent souvent.

Le module que vous avez ciblé n’est pas le bon (le numéro “_0” change selon la page).

Ou bien c’est le conteneur parent qui pilote la largeur, pas le module.

Étape 2 : si le module ne bouge pas, corriger le conteneur parent

Dans la discussion, un sélecteur complet a été utilisé, puis un autre qui cible le “div” interne du module. Le problème est que ce “div” interne peut être le conteneur qui prend déjà toute la place.

Quand le module n’est pas centré via margin auto, une méthode efficace est de centrer via le parent en flex.

Cette fois, on centre le module dans sa rangée Divi.

#et_pb_section_0_particles > div > div {
  display: flex;
  justify-content: center;
}

#et_pb_section_0_particles .et_pb_shop_0 {
  width: 100%;
  max-width: 1200px;
}

Comment valider.

Étape 1. Ouvrez l’inspecteur.

Étape 2. Sélectionnez l’élément qui contient le module shop (la colonne / rangée Divi).

Étape 3. Vérifiez que “display: flex” est bien appliqué et non barré.

Si “display: flex” est barré, il y a un CSS plus prioritaire ailleurs, ou votre sélecteur ne correspond pas exactement.

Étape 3 : si ce sont les produits à l’intérieur qui restent à gauche, centrer la grille

Même quand le module est centré, il peut rester un effet “à gauche” car ce n’est pas le module qui pose problème, mais la grille interne.

Dans WooCommerce, les produits sont souvent dans un conteneur de type “ul.products”. Divi réutilise généralement cette structure.

L’idée est de transformer cette liste en flex et de centrer les items.

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

Pourquoi ça marche.

Quand il manque une carte sur la dernière ligne, le navigateur n’étire pas “magiquement” la distribution. Sans centrage, la dernière ligne peut rester collée à gauche. Avec justify-content: center, elle se recentre.

Comment tester sans casser le design.

Étape 1. Activez la règle dans l’inspecteur, en direct.

Étape 2. Regardez si les rangées de produits se centrent.

Étape 3. Vérifiez que les produits gardent une largeur cohérente.

Si la mise en page se dégrade, il peut y avoir des floats ou des largeurs spécifiques sur les items.

Dans ce cas, vous pouvez neutraliser les floats.

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

Étape 4 : centrer l’alignement du texte, si c’est ça que vous vouliez

Parfois, ce qui choque visuellement, ce n’est pas la grille, mais le texte des cartes (nom du produit, prix) qui est aligné à gauche.

Dans ce cas, on ne centre pas le module, on centre le contenu.

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

Attention : ce réglage centre aussi d’autres éléments (boutons, étiquettes). Il faut le garder seulement si c’est vraiment l’objectif.

Pourquoi un sélecteur très long peut être un piège

Dans la discussion, les sélecteurs passaient par plusieurs niveaux, puis une liste complète de classes Divi. C’est tentant, parce qu’on a l’impression de viser “exactement le bon endroit”.

En pratique, c’est fragile.

Divi peut réordonner des div, ajouter des wrappers, ou changer l’ordre selon les réglages du module. Un seul niveau qui change et le sélecteur ne match plus.

Un ciblage plus robuste consiste à viser.

Le module (classe et_pb_shop + un identifiant de module du type et_pb_shop_0).

Le conteneur WooCommerce (ul.products).

Le produit (li.product).

Si vous voulez un CSS durable, évitez de dépendre de toute la chaîne “> div > div > div”.

Vérification finale : comment savoir ce qui est vraiment centré

Le moyen le plus simple est de vérifier la largeur réelle.

Étape 1. Dans l’inspecteur, cliquez le module shop.

Étape 2. Regardez la largeur (width) calculée.

Étape 3. Regardez la marge gauche et droite.

Si le bloc fait 100 % et n’a pas de max-width, il ne peut pas “se centrer”. Il occupe déjà toute la ligne.

Si le bloc a une max-width et des margins auto, vous verrez des marges symétriques.

Si le bloc est bien centré mais que les produits restent à gauche, c’est la grille interne qui doit passer en flex.

Quand passer à une correction plus propre dans Divi

Si vous modifiez beaucoup de CSS autour d’un module boutique, c’est souvent le signe que la mise en page “structurelle” devrait être ajustée.

Par exemple, une rangée Divi réglée en pleine largeur peut forcer un rendu qui vous oblige à compenser en CSS.

Dans certains cas, créer une vraie colonne de contenu dans Divi et y placer le module shop peut réduire le besoin de CSS personnalisé.

Pour une remise à plat propre, un diagnostic rapide permet souvent de stabiliser l’affichage sans bricolage. Pour remettre votre site d’aplomb sans perdre de données, demandez un dépannage prioritaire: dépannage WordPress en urgence.

Conclusion

Le centrage d’un module WooCommerce dans Divi se joue à deux niveaux : le centrage du module (avec une largeur max), et le centrage de la grille interne si les produits restent collés à gauche.

Si une règle CSS n’a aucun effet, ce n’est pas forcément “mauvais CSS”. C’est souvent un sélecteur qui ne correspond pas, ou un élément qui fait déjà 100 % de largeur.

Quand le besoin est récurrent sur plusieurs pages, une correction globale et durable est souvent plus rentable qu’une série de sélecteurs trop précis.

FAQ

Pourquoi margin auto ne centre pas mon bloc ?

Parce que le bloc fait déjà 100 % de largeur, ou qu’il est en float. Sans largeur limitée (ou max-width), le centrage ne peut pas se voir.

Comment savoir si je dois centrer le module ou la grille des produits ?

Si tout le bloc “boutique” est trop large ou mal positionné, centrez le module. Si le bloc est correct mais que les cartes restent à gauche, centrez la grille interne.

Pourquoi mon sélecteur Divi ne marche pas alors que je l’ai copié depuis l’inspecteur ?

Parce que la structure peut changer selon l’état (builder vs front), ou parce qu’un wrapper supplémentaire s’intercale. Visez des classes stables comme le module shop et la liste “products”.

Centrer le texte des produits suffit-il ?

Non, ça ne centre pas la grille. Ça change uniquement l’alignement typographique. C’est utile si l’impression “à gauche” vient du texte.

Est-ce risqué de passer ul.products en flex ?

Ça peut modifier le comportement des largeurs si le thème a des floats ou des calculs spécifiques. Testez d’abord dans l’inspecteur, puis neutralisez les floats si nécessaire.