Comment personnaliser le Panier WooCommerce avec Elementor ?

Vous utilisez Elementor et vous souhaiter modifier l’aspect de la page panier WooCommerce ? Elementor propose un widget Panier qui permet de personnaliser a votre guide la page panier de votre boutique WooCommerce pour qu’elle réponde a vos besoins. Le connaissez-vous ?

Avez-vous déjà souhaité pouvoir créer et personnaliser la page du panier avec Elementor ?

Depuis novembre 2021, Elementor intègre de nouvelles fonctionnalités dédiées a WooCommerce, notamment des widgets dédiés pour les pages panier, caisse et mon compte de votre boutique.

Avant, vous dépendiez de votre thème WooCommerce pour contrôler ces pages clés, maintenant il suffit de contrôler la la mise en page et le contenu de ces éléments avec Elementor.

Un très gros avantage qu’il serait dommage de ne pas exploiter. En effet, le widget « Cart » permet de créer une page panier sur mesure pour WooCommerce avec Elementor. Une page que vous pouvez donc personnaliser a votre guise en ajoutant des informations complémentaires pour augmenter vos ventes et votre panier moyen.

Comment fonctionne le widget Panier d’Elementor ?

Le panier d’achat de votre boutique est un élément essentiel de l’expérience utilisateur sur votre boutique en ligne. Le panier doit être simple et permettre a vos clients de passer commande en un rien de temps.

Avec le nouveau widget Panier d’Elementor, vous pouvez utiliser l’interface de conception visuelle d’Elementor pour personnaliser entièrement votre page de panier afin de vous assurer qu’elle s’accorde avec le reste de l’image de marque de votre boutique et qu’elle est étudiée pour optimiser vos ventes.

Voici quelques exemples de ce que vous pouvez faire avec le widget Panier (Cart) :

  • Choisir différentes mises en page du panier, comme une mise en page à une ou plusieurs colonnes.
  • Personnaliser toutes les couleurs et la typographie de chaque élément du votre panier.
  • Configurer la mise en page et l’espacement de chaque élément, en ajustant par exemple l’espacement des lignes entre certaines informations du panier.
  • Modifier les étiquettes des zones clés de votre panier, ainsi que le texte des différents boutons.
  • Personnaliser les formulaires de votre panier, tels que le formulaire des codes promos et le calculateur de frais de port.

Comme pour toutes les pages construites avec Elementor, vous avez également la possibilité de personnaliser l’apparence de votre panier sur différents appareils (smartphone, tablette, ordinateur), ce qui vous permet de vous assurer que chaque acheteur bénéficie d’une expérience agréable, qu’il consulte votre boutique depuis un ordinateur de bureau, une tablette ou un appareil mobile.

Comment utiliser le widget Panier (Cart) dans Elementor

Maintenant, entrons dans le guide étape par étape pour savoir comment vous pouvez commencer à utiliser le widget panier d’Elementor sur votre boutique WooCommerce.

1. Modifier la page panier par défaut de votre boutique dans Elementor

Lorsque vous créez une boutique WooCommerce, WooCommerce crée automatiquement une page de panier pour votre boutique qui utilise le shortcode « [woocommerce_cart] » pour afficher le panier WooCommerce.

  • Allez dans la liste de vos pages depuis votre tableau de bord ( Page → Toutes les pages ).
  • Trouvez la page intitulée « Panier ». Elle sera également marquée comme « Page du panier ».
modifier la page panier wordpress
Page Panier dans la liste des Pages WordPress
  • Une fois que vous l’avez trouvée, cliquez sur le bouton Modifier pour ouvrir l’éditeur WordPress.
  • Ensuite, dans l’éditeur, cliquez sur l’option « Modifier avec Elementor » pour ouvrir l’interface d’Elementor.

Remplacer le shortcode WooCommerce Cart par le widget Elementor Cart

Lorsque vous ouvrez pour la première fois la page de panier existante de votre boutique WooCommerce dans Elementor, vous verrez le code court [woocommerce_cart] dans un widget de l’éditeur de texte Elementor.

