Point culminant du plugin Divi : Divi BodyCommerce

Divi BodyCommerce est un plugin tiers pour Divi qui vous permet de contrôler la conception de votre boutique, de la page du produit à la page de paiement et tout le reste. Il est conçu en pensant aux conversions et vous donne un contrôle total sur la conception de votre magasin à l'aide de Divi Builder.

Lorsqu'un plugin offre autant de modules et de fonctionnalités que celui-ci, ils ont tendance à devenir écrasants à utiliser. Cependant, ce n'était pas un problème avec celui-ci car tout est facile à suivre et il y a plus de vidéos étape par étape que n'importe quel plugin que j'ai vu. Dans cet article, nous allons jeter un œil à Divi BodyCommerce et voir ce qu'il peut faire et à quel point il est facile à utiliser.

Installation et paramétrage de Divi BodyCommerce

Téléchargez et activez le plugin comme d'habitude. Pour activer la licence, rendez-vous dans Divi Engine > Licence BodyCommerce dans le menu du tableau de bord.

Cliquer sur BodyCommerce dans le menu du tableau de bord ouvre les paramètres. Ce sont le même type de paramètres que vous vous attendez à voir pour WooCommerce. Ici, vous pouvez sélectionner vos pages. Une fois que vous avez créé les mises en page pour ces pages, accédez à cette page de paramètres et sélectionnez-les. Vous pouvez également définir les pages sur toute la largeur et choisir d'avoir un modèle de produit différent pour chaque catégorie.

Modules Divi BodyCommerce

53 nouveaux modules sont ajoutés au Divi Builder. Ce sont tous les éléments dont vous avez besoin pour concevoir chaque aspect de votre boutique WooCommerce, y compris les pages de produits, les pages de compte, les pages d'archives, le panier, etc. Ils sont codés par couleur pour que vous ne puissiez pas les manquer. Les couleurs montrent en fait à quoi servent les modules. Par exemple, les modules rouges sont pour les pages produits. Certains utilisent un dégradé pour montrer qu'ils fonctionnent avec deux types de pages. Cette image montre les 24 premiers modules.

Voici les 29 prochains modules. Les modules ajoutent des éléments de page tels que des ventes incitatives, des ventes croisées, des curseurs, des produits connexes, des carrousels, des galeries, du partage, des onglets, des fils d'Ariane et bien plus encore. Les boucles créent des listes de produits pour créer vos pages de boutique. Ils incluent les onglets et options Contenu, Conception et Avancé attendus.

Remarque – Si une page ne se charge pas, assurez-vous que vous n'utilisez pas un module sur cette page qui n'a pas été conçu pour fonctionner sur cette page. Certains modules sont globaux et fonctionnent avec n'importe quelle page, mais d'autres sont destinés à des types de pages spécifiques. Par exemple, vous ne pouvez pas utiliser un module de page de produit sur une page en boucle.

Création et attribution d'une page

Voyons comment créer la page et la définir comme valeur par défaut pour cette catégorie. Tout d'abord, créez la mise en page dans la bibliothèque Divi.

Ensuite, allez dans Divi Engine > BodyCommerce dans le menu du tableau de bord. Sélectionnez l'onglet correspondant au type de page que vous créez, puis choisissez votre mise en page pour cette page. Vous pouvez créer autant de mises en page que vous le souhaitez et les utiliser pour différents types de pages et pour des catégories individuelles.

Exemples de Divi BodyCommerce

Voici quelques exemples que j'ai créés. Ceci n'est qu'un petit échantillon de ce qui peut être fait avec ce plugin.

Page de la boutique Divi BodyCommerce

Pour la page du magasin, je viens d'ajouter un module de pages d'archives de boucles de produits.

Voici la page avec les paramètres par défaut. Chacun des éléments peut être ajusté avec le Divi Builder.

Le voici dans l'agencement Tea Shop. Il s'agit des paramètres par défaut à l'exception de la limite. Je l'ai configuré pour afficher 6 produits.

Vous pouvez ajuster certains éléments en direct.

J'ai ajouté des arrière-plans verts au badge et aux boutons de vente, défini la mise en page pour afficher 6 colonnes, ajouté une ombre de boîte aux produits et ajouté une superposition verte. Je suis impressionné par le nombre d'options pour la mise en page.

