CONCEPTION D’ESPACE
CLIENT AVANCÉ 

AVEC WOOCOMMERCE
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
NOS TITRES DE NOBLESSE
Aurélien Denis @wpchannel
Président de WordPress Francophone
Fondateur de WP Alacarte
Co-fondateur ...
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
WOOCOMMERCE EN 2016
Parts de marché par pays (source : BuiltWith)
Autre
4,8 %
France
3,3 %
Italie
3,5 %
Canada
3,7 %
Pays-...
WOOCOMMERCE EN 2016
Parts de marché par solution (source : BuiltWith)
Shopify
4,2 %
WooCommerce
30,5 %
Magento
6,3 %
Autre...
COMMENT DÉFINIR UN 

ESPACE CLIENT ?
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
ESPACE DE BASE CHEZ WOOCOMMERCE
L'espace client WooCommerce, out of the box :
1. Consultation / modification de mes informa...
Page « Mon compte »
Thème gratuit Storefront
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
UN ESPACE CLIENT
OPTIMAL
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
UN ESPACE CLIENT OPTIMAL
Des factures PDF
Suivi du colis
Retour produit (SAV)
Gérer mes moyens de paiements
Gestion de pai...
UN ESPACE CLIENT POUR DES MEMBRES
Accès à du contenu privatif
Inscription à des événements
Alertes emplois
Badges
Cotisati...
COMMENT CONCEVOIR
CES ESPACES ?
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
1ÈRE ÉTAPE : DÉVELOPPER LE THÈME
• Pour un espace client sur-mesure, on optera obligatoirement pour
un thème sur-mesure
• ...
2E ÉTAPE : REMONTER LES FLUX D'INFORMATIONS
• Utiliser des WP_Query pour aller chercher les flux de contenus en
base de don...
3E ÉTAPE : TESTEZ ET RETESTEZ !
• Procédez à des tests unitaires
• Ayez recours à un panel de beta-testeurs (tests A / B)
...
CONSEILS UI / UX
• Soyez accessibles à tous vos clients !
• Pensez mobile ! Ne surchargez pas vos interfaces utilisateurs
...
CAS PRATIQUE : SITE
SEO CAMP
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
LES EXTENSIONS UTILISÉES
• WooCommerce
• WooCommerce Subscriptions
• WooCommerce Memberships
• The Events Calendar
• Event...
EXEMPLES DE HOOKS
• woocommerce_before_main_content
• woocommerce_after_main_content
• woocommerce_sidebar
• woocommerce_s...
EXEMPLE DE FICHIERS SURCLASSÉS
• WooCommerce et ses extensions
supportent le surclassement
• Nécessité de maintenir le cod...
AIDE-MÉMOIRE DES TECHNOLOGIES UTILISÉES
• Types de contenu personnalisé
(Custom Post Types)
• Taxonomie personnalisée
(Cus...
« Les clients ne peuvent pas toujours vous
dire ce qu'ils veulent, mais ils sont toujours
capable d'exprimer ce qui ne va ...
ÉCOUTEZ VOS CLIENTS / UTILISATEURS
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
MERCI !
Vidéos par Andrew Nater et Alexia Adana
AURÉLIEN DENIS & MICKAËL GRIS - WORDCAMP PARIS - 6 FÉVRIER 2016
Conception d’espace client avancé avec WooCommerce
Conception d’espace client avancé avec WooCommerce
Conception d’espace client avancé avec WooCommerce
Prochain SlideShare
Chargement dans…5
×

Conception d’espace client avancé avec WooCommerce

7 477 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
  • Soyez le premier à commenter

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

×