Comment modifier la page du produit WooCommerce par programmation

Publié: 2021-01-09

Vous cherchez des moyens de personnaliser la page produit de votre boutique en ligne ? Dans ce guide, nous allons vous montrer comment modifier la page du produit WooCommerce par programmation .

Personnalisation de la page produit

Même si vous pouvez personnaliser n'importe quoi dans votre boutique, les deux pages principales où la plupart des personnalisations se produisent dans WooCommerce sont la page de la boutique et la page des produits. Si vous souhaitez booster vos ventes et optimiser le début du processus d'achat, vous devez travailler sur les deux. Nous avons déjà vu comment personnaliser la page Boutique, nous allons donc vous montrer aujourd'hui comment modifier la page Produit par programmation (avec code).

Une conception soignée axée sur la meilleure expérience client vous aidera à améliorer le processus d'achat global et à augmenter vos taux de conversion. Il existe deux manières principales de personnaliser la page Produit :

Avec des plugins
Par programmation

Même si certains plugins peuvent vous aider, trouver celui qui possède toutes les fonctionnalités que vous souhaitez peut être un long processus. Donc, si vous avez des compétences de base en développement, une excellente option consiste à modifier la page du produit WooCommerce par programme . Non seulement vous pouvez éviter d'installer des outils tiers, mais vous aurez également beaucoup plus de flexibilité pour personnaliser tout ce que vous voulez.

Si vous souhaitez personnaliser la page produit avec des plugins et des constructeurs de pages, consultez ce guide.

Comment modifier la page du produit WooCommerce par programmation

Dans cette section, vous apprendrez à modifier la page de produit WooCommerce pour des produits uniques. Nous aborderons les sujets suivants.

Utiliser des crochets
1. Supprimer des éléments
2. Réorganiser les éléments
3. Ajouter de nouveaux éléments
4. Appliquer la logique conditionnelle
  1. Utilisateur connecté et rôle d'utilisateur
  2. ID de produit et taxonomies
5. Modifier les onglets de produit
6. Prise en charge des produits variables
Remplacer les fichiers de modèle WooCommerce
1. Modifier les méta-informations
2. Passer à un modèle personnalisé pour une catégorie de produits spécifique
  1. Editez le fichier single-product.php
  2. Créer un nouveau fichier content-single-product.php
  3. Créez un modèle personnalisé en éditant votre nouveau fichier content-single-product.php
Personnalisation de la page produit avec des scripts CSS

Présentation de la page du produit WooCommerce

Avant de commencer le didacticiel, examinons la page de produit par défaut dans WooCommerce pour les produits individuels et identifions chaque élément. Faites attention aux différentes sections du modèle et à la façon dont les informations sont organisées, car nous y ferons référence plus tard dans le guide. Page de produit unique WooCommerce Il existe deux principaux fichiers WooCommerce responsables de la sortie de la page produit.

single-product.php : Il construit le modèle requis pour la mise en page actuelle
content-single-product.php : Ce fichier imprime le contenu du modèle

Les deux fichiers peuvent être écrasés à l'aide d'un thème enfant. Il s'agit d'une pratique courante pour écraser les fichiers de modèle WooCommerce. Cependant, vous devriez essayer d'utiliser les hooks WooCommerce au lieu d'écraser les fichiers de modèle dans la mesure du possible, car c'est l'une des meilleures pratiques recommandées par WordPress lors de la personnalisation de votre site.

D'autre part, pour les tâches complexes qui incluent des fonctions ou des objets, vous devrez peut-être modifier les fichiers de modèle. En combinant les deux techniques, vous devriez pouvoir réaliser presque toutes les personnalisations que vous souhaitez. Ainsi, dans ce didacticiel, nous allons vous montrer comment modifier la page du produit WooCommerce en utilisant les deux méthodes.

Avant de commencer, assurez-vous de créer un thème enfant pour tester vos scripts ou utilisez un plugin pour en générer un. Voyons quelques exemples pratiques afin que vous puissiez apprendre comment chacune de ces techniques fonctionne pour tirer le meilleur parti de votre magasin.

