Champs personnalisé ACF et catégorie produit Woocommerce

Posté par PUShAUNE le 10 juillet 2017

1 commentaire :/

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

Summary
Article Name
Champs personnalisé ACF et catégorie produit Woocommerce
Description
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.
Nicolas AUNE
Nicolas AUNE
PUShAUNE

Tu kiffes ? Alors partage avec tes potes !

1 commentaire

  1. Ping : Comment récupérer un champ ACF d'une catégorie | PUShAUNE

Sois pas timide, lâche tes com’ !

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.