Comment afficher des données d’un champ répéteur ACF dans Elementor ?

Récupérer dynamiquement des valeurs issues d’un champ ACF de type répéteur dans un bloc Elementor est une question récurrente qui ne trouve guère de réponse évidente. Nativement, c’est toujours impossible, et l’extension gratuite ACF Repeater for Elementor, que je vous recommandais ici, a été fermée pour une faille de sécurité. Voici comment afficher votre répéteur sans elle, avec quelques lignes de PHP et le widget Code court d’Elementor.

Dans ce tutoriel, je vous explique pourquoi retirer cette extension si vous l’utilisez encore, puis comment la remplacer par un code court (shortcode) maison, qui fonctionne avec la version gratuite d’Elementor et échappe les données qu’il affiche.

Notions de base

Avant d’aller plus loin dans la lecture de ce tutoriel, passons en revue les quelques notions de base à connaître. Vous pouvez passer ce chapitre si vous êtes à l’aise avec ces aspects techniques.

Un champ ACF de type répéteur, c’est quoi ?

Un champ ACF de type répéteur est, comme son nom l’indique, capable de répéter un ensemble de champs. Il fonctionne comme un conteneur dans lequel vous allez ajouter des champs comme vous le feriez d’ordinaire depuis votre interface de gestion des groupes de champs.

Tous les champs sont disponibles à l’intérieur d’un champ répéteur. Évitez toutefois d’imbriquer un répéteur à l’intérieur d’un répéteur, cela rendrait l’interface utilisateur inutilisable.

Quelles sont les extensions nécessaires ?

Vous aurez besoin d’Advanced Custom Fields PRO : le champ répéteur fait toujours partie des fonctions réservées à la version PRO d’ACF. Côté Elementor, la version gratuite suffit pour la méthode qui suit, car elle comprend le widget Code court. Elementor Pro n’est pas nécessaire : d’après la documentation d’Elementor sur ACF, ses balises dynamiques ne prennent toujours pas en charge les champs répéteurs.

Et l’extension ACF Repeater for Elementor ?

Cette extension gratuite, rebaptisée Sympl Repeater for ACF and Elementor, a été fermée sur le répertoire officiel de WordPress le 2 juillet 2026 pour un problème de sécurité : elle n’est plus téléchargeable ni mise à jour. La faille CVE-2026-10570 touche toutes ses versions jusqu’à la 2.3, la dernière publiée : l’extension insère les valeurs du répéteur dans la page sans les échapper, si bien qu’un compte disposant au moins du rôle Auteur/autrice peut y glisser un script, exécuté ensuite dans le navigateur de chaque visiteur de la page.

Si elle est installée sur votre site, désactivez-la puis supprimez-la depuis Extensions > Extensions installées, et remplacez-la par la méthode qui suit. Vos groupes de champs ACF restent inchangés.

Mode d’emploi pour afficher un champ répéteur ACF avec Elementor

Étape n°1 – Créer un champ ACF de type répéteur

Commencez par éditer ou créer un nouveau groupe de champs dans Advanced Custom Fields et ajoutez un champ de type répéteur.

À l’intérieur du champ répéteur, ajoutez les sous-champs de votre choix.

Pour afficher vos lignes sous forme d’accordéon, créez 2 sous-champs : le premier pour le titre, de type Texte, avec pour identifiant (le Nom du champ dans ACF) tab_title ; le second pour le contenu, de type Zone de texte ou Éditeur WYSIWYG, avec pour identifiant tab_content. Ce sont les noms qu’attend par défaut le code de l’étape suivante : si vous utilisiez déjà ces identifiants avec ACF Repeater for Elementor, vos champs sont prêts. C’est particulièrement utile pour créer une Foire Aux Questions dans une page d’atterrissage par exemple.

Étape n°2 – Ajouter le code court d’affichage

Ajoutez ce code dans le fichier functions.php de votre thème enfant ou dans une extension de fonctions globales. Il crée le code court [wpc_acf_repeater], qui parcourt les lignes du répéteur de la page affichée et les transforme en accordéon.

/**
 * Displays the rows of an ACF repeater field as an accordion.
 * Usage: [wpc_acf_repeater field="faq"], with optional title="tab_title" and content="tab_content" attributes.
 */
function wpc_acf_repeater_shortcode( $atts ): string {
	$atts = shortcode_atts(
		array(
			'field'   => '',
			'title'   => 'tab_title',
			'content' => 'tab_content',
		),
		$atts,
		'wpc_acf_repeater'
	);

	// ACF PRO must be active and the repeater must contain at least one row.
	if ( '' === $atts['field'] || ! function_exists( 'have_rows' ) || ! have_rows( $atts['field'] ) ) {
		return '';
	}

	$items = '';

	while ( have_rows( $atts['field'] ) ) {
		the_row();

		// Escape every value: the title as plain text, the content as post HTML.
		$items .= sprintf(
			'<details class="wpc-acf-repeater__item"><summary>%1$s</summary><div class="wpc-acf-repeater__content">%2$s</div></details>',
			esc_html( (string) get_sub_field( $atts['title'] ) ),
			wp_kses_post( (string) get_sub_field( $atts['content'] ) )
		);
	}

	return '<div class="wpc-acf-repeater">' . $items . '</div>';
}
add_shortcode( 'wpc_acf_repeater', 'wpc_acf_repeater_shortcode' );

Chaque ligne devient un élément HTML <details> : le titre reste visible et le contenu se déplie au clic, sans JavaScript. Le titre est échappé comme du texte brut et le contenu filtré comme celui d’un article : un script glissé dans un champ n’est pas exécuté. Si ACF PRO est désactivé, le code court n’affiche rien.

Étape n°3 – Insérer le widget Code court dans Elementor

Ouvrez l’éditeur Elementor de la page concernée, puis faites glisser le widget Code court à l’endroit voulu. Dans son onglet Contenu, saisissez le code court suivant, en remplaçant identifiant_repeteur par le nom de votre champ répéteur :

[wpc_acf_repeater field="identifiant_repeteur"]

Si vos sous-champs portent d’autres noms, précisez-les avec les attributs title et content, par exemple [wpc_acf_repeater field="equipe" title="nom" content="bio"]. L’apparence de l’accordéon dépend de votre thème : pour l’adapter, ciblez la classe wpc-acf-repeater dans votre CSS personnalisé.

Renseignez ensuite les lignes du répéteur dans l’écran de modification WordPress de la page, où ACF affiche vos champs.

Pour terminer, cliquez sur le bouton Publier puis affichez la page dans un nouvel onglet du navigateur et admirez le résultat !

Vous disposez à présent d’un site capable d’afficher de manière dynamique des données issues d’un champ ACF de type répéteur via le constructeur Elementor. Contrairement à l’ancienne méthode, celle-ci ne demande aucune extension en plus d’ACF PRO et d’Elementor, et vous gardez la main sur le HTML produit.

Vous utilisez aussi le champ carte d’ACF ? Voici comment configurer la clé API Google Maps pour ACF.