Champs personnalisé ACF et catégorie produit Woocommerce

Introduction

Dans ce tutoriel, nous allons créer deux champs personnalisés pour nos catégories WooCommerce :

• Une image de bandeau
• Une texte

Nous allons commencer par les créer dans le Back Office pour ensuite les afficher coté front.

Si vous voulez voir comment récupérer un champ ACF d’une catégorie standard, vous pouvez le voir avec ce tutoriel :)

Création des champs dans le Back Office

Tout d’abord, créez un nouveau groupe de champs et assignez le à : Termes de taxonomies > product_cat

Voilà les options à régler pour notre groupe de champs.

Ensuite, nous allons ajouter un premier champ image, qui sera notre bandeau :

Notre premier champ est une image.

Après, créez le second qui sera une zone de texte :

Notre second champ est une zone de texte.

N’oubliez pas d’enregistrer votre groupe de champs ;)
Maintenant qu’il est créé, vous pouvez voir les nouveaux champs apparaître dans la section Produits > Catégories :

Voilà nos nouveaux champs dans la catégorie.

Ceci fait, nous allons pouvoir les afficher coté front.

Affichage des champs coté front

Nous allons modifier le fichier archive-product.php qui se trouve dans votre thème.
En haut, juste après l’appel du header, nous allons entrer ce code pour avoir un bandeau avec notre image en fond :

<?php 
 
// vars
$queried_object = get_queried_object(); 
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;  
 
// load desc for this taxonomy term (term object)
$thumbnail = get_field('image_du_bandeau', $queried_object);
 
// load desc for this taxonomy term (term string)
$thumbnail = get_field('image_du_bandeau', $taxonomy . '_' . $term_id);

?>  
<div class="bandeau-image" style="background-image: url(<?php the_field( 'image_du_bandeau', $queried_object ); ?>);">
</div>

Nous allons maintenant ajouter le texte dans le bandeau :

<?php 
 
	// variables
	$queried_object = get_queried_object(); 
	$taxonomy = $queried_object->taxonomy;
	$term_id = $queried_object->term_id;  

	// load desc for this taxonomy term (term object)
	$thumbnail = get_field('image_du_bandeau', $queried_object);

	// load desc for this taxonomy term (term string)
	$thumbnail = get_field('image_du_bandeau', $taxonomy . '_' . $term_id);

?>  
<div class="bandeau-image" style="background-image: url(<?php the_field( 'image_du_bandeau', $queried_object ); ?>);">
	<?php the_field( 'texte_du_bandeau', $queried_object ); ?>
</div>

Et voilà, vous avez maintenant un bandeau personnalisable sur vos catégories woocommerce :)

See ya’ space integrator