Add image caption under image thumbnail in WooCommerce single product page

[亡魂溺海] 提交于 2021-02-20 04:05:07

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!