Il s’agit d’une introduction du développeur débutant au plugin WordPress WooCommerce. Dans cet article, nous examinerons les bases du fonctionnement de WooCommerce et comment nous pouvons le personnaliser dans notre thème ou plugin à l’aide de crochets et de modèles.
Tout d’abord, WooCommerce offre une grande flexibilité aux développeurs de thèmes et de plugins pour ajuster ses fonctionnalités. Pour des modifications simples, vous avez généralement au moins deux alternatives pour y parvenir. Le choix de la façon dont vous modifiez dépend de la façon dont vous préférez travailler, de la flexibilité et de la lisibilité de votre code, et de la façon dont vous préférez continuer à faire la maintenance future de votre site en ce qui concerne les mises à jour des plugins (et de WordPress).
Avant de commencer à chercher à modifier les fonctionnalités de WooCommerce via le code, vous devez vérifier si ce que vous souhaitez réaliser est possible en modifiant les paramètres. WooCommerce est livré avec une énorme page de paramètres vous permettant de changer un peu. Dans les versions plus récentes, WooCommerce a également ajouté et déplacé des paramètres supplémentaires vers WordPress Customizer. Ici, vous pourrez par exemple ajuster le nombre de colonnes et ajuster certains des champs de paiement.
Modèles WooCommerce
WooCommerce propose un large éventail de fichiers modèles dans lesquels vous, en tant que développeur de thème, pouvez remplacer. Pour ce faire, vous devez créer une copie du modèle WooCommerce d’origine dans votre dossier de thème. Et puis vous apportez vos modifications au fichier dans votre thème.
Accédez au dossier de votre plugin WooCommerce dans /wp-content/plugins/woocommerce/. Vous trouverez ici le sous-dossier templates. L’intégralité du contenu des fichiers (il y en a beaucoup !) /wp-content/plugins/woocommerce/templates/y compris ses sous-dossiers sont tous des fichiers modèles que vous pouvez remplacer dans votre thème.
Pour que WooCommerce trouve vos modèles modifiés, vous avez besoin d’un sous-dossier dans le répertoire racine de votre thème nommé woocommerce. Si le slug de votre thème est ‘awhitepixel’ alors votre dossier devrait être situé à /wp-content/themes/awhitepixel/woocommerce/. Dans ce dossier, vous pouvez placer vos copies modifiées des fichiers de modèle de WooCommerce. Gardez à l’esprit que les fichiers de modèle situés dans des sous-dossiers doivent être placés dans les sous-dossiers correspondants de votre dossier woocommerce. Par exemple; remplacer WooCommerce /templates/single-product/add-to-cart/simple.phpvous oblige à placer votre copie de simple.phpdans /woocommerce/single-product/add-to-cart/le dossier de votre thème.
Vous avez peut-être aussi remarqué qu’il y a beaucoup d’actions et de filtres dans les modèles. La plupart d’entre eux sont remplis de do_action()s. Pour une utilisation optimale de WooCommerce, vous ne devez supprimer aucun des crochets dans les modèles. Dans la plupart des cas, vous pouvez envisager de modifier la fonctionnalité en utilisant des actions et des filtres au lieu de remplacer les modèles. Laissez-moi vous expliquer pourquoi !
Remarque importante sur le remplacement des modèles et des mises à jour de plug-in
Pour un débutant, le remplacement d’un modèle peut sembler être la solution la plus simple et la plus intuitive. Pourquoi s’embêter avec des crochets si vous pouvez tout de suite changer le modèle qui produit la chose que vous voulez changer? Réponse: Parce que cette stratégie génère plus de travail pour maintenir la maintenance de votre boutique en ligne.
WooCommerce se met à jour fréquemment, et parfois ils mettent à jour un fichier de modèle. Afin de maintenir votre boutique en ligne à jour, vous devez également mettre à jour les fichiers de modèle remplacés dans votre thème. Vous devrez généralement remplacer l’intégralité du fichier de modèle par le fichier mis à jour le plus récent, puis ajouter à nouveau vos modifications. Cela devient rapidement beaucoup plus difficile si vous ne vous souvenez pas de toutes les modifications que vous avez apportées. Croyez-moi, qui a des années d’expérience dans la réparation des fichiers de modèle WooCommerce d’autres développeurs lors des mises à jour du plugin. Croyez-moi, ce n’est pas un travail amusant à faire!
Maintenant que nous savons que les crochets sont une meilleure stratégie, voyons comment s’y prendre.
Crochets WooCommerce
WooCommerce offre une énorme quantité de crochets, à la fois des actions et des filtres. L’utilisation des crochets est en fait très simple !
Avec les crochets, vous pouvez également modifier bien plus que la simple sortie des modèles. Vous pouvez personnaliser les prix des produits, les champs de paiement ou faire en sorte que votre boutique en ligne fasse quelque chose lorsqu’un produit est ajouté au panier.
Si vous développez un plugin, les hooks sont également la seule solution. Vous ne pouvez remplacer les modèles que dans un thème, pas un plugin. (D’accord, il existe des moyens de surmonter cela, mais c’est très rare et non recommandé).
Si vous avez regardé dans certains des fichiers de modèle WooCommerce, vous devriez avoir vu beaucoup de fichiers do_action(). Ce sont des crochets; points de contrôle auxquels vous pouvez vous connecter et ajouter votre code ou modifier une variable. Si vous n’êtes pas sûr du fonctionnement des crochets, j’ai un article qui explique cela en profondeur.
Si vous souhaitez afficher quelque chose, par exemple un texte ou quelque chose de similaire, recherchez les actions (do_action()). Par exemple, en sortant quelque chose dans le modèle de panier, vous avez le choix de vous accrocher à woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collateralsou woocommerce_after_cart. Choisissez simplement celui qui est positionné là où vous voulez votre sortie. Voici un exemple d’affichage d’un texte avant le tableau et le formulaire dans la page du panier :
add_action('woocommerce_before_cart', function() {
_e('Here are the products you have added in the cart so far', 'textdomain');
});Les filtres (recherchez apply_filters()) servent à modifier une sortie ou une variable. Une utilisation courante des filtres dans WooCommerce consiste à modifier le texte "Ajouter au panier" sur les boutons d’achat. WooCommerce propose plusieurs filtres pour cela, vous permettant de contrôler le texte sur différentes pages. Par exemple, vous pouvez personnaliser le texte dans la boucle de la boutique ou dans la vue d’un seul produit. Les filtres fournissent souvent plusieurs arguments pour un contrôle supplémentaire ; par exemple l’objet produit. Voici un exemple simple sur la façon de modifier les textes "Ajouter au panier" dans la vue d’un seul produit :
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
return __('Buy this', 'textdomain');
}, 10, 2);Avec une certaine connaissance du fonctionnement des crochets et en regardant simplement à l’intérieur des fichiers de modèle, vous pouvez trouver de nombreuses fonctionnalités facilement modifiables. Évidemment, WooCommerce propose des modifications beaucoup plus avancées, des changements de prix, des méthodes de paiement, des modifications de produits ou des importations, tout cela est possible avec l’utilisation de crochets.
Conclusion
Le but de cet article est de donner au débutant les bases de la façon d’apporter des modifications à WooCommerce et les conséquences de la façon dont vous effectuez les modifications. Je recommande toujours d’utiliser des hooks plutôt que d’écraser les fichiers de modèle, sauf en cas d’absolue nécessité.
La prochaine étape consiste à plonger dans les modifications avancées en apprenant à connaître les crochets, les processus et les objets de WooCommerce. WooCommerce étant la plate-forme de commerce électronique la plus populaire, de nombreuses ressources et exemples de code sont disponibles sur le Web. Jetez également un œil à la catégorie Woocommerce ici sur ce site.