Gérer les métadonnées et les onglets de produits WooCommerce

7 onglets WooCommerce de la page d’édition des produits permettent de sauvegarder leurs métadonnées principales, et 3 autres, sur la page de présentation, affichent leur description, leurs attributs et les avis clients. Si on peut avoir besoin de gérer ces onglets afin d’ajouter à chaque produit des informations complémentaires, ce mode d’affichage n’est pour autant pas idéal pour le référencement naturel.

Ce tutoriel montre comment tirer partie du système d’onglets de WooCommerce pour donner aux produits de nouvelles zones d’éditions intégrées, mais aussi pourquoi et comment revenir à un affichage linéaire de ces informations pour améliorer l’optimisation pour le référencement naturel des pages de produits.

Un grand nombre d’informations de ce tutoriel provient directement de la documentation officielle de WooCommerce sur l’édition des onglets de produits (que je vous conseil vivement de lire). 😉

N.B. : Selon Gary Illyes (Google), l’arrivée de son nouvel index « Mobile-First » devrait permettre d’utiliser les onglets pour améliorer l’ergonomie des pages web sur les petites surfaces. Il s’agirait donc ici d’une modification des critères de pertinence du moteur de recherche qui, du coup, autoriserait le procédé sur toute les versions du site (si tant est que le contenu existe en dur au chargement de la page). Gary Illyes ayant confirmé lors d’un hangout publié sur le site Search Engine Roundtable que ce nouvel index était actuellement en phase de test, nous devrons donc attendre le basculement officiel vers celui-ci et le recul suffisant pour analyser l’impact de ce changement sur les pages possédant ce type de données « encapsulées » y compris en version desktop… En attendant, cet article reste d’actualité et demeure une bonne introduction à la gestion des métadonnées de produits WooCommerce 😉

Gérer les onglets produits avec les hooks Woocommerce

Le système de boutique en ligne met à notre disposition 4 hooks nous permettant respectivement de créer un onglet et son lien dans le tableau d’administration WooCommerce, de créer le contenu de cet onglet (les champs utilisateurs), de sauvegarder ce contenu sous forme de métadonnées, et de construire l’affichage de ces données en front office sous forme d’onglets cliquables.

Créer un nouvel onglet WooCommerce en page d’édition

Il nous est possible d’accéder au tableau par défaut des onglets de produits, avant leur affichage, avec le hook « woocommerce_product_data_tabs », pour en modifier le contenu.
Le callback de ce hook prend en argument un tableau $tabs des onglets contenant, pour chaque onglet, un sous-tableau dont :

• la clé dans $tabs correspond au préfixe de la classe CSS de l’item de liste <li> de l’onglet ;
• l’entrée « target » correspond à l’ID HTML de l’élément <div> à afficher au clic sur cet onglet ;
• l’entrée « label » sert à définir le texte de l’onglet ;
• et « class » permet d’ajouter des classes CSS des présentations à l’item de liste.

/**
 * Nouveaux onglets WooCommerce
 */
function jst_add_tabs( $tabs )
{
	$tabs[ 'the_jst_details' ] = array(
		'target'	=> 'jst_details',
		'label'		=> __( 'Details', 'jst' ),
		'class'		=> array( 'show_if_simple', 'hide_if_variable' )
	);
	return $tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'jst_add_tabs' ); 

On pourrait, bien sûr, créer ici tous nos onglets WooCommerce additionnels en même temps.

Ajouter du contenu à l’onglet Woocommerce.

WooCommerce utilise des conteneurs de classe « panel » pour afficher indépendamment chaque onglet. Les champs input sont ensuite répartis dans des sous conteneurs de classe « options_group » incluant un libélé <label> et un champ <input>, <select> ou autre.
WooCommerce propose donc un hook « woocommerce_product_data_panels » pour créer les panels ciblés par les liens précédemment créés (nos entrées « target »).
Dans le callback, nous allons créer un panel par onglet en lui donnant un id correspondant à l’entrée « target » créée plus tôt :

/**
 * Contenu des nouveaux onglets WooCommerce
 */
function jst_add_panels()
{
?>
	<div id="jst_details" class="panel woocommerce_options_panel">
		<div class="options_group show_if_simple">
			/* création des champs input des nouvelles métadonnées */
		</div>
	</div>
<?php
}
add_action( 'woocommerce_product_data_panels', 'jst_add_panels' ); 

Pour nous simplifier la vie WooCommerce nous permet d’utiliser des fonctions helpers pour afficher facilement nos champs de type text, number, email, select et textarea.

Nous allons nous servir de woocommerce_wp_text_input() pour afficher un champ input (de type texte par défaut) afin enregistrer nos informations :

