WooCommerce : Afficher le nombre de produits vendus

Avez-vous déjà entendu parler de la preuve sociale ?

Pour vous expliquer rapidement, il s’agit d’un grand principe marketing où le but est de montrer qu’un certain nombre de personnes sont déjà clientes pour en inciter de nouvelles à passer commande.

Par exemple, si je vous dis que plus de 1 000 personnes se sont procurées Relooker son Thème pour apprendre les bases du code, cela devrait vous motiver davantage pour l’acheter.

Après tout, 1 000 personnes ne peuvent pas se tromper, n’est-ce pas ?

Eh bien vous pouvez faire la même chose sur une boutique créée avec WooCoomerce.

Avec le snippet que nous allons voir aujourd’hui, on va pouvoir afficher le nombre de ventes sur chaque page produit WooCommerce ou sur votre page boutique.

Cela devrait inciter vos visiteurs à passer à l’achat et ainsi améliorer votre taux de conversion (et augmenter votre chiffre d’affaires ;)).

Voici comment mettre cette fonctionnalité en place.

Afficher le nombre de produits vendus sur les pages produits

Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant.

/* Afficher le nombre de produit vendu sur les pages produits WooCommerce */

// On affiche le nombre de ventes sur la page produit
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count', 11 );
 
function wpm_product_sold_count() {
    global $product;

	//On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
	// On affiche notre texte personnalisé contenant le nombre de vente
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

Pour modifier la phrase affichant le nombre de ventes, modifiez le texte 'Produit vendu %s fois'.

Attention à bien laisser le %s dans ce texte. C’est la variable contenant le nombre de ventes du produit !

Cela nous affiche :

(Oui j’avoue, je n’ai pas acheté les produits de test donc ils ont été vendus 0 fois 😉 )

Si vous voulez styliser un peu cet affichage, vous pouvez par exemple ajouter le code suivant dans le fichier style.css de votre thème enfant en ciblant la class CSS de notre texte qui est wpm-sold-product:

/* CSS Affichage nombre de produits vendus */

.wpm-sold-product {
	font-weight: bold; /* On met le texte en gras */
	background-color: #cecece; /* On met une couleur de fond grise */
	text-align:center; /* On centre le texte */
	padding-top:10px; /* On met une marge interne supérieure de 10pixels */
	margin-bottom:10px; /* On met une marge externe inférieure de 10pixels  */
}

Voilà ce que ça nous donne maintenant :

Maintenant qu’on a fait cela sur la page produit, voyons comment faire pour…

Afficher le nombre de produits vendus sur la page boutique

Pour placer le nombre de ventes par produit sur la page boutique, plusieurs solutions s’offrent à nous.

Si vous souhaitez l’afficher uniquement sur la page boutique et pas sur les pages de produits simples, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

/* Afficher le nombre de produit vendu sur la page boutique WooCommerce */

add_action( 'woocommerce_after_shop_loop_item', 'wpm_product_sold_count', 11 ); // On l'affiche ici sur la page boutique
 
function wpm_product_sold_count() {
    global $product;

	//On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
	// On affiche notre texte personnalisé contenant le nombre de vente.
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

Et on stylise avec un peu de design également. Un peu différent cette fois:

/* CSS Affichage nombre de produits vendus */

.sold-product {
	font-weight: bold; /* On met le texte en gras */
	background-color: #2ea3f2; /* On met un fond bleu */
	color: white; /* On met le texte en blanc */
	text-align:center; /* On centre le texte */
	padding-top:10px; /* On met une marge interne supérieure de 10px */
	padding-bottom:10px!important; /* On met une marge interne inférieure de 10px */
	margin-bottom:10px; /* On met une marge externe inférieure de 10px */
	border-radius: 50px; /* On définit des coins arrondis de 50px  */
}

Voilà cette fois le résultat:

Afficher le nombre de produits vendus sur la page boutique ET sur la page produit

On utilise presque le même code, mais on utilise cette fois les deux add_action() précédents en même temps. Copiez-collez maintenant le code suivant dans le fichier functions.php de votre thème enfant:

/* Afficher le nombre de produit vendu sur les pages produits et boutique WooCommerce */

add_action( 'woocommerce_after_shop_loop_item', 'wpm_product_sold_count', 11 ); // On l'affiche ici sur la page boutique
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count', 11 ); // On l'affiche ici sur la page produit
 
// Le code ensuite est le meme que précédemment
function wpm_product_sold_count() {
    global $product;

	//On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
	// On affiche notre texte personnalisé contenant le nombre de vente
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

Et c’est tout !

Le nombre de chaque produit vendu sera visible sur votre page produit et sur votre page boutique.

Afficher le nombre de ventes à partir d’un certain seuil

Sur la page Facebook de la Marmite, Pierre a nous a fait remarquer que montrer qu’un produit a été vendu 0, 1 ou 2 fois n’est pas très engageant.

Et vous savez quoi ?

Il a tout à fait raison !

En terme de preuve sociale, il est préférable de montrer qu’un produit s’est écoulé à des dizaines voire des centaines d’exemplaires.

Qu’auriez-vous vous pensé si je vous avais dit que Relooker son Thème s’était écoulé à 12 exemplaires ?

Cela serait ridicule, n’est-ce pas ?

Du coup, voyons comment faire pour adapter notre snippet pour qu’il s’affiche uniquement à partir d’un certain nombre de vente :

// Afficher le nombre de ventes sur la boutique et les pages produits si les ventes sont supérieures à 50 exemplaires

add_action( 'woocommerce_after_shop_loop_item', 'wpm_product_sold_count_50', 11 ); 
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count_50', 11 );

function wpm_product_sold_count_50() {
    global $product;

	//On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
	// On affiche notre texte personnalisé contenant le nombre de vente seulement s'il est supérieur ou égal à 50.
 	if ($units_sold >= 50) {
    	echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
	}
}

Vous pouvez également modifier le nombre de produits vendus à partir duquel vous souhaitez afficher ce compte.

Pour cela modifiez simplement la condition if ($units_sold >= 50) en par exemple if ($units_sold >= 5) pour ne l’afficher qu’une fois que vous avez vendu 5 fois le produit.

Pour en savoir plus sur les opérateurs de comparaison en PHP, je vous invite à consulter cette page.

Je vous laisse modifier et adapter le code CSS selon le design de vos sites ! N’hésitez pas à nous partager vos adaptations en commentaires 🙂

Source: Business Bloomer

Devenez un freelance WordPress accompli

Trouvez les bons clients, vendez des sites rentables, et libérez-vous de vos contraintes​

Découvrir la formation