Comment Créer Un Thème Enfant WooCommerce

Disons que tu as un magasin WooCommerce opérationnel.

Si tu utilises le thème officiel Storefront, cela peut même paraître assez professionnel. Cependant, tu souhaiteras peut-être personnaliser l’apparence de ta boutique WooCommerce pour qu’elle corresponde à ta vision.

La meilleure solution est souvent de créer un thème enfant WooCommerce. C’est parce qu’un thème enfant te permet de modifier ton thème original sans l’éditer directement. Il simplifie le processus de personnalisation de l’apparence de ton magasin et élimine les risques potentiels pour ton thème et ton magasin.

Dans cet article, nous allons voir comment tu peux personnaliser ta boutique WooCommerce avec des thèmes. Ensuite, nous te montrerons comment créer ton propre thème enfant en seulement cinq étapes. Commencez maintenant !

Un Regard Rapide sur les Thèmes WooCommerce

Avec le lancement du plugin WooCommerce en 2011, WordPress est devenu la plateforme e-commerce la plus populaire. WooCommerce est actuellement utilisé pour alimenter 25% de toutes les boutiques en ligne, le rendant 6% plus populaire que son concurrent le plus proche.

Un des éléments qui a rendu WooCommerce si réussi est la facilité de créer une boutique unique avec un effort minimal. Cependant, cela seul n’explique pas la popularité de la plateforme.

Un autre facteur énorme dans le succès de WooCommerce est les possibilités de personnalisation presque infinies qu’il offre. Lorsqu’il est combiné avec le bon thème, tu as accès à une grande flexibilité de design.

WooCommerce est compatible avec presque tous les thèmes WordPress. Cependant, la plupart d’entre eux ne seront pas optimisés pour gérer les fonctionnalités uniques du plugin.

Heureusement, le thème Storefront est une excellente option. C’est le thème officiel de WooCommerce, conçu spécifiquement pour s’intégrer avec le plugin. Il est attrayant dès le départ, avec un design simple et épuré qui met l’accent sur tes produits :

Ce design épuré fait également de Storefront une base idéale pour la personnalisation. C’est là que les thèmes enfant sont utiles, ce que nous allons examiner ensuite.

Pourquoi Tu Pourrais Vouloir Créer Un Thème Enfant WooCommerce

Si tu as passé beaucoup de temps à te renseigner sur WordPress, tu as probablement déjà rencontré les thèmes enfant.

En bref, un thème enfant commence sa vie comme une copie d’un autre thème, qui est connu sous le nom de ‘thème parent’. Tu peux ensuite apporter des modifications au thème enfant et les tester sans modifier directement le thème parent. C’est important car modifier le thème original peut entraîner des erreurs irréversibles et même endommager ton site web.

Tu pourrais créer un thème enfant parce que tu veux utiliser un autre thème comme base, plutôt que de devoir construire un nouveau thème entièrement depuis zéro. Alternativement, tu pourrais seulement vouloir apporter quelques modifications mineures à la marque ou à l’esthétique générale d’un thème. Le ciel est vraiment la limite, en fonction du temps que tu es prêt à consacrer au projet.

Quand il s’agit de WooCommerce, la plupart des thèmes enfant sont basés sur Storefront :

Tu peux télécharger plusieurs options de thèmes enfant depuis la boutique officielle WooCommerce ou d’autres sites comme ThemeForest. Cependant, il se peut qu’aucun des thèmes enfant existants ne corresponde à tes besoins, ou tu souhaites peut-être créer un look unique. De plus, tu pourrais ne pas vouloir dépenser de l’argent pour un thème premium si tu penses pouvoir faire mieux toi-même.

Dans un article sur le blog officiel de WooCommerce, les développeurs du plugin discutent de la motivation la plus courante derrière l’utilisation d’un thème enfant pour votre boutique en ligne :

« L’objectif avec nos propres thèmes enfant Storefront est de fournir une expérience de magasin parfaite pour ta niche spécifique. Après avoir installé Galleria, et sans toucher à aucun réglage, tu disposes instantanément d’un magasin adapté à la vente d’articles de mode haut de gamme. Avec ProShop, tu peux rapidement mettre en place un magasin de sport élégant. »

Le processus réel de création d’un thème enfant est le même que tu crées spécifiquement pour WooCommerce ou pour un site WordPress plus général. Cependant, tu devras garder l’objectif de ta boutique à l’esprit lorsque tu personnalises ton thème enfant. Après tout, un site e-commerce nécessite une philosophie de conception différente de celle d’un blog. Voyons à quoi ressemble ce processus en pratique !

