Vous êtes ici : Accueil | Snippets WordPress | WooCommerce | WooCommerce : Afficher le nombre de produits vendus

WooCommerce : Afficher le nombre de produits vendus

woocommerce snippet

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 1000 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, 1000 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’affaire ;)).

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 vente, modifiez le texte 'Produit vendu %s fois'.

 

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

Cela nous affiche :

nombre ventes woocommerce snippets wpmarmite

(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  */
}

Voila ce que ça nous donne maintenant :

nombre produits vendus css woocommerce snippets

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 vente par produit sur la page boutique, plusieurs solutions s’offrent à nous.

Si vous souhaitez l’affichez 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  */
}

Voila cette fois le résultat:

nombre produits vendus page boutique woocommerce

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 remarqué 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

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

3 commentaires Ajoutez le vôtre

  1. Merci Alex j’en ai justement besoin cette semaine.

    Penses tu qu’il est posible d’ajouter un objectif ?

    5 produits vendus sur 8 ? 5/8?

    Répondre
    • Bonjour, c’est possible mais ça te demandera un peu de développement pour afficher un nombre différent en fonction du produit

  2. Je vais regarder pour coupler avec un custom field a remplir pour chaque produit

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



fe93cf3392649d6e55ff2c6877fed61d(((((((((((((((((((((((((((((((
34 Partages
Partagez27
Tweetez4
Partagez3