SlideShare une entreprise Scribd logo
CONCEVOIR UNE
BOUTIQUE WOOCOMMERCE
(VRAIMENT) SEXY !
WordCamp Paris 21 avril 2023
1
AVERTISSEMENT
2
PRÉAMBULE
• Cette présentation s’adresse aux concepteurs de sites e-commerce
• Je ne suis pas rémunéré par WooCommerce ni les éditeurs mentionnés
• Le contenu est 100% écrit par un humain
3
EN CHIFFRES
4
+11ANS D’EXISTENCE
+800EXTENSIONS OFFICIELLES
+75THÈMES OFFICIELS
+5MILLIONS D’INSTALLATIONS ACTIVES
5
ÇA PÈSE DANS LE GAME !
6
7
« WOOCOMMERCE C’EST
MOCHE, C’EST PAS VENDEUR »
8
9
Page Boutique
10
APERÇU BRUT
DE FONDERIE
AVEC LE THÈME
STOREFRONT
« COMME LA PLUPART DES OUTILS OPEN
SOURCE, DE BASE ÇA DONNE PAS ENVIE MAIS
ON PEUT TOUT FAIRE ET SE FAIRE IADER »
11
#0 - ENGAGER UN
UX / UI DESIGNER
12
• Préalable indispensable à la conception d’un thème sur-mesure pour
WooCommerce
• Utiliser des outils modernes comme Figma ou Adobe XD qui prennent en
charge les interactions et les animations
• Empêche le développeur de « faire à sa sauce »
#0 - ENGAGER UN UX / UI DESIGNER
13
14
#1 - SOIGNER
L’EXPÉRIENCE D’ACHAT
15
#1 - SOIGNER L’EXPÉRIENCE D’ACHAT
• Grille de produits avec facettes dynamiques en Ajax
• Gestion des variations produits avec des couleurs ou des visuels
• Panier amélioré en Ajax
• Validation de commande par étape avec coupon discret
16
#1 - SOIGNER L’EXPÉRIENCE D’ACHAT
• Utiliser les blocs o
ffi
ciels pour WooCommerce (encore quelques limites
techniques bloquantes)
• Avoir recours à des extensions comme WooCommerce Better Usability
• Surclasser les templates WooCommerce
• Utiliser les hooks
17
18
19
20
21
22
#2 - OPTIMISER
LA RELATION CLIENT
23
• Des mails personnalisés avec un éditeur de blocs (Yaymail + AutomateWoo)
• Un suivi de livraison par SMS (Twilio), mail et espace client
• Live chat / chatbot
24
#2 - OPTIMISER LA RELATION CLIENT
25
#3 - FOURNIR UNE
EXPÉRIENCE PERSONNALISÉE
26
#3 - FOURNIR UNE EXPÉRIENCE PERSONNALISÉE
• Accès à du contenu privatif sur abonnement
• Génération de contenus personnalisés par rapport à des préférences
utilisateur
• Gestion de pro
fi
ls utilisateurs à des
fi
ns marketing
• Formulaires de données interactives
• Espace client entièrement personnalisé
27
28
#4 - BOOSTER LES
PERFORMANCES
29
• Agir sur la base de données : https://www.getrouty.com/blog/slow-
woocommerce-backend-try-this/
• WP Rocket + Redis
• Imagify pour la compression des images + génération WebP
• Serveur dédié à partir de 1 000 visiteurs / jours et plusieurs dizaines de
commandes / jour
• Query Monitor (extension gratuite) pour identi
fi
er les requête lentes et
autres erreurs
#4 - BOOSTER LES PERFORMANCES
30
#5 - ENRICHIR
LE BACK-OFFICE
31
#5 - ENRICHIR LE BACK-OFFICE
• Personnaliser les vues produits avec Admin Columns Pro
• Des champs supplémentaires sur les
fi
ches produits avec Advanced
Custom Fields Pro ou via les hooks natifs
• Personnaliser les formulaires de pro
fi
l avec Advanced Custom Fields
Extended
• Interfacer la donnée avec des API tierces (SendGrid, Notion, Instagram,
logisticien, etc.)
32
33
EN RÉSUMÉ
Par ordre de di
ffi
culté :
1. Utiliser les nouveaux blocs WooCommerce
2. Enrichir les fonctionnalités par des extensions sélectionnées avec soin
3. Développer vos propres thèmes et extensions pour conserver la maîtrise
du design system
4. Former vos clients et partenaires avec pédagogie
34
MERCI !
contact@wpchannel.com
+33 (0)6 33 39 71 45
35

