Elementor vous permet de concevoir facilement des pages de produits individuelles. Grâce à une simple opération de glisser-déposer, vous pouvez ajuster divers éléments de la page à votre convenance et personnaliser le design. Auparavant, la personnalisation du design des pages WooCommerce nécessitait généralement l'écriture d'un grand nombre de codes, ce qui était difficile pour les non-experts.
Mais maintenant, c'est plus facile grâce à la Elementor WooCommerce Constructeur. Plus besoin de manipuler un code complexe, de fusionner des opérations, d'ajouter des crochets ou de se plonger dans des fichiers PHP compliqués.
Il suffit d'utiliser le Elementor Pro Grâce aux puissantes fonctionnalités d'Elementor, vous pouvez prendre le contrôle total de votre design et de la mise en page de vos produits. Toute la personnalisation se fait sur le front-end, directement dans le constructeur de pages d'Elementor. La conception est facile et intuitive.
Modèles de produits WooCommerce par défaut
La page produit de base de WooCommerce est présentée ci-dessous :
Avec Elementor, vous pouvez concevoir la mise en page de vos modèles de page produit comme vous le souhaitez. Dans ce tutoriel, nous vous montrerons comment créer ce type de modèle de page produit.Conception de la page produit: :
Comme les modèles de produits individuels d'Elementor sont utilisés, une fois la création du modèle terminée, il peut être appliqué à tous les produits, à des catégories spécifiques ou à d'autres conditions.
Comment personnaliser les pages produits de WooCommerce
Dans ce tutoriel, nous nous concentrons sur la personnalisation des pages de produits, nous passerons donc sur la configuration de base de WooCommerce et sur l'ajout de nouveaux produits. Plus tard, il y aura un tutoriel spécial WooCommerce ; gardez un œil sur nous pour les mises à jour.
Une fois l'installation terminée, il serait bon d'installer le plugin WooCommerce et d'ajouter quelques produits apparentés au site. Vous devez également installer Elementor et Elementor Pro pour bénéficier des fonctionnalités de conception visuelle.
Attention !Vous ne pouvez pas accéder aux modèles de produits d'Elementor sans activer WooCommerce, alors n'oubliez pas de le faire !
Étape 1 : Créer un modèle de produit unique
Étape 2 : Choisissez un modèle de page produit préconçu ou créez-en un à partir de zéro !
La façon la plus simple de commencer est d'utiliser un modèle de page produit préconçu, puis de le personnaliser pour l'adapter à votre propre site web. Vous avez le choix entre plusieurs styles de pages de produits. Avant de commencer à ajouter des widgets, vous pouvez passer au modèle pleine largeur pour vous assurer que la page produit est pleine largeur.
Avec Elementor, il est possible de personnaliser et de contrôler entièrement la mise en page et le style de vos pages de produits. Une autre solution consiste à les créer de toutes pièces. Dans le panneau d'édition, vous pouvez voir les widgets spécifiques aux produits.
Étape 3 : Ajouter les widgets de produits qui composent la page
Attention !Il est important d'insérer quelques exemples de produits, y compris leurs champs obligatoires - tels que les descriptions de produits, les boutons de panier d'achat et d'autres contenus - afin de pouvoir les prévisualiser dans un modèle de produit unique.
Il est maintenant temps de construire les éléments qui composent la page produit. Pour les besoins de ce tutoriel, seuls les widgets Elementor suivants seront utilisés et aucun autre plugin ne sera nécessaire :
- Titre du produit
- Woo Breadcrumb Widget
- Widget d'images de produits
- Widget d'évaluation des produits
- Brève description du widget
- Widget des prix des produits
- Widget d'ajout au panier
- Widgets méta produits
- Onglet Données produit
- Produits apparentés
- Ajouter des widgets
Comme le montre la vidéo, il est tout à fait possible d'ajuster la mise en page et de déplacer les éléments. D'autres widgets peuvent être utilisés pour rendre la page produit plus efficace et plus attrayante. Boutons de partage, widgets d'appel à l'action, images en vedette, menus déroulants ...... Même des champs personnalisés peuvent être ajoutés au modèle à l'aide de la fonction de contenu dynamique.
Étape 4 : Prévisualiser la page du produit avec d'autres produits
Pour s'assurer que le modèle de produit est conçu correctement, il est recommandé de le prévisualiser avec plusieurs produits différents. Cliquez sur l'icône en forme d'œil dans le panneau inférieur gauche, puis cliquez sur Paramètres. Sous Paramètres de prévisualisation, sélectionnez le produit spécifique que vous souhaitez afficher. Maintenant, appliquez le modèle et voyez ce que cela donne.
Étape 5 : Définition des conditions
À ce stade, vous pouvez définir les conditions qui déterminent où les modèles de produits sont affichés. Par défaut, le modèle affectera toutes les pages de produits du site. Il est également possible de sélectionner des catégories de produits spécifiques. Cliquez sur "Publier" et le produit individuel est mis en ligne !
Comment utiliser les fiches produits de WooCommerce avec Elementor
Personnaliser la page de la boutique
Pour accomplir cette tâche, il est nécessaire de concevoir un système de production.Page du catalogueCette page concerne tous les produits du site ou les produits d'une catégorie. Tout d'abord, retournez à la page Elementor > Mes modèles(math.) genreCréer un modèle de profil de produit. Sélectionnez ensuite un modèle existant ou créez-en un.
Ajouter "Produits archivés "gadgetet "Titre de l'archive"et personnaliser son design. Pour qu'il corresponde au design des modèles de produits individuels, utilisez la fonction Copier les styles entre les pages. Revenez à la page du produit et cliquez avec le bouton droit de la souris sur Copier. Revenez au produit archivé et cliquez avec le bouton droit de la souris sur Coller le style.
Dans "Produits archivés "dans la rubrique "consulter (un document, etc.) > source (d'information, etc.) "Sélection sous"Nouveaux produits". Sélectionnez ensuite Bagues dans la catégorie de produits. Cela ne fera apparaître que la catégorie des bagues. Si la liste des produits de cette catégorie est longue, faites glisser la pagination. Dans l'onglet Style, vous pouvez concevoirColonnes et lignesinter-écart. Ajustementscouleuretstyle calligraphiqueetc.
Avant de publier, sélectionnez les conditions pour déterminer où l'archive apparaîtra, comme vous le feriez dans un modèle de produit individuel. Cliquez sur "poste"et la page d'archives a été mise en ligne.
rendre un verdict
Le WooCommerce Builder d'Elementor offre une flexibilité de conception qui permet de créer et d'ajuster intuitivement les pages de produits. Cela permet de gagner du temps et de réduire considérablement le délai nécessaire pour passer de l'idée à une boutique en ligne WooCommerce vivante et entièrement fonctionnelle.
