Champs personnalisé ACF et catégorie produit Woocommerce

Souvent pour personnaliser les catégories WooCommerce, il est pratique de passer par le plugin ACF. Voilà comment récupérer un champs personnalisé depuis une catégorie.

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

créer une groupe de champs pour les 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 :

Création du premier champ image.

Notre premier champ est une image.

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

Création du premier champ 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.

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

Auteur : PUShAUNE

Graphiste freelance, J’ai créé un collectif à Marseille appelé Bison Bleu.
Je tiens un blog pour partager mes techniques et mes expériences.
Je donne aussi des cours aux élèves de l’école Axe Sud.

À ton tour de participer :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *