Peut-on personnaliser les pages de détails des produits de WooCommerce avec du code ? Guide complet de démarrage

WooCommerce C'est le meilleur plugin e-commerce pour WordPress qui permet de créer facilement des pages produits, des paniers d'achat et des systèmes de paiement. Mais la page produit par défaut ne répond peut-être pas à vos besoins ? Ne vous inquiétez pas, en fait, avec un simple code, vous pouvez personnaliser la page de détail du produit pour la rendre plus conforme au style de votre boutique. Voici comment la modifier de vos propres mains.

I. Introduction à la structure des pages détaillées des produits WooCommerce

Par défaut, WooCommerce affiche la page produit en utilisant le modèle intégré, qui s'ouvre avec le chemin :

/wp-content/plugins/woocommerce/templates/single-product/

Les structures les plus courantes sont les suivantes

• Titre du produit (woocommerce_template_single_title)
• Prix du produit (woocommerce_template_single_price)
• Images du produit (woocommerce_show_product_images)
• Une brève description du produit (woocommerce_template_single_excerpt)
• Bouton d'ajout au panier (woocommerce_template_single_add_to_cart)
• Étiquetage et classification des produits (woocommerce_template_single_meta)
• Détails du produit (description, critiques, onglet) (woocommerce_output_product_data_tabs)

Ces pièces sont mises à disposition par l'intermédiaire du WordPress Le système de crochets (actions et filtres) est chargé et contrôlé.

Deuxièmement, comment personnaliser la page de détail du produit à l'aide d'un code ?

WooCommerce est hautement personnalisable, avec la possibilité d'ajouter, de supprimer et de réorganiser les éléments des pages de produits avec seulement quelques lignes de code.

Ouvrez le chemin d'accès en tant que : WordPress- Apparence - Editeur de fichiers de thème

1. supprimer les modules par défaut (par exemple, supprimer l'étiquetage du produit)

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ) ;

Ajoutez ce code à la section functions.php Le fichier est correct.

2. ajouterpersonnalisationContenu (par exemple, insérer une phrase sous le prix)

add_action( 'woocommerce_single_product_summary', 'custom_text_after_price', 11 ) ;
function custom_text_after_price() {
    echo '<p class="custom-message">🎁 Ce produit peut être retourné ou échangé pendant 7 jours sans raison.</p>';
}

Le chiffre 11 est ici la priorité, pour s'assurer qu'il se charge après le prix (la priorité par défaut est 10).

3. modifier l'emplacement du module (par exemple, déplacer la brève description sous le bouton "Ajouter au panier").

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ) ;
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 35 ) ;

Il suffit d'ajuster lecrochetsLe changement flexible de position est rendu possible par l'ordre de chargement du

Troisièmement, remplacez le fichier modèle de la page des détails du produit

Si un changement structurel plus radical est nécessaire, il peut être supplanté par WooCommerce Modèle par défaut :

• Créer un répertoire dans le sujet ou le sous-sujet actuel /votre-thème/woocommerce/produit-simple/
• Copiez les fichiers nécessaires à partir du répertoire des modèles du plugin (par ex. prix.php, title.php etc.) vers le chemin ci-dessus
• En modifiant ces modèles, la structure peut être personnalisée sans affecter les mises à jour ultérieures de WooCommerce !

IV. recommandations pratiques de personnalisation

• Ajouter le numéro de produit ou l'état des stocks sous l'image du produit
• Afficher des messages différents selon que l'utilisateur est connecté ou non
• collocation ACF Le plugin affiche des champs personnalisés pour la marque, l'origine, etc.
• Permettre des logiques de mise en page différentes uniquement pour certains types de produits

V. Compétences du développeur en matière de débogage

Activez la fonction de débogage des modèles de WooCommerce pour visualiser rapidement les sources des modèles et l'emplacement des crochets :

add_filter('woocommerce_developer_mode', '__return_true' ) ;

A utiliser avec le plugin Query Monitor pour visualiser les crochets chargés, les chemins d'accès aux modèles et les priorités d'exécution.

VI. résumé

WooCommerce Les pages de détail des produits peuvent être entièrement personnalisées de manière flexible par le code. Il suffit de maîtriser le mécanisme de base des crochets et la méthode de remplacement des modèles pour pouvoir ajuster librement le contenu et l'ordre d'affichage en fonction de l'activité réelle de l'entreprise, de sorte que la page produit soit plus professionnelle et présente davantage de caractéristiques de marque.

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.