Tout ce que vous devez savoir sur les modules de produit WooCommerce de Divi 5

La compatibilité avec WooCommerce a maintenant été étendue à Divi 5, vous donnant un contrôle total sur les pages de produits sans compter sur les modèles intégrés de WooCommerce. Les modules de produits WooCommerce nouvellement intégrés vous permettent de concevoir des dispositions engageantes et conviviales qui correspondent à votre marque et aident à augmenter les ventes, tout en expliquant toutes les fonctionnalités de Divi 5, y compris Flexbox, pour créer des pages de produits avec un contrôle de disposition moderne.

Dans cet article, nous couvrirons les fonctionnalités clés des modules et vous montrerons comment les utiliser pour votre prochain site Web de commerce électronique Divi 5. Plongeons-nous.

Que sont les modules de produit WooCommerce?

Les modules de produit WOO sont des éléments de contenu spécialisés au sein de Divi 5, conçus pour personnaliser les pages de produits et de catégorie pour les magasins à courtiser. Ces modules remplacent les modèles WooCommerce qui viennent standard par le plugin, vous permettant de créer des dispositions personnalisables. Contrairement à ces modèles traditionnels, les modules de Divi 5 permettent la liberté de création tout en maintenant la compatibilité avec la fonctionnalité centrale de WooCommerce.

La libération de 17 modules WooCommerce en Divi 5 marque une étape importante. Ces modules, qui couvrent tous les aspects de conception de pages de produits et de catégorie, ne sont plus en mode héritage, ce qui signifie qu'ils sont tous entièrement optimisés pour l'architecture moderne de Divi 5. Avec cette transition vers une base plus efficace, Divi 5 fonctionne mieux, est plus évolutif et est compatible avec l'avenir de WordPress.

Les 8 modules WOO restants, axés sur les pages de chariot et de caisse, devraient se dérouler bientôt.

Caractéristiques clés des modules de produit WooCommerce de Divi 5

Passons en revue les principales fonctionnalités auxquelles vous pouvez vous attendre maintenant que les modules de produit WooCommerce ont été intégrés dans Divi 5.

Ensemble de modules complet

Le premier lot de modules de produits WooCommerce de Divi 5 comprend des outils conçus pour gérer un aspect spécifique de la conception de la page des produits et de la catégorie. Ces modules sont:

• Woo Bread Crumbs: Affiche des sentiers de navette de navigation pour aider les utilisateurs à naviguer facilement dans le magasin.
• Avis WOO: affiche des messages système comme des mises à jour, des erreurs ou des confirmations du panier.
• Woo produit Ajouter au panier: rend un bouton Ajouter au panier avec des commandes de quantité facultative.
• WOO Product Description: Sort la principale description du produit long.
• Woo Product Gallery: Affiche des images de produits supplémentaires dans des formats de grille ou de curseur.
• Images de produit WOO: montre l'image du produit principal ou une galerie d'images.
• Informations sur le produit WOO: affiche les détails du produit comme le poids, les dimensions ou les attributs.
• Woo Product Meta: montre le SKU de produits, les catégories et les étiquettes.
• Prix ​​du produit WOO: affiche le prix du produit, y compris les prix de vente.
• Woo Product Rating: montre la note d'étoile moyenne et le nombre de révisions.
• WOO Product Reviews: Permet aux clients de consulter et de soumettre des avis sur les produits.
• WOO Product Stock: indique la disponibilité des produits et les niveaux de stock.
• Tabs de produits WOO: Affiche les onglets de produit par défaut pour la description, les informations supplémentaires et les avis.
• Titre du produit WOO: sortit le nom du produit comme un titre personnalisable.
• WOO Product Upsell: Promote les produits à vente ascendante pour encourager les achats de valeur plus élevée.
• Produits WOO: crée des grilles de produits personnalisables pour les pages de catégorie.
• Produits liés à Woo: affiche des produits connexes en fonction des catégories ou des étiquettes.

Ensemble, ces modules fournissent tout ce dont vous avez besoin pour créer des pages de produits et de catégorie, de la chapelure de navigation aux affichages de produits dynamiques.

Liberté créative

Modules de produit WooCommerce de Divi 5, utilisateurs gratuits des contraintes des modèles WooCommerce standard. Avec ces modules, vous pouvez contrôler pleinement la disposition, la structure et la conception de vos pages de produits, créant des expériences uniques.

Les modules prennent en charge le contenu dynamique, ce qui signifie qu'ils tirent directement les données du produit de WooCommerce, garantissant des mises à jour en temps réel pour les prix, les niveaux de stock et les descriptions. Cela vous permet de créer des pages qui motivent l'engagement et les conversions sans nécessiter de plugins tiers ou de code personnalisé.

Options de personnalisation

Chaque module a des paramètres de conception étendus, tous gérables dans le constructeur visuel. Vous pouvez personnaliser des éléments tels que les galeries de produits, les badges de vente, les boutons et plus encore avec des options pour la typographie, les couleurs, l'espacement et les animations.

