Un guide complet sur les Hooks WooCommerce

NRZ.Digital
0 0

guide-sur-woocommerce-hooks
Exprimé par Amazon Polly

Les hooks WooCommerce font partie intégrante du développement de la boutique WooCommerce.

Concevoir une boutique WooCommerce sans utiliser correctement les hooks WooCommerce limite le véritable potentiel et les possibilités de votre boutique en ligne. Vous pouvez créer une structure, une base de votre boutique en ligne, mais ajouter des fonctionnalités essentielles supplémentaires que vos concurrents pourraient déjà avoir ne serait pas possible à moins que les hooks WooCommerce ne soient utilisés.

Étant donné que la personnalisation est la plus grande force de la boutique WooCommerce, sa capacité à vous permettre de modifier même la plus petite des fonctionnalités en fait une option populaire pour les propriétaires d’entreprise de commerce électronique. De plus, être open-source ajoute une raison supplémentaire d’utiliser la plate-forme WooCommerce.

Par conséquent, vous devez connaître tous les bons moyens de faire un niveau de personnalisation professionnel.

Des milliers de plugins WooCommerce open source et premium que nous utilisons pour la personnalisation de WooCommerce ou de WordPress sont créés à l’aide de hooks.

Ils représentent le niveau de personnalisation du magasin par le développeur.

woocommerce-hooks

Conscient de leur importance, j’ai décidé d’écrire ceci guide complet des hooks WooCommerce pour vous y présenter et vous montrer comment les utiliser.

Une compréhension générale du code vous aidera à mieux comprendre cet article.

Commençons par la définition.

Que sont les Hooks WooCommerce?

Les hooks WooCommerce sont un moyen d’ajouter du contenu supplémentaire au fichier par défaut de WooCommerce sans changer le code principal. Il est utile pour étendre ou améliorer les fonctionnalités du programme de base sans vraiment le manipuler.

C’est donc un excellent outil pour les développeurs.

Tout comme les hooks WordPress vous permettent d’optimiser WordPress et d’étendre les fonctionnalités des sites Web WordPress, les hooks WooCommerce offrent un niveau plus profond de personnalisation du magasin. Ils vous permettent d’ajouter et de filtrer des détails infimes sur les pages et les processus de votre boutique WooCommerce.

Les crochets dont nous parlons portent le nom de crochets normaux que nous utilisons dans la vie de tous les jours, car ils font tous les deux la même nature de travail. Les hooks WooComemrce contiennent des programmes supplémentaires tandis que les hooks normaux contiennent des objets.

hooks-normaux-et-hooks-woocommerce

WooCommerce fournit plusieurs hooks WooCommerce par défaut pour les développeurs. Ils peuvent être utilisés chaque fois que nécessaire. En outre, les thèmes ont leur propre ensemble de crochets tels que le Crochets de vitrine thème.

Voici quelques hooks WooCommerce pour une seule page de produit.

exemples-de-hooks-woocommerce

Ce sont les hooks présents par défaut sur la page mono-produit (une page dédiée à un produit spécifique) d’une boutique WooCommerce.

Maintenant, ces crochets sont utilisés pour ajouter quoi que ce soit à partir de texte, paragraphe, image, logo, ou quoi que ce soit au même endroit où les crochets sont présents sur la page (montré dans l’image ci-dessus) sans apporter aucune modification dans le fichier principal du WooCommerce .

Pourquoi les Hooks sont-ils inignorables dans WooCommerce?

Les hooks sont inignorables dans les magasins WooCommerce car ils créent le magasin exactement comme vous le souhaitez. Ils contribuent à la personnalisation d’un niveau d’avance sur celui possible par les plugins.

Même si vous pouvez obtenir la même personnalisation en apportant des modifications au programme principal et en ajoutant la fonctionnalité exacte que vous feriez avec des hooks, alors pourquoi les hooks jouent-ils ce rôle?

Pourquoi des hooks sont-ils nécessaires si nous pouvons modifier le programme principal? Pourquoi la manipulation du programme de base est-elle une mauvaise idée?

Pour visualiser cela, imaginez le mur de votre chambre que vous souhaitez décorer avec un décor de vagues. Vous avez décidé d’inviter votre ami artiste avec le tout nouveau pinceau et couleur. Il a fait le meilleur art sur le mur et vous a obtenu le meilleur paysage que vous vouliez.

Génial!

Mais le lendemain, votre père a été transféré et vous et votre famille déménagez dans la ville voisine. Une nouvelle maison et une nouvelle chambre pour vous.

