Hi, developers Hope all of you are doing well in your life today in this tutorial we will discuss how to change the default ugly sale badge in woo-commerce to a unique and more practical save badge by following a few steps we have discussed below.
Before Proceeding with the tutorial I want to show you the image comparison that what we are getting in default woo-commerce and what we will create after adding some code to your WordPress/woo-commerce website, this will give you much clarity on whether you want to add the same result in your website or not.
Wocommerce Default Sale Badge in Product Snippet
Custom Designed New Save Badge in Woocommerce
As you have seen in the above images that what we got and what we will develop by coding this image must have given you more clarity about what we are talking about here in this tutorial so let’s go ahead now.
Tutorial for converting Sales badge save badge step by step
Step 1
Login to your WordPress dashboard and visit the appearance from there and select the option “Theme Editor” from there.
Step 2
Copy the code mentioned below and visit the website theme editor section there you will find the functions.php file on the left bar paste the code in the functions.php file at the last and hit “Update file”
Code Starts Below
add_filter( ‘woocommerce_sale_flash’, ‘woocommerce_custom_badge’, 10, 3 );
function woocommerce_custom_badge( $output_html, $post, $product ) {
// Added compatibility with WC +3
$regular_price = method_exists( $product, 'get_regular_price' ) ? $product->get_regular_price() : $product->regular_price;
$sale_price = method_exists( $product, 'get_sale_price' ) ? $product->get_sale_price() : $product->sale_price;
$saved_price = wc_price( $regular_price - $sale_price );
$output_html = '<span class="onsale">' . esc_html__( 'Save', 'woocommerce' ) . ' ' . $saved_price . '</span>';
return $output_html;
}
Code Ends Above
After adding the code you are done with the changes now when you see the snippets on the archive page they are changed now to a newer one now you can design the badge by using CSS to give better look and feel to your badge but it’s not a mandatory part you can do if you wish to hence everything is done for now Thanks and happy coding
NOTE– The tutorial is for advanced developers if you don’t have development knowledge don’t prefer to do changes by yourself because if you make some errors in the process your website can crash prefer hiring a developer to do any kind of development on the website also if you want us to develop an eCommerce website for you or you need any assistance from us feel free to contact us on [email protected] or call +91-8448800992