retirer le shortcode panier de woocommerce
shortcode woocommerce_cart
  • La première étape est de supprimer ce shortcode et le widget qui l’accompagne.
  • Ensuite, nous allons ajouter a sa place le widget cart de Elementor.
ajout d'un widget panier woocommerce avec elementor
widget panier woocommerce dans elementor

Vous êtes maintenant prêt à personnaliser le design de votre page de panier avec Elementor & WooCommerce.

Remarque : je vous recommande d’ajouter quelques articles à votre panier avant de modifier cette page pour avoir un aperçu du panier « plein ». Sans quoi, vous verrez votre panier dans son état vide lorsque vous travaillerez dans Elementor.

Pour cela, rendez-vous sur l’accueil de votre boutique, ajoutez plusieurs produits dans votre panier et revenez sur l’éditeur de page. Raffraichissez la pour voir la modification du panier qui s’est remplis.

Modification de la page panier woocommerce avec elementor
Modification de la page panier woocommerce avec elementor

A l’inverse, si vous souhaitez revenir à l’aperçu d’un panier « vide », il vous suffit de retirer ces articles du panier dans la partie frontale de votre site, puis de recharger l’interface Elementor.

Configurez la mise en page de votre panier

Pour contrôler la mise en page, la conception et les autres comportements de votre panier, vous pouvez ouvrir ses paramètres dans la barre latérale comme vous le feriez pour n’importe quel autre widget Elementor.

Afficher le panier WooCommerce sur 2 colonnes avec Elementor

Commencez par choisir d’utiliser une mise en page à une ou deux colonnes dans le menu déroulant « Layout » de l’onglet « Général ».

L’utilisation d’une disposition sur deux colonnes est intéressante, car elle permet de placer les totaux des paniers en haut, ce qui les rend plus visibles lorsque vous naviguez sur des appareils plus grands.

Fixer la colonne de droite du panier WooCommerce avec Elementor

Vous pouvez également faire en sorte que la colonne des totaux des paniers soit fixe lors du défilement en activant le commutateur « Sticky Right Column ». Vous pouvez également ajouter un décalage pour vous assurer que cette colonne ne se superpose pas à d’autres contenus.

Modifier le texte update cart de WooCommerce avec Elementor

Ensuite, vous pouvez utiliser l’onglet « Order Summary » pour ajuster le texte du bouton « Update cart » par défaut pour le remplacer par exemple par « Mettre à jour le panier ».

Modifier le bouton proceed to checkout de WooCommerce avec Elementor

Dans l’onglet « Totals », vous disposez d’options similaires pour ajuster les différents titres et textes de la colonne de droite et leur alignement, tels que le texte du bouton « Proceed to checkout ».

Modifier l’apparence du panier WooCommerce quand il est vide avec Elementor

Lorsque le panier WooCommerce est vide il s’affiche sur une seule colonne avec un message de type : « Votre panier est actuellement vide. »

personnalisation du panier vide de woocommerce avec elementor
personnalisation du panier vide de woocommerce avec elementor

Vous pouvez modifier cette apparence en commençant par activer l’option « Customize empty cart » dans l’onglet « Additional Options ». Vous pourrez alors choisir le modèle elementor de votre choix.

Personnaliser l’apparence du calculateur d’expédition WooCommerce avec Elementor

Si vous avez activé le calculateur d’expédition de votre boutique WooCommerce, vous pouvez également la configurer dans les paramètres du widget. Vous pouvez activer la calculatrice d’expédition dans les paramètres de WooCommerce en allant dans WooCommerce → Réglages → Expédition → Options d’expédition et en cochant la case permettant d’activer la calculatrice d’expédition sur la page du panier.

Activer la mise à jour automatique du panier WooCommerce avec Elementor

Enfin, les paramètres d’options supplémentaires vous donnent une bascule pour activer les mises à jour automatiques du panier. Au lieu de demander aux acheteurs de cliquer sur le bouton Mettre à jour pour appliquer leurs modifications il se mettra a jour automatiquement quand ils font des modifications.