Comment Créer Un Thème Enfant WooCommerce (En 5 Étapes)

Maintenant, nous allons te guider sur la façon de créer un thème enfant WooCommerce. Dans cet exemple, nous créerons un thème basique qui utilise Storefront comme parent, bien que tu puisses utiliser n’importe quel thème comme base.

Nous te montrerons comment fonctionne le processus lorsqu’on commence à partir de zéro. Cependant, si tu souhaites sauter certaines de ces étapes et passer directement à la personnalisation de ton site, tu peux également télécharger et installer un exemple de thème enfant Storefront.

Enfin, nous te recommandons vivement de créer une sauvegarde de ton site avant de continuer plus loin. Cela gardera ton magasin en sécurité si quelque chose se casse pendant le processus de développement.

Il est également judicieux de utiliser un environnement de préproduction pour créer et ajuster ton thème enfant. Une fois que tu as pris ces précautions de sécurité, tu peux passer à la première étape !

Étape 1 : Créez Un Dossier Pour Votre Thème Enfant WooCommerce

La première chose que tu devras faire est de créer le dossier qui contiendra ton thème. Si tu ajoutes le thème enfant directement à un site existant, la meilleure façon de le faire est via SFTP. Tu peux réaliser cela en utilisant une application gratuite comme FileZilla.

Une fois que tu as lancé le programme, connecte-toi à ton site avec tes identifiants d’hébergement. Ensuite, tu devras naviguer vers le dossier wp-content/themes/. C’est là que les thèmes de ton site sont installés.

Tout ce que tu as à faire est de créer un nouveau dossier à l’intérieur de celui-ci :

Lors de la création d’un thème enfant, il est préférable de lui donner un nom qui reflète celui du parent. Par exemple, nous créons un thème enfant pour Storefront, donc nous nommerons notre dossier « storefront-child ».

La première chose que tu auras besoin de créer et de placer dans ce dossier est un simple fichier texte appelé functions.php. C’est un fichier principal important qui aide à dicter l’apparence et le comportement de ton site. Cependant, la plupart des thèmes enfant peuvent utiliser les fonctions contenues dans le fichier du thème parent et n’ont pas besoin du leur.

Pour cette raison, ce fichier peut être laissé vide pour l’instant. Crée simplement un fichier texte avec le nom functions.php, et enregistre-le dans le dossier de ton thème enfant :

Ton thème est maintenant presque prêt à être activé et utilisé. Toutefois, il aura d’abord besoin d’une feuille de style.

Étape 2 : Crée Ton Feuille De Style De Thème Enfant

Le prochain fichier que tu dois créer est la Feuille de Style en Cascade (CSS) de ton thème. Ce fichier définit les styles qui seront appliqués aux pages et au contenu de ton site. En d’autres termes, il te permet de spécifier l’apparence des éléments individuels sur ton site web. Lorsque les gens parlent de mise à jour des styles, ils font généralement référence à la mise à jour du fichier CSS du site.

Ton thème parent contiendra déjà une feuille de style, mais le CSS d’un thème enfant peut être utilisé pour remplacer ces styles. Nous verrons plus tard comment cela fonctionne exactement.

Pour l’instant, tu auras juste besoin de créer le fichier CSS. Pour cela, ajoute encore une fois un fichier texte à ton dossier wp-content/themes/storefront-child (ou quel que soit le nom que tu as utilisé pour ton propre thème enfant). Celui-ci devrait s’appeler style.css :

Tu devras également ajouter des informations de base. Copie et colle le snippet suivant dans ton nouveau fichier style.css :

