existent WooCommerce Par défaut, la page de détail du produit dans la boutique contient des onglets tels que "Description", "Informations supplémentaires", "Commentaires", etc. Toutefois, dans la pratique, les commer?ants ont souvent besoin d'ajouter un contenu plus personnalisé pour répondre à leurs besoins commerciaux, par exemple :

• Service après-vente
• Histoire de la marque
• Politique d'expédition et de retour
• Guide de l'utilisateur ou vidéo du produit

Cet article montre comment utiliser une approche par code pour le WooCommerce Ajouter un nouvel onglet personnalisé (par exemple "Service après-vente") à la page des détails du produit et permettre une gestion flexible.

I. Comment mettre en place des onglets personnalisés

WooCommerce propose des filtres spécialiséscrochets woocommerce_product_tabsqui permet de modifier la structure des onglets de la page de détail du produit. Il suffit d'ajouter un nouvel onglet à l'aide de ce crochet.

Exemple de code : ajouter l'onglet "service après-vente

Ajoutez le code suivant à la section functions.php Documentation :

add_filter('woocommerce_product_tabs', 'custom_add_after_sales_tab' ) ;
function custom_add_after_sales_tab( $tabs ) {
    $tabs['after_sales'] = array(
        'title' => 'Services après-vente',
        'priority' => 50, // contrôle l'ordre d'affichage
        'callback' => 'custom_after_sales_tab_content'
    ) ;
    return $tabs.
}

function custom_after_sales_tab_content() {
    echo '<h2>Service après-vente</h2>' ; echo '
    echo '<p>Tous les produits de notre boutique bénéficient d'un délai de 7 jours sans motif de retour et d'un service de remplacement sous 30 jours en cas de problème de qualité. Pour plus de détails, veuillez contacter le service clientèle.</p>';
}

II. support de contenu personnalisé HTML, images, vidéos (pour l'affichage d'instructions ou d'exemples)

existent Gutenberg En utilisant le bloc "Code" dans l'éditeur.

• Lors de l'édition d'un article, cliquez sur + Ajouter un nouveau bloc

• Rechercher "Code" ou "Code" et insérer

Exemple :

echo '

    
Support 7 jours sans raison retour</li
    
30 jours de garantie d'échange gratuit</li
    
Garantie nationale, fournir une facture officielle
.
' ;

Vous pouvez même insérer des vidéos ou des images pour rendre la page plus attrayante :

echo '<img src="https://yourdomain.com/wp-content/uploads/after-sales.jpg" alt="le service après-vente">';

III. mise en place de contenus différents pour des produits différents (utilisation avancée)

Si vous souhaitez que différents produits affichent des contenus de service après-vente différents, vous pouvez utiliser l'option get_the_ID() peut-être $product->get_id() Obtenir l'ID du produit actuel et faire un jugement :

function custom_after_sales_tab_content() {
    $product_id = get_the_ID() ;
    if ( $product_id == 123 ) {
        echo '<p>Ce produit bénéficie d'un service de réparation gratuit pendant 12 mois.</p>' ; } else {
    } else {
        echo '<p>Les politiques habituelles du marché secondaire s'appliquent.</p>';
    }
}

Masquer les onglets par défaut (par exemple, "Extra Info").

Vous pouvez également masquer certains onglets par défaut que vous ne souhaitez pas afficher, par exemple :

add_filter('woocommerce_product_tabs', 'remove_unwanted_product_tabs', 98 ) ;
function remove_unwanted_product_tabs( $tabs ) {
    unset( $tabs['additional_information'] ) ; // informations supplémentaires
    return $tabs.
}

V. Questions fréquemment posées

Q1 : Cela affectera-t-il les paramètres du backend ?
Ce n'est pas le cas. Cette méthode ne fonctionne que sur lesfaire avancer une partie de qqch.Affiché, l'éditeur de produit du backend conserve tous les champs.

Q2：Peut-on ajouter plusieurs onglets en même temps ?
Oui, il suffit d'ajouter plusieurs structures de tableau de fa?on répétée. Par exemple, ajoutez plusieurs onglets tels que "Branding", "User's Guide", etc.

Q3 : Les mises à jour du thème affectent-elles le code ?
Si vous modifiez directement le fichier functions.phpqui peut être écrasé lors de la mise à jour du thème. Il est recommandé d'utilisersous-thèmeou Code Snippets pour gérer ce code fonctionnel.

VI. conclusion

En personnalisant WooCommerce Grace au contenu des onglets sur les pages détaillées des produits, les marchands peuvent communiquer plus précisément la valeur de la marque, la garantie après-vente et les informations sur le service produit, offrant ainsi aux utilisateurs une expérience d'achat plus claire et plus crédible. Sans plug-in, quelques lignes de code suffisent pour étendre le contenu de la page de détail du produit, personnaliser la page et améliorer le taux de conversion et la satisfaction du client.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.