Conception d’espace client avancé avec WooCommerce

4 385 vues

Publié le

Produire la meilleure expérience utilisateur possible pour les clients / utilisateurs de votre site e-commerce, un challenge que nous vous proposons de relever avec WooCommerce, solution open source disponible pour WordPress. Après avoir défini ce qu'est un espace client avancé, nous vous expliquerons comment les concevoir et nous terminerons par l'étude de cas du projet SEO Camp.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 385
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 377
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conception d’espace client avancé avec WooCommerce

  1. 1. CONCEPTION D’ESPACE CLIENT AVANCÉ 
 AVEC WOOCOMMERCE AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  2. 2. NOS TITRES DE NOBLESSE Aurélien Denis @wpchannel Président de WordPress Francophone Fondateur de WP Alacarte Co-fondateur et président de l'association 
 WordPress Meet & eXchange Co-organisateur du WPMX Day 2015 (Biarritz) Fondateur de Neticpro Fondateur de WP Channel Mickaël Gris @mickaelgris « Digital Native »
 Converti à WordPress Développeur Web
 Agence Neticpro Co-fondateur et trésorier
 de l'association WordPress Meet & eXchange Co-organisateur du WPMX Day 2015 (Biarritz) AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  3. 3. AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  4. 4. WOOCOMMERCE EN 2016 Parts de marché par pays (source : BuiltWith) Autre 4,8 % France 3,3 % Italie 3,5 % Canada 3,7 % Pays-Bas 4,8 % Australie 5,7 % Allemagne 6,2 % Grande-Bretagne 8,1 % États-Unis 59,9 % AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  5. 5. WOOCOMMERCE EN 2016 Parts de marché par solution (source : BuiltWith) Shopify 4,2 % WooCommerce 30,5 % Magento 6,3 % Autre 58,9 % AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  6. 6. COMMENT DÉFINIR UN 
 ESPACE CLIENT ? AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  7. 7. ESPACE DE BASE CHEZ WOOCOMMERCE L'espace client WooCommerce, out of the box : 1. Consultation / modification de mes informations personnelles 2. Consultation de l'historique de mes commandes 3. Téléchargements de produits virtuels (le cas échéant) AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  8. 8. Page « Mon compte » Thème gratuit Storefront AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  9. 9. UN ESPACE CLIENT OPTIMAL AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  10. 10. UN ESPACE CLIENT OPTIMAL Des factures PDF Suivi du colis Retour produit (SAV) Gérer mes moyens de paiements Gestion de paiements récurrents Liste de vos envies (wishlist) Avantages clients Gestion des communications AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  11. 11. UN ESPACE CLIENT POUR DES MEMBRES Accès à du contenu privatif Inscription à des événements Alertes emplois Badges Cotisations Clés de licences Annonces Gestion de profil avancé Cas particulier AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  12. 12. COMMENT CONCEVOIR CES ESPACES ? AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  13. 13. 1ÈRE ÉTAPE : DÉVELOPPER LE THÈME • Pour un espace client sur-mesure, on optera obligatoirement pour un thème sur-mesure • Identifier les templates PHP à surclasser dans votre thème • Utiliser des hooks pour réinjecter les composants aux bons emplacements AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  14. 14. 2E ÉTAPE : REMONTER LES FLUX D'INFORMATIONS • Utiliser des WP_Query pour aller chercher les flux de contenus en base de données • Injecter des shortcodes pour les extensions complémentaires • Récupérer les informations de profil utilisateur avec la fonction get_user_meta($user_id, $key, $single); • Recours à des API externes AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  15. 15. 3E ÉTAPE : TESTEZ ET RETESTEZ ! • Procédez à des tests unitaires • Ayez recours à un panel de beta-testeurs (tests A / B) • Outils pratiques : Inspectlet, extension Opquast, outils de développement de votre navigateur favori, etc. AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  16. 16. CONSEILS UI / UX • Soyez accessibles à tous vos clients ! • Pensez mobile ! Ne surchargez pas vos interfaces utilisateurs • Utilisez des boutons d'actions clairement identifiés • Respectez la charte graphique du site (sans oublier les messages d'erreurs) AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  17. 17. CAS PRATIQUE : SITE SEO CAMP AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  18. 18. AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  19. 19. LES EXTENSIONS UTILISÉES • WooCommerce • WooCommerce Subscriptions • WooCommerce Memberships • The Events Calendar • Events Tickets Plus • WP Job Manager + add-ons • WooCommerce PDF Invoices & Packing Slips • WooCommerce Stripe Gateway • WP Security Audit Log • Advanced Custom Fields Pro AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  20. 20. EXEMPLES DE HOOKS • woocommerce_before_main_content • woocommerce_after_main_content • woocommerce_sidebar • woocommerce_single_product_summary • woocommerce_product_description_heading • woocommerce_product_additional_information_heading AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  21. 21. EXEMPLE DE FICHIERS SURCLASSÉS • WooCommerce et ses extensions supportent le surclassement • Nécessité de maintenir le code à jour en cas de fonctions dépréciées AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  22. 22. AIDE-MÉMOIRE DES TECHNOLOGIES UTILISÉES • Types de contenu personnalisé (Custom Post Types) • Taxonomie personnalisée (Custom Taxonomies) • Champs personnalisés (Custom Fields) • Twitter Bootstrap pour le responsive design • WP_Query (requêtes sur contenu) • HDPI • Langages : HTML5, CSS3, PHP, jQuery • Hooks • Poedit pour les traductions AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  23. 23. « Les clients ne peuvent pas toujours vous dire ce qu'ils veulent, mais ils sont toujours capable d'exprimer ce qui ne va pas. » Carly Fiorina, ex-PDG de HP AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  24. 24. ÉCOUTEZ VOS CLIENTS / UTILISATEURS AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
  25. 25. MERCI ! Vidéos par Andrew Nater et Alexia Adana AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016

×