Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter un calculateur de Livraison à votre site WordPress

D’après notre expérience, l’une des principales raisons pour lesquelles les clients abandonnent leur panier sur les sites d’e-commerce est d’être surpris par les frais d’expédition. Il est important de faire savoir à vos clients combien ils devront payer à l’avance.

Il est facile de permettre à vos internautes de calculer les frais de port sur votre site. Grâce à un calculateur d’expédition, les clients peuvent estimer avec précision le coût total d’un produit qu’ils devront payer à la distribution.

La mise à disposition d’un outil de personnalisation des frais de port contribue à la transparence de votre entreprise et à l’instauration d’un climat de confiance avec vos clients/clientes potentiels.

Au fil des ans, nous avons observé que les sites qui sont transparents sur leurs frais d’expédition et qui incluent des calculateurs de frais d’expédition ont tendance à avoir plus de succès que les magasins qui ne révèlent le coût que sur la page de validation de la commande.

Dans cet article, nous allons vous montrer comment ajouter facilement un calculateur d’expédition à votre site WordPress.

How to add a shipping calculator to your WordPress site

Qu’est-ce qu’une calculatrice de livraison et pourquoi l’utiliser ?

Un calculateur d’expédition aide à estimer automatiquement le coût total de la Livraison. Il affiche les frais de livraison et autres frais pertinents pour les clients/clientes, de sorte qu’ils n’ont pas à évaluer manuellement les tarifs et frais de distribution.

Différents facteurs entrent en jeu dans le calcul des frais de livraison. Certains d’entre eux comprennent le prix du produit, la destination, l’origine d’un envoi, le poids, les dimensions, le type de service de Livraison, et d’autres variables lors du calcul.

Le calcul manuel des frais de livraison peut prendre beaucoup de temps si votre stock en ligne comporte plusieurs commandes. De plus, le calcul manuel est source d’erreurs, ce qui peut avoir un impact sur la satisfaction des clients/clients.

L’utilisation d’une extension de calculateur de livraison pour votre site WordPress ou WooCommerce vous permettra de gagner beaucoup de temps et d’automatiser le processus.

Les clients/clientes peuvent simplement sélectionner leur Emplacement et voir ce que le produit coûtera réellement après la distribution. Cela vous aide à renforcer votre relation avec vos clients/clientes et à instaurer un climat de confiance.

Cela dit, voyons comment vous pouvez facilement ajouter un calculateur d’expédition à votre site WordPress. Nous afficherons également une façon de l’ajouter à votre magasin WooCommerce.

Vous pouvez cliquer sur les liens ci-dessous pour accéder à la section de votre choix :

Ajout d’un calculateur de Livraison dans WooCommerce

La meilleure façon d’ajouter un calculateur d’expédition dans WooCommerce est d’utiliser l’extension Calculateur d’expédition de la page produit pour WooCommerce. C’est une extension gratuite qui permet aux clients de calculer les frais de livraison avant d’ajouter un produit au panier.

Tout d’abord, vous devrez télécharger et installer le calculateur d’expédition de la page produit pour l’extension WooCommerce. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Note : Si vous n’avez pas encore de boutique réglée, vous pouvez suivre notre guide où nous décomposons ce dont vous aurez besoin pour configurer et lancer un stock WooCommerce.

Une fois activé, vous pouvez vous rendre dans WooCommerce  » Calculateur de Livraison pour configurer l’extension.

Configure shipping calculator settings

L’extension fonctionne hors de la boîte, et vous pouvez utiliser les réglages par défaut pour commencer. Cependant, il existe des options pour les modifier et personnaliser votre calculateur d’expédition.

Il est important de noter que l’extension utilisera les informations des réglages de la zone d’expédition dans WooCommerce lors du calcul des frais de port.

Configurer les zones de Livraison dans WooCommerce

Si vous n’avez pas configuré de zones d’expédition, vous devrez alors vous rendre dans WooCommerce  » Réglages depuis votre tableau de bord WordPress et passer à l’onglet  » Livraison « .

Add a shipping zone

Dans la section Zones de livraison, cliquez simplement sur le bouton « Ajouter une zone de livraison ».

Vous devez ensuite saisir un nom de zone et sélectionner des régions dans le menu déroulant. Vous pouvez ajouter plusieurs pays ou villes dans une même zone.

Enter shipping zone details

Ensuite, vous pouvez cliquer sur le bouton « Ajouter une méthode d’expédition ».