1) Modifier la page du produit WooCommerce à l'aide de crochets

REMARQUE : Si vous n'êtes pas familier avec les crochets WooCommerce et comment les utiliser, consultez ce guide.

1.1) Supprimer des éléments de pages de produits uniques

Il existe plusieurs crochets WooCommerce que vous pouvez utiliser pour supprimer n'importe quel élément sur une seule page de produit. Chacun d'eux fonctionnera avec un groupe d'éléments spécifiques, vous devez donc utiliser le bon crochet, la bonne fonction de rappel WooCommerce et la bonne valeur de priorité.

Par exemple, si vous souhaitez supprimer le titre de toutes les pages produits, vous utiliserez le script suivant dans le fichier functions.php de votre thème enfant.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Vous trouverez tous les hooks et leurs paramètres associés ici ou dans les commentaires du fichier content-single-product.php du plugin WooCommerce. Voyons maintenant d'autres exemples de scripts pour supprimer différents éléments et personnaliser la page du produit.

 // supprimer le titre
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// supprimer les étoiles de classement
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
// supprimer la méta du produit 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// supprimer la description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// supprime les images
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// supprimer les produits associés
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
// supprimer les onglets d'informations supplémentaires
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) Réorganiser les éléments

La réorganisation des éléments de la page produit est assez simple. Tout d'abord, vous devez supprimer le crochet de la même manière que nous l'avons fait auparavant, puis vous devez l'ajouter à nouveau avec un numéro de priorité/ordre différent. Par exemple, le script suivant déplacera la description du produit juste en dessous du titre :

 // change l'ordre de la description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6);

Comme vous le voyez, nous supprimons l'action puis l'ajoutons à nouveau avec une priorité différente (6 au lieu de 20). Pourquoi avons-nous choisi une priorité/ordre de 6 ? Nous savons que l'élément de titre a une valeur de priorité de 5, cela nous permet donc de connaître la valeur de priorité que nous devons attribuer à notre crochet personnalisé pour afficher l'élément de rappel juste après le titre (6).

En utilisant les informations que nous vous avons fournies au point 1.1, vous pouvez faire de même avec tous les crochets et rappels et les placer dans l'ordre de votre choix.

1.3) Ajouter de nouveaux éléments

Si vous devez personnaliser la page du produit WooCommerce en ajoutant un nouveau contenu, vous devrez peut-être envisager de remplacer les fichiers de modèle. Cependant, vous pouvez également utiliser le hook suivant pour ajouter du nouveau contenu :

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Félicitations, vous venez d\'ajouter un lien !</a></h4>');
}
);

woocommerce_before_single_product_summary hook personnalisation de la page produit Alternativement, vous pouvez créer votre propre fonction :

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
fonction QuadLayers_callback_function(){
    printf('
    <h1> Salut !</h1>
    <div><h5>Bienvenue sur ma page produit personnalisée</h5>
    <h4><a href="?link-to-somewere">Lien vers quelque chose !</a></h4>
    <img src="https://img.freepik.com/vecteur-libre/logo-silhouette-oiseau-illustration-vectorielle_141216-100.jpg" />
    </div>');
}

1.4) Logique conditionnelle sur une seule page produit

Nous avons vu précédemment comment ajouter des champs conditionnels sur la page de paiement mais vous pouvez également les ajouter sur la page produit. Vous pouvez créer une logique conditionnelle pour répondre aux exigences souhaitées en utilisant l'une des fonctions natives de WordPress. Voyons quelques exemples.

1.4.1) Utilisateur connecté et rôle d'utilisateur

Le user_is_logged_in() est une fonction WordPress par défaut utilisée pour valider les visiteurs du site Web. De plus, nous pouvons utiliser la fonction wp_get_current_user() pour récupérer toutes les informations relatives à l'utilisateur connecté. Dans le script suivant, nous ajoutons simplement du contenu en fonction de la connexion de l'utilisateur et de son rôle, mais vous pouvez ajouter vos fonctions personnalisées pour des fonctionnalités plus complexes.

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
fonction QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $user = wp_get_current_user(); 
    printf ('<h1>Bonjour ' .$user->user_nicename.'!</h1>');
    $roles = ( array ) $user->roles;
        if($roles[0]=='administrateur'){
            echo "<h4><b>Vous êtes $roles[0]</h4></b>" ;
        }     
    } 
    autre {
    renvoie tableau();
    }     
}

