Comment créer un tableau de comparaison de produits dans WordPress

You see product comparison tables everywhere when you’re shopping online. Whether it’s an eCommerce site or a blog, comparison tables help you understand what different products offer. They also help you make more informed purchasing decisions. 

If you’re running an blog affiliéVous comprenez particulièrement bien l'importance des tableaux de comparaison de produits. Grâce à ces tableaux, vous pouvez comparer les différents produits sur votre page et obtenir davantage de commissions d'affiliation. 

Creating a table to attractively compare products is quite simple and doesn’t take a whole lot of time. But it's important that the comparison table you create is engaging to the reader. Your comparison table should inspire the user to take action – whether it’s to purchase a product or just click on the purchase link. 

In this article, we'll show you how to create an awesome product comparison table in WordPress. Let’s get started! 

Comment créer un tableau de comparaison de produits en utilisant WP Table Builder

We’ll be creating the following example table in this tutorial:

Bien que relativement dépouillé pour nos besoins, ce tableau comporte tous les éléments que l'on retrouve habituellement dans les tableaux comparatifs. Nous expliquerons chaque section en détail pour vous aider à créer le tableau exact présenté ci-dessus. 

La première étape de ce tutoriel commence par l'installation d'un plugin. 

Étape #1 : Installer le plugin WP Table Builder 

We’ll be using the WP Table Builder Plugin. It’s a free drag-and-drop table builder. This builder is perfect for creating comparison tables and has a lot of options for customization, including the following elements:

• Texte
• Image
• Bouton
• Classement par étoiles
• Liste

Pour installer le plugin, rendez-vous sur votre site WordPress dashboard > Plugins. Cliquez sur Ajouter un nouveauet rechercher WP Table Builder. Cliquez sur installer et activer pour installer le plugin sur votre site web :

Vous pouvez également télécharger le plugin à partir de l'adresse suivante Dépôt WordPress et le télécharger sur votre site web. 

Étape #2 : Créer un nouveau tableau

Pour créer un nouveau tableau dans le plugin WP Table Builder, allez d'abord sur Constructeur de tableau > Ajouter un nouveau. 

You’ll see the table drag-and-drop builder as shown below: 

Vous pouvez donner un nom à votre tableau et définir le nombre de lignes et de colonnes. Une fois cela fait, cliquez sur le bouton générer button. This will generate your table as shown below: 

Étape #3 : Ajouter du contenu à votre tableau

Now it's time to add content to your table. WP Table Builder lets you drag and drop elements to the cells of your table. You can select the elements from the left sidebar and drag them to your table. Here’s how our table looks after adding content: 

Nous avons utilisé uniquement le texte, imageet bouton pour créer le tableau. Comme vous pouvez le constater, le résultat est propre et beau. 

Nous allons maintenant vous montrer comment vous pouvez rendre votre table encore plus attrayante à l'aide de ce plugin. 

Étape #4 : Faites en sorte que votre tableau soit beau et réactif

Il y a de nombreuses façons de rendre votre tableau magnifique avec WP Table Builder. Ce plugin a également des tonnes d'options de personnalisation pour vous aider à rendre votre tableau plus attrayant. Commençons par le début. 

Configuration de la bordure du tableau

WP Table Builder lets you add a border to your table. You can find this option in the table settings on the left. You can set the border size, change its color, and also apply an inner border to your table:

Rembourrage des cellules

L'option de remplissage des cellules modifie le remplissage de chaque cellule de votre tableau :

Fond d'en-tête 

Vous pouvez également personnaliser la couleur d'arrière-plan de l'en-tête de votre tableau pour lui donner un peu plus de style :

For this table, I’ve set the header background to white so that the logos blend well. 

Arrière-plan des rangs pairs/impairs

Les couleurs alternatives pour les lignes sont très populaires dans les tableaux de comparaison de produits, et vous pouvez les appliquer facilement avec le plugin WP Table Builder :

Maintenant que votre tableau est magnifique sur un ordinateur de bureau, vous devez également veiller à ce qu'il soit parfait sur les appareils mobiles. 

The awesome thing is, you don’t have to worry about doing a lot of leg work. All you need to do is to click on the Rendre le tableau réactif toggle. Votre tableau sera ainsi plus attractif et plus attrayant sur les appareils mobiles :

Enfin, activez la fonction Rangée supérieure comme en-tête pour que la ligne supérieure devienne l'en-tête du tableau. 

Votre table est enfin prête à être utilisée ! 

Étape #5 : Insérer le tableau via un code court

Maintenant que votre tableau est prêt, vous devez l'insérer dans votre contenu. Vous pouvez le faire facilement en insérant le shortcode du plugin. 

Pour trouver le shortcode du tableau, cliquez sur le bouton Embarquer en haut du générateur de tableaux. Cela ouvrira une fenêtre contextuelle contenant le shortcode :

Vous pouvez maintenant copier et coller ce shortcode n'importe où dans votre contenu. 

Une autre façon de trouver le shortcode du tableau est d'aller sur Table Builder > All Tables. Here, you’ll find all the tables you have created:

Comme vous pouvez le constater, vous pouvez copier le shortcode du tableau à partir de cette page. 

Conclusion

Si vous vous demandiez auparavant comment créer un tableau de comparaison de produits dans WordPress, vous voyez maintenant à quel point le processus est facile. Avec le plugin WP Table Builder, tout le processus de création d'un tableau engageant est simplifié et peut être réalisé en quelques minutes. 

There are many customization options that let you design the look and feel of the table you’re creating.

Si vous avez des questions concernant ce tutoriel, veuillez les poser dans la section des commentaires ci-dessous. Nous serons ravis de vous aider !

Si vous avez aimé cet article, n'oubliez pas de nous suivre sur Twitter, Instagram, Facebook, Pinterestet LinkedIn! Et n'oubliez pas de vous inscrire dans le boîte ci-dessous.

Divulgation des liens d'affiliation