Une fenêtre surgissante s’ouvre alors.

WooCommerce propose 3 méthodes de livraison au choix. Vous pouvez sélectionner un ‘Tarif forfaitaire’ puis saisir un montant qui sera saisi/saisie pour la Livraison. Ou vous pouvez choisir les options‘Livraison gratuite‘ et ‘Enlèvement local’.

Select a shipping method

Lorsque vous avez terminé, il vous suffit de cliquer sur le bouton « Ajouter une méthode de livraison ».

Vous pouvez ajouter plusieurs méthodes de Livraison pour la zone et définir des conditions lorsqu’elles s’appliquent.

Ensuite, vous devez cliquer sur l’option « Modifier » sous vos méthodes de Livraison.

Edit shipping method

Une petite fenêtre s’ouvre alors, dans laquelle vous pouvez modifier le titre de la méthode, sélectionner si vous souhaitez que la méthode de Livraison soit taxable et saisir un coût.

Pour les frais, vous pouvez saisir un taux forfaitaire qui sera facturé lorsqu’un client/cliente ajoute un produit à son panier. Il existe également une option permettant de multiplier les frais de livraison par la quantité.

Enter details of shipping method

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les modifications ».

Vous pouvez maintenant retourner à la section des zones d’expédition pour voir vos zones, régions et méthodes d’expédition.

View shipping zone details

Modifier les Réglages du Calculateur de Livraison

Après avoir configuré les zones d’expédition, vous pouvez retourner sur WooCommerce  » Calculateur de Livraison pour modifier les Réglages du calculateur de Livraison de la page Produit pour l’extension WooCommerce.

Dans l’onglet Paramètres de base, vous pouvez modifier la position de la calculatrice sur la page du produit et la position des résultats de la calculatrice.

Si vous défilez vers le bas, vous verrez plus de réglages. Le plugin vous permet de modifier les messages utilisés dans l’extension, de charger automatiquement la méthode de livraison, et plus encore.

Save changes to shipping calculator

Lorsque vous avez terminé, il vous suffit de cliquer sur le bouton « Enregistrer les modifications » sur le côté ou en bas de la page.

Vous pouvez ensuite passer à l’onglet « Retirer des champs ». Consultez cette page pour connaître les facultatifs permettant de retirer n’importe quel champ du calculateur de livraison.

Par exemple, l’extension affiche par défaut les champs pays, état, ville et code postal. Vous pouvez désactiver les champs qui ne correspondent pas à vos zones de Livraison.

Remove fields from shipping calculator

Après cela, dirigez-vous vers l’onglet  » Design « . L’extension vous offre de multiples options pour modifier l’apparence du calculateur de livraison.

Par exemple, vous pouvez modifier les couleurs de l’arrière-plan et du texte pour afficher les méthodes de Livraison, ou choisir les couleurs des boutons qui apparaissent dans la calculatrice.

Edit design of shipping calculator

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Ensuite, vous pouvez visiter votre magasin WooCommerce pour voir le calculateur d’expédition en action.

Dans la capture d’écran ci-dessous, les clients/clientes devront d’abord sélectionner un Emplacement de distribution et cliquer sur le bouton « Mettre à jour l’adresse ».

Select your delivery location

Une fois que c’est fait, l’extension calculera automatiquement les frais de livraison que vous avez configurés dans la section zone de livraison et les ajoutera au coût total.

Ainsi, les clients/clientes connaîtront les frais de Livraison qu’ils devront payer en plus du coût du produit.

View shipping charges

Ajout d’un calculateur d’expédition simple à un site WordPress

Si vous n’avez pas de magasin WooCommerce et que vous souhaitez ajouter un calculateur d’expédition générique à votre site WordPress, alors vous pouvez utiliser WPForms.

C’est la meilleure extension WordPress de calculatrice qui vous permet de créer toutes sortes de formulaires en quelques clics. Par exemple, vous pouvez ajouter un formulaire de contact, des calculatrices, des sondages et des formulaires d’inscription en utilisant l’extension.

Tout d’abord, vous devez installer et activer l’extension WPForms. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Note: WPForms a une version gratuite. Cependant, vous aurez besoin du plan pro pour déverrouiller l’addon Calculs.

Lors de l’activation, visitez la page WPForms  » Réglages depuis le tableau de bord de WordPress pour saisir votre clé de licence. Vous pouvez trouver cette information dans votre compte sur le site de WPForms.

Adding a license key to the WPForms form builder plugin

