Sous chaque produit WooCommerce se trouve un bloc de description contenant trois items : Description, Informations complémentaires et Avis. .

descriptions produits woocommerce snippet wpmarmite

Dans ce snippet, nous allons voir comment modifier ces blocs, en ajouter, les rĂ©ordonner, les supprimer, les renommer…

On commence de suite avec …

Supprimer un ou plusieurs blocs d’informations

Copiez-collez le code suivant dans le fichier functions.php de votre thĂšme enfant :

// GĂ©rer les blocs de description produits

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

function wpm_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Supprime le bloc "Description"
    unset( $tabs['reviews'] ); 			// Supprime le bloc "Avis"
    unset( $tabs['additional_information'] );  	// Supprime le bloc "Information complémentaires"

    return $tabs;

}

Ce code supprime tous les blocs de description. Si vous souhaitez en conserver un ou plusieurs, effacez les lignes des encarts que vous voulez garder.

Par exemple, ici je n’ai supprimĂ© que l’encart « Informations complĂ©mentaires » :

supprimer bloc descriptions woocommerce snippet wpmarmite

Renommer les blocs d’informations

Vous pouvez modifier les titres des blocs d’informations pour personnaliser un peu votre boutique. Pour cela, copiez-coller le code suivant dans le fichier functions.php de votre thĂšme enfant :

/* Modifier le nom des bloc d'informations WooCommerce */

add_filter( 'woocommerce_product_tabs', 'wpm_rename_tabs', 98 );
function wpm_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( 'A propos de ce produit' );		// Renomme le bloc "Description"
	$tabs['reviews']['title'] = __( 'Avis de nos clients' );				// Renomme le bloc "Avis"
	$tabs['additional_information']['title'] = __( '+ d\'infos' );	// Renomme le bloc "Informations complémentaires"

	return $tabs;

}

Modifiez les textes entre parenthĂšses par ceux que vous voulez utiliser sur votre boutique. La fonction __() permet de traduire la chaĂźne de caractĂšre si vous utilisez le multilingue sur votre site WordPress.

Voici le résultat :

renommer bloc descriptions woocommerce snippet wpmarmite

Modifier l’ordre d’affichage des blocs de description

Si vous souhaitez rĂ©organiser l’ordre d’affichage des blocs, copiez-collez le code suivant dans le fichier functions.php de votre thĂšme enfant :

/* RĂ©ordonner les blocs de descriptions WooCommerce */

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

function wpm_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority'] = 5;			// On affiche les avis en 1er
	$tabs['description']['priority'] = 10;			// ensuite le bloc "Description" en deuxieme
	$tabs['additional_information']['priority'] = 15;	// Et enfin les informations complémentaires

	return $tabs;
}

Et le résultat de ce snippet :

reorganiser blocs descriptions woocommerce snippet wpmarmite

Modifier le contenu d’un bloc

Vous pouvez tout Ă  fait modifier le contenu d’un bloc par ce que vous voulez. Pour cela, copiez-collez le snippet suivant dans le fichier functions.php de votre thĂšme enfant :

/* Modifier le contenu d'un bloc d'informations WooCommerce */

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

function wpm_custom_description_tab( $tabs ) {

	$tabs['description']['callback'] = 'wpm_custom_description_tab_content';	// On remplace le contenu du bloc description avec notre fonction personnelle

	return $tabs;
}

function wpm_custom_description_tab_content() {
	echo '<h2>Ce bloc a changé de contenu</h2>';
	echo '<p>J\'écris ici du contenu personnalisé pour décrire mon produit</p>';
}

Il vous suffit maintenant de personnaliser la fonction wpm_custom_description_tab_content() pour y insérer le contenu de votre choix dans le bloc de description WooCommerce.

Voici le résultat du snippet :

modifier contenu bloc description woocommerce snippet wpmarmite

Ajouter un bloc supplémentaire personnalisé

Pour les besoins de votre site et de vos produits, il se peut que ces trois blocs de description ne suffisent pas.

Pas de problĂšme, nous pouvons en ajouter d’autres !

Comme d’habitude, copiez-collez le code suivant dans le fichier functions.php de votre thĂšme enfant :

/* Ajouter un bloc d'informations WooCommerce */

add_filter( 'woocommerce_product_tabs', 'wpm_new_product_tab' );

function wpm_new_product_tab( $tabs ) {
	
	// On ajoute un nouveau bloc
	
	$tabs['nouveau_bloc'] = array(
		'title' 	=> __( 'Mon nouveau bloc', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'wpm_new_product_tab_content'
	);

	return $tabs;

}
function wpm_new_product_tab_content() {

	// Insérez ici le contenu de votre nouveau bloc

	echo '<h2>Le titre de mon nouveau bloc</h2>';
	echo '<p>Le contenu de mon nouveau bloc.</p>';
	
}

Vous pouvez modifier l’attribut ‘priority’ si vous ne souhaitez pas que votre nouveau bloc apparaisse en dernier, comme dans le snippet plus haut « Modifier l’ordre d’affichage des blocs de description ».

Modifiez le contenu de la fonction wpm_new_product_tab_content() pour personnaliser ce nouveau bloc.

Et le résultat en image :

ajouter bloc description woocommerce snippet wpmarmite

Conclusion

À l’aide de quelques lignes de code, il est possible de modifier Ă  sa guise les blocs de description des pages produits de WooCommerce.

RĂ©sultat des courses, on obtient des pages produits comportant uniquement les informations dont les visiteurs ont besoin. En effet, mettre trop de contenu sur une page peut plus perdre les gens qu’autre chose…

Avez-vous utilisĂ© un de ces snippets sur votre site ? Dites-nous en plus en commentaire 🙂

Source: Woocommerce.com