1.4.2) ID de produit et taxonomies

De même, nous pouvons récupérer l'identifiant du produit et/ou les catégories de produits. La différence est que nous allons utiliser l'objet global WP $post pour obtenir l'ID et la fonction get_the_terms() pour obtenir les catégories de produits.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
fonction QuadLayers_get_product_taxonomies(){ 
    global $post ; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'nom'));
    if($terms_string=='Affiches'){
        écho "
<h1>C'est l'un de nos meilleurs $terms_string</h1>" ; echo "<h2>ID du produit : $post->ID" ; } }

Le script ci-dessus renverra une seule catégorie. Si vous avez besoin de récupérer plusieurs catégories ou tags, vous devrez créer une fonction plus complexe. Vous devrez parcourir les taxonomies avant d'appliquer vos conditions, comme indiqué ci-dessous :

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
fonction QuadLayers_get_multiple_taxonomies(){
    global $post ;
    $args = array( 'taxonomy' => 'product_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $count = count($terms);
 si ($compte > 0) {
        echo '<div class="custom-content"><h4>Liste de balises :</h4><ul>' ;
        foreach ($terms as $term) {echo '<li>'.$term->name.'</li>';}
        echo "</ul></div>" ;
    }
}

1.5) Modifier les onglets des produits

Le crochet de filtre woocommerce_product_tabs nous permet de supprimer, d'ajouter, de réorganiser ou d'ajouter un nouvel onglet dans la section Informations supplémentaires . Le script suivant supprimera l'onglet Description et son contenu, renommera l'onglet Avis et changera la priorité des informations supplémentaires en premier lieu.

 add_filter('woocommerce_product_tabs', 'woo_remove_product_tabs', 98);
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] ); // Supprimer l'onglet Description
    $tabs['avis']['titre'] = __( 'Notes' ); // Renommer l'onglet Avis
    $tabs['additional_information']['priority'] = 5 ; // Informations complémentaires dans un premier temps
    retourner $tabs ;
}

Modifier la page du produit WooCommerce par programmation - Personnaliser les onglets du produit Pour modifier le contenu d'un onglet, vous devez utiliser une fonction de rappel comme celle-ci :

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

function woo_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content' ; // Rappel de description personnalisé
	retourner $tabs ;
}
fonction woo_custom_description_tab_content() {
	écho '
<h2>Description personnalisée</h2>
'; echo 'Voici une description personnalisée'; }

De même, nous pouvons créer un nouvel onglet comme suit :

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {	
	// Ajoute le nouvel onglet	
	$tabs['test_tab'] = tableau(
		'title' => __( 'Onglet Nouveau Produit', 'woocommerce' ),
		'priorité' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	retourner $tabs ;
}
fonction woo_new_product_tab_content() {
	echo '<h2>Onglet Nouvel Produit</h2><p>Voici le contenu de votre nouvel onglet produit</p>.'; 
}

Dans cet exemple, nous venons de créer un nouvel onglet appelé "Onglet Nouveau produit". Voici à quoi cela ressemble à l'avant.

1.6) Prise en charge des produits variables

Les variantes de produits sont une fonctionnalité par défaut de WooCommerce et vous pouvez créer et utiliser des produits variables sans aucune sorte de personnalisation. Cependant, vous devez suivre les directives de WooCommerce pour rendre une solution personnalisée compatible avec les variantes de produits.

Il est important de noter que toute solution personnalisée doit être intégrée à l'ensemble du site Web et non à une seule page. Donc, en gardant cela à l'esprit, nous pouvons toujours utiliser certains des crochets disponibles liés aux produits variables. Ces hooks ne se déclenchent que lorsqu'ils se trouvent sur une page de produit variable.

woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation

2) Personnalisez la page produit en remplaçant les fichiers de modèle WooCommerce