Après cela, rendez-vous sur la page WPForms  » Addons et localisez le ‘Calculations Addon’.

Il vous suffit ensuite de cliquer sur le bouton « Installer le module complémentaire » pour l’activer sur votre site.

Install calculations addon

Ensuite, allez sur la page WPForms  » Add New (Ajouter une nouvelle) dans la barre latérale de l’administration de WordPress.

Ici, vous pouvez commencer par saisir un nom pour le formulaire de calculatrice que vous êtes sur le point de créer.

Ensuite, vous devez localiser le modèle « Formulaire de calcul des frais d’expédition ». Cliquez ensuite sur « Utiliser le modèle ».

Shipping cost calculator form template

Une fois que vous avez fait cela, le constructeur par glisser-déposer sera lancé sur votre écran. Ici, vous remarquerez un aperçu du formulaire sur la droite et des champs de formulaire sur la gauche.

Maintenant, vous pouvez cliquer sur les différents champs pour modifier leurs paramètres à votre guise. Pour en savoir plus, consultez notre guide du débutant sur l’ajout d’une calculatrice personnalisée dans WordPress.

Shipping cost calculator form

Ensuite, descendez jusqu’au champ « Frais d’expédition estimés » et ouvrez ses paramètres dans la colonne de gauche. Passez ensuite à l’onglet « Avancé » pour vérifier la formule de calcul utilisée dans le formulaire.

Vous pouvez également modifier les frais d’expédition à partir d’ici. Cependant, vous devrez utiliser le lien « Cheatsheet » en haut de page pour comprendre et mettre en œuvre les règles arithmétiques.

Configure calculations

Une fois que vous avez terminé, il vous suffit de cliquer sur le bouton « Enregistrer » en haut de la page pour stocker vos paramètres.

Ensuite, visitez la page où vous souhaitez ajouter votre formulaire de calcul des frais de port. Ici, cliquez sur le bouton  » Ajouter un bloc  » dans le coin supérieur gauche et ajoutez le bloc WPForms.

Add shipping cost calculator form

Ensuite, choisissez le formulaire que vous venez de créer dans le menu déroulant. Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour stocker vos paramètres.

Vous pouvez maintenant visiter votre site pour voir le formulaire en action.

Shipping cost calculator form preview

Ajout d’un calculateur d’expédition avancé sur un site WordPress

Si vous souhaitez ajouter un calculateur d’expédition plus complexe à votre site WordPress, nous vous recommandons Formidable Forms.

C’est une extension de formulaire de contact populaire pour WordPress qui vous permet de créer des formulaires avancés et complexes comme des calculatrices, des annuaires et des applications web.

Pour ce tutoriel, nous utiliserons le plan Formidable Forms Pro, qui comprend des champs de prix et plus d’options de personnalisation.

Tout d’abord, vous devrez installer et activer les extensions Formidable Forms Lite et Formidable Forms Pro. L’extension Lite est gratuite, et l’extension premium y ajoute des fonctionnalités plus avancées.

Pour plus de détails, consultez notre guide sur l’installation d’une extension WordPress.

Lors de l’activation, vous devrez vous rendre sur Formidable  » Réglages globaux depuis le tableau de bord WordPress. De là, vous pouvez cliquer sur le lien  » Cliquez pour saisir une clé de licence manuellement « .

The Formidable Forms license page

Saisissez ensuite la clé de licence et cliquez sur le bouton « Enregistrer la licence ».

Vous pouvez trouver la clé de licence dans votre zone de compte Formidable Forms.

Enter Formidable Forms license key

Ensuite, il faut aller dans Formidable  » Formulaires pour ajouter un nouveau formulaire.

Il suffit de cliquer sur le bouton « + Ajouter une nouvelle » en haut de la page.

Create a new form

Ensuite, Formidable Formulaires affichera différents modèles parmi lesquels vous pourrez choisir. Vous pouvez choisir parmi plusieurs catégories, comme les opérations commerciales, la calculatrice, les formulaires conversationnels, et plus encore.

Formidable Forms n’offre pas de modèle prédéfini pour un calculateur d’expédition. Cependant, vous pouvez en créer un en utilisant un modèle de formulaire vierge.

Sélectionnez le modèle « Formulaire vierge ».

Select formidable forms template

Dans l’écran suivant, vous devez saisir un nom pour votre formulaire.

Il existe également une option permettant d’insérer le Modèle dans une application. Cependant, pour ce tutoriel, nous laisserons cette option sur le réglage par défaut.