<?php 
woocommerce_wp_text_input( array(
	'id'		=> '_jst_text_field',
	'name'		=> 'jst_text_field',
	'label'		=> __( 'Le nom de la donnée', 'jst'),
	'description'	=> __( 'Une aide à afficher pour le champ', 'jst' ),
	'placeholder'	=> __( 'Entre votre texte ici', 'jst' )
) );
?>

2 ou 3 choses sont importantes :

• l’id correspond aux attributs « id » et « name » du champ (si « name » est omis) ;
• l’id du champ doit commercer par un underscore ;
• « description » est affichée dans la bulle d’aide du champ.

Voici le résultat après création de notre onglet de produit WooCommerce :

Notez que l’on peut aussi afficher, avec cette méthode, tout type de champ <input> en ajoutant uniquement une entrée correspondant à son attribut «  type » au tableau d’arguments (par exemple, pour afficher un champ de type « number ») :

woocommerce_wp_text_input( array(
	‘type’	=> ‘number’
) ) ;

Vous pouvez retrouver les autres méthodes permettant d’afficher des champs utilisateurs ici :

• woocommerce_wp_textarea_input()
• woocommerce_wp_checkbox()
• woocommerce_wp_radio()
• woocommerce_wp_select()
• woocommerce_wp_hidden_input()

Sauvegarde des méta données des onglets de produits WooCommerce

Il nous faut maintenant sauvegarder ces informations pour nous permettre de les retrouver :

• sur la page d’édition au sein de notre onglet ;
• sur la page de présentation du produit.

Nous utilisons pour cela le hook « woocommerce_process_product_meta » dont le callback s’utilise de façon assez similaire à celui de l’action « save_post » :

/**
 * Sauvegardes des méta données de produits WooCommerce
 */
function jst_process_meta( $post_id ){
	if( isset( $_POST[ '_jst_text_field' ] ) && ! empty( $_POST[ '_jst_text_field' ] ))
	{
		$jsttextfield = sanitize_text_field( $_POST[ '_jst_text_field' ] );
		update_post_meta( $post_id, '_jst_text_field', $jsttextfield );
	}
}
add_action( "woocommerce_process_product_meta", 'jst_process_meta' );

Comme vous pouvez le voir, le stockage de ces méta données se fait en passant à la fonction update_post_meta() la valeur « name » (ou « id ») du champ permettant en quelque sorte de la « synchroniser » avec la fonction « woocommerce_wp_text_input » et ainsi récupérer automatiquement nos valeur sauvegardées.

Nos données sont sauvegardées, il nous faut maintenant créer un onglet de présentation supplémentaire pour les afficher sur la page produit.

Créer un nouvel onglet pour afficher les méta données du produit

Le hook « woocommerce_product_tabs » permet de filtrer les onglets de présentation de données, donc d’y rajouter une nouvelle entrée correspondant à notre onglet d’administration.

La fonction de rappel de ce hook ressemble à « woocommerce_product_data_tabs » et prend en argument un tableau des onglets natifs (par défaut). Chaque entrée de ce tableau qui correspond à un onglet, a comme valeur un sous-tableau incluant :

• une clé « title » pour l’ancre du lien de l’onglet ;
• une clé « priority » permettant de positionner l’onglet WooCommerce par rapport aux autres ;
• une clé « callback » permettant de gérer l’affichage du contenu de l’onglet.

/**
 * Display new Tabs Content
 */
function jst_display_tabs( $tabs )
{
	$tabs[ 'jst_details' ] = array(
		'title'		=> __( 'JST Details !!!', 'jst' ),
		'priority'	=> 10,
		'callback'	=> 'jst_display_details_text'
	);
	return $tabs;
}
function jst_display_details_text()
{	
	global $product;
	echo '<h2>JST Details Text !</h2>';
	echo '<p>' . get_post_meta( $product->get_id(), '_jst_text_field', true ) .'</p>';
}
add_filter( 'woocommerce_product_tabs', 'jst_display_tabs' );	

Puisque nous avons sauvegardé nos données avec « update_post_meta() » nous récupérons tout naturellement celles-ci avec get_post_meta().
Cette fonction de rappel est important puisqu’elle va nous permettre, au delà de l’onglet de proposer un contenu structuré aux visiteurs et aux moteurs de recherche.
Tous les callbacks des onglets WooCommerce seront en effet appelés dans le template tabs.php au sein d’une boucle « foreach » pour en afficher le contenu :

<?php foreach ( $tabs as $key => $tab ) : ?>
	<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
		<?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
	</div>
<?php endforeach; ?> 

Voici le résultat de notre nouvel onglet de produit WooCommerce affiché en front office.

Modifier les onglets de produits WooCommerce

