Customizing Sale Badge at Woocommerce

Hi there,

Did you get this working? I’m not noticing any issues.

Let me know ??

Hi Tom,

Thanks for the reply. Well, I have looked for a solution for a long time and as I couldn’t find it, I have edited the CSS code in woocommerce.css.

However, I have just modified functions.php again with the following code in order to show the exact problem.

add_filter('woocommerce_sale_flash', 'my_custom_sales_badge');
function my_custom_sales_badge() {
$img = '<img width="75px" height="30px" src="https://misofis.com/wp-content/uploads/indirim.gif"></img>';
return $img;
}

Please take a look at the problem at the link given below;

https://misofis.com/urun-kategori/temizlik-urunleri/kisisel-bakim-urunleri/dis-macunlari/

As you can see, the animated gif scaled up to the width of the images at product loop pages. In single product page, it moves out of the right-end of the image but at the exact dimensions.

Could you please help me ? Thanks in advance.

Ismail Kimyacioglu

Hi there,

Try giving it a class:

add_filter('woocommerce_sale_flash', 'my_custom_sales_badge');
function my_custom_sales_badge() {
    $img = '<img class="sales-badge" width="75px" height="30px" src="https://misofis.com/wp-content/uploads/indirim.gif"></img>';
    return $img;
}

Then add this CSS:

.woocommerce ul.products li.product a img.sales-badge {
    width: auto;
}

Hi Tom,

Thanks a million. It works like a charm. One more question please.

I am pasting 4 screenshots below to explain my need. Please take a look at them;

Woocommerce Sale Badge Product Loop

https://misofis.com/wp-content/uploads/woocommerce-badge-loop.png

Woocommerce Sale Badge Single Product

https://misofis.com/wp-content/uploads/woocommerce-badge-single-product.png

Custom Badge Product Loop

https://misofis.com/wp-content/uploads/custom-badge-loop.png

Custom Badge Single Product

https://misofis.com/wp-content/uploads/custom-badge-single-product.png

As you can see, when it displays Woocommerce sale badge at product loop page, it is located at the top right. And top left at single product page.

When I pasted your code and CSS, custom badge is located at the top left at product loop page, which is fine. However, for single product, it is displayed out of the image border. How can we change its position to top left just like at product loop page ?

Thanks in advance and wish you have a nice day.

You can try some CSS like this:

.single .sales-badge {
    margin-left: 45px;
}

Hi Tom,

Thanks for the reply. Unfortunately, it doesn’t work. It is still out of the image border. Can we place it on top left within the image borders just like it is in the product loop pages ?

Below is a link for a screenshot.

https://misofis.com/wp-content/uploads/custom-badge-single-product-2.png

Thanks again and look forward to hearing from you.

Try this instead:

.single .sales-badge {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 99;
}

Thanks a million Tom.

It works like a charm.

You’re welcome ??

my woocommerce add to cart button not working only for woocommerce lottery products.Please give me any suggestions.Thanks

• This reply was modified 5 years, 7 months ago by Md. Eleas Kanchon.

Hi there,

Any chance you can open a new topic and include the URL to your site?

Thanks!