Contenu connexe

Similaire à Concevoir une boutique WooCommerce (vraiment) sexy

fedia_maha.pptx
fedia_maha.pptxfedia_maha.pptx
fedia_maha.pptx
MahaJabri
 
Cours Prestashop 1.6 / Webbax - Ecole club Migros
Cours Prestashop 1.6 / Webbax - Ecole club MigrosCours Prestashop 1.6 / Webbax - Ecole club Migros
Cours Prestashop 1.6 / Webbax - Ecole club Migros
Germain Tenthorey
 
Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...
Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...
Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...
Hervé Bourdon
 
TechSolCom présente IBM Smarter Commerce
TechSolCom présente IBM Smarter CommerceTechSolCom présente IBM Smarter Commerce
TechSolCom présente IBM Smarter Commerce
TechSolCom
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
Fabrice Ducarme
 
Smile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerceSmile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerce
Swissgento eCom Genève
 
REX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerceREX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerce
Web Performance Paris
 
Présentation widgets J'aime Attendre
Présentation widgets J'aime AttendrePrésentation widgets J'aime Attendre
Présentation widgets J'aime Attendre
Turba
 
OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...
OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...
OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...
OroVibe
 
Comment optimiser vos pages d'atterrissage
Comment optimiser vos pages d'atterrissageComment optimiser vos pages d'atterrissage
Comment optimiser vos pages d'atterrissage
WSI France
 
E-commerce : gagner la course à la digitalisation pour votre business B2B.
E-commerce : gagner la course à la digitalisation pour votre business B2B.E-commerce : gagner la course à la digitalisation pour votre business B2B.
E-commerce : gagner la course à la digitalisation pour votre business B2B.
Virtua S.A.
 
Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...
Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...
Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...
Vaisonet
 
Les clés du tunnel d’achat parfait - Masterclass Visiplus Hervé Bourdon
Les clés du tunnel d’achat parfait - Masterclass Visiplus Hervé BourdonLes clés du tunnel d’achat parfait - Masterclass Visiplus Hervé Bourdon
Les clés du tunnel d’achat parfait - Masterclass Visiplus Hervé Bourdon
Hervé Bourdon
 
Créateurs d’entreprises, mode d’emploi pour vendre en ligne
Créateurs d’entreprises, mode d’emploi pour vendre en ligne Créateurs d’entreprises, mode d’emploi pour vendre en ligne
Créateurs d’entreprises, mode d’emploi pour vendre en ligne
Lilian FOURCADIER
 
Atelier e-Business : Mon entreprise en ligne
Atelier e-Business : Mon entreprise en ligneAtelier e-Business : Mon entreprise en ligne
Atelier e-Business : Mon entreprise en ligne
Xavier Masclaux
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
ambin_fr
 
Meetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec AzureMeetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec Azure
Samir Arezki ☁
 
l echangeur présentation hpsc
l echangeur présentation hpscl echangeur présentation hpsc
l echangeur présentation hpsc
hpsc
 
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
SEO CAMP
 
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
MXO | agence totale
 

Similaire à Concevoir une boutique WooCommerce (vraiment) sexy (20)

fedia_maha.pptx
fedia_maha.pptxfedia_maha.pptx
fedia_maha.pptx
 
Cours Prestashop 1.6 / Webbax - Ecole club Migros
Cours Prestashop 1.6 / Webbax - Ecole club MigrosCours Prestashop 1.6 / Webbax - Ecole club Migros
Cours Prestashop 1.6 / Webbax - Ecole club Migros
 
Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...
Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...
Comment exploser votre taux de conversion avec un tunnel d'achat parfait ? He...
 
TechSolCom présente IBM Smarter Commerce
TechSolCom présente IBM Smarter CommerceTechSolCom présente IBM Smarter Commerce
TechSolCom présente IBM Smarter Commerce
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
 
Smile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerceSmile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerce
 
REX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerceREX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerce
 
Présentation widgets J'aime Attendre
Présentation widgets J'aime AttendrePrésentation widgets J'aime Attendre
Présentation widgets J'aime Attendre
 
OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...
OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...
OroVibe 2017 - Comment améliorer la performance Web pour une expérience B2B p...
 
