Добавьте подпись к изображению под миниатюрой изображения на странице одного продукта WooCommerce.

Question

Я пытаюсь добавить подпись к изображению под каждым уменьшенным изображением на странице отдельного продукта WooCommerce.

Здесь вы можете увидеть, где я хочу, чтобы текст отображался (в настоящее время "не определено")

Я хочу добавить индивидуальный текст заголовка (не название продукта, заголовок изображения. Каждое изображение имеет свой заголовок).

Есть ли простой способ сделать это?Я использую ToolSet и могу добавить фрагмент JavaScript, если это необходимо.

Я видел сообщение, в котором говорится об этом, но не могу понять, куда поместить этот код:

Показатьзаголовок в галерее продуктов в WooCommerce

Я также пытался добавить этот код в свой редактор JavaScript в наборе инструментов, но я получаю название продукта, а не заголовок изображения (или заголовок). (предлагается в качестве решения в этом посте)

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

Спасибо!

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