Want to show on single product page image top custom badge

Question

I want to show one custom-level badge on only a single product page. snapshot- https://prnt.sc/k8drP7VNNw_o

I tried the below code but not working.

add_filter('woocommerce_before_single_product_summary', 'custom_badge_for_single_p_image'); 
function custom_badge_for_single_p_image() {
    return '<b>100% authentic</b>'; }

Please help me to sort it out.

Thanks

Answer 1

Please try this:-

add css for style:

.woocommerce-product-gallery__wrapper {
    position: relative;
}
span.wpd-sale-badge {
    position: absolute;
    top: 50px;
    right: 0px;
    padding: 5px;
    border-radius: 4px;
}

add php file:

function cusomize_woocommerce_single_product_image_thumbnail_html( $html, $post_thumbnail_id ) {
    // Get the global product object
    global $product;
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        
      $html = $html. '<span class="wpd-sale-badge">100% authentic</span>';
     
    }
 
    return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'cusomize_woocommerce_single_product_image_thumbnail_html', 10, 2 );

or you can try also js code:

add_action( 'wp_footer', 'add_badge_woocommerce_single_product_image_thumbnail_html_by_js' );
function add_badge_woocommerce_single_product_image_thumbnail_html_by_js() {

  if ( is_product() ){
  ?>
  <script>
    jQuery(document).ready(function($){

      setTimeout(function(e){

        // $('.woocommerce-product-gallery__wrapper').append('<span class="wpd-sale-badge">100% authentic</span>');
        $('.wvg-single-gallery-image-container').append('<span class="wpd-sale-badge">100% authentic</span>');
        
      },1000);

    });
  </script>

  <style type="text/css" media="screen">
    .wvg-single-gallery-image-container {
      position: relative;
  }
  span.wpd-sale-badge {
      position: absolute;
      top: 50px;
      right: 0px;
      padding: 5px;
      border-radius: 4px;
  }
  </style>
  <?php

  }

}