Comment concevoir un panier WooCommerce dans Elementor [sans codage]

Publié: 2022-01-11

Vos clients abandonnent leur panier WooCommerce , à mi-parcours de leur achat ? Saviez-vous qu'une raison extrêmement courante derrière cela peut être une page de panier désorganisée avec laquelle les utilisateurs trouvent difficile de faire leurs achats ? Mais plus besoin de s'inquiéter; avec la dernière mise à jour d' Essential Addons for Elementor , nous vous apportons la solution la plus simple pour réduire les taux d'abandon de panier et augmenter les ventes.

WooCommerce cart

Dans ce blog, nous vous expliquerons les raisons pour lesquelles la conception personnalisée de la page de panier WooCommerce sur le site Web de votre magasin est la meilleure approche à adopter. Mais pas seulement cela, nous vous présenterons également notre nouvel élément Essential Addons conçu uniquement pour vous aider à créer votre panier conçu par des professionnels qui ne manquera pas d'apporter des ventes. Alors, sans plus tarder, plongeons-y et découvrons-en plus.

Pourquoi devriez-vous concevoir une page de panier WooCommerce personnalisée ?

Les recherches montrent que près de 7 clients sur 10 abandonneront votre panier et ne reviendront jamais, même s'ils sont satisfaits des produits que vous vendez. Et comme nous l'avons mentionné au tout début, l'une des principales raisons en est une page de panier déroutante ou encombrée que les clients n'ont pas réussi à parcourir.

Parfois, vos clients potentiels peuvent ne pas être en mesure de revenir à la page d'achat et d'ajouter d'autres produits dont ils ont besoin. Alors qu'à d'autres moments, il peut être difficile de joindre un code de coupon de vente qu'ils espéraient utiliser. Les acheteurs peuvent même devenir frustrés lorsqu'ils ne sont pas en mesure d'ajouter plus de quantités du même produit alors qu'ils sont déjà sur la page du panier WooCommerce .

WooCommerce cart

Et naturellement, il peut être assez décevant de fournir d'excellents produits et services, tout en observant des taux d'abandon de panier élevés , surtout si cela est dû à de simples problèmes de conception de page. Mais vos soucis sont maintenant sur le point de prendre fin, avec la dernière version de notre équipe d' Addons essentiels pour Elementor . Lisez la suite pour découvrir comment vous pouvez facilement augmenter vos ventes avec une page de panier de commerce électronique incroyablement conçue et d'aspect professionnel dans Elementor .

Concevoir un panier WooCommerce professionnel avec des compléments essentiels 5.0

L'année 2021 a été une année incroyable pour notre équipe d'Addons essentiels pour Elementor. Nous avons franchi les étapes les plus importantes et grandi plus vite que nous ne l'avions jamais rêvé. Et tout cela grâce à vous. Ainsi, pour terminer l'année sur la même note positive et vous offrir la meilleure expérience de création de sites Web, nous vous proposons notre dernière mise à jour Essential Addons 5.0.

La dernière version comprend de nombreuses améliorations, de nouveaux éléments et des extensions pour vous aider à libérer vos compétences en conception Web dans Element en toute simplicité. Et nous sommes ravis de vous informer que cette mise à jour est également accompagnée d'un widget exclusif - EA Woo Cart .

Ce nouvel élément incroyable vous permet de créer sans effort une page de panier WooCommerce sur votre boutique en utilisant Elementor, en quelques clics et SANS CODAGE . Ainsi, que vous soyez nouveau dans l'industrie du commerce électronique ou propriétaire de magasin chevronné, vous pouvez facilement utiliser ce widget Essential Addons pour convertir les acheteurs potentiels de lèche-vitrines en clients payants.

Et son plus grand point fort est qu'il est entièrement personnalisable dans Elementor et est livré avec de nombreuses dispositions de conception différentes parmi lesquelles vous pouvez choisir, et correspond exactement à l'esthétique de votre boutique WooCommerce. Continuez à lire pour en savoir plus.

Configurer un chariot EA Woo lisse dans Elementor sans codage

