WordPress facilite la création d'un site web, et WooCommerce peut rapidement transformer n'importe quel site web WordPress en une boutique en ligne entièrement fonctionnelle. Toutefois, si vous vous contentez d'utiliser les paramètres par défaut, votre site web risque d'être banal et de ne pas mettre en valeur les caractéristiques de votre entreprise.

WordPress et WooCommerce disposent d'une vaste gamme de plugins qui permettent d'ajouter toutes sortes de fonctionnalités puissantes à la boutique. L'un d'entre eux, Elementor, est un outil très utile qui facilite la personnalisation des pages produits de WooCommerce.

Fiche produit Woocommerce et introduction à Elementor

Comme mentionné ci-dessus, il existe un grand nombre de plugins WordPress qui peuvent aider à concevoir un meilleur site web WordPress répondant aux besoins. Certains plugins sont de grande envergure, tandis que d'autres se concentrent sur l'ajout d'éléments ou de fonctionnalités spécifiques.

Elementor est un exemple du premier :

Elementor offre une toute nouvelle interface pour la conception de pages web et la création de contenu. En choisissant et en personnalisant à partir d'une vaste bibliothèque de widgets, de blocs et de mises en page, vous disposez d'un plus grand contr?le sur la manière dont votre site web est constitué.

En revanche, la fiche produit de WooCommerce est une solution plus ciblée :

Ce plugin permet d'ajouter des formulaires dynamiques personnalisables qui répertorient les produits WooCommerce. Ces tables peuvent être utilisées pour une variété d'applications, mais l'intégration avec WooCommerce en fait un outil plus que parfait pour afficher des produits et des services d'une manière conviviale et attrayante. (Si vous souhaitez afficher des contenus autres que des produits, tels que des articles, des pages ou des documents, vous pouvez utiliser son autre plugin Posts Table Pro. Posts Table Pro s'intègre tout aussi bien avec Elementor, et il peut lister n'importe quel type de contenu WordPress dans un tableau, et pas seulement les produits WooCommerce).

Comment utiliser la feuille de produit Woocommerce avec Elementor Page Builder

Tout d'abord, assurez-vous que les plugins Elementor et WooCommerce Product Table sont installés sur le site, et que WooCommerce est également installé et activé. Ces étapes sont généralement rapides et faciles, et une fois qu'elles sont terminées, il est temps de commencer à créer un site web unique. Maintenant, commen?ons !

1. ajouter la fiche produit Woocommerce à un éditeur de texte ou à un widget shortcode

Commencez par l'application la plus basique et la plus utile. Si vous souhaitez uniquement utiliser le tableau dynamique des produits sur un site Elementor, ajoutez-le à un widget afin qu'il apparaisse sur le front-end. Ouvrez une page ou un article et assurez-vous que vous utilisez l'éditeur Elementor. Si vous voyez l'interface traditionnelle de WordPress, cliquez sur le bouton"Editer avec Elementor".pour basculer :

Si vous utilisez Elementor pour la première fois, jetez un coup d'?il rapide. Sur la droite, vous verrez un grand espace où le contenu est affiché et mis à jour en temps réel au fur et à mesure que vous ajoutez et modifiez du contenu. à gauche, une liste de "widgets" peut être glissée dans cette zone, puis réorganisée et personnalisée selon les besoins :

Il est possible d'ajouter des tableaux de produits à de nombreux widgets Elementor. Toutefois, si vous ne souhaitez afficher qu'un seul tableau de produits sur la page, vous pouvez utiliser une section de texte de base. Pour cela, il suffit d'utiliser la sectionWidget éditeur de texteet faites-la glisser vers la zone vierge :

Ensuite, vous pouvez cliquer à l'intérieur du widget pour supprimer le texte par défaut et entrer ce que vous voulez. Quant au formulaire de produit lui-même, il suffit de coller ce simple shortcode pour l'ajouter :

[product_table]

Quel que soit l'endroit de la page où le code correspondant est placé, le tableau des produits s'affiche en conséquence. Ceci peut être vérifié en visualisant la page sur le front-end du site web.

Si vous souhaitez uniquement utiliser les éléments pour le code lui-même, vous pouvez également utiliser le widget Shortcode :

Quel que soit l'endroit où vous décidez de placer la fiche produit, n'oubliez pas de sauvegarder la page une fois qu'elle a été placée. Vous pouvez personnaliser davantage l'apparence et les fonctionnalités de la table des produits si vous voulez qu'elle ait l'aspect que vous souhaitez.

Pour ce faire, retournez dans le tableau de bord de WordPress, puis trouvez et cliquez sur le menu "WooCommerce" et sélectionnez l'onglet "Réglages". En haut de l'écran, cliquez sur l'option "Produits", puis trouvez et cliquez sur le "Tableau des produits" pour effectuer les réglages nécessaires.

Vous trouverez ici une liste complète de paramètres pour le formulaire produit de WooCommerce. Choisissez les informations qui seront affichées sur le formulaire, ajoutez des filtres et des variables au formulaire, et plus encore. Tous les changements effectués ici seront automatiquement appliqués au formulaire de produit que vous venez de placer en utilisant Elementor. Une fois que vous avez fini de faire des ajustements au formulaire, enregistrez les paramètres et c'est fini !

2. organiser plusieurs fiches de produits à l'aide de réductions, d'onglets ou de boutons de basculement

Si vous souhaitez afficher tous les produits WooCommerce dans un seul tableau, la méthode ci-dessus fonctionne mieux. Cependant, si vous souhaitez créer plusieurs tableaux, chacun contenant une catégorie de produits distincte, comment y parvenir ?

Il y a plusieurs fa?ons de le faire dans Elementor. Par exemple, utilisez le widget Accordéon pour créer le même effet que dans l'exemple précédent.

Tout d'abord, faites glisser la partie Accordéon vers la zone d'édition de droite :

Vous pouvez utiliser le "+" pour ajouter autant d'onglets différents que vous le souhaitez et modifier le titre et le texte de chaque onglet. Il est également possible d'ajouter un tableau de produits à un ou plusieurs onglets en utilisant le même shortcode que précédemment.

Bien entendu, l'ajout des seuls shortcodes de base créerait une série de tableaux de produits identiques. Au lieu de cela, chaque shortcode doit être modifié pour que seuls certains produits soient affichés, par exemple les articles d'une catégorie particulière. La méthode exacte dépend des produits que vous souhaitez inclure et/ou exclure de chaque tableau.

Il existe un certain nombre d'autres widgets Elementor pratiques qui peuvent être utilisés pour obtenir des effets similaires. Il s'agit notamment du widget Toggle et du widget Tabs. Affichez plusieurs tableaux de produits WooCommerce de manière attrayante et organisée, Elementor peut réaliser cet effet.

résumés

L'utilisation du plugin WooCommerce Product Table en conjonction avec Elementor permet d'afficher les produits de manière conviviale et esthétique. Il suffit d'ajouter le shortcode product table au widget Elementor et d'afficher dynamiquement le contenu souhaité.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.