Par exemple, vous pouvez ajuster la disposition du module Woo Product Gallery pour afficher des images dans un curseur ou une grille, style le produit Woo Product Ajouter au bouton CART avec des couleurs personnalisées et des effets en survol, ou modifier le module de cote de produit WOO pour aligner parfaitement les notes des étoiles avec votre conception.

Ces paramètres vous permettent de créer des pages de magasin cohésives et de marque avec facilité.

Modèles dynamiques avec constructeur de thèmes

Le constructeur de thème de Divi 5 vous permet d'adopter le plein potentiel des modules de produits WooCommerce en vous permettant de créer des modèles globaux pour les pages de produits et de catégorie. Avec le constructeur de thèmes, vous pouvez concevoir un modèle unique qui s'applique à tous les produits et catégories de votre magasin, en assurant un look cohérent cohérent.

Builder Loop pour contenu dynamique WooCommerce

Le constructeur de boucle Divi 5 offre un autre moyen de créer un contenu WOO dynamique. Avec Loop Builder, vous pouvez interroger les produits WooCommerce et concevoir des boucles de produits flexibles à l'aide de n'importe quel élément Divi, créant des dispositions, des listes et des carrousels qui vont au-delà de la structure fixe des modules de produits dédiés. Pour les dispositions de produits uniques, utilisez les modules de produit WOO; Pour les collections de produits et les archives, utilisez le constructeur de boucle.

Comment utiliser les modules de produit WooCommerce de Divi 5

Cette section vous guidera à travers la création d'une page de produit dans le constructeur de thème de Divi 5 à l'aide des nouveaux modules de produits WooCommerce.

Créer un nouveau modèle de générateur de thème

Accédez à Divi> Builder de thème dans le tableau de bord WordPress. Cliquez sur + Ajouter un nouveau modèle .

Cliquez sur Créer un nouveau modèle lorsque la boîte de dialogue apparaît.

Ensuite, nous devrons attribuer notre modèle à nos produits. Dans le cadre des produits , sélectionnez tous les produits pour affecter le modèle.

Cliquez sur Créer un modèle pour l'affecter.

Cliquez sur Ajouter un corps personnalisé . Cela nous permettra de construire le corps de notre modèle de page de produit.

Choisissez la création du corps personnalisé lorsque la boîte de dialogue apparaît.

Créez le modèle de produit

Lorsque le constructeur de thème lance, vous pouvez construire un modèle à partir de zéro, choisir une disposition préalable ou construire avec l'IA. Nous sélectionnerons Build à partir de zéro pour ce tutoriel.

Cliquez sur l' icône Green + pour ajouter une nouvelle ligne.

Lorsque les options apparaissent , choisissez la ligne à deux colonnes. Les nouvelles lignes que vous ajoutez à n'importe quelle page ou modèle Divi 5 utiliseront FLEBox par défaut. Le système de mise en page Flexbox de Divi 5 vous donne plus de contrôle sur l'apparence de vos pages de produits, y compris la modification de la façon dont vos modules de produit WooCommerce s'empilent sur différentes tailles d'écran.

Faites défiler vers le bas pour révéler l'option WOO Product Modules . Une fois cliqué, vous aurez 17 modules divi 5 woo et 8 modules hérités (divi 4).

Ajouter le module Woo Product Images

Trouvez et sélectionnez le module Woo Product Images et ajoutez-le à la première colonne.

Ce message est sélectionné par défaut dans le champ de produit dans l'onglet Contenu . Si vous souhaitez créer le modèle à l'aide d'un produit existant, choisissez-le dans le menu déroulant. C'est un excellent moyen de prévisualiser à quoi ressemblera votre modèle tout en le créant. N'oubliez pas de le remettre à ce post avant la sauvegarde finale.

Développez le menu déroulant Elements pour révéler les paramètres. Ici, vous pouvez contrôler quelles images s'affichent dans le module, y compris l'image en vedette, les images de galerie et le badge de vente.

Cliquez sur le menu déroulant de l'image dans l'onglet Design pour révéler les paramètres. Ici, vous pouvez forcer l'image à occuper tout l'espace disponible (forcer FullWidth), ajouter une bordure, une ombre de boîte, ajuster l'espacement ou ajouter des filtres.

Vous pouvez également styliser l' insigne de vente en attribuant une couleur d'arrière-plan, un texte, des frontières, etc.

Ajouter le module de titre de produit WOO

Dans la 2ème colonne, cliquez sur les modules de produit WOO et faites défiler pour sélectionner le module de titre de produit WOO .

Utilisez le menu déroulant dans le champ de produit de l'onglet Contenu pour sélectionner un produit et prévisualiser à quoi il ressemblera dans le modèle.

Ensuite, accédez à l'onglet de conception du module et développez le menu déroulant du texte de titre . Ici, vous pouvez attribuer une police et styliser le titre comme vous le souhaitez.

Ajouter le module de prix du produit WOO

Sous le titre du produit, cliquez pour ajouter un nouveau module. Sélectionnez les modules de produit WOO et faites défiler pour sélectionner le module de prix du produit WOO .