Inutile de dire que vous devez vous assurer que vous avez déjà installé et configuré le plugin WooCommerce pour construire votre boutique à la perfection. Mais c'est important dans ce cas car pour que ce widget avancé fonctionne dans Elementor Editor, vous devez ajouter des produits au panier depuis votre boutique WooCommerce. Une fois cela fait, nous sommes tous prêts à utiliser sans effort le widget EA Woo Cart sur votre boutique. Suivez les étapes ci-dessous pour savoir comment :

Étape 1 : Définissez la page de panier WooCommerce souhaitée

Tout d'abord, accédez à la page WooCommerce → Paramètres directement depuis votre tableau de bord WordPress, puis accédez à l' onglet "Avancé" . À partir de là, vous pouvez attribuer n'importe laquelle de vos pages souhaitées comme votre nouvelle page de panier.

Cliquez simplement sur l' option "Page du panier" et choisissez n'importe quelle page dans le menu déroulant comme page de votre panier WooCommerce, comme vous pouvez le voir sur l'image ci-dessous. Vous serez prêt à partir.

WooCommerce cart

Étape 2 : Modifier le panier WooCommerce dans Elementor

La prochaine étape à franchir consiste à modifier votre page de panier WooCommerce à l'aide de l'éditeur Elementor en quelques clics. Mais avant de pouvoir le faire, vous devez activer l'élément EA Woo Cart avec Essential Addons for Elementor.

Assurez-vous d'avoir installé la dernière version d' Essential Addons 5.0 PRO , puis accédez à l' onglet "Éléments" de l'interface utilisateur Essential Addons for Elementor. Vous trouverez plus de 80 éléments disponibles ici, mais tout ce que vous avez à faire est de basculer l' option " EA Woo Cart " et d'appuyer sur " Enregistrer les paramètres " pour commencer.

WooCommerce cart

Étape 3 : Modifier le panier WooCommerce dans Elementor

Vous êtes maintenant prêt à concevoir une superbe page de panier dans Elementor. Alors, rendez-vous simplement sur la page de votre panier WooCommerce et cliquez sur " modifier avec Elementor ".

Une fois que vous êtes sur l'éditeur Elementor, recherchez l' élément ' EA Woo Cart ' dans l' option 'Rechercher' sous l' onglet 'Eléments' . Ensuite, faites simplement glisser et déposez l' élément 'EA Woo Cart' dans la section de votre choix dans Elementor Editor, comme indiqué ci-dessous. C'est vraiment aussi simple que ça.

WooCommerce cart

Configurez sans effort chaque aspect du chariot EA Woo

Votre panier WooCommerce est maintenant configuré mais doit être stylisé et personnalisé pour lui donner un aspect professionnel et facile à comprendre pour vos clients. Et cette section se concentrera sur la façon dont vous pouvez le faire facilement.

Étape 1 : Configurer les paramètres généraux du panier EA Woo

Dans le panneau latéral de l'éditeur Elementor, vous trouverez plusieurs options telles que "Paramètres généraux" , "Générateur de tableaux" ou "Composants du panier" sous l'onglet "Paramètres de contenu".

Dans les "Paramètres généraux" , vous trouverez 2 styles de mise en page différents pour votre panier EA Woo parmi lesquels choisir et personnaliser à votre guise, comme indiqué ci-dessous.

WooCommerce cart

Étape 2 : Modifier les étiquettes à partir du générateur de tableaux

Ensuite, à partir de ' Table Builder ', vous pouvez modifier les étiquettes des tableaux et faire glisser les sections pour réorganiser votre tableau de prix EA Woo Cart. Cela vous donne une flexibilité totale pour modifier chaque étiquette de toutes les colonnes que vous avez ajoutées à la page du panier - 'produit', 'prix', 'quantité', etc.

WooCommerce cart

Étape 3 : Personnalisez la fonctionnalité du composant de panier

Et puis, nous passons à la section « Composant du panier », où vous pouvez simplement activer le « Bouton de mise à jour du panier » pour permettre à vos clients d'ajouter plus de produits à leur panier.

Mais pas seulement cela, vous pouvez également activer le « formulaire de coupon » pour permettre aux clients d'ajouter facilement le coupon qu'ils souhaitent au moment du paiement sur la page du panier WooCommerce. En plus de cela, vous pouvez également activer l'option « Continuer les achats » pour aider les clients à revenir à nouveau sur la page de la boutique pour acheter davantage. De plus, vous pouvez même modifier le texte « Bouton de paiement » de cette section et rendre votre appel à l'action plus interactif.

