Add image caption under image thumbnail in WooCommerce single product page

问题

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

Here you can see where I want the text to be showed (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 talk about this but can't figure it out where to put that code :

Show caption under product gallery in WooCommerce

I also tryed 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!

回答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>');
    }
}
}});

来源：https://stackoverflow.com/questions/54855268/add-image-caption-under-image-thumbnail-in-woocommerce-single-product-page

标签

wordpress

woocommerce

thumbnails

caption