Le blog.

Afficher un pourcentage de réduction sur un produit WooCommerce.

WooCommerce est quand même sacrément pratique pour héberger un site e-commerce propulsé par l’excellent WordPress. Grâce à son interface ludique et simple d’utilisation, il devient très facile de bénéficier d’un site e-commerce dédié sur-mesure en quelques clics. Et si certaines logiques de l’extension ne vous plaisent pas, il est très simple de les modifier… La preuve ici-même !

Un bon moyen d’améliorer ses ventes est de mettre certains produits en promotion. Dans WooCommerce, cela est très facile à faire : il suffit de définir un prix régulier (normal) et un prix promotion — et si nécessaire, la date de début et de fin de la promotion.

En temps normal, une petite infobulle sera superposée au bloc produit mais son contenu est, nativement, plutôt inutile : il affichera « Promo » (ou « Sale » en anglais).

Mais comment faire pour utiliser cette infobulle et y afficher le pourcentage maximum de promotion du produit ?

Afficher percentage d'un produit WooCommerce en promotion

Quel fichier à éditer ?

Dans les coulisses, WooCommerce utilise bon nombre de ses propres fichiers templates afin d’afficher telle ou telle chose. Heureusement, il est possible de dupliquer ces fichiers templates (situés dans le dossier /wp-content/plugins/woocommerce/templates/) pour les recréer dans le dossier de votre thème. Ainsi, si un fichier template WooCommerce est présent dans /wp-content/themes/votre-theme/woocommerce/, il sera utilisé à la place du fichier original par l’extension. Personnaliser l’affichage de WooCommerce devient alors super facile !

En l’occurrence, nous allons ici copier le fichier /loop/sale-flash.php et le dupliquer puis l’éditer à deux endroits dans notre thème :

  1. votre-theme/woocommerce/loop/sale-flash.php : ce petit template gère l’affichage de l’infobulle de promotion dans la boucle produits WooCommerce (sur une page catalogue, sur la page boutique, sur la page « Produits liés », etc.)
  2. votre-theme/woocommerce/single-product/sale-flash.php : ce petit template gère l’affichage de l’infobulle de promotion sur la page unique (single) d’un produit WooCommerce

Donc si par hasard, vous souhaitez que la dite infobulle s’affiche différemment entre un listing de produits et la page d’un produit seul, vous pourrez le faire en éditant un de ces deux fichiers. Dans notre cas, restons simple et affichons la même chose d’un côté comme de l’autre.

Comment calculer le pourcentage de réduction d’un produit en promotion ?

Ce code a été trouvé dans un article de WPStuffs.

Essayons d’analyser et comprendre ce qu’il se passe dans ce fichier template. Si un produit WooCommerce est en promotion, nous différencions 2 cas :

  1. si le produit est variable (composé de multiples variations de produits), on récupère toutes les variations et les analyse une par une pour calculer le pourcentage de promotion du produit. On garde en mémoire le pourcentage maximum de promotion afin de n’afficher que la promotion la plus importante dans l’infobulle.
  2. si le produit est simple (pas de variation), on calcule le pourcentage de réduction en prenant son prix normal et son prix promo.
Sur le site Cha bada bada est affiché le pourcentage de réduction d'un produit en promotion
Sur le site Cha bada bada est affiché le pourcentage de réduction d’un produit en promotion

Et voila, on a réussi à afficher le pourcentage de réduction d’un produit en promotion, bien plus vendeur et accrocheur qu’un simple « Promo ! ». Pas bien compliqué et sacrément pratique, non ?

2 commentaires ont été rédigés, ajoutez le votre.

  1. Rétrolien: Comment créer un thème WordPress : introduction

  2. Rétrolien: Développer son instinct "thème" WordPress pour bien coder

Laisser un commentaire