Comment optimiser vos pages d'atterrissage
Comment optimiser vos pages d'atterrissageComment optimiser vos pages d'atterrissage
Comment optimiser vos pages d'atterrissage
 
E-commerce : gagner la course à la digitalisation pour votre business B2B.
E-commerce : gagner la course à la digitalisation pour votre business B2B.E-commerce : gagner la course à la digitalisation pour votre business B2B.
E-commerce : gagner la course à la digitalisation pour votre business B2B.
 
Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...
Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...
Comment intégrer WooCommerce dans le SI de votre client ou de votre entrepris...
 
Les clés du tunnel d’achat parfait - Masterclass Visiplus Hervé Bourdon
Les clés du tunnel d’achat parfait - Masterclass Visiplus Hervé BourdonLes clés du tunnel d’achat parfait - Masterclass Visiplus Hervé Bourdon
Les clés du tunnel d’achat parfait - Masterclass Visiplus Hervé Bourdon
 
Créateurs d’entreprises, mode d’emploi pour vendre en ligne
Créateurs d’entreprises, mode d’emploi pour vendre en ligne Créateurs d’entreprises, mode d’emploi pour vendre en ligne
Créateurs d’entreprises, mode d’emploi pour vendre en ligne
 
Atelier e-Business : Mon entreprise en ligne
Atelier e-Business : Mon entreprise en ligneAtelier e-Business : Mon entreprise en ligne
Atelier e-Business : Mon entreprise en ligne
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Meetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec AzureMeetup - Construire des applications serverless avec Azure
Meetup - Construire des applications serverless avec Azure
 
l echangeur présentation hpsc
l echangeur présentation hpscl echangeur présentation hpsc
l echangeur présentation hpsc
 
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
 
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011Développement d'un site web pour la promotion de pme 2011   cld 20 avril 2011
Développement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
 

Plus de Aurélien Denis

Full Site Editing : la révolution en cours sur WordPress
Full Site Editing : la révolution en cours sur WordPressFull Site Editing : la révolution en cours sur WordPress
Full Site Editing : la révolution en cours sur WordPress
Aurélien Denis
 
8 nouveautés sous WordPress 5.3
8 nouveautés sous WordPress 5.38 nouveautés sous WordPress 5.3
8 nouveautés sous WordPress 5.3
Aurélien Denis
 
Concevoir un marketplace avec WooCommerce & WordPress
Concevoir un marketplace avec WooCommerce & WordPressConcevoir un marketplace avec WooCommerce & WordPress
Concevoir un marketplace avec WooCommerce & WordPress
Aurélien Denis
 
WordPress & le Multsite
WordPress & le MultsiteWordPress & le Multsite
WordPress & le Multsite
Aurélien Denis
 
WordCamps de A à Z
WordCamps de A à ZWordCamps de A à Z
WordCamps de A à Z
Aurélien Denis
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
Aurélien Denis
 
WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?
Aurélien Denis
 
Industrialiser votre maintenance sous WordPress
Industrialiser votre maintenance sous WordPressIndustrialiser votre maintenance sous WordPress
Industrialiser votre maintenance sous WordPress
Aurélien Denis
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
Aurélien Denis
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Aurélien Denis
 

Plus de Aurélien Denis (10)

Full Site Editing : la révolution en cours sur WordPress
Full Site Editing : la révolution en cours sur WordPressFull Site Editing : la révolution en cours sur WordPress
Full Site Editing : la révolution en cours sur WordPress
 
8 nouveautés sous WordPress 5.3
8 nouveautés sous WordPress 5.38 nouveautés sous WordPress 5.3
8 nouveautés sous WordPress 5.3
 
Concevoir un marketplace avec WooCommerce & WordPress
Concevoir un marketplace avec WooCommerce & WordPressConcevoir un marketplace avec WooCommerce & WordPress
Concevoir un marketplace avec WooCommerce & WordPress
 
WordPress & le Multsite
WordPress & le MultsiteWordPress & le Multsite
WordPress & le Multsite
 
WordCamps de A à Z
WordCamps de A à ZWordCamps de A à Z
WordCamps de A à Z
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?
 
Industrialiser votre maintenance sous WordPress
Industrialiser votre maintenance sous WordPressIndustrialiser votre maintenance sous WordPress
Industrialiser votre maintenance sous WordPress
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 