La deuxième alternative pour modifier la page du produit WooCommerce par programmation consiste à remplacer les fichiers de modèle. Comme cette méthode est un peu plus risquée que la précédente, nous vous recommandons de créer une sauvegarde complète de votre site avant de commencer. Si vous ne savez pas comment procéder, consultez ce guide sur la sauvegarde d'un site WordPress.

Le remplacement des fichiers de modèle WooCommerce est similaire au remplacement de tout autre fichier dans votre thème enfant, donc pour éviter de perdre vos personnalisations lorsque vous mettez à jour votre thème, nous vous recommandons de créer un thème enfant ou d'utiliser l'un de ces plugins si vous n'en avez pas.

2.1) Modifier les méta-informations

Pour éditer les méta-informations, nous devons remplacer le fichier modèle chargé d'imprimer les données correspondantes. Le fichier meta.php situé dans le plugin WooCommerce suit ce chemin : woocommerce/templates/single-product/meta.php

Modifiez maintenant le répertoire des fichiers de votre thème enfant et créez un dossier WooCommerce. Ensuite, créez un autre dossier à l'intérieur appelé single-product et collez-y le fichier meta.php : Child_theme/woocommerce/single-product/meta.php

Après cela, vous devriez pouvoir éditer le fichier meta.php et voir vos modifications dans l'interface. L'exemple de fichier meta.php suivant :

Changer l'étiquette de SKU en ID
Remplacez les balises par Publié sous
Supprimer le libellé de la catégorie

 $produit global ;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID :', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ). ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Publié sous :', 'Publié sous :', count( $product->get_tag_ids () ), 'woocommerce' ). ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) Passer à un modèle personnalisé pour une catégorie de produits spécifique

Essayons maintenant une tâche plus complexe. Nous remplacerons le modèle de produit unique uniquement lorsque le produit actuel appartient à une catégorie spécifique.

2.2.1) Modifier le fichier single-product.php

Tout d'abord, copiez le fichier single-product.php et collez-le dans votre dossier de thème enfant, dans le répertoire WooCommerce :

Child_theme/woocommerce/single-product.php

Ensuite, ouvrez le fichier et vérifiez la ligne 37 : wc_get_template_part('content','single-product');

C'est ainsi que le fichier content-single-product.php entre en action, imprimant tous les éléments du produit courant pour boucler la boucle et construire la mise en page.

Nous voulons remplacer ce fichier uniquement lorsque le produit appartient à la catégorie spécifiée, nous allons donc supprimer la ligne 37 : wc_get_template_part( 'content', 'single-product' ); et remplacez-le par le script suivant :

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categories = wp_list_pluck( $terms, 'slug' );
			
				if ( in_array( 'posters', $categories ) ) {
					wc_get_template_part( 'contenu', 'affiches-produit-unique' );
				} autre {
					wc_get_template_part( 'contenu', 'produit unique' );
				}

Notez que nous utilisons les exemples de produits fournis par WooCommerce, il existe donc une catégorie appelée " Affiches " que nous utilisons pour cet exemple. Remplacez simplement les « affiches » par une catégorie de produits existante de votre site Web.

N'oubliez pas que vous pouvez trouver le slug de toutes vos catégories de produits dans le tableau de bord principal de WordPress > Produits > Catégories .

2.2.2) Créer un nouveau fichier content-single-product.php

Nous devons maintenant créer un nouveau fichier qui remplacera celui par défaut content-single-product.php . Ce fichier aura la catégorie slug dans son nom.

Jetez un œil à l'exemple ci-dessus pour voir comment le fichier content-single-product-posters.php est appelé. Ceci est important car le nom du fichier doit correspondre au code de l'étape précédente, votre fichier doit donc s'appeler content-single-product-/*YOURCATEGORYSLUG*/.php .

De cette façon, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) déclenchera le fichier content-single-product-YOURCATEGORY.php et remplacera le fichier de modèle WooCommerce par défaut.