Qu’en est-il du paysage que vous venez d’avoir sur votre mur? Y a-t-il moyen de l’emporter avec vous dans votre nouvelle maison?

Bien! Vous ne pouvez pas emporter tout le mur avec vous! Aucun art mural ne peut être retiré!

Et c’est pourquoi apporter des modifications directement au programme de base est une mauvaise idée.

Sans hooks, tout sera gâché en cas de modification ou de mise à jour du programme principal.

Donc, au lieu de peindre directement sur le mur, si vous aviez cette peinture sur toile à l’aide d’un crochet. Vous auriez pu facilement gérer le changement ou la mise à jour sans aucun problème.

Type de crochets avec l’exemple?

Les hooks WooCommerce sont de deux types. Ceux-ci sont:

  1. Crochets d’action
  2. Crochets de filtre

Cette classification est basée sur le fonctionnement de ces crochets. Découvrons-les en détail avec des exemples.

Crochets d’action:

Les hooks d’action sont ceux avec lesquels vous pouvez ajouter quelque chose de nouveau au fichier principal. Cela peut être n’importe quoi de votre choix tel que du texte, une image, une icône, un paragraphe, des nombres, etc. Ces crochets vous permettent d’effectuer une action sur le code principal.

exemple de crochet d'action

Crochets de filtre:

Les hooks de filtre sont ceux qui vous permettent de modifier une fonctionnalité existante dans un magasin WooCommerce comme vous le souhaitez en choisissant un ensemble parmi les nombreuses possibilités. Ils vous permettent de modifier le comportement existant du contenu.

Les hooks de filtrage n’ajoutent rien de nouveau, mais ils vous permettent de filtrer les données hors de différentes possibilités. Et c’est comme ça qu’ils ont obtenu leur nom.

Par exemple, en utilisant des crochets de filtre, vous pouvez modifier les produits par recherche de 1 à 12 de votre choix (1 à 5 ou 1 à 9)

exemple de crochets de filtre

Ressource Hooks WooCommerce

Comme je l’ai déjà mentionné, WooCommerce est déjà livré avec un grand nombre de crochets. Ces hooks permettent à l’administrateur d’accéder à des coins spécifiques des pages WooCommerce pour la personnalisation.

Alors, quels sont ces crochets? Et comment pouvons-nous les trouver?

Pour consulter la liste complète des hooks WooCommerce, Cliquez ici.

Mais pour les voir directement sur les pages WooCommerce, l’administrateur ou le développeur peut prendre l’aide de plugins tels que « Afficher les crochets«.

Ce plugin ajoute un nouveau menu « Afficher les crochets»Dans la barre de menu verticale du tableau de bord WordPress.

Une fois que vous avez cliqué sur afficher les crochets, les crochets disponibles de cette même page seront affichés.

crochets

De cette façon, vous pouvez trouver le hook le plus approprié pour vous-même et l’utiliser pour ajouter le contenu requis via des hooks d’action ou changer de comportement via des hooks de filtre.

Syntaxe de WooCommerce Hook

Il existe une règle spécifique pour l’utilisation de ces crochets. Ces règles ou syntaxes pour les deux types de hooks contiennent deux choses:

  1. Nom du crochet
  2. Nom de la fonction

Nous avons déjà identifié des hooks en utilisant le plugin «ShowHook» et il ne nous reste plus qu’à définir la fonction.

Une fonction est un module autonome d’un code qui exécute une tâche spécifique. Une fonction prend des données, les traite et génère une valeur en conséquence.

La règle ou la syntaxe des hooks d’action et de filtre sont:

Crochet d’action

action-hooks-syntaxe

La fonction est définie comme:

action-crochet-fonction

Crochets de filtre

syntaxe-crochet-filtre

La fonction est définie comme:

fonction crochet-filtre

Les hooks de filtre doivent avoir un retour de valeur.

Avec cette syntaxe, nous pouvons utiliser des hooks pour ajouter et modifier du contenu sur notre boutique WooCommerce.

Comment utiliser les crochets?

Jusqu’à présent, nous avons exploré la définition des hooks, leurs types et leur syntaxe; ajoutons maintenant du code de fonction et utilisons ces crochets pour ajouter quelque chose de nouveau ou filtrer des fonctionnalités existantes.

Voici un code pour les hooks d’action et les hooks de filtre.

Crochets d’action

add_action (‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5);

function woocommerce_template_single_title () {

the_title (‘

‘, ‘

‘);

}

Crochets de filtre

add_filter (‘woocommerce_product_price_class’, ‘change_class_for_price_wc’);