WooCommerce cart

Tous ces boutons et options aideront vos clients à bien comprendre la page du panier WooCommerce et à naviguer facilement sur cette page. Ainsi, avec le widget EA Woo Cart, vous pouvez réduire instantanément les taux d'abandon et de rebond du panier.

Personnalisez entièrement le style du chariot EA Woo en quelques clics

Et enfin, une fois que vous avez configuré le contenu de votre page EA Woo Cart , il est temps de le styliser pour qu'il corresponde à l'esthétique de votre site Web WooCommerce ou de votre marque. Et pour ce faire, vous pouvez simplement cliquer sur l' onglet "Style" de l'éditeur Elementor pour personnaliser différentes zones de votre page.

Étape 1 : styliser les paramètres généraux

Dans la section "Général" , vous pouvez modifier la couleur d'arrière-plan de l'ensemble de votre section EA Woo Cart. Vous pourrez ajuster manuellement la couleur de l'arrière-plan de l'EA Woo Cart ou choisir des couleurs globales.

WooCommerce cart

Étape 2 : Entrez dans les détails avec la section Tableau

Dans la section "Tableau", vous pouvez modifier le rembourrage, la marge, la typographie, le type de bordure, etc. de toute la section du panier. Cela permettra éventuellement à votre page EA Woo Cart de se démarquer des autres magasins WooCommerce et de paraître complètement personnalisée.

Étape 3 : Modifier d'autres aspects de conception

Mais ce n'est pas tout. De la même manière, vous pouvez modifier l'apparence de ' Total du panier ', ' Formulaire de coupon ' , ' Continuer les achats ', ' Bouton ' et ' Avis ' . Vous pouvez même modifier les textes à l'intérieur.

WooCommerce cart

Pour ajouter plus de fonctionnalités et rendre votre page EA Woo Cart plus interactive et attrayante, vous pouvez également explorer les options de configuration "Avancé" .

WooCommerce cart

Une page de panier WooCommerce de concepteur professionnel

Et c'est tout. Avec ces petites étapes et une personnalisation facile, vous pouvez facilement créer une superbe page de panier WooCommerce pour votre site Web selon vos préférences. Cela aussi, sans utiliser une seule ligne de codage.

Découvrez le résultat final ci-dessous et voyez comment votre page de panier de concepteur d'aspect professionnel dans WooCommerce à l'aide du widget premium Essential Addons EA Woo Cart.

WooCommerce cart

Autres widgets exclusifs pour votre boutique WooCommerce

Et avec cela, nous voulons conclure notre guide ultime sur la façon de concevoir un panier WooCommerce dans Elementor sans codage et en toute simplicité. Mais avant de partir, nous voulons vous informer de tous les autres widgets WooCommerce auxquels vous avez accès à partir d'Essential Addons for Elementor.

Ce plugin exceptionnel vous apporte un widget pour améliorer chaque aspect de votre boutique WooCommerce en quelques clics. Il y a 7 autres éléments que vous pouvez examiner :

WooCommerce cart

Galerie de produits Woo

Curseur de produit Woo

Cararousel de produits Woo

Grille de produits Woo

Woo Comparaison des produits

Collections de produits Woo

Woo Commander

Consultez-les sur le site Essential Addons et augmentez instantanément les ventes de votre boutique WooCommerce en toute simplicité.

Mise à jour vers Essential Addons 5.0 et augmentation des ventes WooCommerce

Alors qu'est-ce que tu attends? N'attendez pas ! Mettez à jour vers Essential Addons 5.0 maintenant et rejoignez-nous pour créer une boutique WooCommerce unique et à forte conversion. Ou découvrez l'un de nos forfaits PRO , à partir d'un prix exclusif de seulement 39,97 $ , et faites monter en flèche le trafic, les ventes et les conversions en utilisant toutes nos fonctionnalités premium !

Si vous avez des suggestions, veuillez nous en informer dans les commentaires ci-dessous ou contactez notre équipe d'assistance. nous serions heureux de connaître vos commentaires. Pour plus de mises à jour, de tutoriels et de trucs et astuces, abonnez-vous à notre blog ou rejoignez notre sympathique communauté Facebook .