Collez simplement le fichier content-single-product.php par défaut dans le dossier WooCommerce de votre thème enfant, renommez-le en suivant les instructions expliquées ci-dessus et faites quelques éditions pour le tester.

2.2.3) Créez un modèle personnalisé en éditant votre nouveau fichier `content-single-product.php`

Il s'agit d'un exemple de page de produit qui s'affichera uniquement lorsque le produit actuel appartient à la catégorie « affiches ». Vous verrez que nous avons ajouté du contenu, ajouté et supprimé des éléments, les avons réorganisés et exécuté des codes abrégés.

Bien qu'il s'agisse d'un exemple de base, il vous donnera une idée de ce que vous pouvez faire sur une page de modèle et vous permettra d'explorer de nouvelles possibilités.

 // supprimer les éléments de résumé du produit
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Contenu personnalisé
		printf('<h1>Voici le <b>'.$post->post_name.' </b>poster</h1>');
		printf('<h4>Une page produit entièrement personnalisée pour les produits de la catégorie "affiches"</h4>');
		// La description
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//la vignette
		do_action( 'woocommerce_before_single_product_summary' );
				
		// ajouter une méta
		do_action( 'woocommerce_single_product_summary');
		// codes courts
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Contact :</h3>".do_shortcode('[wpforms]'); echo "<h3>Plus d'affiches :</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Maintenant, si nous vérifions le frontend, nous verrons ce qui suit : Comment modifier la page produit WooCommerce par programmation - Modèle de page produit pour une taxonomie spécifique Notez que nous utilisons l'objet post global. var_dump($post); pour vous montrer toutes les informations disponibles relatives au produit actuel. Vous pouvez utiliser n'importe laquelle de ses données comme nous l'avons fait dans l'exemple de script avec la description du produit : $post->post_excerpt .

3) Personnalisez la page produit avec le script CSS

Un autre moyen pratique et simple de modifier la page du produit WooCommerce (et toute autre page) par programmation consiste à utiliser le code CSS . Cela vous aidera à styliser la page produit et à lui donner l'apparence de votre entreprise.

1. Tout d'abord, vous devez créer un nouveau fichier dans votre thème enfant avec l' extension .css afin de pouvoir y ajouter vos scripts CSS. Nous vous recommandons de le nommer single-product.css ou quelque chose de similaire afin qu'il soit facile à trouver.
2. Ensuite, placez le fichier dans le dossier principal du thème enfant au même niveau que les fichiers functions.php et style.css .
3. Après cela, collez le script suivant dans le fichier functions.php de votre thème enfant et remplacez le nom de votre fichier CSS si nécessaire.

 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      fonction load_custom_product_style() {
        si ( est_produit() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('product_css');
        }
	  }

La if(is_product()) vérifiera si la page actuelle est une page produit. Cela évite de charger inutilement le fichier CSS lorsqu'il ne s'agit pas d'une page produit.

4. Après avoir ajouté cet extrait, vous devriez pouvoir modifier le style des pages de produits en ajoutant vos règles CSS personnalisées à votre fichier CSS.

Même si cette méthode est assez simple et vous fournira une solution rapide et facile, elle peut ne pas être idéale dans certains cas. Comme le CSS peut être modifié depuis le frontend, si un utilisateur sait utiliser les outils de développement du navigateur, il peut facilement rendre visible tout élément caché en modifiant le CSS.

Modifier la page de produit unique WooCommerce avec CSS

Voyons quelques autres exemples de modifications que vous pouvez effectuer sur la page du produit en utilisant un peu de CSS.

Pour appliquer les scripts suivants, sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > CSS supplémentaire.

Modifier la taille de la police du titre

Cela changera la taille de la police des titres des produits de votre page à 32. Ajustez simplement le code pour sélectionner la taille souhaitée.

 .woocommerce div.product .product_title { 
        taille de police : 32 px ; 
}

Changer la couleur du titre

