Par défaut, le badge de vente de WooCommerce peut sembler un peu fade. Cela ressemble à un simple badge avec le mot « Vente! » sur l’écran. Bien que cela soit efficace pour informer vos clients que certains produits sont à prix réduit, cela semble un peu banal. Si vous souhaitez ajouter du piquant à votre boutique en ligne, vous pouvez modifier WooCommerce pour modifier le texte sur le badge de vente.

Les stratégies de vente et de promotion sont parfaites pour encourager vos clients à acheter vos produits. Que vous fassiez une promotion de vacances ou que vous souhaitiez déplacer des stocks excédentaires, il est facile de répertorier les produits sélectionnés à vendre avec WooCommerce. Tout ce que vous avez à faire est de saisir un prix de vente dans la zone de données produit et de dire immédiatement « Vente! » Le badge apparaîtra dans la liste des produits.

La vente! » Le badge peut être un peu écrasant. Ainsi, changer le texte d’affichage en un autre texte peut le rendre agréable. Dans ce tutoriel Divi, nous allons vous donner un petit extrait de code PHP que vous pouvez utiliser pour définir la valeur par défaut « Vendre! » Peut changer. Texte à quelque chose de personnalisé.

Souhaitez-vous ignorer le didacticiel Divi étape par étape? Passer à la bibliothèque de codes et ajoutez l’extrait de code PHP à votre fichier functions.php.

Personnalisation de WooCommerce: changez le badge de vente en texte personnalisé

Par défaut, le badge de vente WooCommerce affiche le texte « Vente! » À. lorsqu’un produit a fait l’objet d’une réduction. Bien que ce texte soit explicite et pertinent, il peut être ennuyeux et il serait bon de montrer des badges de vente améliorés pour WooCommerce.

Ce serait formidable de changer cette « vente »! Texte sur quelque chose d’unique, texte qui encourageait un peu plus d’urgence, tel que:

  • Vente
  • ne pas dormir
  • Réagissez vite!
  • Dernier stock
  • Stock de clôture

Bien qu’il n’y ait pas de moyen facile de changer cette «vente»! Texte dans le plugin WooCommerce sur le backend, il y a une correction de code rapide pour cela.

Dans ce tutoriel Divi, vous obtiendrez un court extrait PHP de quelques lignes qui modifie le texte du badge de vente pour WooCommerce.

Dans ce didacticiel, vous allez:

  • Ajoutez une ligne de code PHP au fichier functions.php dans votre rubrique enfant

Si vous n’avez pas encore configuré de thème enfant, vous pouvez en télécharger un gratuitement à l’aide du générateur de thème enfant Divi Space. Si vous ne savez pas ce que sont les sous-thèmes ou comment les utiliser, consultez notre guide complet des sous-thèmes.

Étape 1: ajouter un module Divi Shop

Si vous ne l’avez pas déjà fait, ajoutez un Module Boutique Divi sur une page ou un post avec le Divi Builder.

WooCommerce Change Sale Badge Tutorial Divi - Ajouter un module de boutique Divi

Ajouter le module boutique avec le Divi Builder

Étape 2: ajouter les prix de vente des produits

Pour ajouter des prix de vente, sélectionnez les produits à vendre, visitez le dos de la liste de produits et faites défiler vers le bas jusqu’à Données du produit Section. Cliquez dessus Général Tab et vous verrez une option pour entrer un Prix ​​de vente.

Une fois que vous avez ajouté un prix de vente, cliquez sur Mettre à jour sur la liste des produits.

WooCommerce Change Sale Badge Divi Tutorial - Ajouter un prix de vente

Ajoutez un prix de vente à vos produits

Répétez cette étape aussi souvent que vous le souhaitez et ajoutez les prix de vente aux produits réduits.

Lorsque vous avez terminé, retournez à l’avant de votre magasin et vous verrez une vente! Un badge a été ajouté aux produits en promotion.

WooCommerce Change Sale Badge Divi Tutorial - Affichage des badges de vente

Par défaut, le badge de vente WooCommerce s’affiche simplement sous la forme « Vente! » Affiché.

Étape 3: Modifiez le fichier functions.php

Aller vers Apparence> Éditeur de sujets Console et localisez le fichier functions.php dans votre rubrique enfant.

Copiez et collez le code suivant avant la fermeture de PHP?> Bracket:

add_filter('woocommerce_sale_flash', 'ds_change_sale_text');

function ds_change_sale_text() {
return '<span class="onsale">Custom!</span>';
}

Tutoriel WooCommerce Change Sale Badge Divi - Ajouter le code PHP 1

Ajoutez du code PHP au fichier functions.php de votre rubrique enfant. Lorsque vous avez terminé, cliquez sur Fichier de mise à jour pour enregistrer vos modifications.

Maintenant, lorsque vous affichez le front-end de votre site Web, vous remarquerez que le texte de « Vente! » à «Personnalisé!».

WooCommerce Change Sale Badge Divi Tutorial - Sale Badge changed 1

Avec juste une petite ligne de PHP, vous avez réussi à modifier le texte du badge de vente WooCommerce

Vous pouvez concevoir le badge de vente pour afficher n’importe quel texte personnalisé. Changez simplement le mot Custom! Tout ce que tu aimes.

Voici un autre exemple:

add_filter('woocommerce_sale_flash', 'ds_change_sale_text'); function ds_change_sale_text() { return '<span class="onsale">Save Now!</span>'; }

Tutoriel WooCommerce Change Sale Badge Divi - Ajouter le code PHP 2

Ajoutez du code PHP au fichier functions.php dans votre rubrique enfant

Dans cet exemple, j’ai le texte « Enregistrer maintenant! » Les usages. Faire prendre conscience aux clients que des économies sont garanties pour les produits abandonnés.

WooCommerce Change Sale Badge Divi Tutorial - Sale Badge changed 2

Utilisez l’extrait de code PHP pour ajouter du texte personnalisé au badge de vente WooCommerce

Avec un peu de PHP, vous pouvez changer le texte du badge de vente WooCommerce en ce que vous voulez! Les possibilités sont vraiment infinies lorsque vous commencez à travailler avec du code!

Nous espérons que vous avez apprécié cet extrait! Si vous cherchez d’autres moyens de changer le badge de vente WooCommerce, suivez ce tutoriel Divi pour changer le texte en pourcentage.

Suggérer une découpe!

Vous souhaitez créer des fonctions personnalisées sur votre site Divi mais vous ne savez pas comment faire? Soumettez votre demande d’extrait en laissant un commentaire ci-dessous et notre équipe de développeurs qualifiés se mettra au travail!



Source link

Recent Posts