Liste des produits dans Elementor avec la table des produits WooCommerce

Dans cet article, nous allons vous montrer comment combiner Elementor et WC Product Table pour créer un site WordPress plus personnalisé tout en augmentant les ventes de votre boutique WooCommerce.

WordPress simplifie le processus de création d'un site Web et sa mise en service rapide. WooCommerce est un plugin WordPress qui vous permet de transformer n'importe quel site WordPress en une boutique en ligne entièrement fonctionnelle. Vous courez le risque de produire un site imitateur, cependant, si vous continuez avec leurs options et fonctionnalités par défaut, cela peut ne pas convenir aux besoins de votre entreprise. Il est essentiel de trouver les meilleurs outils pour concevoir et personnaliser votre site Web jusqu'à ce que ce soit ce que vous voulez.

plugin amp nombreux WordPress et WooCommerce plugin plugin s sont disponibles pour améliorer la fonctionnalité de votre magasin - Elementor, pour ex amp le, est l'outil le plus simple pour personnaliser votre page produit WooCommerce. Bien que ce soit l'un de ses avantages les plus importants, il présente également des inconvénients importants. Ex amp le, lorsque vous combinez WordPress plugin plugin s de différents auteurs, vous courez la chance de rencontrer erreurs de compatibilité et autres complications; ce n'est pas le cas lorsque vous utilisez les plugin WooCommerce Product Table et Elementor pour les sites Web WordPress. Vous aurez un meilleur contrôle sur l'apparence et les fonctionnalités de votre site lors de l'utilisation de l'un de ces plugin , et ils peuvent être utilisés conjointement pour obtenir des résultats encore plus excellents.

Un aperçu rapide de la table des produits WooCommerce et des frameworks Elementor

Comme indiqué précédemment, il existe une vaste sélection de plugin WordPress disponibles pour vous aider à créer un meilleur site WordPress personnalisé selon vos besoins spécifiques. Certains plugin sont conçus pour être utilisés à grande échelle, tandis que d'autres sont conçus pour ajouter un aspect ou une fonctionnalité particulière.

Elementor est un ancien amp le du premier type d'application:

Notre plugin création de pages vous offre une toute nouvelle interface pour la construction de pages Web et la création de votre site Web WordPress. Vous gagnez un grand contrôle sur la façon dont votre site Web est mis en place en sélectionnant et en personnalisant une vaste bibliothèque de widgets, de blocs et de mises en page.

Si la WooCommerce Product Table est une solution plus générale, elle est également plus ciblée :

Ce plugin vous permet de créer des tableaux dynamiques et entièrement personnalisables qui répertorient vos produits et services WooCommerce. Cependant, en raison de leur interaction avec WooCommerce, ces tableaux sont particulièrement bien adaptés pour afficher des articles et des services de manière conviviale et visuellement attrayante pour les acheteurs en ligne. Le plugin Posts Table Pro interagit également avec Elementor et répertorie tout type de contenu WordPress dans un tableau au lieu de simplement les produits WooCommerce (si vous souhaitez afficher quelque chose en dehors des produits - tels que des articles, des pages ou des documents), peut être utilisé à la place.

Lorsqu'ils sont utilisés conjointement, Elementor et WooCommerce Product Table offrent des capacités très diverses. Vous pouvez les utiliser pour produire des impacts très importants qui contribueront à augmenter le nombre de ventes de votre boutique WooCommerce.

Il est maintenant temps de passer aux choses sérieuses. Dans les sections suivantes, nous examinerons quelques amp concrets de la façon dont vous pouvez utiliser la table des produits WooCommerce et Elementor pour créer des effets similaires à ceux indiqués ci-dessus.

Lorsqu'il s'agit de combiner ces deux plugin , le ciel est la limite - et ce ne sont que quelques-unes des possibilités. Avec un peu d'essais et d'erreurs, vous pouvez créer différentes pages en utilisant la même approche fondamentale que nous allons démontrer.

Tout d'abord, vous devez vous assurer que les deux plugin sont correctement installés sur votre site. C'est une bonne chose que l'installation d'Elementor et la configuration de la table des produits WooCommerce soient simples et simples. WooCommerce lui-même doit également être installé et activé avant de pouvoir procéder à cette étape. Vous serez alors prêt à travailler sur votre projet.

Pour incorporer une table de produits WooCommerce dans un éditeur de texte ou un widget de shortcode, procédez comme suit :

Commençons par l'application la plus fondamentale et la plus bénéfique possible. Alternativement, si vous souhaitez simplement utiliser un tableau de produits dynamique sur votre site Web Elementor, vous pouvez l'ajouter à un widget et le faire apparaître sur le front-end du site Web.

Assurez-vous d'utiliser l'éditeur Elementor lorsque vous ouvrez une page ou une publication pour accomplir cela. Si l'interface WordPress familière vous est présentée, cliquez sur le bouton Modifier avec Elementor pour passer à l'interface Elementor :

