Beaver Builder WooCommerce Integration 2024– Comment utiliser Beaver Builder pour créer des pages de produits et de boutique WooCommerce ?

Créer une boutique en ligne peut être passionnant. Avoir une belle vitrine contribue au succès de votre entreprise. Cependant, si vous souhaitez concevoir une boutique qui fonctionne bien, vous risquez de rencontrer des difficultés.

Un site de commerce électronique qui plaira à la fois à vous et à vos clients peut être créé à l'aide d'un constructeur de pages WooCommerce. Jetons un coup d'oeil au WooCommerce brancher. Notre prochaine étape sera de démontrer à quel point il est facile de créer votre boutique en ligne avec Beaver Builder. Allez, commençons !

constructeur de castor

Une brève introduction à WooCommerce

Avec WooCommerce, vous pouvez ajouter une fonctionnalité de commerce électronique à votre site WordPress afin que vous puissiez vendre vos produits en ligne :

De plus, vous vous retrouverez en bonne compagnie, puisque WooCommerce devrait avoir une part de marché d'environ 28 % d'ici 2020.

WooCommerce est une solution open source hautement personnalisable, tout comme WordPress. Avec lui, vous pouvez configurer des passerelles de paiement et différentes options d'expédition, et démarrer immédiatement avec votre empire de commerce électronique.

En utilisant WooCommerce, vous pouvez également créer, modifier et gérer vos produits :

L'utilisation des plugins complémentaires WooCommerce vous donne accès à de nombreuses autres fonctionnalités.  

Créer une boutique WooCommerce et des pages de produits avec Beaver Builder (en 4 étapes faciles)

Cependant, avant de pouvoir vous familiariser avec les fonctionnalités de WooCommerce, vous avez d'abord besoin d'un site Web à lancer. Commencez par installer et activer les plugins WooCommerce, Beaver Builder et Beaver Themer WordPress. Vous êtes maintenant prêt à créer vos pages produit et boutique.

Étape 1 : Créez votre boutique en ajoutant des produits

Créez des listes pour vos produits comme première étape de la configuration de votre boutique. Lorsque vous utilisez WooCommerce, vous pouvez vendre des biens physiques, des biens numériques et des articles avec des variations (telles que la taille et la couleur).

Vous pouvez installer un exemple d'ensemble de produits fourni par WooCommerce pour avoir une idée de la façon dont le système fonctionne avec différents types d'éléments si vous êtes nouveau sur WooCommerce. Plusieurs fonctionnalités du produit WooCommerce sont expliquées ici, y compris les options de variation et de vente.

Vous apprendrez à créer un produit de base, si vous souhaitez repartir de zéro. Peu importe ce que vous envisagez de vendre, les autres sections de cet article vous seront utiles.

Créez un nouveau produit dans votre tableau de bord WordPress. Sélectionnez Produits > Ajouter nouveau dans le menu de gauche. Remplissez les champs suivants pour l'article que vous souhaitez ajouter à votre boutique :

Vous pouvez définir la plupart des paramètres importants pour votre article en faisant défiler jusqu'au panneau de données du produit, y compris le prix, les taxes et l'expédition. Dans WooCommerce, vous avez la possibilité d'inclure les taxes et les options d'expédition pour les produits, qui peuvent être remplacées sur une base individuelle.

Décidez si votre produit est téléchargeable ou virtuel dans les paramètres généraux. Ne cochez pas les cases si le produit est physique :

En plus de la gestion des stocks, vous pouvez commencer. La connexion des produits vous donne la possibilité de faire des ventes croisées et des ventes incitatives.

Vous pouvez également ajouter une deuxième description plus brève de votre article dans le champ Description courte du produit, sous le panneau de données du produit. Les listes de vitrines contiennent généralement ces informations.

Vous verrez des catégories de produits et des balises à droite de votre écran. Voici quelques organisateurs utiles :

Votre liste de produits doit inclure une image ou deux. Les options suivantes sont disponibles : images uniques ou groupes d'images :

Vous pouvez soit télécharger une photo depuis votre appareil, soit ajouter une image depuis votre médiathèque. De la même manière, vous pouvez ajouter des images aux galeries de produits. Les images peuvent simplement être glissées et déposées pour les réorganiser.

Étape 2 : Concevoir de nouvelles pages de produits

Pour afficher vos produits, vous pouvez créer des pages produits. Le didacticiel vidéo Beaver Themer fournit des instructions étape par étape sur la façon de personnaliser les pages de produit unique WooCommerce. 

Beaver Themer est un outil puissant pour étendre Beaver Builder dans un constructeur de pages WooCommerce. Vous pouvez appliquer des modèles à l'ensemble de votre site avec ce module complémentaire.  

 Cliquez sur Dispositions de thème > Ajouter nouveau dans Beaver Builder :

Ajout d'une mise en page de thème avec les paramètres du produit pour l'aider à agir comme un constructeur de pages WooCommerce.

Votre mise en page doit avoir un titre. Vous devez sélectionner votre mise en page et votre type avant de cliquer sur le bouton Ajouter une mise en page Themer.

Continuez à vous assurer que le nouveau design est appliqué à chaque page de produit lorsque vous passez à la page suivante. Dans la deuxième case, choisissez Tous les produits sous Emplacement, puis sélectionnez Produit :

Les paramètres de mise en page corrects de Themer pour utiliser Beaver Themer en tant que constructeur de pages WooCommerce.

Vous pouvez modifier votre mise en page avec Beaver Builder après avoir enregistré votre travail. En commençant dans le coin supérieur droit, cliquez sur le signe plus bleu. Une fois que vous avez cliqué sur Modèles, cliquez sur Nouveau :

L'emplacement du modèle de produit WooCommerce dans Beaver Thermer.

