• Options de personnalisation complète, à partir de zéro ou à l’aide de modèles et à partir de zéro.
• Intégration complète et options pour créer et personnaliser toutes les pages WooCommerce telles que la page de la boutique, les pages de produits, les archives de la boutique, la page du panier, etc.
• Plus de 50 widgets Pro avec des options pour des widgets WooCommerce spécifiques.
• Plus de 10 kits de sites Web détaillés comprenant plus de 300 modèles que vous pouvez configurer et configurer lors de vos déplacements.
• Créateur glisser-déposer convivial pour les débutants, doté d’incroyables options de personnalisation pour chaque élément de votre site Web.
• Support incroyable pour les modules complémentaires et les extensions.

Vous pouvez également choisir parmi plusieurs forfaits en fonction de vos besoins. Chaque plan est également assorti d’une période de garantie de remboursement de 30 jours, parfaite au cas où vous n’êtes pas satisfait de l’utilisation du plugin.

De même, assurez-vous que vous avez correctement configuré WooCommerce et que vous avez également utilisé l’un des thèmes WooCommerce compatibles. Cela garantira que vous n’aurez aucun problème de conflit pendantpersonnaliser la page du panier.

Maintenant que nous avons expliqué pourquoi vous devriez envisager d’utiliser Element pour personnaliser votre page de panier WooCommerce, voyons comment vous pouvez le faire.

Comment personnaliser la page du panier WooCommerce avec Elementor ?

Après avoir installé et activé Elementor Pro sur votre site Web, créez une nouvelle page

Cela vous mènera au générateur de pages Elementor où vous pouvez désormais ajouter du contenu à votre page de panier personnalisée. Allons-y et ajoutons quelques éléments de base de WooCommerce pour remplir votre panier.

Commencez

Ensuite, configurez votre widget de panier à l’aide des options Modifier le widget sur la gauche. Vous pouvez utiliser l’onglet Contenu pour configurer différents éléments tels que :

• Disposition des colonnes (extraction sur une colonne/deux colonnes.)
• Mettre à jour le texte du panier.
• Appliquer le texte du coupon.
• Personnalisation totale du panier.
• Options de mise à jour automatique du panier.

Bien sûr, vous pouvez également configurer le style, la police, les couleurs et bien plus encore pour tous ces champs et éléments à l’aide de l’onglet Style.

De même, l’onglet avancé vous permet de configurer toutes les animations personnalisées, les arrière-plans, les effets de mouvement, etc.

Si vous souhaitez configurer quelques options sur le style, cliquez sur l’onglet Style.

Maintenant, attribuez une bordure à votre panier en utilisant l’option Type de bordure. Pour notre démo, nous avons défini ceci sur Solid. Bien sûr, vous pouvez personnaliser à la fois la bordure et l’ombre de la boîte à l’aide d’options supplémentaires.

De même, si vous personnalisez des éléments supplémentaires tels que le récapitulatif de la commande, le bouton de paiement et les totaux, vous devriez obtenir un panier comme celui-ci :

Pour l’instant, nous conserverons ce panier. Mais vous pouvez toujours revenir en arrière et personnaliser encore davantage la page du panier si nécessaire.

Ensuite, quelques éléments supplémentaires peuvent être ajoutés à la page du panier. Vous pouvez les ajouter à l’aide de la barre de widgets à gauche en utilisant la même méthode que ci-dessus.

Allons-y et ajoutons un texte de clause de non-responsabilité, une vidéo et un formulaire de contact. Ce sont tous d’excellents éléments à ajouter pour aider vos clients avec leurs demandes de renseignements et leurs informations concernant les bons de commande, l’expédition, etc.

Une fois que vous avez terminé, vous pouvez publier cette page personnalisée et terminer la modification. Cependant, nous vous suggérons de l’ajouter en tant que modèle personnalisé pour une personnalisation future si vous le souhaitez. Cliquez simplement sur le bouton fléché à côté du bouton Publier sur leen bas et cliquez surEnregistrer comme modèle. Ensuite, donnez le nom de votre modèle de panier personnalisé et cliquez sur Enregistrer.

Enfin, vous pouvez terminer la personnalisation de votre page de panier personnalisée en cliquant sur Publier.

Définition de votre page de panier personnalisée en tant que page de panier WooCommerce

Le processus ci-dessus crée simplement votre page de panier WooCommerce personnalisée.

Une fois que vous avez créé votre page de panier WooCommerce personnalisée

Sur votre option Page du panier, continuez et recherchez le nom de la page que vous venez de créer. Pour nous, ce sera la Page de panier de démonstration. Cliquez sur la page de votre panier personnalisé, faites défiler vers le bas et cliquez sur Enregistrer les modifications.

Cela enregistrera votre page nouvellement personnalisée en tant que page de panier WooCommerce

Utilisation des modèles WooCommerce pour personnaliser la page du panier WooCommerce

Vous pouvez clairement voir que les étapes ci-dessus ne sont que les bases pour créer votre page de panier WooCommerce personnalisée. Bien sûr, beaucoup de travail est impliqué lorsqu’il s’agit de personnaliser votre page de panier WooCommerce avec Elementor. Mais vous êtes également totalement libre d’utiliser une conception de page de panier simple avec un peu plus de style et de personnalisation, mais pour un maximum d’avantages.