Nous savons désormais ajouter de nouvelles données à un produit WooComerce, voyons maintenant comment utiliser ce même hook (« woocommerce_product_tabs ») pour modifier l’affichage des onglets par défaut.

function jst_display_tabs( $tabs )
{
	// …
	$tabs[ 'description' ][ ‘title’ ] = __( ‘Nouveau titre pour la description’, ‘jst’ ) ;
	$tabs[ ‘description’ ][ ‘priority’ ] = 100 ;
}
add_filter( 'woocommerce_product_tabs', 'jst_display_tabs' );

De la même manière, pour supprimer l’onglet des avis clients, nous pourrions simplement supprimer son entrée dans le tableau $tabs :

function jst_display_tabs( $tabs )
{
	unset( $tabs[ ‘reviews’ ] ) ;
}
add_filter( 'woocommerce_product_tabs', 'jst_display_tabs' );

Et voilà, nous venons de modifier le titre d’un onglet de la page produit WooCommerce ainsi que son ordre d’apparition, et nous en avons supprimé un autre…
Bon, tout cela est très bien, mais nous allons maintenant devoir nous débarrasser de ces onglets !!

Pourquoi vous devriez supprimer les onglets de vos pages produits

La plupart des sites d’e-commerce permettent d’afficher sur leurs pages de produits, des sections de données sous forme d’onglets cliquables, exactement comme sur une page de produit WooCommerce, mais alors que cette présentation visuelle sous forme d’onglets cliquables est souvent réussie, elle est aussi un frein au référencement de la page. En voici l’explication :

Le 17 novembre 2014, Barry Schwartz demandais à John Muller en direct sur le Google Webmaster Central office-hours hangout des détails sur le traitement des données « potentiellement visibles » situé dans les onglets et autres listes déroulantes et accessibles au clic de l’utilisateur.

La réponse donnée fût très claire, les pages proposant un contenu caché sont déclassée puisque Google ne peut garantir aux internautes ce qui leur sera proposé en première intention.

Cette information était d’ailleurs reprise par Olivier Andrieux sur le site d’abondance dès le 1er décembre suivant.

La description du produit ou les caractéristiques techniques sont évidemment des zones idéales pour insérer les mots clés qui le mettrons en évidence pour les requêtes plus précises de type longue traine. Hors, si ces informations sont situées dans des onglets, donc cachées en première intention, Google déclassera la page mettant partiellement à mal votre travail d’optimisation ! 😉

Transformer les onglets des pages de produits WooCommerce en sections individuelles

Nous allons faire au plus simple et utiliser le template woocommerce/templates/single-product/tabs/tabs.php en copiant son contenu dans un fichier woocommerce/single-product/tabs/tabs.php (le répertoire « woocommerce » étant situé à la racine de notre thème WordPress… S’il n’existe pas créez-le).
Par défaut, le template créé une liste <ul class=« tabs wc-tabs »> des onglets WooCommerce, puis, au sein d’une boucle foreach, un item de liste <li> pour chaque éléments du tableau $tabs :

<?php foreach( $tabs as $key=>$tab ) ?>.

Enfin lors d’une seconde itération, il crée un conteneur <div> de class « woocommerce-Tabs-panel » et appel la fonction de rappel enregistrée pour l’affichage de l’onglet avec :

<?php call_user_func( $tab[ « callback » ], $key, $tab ) ; ?>

Nous allons simplement supprimer la première itération et conserver la création d’un bloc <div> ou <section> (à vous de choisir) pour chaque onglet de produit enregistré :

<div class="woocommerce-tabs wc-tabs-wrapper">
	<!--<ul class="tabs wc-tabs" role="tablist">
			<?php foreach ( $tabs as $key => $tab ) : ?>
				<li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
					<a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
				</li>
			<?php endforeach; ?>
		</ul>-->
	<?php foreach ( $tabs as $key => $tab ) : ?>
		<div class="masection--<?php echo esc_attr( $key ); ?> entry-content" id="masection--<?php echo esc_attr( $key ); ?>" >
			<?php call_user_func( $tab['callback'], $key, $tab ); ?>
		</div>
	<?php endforeach; ?>
</div>

J’ai volontairement commenté le code à supprimer pour que vous puissiez visualiser les modifications à apporter à ce fichier.

N.B. : Il est préférable de supprimer les classes présentes dans le fichier original, « wc-tab » et « panel » du bloc d’onglet, dont certains thèmes, comme storefront, se servent pour les masquer de façon dynamique.

Vos méta données bénéficient maintenant d’un affichage linéaire sur les pages produits WooCommerce, et seront donc mieux prises en compte par les moteurs de recherche.

Voilà, ce tutoriel est terminé, j’espère qu’il vous aura été utile 😉

À bientôt !