Pourquoi le mobile est devenu le canal de vente n°1 en Afrique

En Afrique subsaharienne, plus de 70 % du trafic internet passe par le smartphone. Au Sénégal, selon l’ARTP, le taux de pénétration du mobile dépasse 120 % (beaucoup de personnes ont plusieurs cartes SIM). La conséquence directe : vos clients naviguent, comparent et achètent depuis leur téléphone. Si votre boutique en ligne n’est pas optimisée pour cette réalité, vous perdez la majorité de vos ventes potentielles.

Le m-commerce (mobile commerce) ne se limite pas à avoir un site « responsive ». C’est une approche complète qui repense le parcours d’achat pour les contraintes spécifiques du mobile : écran petit, connexion parfois lente, paiement par mobile money, navigation au pouce. Les boutiques qui maîtrisent le m-commerce en Afrique de l’Ouest voient leurs taux de conversion mobile passer de 0,5-1 % à 2-4 %.

Auditer la performance mobile de votre boutique

Avant d’optimiser, mesurez. Ouvrez Google Analytics > Audience > Mobile > Vue d’ensemble et comparez trois chiffres : le pourcentage de trafic mobile vs desktop, le taux de conversion mobile vs desktop, et le taux de rebond mobile vs desktop. Si votre taux de conversion mobile est inférieur de moitié à celui du desktop, votre site a un problème d’expérience mobile.

Testez ensuite votre site avec ces outils gratuits :

Google PageSpeed Insights (pagespeed.web.dev) — entrez votre URL et regardez le score mobile. Visez au minimum 60/100, idéalement 80+
Google Mobile-Friendly Test — vérifie que Google considère votre site comme adapté au mobile
WebPageTest.org — testez avec une connexion 3G lente et un appareil mobile pour simuler les conditions réelles au Sénégal

Faites aussi le test le plus simple : achetez un produit sur votre propre site depuis votre téléphone. Chronométrez chaque étape. Si le processus prend plus de 3 minutes de la page d’accueil à la confirmation de commande, il est trop long.

Vitesse de chargement : le facteur critique

En Afrique de l’Ouest, la connexion 4G n’est pas toujours stable et beaucoup d’utilisateurs naviguent en 3G. Google recommande un temps de chargement mobile inférieur à 3 secondes, mais chaque seconde supplémentaire fait perdre 20 % de conversions. Avec une connexion 3G typique au Sénégal, votre page ne devrait pas dépasser 1,5 Mo au total.

Optimiser les images

Les images représentent 60 à 80 % du poids d’une page e-commerce. Voici les actions concrètes :

Convertissez en WebP : ce format réduit la taille de 30 à 50 % par rapport au JPEG sans perte de qualité visible. Sur WordPress, le plugin ShortPixel (gratuit jusqu’à 100 images/mois) convertit automatiquement
Redimensionnez avant upload : une image produit n’a pas besoin de dépasser 800×800 pixels pour le mobile. Uploadez en 800×800 max au lieu de 3000×3000
Activez le lazy loading : les images hors de l’écran ne se chargent que quand l’utilisateur fait défiler. WordPress l’active par défaut depuis la version 5.5, mais vérifiez que votre thème ne le désactive pas
Utilisez des thumbnails adaptés : sur la page catalogue, affichez des miniatures de 300x300px maximum, pas l’image en taille réelle

Réduire les requêtes et le code

Minifiez CSS et JavaScript : le plugin LiteSpeed Cache (gratuit) ou WP Rocket (payant) le font automatiquement
Désactivez les plugins inutiles : chaque plugin ajoute du CSS et du JS. Un site WooCommerce ne devrait pas avoir plus de 15-20 plugins actifs
Activez le cache navigateur : LiteSpeed Cache ou WP Rocket configurent les en-têtes de cache pour que les visiteurs récurrents chargent les pages quasi instantanément
Utilisez un CDN : Cloudflare (gratuit) distribue vos fichiers statiques depuis des serveurs proches de vos visiteurs. Le plan gratuit suffit pour la plupart des boutiques

Concevoir un parcours d’achat mobile fluide

La navigation au pouce

Sur mobile, l’utilisateur navigue avec son pouce. La zone de confort du pouce est le tiers inférieur de l’écran. Placez les boutons d’action importants (Ajouter au panier, Acheter, Filtrer) dans cette zone. Les éléments importants doivent mesurer au minimum 44×44 pixels (recommandation Apple) avec un espacement d’au moins 8px entre les éléments tactiles.

Concrètement pour WooCommerce :

Le bouton « Ajouter au panier » doit être visible sans scroller sur la fiche produit. Utilisez un bouton sticky (fixe) en bas de l’écran
Le menu principal doit être un menu hamburger avec des catégories larges et faciles à toucher
La barre de recherche doit être immédiatement visible, pas cachée derrière une icône
Les filtres produits doivent s’ouvrir en plein écran sur mobile, pas dans un petit dropdown

Simplifier le checkout mobile

Le checkout est le point où vous perdez le plus de clients sur mobile. Chaque champ de formulaire supplémentaire réduit la conversion de 7 %. Les règles :

Maximum 5-7 champs : Nom complet, Téléphone, Adresse de livraison (ville + quartier), Mode de paiement. Supprimez tout le reste
Un seul écran si possible : évitez les checkouts en 3-4 étapes. Un formulaire unique sur une seule page convertit mieux
Clavier adapté : utilisez type="tel" pour le champ téléphone (affiche le clavier numérique), type="email" pour l’email
Auto-complétion : activez l’attribut autocomplete sur les champs pour que le navigateur pré-remplisse les informations sauvegardées
Pas d’inscription obligatoire : proposez le checkout en tant qu’invité. Activez cette option dans WooCommerce > Réglages > Comptes et confidentialité