Vous pouvez également personnaliser la couleur du titre de votre page produit. Pour ce faire, utilisez simplement le code suivant et ajustez la couleur. Pour cet exemple, nous utilisons orange. Nous vous recommandons d'utiliser un sélecteur de code hexadécimal comme celui-ci pour choisir la couleur que vous voulez.

 .woocommerce div.product .product_title { 
            couleur : #FFA500 ; 
}

Changer la couleur du bouton Acheter maintenant

De même, vous pouvez changer la couleur du bouton Acheter maintenant. Dans cet exemple, nous utilisons le bleu Dodger, mais vous pouvez choisir n'importe quelle autre couleur en ajustant le code.

 .woocommerce div.produit .bouton { 
        arrière-plan : #1E90FF ; 
}

Conclusion

En résumé, la personnalisation de votre boutique en ligne est essentielle pour vous démarquer de vos concurrents. Les pages de produits sont parmi les pages les plus importantes de n'importe quel magasin et vous pouvez faire beaucoup pour améliorer l'expérience client et augmenter vos ventes.

Même si vous pouvez utiliser des plugins pour cela, nous vous recommandons de modifier la page du produit WooCommerce par programme si vous avez des compétences en codage. Il vous offre une grande flexibilité pour personnaliser n'importe quel élément de votre magasin sans avoir besoin d'installer d'outils supplémentaires. Dans ce guide, nous avons vu comment personnaliser la page produit de trois manières différentes :

Utiliser des crochets
Remplacer les modèles WooCommerce
Avec des scripts CSS

Lorsque cela est possible, vous devriez essayer d'utiliser les hooks WooCommerce au lieu d'écraser les fichiers de modèle. C'est l'une des meilleures pratiques recommandées par WordPress et c'est moins risqué. Toutefois, pour les tâches complexes qui incluent des fonctions ou des objets, vous devrez peut-être modifier les fichiers de modèle. Si vous parvenez à combiner les deux techniques, vous pourrez personnaliser tout ce que vous voulez dans votre magasin.

Enfin, jetez un œil au thème enfant complet qui comprend tous les exemples de scripts que nous avons utilisés dans ce didacticiel. Pour plus d'informations sur la personnalisation de votre boutique, consultez les guides suivants :

Apprenez à personnaliser les fichiers de modèle WooCommerce
Comment personnaliser la page de la boutique WooCommerce
Personnalisez le bouton Ajouter au panier dans WooCommerce
Comment supprimer les produits liés à WooCommerce
Comment modifier le paiement WooCommerce (codage et plugins)

Avez-vous eu des problèmes en suivant notre tutoriel? Faites-le nous savoir dans la section des commentaires ci-dessous et nous ferons de notre mieux pour vous aider.

Comment modifier la page du produit WooCommerce par programmation

Personnalisation de la page produit

Comment modifier la page du produit WooCommerce par programmation

Présentation de la page du produit WooCommerce

1) Modifier la page du produit WooCommerce à l'aide de crochets

1.1) Supprimer des éléments de pages de produits uniques

1.2) Réorganiser les éléments

1.3) Ajouter de nouveaux éléments

1.4) Logique conditionnelle sur une seule page produit

1.4.1) Utilisateur connecté et rôle d'utilisateur

1.4.2) ID de produit et taxonomies

1.5) Modifier les onglets des produits

1.6) Prise en charge des produits variables

2) Personnalisez la page produit en remplaçant les fichiers de modèle WooCommerce

2.1) Modifier les méta-informations

2.2) Passer à un modèle personnalisé pour une catégorie de produits spécifique

2.2.1) Modifier le fichier single-product.php

2.2.2) Créer un nouveau fichier content-single-product.php

2.2.3) Créez un modèle personnalisé en éditant votre nouveau fichier content-single-product.php

3) Personnalisez la page produit avec le script CSS

Modifier la page de produit unique WooCommerce avec CSS

Modifier la taille de la police du titre

Changer la couleur du titre

Changer la couleur du bouton Acheter maintenant

Conclusion

2.2.3) Créez un modèle personnalisé en éditant votre nouveau fichier `content-single-product.php`