Un thème plus léger, avec moins de scripts embarqués : voilà l’objectif quand on repense l’affichage des caractéristiques techniques d’une fiche produit WooCommerce. La plupart des thèmes premium empilent une bibliothèque JavaScript entière pour afficher un simple accordéon « Description », « Caractéristiques », « Avis ». Or ce comportement existe nativement dans HTML depuis les balises <details> et <summary>, supportées par tous les navigateurs modernes sans polyfill nécessaire pour un usage courant.
Ce tutoriel montre comment structurer les spécifications d’une fiche produit avec ces balises natives, en conservant un rendu propre et accessible, sans écrire de gestionnaire de clic.
La structure minimale
La balise <details> encapsule un contenu repliable, et son premier enfant <summary> sert d’intitulé cliquable. Le navigateur gère seul l’ouverture, la fermeture, et l’icône de bascule :
<details>
<summary>Caractéristiques techniques</summary>
<table>
<tbody>
<tr><td>Poids</td><td>1,4 kg</td></tr>
<tr><td>Dimensions</td><td>32 x 18 x 9 cm</td></tr>
</tbody>
</table>
</details>Intégrer l’accordéon dans le template WooCommerce
Le fichier à surcharger dans le thème enfant est woocommerce/single-product/tabs/tabs.php, ou plus directement le contenu de chaque onglet via le filtre woocommerce_product_tabs. Plutôt que de conserver le système d’onglets à bascule JavaScript fourni par défaut, on peut remplacer l’affichage par une suite de blocs details, un par onglet :
foreach ( $product_tabs as $key => $product_tab ) :
?>
<details>
<summary><?php echo esc_html( $product_tab['title'] ); ?></summary>
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</details>
<?php
endforeach;Pré-ouvrir une section par défaut
L’attribut booléen open affiche le contenu déplié dès le chargement de la page, ce qui est pertinent pour la description principale du produit tandis que les caractéristiques détaillées restent repliées :
<details open>pour la description, visible immédiatement<details>sans attribut pour les caractéristiques techniques, repliées<details>sans attribut pour les avis clients, repliés
Ce que le navigateur gère déjà
La navigation au clavier fonctionne sans code additionnel : la touche Entrée ou Espace bascule l’état d’un summary qui a le focus, et les lecteurs d’écran annoncent correctement l’état ouvert ou fermé grâce à la sémantique native de la balise, sans avoir besoin d’attributs ARIA ajoutés manuellement dans la majorité des cas.
Les limites à connaître
Le style par défaut du triangle indicateur diffère légèrement d’un navigateur à l’autre et se personnalise via le pseudo-élément ::marker. Par ailleurs, une animation d’ouverture fluide façon accordéon souple n’est pas native : le contenu apparaît ou disparaît sans transition, sauf à ajouter un peu de CSS d’accompagnement, ce qui reste largement plus léger qu’une dépendance JavaScript complète.
Sur les thèmes que nous livrons, remplacer les onglets JavaScript par des blocs details/summary a systématiquement réduit le poids du bundle de script chargé sur la fiche produit, sans perte de fonctionnalité perçue par les visiteurs.
Personnaliser l’icône de bascule en CSS pur
Le triangle par défaut affiché devant un summary peut être retiré puis remplacé par un signe plus explicite, comme un plus et un moins, sans JavaScript, en s’appuyant uniquement sur les pseudo-classes CSS et le pseudo-élément ::marker ou ::before :
summary {
list-style: none;
cursor: pointer;
}
summary::before {
content: '+';
margin-inline-end: 8px;
}
details[open] summary::before {
content: '−';
}Le sélecteur d’attribut details[open] cible l’état ouvert directement en CSS, sans qu’aucune classe ne soit ajoutée ou retirée par un script : c’est le navigateur lui-même qui bascule cet attribut selon l’interaction de l’utilisateur.
En résumé
Pour une fiche produit qui n’a pas besoin d’animations sophistiquées, les balises details et summary couvrent l’essentiel du besoin d’un accordéon : repliage, accessibilité clavier, sémantique correcte, le tout sans charger le moindre script. C’est un bon réflexe par défaut avant de réintroduire une dépendance JavaScript pour un gain esthétique marginal.
