fbpx
Plugin d'adhésion WordPress
  1. Accueil
  2. Base de connaissances
  3. Afficher les options de tarification à l'aide de tableaux sur votre page de vente

Afficher les options de tarification à l'aide de tableaux sur votre page de vente

Vos membres veulent avoir le choix, mais pas trop. Cet article donne un exemple de la manière dont vous pouvez offrir à vos membres trois options différentes sur une page de vente en utilisant une combinaison de CSS et de HTML. Cet exemple suppose que vous avez des connaissances de base en HTML et en CSS.

N'oubliez pas que cet exemple est fourni à titre de point de départ. Vous pouvez le copier et le coller sur vos pages, puis modifier les liens href pour qu'ils correspondent à vos balises intelligentes de lien d'achat, ainsi que les attributs de style dans les différentes sections pour ajuster l'apparence. À la fin de cet article, vous trouverez le CSS et le HTML dans des fichiers séparés si vous et/ou votre développeur souhaitez modifier ces différentes zones de manière plus approfondie.

Pour créer des tableaux de prix sur votre page, il suffit de copier et de coller le code suivant dans un bloc HTML, ou dans la vue "Texte" de l'éditeur si vous utilisez l'ancien éditeur de WordPress :

<style>
@media uniquement l'écran et (largeur maximale: 600px) {
  .colonnes {
    largeur: 100%;
  }
}
</style>
<div classe="colonnes" style="dimensionnement de la boîte: border-box; flotteur: gauche; largeur: 33.3%; rembourrage: 8px;">
	<ul classe="prix" style="dimensionnement de la boîte: border-box; type de liste: aucun; frontière: 1px solid #eee; marge: 0; rembourrage: 0; -webkit-transition: 0.3s; transition: 0.3s;">
		<li classe="en-tête" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #358E39; couleur: blanc; taille de police: 25px; ombre de texte: 0 1px 1px rgba(0,0,0,0.4);">Produit 1</li>
		<li classe="gris" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #eee; taille de police: 20px;">$ 9,99 / an</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">10 Vidéos</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Des avantages impressionnants</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Emails mensuels</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Accès limité</li>
		<li classe="gris" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #eee; taille de police: 20px;">
			<a href="https://membermouse.com/fr/caisse/?rid=pK2qyz" classe="bouton" style="dimensionnement de la boîte: border-box; couleur de fond: #4CAF50; frontière: aucun; couleur: blanc; rembourrage: 10px 25px; alignement du texte: centre; décoration du texte: aucun; taille de police: 18px;">S'inscrire</a>
		</li>
	</ul>
</div>
<div classe="colonnes" style="dimensionnement de la boîte: border-box; flotteur: gauche; largeur: 33.3%; rembourrage: 8px;">
	<ul classe="prix2" style="dimensionnement de la boîte: border-box; type de liste: aucun; frontière: 1px solid #eee; marge: 0; rembourrage: 0; -webkit-transition: 0.3s; transition: 0.3s; ombre de la boîte: 0 8px 12px 0 rgba(0,0,0,0.2);">
		<li classe="en-tête" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur: blanc; taille de police: 25px; ombre de texte: 0 1px 1px rgba(0,0,0,0.4); couleur de fond: #4CAF50;">Produit 2</li>
		<li classe="gris" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #eee; taille de police: 20px;">$ 24,99 / an</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">25 Vidéos</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Encore plus d'avantages</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Emails bi-hebdomadaires</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Accès étendu</li>
		<li classe="gris" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #eee; taille de police: 20px;">
			<a href="https://membermouse.com/fr/caisse/?rid=p57LaD" classe="bouton" style="dimensionnement de la boîte: border-box; couleur de fond: #4CAF50; frontière: aucun; couleur: blanc; rembourrage: 10px 25px; alignement du texte: centre; décoration du texte: aucun; taille de police: 18px;">S'inscrire</a>
		</li>
	</ul>
</div>
<div classe="colonnes" style="dimensionnement de la boîte: border-box; flotteur: gauche; largeur: 33.3%; rembourrage: 8px;">
	<ul classe="prix" style="dimensionnement de la boîte: border-box; type de liste: aucun; frontière: 1px solid #eee; marge: 0; rembourrage: 0; -webkit-transition: 0.3s; transition: 0.3s;">
		<li classe="en-tête" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #358E39; couleur: blanc; taille de police: 25px; ombre de texte: 0 1px 1px rgba(0,0,0,0.4);">Produit 3</li>
		<li classe="gris" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #eee; taille de police: 20px;">$ 49,99 / an</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">50 Vidéos</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Le plus d'avantages</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Emails hebdomadaires</li>
		<li style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre;">Le plus grand nombre d'accès</li>
		<li classe="gris" style="dimensionnement de la boîte: border-box; border-bottom: 1px solid #eee; rembourrage: 20px; alignement du texte: centre; couleur de fond: #eee; taille de police: 20px;">
			<a href="https://membermouse.com/fr/caisse/?rid=pGpM60" classe="bouton" style="dimensionnement de la boîte: border-box; couleur de fond: #4CAF50; frontière: aucun; couleur: blanc; rembourrage: 10px 25px; alignement du texte: centre; décoration du texte: aucun; taille de police: 18px;">S'inscrire</a>
		</li>
	</ul>
</div>
HTML

Voici à quoi ressemble le code ci-dessus lorsqu'il est utilisé :


Vous pouvez utiliser les documents joints pour voir le HTML et le CSS dans des fichiers séparés. Cela vous permet d'effectuer rapidement les modifications nécessaires.

Pièces jointes aux articles

Cet article a-t-il été utile ?
Oui Non

Vous ne trouvez pas la réponse que vous cherchez ?

Contactez notre équipe chargée de la réussite des clients
Contactez nous !
Plugin d'adhésion WP
fr_FR FR
fr_FR FR en_US EN es_ES ES de_DE DE pt_BR PT
Caractéristiques
Entreprise
Ressources
Connecter
Du blog
10 sites d'adhésion de niche qui vous inspireront
Le guide complet pour nommer vos niveaux d'adhésion
Vous voulez créer une entreprise de services aux membres ?
16 des meilleurs thèmes WordPress pour les membres en 2023

2025 MemberMouse, LLC   Politique de confidentialité   |   Remboursements   |   Conditions générales d'utilisation   |   Divulgation de la FTC