Devblog développement web, WordPress & WooCommerce

Ajouter un onglet vidéo sur une fiche produit WooCommerce

A

Je ne suis pas fan de la surcharge totale des templates de WooCommerce lorsqu’il s’agit de personnalisation, par exemple de la fiche produit. L’équipe WooThemes a montré lors du passage de WooCommerce 2.0 à WooCommerce 2.1 que certaines mises à jour du plugin pouvaient être assez sauvages…

Pour se prémunir de douloureuses opérations de migration, le mieux reste donc de minimiser le nombre de fichiers intégrés directement dans son propre thème en maximisant les recours à l’API de WooCommerce qui offre de nombreuses possibilités via des filtres et des actions.

Intéressons-nous par exemple à la fiche produit qui fera certainement partie des écrans que l’on souhaitera personnaliser lors de la création d’une boutique en ligne à l’aide de WooCommerce.

La gestion de l’affichage de celle-ci se fait via le ficher content-single-product.php (lui même chargé depuis single-product.php) et offre de très nombreuses possibilités de customization. Voyons comment, par exemple, il est possible d’afficher un onglet supplémentaire à la fiche produit pour y ajouter un onglet vidéo. Pratique pour afficher une présentation animée ou une démonstration de son produit.

Par défaut, WooCommerce affiche trois onglets sur la fiche produit : l’un pour afficher la description du produit, l’autre pour l’affichage des attributs et un troisième si vous choisissez d’afficher les commentaires (reviews) sur vos fiches produits. Des choix arbitraires que vous avez toute liberté de modifier grâce à une logique de gestion et d’affichage des onglets très bien pensée. Pour parvenir à nos fins le Plugin que nous allons développer s’appuiera ainsi sur deux filtres et deux actions :

FILTRES UTILISÉS :

woocommerce_product_tabs : qui reçoit en argument un tableau des onglets à afficher en front sur la fiche produit.
woocommerce_product_data_tabs : qui reçoit en argument un tableau des onglets à afficher en back-office dans l’éditeur du produit

ACTIONS UTILISÉES :

woocommerce_product_data_panels : qui permet de gérer l’affichage du contenu du nouvel onglet crée en back-office
woocommerce_process_product_meta : qui permet de sauvegarder la valeur saisie dans notre nouvel onglet d’administration.

Ces quatres fonctions réunies au sein de notre plugin permettrons donc :

– La saisie et la sauvegarde de l’URL de notre vidéo dans le back-office.
– L’affichage de celle-ci sur la fiche produit dans notre boutique.

Pour peaufiner notre plugin, il faudra veiller à contrôler la présence de WooCommerce sur le WordPress concerné et faire en sorte de ne pas afficher un onglet vide si aucune vidéo n’est disponible pour le produit affiché.

Devblog développement web, WordPress & WooCommerce

Articles récents

Catégories