/*
Theme Name: Storefront Child
Theme URI: http://example.com/storefront-child/
Description: Mon premier thème enfant WooCommerce
Author: Ton Nom
Author URI: http://example.com
Version: 1.0.0
License: Licence Publique Générale GNU v2 ou ultérieure
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Voici les détails concernant ton thème que tu verras lors de la consultation dans un répertoire de thèmes ou dans ton tableau de bord WordPress. N’hésite pas à remplacer les données fictives par des informations plus spécifiques à toi et à ton thème.

Étape 3 : Configurer Le Thème Enfant Pour Hériter Des Styles Du Thème Parent

Comme nous l’avons déjà mentionné, tu voudras que ton thème enfant utilise les styles par défaut du thème parent. Cependant, tu devras également remplacer les styles que tu souhaites modifier. Cela peut sembler complexe — et le CSS peut effectivement être délicat — mais en essence, le thème enfant utilisera toujours les styles du thème parent à moins qu’il ne contienne spécifiquement un remplacement.

Par exemple, disons que ton thème parent définit le style des éléments d’en-tête h1 comme étant de 20px et rouges. Si le fichier style.css de l’enfant ne contient pas d’entrée pour les en-têtes H1, alors le style du parent sera appliqué à tout le contenu H1. Cependant, si nous ajoutions un style H1 à la feuille de style de l’enfant qui définissait ces en-têtes comme étant de 18px et bleus, cela remplacerait les directives du parent.

Ajouter cette fonctionnalité à ton thème enfant est en fait très simple. Il suffit de faire référence à ton thème parent dans la feuille de style de ton enfant.

Ajoute simplement le morceau de code suivant après les informations que tu as collées précédemment dans le fichier style.css :

Modèle : storefront

Ce code définit le thème parent et garantira que ton thème enfant utilise les styles de Storefront partout où tu n’as pas spécifié de remplacement. Si tu crées un enfant pour un autre thème, tu peux simplement utiliser le nom de son dossier à la place.

Étape 4 : Activer le Thème Enfant

À ce stade, ton thème enfant est techniquement prêt. Il est configuré pour fonctionner sur ton site, alors activons-le et voyons à quoi il ressemble.

Rends-toi à Apparence > Thèmes dans ton tableau de bord WordPress, et tu verras ton thème enfant déjà installé :

Sélectionne Activer pour en faire le thème actuel de ton site. Tu peux maintenant le prévisualiser depuis le frontend :

Comme tu peux le voir, il ressemble exactement au thème original pour le moment. Tant que le thème enfant est actif, il se contente de reprendre les styles de ton thème parent. Pour personnaliser son apparence, tu devras faire preuve de créativité avec la feuille de style de ton thème enfant.

Étape 5 : Ajouter des Styles au Thème Enfant

Enfin, il est temps de commencer à styliser ton thème enfant. La façon dont tu procèdes dépend de toi, de ta créativité, et de l’apparence que tu souhaites pour ton magasin. Cependant, nous allons parcourir un exemple de ce que tu peux faire.

Pour illustrer comment la modification de ton thème enfant fonctionne, nous allons changer l’apparence des boutons de notre magasin. Pour le moment, ils sont gris avec du texte noir, mais nous pourrions mettre à jour ce style pour les rendre plus remarquables :

Ouvre à nouveau le fichier style.css de ton thème enfant, et ajoute le code suivant après le dernier */ dans l’en-tête du fichier :

a.button,
button.button,
input.button,
#review_form #submit {
background: pink;
color: red;
}

Si tu enregistres ton fichier et que tu le consultes sur le frontend maintenant, tu verras le changement en action. Les boutons seront désormais d’un rose vibrant avec du texte rouge :

Tu peux aussi apporter des modifications aux fichiers de modèle de ton thème. Tu auras juste besoin de copier le fichier modèle que tu souhaites modifier, comme header.php, de ton thème parent vers le dossier de ton thème enfant.

Toutefois, tu devras également effectuer quelques modifications pour spécifier quelle fonction WordPress utilise pour référencer les fichiers de modèle. Cela nécessite l’utilisation de la fonction get_stylesheet_directory(); au lieu de get_template_directory() pour référencer tes modèles.

Pour en savoir plus sur la manière de procéder, tu peux lire tout ce qui concerne les modèles utilisés par WooCommerce.

À ce stade, tu as créé un thème enfant WooCommerce ! Bien sûr, il y a encore beaucoup à faire, mais tu sais maintenant comment commencer à bidouiller. Nous te recommandons de te perfectionner en CSS pour tirer le meilleur parti de ton style !

Créer un Thème Enfant WooCommerce

WooCommerce rend facile la création d’une boutique en ligne, et tu peux même changer son apparence en utilisant le thème Storefront ou l’un des nombreux thèmes personnalisés.

Cependant, tu n’as pas à te fier uniquement à la créativité des autres. Créer ton propre thème enfant WooCommerce n’est pas aussi difficile que tu pourrais le penser, et cela te donne presque un contrôle total sur l’apparence et les fonctionnalités de ta boutique.

Bonne vente !