Si cette approche répond davantage à vos besoins, nous vous recommandons d’utiliser des modèles Elementor. Ceux-ci sont constitués de tonnes d’options de modèles et de plugins de modèles disponibles pour Elementor.

Pour configurer notre page de panier WooCommerce, nous utiliserons également un module complémentaire Elementor gratuit fourni avec des modèles de page de panier dédiés pour notre démo. Bien qu’il existe des tonnes de plugins de modules complémentaires et de modèles Elementor disponibles, nous utiliserons CoDesigner pour cette démo. C’est l’un des moyens les plus simples et sans tracas de préparer une page de panier parfaitement conçue pour votre site Web.

Commençons donc

Installez le plugin CoDesigner :

Ouvrez votre tableau de bord d’administration WordPress et accédez à Plugins > Ajouter un nouveau. Ensuite, utilisez la barre de recherche en haut à droite pour rechercher « CoDesigner » et cliquez sur le bouton Installer maintenant pour l’installer.

Une fois l’installation terminée, cliquez sur Activer pour terminer le processus d’installation et d’activation.

Activation des widgets du panier CoDesigner :

Avant d’ajouter votre widget CoDesigner à la page de votre panier, vous devez activer le widget

Alors ouvrez CoDesigner sur votre tableau de bord d’administration WP. Cela ouvrira le tableau de bord CodDesigner. Ensuite, cliquez sur Widgets.

Ensuite, faites défiler les sections du panier et activez tous les widgets situés en dessous. Ceux-ci seront ajoutés directement à votre menu Elementor Widgets. Désormais, vous pouvez ajouter directement votre widget personnalisé CoDesigner directement à la page de votre panier.

Enfin, cliquez sur Enregistrer les paramètres pour activer les widgets.

Utilisation des widgets et des modèles de panier CoDesigner :

Le processus de création et de personnalisation de la page du panier WooCommerce

Créez simplement une nouvelle page en cliquant sur Pages > Ajouter nouveau et nommez-la. Après cela, cliquez sur modifier avec Elementor comme ci-dessus.

Une fois votre nouvelle page ouverte

Ensuite, sous l’onglet Blocs, utilisez le menu déroulant Catégorie et sélectionnez Panier. Utilisez un design approprié et parfait pour votre site Web et cliquez sur Insérer.

Si vos widgets CoDesigner ont été activés, votre modèle de page de panier devrait s’afficher parfaitement. Bien sûr, il ne s’agit encore que d’un modèle, vous devez donc personnaliser le texte et les autres éléments manuellement.

Commençons

De même, faites la même chose pour les champs de texte en dessous.

Vous pouvez également cliquer sur chaque widget de panier et personnaliser des options supplémentaires telles que la vignette, les options de sous-total de l’article et les champs de quantité.

Tout comme pour les étapes mentionnées précédemment, vous pouvez également styliser et modifier tous les champs et widgets et personnaliser les couleurs, la typographie, le remplissage, etc. Cliquez simplement sur n’importe quel widget et utilisez l’onglet style et avancé. C’est aussi simple que cela !

Une fois que vous avez terminé, cliquez sur le bouton Publier pour enregistrer votre page de panier personnalisée ou enregistrez-la en tant que modèle de la même manière que mentionné précédemment.

Encore une fois, accédez à WooCommerce > Paramètres > Avancé et sélectionnez votre nouvelle page de panier sous le champ Page du panier. Cliquez ensuite sur Enregistrer les modifications pour terminer.

Vous devriez maintenant voir votre nouvelle page de panier sur votre interface

Conclusion :

Et cela termine notre guide sur Comment personnaliser la page de panier WooCommerce avec Elementor. Elementor est l’un des sites Web les plus puissantsbâtiment disponible pour personnaliser les sites WooCommerce et WordPress. Que vous utilisiez des widgets et des modèles complémentaires, vous disposez d’une myriade d’outils pour personnaliser chaque recoin de votre site Web.

Voici quelques bons conseils pour vous lorsque vous personnalisez la page de panier WooCommerce

• Assurez-vous que votre page de panier personnalisée est entièrement utilisable sur mobile et sur ordinateur grâce à l’option responsive.
• Utilisez les options de style de couleur et de typographie d’Elementor pour vous assurer que votre page de panier correspond au reste de la conception de votre thème.
• C’est une excellente idée de personnaliser votre page de panier et votre page de paiement afin qu’elles correspondent.
• Prenez en compte des éléments supplémentaires tels que les produits associés, les produits phares, les badges de confiance, etc. sur votre page de panier.

Avez-vous réussi à comprendre comment personnaliser la page de votre panier ? Vous rencontrez des difficultés avec la configuration de vos modules complémentaires ou modèles ? Faites-nous savoir

Si vous recherchez d’autres guides pour personnaliser diverses autres pages WooCommerce à l’aide d’Elementor, pourquoi ne pas consulter certains de nos autres articles ici :

• Comment personnaliser la page produit WooCommerce avec Elementor
• Créer un méga menu avec Elementor à l’aide du plugin Nav Menu
• Comment personnaliser la page de la boutique WooCommerce