{"id":234282,"date":"2023-02-27T15:31:00","date_gmt":"2023-02-27T12:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234282"},"modified":"2022-11-12T03:35:36","modified_gmt":"2022-11-12T00:35:36","slug":"codage-pour-woocommerce-une-introduction","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/codage-pour-woocommerce-une-introduction\/","title":{"rendered":"Codage pour WooCommerce\u00a0: une introduction"},"content":{"rendered":"\n

Il s’agit d’une introduction du d\u00e9veloppeur d\u00e9butant au plugin WordPress WooCommerce<\/a>. Dans cet article, nous examinerons les bases du fonctionnement de WooCommerce et comment nous pouvons le personnaliser dans notre th\u00e8me ou plugin \u00e0 l’aide de crochets et de mod\u00e8les.<\/p>\n

Tout d’abord, WooCommerce offre une grande flexibilit\u00e9 aux d\u00e9veloppeurs de th\u00e8mes et de plugins pour ajuster ses fonctionnalit\u00e9s. Pour des modifications simples, vous avez g\u00e9n\u00e9ralement au moins deux alternatives pour y parvenir. Le choix de la fa\u00e7on dont vous modifiez d\u00e9pend de la fa\u00e7on dont vous pr\u00e9f\u00e9rez travailler, de la flexibilit\u00e9 et de la lisibilit\u00e9 de votre code, et de la fa\u00e7on dont vous pr\u00e9f\u00e9rez continuer \u00e0 faire la maintenance future de votre site en ce qui concerne les mises \u00e0 jour des plugins (et de WordPress).<\/p>\n

Avant de commencer \u00e0 chercher \u00e0 modifier les fonctionnalit\u00e9s de WooCommerce via le code, vous devez v\u00e9rifier si ce que vous souhaitez r\u00e9aliser est possible en modifiant les param\u00e8tres. WooCommerce est livr\u00e9 avec une \u00e9norme page de param\u00e8tres vous permettant de changer un peu. Dans les versions plus r\u00e9centes, WooCommerce a \u00e9galement ajout\u00e9 et d\u00e9plac\u00e9 des param\u00e8tres suppl\u00e9mentaires vers WordPress Customizer. Ici, vous pourrez par exemple ajuster le nombre de colonnes et ajuster certains des champs de paiement.<\/p>\n

Mod\u00e8les WooCommerce<\/h2>\n

WooCommerce propose un large \u00e9ventail de fichiers mod\u00e8les dans lesquels vous, en tant que d\u00e9veloppeur de th\u00e8me, pouvez remplacer. Pour ce faire, vous devez cr\u00e9er une copie du mod\u00e8le WooCommerce d’origine dans votre dossier de th\u00e8me. Et puis vous apportez vos modifications au fichier dans votre th\u00e8me.<\/p>\n

Acc\u00e9dez au dossier de votre plugin WooCommerce dans \/wp-content\/plugins\/woocommerce\/<\/code>. Vous trouverez ici le sous-dossier templates<\/code>. L’int\u00e9gralit\u00e9 du contenu des fichiers (il y en a beaucoup !) \/wp-content\/plugins\/woocommerce\/templates\/<\/code>y compris ses sous-dossiers sont tous des fichiers mod\u00e8les que vous pouvez remplacer dans votre th\u00e8me.<\/p>\n

Pour que WooCommerce trouve vos mod\u00e8les modifi\u00e9s, vous avez besoin d’un sous-dossier dans le r\u00e9pertoire racine de votre th\u00e8me nomm\u00e9 woocommerce<\/code>. Si le slug de votre th\u00e8me est ‘awhitepixel’ alors votre dossier devrait \u00eatre situ\u00e9 \u00e0 \/wp-content\/themes\/awhitepixel\/woocommerce\/<\/code>. Dans ce dossier, vous pouvez placer vos copies modifi\u00e9es des fichiers de mod\u00e8le de WooCommerce. Gardez \u00e0 l’esprit que les fichiers de mod\u00e8le situ\u00e9s dans des sous-dossiers doivent \u00eatre plac\u00e9s dans les sous-dossiers correspondants de votre dossier woocommerce. Par exemple; remplacer WooCommerce \/templates\/single-product\/add-to-cart\/simple.php<\/code>vous oblige \u00e0 placer votre copie de simple.php<\/code>dans \/woocommerce\/single-product\/add-to-cart\/<\/code>le dossier de votre th\u00e8me.<\/p>\n

Vous avez peut-\u00eatre aussi remarqu\u00e9 qu’il y a beaucoup d’actions et de filtres dans les mod\u00e8les. La plupart d’entre eux sont remplis de do_action()<\/code>s. Pour une utilisation optimale de WooCommerce, vous ne devez supprimer aucun des crochets dans les mod\u00e8les. Dans la plupart des cas, vous pouvez envisager de modifier la fonctionnalit\u00e9 en utilisant des actions et des filtres au lieu de remplacer les mod\u00e8les. Laissez-moi vous expliquer pourquoi !<\/p>\n

Remarque importante sur le remplacement des mod\u00e8les et des mises \u00e0 jour de plug-in<\/h3>\n

Pour un d\u00e9butant, le remplacement d’un mod\u00e8le peut sembler \u00eatre la solution la plus simple et la plus intuitive. Pourquoi s’emb\u00eater avec des crochets si vous pouvez tout de suite changer le mod\u00e8le qui produit la chose que vous voulez changer? R\u00e9ponse: Parce que cette strat\u00e9gie g\u00e9n\u00e8re plus de travail pour maintenir la maintenance de votre boutique en ligne.<\/p>\n

WooCommerce se met \u00e0 jour fr\u00e9quemment, et parfois ils mettent \u00e0 jour un fichier de mod\u00e8le. Afin de maintenir votre boutique en ligne \u00e0 jour, vous devez \u00e9galement mettre \u00e0 jour les fichiers de mod\u00e8le remplac\u00e9s dans votre th\u00e8me. Vous devrez g\u00e9n\u00e9ralement remplacer l’int\u00e9gralit\u00e9 du fichier de mod\u00e8le par le fichier mis \u00e0 jour le plus r\u00e9cent, puis ajouter \u00e0 nouveau vos modifications. Cela devient rapidement beaucoup plus difficile si vous ne vous souvenez pas de toutes les modifications que vous avez apport\u00e9es. Croyez-moi, qui a des ann\u00e9es d’exp\u00e9rience dans la r\u00e9paration des fichiers de mod\u00e8le WooCommerce d’autres d\u00e9veloppeurs lors des mises \u00e0 jour du plugin. Croyez-moi, ce n’est pas un travail amusant \u00e0 faire!<\/p>\n

Maintenant que nous savons que les crochets sont une meilleure strat\u00e9gie, voyons comment s’y prendre.<\/p>\n

Crochets WooCommerce<\/h2>\n

WooCommerce offre une \u00e9norme quantit\u00e9 de crochets, \u00e0 la fois des actions et des filtres. L’utilisation des crochets est en fait tr\u00e8s simple !<\/p>\n

Avec les crochets, vous pouvez \u00e9galement modifier bien plus que la simple sortie des mod\u00e8les. 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\u00e9 au panier.<\/p>\n

Si vous d\u00e9veloppez un plugin, les hooks sont \u00e9galement la seule solution. Vous ne pouvez remplacer les mod\u00e8les que dans un th\u00e8me, pas un plugin. (D’accord, il existe des moyens de surmonter cela, mais c’est tr\u00e8s rare et non recommand\u00e9).<\/p>\n

Si vous avez regard\u00e9 dans certains des fichiers de mod\u00e8le WooCommerce, vous devriez avoir vu beaucoup de fichiers do_action()<\/code>. Ce sont des crochets; points de contr\u00f4le auxquels vous pouvez vous connecter et ajouter votre code ou modifier une variable. Si vous n’\u00eates pas s\u00fbr du fonctionnement des crochets, j’ai un article qui explique<\/a> cela en profondeur.<\/p>\n

Si vous souhaitez afficher quelque chose, par exemple un texte ou quelque chose de similaire, recherchez les actions (do_action()<\/code>). Par exemple, en sortant quelque chose dans le mod\u00e8le de panier, vous avez le choix de vous accrocher \u00e0 woocommerce_before_cart<\/code>, woocommerce_before_cart_table<\/code>, woocommerce_before_cart_contents<\/code>, woocommerce_cart_contents<\/code>, woocommerce_cart_actions<\/code>, woocommerce_after_cart_contents<\/code>, woocommerce_after_cart_table<\/code>, woocommerce_cart_collaterals<\/code>ou woocommerce_after_cart<\/code>. Choisissez simplement celui qui est positionn\u00e9 l\u00e0 o\u00f9 vous voulez votre sortie. Voici un exemple d’affichage d’un texte avant le tableau et le formulaire dans la page du panier\u00a0:<\/p>\n

add_action('woocommerce_before_cart', function() {\n    _e('Here are the products you have added in the cart so far', 'textdomain');\n});<\/code><\/pre>\n
Les filtres (recherchez apply_filters()<\/code>) servent \u00e0 modifier une sortie ou une variable. Une utilisation courante des filtres dans WooCommerce consiste \u00e0 modifier le texte "Ajouter au panier" sur les boutons d’achat. WooCommerce propose plusieurs filtres pour cela, vous permettant de contr\u00f4ler le texte sur diff\u00e9rentes 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\u00f4le suppl\u00e9mentaire\u00a0; par exemple l’objet produit. Voici un exemple simple sur la fa\u00e7on de modifier les textes "Ajouter au panier" dans la vue d’un seul produit\u00a0:<\/p>\n
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {\n    return __('Buy this', 'textdomain');\n}, 10, 2);<\/code><\/pre>\n
Avec une certaine connaissance du fonctionnement des crochets et en regardant simplement \u00e0 l’int\u00e9rieur des fichiers de mod\u00e8le, vous pouvez trouver de nombreuses fonctionnalit\u00e9s facilement modifiables. \u00c9videmment, WooCommerce propose des modifications beaucoup plus avanc\u00e9es, des changements de prix, des m\u00e9thodes de paiement, des modifications de produits ou des importations, tout cela est possible avec l’utilisation de crochets.<\/p>\n
Conclusion<\/h2>\n
Le but de cet article est de donner au d\u00e9butant les bases de la fa\u00e7on d’apporter des modifications \u00e0 WooCommerce et les cons\u00e9quences de la fa\u00e7on dont vous effectuez les modifications. Je recommande toujours d’utiliser des hooks plut\u00f4t que d’\u00e9craser les fichiers de mod\u00e8le, sauf en cas d’absolue n\u00e9cessit\u00e9.<\/p>\n
La prochaine \u00e9tape consiste \u00e0 plonger dans les modifications avanc\u00e9es en apprenant \u00e0 conna\u00eetre les crochets, les processus et les objets de WooCommerce. WooCommerce \u00e9tant la plate-forme de commerce \u00e9lectronique<\/a> la plus populaire, de nombreuses ressources et exemples de code sont disponibles sur le Web. Jetez \u00e9galement un \u0153il \u00e0 la cat\u00e9gorie Woocommerce<\/a> ici sur ce site.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Une introduction du d\u00e9veloppeur aux bases de WordPress WooCommerce\u00a0; comment cela fonctionne et comment vous pouvez personnaliser ses fonctionnalit\u00e9s dans votre th\u00e8me ou plugin.<\/p>\n","protected":false},"author":1,"featured_media":239407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,1110,811,811,841,841,852,852,862,862],"tags":[1167],"class_list":["post-234282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-n-a","category-plugins-2","category-tutoriels","category-woocommerce-3","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234282"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234282\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/239407"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}