Comment afficher l'offre choisie, en fonction du bouton sélectionné ?

Dans cet article, nous allons voir comment créer un élément permettant à vos utilisateurs de choisir entre deux offres et, surtout, leur afficher un bouton redirigeant vers la bonne offre choisie.

Pour cela, nous utiliserons la fonctionnalité des champs cachés et les options d’affichage avancées.

Créer vos offres sélectionnables:

Pour créer vos offres, vous pouvez utiliser les boutons radios autonomes qui permettront de créer des offres indépendantes l’une de l’autre (dans notre exemple, nous avons créé deux offres : une mensuelle et une annuelle, disposées en 2 colonnes):

Créer un champ caché pour définir vos offres d’abonnement:

Le champ caché va permettre de définir une variable qui changera en fonction de l’offre d’abonnement sélectionnée.

Dans notre exemple, nous nommons cette variable “abonnement” avec une valeur par défaut à “abonnement-mensuel” (nous y reviendrons un peu plus tard)

Définir les valeurs pour chacune de vos offres:

Sur chacune de vos offres (donc chacun de vos boutons radios), attribuer une valeur précise pour la variable précédemment créée via le champ caché.

Ici, nous aurons 2 valeurs: abonnement-mensuel et abonnement-annuel

Créer les boutons relatifs à chacune des offres

Maintenant que nos 2 offres sont créées et identifiées, nous allons créer un bouton avec une URL spécifique pour chacune de ces offres:

Gérer l’affichage du bouton correspondant à l’offre sélectionnée

Pour gérer l’affichage des boutons, nous utilisons les options d’affichage avancées au niveau de chaque bouton.

Nous affichons le bouton “Je m’abonne au mois” lorsque la variable “abonnement” est égale à “abonnement-mensuel”, donc quand l’offre mensuelle est sélectionnée.

Pour cela, dans les options avancées sur le bouton:

• sélectionner “Type de condition”: Afficher
• cible: “Basé sur une variable”
• Nom de la cible : field:abonnement (ne pas oublier field: en début de champ pour bien cibler la variable créée précédemment)
• Valeur de la cible : est égale à “abonnement-mensuel”

Nous appliquons la même logique sur le bouton correspondant à l’offre annuelle:

Retour rapide au champ caché créé précédemment

Nous l’avions évoqué en début d’article, nous avons appliqué une valeur par défaut “abonnement-mensuel” au champ caché.

Cela signifie que par défaut, c’est l’abonnement mensuel qui est sélectionné, et c’est donc ce bouton qui s’affiche par défaut.

Vous pouvez choisir d’avoir une offre sélectionnée par défaut ou non.

Si aucune offre n’est sélectionnée par défaut, aucun bouton n’apparaîtra.

On regarde le résultat ?

Vous savez désormais comment gérer l’affichage d’un bouton spécifique en fonction d’une offre sélectionnée.

L’exemple porte sur deux offres, mais vous pouvez créer autant d’offres que vous souhaitez et même appliquer cette logique sur autre chose que des offres.

N’hésitez pas à nous contacter pour toute question

Mis à jour le : 21/04/2026