Comment personnaliser la page du panier WooCommerce sans codage (gratuit)

La personnalisation de la page du panier WooCommerce présente plusieurs avantages, notamment l'abandon de la page du panier, mais le faire en douceur n'est pas un jeu d'enfant.

La page du panier permet de prendre la décision finale de vérifier ou d'abandonner le panier. Vous ne voudriez pas que les acheteurs abandonnent le panier, n'est-ce pas ? C'est là que vous devez personnaliser la page de votre panier WooCommerce. 

Dans ce blog, vous trouverez un guide étape par étape sur la façon de personnaliser les pages du panier WooCommerce également sans aucun codage.

Commençons…

À quoi ressemble une page de panier WooCommerce par défaut

WooCommerce fournit une présentation très basique d'une page de panier. Bien que différents thèmes ajoutent différents styles à la page, elle reste toujours la même.

Voici les éléments courants de la conception d’une page de panier WooCommerce (inclus mais non limité à) :

Vous pouvez modifier la page du panier WooCommerce et personnaliser les éléments selon vos besoins. Avant cela, voyons à quoi ressemble la page du panier WooCommerce par défaut sur différents thèmes.

Voici à quoi ressemble la conception de la page du panier WooCommerce sur le Thème WordPress Vingt Vingt:

Voici à quoi ressemble la page du panier sur le Thème WordPress Twenty Twenty One:

Même un thème Elementor populaire comme Bonjour Elementor vous donnera une conception de page de panier WooCommerce très basique avec la même ancienne mise en page.

Je pense que vous conviendrez que toutes les pages du panier ci-dessus ont la même mise en page et n'offrent rien d'extraordinaire ou d'extraordinaire.

➡️➡️ Vérifiez Comment ajouter un sélecteur de devises au site Web WooCommerce en 5 étapes

Pourquoi personnaliser la page du panier WooCommerce

Selon le rapport de novembre 2023 de BuiltWith, plus de 6,6 millions de sites Web en direct utilisent WoCommerce.

WooCommerce vous permet de créer en un rien de temps un site Web de commerce électronique entièrement fonctionnel et prêt à l'emploi avec ses modèles, y compris une page de panier. Beaucoup de ces sites Web utilisent les modèles par défaut de WooCommerce pour le panier et d'autres pages.

Mais vous ne voudriez pas que la page de panier de votre site Web ressemble aux autres, car cela risquerait de décourager vos acheteurs. Pour vous démarquer, les modifications de la page du panier WooCommerce ou la personnalisation du panier WooCommerce peuvent venir à la rescousse.

C'est aussi un fait qu'autour  70% de personnes abandonnent leur panier et ne procédez jamais au paiement. Cela montre à quel point il est important de personnaliser la page du panier WooCommerce.

Et c'est un fait connu que les gens sont attirés par les choses qui sont différentes et qui se démarquent dans la foule.

Alors, ne laissez pas votre page de panier se perdre dans la foule, personnalisez-la plutôt pour qu'elle se démarque et vous aide à obtenir plus de commandes. 

Maintenant, la question est de savoir comment obtenir une page de panier qui se démarque ? Eh bien, il existe deux façons de créer une conception de page de panier Woocommerce.

1. 1. Modification des fichiers WooCommerce (nécessite de savoir coder)
2. 2. Utilisez un plugin glisser-déposer

Vous pouvez également consulter notre blog 👉 Comment ajouter un sélecteur de devises à WooCommerce

Pourquoi modifier le code pour obtenir une page de panier WooCommerce personnalisée n'est pas une bonne idée

Bien que la modification du code pour obtenir la page de panier souhaitée soit une option, elle n'est pas recommandée aux non-codeurs. Puisque vous avez choisi une plateforme prête à l’emploi comme WooCommerce pour créer votre site Web, je suppose que vous ne cherchez pas à coder quoi que ce soit à la main.

Voici quelques-unes des raisons pour lesquelles les programmeurs débutants ou les non-codeurs devraient éviter de modifier le code par défaut à des fins de conception de pages de panier WooCommerce.

• Cela nécessite que vous soyez un programmeur expert et que vous connaissiez HTML, CSS, Javascript et PHP comme un pro.
• Si le code n’est pas édité et optimisé efficacement, cela peut ralentir votre site Web.
• Vous devrez changer le code à chaque fois que vous souhaiterez changer votre thème WooCommerce
• Lorsque WooCommerce proposera une nouvelle mise à jour, vous devrez apporter de nouvelles modifications pour rendre le code compatible avec une nouvelle version de WooCommerce.
• Vous pouvez également perdre tout votre code lors de la mise à jour de WooCommerce si vous ne créez pas de thème enfant.