Il s'agit de la mise en page de style blog. Cela aurait fière allure si vous aviez des descriptions de produits plus longues.

Page produit Divi BodyCommerce

J'ai créé une mise en page de produit dans la bibliothèque Divi et l'ai sélectionnée comme mise en page par défaut dans les paramètres de BodyCommerce. Ceci est juste une disposition de base pour avoir une idée de ce que les modules peuvent faire.

C'est simple, mais c'est un bon point de départ. Il affiche le titre, la galerie et le curseur du produit.

J'ai ajouté au hasard quelques pages de produits et modules globaux supplémentaires.

Cela commence à montrer le genre de choses qui peuvent être faites avec BodyCommerce. Faisons un peu de Divi sur cette page.

Voici quelques réglages simples avec le Divi Builder. Tout ce que j'ai fait est d'ajouter un arrière-plan à la section et à la ligne et d'ajuster les bordures des boutons et du champ de recherche.

Dans celui-ci, j'ai ajouté une nouvelle ligne pour les produits connexes et déplacé le module de recherche vers cette ligne. J'ai également modifié la mise en page du produit et changé l'image du produit en galerie. Je l'ai réglé sur le défilement vertical. Si la démo WooCommerce avait plus d'images pour ce produit, elles s'afficheraient dans une colonne verticale à gauche. Ceci ne fait qu'effleurer la surface du niveau d'ajustements qui peuvent être effectués avec les pages de produits.

Panier Divi BodyCommerce

Je crée une page de panier à l'aide de la page de contact dans la mise en page Boulangerie. J'utilise les modules Cart Products et Cart Totaux. Ils n'affichent pas leur contenu lors de l'affichage dans Visual Builder, mais vous pouvez toujours créer dans Visual Builder. Les modules offrent de nombreuses autres fonctionnalités telles que la vente croisée.

Voici le panier utilisant les paramètres par défaut. J'ai les deux modules dans une seule disposition à 2 colonnes.

Voici la page du panier après quelques modifications. J'ai opté pour une mise en page à une seule colonne, ajouté un espacement à droite et à gauche, ajouté une couleur d'arrière-plan à partir de la mise en page, modifié les couleurs des boutons et les couleurs du texte pour qu'elles correspondent à la mise en page et ajouté une ombre de boîte.

Documentation Divi BodyCommerce

La documentation est fournie sous forme écrite sur le site Web du développeur et avec une série de vidéos sur YouTube. J'aime qu'il inclue les deux. Les liens sont fournis dans le menu du tableau de bord de Divi Engine. Vous pouvez également voir des vidéos en cliquant sur l'une des fonctionnalités du site Web du développeur. Cela crée une structure intéressante pour trouver les vidéos dont vous avez besoin. C'est en fait comme ça que j'ai trouvé les vidéos que je voulais voir.

Prix ​​Divi BodyCommerce

BodyCommerce a le choix entre trois licences :

• 1 site – 24 £
• 5 emplacements – 50 £
• Sites illimités – 96 £

Vous pouvez acheter BodyCommerce sur le site Web du développeur.

Mettre fin aux pensées

Divi BodyCommerce offre un niveau de contrôle impressionnant sur les conceptions de produits et de pages WooCommerce. J'ai à peine touché à ce qu'il peut faire. Vous pouvez également personnaliser l'écran de connexion, les badges, les pages de compte, les pages de remerciement, les formulaires, les pages de recherche et bien plus encore. Il comprend même des modèles d'e-mails, des icônes personnalisées, des échantillons et AJAX pour le panier. J'aime pouvoir créer une mise en page différente pour chaque catégorie.

Les modules et la mise en page étaient faciles à utiliser. J'ai suivi les vidéos sur la page du développeur afin de créer mes exemples. Les vidéos étaient détaillées et faciles à suivre. Je n'ai eu aucune difficulté à créer n'importe quel type de page que je voulais.

BodyCommerce fournit plus d'outils et de personnalisations que n'importe quel plugin WooCommerce/Divi que j'ai vu jusqu'à présent. Si vous utilisez WooCommerce avec Divi et que vous souhaitez personnaliser vos pages WooCommerce, BodyCommerce est un choix facile.

Nous voulons de vos nouvelles. Avez-vous essayé BodyCommerce pour Divi et WooCommerce ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via Letters-Shmtters / shutterstock.com