{"id":69356,"date":"2022-11-03T07:00:36","date_gmt":"2022-11-03T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69356"},"modified":"2025-05-26T07:55:30","modified_gmt":"2025-05-26T14:55:30","slug":"comment-crer-un-thme-enfant-woocommerce-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/","title":{"rendered":"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce"},"content":{"rendered":"\n<p>Disons que tu as un <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">magasin WooCommerce<\/a> op\u00e9rationnel.<\/p>\n\n\n<p>Si tu utilises le <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">th\u00e8me officiel Storefront<\/a>, cela peut m\u00eame para\u00eetre assez professionnel. Cependant, tu souhaiteras peut-\u00eatre personnaliser l&#8217;apparence de ta boutique WooCommerce pour qu&#8217;elle corresponde \u00e0 ta vision.<\/p>\n\n\n<p>La meilleure solution est souvent de cr\u00e9er un <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-need-a-child-theme\/\" target=\"_blank\" rel=\"noopener\">th\u00e8me enfant<\/a> WooCommerce. C&#8217;est parce qu&#8217;un th\u00e8me enfant te permet de modifier ton th\u00e8me original sans l&#8217;\u00e9diter directement. Il simplifie le processus de personnalisation de l&#8217;apparence de ton magasin et \u00e9limine les risques potentiels pour ton th\u00e8me et ton magasin.<\/p>\n\n\n<p>Dans cet article, nous allons voir comment tu peux personnaliser ta boutique WooCommerce avec des th\u00e8mes. Ensuite, nous te montrerons comment cr\u00e9er ton propre th\u00e8me enfant en seulement cinq \u00e9tapes. Commencez maintenant !<\/p>\n\n\n<h2 id=\"h-a-quick-look-at-woocommerce-themes\" class=\"wp-block-heading\"><b>Un Regard Rapide sur les Th\u00e8mes WooCommerce<\/b><\/h2>\n\n\n<p>Avec le lancement du <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">plugin WooCommerce<\/a> en 2011, WordPress est devenu la plateforme e-commerce la plus populaire. WooCommerce est actuellement utilis\u00e9 pour alimenter <a href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\" rel=\"noopener\">25% de toutes les boutiques en ligne<\/a>, le rendant 6% plus populaire que son concurrent le plus proche.<\/p>\n\n\n<p><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style><\/p>\n\n\n<div class=\"embed-container\"><iframe data-src=\"https:\/\/www.youtube.com\/embed\/2TVJi7IpwxA\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/div>\n\n\n<p>Un des \u00e9l\u00e9ments qui a rendu WooCommerce si r\u00e9ussi est la facilit\u00e9 de cr\u00e9er une boutique unique avec un effort minimal. Cependant, cela seul n&#8217;explique pas la popularit\u00e9 de la plateforme.<\/p>\n\n\n<p>Un autre facteur \u00e9norme dans le succ\u00e8s de WooCommerce est les possibilit\u00e9s de personnalisation presque infinies qu&#8217;il offre. Lorsqu&#8217;il est combin\u00e9 avec le bon th\u00e8me, tu as acc\u00e8s \u00e0 une grande flexibilit\u00e9 de design.<\/p>\n\n\n<p>WooCommerce est compatible avec presque tous les <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\">th\u00e8mes WordPress<\/a>. Cependant, la plupart d&#8217;entre eux ne seront pas optimis\u00e9s pour g\u00e9rer les fonctionnalit\u00e9s uniques du plugin.<\/p>\n\n\n<p>Heureusement, <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">le th\u00e8me Storefront<\/a> est une excellente option. C&#8217;est le th\u00e8me officiel de WooCommerce, con\u00e7u sp\u00e9cifiquement pour s&#8217;int\u00e9grer avec le plugin. Il est attrayant d\u00e8s le d\u00e9part, avec un design simple et \u00e9pur\u00e9 qui met l&#8217;accent sur tes produits :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"765\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme.jpg\" alt=\"le th\u00e8me WooCommerce Storefront\" class=\"wp-image-37882 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-1024x653.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-750x478.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-100x64.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/765;\" \/><\/figure><\/div>\n\n<p>Ce design \u00e9pur\u00e9 fait \u00e9galement de Storefront une base id\u00e9ale pour la personnalisation. C\u2019est l\u00e0 que les th\u00e8mes enfant sont utiles, ce que nous allons examiner ensuite.<\/p>\n\n\n<h2 id=\"h-why-you-might-want-to-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Pourquoi Tu Pourrais Vouloir Cr\u00e9er Un Th\u00e8me Enfant WooCommerce<\/b><\/h2>\n\n\n<p>Si tu as pass\u00e9 beaucoup de temps \u00e0 te renseigner sur WordPress, tu as probablement d\u00e9j\u00e0 rencontr\u00e9 les th\u00e8mes enfant.<\/p>\n\n\n<p>En bref, un th\u00e8me enfant commence sa vie comme une copie d&#8217;un autre th\u00e8me, qui est connu sous le nom de &#8216;th\u00e8me parent&#8217;. Tu peux ensuite apporter des modifications au th\u00e8me enfant et les tester sans modifier directement le th\u00e8me parent. C&#8217;est important car modifier le th\u00e8me original peut entra\u00eener des erreurs irr\u00e9versibles et m\u00eame endommager ton site web.<\/p>\n\n\n<p>Tu pourrais cr\u00e9er un th\u00e8me enfant parce que tu veux utiliser un autre th\u00e8me comme base, plut\u00f4t que de devoir construire un nouveau th\u00e8me enti\u00e8rement depuis z\u00e9ro. Alternativement, tu pourrais seulement vouloir apporter quelques modifications mineures \u00e0 la marque ou \u00e0 l&#8217;esth\u00e9tique g\u00e9n\u00e9rale d&#8217;un th\u00e8me. Le ciel est vraiment la limite, en fonction du temps que tu es pr\u00eat \u00e0 consacrer au projet.<\/p>\n\n\n<p>Quand il s&#8217;agit de WooCommerce, la plupart des th\u00e8mes enfant sont bas\u00e9s sur Storefront :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1286\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store.jpg\" alt=\"Options de th\u00e8mes enfant Storefront dans le magasin officiel WooCommerce\" class=\"wp-image-37883 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-300x193.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1024x659.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-768x494.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1536x988.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-600x386.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-750x482.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-100x64.jpg 100w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1286;\" \/><\/figure><\/div>\n\n<p>Tu peux t\u00e9l\u00e9charger plusieurs options de th\u00e8mes enfant depuis <a href=\"https:\/\/woocommerce.com\/product-category\/themes\/storefront-child-theme-themes\/\" target=\"_blank\" rel=\"noopener\">la boutique officielle WooCommerce<\/a> ou d&#8217;autres <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">sites comme ThemeForest<\/a>. Cependant, il se peut qu&#8217;aucun des th\u00e8mes enfant existants ne corresponde \u00e0 tes besoins, ou tu souhaites peut-\u00eatre cr\u00e9er un look unique. De plus, tu pourrais ne pas vouloir d\u00e9penser de l&#8217;argent pour un th\u00e8me premium si tu penses pouvoir faire mieux toi-m\u00eame.<\/p>\n\n\n<p>Dans <a href=\"https:\/\/woocommerce.com\/2015\/07\/why-child-themes-matter\/\" target=\"_blank\" rel=\"noopener\">un article sur le blog officiel de WooCommerce<\/a>, les d\u00e9veloppeurs du plugin discutent de la motivation la plus courante derri\u00e8re l&#8217;utilisation d&#8217;un th\u00e8me enfant pour votre boutique en ligne :<\/p>\n\n\n<p>\u00ab L&#8217;objectif avec nos propres th\u00e8mes enfant Storefront est de fournir une exp\u00e9rience de magasin parfaite pour ta niche sp\u00e9cifique. Apr\u00e8s avoir install\u00e9 <a href=\"https:\/\/woocommerce.com\/products\/galleria\/\" target=\"_blank\" rel=\"noopener\">Galleria<\/a>, et sans toucher \u00e0 aucun r\u00e9glage, tu disposes instantan\u00e9ment d&#8217;un magasin adapt\u00e9 \u00e0 la vente d&#8217;articles de mode haut de gamme. Avec <a href=\"https:\/\/woocommerce.com\/products\/proshop\/\" target=\"_blank\" rel=\"noopener\">ProShop<\/a>, tu peux rapidement mettre en place un magasin de sport \u00e9l\u00e9gant. \u00bb<\/p>\n\n\n<p>Le processus r\u00e9el de <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation d&#8217;un th\u00e8me enfant<\/a> est le m\u00eame que tu cr\u00e9es sp\u00e9cifiquement pour WooCommerce ou pour un site WordPress plus g\u00e9n\u00e9ral. Cependant, tu devras garder l&#8217;objectif de ta boutique \u00e0 l&#8217;esprit lorsque tu personnalises ton th\u00e8me enfant. Apr\u00e8s tout, un site e-commerce n\u00e9cessite une philosophie de conception diff\u00e9rente de celle d&#8217;un blog. Voyons \u00e0 quoi ressemble ce processus en pratique !<\/p>\n\n\n<h2 id=\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\" class=\"wp-block-heading\"><b>Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce (En 5 \u00c9tapes)<\/b><\/h2>\n\n\n<p>Maintenant, nous allons te guider sur la fa\u00e7on de cr\u00e9er un th\u00e8me enfant WooCommerce. Dans cet exemple, nous cr\u00e9erons un th\u00e8me basique qui utilise Storefront comme parent, bien que tu puisses utiliser n&#8217;importe quel th\u00e8me comme base.<\/p>\n\n\n<p>Nous te montrerons comment fonctionne le processus lorsqu&#8217;on commence \u00e0 partir de z\u00e9ro. Cependant, si tu souhaites sauter certaines de ces \u00e9tapes et passer directement \u00e0 la personnalisation de ton site, tu peux \u00e9galement t\u00e9l\u00e9charger et installer un <a href=\"https:\/\/github.com\/stuartduff\/storefront-child-theme\" target=\"_blank\" rel=\"noopener\">exemple de th\u00e8me enfant Storefront<\/a>.<\/p>\n\n\n<p>Enfin, nous te recommandons vivement de <a href=\"https:\/\/www.dreamhost.com\/blog\/back-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">cr\u00e9er une sauvegarde de ton site<\/a> avant de continuer plus loin. Cela gardera ton magasin en s\u00e9curit\u00e9 si quelque chose se casse pendant le processus de d\u00e9veloppement.<\/p>\n\n\n<p>Il est \u00e9galement judicieux de <a href=\"https:\/\/www.dreamhost.com\/blog\/website-staging-beginners-guide\/\" target=\"_blank\" rel=\"noopener\">utiliser un environnement de pr\u00e9production<\/a> pour cr\u00e9er et ajuster ton th\u00e8me enfant. Une fois que tu as pris ces pr\u00e9cautions de s\u00e9curit\u00e9, tu peux passer \u00e0 la premi\u00e8re \u00e9tape !<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-make-a-folder-for-your-woocommerce-child-theme\"><b>\u00c9tape 1 : Cr\u00e9ez Un Dossier Pour Votre Th\u00e8me Enfant WooCommerce<\/b><\/h3>\n\n\n<p>La premi\u00e8re chose que tu devras faire est de cr\u00e9er le dossier qui contiendra ton th\u00e8me. Si tu ajoutes le th\u00e8me enfant directement \u00e0 un site existant, la meilleure fa\u00e7on de le faire est <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115000675027\" target=\"_blank\" rel=\"noopener\">via SFTP<\/a>. Tu peux r\u00e9aliser cela en utilisant une application gratuite comme <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\">FileZilla<\/a>.<\/p>\n\n\n<p>Une fois que tu as lanc\u00e9 le programme, connecte-toi \u00e0 ton site avec tes identifiants d&#8217;h\u00e9bergement. Ensuite, tu devras naviguer vers le dossier <i>wp-content\/themes\/<\/i>. C&#8217;est l\u00e0 que les th\u00e8mes de ton site sont install\u00e9s.<\/p>\n\n\n<p>Tout ce que tu as \u00e0 faire est de cr\u00e9er un nouveau dossier \u00e0 l&#8217;int\u00e9rieur de celui-ci :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1086\" height=\"488\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp.png\" alt=\"le dossier des th\u00e8mes WordPress dans le client FTP\" class=\"wp-image-37886 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp.png.webp 1086w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-300x135.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-1024x460.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-768x345.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-600x270.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-750x337.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-100x45.png 100w\" data-sizes=\"(max-width: 1086px) 100vw, 1086px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1086px; --smush-placeholder-aspect-ratio: 1086\/488;\" \/><\/figure><\/div>\n\n<p>Lors de la cr\u00e9ation d&#8217;un th\u00e8me enfant, il est pr\u00e9f\u00e9rable de lui donner un nom qui refl\u00e8te celui du parent. Par exemple, nous cr\u00e9ons un th\u00e8me enfant pour Storefront, donc nous nommerons notre dossier \u00ab\u00a0storefront-child\u00a0\u00bb.<\/p>\n\n\n<p>La premi\u00e8re chose que tu auras besoin de cr\u00e9er et de placer dans ce dossier est un simple fichier texte appel\u00e9 <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-to-wp-functions\/\" target=\"_blank\" rel=\"noopener\"><i>functions.php<\/i><\/a>. C&#8217;est un fichier principal important qui aide \u00e0 dicter l&#8217;apparence et le comportement de ton site. Cependant, la plupart des <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">th\u00e8mes enfant peuvent utiliser les fonctions<\/a> contenues dans le fichier du th\u00e8me parent et n&#8217;ont pas besoin du leur.<\/p>\n\n\n<p>Pour cette raison, ce fichier peut \u00eatre laiss\u00e9 vide pour l&#8217;instant. Cr\u00e9e simplement un fichier texte avec le nom <i>functions.php<\/i>, et enregistre-le dans le dossier de ton th\u00e8me enfant :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1108\" height=\"564\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png\" alt=\"Emplacement du th\u00e8me enfant WordPress dans le client FTP\" class=\"wp-image-37884 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png.webp 1108w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-300x153.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-1024x521.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-768x391.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-750x382.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-100x51.png 100w\" data-sizes=\"(max-width: 1108px) 100vw, 1108px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1108px; --smush-placeholder-aspect-ratio: 1108\/564;\" \/><\/figure><\/div>\n\n<p>Ton th\u00e8me est maintenant presque pr\u00eat \u00e0 \u00eatre activ\u00e9 et utilis\u00e9. Toutefois, il aura d&#8217;abord besoin d&#8217;une feuille de style.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-your-child-theme-s-stylesheet\"><b>\u00c9tape 2 : Cr\u00e9e Ton Feuille De Style De Th\u00e8me Enfant<\/b><\/h3>\n\n\n<p>Le prochain fichier que tu dois cr\u00e9er est la <a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Feuille de Style en Cascade (CSS)<\/a> de ton th\u00e8me. Ce fichier d\u00e9finit les styles qui seront appliqu\u00e9s aux pages et au contenu de ton site. En d&#8217;autres termes, il te permet de sp\u00e9cifier l&#8217;apparence des \u00e9l\u00e9ments individuels sur ton site web. Lorsque les gens parlent de mise \u00e0 jour des styles, ils font g\u00e9n\u00e9ralement r\u00e9f\u00e9rence \u00e0 la mise \u00e0 jour du fichier CSS du site.<\/p>\n\n\n<p>Ton th\u00e8me parent contiendra d\u00e9j\u00e0 une feuille de style, mais le CSS d&#8217;un th\u00e8me enfant peut \u00eatre utilis\u00e9 pour remplacer ces styles. Nous verrons plus tard comment cela fonctionne exactement.<\/p>\n\n\n<p>Pour l&#8217;instant, tu auras juste besoin de cr\u00e9er le fichier CSS. Pour cela, ajoute encore une fois un fichier texte \u00e0 ton dossier <i>wp-content\/themes\/storefront-child<\/i> (ou quel que soit le nom que tu as utilis\u00e9 pour ton propre th\u00e8me enfant). Celui-ci devrait s&#8217;appeler <i>style.css<\/i> :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"864\" height=\"450\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme.png\" alt=\"Emplacement du th\u00e8me enfant WordPress dans le client FTP\" class=\"wp-image-37885 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme.png.webp 864w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-300x156.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-768x400.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-600x313.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-750x391.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-100x52.png 100w\" data-sizes=\"(max-width: 864px) 100vw, 864px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 864px; --smush-placeholder-aspect-ratio: 864\/450;\" \/><\/figure><\/div>\n\n<p>Tu devras \u00e9galement ajouter des informations de base. Copie et colle le snippet suivant dans ton nouveau fichier <i>style.css<\/i> :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">\/*\nTheme Name: Storefront Child\nTheme URI: http:\/\/example.com\/storefront-child\/\nDescription: Mon premier th\u00e8me enfant WooCommerce\nAuthor: Ton Nom\nAuthor URI: http:\/\/example.com\nVersion: 1.0.0\nLicense: Licence Publique G\u00e9n\u00e9rale GNU v2 ou ult\u00e9rieure\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>\n\n\n<p>Voici les d\u00e9tails concernant ton th\u00e8me que tu verras lors de la consultation dans un r\u00e9pertoire de th\u00e8mes ou dans ton tableau de bord WordPress. N&#8217;h\u00e9site pas \u00e0 remplacer les donn\u00e9es fictives par des informations plus sp\u00e9cifiques \u00e0 toi et \u00e0 ton th\u00e8me.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-configure-the-child-theme-to-inherit-the-parent-theme-s-styles\"><b>\u00c9tape 3 : Configurer Le Th\u00e8me Enfant Pour H\u00e9riter Des Styles Du Th\u00e8me Parent<\/b><\/h3>\n\n\n<p>Comme nous l&#8217;avons d\u00e9j\u00e0 mentionn\u00e9, tu voudras que ton th\u00e8me enfant utilise les styles par d\u00e9faut du th\u00e8me parent. Cependant, tu devras \u00e9galement remplacer les styles que tu souhaites modifier. Cela peut sembler complexe \u2014 et <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-should-still-learn-css\/\" target=\"_blank\" rel=\"noopener\">le CSS peut effectivement \u00eatre d\u00e9licat<\/a> \u2014 mais en essence, le th\u00e8me enfant utilisera toujours les styles du th\u00e8me parent \u00e0 moins qu&#8217;il ne contienne sp\u00e9cifiquement un remplacement.<\/p>\n\n\n<p>Par exemple, disons que ton th\u00e8me parent d\u00e9finit le style des \u00e9l\u00e9ments d&#8217;en-t\u00eate h1 comme \u00e9tant de 20px et rouges. Si le fichier <i>style.css<\/i> de l&#8217;enfant ne contient pas d&#8217;entr\u00e9e pour les en-t\u00eates H1, alors le style du parent sera appliqu\u00e9 \u00e0 tout le contenu H1. Cependant, si nous ajoutions un style H1 \u00e0 la feuille de style de l&#8217;enfant qui d\u00e9finissait ces en-t\u00eates comme \u00e9tant de 18px et bleus, cela remplacerait les directives du parent.<\/p>\n\n\n<p>Ajouter cette fonctionnalit\u00e9 \u00e0 ton th\u00e8me enfant est en fait tr\u00e8s simple. Il suffit de faire r\u00e9f\u00e9rence \u00e0 ton th\u00e8me parent dans la feuille de style de ton enfant.<\/p>\n\n\n<p>Ajoute simplement le morceau de code suivant apr\u00e8s les informations que tu as coll\u00e9es pr\u00e9c\u00e9demment dans le fichier <i>style.css<\/i> :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">Mod\u00e8le : storefront<\/pre>\n\n\n<p>Ce code d\u00e9finit le th\u00e8me parent et garantira que ton th\u00e8me enfant utilise les styles de Storefront partout o\u00f9 tu n&#8217;as pas sp\u00e9cifi\u00e9 de remplacement. Si tu cr\u00e9es un enfant pour un autre th\u00e8me, tu peux simplement utiliser le nom de son dossier \u00e0 la place.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-activate-the-child-theme\"><b>\u00c9tape 4 : Activer le Th\u00e8me Enfant<\/b><\/h3>\n\n\n<p>\u00c0 ce stade, ton th\u00e8me enfant est techniquement pr\u00eat. Il est configur\u00e9 pour fonctionner sur ton site, alors activons-le et voyons \u00e0 quoi il ressemble.<\/p>\n\n\n<p>Rends-toi \u00e0 <i>Apparence &gt; Th\u00e8mes<\/i> dans ton tableau de bord WordPress, et tu verras ton th\u00e8me enfant d\u00e9j\u00e0 install\u00e9 :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"408\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme.jpg\" alt=\"activation de ton th\u00e8me enfant WooCommerce dans WordPress\" class=\"wp-image-37881 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-1024x348.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-750x255.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-100x34.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/408;\" \/><\/figure><\/div>\n\n<p>S\u00e9lectionne <i>Activer<\/i> pour en faire le th\u00e8me actuel de ton site. Tu peux maintenant le pr\u00e9visualiser depuis le frontend :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"630\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store.jpg\" alt=\"modification de ton th\u00e8me enfant WooCommerce\" class=\"wp-image-37879 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-1024x538.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-768x403.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-600x315.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-750x394.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-100x53.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/630;\" \/><\/figure><\/div>\n\n<p>Comme tu peux le voir, il ressemble exactement au th\u00e8me original pour le moment. Tant que le th\u00e8me enfant est actif, il se contente de reprendre les styles de ton th\u00e8me parent. Pour personnaliser son apparence, tu devras faire preuve de cr\u00e9ativit\u00e9 avec la feuille de style de ton th\u00e8me enfant.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-add-styles-to-the-child-theme\"><b>\u00c9tape 5 : Ajouter des Styles au Th\u00e8me Enfant<\/b><\/h3>\n\n\n<p>Enfin, il est temps de commencer \u00e0 styliser ton th\u00e8me enfant. La fa\u00e7on dont tu proc\u00e8des d\u00e9pend de toi, de ta cr\u00e9ativit\u00e9, et de l&#8217;apparence que tu souhaites pour ton magasin. Cependant, nous allons parcourir un exemple de ce que tu peux faire.<\/p>\n\n\n<p>Pour illustrer comment la modification de ton th\u00e8me enfant fonctionne, nous allons changer l&#8217;apparence des boutons de notre magasin. Pour le moment, ils sont gris avec du texte noir, mais nous pourrions mettre \u00e0 jour ce style pour les rendre plus remarquables :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"530\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview.jpg\" alt=\"modification de ton th\u00e8me enfant WooCommerce\" class=\"wp-image-37880 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-1024x452.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-768x339.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-750x331.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/530;\" \/><\/figure><\/div>\n\n<p>Ouvre \u00e0 nouveau le fichier <i>style.css<\/i> de ton th\u00e8me enfant, et ajoute le code suivant apr\u00e8s le dernier <i>*\/<\/i> dans l&#8217;en-t\u00eate du fichier :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">a.button,\nbutton.button,\ninput.button,\n#review_form #submit {\nbackground: pink;\ncolor: red;\n}<\/pre>\n\n\n<p>Si tu enregistres ton fichier et que tu le consultes sur le frontend maintenant, tu verras le changement en action. Les boutons seront d\u00e9sormais d&#8217;un rose vibrant avec du texte rouge :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"532\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme.jpg\" alt=\"modification de votre th\u00e8me enfant WooCommerce\" class=\"wp-image-37878 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-750x333.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/532;\" \/><\/figure><\/div>\n\n<p>Tu peux aussi apporter des modifications aux <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" target=\"_blank\" rel=\"noopener\">fichiers de mod\u00e8le de ton th\u00e8me<\/a>. Tu auras juste besoin de copier le fichier mod\u00e8le que tu souhaites modifier, comme <i>header.php<\/i>, de ton th\u00e8me parent vers le dossier de ton th\u00e8me enfant.<\/p>\n\n\n<p>Toutefois, tu devras \u00e9galement effectuer quelques modifications pour sp\u00e9cifier quelle fonction WordPress utilise pour <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#adding-template-files\" target=\"_blank\" rel=\"noopener\">r\u00e9f\u00e9rencer les fichiers de mod\u00e8le<\/a>. Cela n\u00e9cessite l&#8217;utilisation de la fonction <span style=\"font-family: 'courier new', courier, monospace;\">get_stylesheet_directory();<\/span> au lieu de <span style=\"font-family: 'courier new', courier, monospace;\">get_template_directory()<\/span> pour r\u00e9f\u00e9rencer tes mod\u00e8les.<\/p>\n\n\n<p>Pour en savoir plus sur la mani\u00e8re de proc\u00e9der, tu peux lire tout ce qui concerne les <a href=\"https:\/\/docs.woocommerce.com\/document\/template-structure\/\" target=\"_blank\" rel=\"noopener\">mod\u00e8les utilis\u00e9s par WooCommerce<\/a>.<\/p>\n\n\n<p>\u00c0 ce stade, tu as cr\u00e9\u00e9 un th\u00e8me enfant WooCommerce ! Bien s\u00fbr, il y a encore beaucoup \u00e0 faire, mais tu sais maintenant comment commencer \u00e0 bidouiller. Nous te recommandons de <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">te perfectionner en CSS<\/a> pour tirer le meilleur parti de ton style !<\/p>\n\n\n<h2 id=\"h-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Cr\u00e9er un Th\u00e8me Enfant WooCommerce<\/b><\/h2>\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a> rend facile la cr\u00e9ation d&#8217;une boutique en ligne, et tu peux m\u00eame changer son apparence en utilisant <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">le th\u00e8me Storefront<\/a> ou l&#8217;un des nombreux <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">th\u00e8mes personnalis\u00e9s<\/a>.<\/p>\n\n\n<p>Cependant, tu n&#8217;as pas \u00e0 te fier uniquement \u00e0 la cr\u00e9ativit\u00e9 des autres. Cr\u00e9er ton propre th\u00e8me enfant WooCommerce n&#8217;est pas aussi difficile que tu pourrais le penser, et cela te donne presque un contr\u00f4le total sur l&#8217;apparence et les fonctionnalit\u00e9s de ta boutique.<\/p>\n\n\n<p>Bonne vente !<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Votre Boutique M\u00e9rite Un H\u00e9bergement WooCommerce\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Vends tout, partout, \u00e0 tout moment sur la plus grande plateforme de commerce \u00e9lectronique du monde.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/woocommerce-hosting\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Voir Les Offres                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Disons que tu as une boutique WooCommerce op\u00e9rationnelle. Si tu utilises le th\u00e8me officiel Storefront, cela peut m\u00eame para\u00eetre assez professionnel. Cependant, tu voudras peut-\u00eatre personnaliser l&#8217;apparence de ta boutique WooCommerce pour qu&#8217;elle corresponde \u00e0 ta vision. La meilleure solution est souvent de cr\u00e9er un th\u00e8me enfant WooCommerce. C&#8217;est parce qu&#8217;un enfant [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":37875,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Les th\u00e8mes enfant WooCommerce te permettent de personnaliser ta boutique en ligne WordPress en cr\u00e9ant une copie d\u2019un th\u00e8me parent. En savoir plus !","toc_headlines":"[[\"h-a-quick-look-at-woocommerce-themes\",\"Un Regard Rapide sur les Th\u00e8mes WooCommerce\"],[\"h-why-you-might-want-to-create-a-woocommerce-child-theme\",\"Pourquoi Tu Pourrais Vouloir Cr\u00e9er Un Th\u00e8me Enfant WooCommerce\"],[\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\",\"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce (En 5 \u00c9tapes)\"],[\"h-create-a-woocommerce-child-theme\",\"Cr\u00e9er un Th\u00e8me Enfant WooCommerce\"]]","hide_toc":false,"footnotes":""},"categories":[14995,15023,15009],"tags":[],"class_list":["post-69356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-fr","category-ecommerce-fr","category-wordpress-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Les th\u00e8mes enfant WooCommerce te permettent de personnaliser ta boutique en ligne WordPress en cr\u00e9ant une copie d\u2019un th\u00e8me parent. En savoir plus !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Les th\u00e8mes enfant WooCommerce te permettent de personnaliser ta boutique en ligne WordPress en cr\u00e9ant une copie d\u2019un th\u00e8me parent. En savoir plus !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T14:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:55:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce - DreamHost Blog","description":"Les th\u00e8mes enfant WooCommerce te permettent de personnaliser ta boutique en ligne WordPress en cr\u00e9ant une copie d\u2019un th\u00e8me parent. En savoir plus !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/","og_locale":"en_US","og_type":"article","og_title":"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce","og_description":"Les th\u00e8mes enfant WooCommerce te permettent de personnaliser ta boutique en ligne WordPress en cr\u00e9ant une copie d\u2019un th\u00e8me parent. En savoir plus !","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-11-03T14:00:36+00:00","article_modified_time":"2025-05-26T14:55:30+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-26T14:55:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/"},"wordCount":2343,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","articleSection":["Tutoriels","Vendre en ligne","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/","name":"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-26T14:55:30+00:00","description":"Les th\u00e8mes enfant WooCommerce te permettent de personnaliser ta boutique en ligne WordPress en cr\u00e9ant une copie d\u2019un th\u00e8me parent. En savoir plus !","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","width":900,"height":598,"caption":"how to create a WooCommerce child theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-crer-un-thme-enfant-woocommerce-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Comment Cr\u00e9er Un Th\u00e8me Enfant WooCommerce"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"fr","translations":{"fr":69356,"es":37888,"en":37872,"pl":52883,"de":54934,"uk":54949,"ru":55033,"pt":55065,"it":67883,"nl":69388},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=69356"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69356\/revisions"}],"predecessor-version":[{"id":69362,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69356\/revisions\/69362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/37875"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=69356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=69356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=69356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}