Concevoir une boutique WooCommerce (vraiment) sexy

  • 1. CONCEVOIR UNE BOUTIQUE WOOCOMMERCE (VRAIMENT) SEXY ! WordCamp Paris 21 avril 2023 1
  • 3. PRÉAMBULE • Cette présentation s’adresse aux concepteurs de sites e-commerce • Je ne suis pas rémunéré par WooCommerce ni les éditeurs mentionnés • Le contenu est 100% écrit par un humain 3
  • 5. +11ANS D’EXISTENCE +800EXTENSIONS OFFICIELLES +75THÈMES OFFICIELS +5MILLIONS D’INSTALLATIONS ACTIVES 5
  • 6. ÇA PÈSE DANS LE GAME ! 6
  • 7. 7
  • 8. « WOOCOMMERCE C’EST MOCHE, C’EST PAS VENDEUR » 8
  • 9. 9
  • 10. Page Boutique 10 APERÇU BRUT DE FONDERIE AVEC LE THÈME STOREFRONT
  • 11. « COMME LA PLUPART DES OUTILS OPEN SOURCE, DE BASE ÇA DONNE PAS ENVIE MAIS ON PEUT TOUT FAIRE ET SE FAIRE IADER » 11
  • 12. #0 - ENGAGER UN UX / UI DESIGNER 12
  • 13. • Préalable indispensable à la conception d’un thème sur-mesure pour WooCommerce • Utiliser des outils modernes comme Figma ou Adobe XD qui prennent en charge les interactions et les animations • Empêche le développeur de « faire à sa sauce » #0 - ENGAGER UN UX / UI DESIGNER 13
  • 14. 14
  • 16. #1 - SOIGNER L’EXPÉRIENCE D’ACHAT • Grille de produits avec facettes dynamiques en Ajax • Gestion des variations produits avec des couleurs ou des visuels • Panier amélioré en Ajax • Validation de commande par étape avec coupon discret 16
  • 17. #1 - SOIGNER L’EXPÉRIENCE D’ACHAT • Utiliser les blocs o ffi ciels pour WooCommerce (encore quelques limites techniques bloquantes) • Avoir recours à des extensions comme WooCommerce Better Usability • Surclasser les templates WooCommerce • Utiliser les hooks 17
  • 18. 18
  • 19. 19
  • 20. 20
  • 21. 21
  • 22. 22
  • 23. #2 - OPTIMISER LA RELATION CLIENT 23
  • 24. • Des mails personnalisés avec un éditeur de blocs (Yaymail + AutomateWoo) • Un suivi de livraison par SMS (Twilio), mail et espace client • Live chat / chatbot 24 #2 - OPTIMISER LA RELATION CLIENT
  • 25. 25
  • 26. #3 - FOURNIR UNE EXPÉRIENCE PERSONNALISÉE 26
  • 27. #3 - FOURNIR UNE EXPÉRIENCE PERSONNALISÉE • Accès à du contenu privatif sur abonnement • Génération de contenus personnalisés par rapport à des préférences utilisateur • Gestion de pro fi ls utilisateurs à des fi ns marketing • Formulaires de données interactives • Espace client entièrement personnalisé 27
  • 28. 28
  • 29. #4 - BOOSTER LES PERFORMANCES 29
  • 30. • Agir sur la base de données : https://www.getrouty.com/blog/slow- woocommerce-backend-try-this/ • WP Rocket + Redis • Imagify pour la compression des images + génération WebP • Serveur dédié à partir de 1 000 visiteurs / jours et plusieurs dizaines de commandes / jour • Query Monitor (extension gratuite) pour identi fi er les requête lentes et autres erreurs #4 - BOOSTER LES PERFORMANCES 30
  • 31. #5 - ENRICHIR LE BACK-OFFICE 31
  • 32. #5 - ENRICHIR LE BACK-OFFICE • Personnaliser les vues produits avec Admin Columns Pro • Des champs supplémentaires sur les fi ches produits avec Advanced Custom Fields Pro ou via les hooks natifs • Personnaliser les formulaires de pro fi l avec Advanced Custom Fields Extended • Interfacer la donnée avec des API tierces (SendGrid, Notion, Instagram, logisticien, etc.) 32
  • 33. 33
  • 34. EN RÉSUMÉ Par ordre de di ffi culté : 1. Utiliser les nouveaux blocs WooCommerce 2. Enrichir les fonctionnalités par des extensions sélectionnées avec soin 3. Développer vos propres thèmes et extensions pour conserver la maîtrise du design system 4. Former vos clients et partenaires avec pédagogie 34