Divi Plugin Woocommerce: Générateur de produit WooCommerce

La popularité de WooCommerce pour WordPress ne fait aucun doute. Même avec sa popularité, la conception de la page produit WooCommerce est limitée. Même avec des thèmes tels que Divi et Extra, rien ne peut être fait pour changer la mise en page. Heureusement, il existe plusieurs plugins tiers conçus pour Divi qui font exactement cela.

WC Product Builder de DiviKingdom est l’un de ces plugins. Il fournit chaque élément de produit WooCommerce sous forme de module Divi (20 modules Divi au total), ajoute 14 codes abrégés pour vous permettre de placer des éléments WooCommerce dans des modules Divi sur la page du produit, et ajoute le Divi Builder aux pages de produit afin de créer pratiquement tout type de produit. de la description du produit que vous pouvez imaginer. 

Installation du générateur de produit WC                             

Téléchargez et activez le plugin comme d’habitude. Si WooCommerce n’est pas déjà activé, il vous avertira de l’activer.

Dans le menu du tableau de bord, accédez à Paramètres , Générateur de produits WC .

Paramètres généraux et codes courts du générateur de produit WC

Dans l’onglet Paramètres généraux, vous pouvez choisir la page de disposition du produit par défaut dans une liste déroulante. Ce sont des mises en page dans votre bibliothèque Divi. Cela vous permet de créer une mise en page prédéfinie avec Divi Builder à définir comme configuration par défaut. Si vous le souhaitez, vous pouvez remplacer la présentation par défaut pour des produits spécifiques en choisissant une nouvelle présentation sur la page du produit.

Assurez-vous de sélectionner Activer pour Divi Builder pour Description du produit. Cela vous permet d’utiliser Divi Builder pour créer des mises en page dans la zone de description du produit de l’éditeur de produits WooCommerce.

L’onglet Codes abrégés fournit une liste de 14 codes abrégés pour vous permettre de copier et coller des éléments Woocommerce tels que des descriptions et des images dans la zone de contenu des modules Divi tels que du texte, des curseurs, des onglets, des bascules, etc. page pour obtenir le shortcode.

Utilisation de WC Product Builder sur les publications de produit WooCommerce

Quelques nouvelles fonctionnalités sont ajoutées à la page du produit:

– Choisissez la disposition du produit
– Image de couverture du produit

Si vous l’avez activé, Divi Builder est automatiquement ajouté à l’éditeur de produits WooCommerce, ce qui vous permet d’utiliser Divi Builder pour créer une mise en page pour la zone de description du produit. Les présentations des produits sont construites dans la bibliothèque Divi. Vous pouvez utiliser la valeur par défaut ou choisir une nouvelle mise en page dans la liste déroulante.

Construire un constructeur de produit WC Description du produit

La zone de description de produit standard utilise l’éditeur TinyMCE. L’image ci-dessus montre la description standard.

Ceci est la zone de description dans la page du produit. D’autres contenus, tels que des images, peuvent être ajoutés. Bien entendu, beaucoup plus peut être fait avec Divi Builder.

Nous avons créé une mise en page avec Divi Builder et ajouté un curseur.

La zone de description affiche maintenant la mise en page. Nous avons également ajouté un arrière-plan et modifié le texte en clair.

Modules constructeur de produit WC

WC Product Builder ajoute 20 nouveaux modules à Divi Builder pour vous aider à créer des pages de produit personnalisées. Chaque élément WooCommerce est un module distinct, vous permettant de concevoir une mise en page en utilisant uniquement les éléments souhaités et en les plaçant où vous le souhaitez. Les modules ont des icônes uniques, ce qui les rend faciles à trouver en un coup d’œil.

Construire une structure de générateur de produit WC dans la bibliothèque Divi

Nous avons construit une structure dans la bibliothèque Divi à l’aide des modules WooCommerce et Divi. Sur la page Produit WooCommerce, nous sélectionnerons la mise en page dans la liste déroulante.

La mise en page que vous avez créée apparaîtra à la place de celle par défaut. Il s’agit en fait d’une modification de la démo n ° 1; nous n’avons donc pas eu à créer le style ou une grande partie de la mise en page. Comme toute bonne mise en page, les démos permettent de gagner du temps.

Démos de constructeur de produit WC

Utilisation de codes de produit WC Builder avec des modules Divi

Les codes courts vous permettent d’utiliser des modules WooCommerce au sein de modules Divi classiques sur les pages de produits et les présentations. Cela ouvre certaines possibilités de conception, vous permettant de placer des produits dans des onglets, des curseurs, des bascules, des accordéons, etc.

Les codes abrégés s’appliquent uniquement au produit pour cette page de produit. Vous ne pouvez donc pas les utiliser sur des pages, des publications ou des widgets classiques.

Licence, documentation et où acheter

La documentation est fournie sur le site Web du développeur sous la forme d’une série de billets de blog permettant de répondre aux questions et de vous aider à démarrer.

Le plugin peut être acheté sur le site Web du développeur ou sur BeOnGo-store