Ajustez le style de votre panier

Vous pouvez maintenant configurer le style et le design de votre panier en allant dans l’onglet Style des paramètres du widget. Vous y trouverez un certain nombre de paramètres différents, notamment les sections, la typographie, les formulaires, etc.

personnalisation des éléments du panier woocommerce
personnalisation des éléments du panier woocommerce

Voici les options de style générales que vous trouverez dans chaque zone :

  • Sections : vous pouvez contrôler le style général des trois parties du widget du panier. Par exemple, vous pouvez appliquer un arrière-plan à l’ensemble du panier ou ajouter une ombre portée.
  • Typography : vous pouvez contrôler la typographie générale et les couleurs des étiquettes clés telles que les titres, les descriptions, les liens, etc.
  • Forms : vous pouvez contrôler le style du formulaire des champs des codes promos et du formulaire des champs d’expédition (si vous avez activé le calculateur d’expédition sur la page du panier). Par exemple, vous pouvez utiliser le paramètre « Rows Gap » pour modifier l’écart entre les lignes et créer un espace entre les champs du formulaire.
  • Buttons – vous pouvez donner du style aux boutons « Appliquer le code promo » et « Mettre à jour le panier » avec toutes les options de style de bouton Elementor que vous connaissez.
  • Order Summary – vous pouvez contrôler le style des produits dans le panier et du résumé de la commande.
  • Totals – vous pouvez contrôler le design de la section « Totaux du panier », qui indique le coût total de la commande de l’acheteur.
  • Checkout Button – vous pouvez contrôler le design du bouton de paiement. Vous devez faire en sorte qu’il soit attrayant pour que les acheteurs ne le manquent pas, car c’est l’action qu’ils doivent effectuer.
  • Customize – vous pouvez obtenir un contrôle plus précis du résumé de la commande, du code promo et des totaux. Si vous ajoutez ces options, vous obtiendrez des paramètres supplémentaires axés sur ces zones. Par exemple, vous pouvez utiliser cette option pour que la section « totaux » se distingue du reste de votre panier par une couleur d’arrière-plan distincte, une ombre portée, une bordure, etc.

Personnalisez la version mobile du panier WooCommerce avec Elementor

Lorsque vous utilisez le widget Elementor Cart, votre panier est par défaut adapté aux mobiles. Cependant, comme pour les autres widgets et designs Elementor, vous pouvez également ajuster manuellement l’apparence de votre panier sur différents appareils afin de créer la meilleure expérience possible pour chaque acheteur.

passer elementor en version mobile ou tablette
activer mode responsive elementor

Pour ce faire, ouvrez le mode d’édition « responsive » et vous verrez des icônes de périphérique à côté des paramètres que vous pouvez modifier pour différents périphériques.

Modifier la version mobile du panier WooCommerce dans Elementor
Version mobile du panier WooCommerce dans Elementor

Par exemple, vous pouvez modifier l’écart entre les rangées selon qu’une personne utilise un ordinateur de bureau ou un smartphone ou une tablette, ou ajuster la taille de la police de différents éléments.

Ajouter des informations complémentaires au panier WooCommerce avec Elementor

Vous avez maintenant votre panier WooCommerce conçu et personnalisé avec Elementor. Libre a vous d’ajouter de nouveaux blocs de texte ou de contenu avant ou après celui-ci.

De nombreuses boutiques en profitent par exemple pour mettre en avant des produits complémentaires, des accessoires ou des promos pour augmenter encore un peu le prix du panier de l’internaute.


Cet article est une traduction du tuto officiel par Elementor : Source
J’espère avoir répondu a vos questions, n’hésitez pas a réagir en commentaire si besoin !

Gregory

Agitateur de Stratégies, addict à WordPress depuis 2003, fada de Google depuis 1998. Incubateur Digital, j'accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l'optimisation de leurs sites WordPress. Basé à Aix-en-Provence, je suis à l'écoute de votre projet si vous avez besoin d'un expert WordPress.

Vous aimerez aussi

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.