Add image caption under image thumbnail in WooCommerce single product page

Question

I'm trying to add the image caption under each image thumbnail on WooCommerce single product page.

Here you can see where I want the text to be shown (presently "undefined")

I want to add the individual caption text (not the product title, the image caption. Each image has a different caption).

Is there an easy way to do that? I'm using ToolSet and can add JavaScript snippet if needed.

I saw a post that talks about this but can't figure out where to put that code :

Show caption under product gallery in WooCommerce

I also tried to add this code to my Toolset JavaScript editor but I'm getting the Product title, not the image title (or caption). (Suggested as a solution in that post)

jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a').find('img.wp-post-image').attr('title');
    console.log(imgTitle);
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+')').append('<span class="flexthum-title">'+imgtitles[i]+'</span>');
    }
}
}});

Thank you!

Answer 1

jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a').find('img').attr('data-caption');
    console.log(imgTitle);
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+')').append('<span class="flexthum-title">'+imgtitles[i]+'</span>');
    }
}
}});