Lorsque vous offrez des réductions sur votre boutique WooCommerce, le badge Vente est automatiquement ajouté au (x) produit (s). Bien que cela puisse attirer l’attention de vos clients potentiels sur le produit, il peut arriver que vous souhaitiez proposer immédiatement le produit à prix réduit sans attirer l’attention de l’utilisateur. Certains propriétaires de magasin souhaiteraient également personnaliser le badge de vente en fonction de leurs besoins. Ils peuvent personnaliser le badge pour le rendre plus attrayant, modifier le texte et la couleur, etc.
Dans cet article, nous verrons comment supprimer facilement le badge de vente de votre boutique WooCommerce. Nous étudierons également les moyens de personnaliser le badge de vente.
Vous pouvez supprimer le badge de vente WooCommerce de deux manières simples:
- Extrait de code
- CSS
Les méthodes énumérées ci-dessus mai être remplacé par certains thèmes. Vous pouvez donc tester et utiliser vous-même la méthode souhaitée.
1. Utiliser l’extrait de code
Ci-dessous, une capture d’écran montrant les badges de vente pour les produits de la page du magasin, par défaut.
Ajoutez l’extrait de code ci-dessous dans le functions.php fichier de votre thème de site Web activé. L’extrait de code est applicable à la fois à la page de magasin et aux pages de produit individuelles.
add_filter(‘woocommerce_sale_flash’, ‘lw_hide_sale_flash’);
function lw_hide_sale_flash()
{
return false;
}La capture d’écran ci-dessous montre la page de la boutique sans les badges de vente WooCommerce. Vous pouvez remarquer que le prix de vente est toujours appliqué.
2. Utilisation de CSS
Vous pouvez ajouter l’extrait de code CSS à l’aide du personnalisateur WordPress. Ouvrez le Customizer et cliquez sur CSS supplémentaire, comme indiqué dans la capture d’écran ci-dessous. Vous pouvez également remarquer les badges de vente visibles pour les produits.
Ajoutez l’extrait ci-dessous sur le site.
.woocommerce span.onsale{
display:none;
}WordPress affichera un aperçu des modifications mises à jour. Le badge de vente sera maintenant caché de la boutique et des pages de produits. Vous pouvez cliquez sur le Publier bouton pour enregistrer les modifications. La capture d’écran ci-dessous montre comment le CSS doit être ajouté et la modification mise à jour. c’est-à-dire, badge de vente enlevé.
Au lieu de supprimer complètement le badge Vente, vous pouvez choisir de le personnaliser. Vous pouvez modifier le texte, la couleur, la position, ajouter une image, la planifier, l’automatiser et bien plus encore. Nous examinerons certaines des personnalisations que vous pouvez effectuer avec des extraits de code ainsi que des plug-ins.
1. Utilisation d’extraits de code
Nous examinerons quelques extraits de code de base qui vous aideront à personnaliser le badge de vente de différentes manières.
1) Changer le texte du badge de vente
Modifions le texte du badge Vente de «Vente» par défaut à «Remise sur offre». Pour ce faire, ajoutez l’extrait de code ci-dessous dans le functions.php fichier de votre thème de site Web activé.
add_filter( 'woocommerce_sale_flash', 'lw_replace_sale_text' );
function lw_sale_text( $html ) {
return str_replace( __( 'Sale!', 'woocommerce' ), __( 'Offer Discount', 'woocommerce' ), $html );
}Dans l’extrait de code ci-dessus, vous pouvez remplacer le texte « Remise sur l’offre » par le texte souhaité.
La capture d’écran ci-dessous montre comment le texte du badge de vente mis à jour est affiché.
2) Remplacement du texte du badge de vente par une image
Vous pouvez ajouter une image à la place du texte par défaut. Encore une fois, vous devez ajouter l’extrait de code ci-dessous au functions.php fichier de votre thème de site Web activé.
add_filter('woocommerce_sale_flash', 'lw_custom_sales_badge');
function lw_custom_sales_badge() {
$img = '
';
return $img;
}
';
return $img;
}Lorsque vous utilisez l’extrait de code ci-dessus, n’oubliez pas de remplacer la valeur de l’URL dans le src attribut de la img étiquette.
La capture d’écran ci-dessous montre l’image personnalisée ajoutée à la place du badge de vente. Notez que la position de l’image peut différer selon les thèmes.
3) Changement de position et personnalisation plus profonde
Il existe plusieurs plugins sur le marché, qui font plus que changer le texte et la couleur du badge de vente WooCommerce. Les plugins vous donnent plus de contrôle et vous permettent de personnaliser différents aspects du badge de vente.
Certains Principaux plug-ins de gestion des badges WooCommerce sont:
- YITH WooCommerce Badge Management – Ce plugin vous permet de personnaliser le texte, la couleur, le design et la position. Le plug-in dispose également d’une affectation automatique des badges en fonction de catégories, de conceptions de badges prédéfinies et d’une gestion facile de tous les badges.
- WooCommerce Advanced Labels – Vous pouvez appliquer des badges sur un individu ainsi que sur un ensemble de produits. Il calculera également le pourcentage de réduction et affichera le montant réduit dans le badge. Il existe plusieurs conditions telles que le type de produit, le prix de vente, la quantité en stock, etc., à l’aide desquelles vous pouvez configurer les étiquettes.
- Woo Badge Manager – Vous pouvez créer des designs attrayants en utilisant du texte, des images et des icônes. Il dispose également d’un compte à rebours des ventes, de la date d’expiration du badge, et compte plus de 60 modèles de badges pour vous gâter avec de nombreuses options.
- Gestion des badges de produits WooCommerce – Vous pouvez configurer des badges pour des produits individuels, des catégories ou un badge générique pour tous les produits. Il propose de nombreux badges intégrés, vous permet de positionner le badge, de contrôler l’opacité, le remplissage et le rayon du badge.
- WordPress WooCommerce Badge Manager Plugin – Mettre en place des badges pour des produits individuels ainsi que sur des catégories de produits. Il attribuera également automatiquement un nouveau badge pour tous les nouveaux produits de votre magasin.
- Gestion des badges pour WooCommerce – Ce plugin aide également à personnaliser le texte, la couleur et la position du badge. Vous pouvez créer des ensembles et attribuer des badges à des catégories de produits. Vous pouvez utiliser les images intégrées ou télécharger votre image personnalisée. Il vous permet également de définir la période de validité, de modifier le remplissage, la couleur d’arrière-plan ou même de masquer le badge Vente de WooCommerce.
Pour comprendre plus de fonctionnalités de chacun des plugins ci-dessus, lisez notre article de blog. P.S., nous avons également abordé certaines des meilleures pratiques d’utilisation des badges de produit dans cet article. Ne manquez pas ça!
Vous pouvez également regarder la vidéo pour consulter les principaux plug-ins de gestion des badges. Certains des plugins peuvent être ajoutés ou supprimés de la liste de plugins ci-dessus, dans la vidéo.
Conclusion
Les badges de vente sont un excellent moyen d’attirer l’attention des clients et d’augmenter les ventes sur votre boutique WooCommerce. Bien que cela puisse convenir à certains propriétaires de magasins, certains pourraient penser qu’il est inutile. Nous avons discuté des moyens de supprimer le badge de vente WooCommerce à l’aide d’un extrait de code et de CSS. Nous avons également discuté des moyens de personnaliser les badges de vente sous la forme d’un extrait de code et de plug-ins.
Certains extraits de code sont remplacés par des thèmes. Par conséquent, il est préférable de les tester et de les utiliser. Bien que nous ayons testé tous les extraits de code et qu’ils fonctionnent bien avec notre thème. Si vous recherchez plus de personnalisation, il y a toujours des plugins!
Vous pouvez consulter des articles de blog sur Les bases de WordPress, WordPress Sécurité & Performance, ou Personnalisations WooCommerce pour en apprendre davantage sur les différents aspects de WordPress et WooCommerce.
