Créer des onglets « à la volée » pour la page produit WooCommerce

Avant de découvrir ce snippet de code génial, permettez-moi de vous présenter un problème commun auquel sont confrontés de nombreux propriétaires de sites WooCommerce. Imaginez que vous ayez une boutique en ligne florissante avec des dizaines, voire des centaines de produits. Chaque produit a sa propre description détaillée, mais vous souhaitez offrir une expérience utilisateur encore meilleure en utilisant des onglets pour organiser le contenu.

Actuellement, la création d’onglets pour chaque page produit peut être fastidieuse et prendre beaucoup de temps. Vous devez modifier le code de votre thème ou utiliser un plugin dans les 2 cas vous aurez des réglages globaux pour toutes vos fiches produits et elles devront toutes avoir les mêmes onglets.

Mais ne vous inquiétez plus ! J’ai découvert une solution simple et efficace qui vous permettra de créer des onglets pour les pages produit de WooCommerce en un rien de temps. Vous n’aurez besoin que d’un thème enfant et d’une connaissance basique du copier-coller. Oui, vous avez bien entendu !

Permettez-moi de vous présenter un snippet de code qui révolutionnera la façon dont vous gérez les onglets pour les pages produit de votre boutique en ligne WooCommerce.

Voici les 3 étapes faciles pour rendre dynamique la création des onglets :

Étape 1 : Coller le snippet

Tout d’abord, ouvrez le fichier « functions.php » de votre thème enfant (si vous n’avez pas encore créé de thème enfant, je vous recommande vivement de le faire pour éviter de perdre vos modifications lors des mises à jour du thème). Ensuite, collez le snippet de code suivant à la fin du fichier :

function ajouter_onglets_personnalises() {
    global $product;

    // Récupérer la description du produit
    $description = $product->get_description();

    // Vérifier si la description contient des onglets personnalisés
    if (strpos($description, '<div class="tab-title">') !== false) {
        // Diviser la description en onglets
        $onglets = explode('<div class="tab-title">', $description);

        // Supprimer le premier élément (non utilisé)
        unset($onglets[0]);

        // Tableaux pour stocker les titres et les contenus des onglets
        $titres_onglets = array();
        $contenus_onglets = array();

        // Parcourir les onglets et extraire les titres et les contenus
        foreach ($onglets as $onglet) {
            // Extraire le titre de l'onglet
            $pos_fin_titre = strpos($onglet, '</div>');
            $titre_onglet = substr($onglet, 0, $pos_fin_titre);

            // Extraire le contenu de l'onglet
            $contenu_onglet = substr($onglet, $pos_fin_titre + strlen('</div>'));

            // Supprimer la classe "tab-content" du contenu de l'onglet
            $contenu_onglet = str_replace('tab-content', '', $contenu_onglet);

            // Ajouter le titre et le contenu aux tableaux correspondants
            $titres_onglets[] = $titre_onglet;
            $contenus_onglets[] = $contenu_onglet;
        }

        // Vérifier si des onglets ont été trouvés
        if (!empty($titres_onglets)) {
            // Ajouter les onglets à la section "woocommerce_product_tabs"
            add_filter('woocommerce_product_tabs', function ($tabs) use ($titres_onglets, $contenus_onglets) {
                foreach ($titres_onglets as $key => $titre) {
                    $tabs['custom_tab_' . $key] = array(
                        'title'     => $titre,
                        'priority'  => 50 + $key,
                        'callback'  => function() use ($contenus_onglets, $key) {
                            echo '<div>' . wpautop($contenus_onglets[$key]) . '</div>';
                        },
                    );
                }
                return $tabs;
            });
        }
    }
}
add_action('woocommerce_single_product_summary', 'ajouter_onglets_personnalises', 25);

Ce snippet de code utilise les fonctionnalités de WooCommerce pour ajouter des onglets personnalisés à la section « woocommerce_product_tabs » de la page produit. Il extrait les titres et les contenus des onglets de la description du produit et les ajoute dynamiquement. Maintenant, passons à l’étape suivante.

Étape 2 : Rédiger le contenu de la description de la page produit

Maintenant que vous avez collé le snippet de code dans le fichier « functions.php » de votre thème enfant, vous pouvez commencer à rédiger le contenu de la description de vos produits avec les balises spécifiques pour les onglets.

Utilisez la balise <div class="tab-title"> pour définir le titre de chaque onglet et la balise <div class="tab-content"> pour le contenu de chaque onglet. Par exemple, si vous voulez créer deux onglets intitulés « Détails » et « Caractéristiques », vous pouvez rédiger la description de la page produit comme suit :

<div class="tab-title">Détails</div>
<div class="tab-content">
    <!-- Contenu du premier onglet "Détails" -->
</div>

<div class="tab-title">Caractéristiques</div>
<div class="tab-content">
    <!-- Contenu du deuxième onglet "Caractéristiques" -->
</div>

Vous pouvez ajouter autant d’onglets que vous le souhaitez en répétant ces balises. Assurez-vous simplement de respecter la structure et les classes CSS spécifiées.

Étape 3 : Coller le CSS personnalisé

Maintenant que vous avez collé le snippet de code dans le fichier « functions.php » et rédigé le contenu des onglets dans la description de la page produit, il est temps de coller une dernière ligne de code CSS dans le CSS personnalisé de votre thème.

Ouvrez le fichier CSS personnalisé de votre thème (cela peut varier en fonction du thème que vous utilisez, généralement appelé « style.css » ou « custom.css ») et ajoutez la ligne suivante :

div.tab-title, div.tab-content {
    display: none;
}

Ce code CSS permet de masquer les balises <div class="tab-title"> et <div class="tab-content">, car elles ne sont nécessaires que pour le fonctionnement des onglets. Les onglets eux-mêmes seront affichés dynamiquement grâce au snippet de code que vous avez collé précédemment.

Et voilà !

Vous avez réussi à créer des onglets facilement et à la volée pour les pages produit de votre boutique WooCommerce, sans tracas et sans avoir à modifier manuellement le code pour chaque produit.

En utilisant ce snippet de code, vous pouvez économiser un temps précieux et rendre votre boutique en ligne plus attrayante et conviviale pour vos clients. Organisez le contenu de vos produits, ajoutez des informations supplémentaires dans des onglets distincts et améliorez l’expérience d’achat de vos visiteurs.

N’oubliez pas que pour utiliser ce snippet, vous devez disposer d’un thème enfant. Si vous n’en avez pas encore créé un, je vous recommande de le faire dès maintenant. Cela vous permettra de garder vos modifications en sécurité lors des mises à jour de votre thème principal.

Alors, qu’attendez-vous ?

Essayez dès maintenant ce snippet de code incroyable et libérez-vous de la création manuelle d’onglets pour les pages produit de votre boutique WooCommerce. Vos clients vous en seront reconnaissants, et vous pourrez consacrer plus de temps à faire prospérer votre entreprise en ligne. Bonne création d’onglets !