De plus, si vous utilisez des plateformes comme WordPress et WooCommerce pour évitez de coder en premier lieu, alors pourquoi apprendre à coder juste pour modifier une page de panier, n'est-ce pas ?

Pas de soucis. J'ai un autre processus que vous pouvez utiliser pour personnaliser votre page Panier en douceur sans avoir à coder. Pas même une seule ligne. Promesse!

Voyons comment modifier la page du panier WooCommerce sans connaissances en codage !

Comment personnaliser la page du panier WooCommerce à l'aide d'un plugin glisser-déposer

Vous pouvez désormais concevoir une page de panier avec une technologie simple de glisser-déposer. Grâce au plugin WooCommerce PageBuilder Moteur de boutique.

ShopEngine est le nec plus ultra WooCommerce constructeur avec modèles prédéfinis, et des widgets pour personnaliser vos pages WooCommerce et modules avec des fonctionnalités de commerce électronique utiles. Avec ce plugin, vous obtenez un contrôle total sur la conception de vos pages WooCommerce, y compris la page Panier.

Alors que ShopEngine vous propose un fichier prédéfini Modèle de panier, vous pouvez créer votre page Panier à partir de zéro et personnaliser votre panier WooCommerce. Dans ce blog, je vais vous expliquer le processus de modification d'une page de panier WooCommerce pour en créer une toute nouvelle à partir de zéro.

Besoin de plus de raisons pour vous convaincre d’utiliser ShopEngine ? Lisez notre blog sur 11 raisons de choisir ShopEngine

Étape #1 : installer Elementor et ShopEngine

Pour commencer le processus de personnalisation de la page du panier dans WooCommerce, vous aurez besoin de deux plugins

1. Élémentor
2. Moteur de boutique 

Puisque ShopEngine est un générateur de pages WooCommerce pour Elementor et nécessite Elementor, assurez-vous d'installer Élémentor d'abord. 

Étape #2 : Créer un modèle de page de panier

Une fois que vous avez installé les deux plugins, créez un modèle de panier. Pour créer un modèle de page de panier :

• Aller à: Tableau de bord => ShopEngine => Modèle de constructeur
• Cliquez sur sur Ajouter un nouveau pour ouvrir la fenêtre Paramètres du modèle
• Donne un Nom du modèle de votre préférence
• Choisir Tapez comme panier depuis la liste déroulante
• Allumer l'option Définir par défaut pour remplacer toute page de panier existante
• Choisissez l'option vide sous Échantillon de conception 
• Cliquer sur Sauvegarder les modifications mettre à jour

Note: Pour obtenir un Modèle de panier prêt à l'emploi, choisissez l'option « Sample Design 1 » lors de la création du modèle. Vous pouvez également modifier chaque élément de ce modèle prédéfini. J'ai choisi vierge car je vais en créer un à partir de zéro

Étape #3 : Choisissez une mise en page/une structure

Il est maintenant temps de choisir une mise en page. Pour commencer 

• Aller à ShopEngine => Module Constructeurs
• Passez la souris sur le modèle de panier de la liste
• Cliquer sur Modifier avec Elementor

• Une fois l'éditeur Elementor ouvert Cliquez sur sur la section Ajouter une nouvelle section (+) icône 
• Choisissez maintenant le structure/mise en page Tu aimes

Étape #4 : Concevoir une page de panier à l'aide des widgets ShopEngine

ShopEngine propose cinq widgets exclusivement pour concevoir un WooCommerce Modèle de panier. En plus des widgets Modèle de panier, vous pouvez également utiliser le Formulaire de coupon widget et cinq widgets généraux pour créer votre page de panier.

Pour ce blog, je vais utiliser les widgets suivants :

• Table de chariot: Le widget panier affiche tous les produits du panier sous forme de tableau avec le prix, la quantité et le sous-total. Les clients peuvent mettre à jour la quantité de produits et également vider le panier en un seul clic.
• Total du panier: Ce widget affiche toutes les méthodes d'expédition disponibles et le total de la commande.
• Retour à la boutique: Ce widget fournit un bouton avec un lien qui vous ramène à la page de la boutique.
• Formulaire de coupon de paiement: Les clients peuvent utiliser leur coupon de réduction à l'aide de ce widget.
• Produit promotionnel: Ce widget vous permet également de présenter vos produits en vente sur la page du panier avec un compte à rebours qui affiche la période du calendrier de vente. Il s'agit d'un widget général de ShopEngine.
• Vente croisée: La vente croisée affiche tous les produits de vente croisée de manière attrayante sur la page du panier.

Tout d'abord, vous devez allume les widgets vous souhaitez utiliser sur votre page de panier. Pour allumer  

• Aller à Tableau de bord d'administration => ShopEngine => Widgets. 
• Faites défiler et recherchez le widget que vous souhaitez utiliser
• Activer les widgets que vous souhaitez utiliser
• Cliquer sur Sauvegarder les modifications en haut de la page

Il est maintenant temps de glisser-déposer les widgets dans votre mise en page. Revenez au mode éditeur de page Panier :

• Recherche pour le widget
• Glisser déposer les widgets (un par un)

Note: Vous pouvez masquer le bouton Continuer les achats et le bouton Tout masquer.

Comme ShopEngine est totalement compatible avec Elementor, vous pouvez utiliser plusieurs mises en page sur la même page. Pour la partie suivante, utilisons une mise en page différente. Pour ce faire, je vais ajouter une nouvelle section avec une structure différente et glisser-déposer Cross-sell et Widgets de produits promotionnels.

Note: Vous devez ajouter des produits de vente croisée et mettre les produits en vente avec les planifications du tableau de bord d'administration sous les paramètres du produit pour les produits de vente croisée et de transaction à afficher sur le front-end.

Les produits Cross-Sell et Deal vous offrent des avantages différents paramètres que vous pouvez personnaliser. Ainsi, après avoir glissé et déposé le widget, personnalisez les paramètres selon vos préférences.

Avec le widget de vente croisée, vous obtenez des options telles que activer/désactiver Activer le curseur, afficher/masquer la vente flash, le prix de vente, le bouton du panier et le nombre de produits à afficher dans les paramètres de contenu. Pour les curseurs, vous disposez d'options telles que Slides Per View, Loop et Autoplay. Vitesse de diapositive, etc. De plus, vous bénéficiez également des options Trier par et Commander sous l'onglet avancé.

Les produits Deal vous offrent paramètres de contenu comme Trier, Trier par, Date, Afficher le produit, Colonne, Espacement de colonne et Espacement de ligne. Vous obtenez également d'autres paramètres, notamment Activer la vente, Badge, Badge de vente, Vente, Limite de mots du titre, Badge de pourcentage, Compte à rebours et Jours.

Étape #5 : Personnaliser les paramètres de style de la page Woocommerce Cart

Pas seulement la structure, avec ShopEngine, vous obtenez également un contrôle total sur le style de votre page de panier.

Pour modifier les paramètres de style des widgets ShopEngine, passez la souris sur le widget que vous souhaitez modifier pour trouver une option Modifier dans le coin supérieur droit. Cliquez sur cette option pour trouver tous les paramètres du panier Woocommerce pour le contenu et modes sur le panneau Elementor placé sur le côté gauche.

Jetons un coup d'œil aux paramètres de style que vous pouvez personnaliser pour chacun des widgets utilisés dans ce blog :

Tableau du chariot : 

Vous pouvez modifier les paramètres de style de l'en-tête du tableau, du corps du tableau, de l'image du produit et de la quantité. Pied de page du tableau et police globale. Pour plus de détails, vous pouvez consulter notre documentation sur la table Cart.

Retour à la boutique :

Vous modifiez l’alignement des boutons, la typographie, la couleur de la bordure, le rayon de la bordure et l’ombre de la boîte. Pour plus de détails, vous pouvez consulter notre documentation sur le widget de retour à la boutique

Formulaire de coupon :

Pour le formulaire de coupon, vous obtiendrez un paramètre de style pour les informations, la description, le formulaire de coupon, le bouton Appliquer et la police globale. Vous pouvez consulter les options de style en détail sur notre documentation sur le formulaire de coupon.

Total du panier :

Pour le widget Total du panier, vous disposez de nombreuses options de style pour modifier le style du tableau, de la saisie, du bouton de mise à jour du paiement et de la police globale. Pour des paramètres de style de panier WooCommerce plus détaillés, vous pouvez consulter notre documentation sur le total du panier.

Vente croisée: 

Pour le widget de vente croisée, vous disposez de diverses options de style, notamment des styles pour les articles, les ventes flash, l'image, la course au titre, le prix, l'ajout au panier, le style du curseur et la police globale. Pour plus de détails sur Cross, style Sale consultez la documentation.

Produits promotionnels :

Vous disposez de différentes options de style pour l'emballage du produit, l'image du produit, le badge du produit, le compte à rebours, le style de contenu, la barre de stock et de progression et la police globale. Pour en savoir plus sur les options de style consultez notre documentation sur le widget Deal Product.

Étape #6 : Mettre à jour et prévisualiser la page de panier WooCommerce personnalisée

Après avoir modifié les styles, cliquez sur Mise à jour pour enregistrer les modifications et cliquez sur Aperçu pour voir les changements.

Si vous avez suivi la mise en page et les paramètres mentionnés dans ce blog, vous devez concevoir une page de panier personnalisée dans WooCommerce à l'aide de ShopEngine comme celle ci-dessous :

Bonus : conseils pour booster les ventes de votre boutique de commerce électronique à l'aide des modules ShopEngine

Vous savez maintenant comment créer et personnaliser une page de panier dans woocommerce. ShopEngine, en plus du générateur de modèles de page de panier WooCommerce, vous fournit des modules utiles avec des fonctionnalités de commerce électronique importantes qui peuvent augmenter les ventes de votre boutique en ligne. Les modules ShopEngine incluent :

• Aperçu rapide
• Échantillons de variations
• Liste de souhaits
• Comparaison de produits

Je suis sûr qu'en tant que propriétaire d'une boutique WooCommerce, vous savez à quel point ces fonctionnalités sont importantes pour rendre l'expérience d'achat en ligne agréable. Si nous parlons du modèle de panier, en utilisant le Aperçu rapide bouton et le Liste de souhaits Le bouton sur la vente croisée offrira à vos clients une meilleure expérience d'achat. Et cela augmente les chances que vos clients achètent plus de produits.

Avec Quick View, les clients peuvent facilement consulter les informations complètes de n'importe quel produit en un seul clic. De même, en un seul clic, les utilisateurs peuvent ajouter le produit à leur liste de souhaits en utilisant le bouton du module de liste de souhaits pour commander plus tard. Ces deux fonctions peuvent jouer un rôle important dans l’augmentation des ventes de produits.

Alors, ne vous contentez pas de personnaliser votre page de panier, utilisez les modules ShopEngine pour offrir à vos clients une excellente expérience d'achat et augmenter les ventes de votre boutique.

Blogs bonus :
✅ Comment personnaliser la page de catégorie WooCommerce sans codage
✅ Comment personnaliser la page WooCommerce Mon compte à l'aide de ShopEngine 
✅ Comment personnaliser la page de la boutique WooCommerce à l'aide de ShopEngine 
✅ Comment personnaliser la page produit WooCommerce à l'aide de ShopEngine
✅ Comment personnaliser la page de paiement WooCommerce à l'aide de ShopEngine
✅ 9+ plugins de panier d'achat utiles et meilleurs pour WordPress et WooCommerce

Pourquoi passer à ShopEngine Pro ?

Eh bien, honnêtement, ShopeEngine vous offre suffisamment de fonctionnalités pour faire de votre boutique en ligne une bonne boutique en ligne. Mais pourquoi devriez-vous vous contenter du bien quand vous pouvez obtenir le meilleur, n'est-ce pas ?

ShopEngine Pro vous offre une grande quantité de fonctionnalités qui feront des achats en ligne sur votre boutique de commerce électronique la meilleure expérience d'achat pour vos clients. En plus de personnaliser les pages du panier woocommerce, vous pouvez accéder 20+modules qui inclut Compte à rebours des ventes flash, insignes, Avis de vente, Paiement rapide, Paiement pariétal, Changeur de devises, et beaucoup plus.

Non seulement la satisfaction du client, les fonctionnalités de ShopEngine sont également conçues pour rendre la gestion de la boutique en ligne très simple avec des modules tels que Pré-commander, Commande différée, Champ de paiement supplémentaire, et beaucoup plus.

À ne pas oublier 16+ préfabriqués modèles avec contrôle complet de la personnalisation de WooCommerce et Plus de 70 widgets avancés pour créer chaque modèle WooCommerce à partir de zéro si vous le souhaitez.

En ce qui concerne la page du panier, ShopEngine vous permet également de créer une page de panier personnalisée WooCommerce pour votre boutique en ligne.

Un plugin avec autant de fonctionnalités, de modèles et de modules prédéfinis qui, à un prix très raisonnable, est sûr d'essayer, n'est-ce pas ?

Obtenez votre version de ShopEngine aujourd'hui et ne vous souciez plus de la façon de personnaliser WooCommerce !

Derniers mots

Toutes nos félicitations! Vous avez repensé avec succès votre page de panier personnalisé WooCommerce. N'était-ce pas facile ? 

Eh bien, c'est ce que fait ShopEngine, vous savez maintenant comment personnaliser une page de panier WooCommerce sans codage.

Alors, ne limitez pas simplement votre boutique en ligne aux styles par défaut, repensez l'intégralité de votre site Web WooCommerce et utilisez les modules pour rendre votre activité en ligne plus réussie que jamais. 

Alors, quelle page WooCommerce allez-vous personnaliser ensuite ? N'oubliez pas de partager votre expérience d'utilisation de ShopEngine.