Après avoir saisi/saisie le nom du formulaire, cliquez sur le bouton « Créer ».

Enter a name for new form template

Ensuite, vous verrez le Constructeur de formulaires par glisser-déposer.

Vous pouvez simplement faire glisser n’importe quel champ de formulaire depuis le menu de gauche et le déposer sur le modèle.

Add form fields to blank form

Par exemple, vous pouvez ajouter au Modèle des champs de formulaire tels que le nom, l’e-mail, le numéro de téléphone, etc.

Pour créer un calculateur d’expédition, il suffit de défiler jusqu’à la section Champs de prix sur la gauche et d’ajouter un champ de formulaire « Produit ».

Add a product form field

Sélectionné, le champ du formulaire produit peut être personnalisé.

Par exemple, nous avons modifié le libellé du champ et le type de produit. Formidable Forms vous permet également d’afficher les produits sous forme de cases à cocher, de listes déroulantes, de boutons radio, de produits individuels ou définis par l’utilisateur.

Edit product form field

En outre, vous pouvez ajouter vos produits et leurs prix dans le menu Options de produits situé à gauche.

Maintenant que vous avez ajouté vos produits, l’étape suivante consiste à ajouter vos régions et frais de livraison. Pour ce faire, vous pouvez à nouveau ajouter un champ de formulaire Produit dans la section Champs de tarification du menu de gauche.

Ensuite, vous devrez modifier son libellé et son type de produit, puis saisir chaque région individuellement ainsi que ses frais d’expédition.

Add shipping regions to form

Dans la capture d’écran ci-dessus, nous avons modifié le libellé en Régions de Livraison et changé les types de produits en cases à cocher. À partir de là, nous avons ajouté différentes zones de livraison et leur coût dans la section Options du produit.

Une fois cela fait, vous devrez afficher un total pour votre calculateur de Livraison. Pour ce faire, il suffit d’ajouter le champ de formulaire Total dans la section Champs de tarification du Modèle.

Add a total form field

Ensuite, vous pouvez sélectionner le champ de formulaire Total et modifier son libellé, ajouter une description, etc.

Formidable Forms vous permet également d’ajouter une logique conditionnelle aux champs du formulaire et de les afficher en fonction des réponses de l’utilisateur.

Edit total form field

Ensuite, vous pouvez passer à l’onglet « Style » en haut de la page.

Formidable Version propose des styles prédéfinis pour votre formulaire. Il suffit d’en sélectionner un ou de créer un nouveau style. Pour ce tutoriel, nous utiliserons le style par défaut de Formidable.

Select form style

Ensuite, vous pouvez également modifier les réglages des formulaires dans Formidable Forms.

Il vous suffit de passer à l’onglet « Réglages » en haut de la page. Vous y trouverez des réglages généraux permettant de modifier le titre du formulaire, d’ajouter une description, etc.

Change form settings in formidable

Il existe également des options pour les actions et les notifications, les droits sur les formulaires et la possibilité de planifier votre formulaire de calculatrice de livraison.

Une fois les réglages définis, enregistrez vos modifications. Vous êtes maintenant prêt à embarquer votre calculatrice n’importe où sur votre site.

Pour commencer, vous pouvez cliquer sur le bouton « Contenu embarqué » dans le Constructeur de formulaires en haut de la page. Cela vous donnera plusieurs options, comme ajouter le formulaire à une page existante, créer une nouvelle page, ou l’insérer manuellement.

Embed your shipping calculator form

Pour les besoins de ce tutoriel, nous choisirons l’option « Créer une nouvelle page ».

Saisissez ensuite un nom pour votre nouvelle page et cliquez sur le bouton « Créer une page ».

Enter a name for new page

À partir de cette page, vous verrez un aperçu du formulaire du calculateur d’expédition dans l’éditeur de contenu de WordPress.

Publiez votre page et visitez votre site pour voir le calculateur de livraison en action.

Shipping calculator preview

Nous espérons que cet article vous a aidé à apprendre comment ajouter un calculateur d’expédition à votre site WordPress. Vous pouvez également consulter notre guide sur la façon d’afficher des recommandations de produits sur WordPress et les meilleures extensions WooCommerce.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

2 commentairesLaisser une réponse

  1. Ralph

    This is interesting guide!
    My wife has home design blog and plan to sell self made furniture. We thought we would just write shipping cost as a plain text, but this is way better.

    • WPBeginner Support

      Glad we could share how to add this :)

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.