在 WooCommerce 单品页面的图片缩略图下添加图片标题答案

【问题标题】：Add image caption under image thumbnail in WooCommerce single product page在 WooCommerce 单品页面的图片缩略图下添加图片标题
【发布时间】：2019-07-18 05:04:35
【问题描述】：

我正在尝试在 WooCommerce 单个产品页面中的每个图像缩略图下添加图像标题。

在这里您可以看到我希望在哪里显示文本（目前为“未定义”）

我想添加单独的标题文本（不是产品标题，而是图片标题。每张图片都有不同的标题）。

有没有简单的方法可以做到这一点？我正在使用 ToolSet，如果需要，可以添加 JavaScript sn-p。

我看到一个帖子讨论了这个问题，但不知道该把代码放在哪里：

Show caption under product gallery in WooCommerce

我还尝试将此代码添加到我的工具集 JavaScript 编辑器中，但我得到的是产品标题，而不是图像标题（或标题）。 (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>');
    }
}
}});

谢谢！

【问题讨论】：

标签： wordpress woocommerce thumbnails caption

【解决方案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>');
    }
}
}});

【讨论】：