Comment modifier la page du panier WooCommerce
Publié: 2023-11-21Vous voulez savoir comment modifier la page du panier WooCommerce ?
WooCommerce est un excellent outil pour créer des sites Web de commerce électronique. Il est facile à configurer, super extensible et hautement évolutif. Dès que vous l'installez sur votre site WordPress, il vous guide tout au long du processus d'installation et génère même les pages eCommerce essentielles sans que vous ayez à les créer à partir de zéro.
Malgré ses nombreux points positifs, il reste encore beaucoup à faire. Par exemple, l'abandon de panier est un problème courant auquel sont confrontées la plupart des entreprises de commerce électronique, car la conception de la page Panier n'est pas axée sur les conversions.
Heureusement, il existe plusieurs façons d'augmenter le taux de conversion et de réduire les abandons de panier dans une boutique WooCommerce.
Dans cet article, je vais vous montrer les étapes exactes que vous devez suivre pour améliorer la conception et les fonctionnalités de votre page WooCommerce Cart.
Passons au tutoriel.
Comment modifier la page du panier WooCommerce
Il existe plusieurs façons de modifier et de personnaliser la page du panier WooCommerce.
Vous pouvez utiliser les blocs WooCommerce par défaut, les constructeurs de pages WordPress ou les plugins WooCommerce tiers, ou vous pouvez ajouter du code CSS manuellement pour personnaliser la page.
Malheureusement, ces méthodes ne sont pas toujours efficaces et peuvent finir par causer plus de problèmes qu’elles n’en résolvent.
Par exemple, les codes CSS personnalisés peuvent endommager votre site, les constructeurs de pages et autres plugins peuvent ralentir votre site, et vous ne pouvez pas faire grand-chose avec les blocs WooCommerce par défaut.
Cependant, un plugin de commerce électronique bien conçu tel que Botiga Pro a été conçu pour ajouter des fonctionnalités puissantes aux magasins WooCommerce tout en garantissant une vitesse de chargement rapide.
Dans ce didacticiel, je vais vous montrer comment utiliser Botiga Pro pour effectuer des personnalisations dont il a été prouvé qu'elles réduisent les abandons de panier et augmentent les ventes. Nous effectuerons les étapes suivantes :
- Amélioration de la mise en page du panier
- Affichage d'un mini chariot latéral hors toile
- Permettre aux clients d'augmenter la quantité de produits dans le mini panier
- Affichage d'une icône de mini-panier flottante
- Affichage d'un bouton « Continuer mes achats » sur la page du panier
Commençons par installer Botiga pour votre site WordPress.
1. Installez le thème Botiga
Botiga est un thème WooCommerce gratuit, tandis que Botiga Pro est un plugin premium. Pour pouvoir utiliser le plugin, vous devez installer le thème gratuit sur votre site Web.
Dans cette section, je vais expliquer comment installer le thème gratuit, et dans la suivante, je vais vous montrer comment installer et activer le plugin premium.
Tout d’abord, téléchargez le thème Botiga gratuit depuis le référentiel de thèmes WordPress ou notre site Web.
Ensuite, accédez à votre tableau de bord WordPress, accédez à Apparence → Thèmes → Ajouter des thèmes , puis téléchargez et activez le thème :
![installer le thème woocommerce](/uploads/article/52318/87sP918BHvTarBnG.png)
Alternativement, vous pouvez accéder à Apparence → Thèmes → Ajouter des thèmes , taper Botiga dans la barre de recherche, puis installer et activer le thème :
![activation du thème botiga](/uploads/article/52318/ueM61htLXUnvLTtd.png)
2. Installez le plugin Botiga Pro
Botiga Pro est un puissant plugin de commerce électronique doté de fonctionnalités qui transformeront votre boutique WooCommerce pour le mieux.
Après avoir acheté le plugin, téléchargez-le sur votre ordinateur local, accédez à Plugins → Ajouter un nouveau , puis téléchargez et installez le plugin :
![installer le plugin botiga pro dans woocommerce](/uploads/article/52318/r8qdydMYJuGC3zLs.png)
Ensuite, vous devez activer la clé de licence qui se trouve dans votre compte aThemes.
Accédez à votre compte aThemes et copiez la clé de licence.
Ensuite, ouvrez votre tableau de bord WordPress et accédez à Botiga → Paramètres → Général → Licence Botiga Pro .
Insérez la clé de licence et cliquez sur le bouton Activer :
![clé de licence botiga](/uploads/article/52318/qDHKllOfvuN2QGzz.png)
C'est ça. À présent, le thème et le plugin sont activés sur votre site WordPress.
Cependant, avant de vous montrer comment modifier la page du panier WooCommerce, jetons un coup d'œil rapide aux sites de démarrage proposés par Botiga et Botiga Pro et pourquoi vous souhaiterez peut-être en importer un dans votre boutique WooCommerce.
3. Importer un site de démarrage (facultatif)
Les sites de démarrage sont des conceptions de sites Web prédéfinies qui peuvent être importées dans un site WordPress existant.
Il convient de noter que l'installation d'un site de démarrage n'est pas une condition préalable à Botiga (vous pouvez également créer une conception de site Web à partir de zéro, en utilisant les options de thème intégrées), mais je vous recommande d'en importer un, car cela améliorera votre boutique WooCommerce. significativement.
Les sites de démarrage Botiga sont dotés de conceptions épurées et professionnelles et de pages prédéfinies essentielles à votre entreprise. Avec Botiga Pro, vous avez accès à plusieurs sites de démarrage ciblant diverses niches de commerce électronique, notamment la beauté, les vêtements, les meubles, les bijoux et autres.
Vous pouvez prévisualiser les conceptions en accédant à Botiga → Sites de démarrage et en cliquant sur le bouton Aperçu qui apparaît sur la vignette de chaque site.
Choisissez le site de démarrage que vous aimez le plus, puis cliquez sur le bouton Importer :
![sites de démarrage botiga](/uploads/article/52318/XaSvVFxWMVnDzRgU.png)
Dès que vous cliquez sur le bouton Importer , une fenêtre contextuelle apparaîtra vous demandant de choisir si vous souhaitez importer l'intégralité du site Web (y compris toutes les images) ou simplement la mise en page avec des espaces réservés pour les éléments de contenu.
Par défaut, Botiga importe tous les widgets, paramètres de personnalisation et images du site de démarrage, mais vous avez la possibilité de désélectionner l'un d'entre eux si vous ne souhaitez pas les importer.
Lorsque vous avez terminé, cliquez sur le bouton Suivant et le processus d'importation commencera :
![importation de sites de démarrage Botiga](/uploads/article/52318/kqZlfBW4qdJMcknF.png)
Notez qu’il faudra quelques secondes à Botiga pour importer le site de démarrage.
4. Modifiez la page du panier WooCommerce
Voyons maintenant comment utiliser les fonctionnalités intégrées de la page Panier de Botiga pour réduire les abandons de panier et augmenter votre taux de conversion.
La première chose que vous devez faire est d'aller dans Apparence → Personnaliser → Panier :
![thème botiga du panneau de panier](/uploads/article/52318/6ma1OraiVtlzPe0I.png)
Vous remarquerez que certaines options du panneau Panier sont déjà activées. Conservez-les tels quels et procédez à l'activation ou à la modification des fonctionnalités suivantes :
je. Améliorer la mise en page du panier
L'objectif principal d'une page Panier est de déplacer les clients vers l'étape suivante de l'entonnoir de vente, qui est la page de paiement.
L'un des meilleurs moyens d'inciter doucement les visiteurs à passer à la caisse est d'afficher le bouton de commande à un endroit bien en vue sur la page du panier.
Cependant, la page WooCommerce Cart par défaut affiche le bouton de paiement sous les produits. Cela signifie que les clients doivent faire défiler vers le bas pour le voir :
![](https://s.stat888.com/img/bg.png)
![page de panier woocommerce par défaut](/uploads/article/52318/0icTE6I6jLddkVgt.png)
Avec Botiga, vous pouvez modifier l'emplacement du bouton sur le côté droit de la page, ce qui améliore grandement sa visibilité :
![mise en page du panier botiga](/uploads/article/52318/wjm2fVZrgY93C7Je.png)
Tout ce que vous avez à faire est d'aller dans Apparence → Personnaliser → Panier et sous l'en-tête Mise en page, sélectionnez la deuxième mise en page :
![changement de mise en page du panier botiga](/uploads/article/52318/Bk8Y2r4R2ku2CTv0.png)
Notez qu'il s'agit d'une fonctionnalité du thème gratuit Botiga, il est donc également disponible sans Botiga Pro.
ii. Afficher un mini chariot latéral hors toile
Un mini panier est une fenêtre pop-up qui apparaît à l'écran lorsqu'un client clique sur l'icône du panier dans le menu :
![mini panier par défaut woocommerce](/uploads/article/52318/Yx3OR9d3T668kZvW.png)
L'ajout d'un mini panier à votre boutique WooCommerce encourage les clients à accéder directement à la page de paiement.
Dans le panneau Panier du personnalisateur, accédez à Style de mini panier et sélectionnez la deuxième mise en page, comme indiqué dans l'image ci-dessous.
Ensuite, assurez-vous que le bouton « Ouvrir sur Ajax Ajouter au panier » est activé. Cela permettra aux visiteurs d'ajouter des produits au mini panier sans avoir à recharger la page entière et sans perturber l'expérience d'achat :
![ouvrir sur ajax ajouter au panier option botiga](/uploads/article/52318/dJ8CQC5Fx1sq8DJR.png)
Ensuite, cliquez sur le bouton Publier et vérifiez le design du mini panier de votre site :
![mini chariot hors toile botiga](/uploads/article/52318/jGGBXoQrauvQTECr.png)
Important : pour que l'option Ajouter au panier Ajax fonctionne sur le mini panier, vous devez activer l'option Ajouter au panier WooCommerce Ajax par défaut.
Pour ce faire, accédez à WooCommerce → Paramètres → Produits → Comportement d'ajout au panier , cochez l'option « Activer les boutons d'ajout au panier AJAX sur les archives » et enregistrez vos modifications :
![woocommerce ajax ajouter au panier](/uploads/article/52318/6dyhzvHPKTEETJTM.png)
iii. Permettre aux clients d'augmenter la quantité de produits dans le mini panier
Permettre aux clients d'augmenter la quantité de produits dans le mini panier contribuera à augmenter les ventes de votre magasin.
Tout ce que vous avez à faire est d'activer l'option Quantité du mini panier dans le panneau Panier du personnalisateur :
![augmenter la quantité du mini panier botiga](/uploads/article/52318/Zvr8c0CjsV2jhHKh.png)
Voici à quoi ressemblait le mini panier sur notre site de démonstration avant d'activer l'option Quantité du mini panier :
![mini chariot hors toile botiga](/uploads/article/52318/jGGBXoQrauvQTECr.png)
Après avoir activé l'option, le mini panier ressemble à ceci :
![augmenter la quantité de produits dans le mini panier](/uploads/article/52318/Lo6t3UHUCfarvSUF.png)
iv. Afficher une icône de mini-panier flottant
Comme son nom l'indique, un mini panier flottant est une icône de panier qui flotte sur l'écran et encourage les clients à accéder à la page Panier :
![bouton de chariot flottant botiga](/uploads/article/52318/pZqR1kpeK7eGhVPc.png)
Pour ajouter une icône de mini panier flottante à votre boutique WooCommerce, ouvrez le panneau Panier et assurez-vous que le deuxième style est choisi sous Style de mini panier.
Ensuite, activez l'option Icône du mini-chariot flottant et procédez à la configuration de l'icône en cliquant sur le bouton Paramètres du mini-chariot flottant :
![activation de l'icône de mini-panier flottant](/uploads/article/52318/UNidj5nBcMGJxAIh.png)
De nouvelles options apparaîtront dans le Customizer où vous pourrez choisir une icône de mini panier, définir ses règles d'affichage, et modifiez son style (par exemple couleur, couleur d'arrière-plan, rayon de bordure, ombre, etc.), sa taille, sa position et sa distance par rapport au coin de la page :
![Paramètres de l'icône du panier flottant Botiga](/uploads/article/52318/snzASsJI0trq6DAi.png)
v. Afficher un bouton « Continuer mes achats » sur la page du panier
Comme je l'ai mentionné précédemment, l'objectif principal de la page Panier est de déplacer les clients vers la page de paiement.
L'ajout d'un bouton « Continuer les achats » à la page Panier peut sembler un conseil contradictoire, mais il est connu pour augmenter considérablement les taux de conversion de certains magasins WooCommerce.
Je vous recommande donc fortement d’expérimenter un bouton Continuer mes achats. Activez-le sur votre boutique et voyez si cela améliore votre taux de conversion.
Pour ajouter un bouton Continuer les achats à votre page Panier, accédez au panneau Panier dans le personnalisateur, activez l'option Afficher le bouton Continuer les achats et modifiez le texte du bouton si vous ressentez le besoin de :
![afficher le bouton Continuer mes achats dans Botiga](/uploads/article/52318/vPnm8eBE7qfmqxjj.png)
Conclusion
La personnalisation de la page Panier de votre boutique WooCommerce est un excellent moyen de réduire les abandons de panier et d'améliorer votre taux de conversion.
Bien qu'il existe plusieurs façons de personnaliser la page du panier WooCommerce, toutes les techniques ne feront pas une différence dans vos revenus.
Dans cet article, j'ai couvert cinq personnalisations de page de panier qui se sont avérées efficaces pour augmenter les taux de conversion :
- Utilisez une disposition horizontale pour la page Panier afin de rendre le bouton de paiement plus facile à trouver.
- Affichez un mini panier latéral hors toile qui comprend un bouton de paiement.
- Permettez aux clients d’augmenter la quantité de produits dans le mini panier.
- Affichez une icône de mini-panier flottante pour encourager les clients à accéder à la page Panier ou Paiement.
- Expérimentez avec un bouton « Continuer les achats » pour voir s'il fonctionne pour votre magasin.
Avec Botiga Pro, vous pouvez facilement mettre en œuvre toutes ces techniques, sans avoir à écrire de code.
Il faudra quelques semaines pour constater une réduction des abandons de panier et une augmentation de votre taux de conversion.
En attendant, si vous avez des questions sur la façon de modifier la page du panier WooCommerce, faites-le nous savoir dans la section commentaires ci-dessous.