Adapter le formulaire au contexte sénégalais

Les adresses au Sénégal ne suivent pas le format occidental. Remplacez les champs « Code postal » et « Numéro de rue » (inutiles dans beaucoup de quartiers) par :

Ville (dropdown : Dakar, Thiès, Saint-Louis, etc.)
Quartier / Zone (champ texte libre)
Point de repère (« En face de la mosquée », « Derrière le marché »)
Numéro WhatsApp pour les instructions de livraison

Pour personnaliser les champs de checkout WooCommerce, utilisez le plugin Checkout Field Editor (gratuit) ou ajoutez ce filtre dans votre functions.php :

add_filter('woocommerce_checkout_fields', function($fields) {
    // Supprimer les champs inutiles
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_2']);
    
    // Ajouter le champ Quartier
    $fields['billing']['billing_quartier'] = array(
        'label' => 'Quartier / Zone',
        'required' => true,
        'class' => array('form-row-wide'),
        'priority' => 55,
    );
    
    // Ajouter Point de repère
    $fields['billing']['billing_repere'] = array(
        'label' => 'Point de repère',
        'placeholder' => 'Ex: en face de la mosquée',
        'required' => false,
        'class' => array('form-row-wide'),
        'priority' => 56,
    );
    
    return $fields;
});

Intégrer les paiements mobiles

Au Sénégal, les cartes bancaires ne représentent qu’une fraction des paiements en ligne. Le mobile money (Wave, Orange Money, Free Money) est le moyen de paiement dominant. Si votre boutique n’accepte que les cartes Visa/Mastercard, vous excluez la majorité de vos clients potentiels.

Wave

Wave est l’application de paiement la plus utilisée au Sénégal avec plus de 10 millions d’utilisateurs. Pour l’intégrer à WooCommerce, utilisez le plugin WooCommerce Wave Payment ou passez par un agrégateur comme PayDunya qui gère Wave, Orange Money et Free Money en un seul plugin. L’avantage de PayDunya : une seule intégration technique, plusieurs moyens de paiement.

Orange Money

Orange Money est la deuxième plateforme de paiement mobile au Sénégal. L’intégration passe généralement par l’API Orange Money ou par un agrégateur (PayDunya, CinetPay). Les frais de transaction sont de 1 à 3 % selon le volume.

Paiement à la livraison

Le paiement à la livraison (Cash on Delivery) reste populaire car il rassure les acheteurs méfiants vis-à-vis du paiement en ligne. Activez-le dans WooCommerce > Réglages > Paiements. Pour limiter les commandes non récupérées, demandez un acompte de 20-30 % via mobile money avant la livraison.

Le bouton sticky « Ajouter au panier » — implémenter avec du CSS

Un bouton d’achat fixe en bas de l’écran mobile augmente les conversions de 8 à 12 % en moyenne. Voici le CSS à ajouter dans Apparence > Personnaliser > CSS additionnel :

/* Bouton Ajouter au panier sticky sur mobile */
@media (max-width: 768px) {
    .single-product .cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px 16px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 999;
        display: flex;
        gap: 10px;
        align-items: center;
    }
    
    .single-product .cart .qty {
        width: 60px;
        text-align: center;
    }
    
    .single-product .cart .single_add_to_cart_button {
        flex: 1;
        padding: 14px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    /* Ajouter de l'espace en bas pour ne pas couvrir le contenu */
    .single-product .summary {
        padding-bottom: 80px;
    }
}

Notifications push et relance WhatsApp

Sur mobile, les notifications push et WhatsApp sont les canaux de relance les plus efficaces, bien devant l’email (qui est peu consulté sur téléphone en Afrique de l’Ouest).

Notifications push web

Le plugin OneSignal (gratuit jusqu’à 10 000 abonnés) permet d’envoyer des notifications push aux visiteurs qui acceptent. Utilisez-les pour annoncer les nouvelles collections, les ventes flash et les promotions. Limitez-vous à 2-3 notifications par semaine pour éviter les désabonnements.

Relance WhatsApp automatisée

Intégrez un bouton WhatsApp sur chaque fiche produit avec un message pré-rempli : « Bonjour, je suis intéressé(e) par [nom du produit] à [prix] FCFA ». Le plugin Click to Chat (gratuit) ajoute un bouton WhatsApp flottant. Pour les relances de panier abandonné par WhatsApp, WA Commerce ou AiSensy permettent d’envoyer des messages automatiques via l’API WhatsApp Business.

Checklist d’optimisation m-commerce

Vérifiez chaque point avant de considérer votre boutique mobile comme prête :

☐ Score PageSpeed mobile supérieur à 60/100
☐ Temps de chargement inférieur à 4 secondes en 3G
☐ Poids total de la page d’accueil inférieur à 1,5 Mo
☐ Toutes les images en WebP avec lazy loading
☐ Bouton « Ajouter au panier » visible sans scroller
☐ Checkout en maximum 7 champs
☐ Checkout invité activé (pas d’inscription obligatoire)
☐ Wave et/ou Orange Money activés comme moyens de paiement
☐ Champs d’adresse adaptés au contexte local (quartier, point de repère)
☐ Barre de recherche visible sur mobile
☐ Boutons tactiles de 44px minimum avec espacement suffisant
☐ WhatsApp intégré pour le support client
☐ Notifications push configurées
☐ Test d’achat complet réalisé depuis un smartphone

Guide : Le m-commerce — optimiser pour l’achat sur mobile