Comment créer une table de prix sur WordPress à l’aide de HTML, l’ACF Pro et PayPal

Ajouter une table de prix sur WordPress avec une option de paiement peut être un excellent moyen de générer plus de revenus. En effet, si vous vendez des produits ou services, c’est parfois plus commode de demander à ses clients de payer sur votre site.

Dans cet article, nous allons vous guider à travers les étapes nécessaires pour créer une table de prix. Nous utiliserons HTML, ACF Pro (Advanced Custom Fields), et PayPal pour les paiements. Nous couvrirons la recherche d’un design de table de prix, la configuration de l’ACF Pro, la dynamisation de votre table, la création d’une clé API PayPal, et l’intégration de la table sur votre site.

1. Trouver un design pour votre table de prix sur WordPress

La première étape consiste à choisir un design pour votre table de prix. Voici quelques exemples de sites web pour vous aider.

• ThemeForest. C’est Un marché populaire pour les thèmes et templates WordPress et HTML. Vous pouvez aller sur leur site web et Recherchez « Pricing Table ». Vous allez certainement y trouver plusieurs designs.
• Envato Elements. C’est la plateforme sœur de ThemeForest qui Propose aussi une large gamme de designs de table de prix que vous pouvez utiliser et personnaliser.
• CodePen. C’est Une communauté de développeurs front-end. En effet, via CodePen vous pouvez trouver des exemples de tables de prix en HTML/CSS/JS que vous pouvez adapter.

Prenez le temps de choisir un design qui correspond à l’esthétique de votre site et qui est facile à personnaliser.

Voici un exemple de table de prix que vous pouvez télécharger via CodePen.

2. Créer l’option repeater via l’ACF Pro

L’ACF Pro est un plugin puissant qui vous permet de créer des champs personnalisés pour vos articles et pages WordPress. Pour notre table de prix, nous utiliserons le champ « Repeater » pour ajouter des lignes dynamiques.

1. Installer et activer ACF Pro : Si ce n’est pas déjà fait, téléchargez, installez et activez le plugin ACF Pro.
2. Créer un groupe de champs :
   • Allez dans Custom Fields > Add New.
   • Donnez un titre à votre groupe de champs, par exemple « Table de prix ».
3. Ajouter un champ repeater :
   • Cliquez sur Add Field.
   • Choisissez Repeater comme type de champ et nommez-le « Prix ».
   • Dans le repeater, ajoutez les sous-champs nécessaires, par exemple :
     • Titre (text)
     • Description (textarea)
     • Prix (number)
     • Bouton PayPal (text pour l’ID du produit)
4. Configurer les options d’affichage :
   • Définissez l’emplacement où ce groupe de champs doit apparaître, par exemple sur une page spécifique ou un type de publication personnalisé.

3. Rendre dynamique votre tableau de prix

Pour afficher dynamiquement les données de votre table de prix, vous devez ajouter du code à votre template de page.

1. Créer un fichier de template :
   • Accédez à votre thème WordPress et créez un nouveau fichier template, par exemple template-pricing-table.php.
2. Ajouter le code HTML et PHP :
   • Utilisez le code suivant pour récupérer et afficher les données de l’ACF repeater :

4. Créer la clé API de PayPal

Pour que les boutons PayPal fonctionnent correctement, vous devez créer une clé API PayPal.

1. Se connecter à votre compte PayPal.
2. Aller dans la section API :
   • Accédez à Dashboard PayPal Developer (developer.paypal.com).
   • Créez une application pour obtenir vos Client ID et Secret.
3. Configurer les boutons PayPal :
   • Dans votre compte PayPal, créez des boutons de paiement et copiez les IDs correspondants. Ces IDs seront utilisés dans le champ « Bouton PayPal » de votre repeater ACF.

5. Ajouter la table sur le site web

Il existe plusieurs façons d’ajouter votre table de prix à votre site :

1. Utiliser un shortcode :
   • Ajoutez un shortcode dans votre fichier functions.php pour inclure votre template.

function afficher_pricing_table() {
ob_start();
get_template_part('template-pricing-table');
return ob_get_clean();
}
add_shortcode('pricing_table', 'afficher_pricing_table');

2. Utiliser un block réutilisable :
   • Créez un bloc Gutenberg réutilisable pour inclure votre table de prix. Ajoutez le code HTML et PHP directement dans le bloc.

Conclusion

En suivant ces étapes, vous pouvez créer une table de prix dynamique et fonctionnelle sur votre site WordPress. Cette méthode vous permet de personnaliser et de gérer facilement vos prix tout en intégrant des paiements sécurisés via PayPal. Essayez ces techniques et adaptez-les à vos besoins spécifiques pour offrir une expérience utilisateur optimale sur votre site. Avez-vous des questions ? Contactez-nous.