Personnaliser le module d'affichage des produits dans un thème WooCommerce avec Elementor Pro : un tutoriel complet

WooCommerce est l'un des plugins de commerce électronique les plus populaires pour WordPress, et le plugin Elementor D'autre part, il s'agit d'un éditeur de pages visuel très répandu. En combinant les deux, il est possible de créer des pages de présentation de produits entièrement personnalisées sans avoir à écrire de code.

Ce tutoriel explique en détail comment personnaliser le module de présentation des produits dans votre thème WooCommerce avec Elementor (avec les fonctionnalités de la version Pro) pour construire des pages de commerce électronique plus attrayantes et plus convertibles.

I. Préparatifs

Avant de commencer, assurez-vous que la configuration suivante est complète :

• Site web WordPress installé et activé WooCommerce plug-in (composant logiciel)
• Le plug-in Elementor est installé et activé (Elementor Pro recommandé)
• Utilisez un thème compatible avec WooCommerce (par exemple Hello Elementor, Astra, Blocksy, Kadence, etc.).
• Les informations sur les produits ont été saisies dans le catalogue de produits WooCommerce.

Si vous utilisez la version gratuite d'Elementor, les contrôles de visualisation sont limités. La version Pro débloque tous les modules fonctionnels.

Deuxièmement, les deux façons de créer un modèle de présentation des produits

Elementor propose deux méthodes principales pour personnaliser le contenu de la présentation des produits :

Méthode 1 : Utiliser les widgets WooCommerce pour créer rapidement des blocs de produits

Idéal pour créer des mises en page telles qu'une zone de recommandation sur la page d'accueil, des groupes de produits sur les pages de catégories, des curseurs horizontaux, etc.

Procédure d'exploitation :

• Ouvrir WordPress Backend → Pages → New Page
• Modifier des pages avec Elementor

• Tapez "Woo" dans le champ de recherche du widget de gauche.

• Faites glisser l'un des composants suivants :
  • Produits : affichage de plusieurs produits, pouvant être filtrés par catégorie, par étiquette ou sélectionnés manuellement.
  • Catégories de produits : afficher les catégories de produits dans une grille
  • Carrousel de Produits : Construire un Slider de Produits à Défilement Horizontal
  • Produits en vente / Produits en vedette / Produits les plus vendus : présentation des produits en promotion, des produits recommandés et des produits les plus vendus.

• Sélectionner les conditions d'affichage dans l'onglet "Requête".

• Définition d'options d'apparence telles que les images de produits, les styles d'en-tête, les styles de boutons, etc.

• Enregistrer et publier la page

Méthode 2 : Personnalisation des modèles de produits individuels à l'aide du constructeur de thèmes (Elementor Pro)

Adapté à la reconstructionPage de détail du produitLa structure de présentation des en-têtes, des images, des prix, des boutons, etc. dans la rubrique

Procédure d'exploitation :

• Open Backend →Templates→ Theme Builder

• Cliquez sur "Produit unique" et sélectionnez "Ajouter nouveau".

• Utiliser un modèle vierge ou importer un préréglage officiel

• Faites glisser les widgets suivants :
  • Titre du produit
  • Image du produit
  • Prix du produit
  • Ajouter au panier
  • Evaluation du produit
  • Produit Meta
  • Contenu du produit
  • Onglets de données sur les produits

• Cliquez sur "Publier" lorsque vous avez terminé.
• Sélectionnez la portée du modèle dans les paramètres de condition (par exemple, appliquer à tous les produits ou à une catégorie particulière).

Techniques avancées de personnalisation

Ces conseils rendent la page de présentation des produits plus expressive et plus reconnaissable :

1. ajouter des étiquettes dynamiques (nécessite Pro)

Elementor Pro's "étiquette dynamique"Cette fonctionnalité vous permet d'intégrer des champs de produits dans du texte, des boutons et des titres.

Exemple :

• Promotion limitée dans le temps : {{product_title}}
• Texte du bouton : Acheter maintenant {{product_price}}

2. utiliser les paramètres de style avancés

• Ajouter des effets interactifs tels que des ombres au survol, un zoom sur l'image, etc. aux fiches produits.
• Ajustement du rapport de taille du dessin du produit (par exemple 1:1, 4:3)
• Personnaliser les couleurs des boutons, les bordures, les polices et autres styles de détails

3. une mise en page adaptée et optimisée

Elementor peut être stylisé individuellement pour les ordinateurs de bureau, les tablettes et les mobiles :

• Contrôlez le nombre de colonnes, par exemple 4 colonnes pour l'ordinateur de bureau, 2 ou 1 colonne pour le mobile automatiquement
• Masquer les éléments inutiles sur mobile, tels que les évaluations, les profils, etc.
• Ajuster les boutons et la taille des polices pour garantir la lisibilité sur tous les appareils

V. Résumé

Elementor avec WooCommerce La combinaison des widgets de produits et du constructeur de thèmes élargit considérablement l'espace de conception des pages de produits. Qu'il s'agisse d'un bloc de recommandation de produits sur la page d'accueil ou de la reconstruction de la structure d'une page détaillée de produits, il vous suffit de savoir utiliser les widgets de produits et les constructeurs de thèmes pour construire un module d'affichage visuellement fort et clair.

Pour des besoins de fonctionnalité plus élevés, vous pouvez également combiner des extensions telles que Crocoblock, Element Pack, Essential Addons, etc., pour créer des sites de commerce électronique de qualité commerciale.

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.