function change_class_for_price_wc ($ nom_classe) {

$ class_name. = ‘classe de prix supplémentaire’;

return $ nom_classe;

}

Remarque: – Pour utiliser ces codes, vous pouvez le faire soit dans votre thème actif functions.php ou dans un autre fichier du plugin.

Ces codes ajouteront des fonctions respectives à la place du hook défini.

Dans la section suivante, nous allons apprendre à utiliser les hooks sans écrire de code, simplement à l’aide du plugin.

[Bonus] Un moyen plus simple d’ajouter du contenu à l’aide de HookMeUp

Le codage est nul!

Et, ni chaque propriétaire de magasin n’est un développeur, ni ne peut se permettre des développeurs à chaque fois.

Nous avons donc un autre moyen simple de personnaliser la boutique WooCommerce à l’aide de crochets sans toucher au codage; tout en utilisant le plugin « HookMeUp« 

Avec cela, l’utilisation de crochets devient beaucoup plus facile. Mais tous les hooks ne sont pas accessibles en l’utilisant; j’espère que tous ces crochets qui ont du sens peuvent l’être.

Installation et activation – comme tous les autres plugins.

Pour l’utiliser:

Aller à Personnaliser.

option-de-personnalisation

Une page s’ouvrira. Clique sur le « Crochets WooCommerce»Menu.

woocommerce-hooks-option liste des crochets

Une fois que vous avez cliqué sur les Hooks WooCommerce, une liste de pages apparaîtra comme indiqué sur le côté droit de l’image ci-dessus.

Ce plugin vous permet d’accéder à des hooks WooCommerce spécifiques, à partir de ces pages répertoriées.

Faisons-le et voyons comment cela fonctionne.

Considérez notre produit actuel qui ressemble.

page sans crochets

Il s’agit d’une page de produit unique et aucune personnalisation à la demande n’est effectuée. Tout ce que nous avons, c’est l’image du produit, le nom du produit, la description et d’autres éléments fournis avec WooCommerce pour chaque produit WooCommerce.

Maintenant, donnons-lui un look plus digne et rendons-le plus prometteur.

Commençons par vérifier les Hooks disponibles, auxquels nous pouvons accéder en utilisant ce plugin.

option crochets

Nous utiliserons quatre de ces crochets.

  1. woocommece_before_single_product
  2. woocommerce_before_add_to_cart_form
  3. woocommerce_after_add_to_cart_form
  4. woocommerce_share

Ce sont les choses que nous ajouterions en utilisant respectivement ces crochets.

  1. Retour au lien des catégories de produits
  2. La valeur du seuil de livraison gratuite
  3. Logo des passerelles de paiement
  4. Lien vers la politique de remboursement de la boutique.

Pour le faire

Dans le panneau de gauche, cliquez sur la flèche vers le bas des crochets répertoriés. Un panneau d’édition apparaîtra.

Utilisez l’éditeur pour ajouter du texte, des liens, des médias, des tableaux et les modifier de quelque manière que ce soit à l’aide de l’option disponible.

Enfin, après édition, notre page produit ressemblera à ceci:

utilisation de crochets

Conclusion

Donc, après avoir lu ce guide sur le hook WoCommerce; vous connaissez le niveau d’optimisation de magasin d’un développeur.

Désormais, vous pouvez accéder à l’emplacement ciblé de votre boutique à partir de la page du produit, de la page d’accueil, des catégories, du panier, du paiement sur chaque page de votre boutique et ajouter les fonctionnalités requises à cet emplacement à l’aide de crochets.

Vous n’avez pas besoin de plugins pour chaque petite fonctionnalité?

De plus, ce qui rend ces hooks si utiles, c’est qu’ils restent inchangés après la mise à jour du thème ou des fichiers principaux.

J’espère que cet article vous a été utile. S’il y a autre chose que vous aimeriez demander, vous pouvez demander dans la section commentaires.

Remarque: Un merci spécial aux experts WooCommmerce de MakeWebBetter, qui ont contribué à cet article.


Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleppy
Sleppy
0
Angry
Angry
0
Surprise
Surprise
0

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Laisser un commentaire

Next Post

Volopay, basé à Singapour, lève un tour de table de 2,1 millions de dollars pour construire un «centre de contrôle financier» pour les entreprises

Volopay, une startup basée à Singapour qui construit un «centre de contrôle financier» pour les entreprises, a annoncé aujourd’hui avoir levé 2,1 millions de dollars de financement de démarrage. Le tour était dirigé par le co-fondateur de Tinder, Justin Mateen, et comprenait la participation de Soma Capital, CP Venture… Volopay, […]

Abonnez-vous maintenant