1. My name is Michele Pisicoli, I was born and I live in Bari(Italy), and I’m a developer with 15 years of experience in programming in various environments. Product Badges removes the existing sale badges from your products to ensure they do not clash, however you can create a sales badge to replace it using this extension and under your badge’s display options select the sale products option. The following is a simple filter I created to return false; when WooCommerce calls for the Sale badge: ... //Change Sale Flash to Custom Text add_filter( ‘woocommerce_sale_flash’, ‘le_custom_woocommerce_sale_flash’ ); function le_custom_woocommerce_sale_flash() { return ”.__(‘Spotlight Item!’, ‘woocommerce’).”; } Reply. Just add the following code. Additionally, it also empowers you to use unique sales badges for various products. thank you. By default, it looks like this: Now add this code to the functions.php file of your theme. The styling of the badge depends on your taste as well as on the theme and the look-and-feel of your sale badges. It would be great to change this ‘Sale!’ text to something unique, text that encouraged … Custom Sale Badge. 41 1 1 gold badge 1 1 silver badge 4 4 bronze badges. The new discount codes are constantly updated on Couponxoo. Follow edited Apr 13 '17 at 12:37. You can select initial design of the badge you want to use, and then further customize the text of the badge, and change the badge color and the badge text color to suit your WooCommerce … @brasofilo code from first link already added. You can add labels to a set of selected products / categories or can replace default Woocommerce On Sale badges. Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. The plugin provides you with some default image-badges as well. For those who are familiar with WooCommerce, you may also be aware of its sale-flash functionality. We receive a number of requests from customers who want to replace the text. ... You can also just set the sale times for each item as a past date, then the sale goes away and they won’t reappear because the sale "already happened". Get access to over one million creative assets on Envato Elements. Featured Image Modification. Note: The background color and badge corner background color is applicable only for text background badges. How to Use a Custom Sales Badge Icon in WooCommerce One of the greatest things about WooCommerce is its hook system. The YITH WooCommerce Badge Management plugin should help. This way we can be sure that by updating WooCommerce we don’t lose any of our changes. Then, install it on your WooCommerce WordPress website. If want to change the badge style all over the website, you can use .onsale class; I want to say a couple words about StoreFront theme – it already removes the default WooCommerce sale labels from their original locations and adds its own custom ones, for example under the title: You can customize a badge’s text and color. The first step is to get the CSS selector of the button. Some People do not like the badge Text and want to change it to something like 50% off Etc. Purchase Woo Badge Designer from CodeCanyon marketplace at a reasonable price of $24. You can easily set a different color or change the whole appearance of your sale badge on distinct products. Community ♦ 1 1 1 silver badge. Currently, there is no way to change the colors in the global color settings. the products that have a Sale Price lower than the Regular Price. The RGB code is calculated through a very simple algorithm and you could always change the algorithm by changing a few lines of PHP code instead of changing hundreds of CSS classes. Generally speaking, you should select the proprieties and the style rules that you want to override or change with tools like Firebug. you can assign a custom badge on a per-category, per-product, per-shipping-class basis. Live preview for easy positioning / styling. These are content-product.php and single-product\product-image.php. 1. After activating Product Labels For Woocommerce plugin, go to the Badges menu in WordPress admin menu bar, select Badges, to add new badge click on the ‘Add New Badge… Misc. Fortunately, we can make as many changes as we like on the WooCommerce templates without compromising the integrity of the plugin, simpl… Option to set badges to a set of products / category. Author. Green is 0% and red is 100%. By default, the WooCommerce sale badge displays the text ‘Sale!’ when a product has been discounted. With this plugin, you could customize a badge’s text & its color and could also set its dimension and position. You can get the best discount of up to 50% off. All that we have to do is to make the following changes to the code: The first thing we have to do is calculate the discount, and in order to do that we’ll need the Regular Price and the Sale Price. Up-sell, Cross-sells, Related products etc. Some People do not like the badge Text and want to change it to something like 50% off Etc. Option to customize badge color, font size, line height, width, opacity, position etc. From this tab, you can enable and customize the custom design your WooCommerce badge. hover icon size and color; sale badge; You can use whatever parts of the CSS you need. And the labels that can be added via this plugin come in super handy when there is any sale, discount, special features, unique product information. Element like Product Title, Product Price, Add To Cart Button & Sale badge Color can be directly changed from Wordpress customizer. Go to the WooCommerce Product Page Or Cart Page, You will See Buttons in Red colors. With so many actions and filters, you can edit and add custom content almost anywhere. This plugin comes with awesome 17 presets where you can easily change the style according to your current collection, season or holiday and impress your customers with your shop’s new Sale Badges. In this case, we have an exception to the rule. February 19, 2017 … In that case you can just simply remove the ‘Sale’ badge. There are Two Ways To do this: Our team at Themelocation is comprised of WordPress developers of high expertise. At this point, the customization of the sale-flash is done. The page I … So today, We are going to show you how to change badge text to something you like. Every file inside the WooCommerce folder has priority over the original template files of the plugin. The default color is a purple background with white text. Badge Background Color: This is used to assign the background color for text background templates. Badge Management for WooCommerce is a free plugin. WooCommerce adds sale badge to the products that are on sale. You can customize color of WooCommerce product section. WooCommerce Sale Badge Text Color – Controls the text color of the WooCommerce sale badge. Change the heading typography. For example, a 70% discount is more attractive than a 15% one, but they are both displayed by WooCommerce with a simple sale-flash on the product image. Need to change the text color of the Sale(regular price with strithrough) of woocommerce. In both cases, I change the following line from ‘Out of Stock’ to ‘Sold’ as follows: This is used to show the preview of all badge settings configurations.Please note the color customization settings will only appear after saving the badges. Why you ever need to change color of WooCommerce Buttons? You should see something like this: That’s is our button, in HTML code. Option to set hide / show badges. Design, code, video editing, business, and much more. The file that generates the sale-flashis located in the following folder: your-site/wp-content/plugns/woocommerce/templates/loop/sale-flash.php Usually, it’s not such a good idea to change plugin files because all the changes will be lost during the first update, and disabling updates is not an option. asked Oct 20 '13 at 5:59. jimaroonie jimaroonie. Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too! Woocommerce Product Badge Manager. WooCommerce Sale Badge Text Size – Controls the font size of the WooCommerce sale badge text. Generally this is a rule that is valid for all the files in the template folder of the WooCommerce plugin. Notifications. This plugin can either be used alongside the default ‘Sale’ badge or replace it. You can see there is a WooCommerce “Sale” icon/badge on every product category. Looked lovely yesterday but today the badge has changed from “New” to “Sold out” on my category page. Additionally, you can hide the featured image and the sales badge. Everything you need for your next creative project. Customizing the WooCommerce Sale Badge Instead of removing the Sale badge completely, you can choose to customize it. Host meetups. In the current system, users can’t perceive the Dimension—or quality—of the discount. Option to set badges to all products ‘On Sale’. It allows you to highlight special features and new offers on your products. The installation of Woo Badge Designer is similar to the installation of other premium WordPress plugins.So, if you feel any difficulties regarding the installation of the plugin then, you can take the help of its documentation. This code snippet will let you filter the normal "Sale" badge … The custom design includes: title color, background color, background corner color, and font size. Install and activate the extension. YITH W00Commerce Badge Management is one of the best premium WooCommerce Badge Manager Plugins that allows you to insert a badge on your products to highlight discounts, promotions, etc. This code snippet will let you filter the normal "Sale" badge … Other features of this plugin are four different image badge options etc. Usually, the default text displayed on the sale tag is ‘Sale’. It is also possible to use image as an on-sale badge like, If want to change the badge style all over the website, you can use. How to change the out-of-stock-badge text from "Out of stock" to "SOLD"? Option to set hide / show badges. Also note that if your theme already has a file yourtheme/woocommerce/loop/sale-flash.php then it is very likely that it already modifies the original behavior of the sale-flash. Adobe Photoshop, Illustrator and InDesign. To change the color of the Sale badge, simply navigate to Customize then Additional CSS section and add the following lines:.onsale { background-color: black; border-color: red; color: red; } Here is the result: 20. In your WordPress dashboard go to Products > Badges. I love WordPress, WooCommerce and Gutenberg so much. This offers the same functionality as you had Considering how important images are when selling, we recommend you add at least 3-4 pictures of each of your products. The color setting only allows you to change theme color, text color in normal, active, and hover states. Following @maksbd19 suggestion I found twofiles that required editing within the woocommerce folder inside the themes folder (in this case neighborhood). If a product have lower price than the actual price, Woocommerce will add sale badge. The two colors have the following RGB codes: With these simple formulas we can add to the red channel and take from the green channel. 4. right now they are black with white text. Improve this question . The WooCommerce sale badge is effective in alerting customers about a discount, but as this is the WooCommerce core default setting, it looks a bit overdone and commonplace. Obtain the ID of the first available variation (rows 8 and 9). For example, if your website primary color is orange but WooCommerce is showing blue buttons. Change presets and personalize your badges in the Improved Sale Badges for WooCommerce settings with ease! 3 months ago by Tamas When you have a discount price set for one of your WooCommerce products, a small sale badge or circle appears on the product’s featured image. WooCommerce adds sale badge to the products that are on sale. It will allow you to highlight the special features and new offers on your products and helps you to customize a badge’s text and its color and you can also set the dimension and position. Trademarks and brands are the property of their respective owners. Widgets. Though it is one of the most frequent feature requested, WooCommerce still does not give this feature by default. Lead discussions. How to Use a Custom Sales Badge Icon in WooCommerce One of the greatest things about WooCommerce is its hook system. you can assign custom badges to … Looking for something to help kick start your next project? Share. Go to Appearance > Customize > WooCommerce > WooCommerce Color to change the WooCommerce … Choose from the 17 available presets, select the colour, set the position and you’re ready to impress your customers with your shop’s new Sale Badges. It has the option to show or hide on sale badge as per your choice. If want to change the badge style all over the website, you can use .onsale class; I want to say a couple words about StoreFront theme – it already removes the default WooCommerce sale labels from their original locations and adds its own custom ones, for example under the title: While this text is self-explanatory and to the point, it can be dull, and it’d be great to show improved sale badges for WooCommerce. The product badge (s) will now display around your store based on your badge … Copy paste the following code in your function.php file. WOOCOMMERCE DOCUMENTATION. Design like a professional without Photoshop. Unfortunately, the text on the badge cannot be changed easily, but here is a way. Once we have the red and green values, we can modify the sale-flash background by adding the rule directly to the span tag. The file that generates the sale-flash is located in the following folder: your-site/wp-content/plugns/woocommerce/templates/loop/sale-flash.php. We may see button customizer functionality in upcoming WooCommerce versions but till now use this custom css trick to achieve desired results. WooCommerce Product labels (WooCommerce Sale Badges) helps to create product labels or product badges easily. WooCommerce’s sale-flash is visualized in the archives and single pages for the sale products, i.e. is easily altered adding something like this to the custom-css:.out-of-stock-badge { background: red; font-size: 12px; } How to change the out-of-stock-badge text from "Out of stock" to "SOLD"? Attachments: You must be logged in to view attached files. Customize Product Colors. to make them distinct. Open up the functions.php file of … Another interesting way to customize the WooCommerce product page in Divi is to edit the featured image. HOW TO ADD BADGES? If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. WooCommerce Badge . Hope that helps :) In this way, you can add WooCommerce promotional badges using the badge manager plugin to help you increase the sale of your products. 3 months ago by Tamas. Well, that’s easy. I mostly wanted to provide the WooCommerce classes so you can experiment and do your own styling css code for Divi. I am working on e-commerce website using wordpress, may someone tell me how to add on products other badges than "new" and "sale" Collaborate. Click Update and It will Be Done and Ready to Go. you can automatically assign badges to new (you define what “new” means in days), on sale, featured, low in stock, out of stock products. Is there a way to target it via the theme? Badge Management for WooCommerce. The blue channel remains unchanged; it will always be zero. WooCommerce Sale Badge Background Color – Controls the background color of the WooCommerce sale badge. What I basically do is developing web back-end for .NET(C#, ASP.NET MVC), javascript/html/css front-end developement and customizing CMS solutions mainly Wordpress. We can add some color to our solution by using a chromatic scale to represent the discount percentage. We will look into some of the customizations that you can do with code snippets as well as plugins. This doesn’t look very good and the client was like WTH man! Woo Badge Designer is your ideal WordPress plugin to transform the default WooCommerce sale badges into more appealing badge designs. So today, we are demonstrating how to change sale badge text to something you like. It gets the product “created” date, and compares this with the current time minus the “newness days” (you can change this to 60 or whatever number of days). ↑ Back to top. Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document). This plugin helps you to set a different sale badge for each product on your WooCommerce store. In this tutorial, we're going to take a look at how we can customize and improve the WooCommerce sale-flash display to show the effective discount percentage and to change the color of the label based on said percentage.