Le code court [prodtabs] et le bloc Onglets produit

Publié le 16 octobre 2026 par Thomas Soudaz.

Depuis sa version 0.4.0, sortie le 15 octobre 2026, ProdTabs (l'extension d'onglets produit que je développe) sait afficher les onglets d'un produit ailleurs que sur sa fiche. C'est utile avec un thème ou un constructeur de pages qui n'affiche pas les onglets de WooCommerce, ou pour reprendre un seul onglet dans une page. Voyons comment faire.

Les quatre formes du code court

Le code court s'appelle [prodtabs] et s'écrit de quatre façons :

[prodtabs]
[prodtabs product="14"]
[prodtabs product="14" tab="notre-avis"]
[prodtabs shared="1279"]

Sans attribut, il affiche tous les onglets du produit de la page, tels que la boutique les montre (c'est la forme à placer dans le modèle d'une fiche produit). Avec product, il affiche les onglets d'un autre produit, sur n'importe quelle page.

Avec tab, il n'affiche qu'un onglet, désigné par son ancre : notre-avis pour l'onglet qu'on ouvre par #tab-notre-avis. L'onglet garde son titre, sauf si l'on ajoute title="no".

Enfin, shared affiche un onglet partagé (une garantie, des conditions de livraison, un guide des tailles écrit une fois pour tout le catalogue), dans la langue de la page.

Le code tout prêt

Personne n'a envie de chercher l'identifiant d'un produit ou l'ancre d'un onglet. Le panneau Onglets de chaque produit donne donc le code court de chaque onglet, et celui de tout le produit, avec un bouton pour le copier :

Panneau Onglets d'un produit WooCommerce : sous l'onglet Notre avis déplié, le lien direct #tab-notre-avis et le champ Code court de cet onglet, [prodtabs product="14" tab="notre-avis"], avec un bouton Copier ; plus bas, les autres onglets, puis le champ Code court de tous les onglets de ce produit, [prodtabs product="14"], avec son bouton Copier.

L'écran de chaque onglet partagé a le même champ, avec la forme shared. La vue d'ensemble de ProdTabs rappelle aussi les quatre formes, dans sa carte « Onglets ailleurs ».

Il reste à coller le code dans la page, par exemple dans un bloc Code court de l'éditeur de WordPress, ou dans le module équivalent d'un constructeur de pages.

Le bloc Onglets produit

Dans l'éditeur de blocs, le bloc « Onglets produit (ProdTabs) » fait la même chose sans code à copier. Ses réglages tiennent en trois champs :

Notez que l'identifiant du produit peut rester vide : le bloc prend alors le produit de la page, ou celui du bloc Produit unique ou de la liste de produits qui l'entoure. C'est ce qui permet de le placer une fois pour toutes dans le modèle des fiches produit d'un thème en blocs.

Le résultat

La page de l'exemple, telle qu'un visiteur la voit sur ma boutique de démonstration :

La page Garantie et avis vue par un visiteur : une phrase d'introduction, l'onglet partagé Garantie avec son titre et son texte, Garantie de 2 ans, pièces et main d'oeuvre, puis l'onglet Notre avis du calendrier Lindor, sans titre ajouté, avec sa note de 4,2 sur 5.

L'onglet partagé garde son titre. L'avis, lui, n'en reçoit pas : le bloc a l'interrupteur de titre désactivé (l'équivalent de title="no"), et le contenu de cet onglet commence déjà par son propre titre.

Les pièges

L'ancre s'écrit comme on veut : notre-avis, tab-notre-avis ou #tab-notre-avis. On peut même taper le titre tel qu'il s'affiche, il est converti en ancre.
Une variation n'a pas d'onglets à elle : avec l'identifiant d'une variation, le code court n'affiche rien. Utilisez celui du produit parent.
Un produit non publié, ou protégé par un mot de passe, n'affiche rien aux visiteurs.
Un onglet qui contiendrait lui-même le code court n'affiche rien à cet endroit (sinon, la page tournerait en rond).
Sur une boutique multilingue, un onglet partagé pas encore traduit s'affiche dans la langue d'origine, sauf si le réglage « Onglets pas encore traduits » le masque. Le détail est dans l'article sur la traduction des onglets.

Dernier détail : la forme qui affiche tous les onglets charge le script de WooCommerce qui ouvre et ferme les onglets, si bien qu'ils fonctionnent aussi sur une page qui n'est pas une fiche produit. Le code court et le bloc font partie de la version gratuite de ProdTabs, qui se télécharge ici.