在 WooCommerce 单个产品页面中的图像缩略图下添加图像标题

问题描述

我正在尝试在 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 单个产品页面中的图像缩略图下添加图像标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！