Comment configurer un panier d'achat WordPress avec WooCommerce
Publié: 2022-10-28Vous avez donc presque terminé de créer votre tout nouveau site Web d'achat WooCommerce. Vous avez terminé la construction de la mise en page du produit principal du marché, du menu de sélection des catégories de produits et du pied de page d'en-tête avec des repères de navigation fonctionnels.
L'aspect le plus important de tout site Web de commerce électronique est la possibilité de rediriger et d'aider les clients à ajouter des produits à leur panier depuis n'importe où sur le site Web, jusqu'au processus de paiement jusqu'à la confirmation de la commande.
Cela peut sembler une fonction difficile à intégrer dans les sites Web de commerce électronique WordPress, mais en réalité, ce n'est pas le cas. WordPress a une grande communauté qui soutient son développement, et vous pouvez ajouter cette fonction à votre site Web en utilisant un plugin de panier d'achat WooCommerce qui fonctionne de manière transparente avec n'importe quel thème WordPress WooCommerce .
Table des matières
Comment fonctionne le panier WooCommerce ?
Lorsque des produits sont ajoutés au panier dans WooCommerce, ils sont ajoutés à une liste séparée avec la variante et la quantité choisies par le client. Cela aide les utilisateurs à garder une trace de leurs produits sélectionnés, et cette fonction leur permet également de voir automatiquement le prix total calculé de la commande qu'ils passeront à la caisse. Et il offre également aux utilisateurs la possibilité de modifier la page du panier d'achat WooCommerce.
Les avantages d'un panier d'achat dans WooCommerce
L'utilisation d'un panier d'achat dans une plateforme d'achat WooCommerce présente de grands avantages. Avant de passer à un guide étape par étape sur la façon de créer une page de panier d'achat WooCommerce, certains d'entre eux sont :
- Conçu pour aider les clients à sélectionner un ou plusieurs produits à acheter et à continuer à parcourir d'autres produits.
- Il aide à calculer la valeur totale des produits au fur et à mesure que vous les ajoutez au panier.
- Affiche la quantité et les variations d'un produit que vous avez sélectionné et calcule la valeur totale en conséquence.
- Il peut rediriger les clients vers la page de paiement en un clic.
- Il peut être livré avec des fonctionnalités supplémentaires de panier d'achat WooCommerce telles que l'historique des commandes, l'enregistrement d'un panier pour plus tard, etc.
- Les utilisateurs peuvent obtenir un plug-in de panier WooCommerce fourni avec des éléments de conception époustouflants.
Comment ajouter un panier à WooCommerce
Passons maintenant au processus d'ajout d'un panier à WooCommerce. À la fin de cet article, vous pourrez commencer à vendre une grande variété de produits avec une plateforme de commerce électronique fonctionnelle qui propose le meilleur plugin de panier d'achat pour WordPress.
Étape 1 : Installation des pré-requis
Pour commencer avec la création de panier et le processus de configuration du panier WooCommerce, vous devez avoir certains éléments de plug-in installés et activés sur votre compte WordPress. Pour cela, vous aurez besoin des dernières versions de WordPress , WooCommerce , Elementor page builder et du plugin ShopReady WooCommerce Shop Builder.
Pour installer les plugins, connectez-vous à votre compte WordPress, rendez-vous sur le tableau de bord WordPress > Plugins > Ajouter nouveau et recherchez les plugins un par un, puis cliquez sur Et maintenant, cliquez sur Activer lorsque le processus d'installation est terminé. Suivez la même procédure pour installer tous les plugins et programmes requis.
Étape 2 : Utiliser un thème de panier d'achat WooCommerce
Maintenant, pour poursuivre notre processus de création de fonctions de panier, vous devez installer un thème WooCommerce fonctionnel pour certaines fonctionnalités supplémentaires. Dans ce cas, nous pouvons utiliser un modèle de panier d'achat WooCommerce au lieu d'utiliser un thème WordPress WooCommerce .
Cela réduira considérablement le temps nécessaire à la personnalisation et à la publication du site Web.
Pour installer un modèle de commerce électronique fonctionnel sur votre site Web, commencez par créer une nouvelle page et donnez-lui un titre à partir du tableau de bord WordPress > Pages > Ajouter nouveau et cliquez sur Vous serez redirigé vers l' écran Elementor Editor . Vous trouverez ici l' icône de la bibliothèque de modèles ShopReady - Elementor . Cliquez sur l'icône pour accéder à la bibliothèque de modèles. Choisissez n'importe quel modèle qui correspond à l'identité de votre marque et cliquez sur Insérer pour appliquer le modèle.
Attendez que le modèle termine son processus d'importation.
Devrait ressembler à quelque chose comme ça.
Votre section de produits peut sembler vide si vous n'avez pas ajouté de produits à WooCommerce. Vous devez ajouter immédiatement les produits que vous essayez de présenter sur votre plateforme WooCommerce. Pour ce faire, vous pouvez suivre notre guide précédent sur – Comment ajouter des produits à une boutique WooCommerce .
Chaque produit WooCommerce peut être personnalisé avec le titre du produit, la description, le prix, le prix réduit, les images, les métadonnées, les variations, etc. à partir du tableau de bord du produit WooCommerce.
Étape 3 : Personnalisation de la page produit
Pour commencer le processus de personnalisation de votre page produit, rendez-vous sur le tableau de bord ShopReady – WooCommerce Builder et sélectionnez l'option Modèles. À partir de là, vous pouvez créer une page de produit de base à utiliser comme point de départ pour vos personnalisations. Activez la catégorie Modèle de produit, puis recherchez la configuration Produit unique dans cette catégorie. Maintenant, sélectionnez l'icône d'édition dans la barre d'outils.
Et après cela, l'écran qui affiche l' éditeur Elementor se chargera pour vous. Un simple clic sur le signe plus visible dans le coin supérieur droit de l'interface Elementor vous permettra de démarrer le processus de personnalisation de la page. En ce qui concerne l'apparence de votre page et les widgets que vous souhaitez utiliser, vous disposez d'une grande variété d'options en ce qui concerne les sections Elementor que vous pouvez y insérer.
Étape 3 : Utilisation des widgets Elementor pour personnaliser la page produit de la boutique WooCommerce
Ajout d'un titre de produit
Puisque vous avez déjà établi une structure de section principale en utilisant Elementor pour votre page de produit WooCommerce, vous pouvez maintenant commencer le processus d'ajout d'un titre de produit. Vous devrez utiliser l'approche glisser-déposer pour positionner le widget Titre du produit où vous le souhaitez sur la page du produit afin d'atteindre cet objectif.
Affichez le bon titre de produit en accédant à la barre de navigation Elementor, en sélectionnant l'onglet Contenu , puis en recherchant les choix d' actualisation de l'éditeur dans le sous-menu qui vient après cela. Pour sélectionner le produit approprié, cliquez sur son nom dans le menu déroulant situé sous Demo Product.
Vous devrez accéder au tableau de bord des produits WooCommerce et y ajouter ou modifier les informations essentielles sur le produit afin que ces données affichent le bon titre de produit. Cela peut être fait soit en cliquant sur les boutons "Ajouter" ou "Modifier".
Ajout d'une image en vedette à la page produit
Ensuite, vous voudrez vous assurer que votre produit possède à la fois une galerie d'images et une image en vedette. Pour ce faire, vous pouvez utiliser l'un des différents widgets d'image inclus dans le plugin tout-en-un pour le commerce électronique fourni avec Elementor.
Pour les besoins de cette démonstration, nous utiliserons le widget ShopReady Thumbnail with Zoom, qui, comme son nom l'indique, dispose d'une fonction de zoom. Si vous utilisez ce widget, vous pourrez afficher une version zoom survolée du produit WooCommerce de l'image de votre produit à vos clients chaque fois qu'ils déplacent leur souris sur l'image de votre produit.
De la même manière qu'auparavant, vous pouvez sélectionner l'image de produit appropriée en cliquant sur l'onglet Contenu de l'option Produit de démonstration.
Ajout d'un bloc pour le widget de tarification
Le bloc de prix du produit est un autre élément essentiel qui devrait être présent sur votre page de produit de commerce électronique. Pour ce faire, vous devrez modifier les attributs du produit WooCommerce avec les ajustements appropriés et utiliser le widget ShopReady Price, qui doit être positionné sous le titre du produit.
Pour vous assurer que le prix correct est affiché, choisissez le titre du produit dans le menu déroulant de l'option Produit de démonstration de l'onglet Contenu.
Ajout de la description du produit
En utilisant ce widget de description de produit des modules complémentaires de produit WooCommerce, vous avez non seulement la possibilité d'ajouter des descriptions de produits, mais vous avez également le pouvoir de personnaliser fortement les descriptions. Grâce à l'utilisation de l'onglet style, vous aurez la possibilité de modifier la façon dont la description du produit sera affichée au grand public.
Ajout de la fonctionnalité Ajouter au panier
La possibilité pour les clients d'ajouter des articles supplémentaires à leur panier avant de passer à la page de paiement est facilitée par l'option "Ajouter au panier", qui est une autre fonctionnalité extrêmement cruciale.
L'utilisation du widget ShopReady Ajouter au panier vous permettra d'équiper la page de votre boutique de commerce électronique d'une version puissante de la fonction Ajouter au panier . À l'aide de ce widget, vous pourrez offrir à vos clients la possibilité d'ajuster la quantité d'un produit qu'ils ont dans leur panier directement à partir du bloc Ajouter au panier.
Vous pouvez également modifier l'apparence du bouton d'ajout au panier d'Elementor via l'onglet Style d'Elementor de style de produit WooCommerce. Ici, vous pouvez modifier la police, la couleur, l'arrière-plan, la marge, le remplissage et d'autres attributs.
Ajout de métadonnées à la page produit
La mise en œuvre d'un filtre de produit WooCommerce qui utilise les métadonnées et les attributs de produit que vous avez ajoutés à WooCommerce lors de l'ajout de produits est quelque chose que vous devez faire si vous souhaitez offrir à vos consommateurs une expérience d'achat plus satisfaisante.
Recherchez le widget ShopReady Meta et placez-le juste en dessous du bouton "ajouter au panier" sur la page consacrée à votre produit. Cela vous permettra d'afficher les informations en question.
Lorsque vous sélectionnez le titre de produit approprié dans le menu déroulant situé dans l'option Produit de démonstration de l'onglet Contenu, vos balises et métadonnées de produit doivent être affichées avec précision.
Ajout de boutons de partage de médias sociaux à la page produit
En utilisant un bloc de bouton de partage de médias sociaux simple, vous pouvez permettre à vos consommateurs de partager vos publications de produits sur les médias sociaux directement à partir de la page de produit WooCommerce pour l'article qu'ils ont acheté. Ce que vous pouvez produire en utilisant uniquement la fonctionnalité de glisser-déposer offerte par le widget Elementor Social Share.
Directement à partir de l'onglet Contenu, le bloc peut être personnalisé avec toutes les icônes de médias sociaux, le texte et les liens partageables du choix de l'utilisateur. De plus, l'onglet Elementor Style permet aux utilisateurs de modifier la présentation visuelle des blocs de partage social s'ils le souhaitent.
Et avec cela, vous avez terminé avec les principes fondamentaux de la personnalisation des pages de produits WooCommerce.
Étape 4 : Ajouter des produits liés à WooCommerce
L'utilisation du widget Produits connexes inclus dans les modules complémentaires du produit WooCommerce vous permettra d'afficher des produits connexes sur votre page produit, ce qui constitue une excellente stratégie pour stimuler les ventes en ligne. À l'aide du widget ShopReady Related Products, vous pouvez facilement créer un magnifique bloc de curseur de produit divisé en sections.
Pour utiliser le widget, faites-le simplement glisser et déposez-le sous le bloc de produit unique, puis sélectionnez les produits spécifiques que vous souhaitez présenter sur votre page de produit unique à partir de l' onglet Contenu .
Étape 5 : Ajouter des champs de paiement personnalisés WooCommerce
Comme mentionné précédemment, il s'agit d'un aspect important d'une plate-forme de commerce électronique fonctionnelle. Avec un constructeur de boutique WooCommerce comme ShopReady, vous pouvez facilement utiliser un shortcode de panier WooCommerce et implémenter un panier de commerce électronique fonctionnel de cette façon, ou vous pouvez utiliser un widget ShopReady pour appliquer cette fonctionnalité.
Pour avoir un panier fonctionnel, vous devez d'abord ajouter le widget " Ajouter au panier" sur la page du produit. Ce que nous avons déjà fait. Alors, revenons en arrière et créons la page du panier elle-même, où tous les produits seront affichés une fois qu'ils auront été ajoutés au panier.
ShopReady – WooCommerce Shop Builder permet aux utilisateurs de choisir entre deux modèles de panier différents, qui peuvent être utilisés à partir du tableau de bord ShopReady . Dans le tableau de bord ShopReady, cliquez sur le menu Modèles pour activer et modifier un modèle de panier prédéfini WooCommerce fourni par ShopReady.
En créant un nouveau modèle de panier WooCommerce ou en modifiant un modèle existant, vous serez redirigé vers l'écran Elementor Editor.
À partir de là, vous pouvez simplement ajouter le widget ShopReady Cart , et votre page de panier prendra sa forme automatiquement, et la création d'un panier WordPress sans plugin est aussi simple qu'un processus avec ShopReady. Il ne nécessite aucun plugin ou outil supplémentaire.
Si vous avez déjà ajouté des produits à votre panier, il devrait ressembler à ceci.
Et voilà, une page de panier WooCommerce fonctionnelle avec un bouton de panier fonctionnel. Vous avez également la possibilité de personnaliser davantage la page du panier avec Elementor. Avec Elementor, vous êtes libre de modifier chaque aspect de la page du panier, des couleurs d'arrière-plan aux paramètres de typographie Elementor.
Vous pouvez également utiliser un shortcode de panier d'achat WooCommerce. Dans ce cas, vous devrez utiliser le widget Elementor ShortCode.
Lorsque vous avez terminé de personnaliser la page de votre boutique, assurez-vous de cliquer sur Publier/Mettre à jour pour que les modifications soient visibles pour vos visiteurs et clients.
Conclusion
L'ensemble du processus de création d'un bouton d'ajout au panier personnalisé WooCommerce peut sembler une tâche ardue, mais au fur et à mesure que vous progressez dans ce guide, vous verrez que le processus de création de cette fonction technique n'est pas difficile du tout avec le bon ensemble d'outils. Le ShopReady WooCommerce Shop Builder est un package complet qui offre tous les outils dont vous avez besoin pour créer une plate-forme de commerce électronique robuste à partir de zéro.
Et si vous rencontrez des problèmes avec ShopReady ou le processus de création de panier, vous pouvez toujours consulter la documentation du panier WooCommerce .
Foire aux questions concernant les paniers d'achat WooCommerce
WordPress a-t-il un panier ?
WordPress CMS est une plate-forme d'hébergement de sites Web barebones. Il n'inclut aucun panier d'achat ni aucune fonctionnalité liée au commerce électronique. Mais comme il s'agit d'une plate-forme open source, vous êtes libre d'utiliser l'un de ses outils, plugins ou modules de commerce électronique créés par la communauté pour ajouter un panier au site Web WordPress.
WooCommerce a-t-il un panier ?
Oui, le plugin de base WooCommerce est livré avec un bouton de panier fonctionnel et une page de panier. Mais il est de nature très minimaliste. Pour pimenter la page du panier, vous pouvez utiliser n'importe quel nombre d' extensions WooCommerce , ou vous pouvez tirer pleinement parti des options de personnalisation du constructeur de pages Elementor et ShopReady WooCommerce pour les pages de panier de commerce électronique. Des icônes de panier WooCommerce aux mises en page détaillées, tout peut être personnalisé avec ShopReady.
Comment créer une page de paiement personnalisée dans WooCommerce ?
Téléchargez et installez ShopReady – WooCommerce Shop Builder. Créez maintenant un nouveau modèle de page de paiement WooCommerce à partir du tableau de bord ShopReady. Vous serez redirigé vers l'éditeur Elementor, à partir de là, vous pouvez utiliser le widget ShopReady Checkout pour créer une page de paiement personnalisée fonctionnelle dans WooCommerce.