Comment supprimer facilement un badge de vente sur votre boutique WooCommerce?


Supprimer le badge de vente WooCommerce | Bannière du blog LearnWoo

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:

  1. Extrait de code
  2. 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.

<img class = "wp-image-13468 taille complète” title=”Supprimer le badge de vente WooCommerce | Vue de page de magasin par défaut avec badge de vente” src=”https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Default-Shop-Page-View.png” alt=”Supprimer le badge de vente WooCommerce | Vue de la page de magasin par défaut avec badge de vente "width =" 1112 "height =" 655 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Default -Shop-Page-View.png 1112w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Default-Shop-Page-View-300×177.png 300w , https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Default-Shop-Page-View-768×452.png 768w, https: //cdn.learnwoo. com / wp-content / uploads / 2019/09 / Remove-WooCommerce-Sale-Badge-Default-Shop-Page-View-1024×603.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019 /09/Remove-WooCommerce-Sale-Badge-Default-Shop-Page-View-696×410.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale- Badge-Default-Shop-Page-View-1068×629.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Default-Shop-Page-Page-View -713×420.png 713w "tailles =" (largeur maximale: 1112 pixels) 100vw, 1112 pixels”/>
Vue de page de magasin par défaut avec badge de vente

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;
}

Astuce: lisez notre article de blog pour savoir comment mettre à jour un extrait de code dans le fichier functions.php.

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

<img class = "wp-image-13470 taille complète” title=”Supprimer le badge de vente WooCommerce | Badge de vente enlevé dans la page de magasin” src=”https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Shop-Page-Sale-Badge-Removed.png” alt=”Supprimer le badge de vente WooCommerce | Badge de vente enlevé dans la page de magasin "width =" 1119 "height =" 658 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Shop -Page-Sale-Badge-Removed.png 1119w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Shop-Page-Sale-Badge-Removed- 300×176.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Shop-Page-Sale-Badge-Removed-768×452.png 768w, https: //cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Shop-Page-Sale-Badge-Removed-1024×602.png 1024w, https://cdn.learnwoo.com /wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Shop-Page-Sale-Badge-Removed-696×409.png 696w, https://cdn.learnwoo.com/wp-content/uploads/ 2019/09 / Remove-WooCommerce-Sale-Badge-Shop-Page-Sale-Badge-Removed-1068×628.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce -Vente-Badge-Boutique-Page-Vente-Badge-Supprimé-714×420.png 714w "tailles =" (largeur maximale: 1119px) 10 0vw, 1119px”/>
Badge de vente enlevé dans la page de magasin

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.

<img class = "wp-image-13467 taille complète” title=”Supprimer le badge de vente WooCommerce | WordPress Paramètres CSS supplémentaires” src=”https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Setting.png” alt=”Supprimer le badge de vente WooCommerce | WordPress Additional CSS Setting "width =" 1352 "height =" 659 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional- CSS-Setting.png 1352w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Setting-300×146.png 300w, https: //cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Setting-768×374.png 768w, https://cdn.learnwoo.com/wp -content / uploads / 2019/09 / Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Setting-1024×499.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/ Supprimer-WooCommerce-Vente-Badge-Personnaliseur-Additional-CSS-Setting-533×261.png 533w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer -Additional-CSS-Setting-696×339.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Setting-1068×521. png 1068 w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Setting-862×420.png 862w "tailles =" (largeur max. : 1352px) 100vw, 1352px”/>
WordPress Paramètres CSS supplémentaires

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

<img class = "wp-image-13466 taille-complète” title=”Supprimer le badge de vente WooCommerce | CSS supplémentaire ajouté” src=”https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Added.png” alt=”Supprimer le badge de vente WooCommerce | CSS supplémentaire a ajouté "width =" 1352 "height =" 659 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS -Added.png 1352w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Added-300×146.png 300w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Added-768×374.png 768w, https://cdn.learnwoo.com/wp- content / uploads / 2019/09 / Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Added-1024×499.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove -WooCommerce-Vente-Badge-Personnaliseur-Additional-CSS-Ajouté-533×261.png 533w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer- Additional-CSS-Added-696×339.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Added-1068×521.png 1068w, https://cdn.learnwoo.co m / wp-content / uploads / 2019/09 / Remove-WooCommerce-Sale-Badge-Customizer-Additional-CSS-Added-862×420.png 862w "tailles =" (largeur maximale: 1352px) 100vw, 1352px”/>
CSS supplémentaire ajouté

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

<img class = "wp-image-13465 Taille complète” title=”Supprimer le badge de vente WooCommerce | Texte du badge de vente modifié” src=”https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Changed-Text.png” alt=”Supprimer le badge de vente WooCommerce | Texte de badge de vente modifié "width =" 1158 "height =" 658 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Changed-Text. png 1158w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Changed-Text-300×170.png 300w, https://cdn.learnwoo.com/ wp-content / uploads / 2019/09 / Supprimer-WooCommerce-Vente-Badge-Modifié-Texte-768×436.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce -Sale-Badge-Changed-Text-1024×582.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Changed-Text-696×395.png 696w , https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Changed-Text-1068×607.png 1068w, https://cdn.learnwoo.com/wp- content / uploads / 2019/09 / Remove-WooCommerce-Sale-Badge-Changed-Text-739×420.png 739w "tailles =" (largeur maximale: 1158px) 100vw, 1158px”/>
Texte du badge de vente modifié

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;
}

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.

<img class = "wp-image-13469 taille complète” title=”Supprimer le badge de vente WooCommerce | Image ajoutée pour le badge de vente” src=”https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Image-Added.png” alt=”Supprimer le badge de vente WooCommerce | Image ajoutée pour le badge de vente "width =" 1151 "height =" 658 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Image-Added .png 1151w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Image-Added-300×172.png 300w, https://cdn.learnwoo.com /wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Image-Added-768×439.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove- WooCommerce-Sale-Badge-Image-Added-1024×585.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Image-Added-696×398.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/09/Remove-WooCommerce-Sale-Badge-Image-Added-1068×611.png 1068w, https://cdn.learnwoo.com/wp -content / uploads / 2019/09 / Remove-WooCommerce-Sale-Badge-Image-Ajouté-735×420.png 735w "tailles =" (largeur maximale: 1151px) 100vw, 1151px”/>
Image ajoutée pour le badge de vente

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:

  1. YITH Badge Management Plugin – 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

Ou continuer à explorer LearnWoo pour des articles plus étonnants.

Laisser un commentaire

Fermer le menu