Si c'est la première fois que vous travaillez avec Elementor, faisons un petit tour de la plate-forme. Une grande zone apparaîtra sur la droite où votre contenu sera affiché, et il sera mis à jour en temps réel au fur et à mesure que vous l'ajoutez et le modifiez. Sur le côté gauche de l'écran, il y a une liste de « widgets » que vous pouvez faire glisser dans la zone désignée, puis réorganiser et configurer selon vos besoins :

Une table de produits peut être utilisée avec une variété de widgets Elementor différents. Cependant, si vous ne souhaitez afficher qu'un seul tableau de produits sur une page, vous pouvez le faire en incluant une section de texte d'introduction dans le code HTML de la page. Prenez le widget Éditeur de texte et déplacez-le vers un emplacement vide comme suit :

Après cela, vous pouvez cliquer à l'intérieur du widget pour supprimer le texte par défaut et le remplacer par le contenu de votre choix. En ce qui concerne la table des produits elle-même, vous pouvez l'inclure en collant ce simple shortcode :

[tableau des produits]

Lorsque vous insérez le shortcode dans votre page, le tableau apparaîtra à l'emplacement que vous spécifiez, que vous pouvez vérifier en le visualisant sur le front-end :

Si vous souhaitez uniquement utiliser un élément pour le code lui-même, vous pouvez utiliser le widget Shortcode.

N'oubliez jamais d'enregistrer la page lorsque vous avez terminé de positionner le tableau, peu importe où vous décidez de le placer. Par la suite, vous souhaiterez probablement apporter quelques modifications à l'apparence et au fonctionnement du tableau.

Revenez à votre tableau de bord WordPress et accédez à l'onglet WooCommerce > Paramètres pour terminer cette tâche. Les tableaux de produits peuvent être trouvés en sélectionnant Produits en haut de l'écran, puis Tableaux de produits :

Une liste complète d'options pour configurer votre table de produits WooCommerce peut être trouvée ici. Vous avez un contrôle total sur les informations qui apparaissent dans le tableau, et vous pouvez les personnaliser en ajoutant des filtres et des variables, entre autres. Consultez la documentation du plugin pour plus d'informations sur les différents choix.

Vous pourrez modifier la table de produits que vous venez de créer à l'aide d'Elementor sans rien faire d'autre. Une fois que vous avez fini de personnaliser la table selon vos spécifications, enregistrez simplement vos modifications et vous êtes prêt à partir !

Les accordéons, les onglets et les bascules peuvent être utilisés pour organiser plusieurs tables de produits.

La solution ci-dessus fonctionne bien si vous souhaitez présenter une seule table avec vos produits WooCommerce. Si vous allez construire de nombreuses tables, chacune ayant une catégorie d'objets différente, ce n'est pas la meilleure option.

Il existe plusieurs façons d'y parvenir dans Elementor. Le widget Accordéon, Ex amp le, peut être utilisé pour générer le même effet que nous avons vu dans la dernière étude de cas. En partant de la zone d'édition de droite, déplacez le widget Accordéon vers la zone d'édition de gauche.

Vous pouvez créer autant d'onglets séparés que vous le souhaitez en cliquant sur les signes plus, et vous pouvez personnaliser les titres et le texte de chacun. De plus, vous pouvez ajouter une table de produits à un ou plusieurs onglets en utilisant le même shortcode que celui mentionné précédemment.

Bien sûr, le simple ajout du shortcode de base entraînera une succession de tables de produits similaires, ce qui n'est probablement pas ce que vous recherchiez en premier lieu. Au lieu de cela, vous aurez besoin de personnaliser chaque shortcode pour afficher uniquement des produits spécifiques - par ex amp le, des articles d'une catégorie spécifique - au lieu de tous les produits.

La méthode que vous utiliserez sera déterminée par les produits que vous souhaitez inclure et omettre de chaque tableau en question. Pour plus d'informations, veuillez consulter le guide complet de personnalisation de vos shortcodes WooCommerce Product Table.

Il convient de noter que vous pouvez obtenir un effet similaire à l'aide d'autres widgets Elementor utiles. cela comprend le widget Toggle et le widget Tabs, entre autres composants. En termes de présentation de plusieurs tableaux de produits WooCommerce de manière attrayante et bien organisée, Elementor est votre outil incontournable.

Nettoyez votre balisage bâclé grâce aux organisateurs en ligne gratuits HTML, CSS et JavaScript !

Réfléchissez sérieusement à la conception de votre site Web de commerce électronique si vous voulez que votre entreprise se démarque de la concurrence. Ex amp le, vous aurez envie de déterminer la manière la plus efficace de mettre en valeur vos produits, idéalement dans un style qui est à la fois convivial et visuellement attrayant à l'œil.

Heureusement, l'utilisation du plugin WooCommerce Product Table avec Elementor rend cette tâche simple. Le shortcode de votre table de produits peut être utilisé pour afficher tout ce que votre site a à offrir (ou juste une sélection) de manière vraiment dynamique.

Laisser un commentaire

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués *