Comment créer un mini panier WooCommerce : 3 méthodes

Qu’est-ce qu’un mini panier WooCommerce ?

Votre panier WooCommerce Mini n’est qu’une petite forme de votre page de panier WordPress réelle. Il contient les produits ajoutés à votre panier ainsi que quelques détails supplémentaires. Le contenu du mini panier dépend de votre thème WordPress actif mais il comprend généralement :

• Votre liste de produits
• Sous-total
• Vignettes des produits
• Quantité du produit

Indépendamment des détails affichés Même nous, nous utilisons le mini-chariot chez QuadLayers. Si vous ajoutez un produit au panier, vous pouvez afficher le mini panier en survolant l’icône du panier Si vous regardez la capture d’écran ci-dessous, nous avons ajouté le produit WooCommerce Checkout Manager au panier. Ceci est également affiché

Pourquoi créer un mini panier pour votre site Web WooCommerce ?

Certains de nos lecteurs pourraient envisager d’ajouter un mini panier flottant tandis que d’autres pourraient l’ajouter à la barre latérale ou au pied de page. Il existe différentes approches possibles de mini-chariot que vous pourriez envisager d’utiliser. De plus, vous devrez peut-être également ajouter plus de contenu à vos mini-paniers, comme les prix d’expédition, des détails supplémentaires sur le panier, des messages personnalisés, etc. La facilité d’utilisation de votre panier peut également être importante pour vous et vos clients afin d’améliorer vos ventes réelles. Un paiement personnalisé et prêt à la vente qui correspond parfaitement à l’esthétique de votre site Web peut changer la donne pour votre site Web WooCommerce. Donc, si vous souhaitez créer et ajouter votre mini panier personnalisé à différentes pages de votre site Web, ne cherchez pas plus loin !

Comment créer un mini panier WooCommerce

Pour créer et ajouter votre panier WooCommerce Mini, vous pouvez utiliser 3 méthodes différentes :

1. Ajouter un widget de panier
2. Utiliser un plugin WordPress

Jetons un coup d’œil à chaque méthode et aux étapes impliquées

1. Créez un mini panier WooCommerce à l’aide des widgets WordPress

• Barre latérale des widgets
• Ci-dessousEn-tête
• Pieds de page

Il peut y avoir plus de zones de widgets en fonction de votre thème. Mais assurez-vous d’utiliser également l’un des thèmes compatibles WooCommerce.

1.1. Sélectionnez la zone du widget

Pour ajouter un widget de panier, vous devrez d’abord sélectionner une zone de widget. Alors ouvrez votre tableau de bord d’administration WP et accédez à Apparence > Widgets. Ensuite, vous choisissez la zone de widgets pour votre mini panier. Pour notre démo, nous utiliserons la barre latérale. Mais vous pouvez utiliser la zone de widgets qui vous convient le mieux.

1.2. Ajouter un widget de panier à la zone des widgets

Après avoir sélectionné la zone de widget pour votre mini panier, cliquez sur le bouton + pour ajouter le widget. Utilisez la barre de recherche pour rechercher Panier et cliquez dessus pour ajouter le widget. Si vous ne voyez pas le widget, assurez-vous d’avoir correctement configuré WooCommerce sur votre site Web. Ici, vous pouvez également activer ou désactiver l’option Masquer si le panier est vide . Nous vous recommandons de l’activer car votre panier de la barre latérale sera masqué si le panier de votre client est vide. Cela rendra également votre site Web plus fonctionnel. Une fois que vous avez terminé d’ajouter le widget de panier, Mettez à jour vos widgets pour enregistrer vos modifications. Maintenant, votre mini-panier de la barre latérale devrait apparaître sur votre front-end. Bien sûr, vous pouvez également ajouter votre mini-panier à une autre zone de widgets. Sélectionnez simplement l’emplacement sous la page des widgets et vous pourrez facilement ajouter le widget sous votre en-tête ou Bien qu’il s’agisse dumoyen le plus simple de créer votre mini panier WooCommerce, il comporte un bon nombre de limitations. D’une part, il n’y a aucune personnalisation pour votre mini panier. Vous êtes très limité en termes d’apparence de votre mini-panier et de manière dont vos clients y accèdent. Les positions du mini panier sont limitées aux zones de widgets fournies

2. Créez un mini panier WooCommerce à l’aide d’un plugin WordPress

L’utilisation d’un plugin WordPress est l’un des moyens les plus simples d’organiser votre expérience de panier. Vous pouvez vous assurer que vos clients peuvent facilement payer à tout moment à l’aide de plugins. Ils vous permettent également de simplifier l’expérience de paiement de votre site Web. Les plugins mini panier offrent des fonctionnalités astucieuses pour promouvoir vos ventes de produits et améliorer votre génération de leads.

• Vous pouvez activer les icônes de panier et les fenêtres contextuelles flottantes pour le mini-panier. Ainsi, vos clients peuvent y accéder à tout moment tout en gardant le reste du contenu de la boutique propre et sans distraction.
• De nombreux éléments de panier et de produit peuvent être ajoutés au mini panier lui-même.
• Grâce aux plug-ins, vous pouvez ajouter des fonctionnalités intelligentes, telles que l’ajout de coupons directement à partir du mini-panier, des produits vedettes dédiés et des suggestions de produits recommandés.

Nous vous recommandons donc fortement d’utiliser un plugin WordPress dédié à l’ajout et à la personnalisation de votre mini panier WooCommerce. Pour notre démo, nous utiliserons le plugin Woocommerce Cart All in One. C’est l’un des meilleurs plugins pour créer un mini panier sur votre site Web. Le plugin est également très facile à utiliser et possède toutes les fonctionnalités dont vous avez besoin, comme une fenêtre contextuelle de mini-panier, un panier de barre latérale ou des options de personnalisation de panier de menu. Nous avons également une liste des meilleurs plugins de mini-panier WooCommerce. Si vous souhaitez en utiliserautre plugin, vous pouvez également y jeter un oeil.

2.1. Installer et activer le plugin

Commençons Ouvrez votre Tableau de bord d’administration WP, puis accédez à Plugins > Ajouter un nouveau Ensuite, utilisez la barre de recherche en haut à droite pour rechercher Cart All In One For WooCommerce. Après avoir trouvé le plugin, cliquez sur Installer maintenant pour installer le plugin. Enfin, Activez le plugin une fois installé. Si vous souhaitez utiliser un plugin premium, vous devrez le télécharger et l’installer manuellement. Jetez un œil à notre guide détaillé pour installer manuellement un plugin WordPress pour plus d’informations. Maintenant, nous devons configurer le plugin pour activer votre mini panier WooCommerce.

2.2. Configurer le plugin Cart All in One pour WooCommerce

Pour configurer le mini panier WooCommerce du plugin, cliquez sur l’onglet Panier tout en un sur votre Tableau de bord d’administration WP. Cela ouvrira la page Tableau de bord du plugin. Pour activer la fenêtre contextuelle du mini panier sur votre site Web, ouvrez le Panier de la barre latérale et cliquez sur Activer. Vous pouvez également utiliser l’option Mobile Enable pour activer/désactiver la fenêtre contextuelle du mini-panier sur les appareils mobiles. Enfin, Enregistrez vos modifications. Maintenant, allez recharger le front-end de votre site Web. Vous devriez voir votre nouvelle icône de mini-panier sur votre page Web. Vous pouvez simplement cliquer dessus pour ouvrir votre mini panier. De plus, vous pouvez également ajouter un panier de menu à n’importe lequel de vos menus. Ouvrez simplement l’onglet Panier de menu et Activez-le comme pour les étapes précédentes. Vous pouvez également l’activer sur les menus mobiles si nécessaire. Ensuite, vous devez ajouter les menus WordPress là où vous souhaitez afficher le panier de menus sur votre site Web. Choisissez simplement les menus que vous souhaitez ajouter à votre mini panier WooCommerce Vous devriez maintenant voir votre mini-panier de menu sur votre site Web. Il sera ajouté aux menus que vous avez sélectionnés pour le mini panier.

2.3. Personnalisez votre mini panier WooCommerce à l’aide du plugin

La personnalisation est une fonctionnalité clé du plug-in Cart All in One. Vous pouvez librement personnaliser votre panier de barre latérale ainsi que le panier de menu. Cela inclut les couleurs, les styles de mini-panier, les positions, les animations personnalisées, les icônes de mini-panier, les styles de menu de la barre latérale et bien plus encore. Pour accéder aux options de personnalisation, accédez à Apparence > Personnaliser sur votre tableau de bord d’administration WP. Vous serez redirigé vers votre personnalisateur de thème. Ici, cliquez sur Cart All in One For WooCommerce et vous devriez voir toutes les options de personnalisation du mini panier. Pour cette démo, nous allons personnaliser le panier de la barre latérale.Cliquez donc sur  Sidecart Cart et vous devriez voir toutes les options correspondantes. Pour l’instant, nous allons activer un mini-panier plus petit à l’aide de l’option de contenu Afficher la barre latérale et modifier la Position du panier de la barre latérale. Mais vous pouvez personnaliser davantage votre mini-panier à l’aide de ces options, en fonction de son adaptation à votre site Web. Il y a encore beaucoup de choses à modifier, comme l’interaction avec l’icône du panier elle-même, afin que le mini panier apparaisse lorsque vous survolez l’icône, personnalisez l’icône de chargement, et bien d’autres encore. Une fois que vous avez terminé vos modifications, cliquez sur Publier et enregistrez-les. Vous pourrez voir toutes ces personnalisations de votre mini panier sur votre site Web. Et c’est l’essentiel de la personnalisation de votre mini panier à l’aide du plugin. Si vous souhaitez en savoir plus sur toutes les options de personnalisation fournies

3) Créer un mini panier WooCommerce

Disons que vous préférez ne pas utiliser de plugin pour ajouter votre panier WooComerce Mini afin de maintenir un cadre léger de votre site Web. Ensuite, vous pouvez également choisir d’en créer un Cela vous demandera de créer un shortcode personnalisé à l’aide d’une fonction personnalisée et de le coller Étant donné que nous allons modifier certains des fichiers principaux, il est préférable de sauvegarder votre site Web et de créer également un thème enfant

3.1. Ajoutez le shortcode personnalisé à vos fonctions de thème

Nous ajouterons les codes personnalisés Une fois que vous êtes prêt, ouvrez votre éditeur de thème depuis Apparence > Éditeur de fichiers de thème sur votre Tableau de bord d’administration WP. Utilisez la barre latérale des fichiers de thème à droite et cliquez sur functions.php. Cela ouvrira le fichier function.php sur votre éditeur de thème. Maintenant, collez le code suivant

fonction custom_mini_cart() { echo ' '; echo ''; echo '

‘; écho ‘

'; echo '

‘; echo ‘
• ‘; woocommerce_mini_cart(); echo ‘

‘; } add_shortcode( ‘quadlayers-mini-cart’, ‘custom_mini_cart’ ); Après avoir ajouté le code, cliquez sur Mettre à jourFichier. Cela créera un shortcode personnalisé intitulé ‘[quadlayers-mini-cart]’ pour votre site Web. Désormais, vous pouvez utiliser ce shortcode sur n’importe quelle publication, page ou widget pour ajouter votre mini panier WooCommerce personnalisé.

3.2. Utilisez le shortcode

Vous pouvez également utiliser l’extrait de code suivant pour ajouter votre mini panier personnalisé à n’importe quel fichier de modèle de thème ou modèle WooCommerce.

</pré>

    Ensuite, utilisez l’option Sélectionner le plugin à modifier en haut à droite et choisissez WooCommerce et cliquez sur Sélectionner.   Ensuite, ajoutez la ligne de code suivante à n’importe quelle partie appropriée du modèle.  

echo do_shortcode('[quadlayers-mini-cart]');

Pour notre démo, nous ajouterons la ligne de code sous la ligne do_action( 'woocommerce_before_main_content' );. Mais vous pouvez ajouter l’extrait sur n’importe lequel des fichiers modèles et partout où cela est nécessaire. Enfin, mettez à jour le fichier après avoir ajouté les codes Cette approche ajoutera votre mini panier au modèle. Cependant, le mini panier peut ne pas ressembler exactement à ce que vous souhaitez et peut nécessiter un style supplémentaire à l’aide de la feuille de style de fichier de votre thème. Cette méthode n’est donc recommandée que si vous êtes habitué au codage et possédez de bonnes connaissances pour ajouter PHP et CSS à WordPress.

Bonus : Comment ignorer la page du panier

Si vous souhaitez que vos clients bénéficient d’un processus de paiement plus rapide, vous pouvez également choisir de ignorer complètement la page du panier. Comme le mini panier est déjà fourni à vos clients, la page du panier n’est pas vraiment nécessaire. Ainsi, vous pouvez rediriger vos clients directement vers la page de paiement lorsqu’ils souhaitent effectuer un achat. Vous pouvez le faire soit en utilisant un plugin dédié, soit en utilisant une fonction personnalisée. Pour l’instant, nous allons expliquer comment ignorer la page du panier Mais avant de continuer, vous devez accéder à WooCommerce > Paramètres depuis votre tableau de bord WP et ouvrir l’onglet Produits. Sous les options Général, désactivez les deux options de comportement d’ajout au panier. Cela garantit qu’il n’y a aucune interférence avec notre fonction personnalisée. Maintenant, ouvrez à nouveau le fichier function.php de votre thème enfant en suivant la même étape que ci-dessus. Accédez simplement à l’éditeur de thème depuis Apparence > Éditeur de fichiers de thème et cliquez sur le fichier functions.php . Ensuite, collez l’extrait de code suivant ici.

add_filter('add_to_cart_redirect', 'ql_skip_cart_page'); fonction ql_skip_cart_page () { $woocommerce mondial ; $redirect_checkout = $woocommerce->cart->get_checkout_url(); retourner $redirect_checkout ; 

Désormais, chaque fois que vos clients ajoutent un produit à votre panier, ils seront directement redirigés vers la page de paiement au lieu de la page de leur panier. Pour simplifier ce processus, vous pouvez également utiliser un plugin tel que Direct Checkout for WooCommerce. Si vous souhaitez en savoir plus et pourquoi vous devriez envisager de l’utiliser, vous pouvez consulter notre guide dédié ici.

Conclusion

Et cela termine notre guide sur la façon de créer un mini panier WooCommerce. La configuration et la personnalisation du mini panier WooCommerce n’est pas un processus fastidieux et vous pouvez choisir d’utiliser différentes méthodes pour le faire. Résumons les méthodes que nous avons utilisées

• Utiliser les widgets de panier
• Avec un plugin WordPress dédié

Si vous ne savez pas quel processus utiliser, nous vous recommandons fortement d’utiliser un plugin pour créer votre mini panier WooCommerce. Non seulement cette méthode est plus sûre et plus simple, mais vous bénéficiez également de nombreuses options de personnalisation dédiées pour votre mini-chariot. Si vous êtes un débutant WordPress et que vous souhaitez ajouter un mini-panier WooCommerce avec des limitations minimales, nous vous recommandons fortement d’utiliser un plugin dédié. De plus, sivous recherchez des moyens supplémentaires pour raccourcir votre processus de paiement et améliorer vos ventes, pourquoi ne pas consulter certains de nos autres articles :

• Meilleurs plugins pour personnaliser la page de panier WooCommerce
• Comment créer une page de paiement WooCommerce
• Comment créer un lien de paiement direct WooCommerce

Alors, pouvez-vous ajouter un mini panier à votre site Web maintenant ? Ou l’avez-vous déjà ajouté ? Nous serons heureux de le savoir