在 WooCommerce 单个产品页面中的图像缩略图下添加图像标题 [英] Add image caption under image thumbnail in WooCommerce single product page

问题描述

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

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).

有没有简单的方法来做到这一点?我正在使用 ToolSet，如果需要，可以添加 JavaScript 代码段.

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 :

在 WooCommerce 中的产品库下显示标题

我也尝试将此代码添加到我的工具集 JavaScript 编辑器，但我得到的是产品标题，而不是图像标题(或标题).(建议作为该帖子中的解决方案)

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

谢谢！

推荐答案

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

这篇关于在 WooCommerce 单个产品页面中的图像缩略图下添加图像标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！