Remplacez la mise en page existante en sélectionnant Produit > Remplacer la mise en page existante. Quelques paramètres par défaut utiles sont déjà en place, ce qui transforme votre modèle en une page produit :

Modèle de produit par défaut de Beaver Builder

Ajouter ou supprimer des modules WooCommerce de votre mise en page de base est possible une fois que vous l'avez. Les modules WooCommerce sont accessibles via Modules > Modules thématiques > WooCommerce. Outre les évaluations de produits, les descriptions, les ventes incitatives et bien d'autres, vous aurez beaucoup d'options :

Utiliser les modules WooCommerce

Lors de la modification d'une mise en page, vous pouvez passer à l'affichage d'un autre produit à l'aide de la fonction Aperçu sous : dans Beaver Builder :

Aperçu de différents produits dans Beaver Builder

Grâce à cette fonctionnalité, vous pouvez vérifier l'apparence de chacun de vos produits lorsque vous les visualisez. Publiez votre page produit une fois que vous êtes satisfait de la conception et des modules qu'elle comprend. Vos pages de produits uniques seront désormais stylées dans le nouveau format.

Étape 3 : Créez une page de boutique WooCommerce

Il est temps de donner à la page de la boutique le même traitement que vos produits WooCommerce. Une disposition de boutique WooCommerce par défaut est très simple et peu excitante :

Disposition de la boutique par défaut de WooCommerce

Lors de la conception de votre page Boutique, Beaver Themer est un meilleur choix. Commencez par aller dans WooCommerce > Paramètres, cliquez sur l'onglet produit et assurez-vous que la page Boutique pointe vers Boutique ou toute autre page personnalisée que vous avez créée. Il affiche vos produits sous forme de page d'archive si vous en spécifiez une.

Sélectionnez Dispositions Themer > Ajouter nouveau dans Beaver Builder > Theme Builder, puis cliquez sur Ajouter nouveau. Choisissez l'option Mise en page du thème sous Type sur l'écran suivant :

Création d'une mise en page de boutique

L'écran suivant vous permettra de choisir l'emplacement de l'archive produit. Les produits de votre boutique seront affichés sur la page Boutique et les pages de catégories de produits. Si nécessaire, vous pouvez le modifier.

Personnalisation de la page d'archives de produits

En cliquant sur Lancer Beaver Builder, vous pourrez personnaliser votre mise en page. La page suivante s'affiche lorsque vous cliquez sur le signe plus en haut de l'écran, puis sur Modèles :

Utilisation d'un modèle Beaver Builder

Une nouvelle page de boutique peut être facilement créée à l'aide du modèle Produits. En utilisant tous les outils que nous avons couverts jusqu'à présent, vous pouvez apporter des modifications au modèle une fois qu'il est créé. 

Assurez-vous que la disposition de votre boutique correspond aux paramètres de style du module Posts en les ajustant jusqu'à ce qu'ils correspondent. 

En haut de l'écran, cliquez sur Terminé > Publier une fois les modifications enregistrées dans le module. 

La dernière chose que vous devez faire est de vous assurer que la page que vous avez désignée comme votre page Boutique apparaît dans le menu de navigation de votre site. Sinon, vous pouvez l'ajouter depuis la section Apparence > Menus du tableau de bord WordPress.

Étape 4 : Personnalisez davantage votre page de boutique avec les mises en page WooCommerce

Un module WooCommerce est également une excellente fonctionnalité de Beaver Builder qui en fait un excellent constructeur de pages WooCommerce. Il vous permet d'ajouter des parties de la fonctionnalité WooCommerce à n'importe quelle structure Beaver Builder sur votre site. Les options suivantes sont disponibles dans ce module :

  • Produits simples et multiples : 
  • Vous pouvez afficher les produits sélectionnés en fonction des ID ou des catégories de produits, ou vous pouvez afficher les produits en vente, les produits récents, les produits les mieux notés ou tout ce que vous voulez.
  • Panier : affiche le contenu du panier WooCommerce.
  • Paiement : affiche la page de paiement telle qu'elle apparaîtrait normalement.
  • Suivi des commandes : saisissez des informations sur les commandes dans ce formulaire.
  • Mon compte : cette page contient les informations normalement trouvées sur la page Mon compte, telles que les informations de compte, les commandes passées et les détails de l'adresse.
Dispositions WooCommerce dans Beaver Builder.

Liens directs

Conclusion

Créer une boutique en ligne qui représente efficacement votre marque est une entreprise difficile. Le processus peut cependant être simplifié à l'aide de Beaver Builder, un plugin pour WooCommerce.

Comme vous pouvez le voir, nous avons décrit quatre étapes importantes pour créer votre vitrine en utilisant à la fois WooCommerce et Beaver Builder :

  1. Créez une boutique en ajoutant des produits.
  2. Concevoir une nouvelle page produit.
  3. Créez une nouvelle page de boutique WooCommerce.
  4. Avec les mises en page WooCommerce, vous pouvez personnaliser davantage votre site de commerce électronique.

Souhaitez-vous savoir quoi que ce soit sur l'utilisation de Beaver Builder pour créer des pages de produits et de boutiques ? S'il vous plaît partagez vos pensées ci-dessous dans la section des commentaires!

Aishwar Babber

Aishwar Babber est une blogueuse passionnée et une spécialiste du marketing numérique. Il aime parler et bloguer sur les dernières technologies et gadgets, ce qui le motive à courir GizmoBase. Il exerce actuellement son expertise en marketing numérique, SEO et SMO en tant que spécialiste du marketing à temps plein sur divers projets. Il est un investisseur actif dans AffiliéBay et un réalisateur dans ImageStation.

Laisser un commentaire