Display the badge in single product page?

Hi

I found a solution but there is a work around:

1) Edit the theme function.php and add this line

/**
     * Display product badge on single product
     */
   add_action( 'woocommerce_product_thumbnails' , 'woocommerce_simple_product_badge_display', 30 );

This is the way to modify everything into the Image product area

2) add this class into your CSS (called as you declared in Badge Class name)

/*Product badgel green*/
.wc-simple-product-badge {
position: absolute;
top: 0;
leftt: 0;
background-color: #46694B;
color: #fff;
padding: 5px;

}

The issue here is just work doing on the Left side… because the Absolute property will put the Badge over the description

If you find a solution to put it into Right side let me know ??

Hi cruzz!

Thank you very much for your helpful solution!!!

The best solution i can think in order to put the badge on the right side, is to set a percentage. For example “left:40%” or “right:60%”.
Also, you have to set different percentage in every @media screen(max-width:XXXpx)in your css, in order to show well in every screen size and be responsive.

For example

/*Product badge green for 1024 + screen widths*/
.wc-simple-product-badge {
position: absolute;
top: 0;
right: 60%;
background-color: #46694B;
color: #fff;
padding: 5px;
}

/*Product badgel green for <1024 screen widths*/
@media (max-width:1024px){
.wc-simple-product-badge {
position: absolute;
top: 0;
right: 20%;
background-color: #46694B;
color: #fff;
padding: 5px;
}}

Hi Dimis99 & cruzz,

Thank you for the snippet to add the badge to the product page. I positioned it on the product page by adding this to my custom styles:

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
position:relative;
}

Since the badge class is a child of the image div, setting the parent div’s position to relative keeps the badge within its parent.