Dans l'onglet Design , vous pouvez styliser tous les aspects du prix du produit, y compris le texte, le texte de vente, le nouveau texte du prix, etc.

Ajouter le module de cote de produit WOO

Ensuite, nous ajouterons le module de notation WOO Product sous le module WOO Price.

Dans l'onglet de contenu sous Elements , vous pouvez choisir d'afficher ou de masquer la note d'étoile et les avis des clients.

Dans l'onglet Design , le menu déroulant Layout vous permet de choisir comment afficher la note d'étoile. Les éléments peuvent être affichés en ligne ou empilés.

D'autres options de style incluent l'attribution d'une couleur, d'une taille de texte et d'un espacement des lettres pour les étoiles et des options de style pour le texte de notation.

Ajouter le module de description du produit WOO

Sous le module de notation Woo Star, cliquez pour ajouter un nouveau module WOO. Cette fois, nous sélectionnerons le module de description du produit WOO . Dans l'onglet Contenu , choisissez la description à afficher (description ou une description courte).

Dans l'onglet Design , vous pouvez styliser la description avec des options pour la police, le poids, le style, l'alignement, la couleur, la taille, etc.

Ajouter le produit WOO Ajouter au module de panier

Ensuite, nous ajouterons le produit WOO Ajouter au module CART . Il permettra à vos clients d'ajouter le produit à leurs chariots et de choisir toutes les variations attribuées au produit.

Les éléments basculent dans l'onglet Contenu vous permettent d'afficher ou de masquer le champ de quantité et le stock disponible. Remarque rapide: Pour que la quantité de bourse s'affiche, vous devez vérifier la gestion des actions dans le produit WOO lui-même.

Vous pouvez styliser les étiquettes de terrain, le texte, les menus déroulants (pour les variations) et le bouton pour correspondre à votre marque dans l'onglet Design .

Continuez à ajouter des modules, comme le module Woo Product Meta pour afficher les numéros et les catégories SKU.

Vous pouvez également ajouter le module Woo Product Tabs pour afficher une description, des critiques et des informations supplémentaires sur votre produit.

Pour une portée maximale, vous pouvez afficher une série de produits connexes sur votre modèle de produit pour encourager les visiteurs de votre site à explorer des produits supplémentaires dans votre magasin, augmentant les chances d'une conversion.

Sauver le modèle

Une fois terminé, l'ajout de modules, apportez toutes les modifications supplémentaires dont vous avez besoin, puis enregistrez le modèle en cliquant sur le bouton Enregistrer dans le coin supérieur droit du constructeur de thème.

Ensuite, cliquez sur le bouton de sortie pour revenir au tableau de bord du constructeur de thème.

De retour dans le tableau de bord du constructeur de thème, cliquez sur Enregistrer les modifications pour enregistrer le modèle et l'appliquer à vos produits WOO.

Comme vous pouvez le voir, la création d'un modèle de produit avec les modules de produit WOO de Divi 5 est un processus simple. Nous ne couvrirons pas tous les modules de ce tutoriel, mais en utilisant tous, vous pouvez créer des pages de produits ou de catégorie impressionnantes qui gardent vos visiteurs engagés.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Quelle est la prochaine étape pour l'intégration WooCommerce de Divi 5?

Le deuxième lot de modules WooCommerce, se concentrant sur les pages de panier et de caisse, sera publié dans les prochaines semaines, en terminant l'intégration avec WooCommerce. Ces ajouts permettront aux utilisateurs de personnaliser entièrement l'intégralité de l'entonnoir de commerce électronique, de la navigation de produit à la caisse. La bêta publique Divi 5 affinera ces fonctionnalités davantage, incorporant les commentaires des utilisateurs et des corrections de bogues supplémentaires pour assurer la stabilité.

Au-delà de la compatibilité et de l'intégration de WooCommerce, Divi 5 continue d'évoluer avec des fonctionnalités récentes comme le module de carrousel de groupe pour créer des curseurs de produits dynamiques, le module Lottie pour ajouter des animations légères et un nouveau système de mise en page Flexbox pour un contrôle de mise en page amélioré. Ces ajouts complètent les modules WOO, offrant des possibilités encore plus créatives pour les sites de commerce électronique.

Essayez les modules Woo Product de Divi 5 aujourd'hui

Les modules de produit WOO de Divi 5 vous permettent de créer des pages de produits et de catégorie captivantes avec une flexibilité et une créativité inégalées. Les modules offrent un mélange de liberté de création, d'intégration de contenu dynamique et de performances, le tout dans une interface intuitive. Des galeries de produits personnalisables aux dispositions personnalisées via le constructeur de thème, Divi 5 facilite la création de pages de magasins à conversion élevée.

Êtes-vous prêt à plonger dans Divi 5? Téléchargez le dernier divi 5 public alpha pour explorer ces modules et voir comment ils peuvent transformer votre site WooCommerce. Nous aimerions entendre vos pensées. Partagez vos commentaires dans les commentaires ou connectez-vous avec nous sur nos réseaux sociaux.