How to add current image number to each product gallery image in WooCommerce?

Solution:

Try with this:

// add the current number for each gallery image product
add_action( 'wp_footer', 'add_number_for_each_gallery_image_product' );
function add_number_for_each_gallery_image_product(){

   // only on the product page
   if ( ! is_product() ) {
      return;
   }

   ?>
   <script type="text/javascript">
      jQuery(function($){
         // count the gallery images
         var count = $('figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image').length;
         // for each gallery image adds the number
         $('figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image').each(function(index){
            index++;
            $(this).prepend('<span class="image_no">' + index + '/' + count + '</span>');
         });
      });
   </script>
   <?php

}

The code has been tested and works. Add it to your active theme’s functions.php.

Finally add this CSS rule:

.flex-active-slide .image_no {
    position: absolute;
    background: #eeeeee;
    border-radius: 4px;
    padding: 5px 8px;
    color: #333;
    top: 12px;
    left: 12px;
    z-index:1;
}

Add it to your active theme’s stylesheet.