在 WooCommerce 单个产品页面的图像缩略图下添加图像标题
Add image caption under image thumbnail in WooCommerce single product page
我正在尝试在 WooCommerce 单个产品页面上的每个图像缩略图下添加图像标题。
在这里您可以看到我希望文本显示的位置(目前为“未定义”)
我想添加单独的标题文字(不是产品标题,图片标题。每张图片都有不同的标题)。
有简单的方法吗?我正在使用 ToolSet,如果需要可以添加 JavaScript 片段。
我看到一个 post 谈到了这个,但不知道该把代码放在哪里:
我也尝试将此代码添加到我的工具集 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>');
}
}
}});
谢谢!
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 单个产品页面上的每个图像缩略图下添加图像标题。
在这里您可以看到我希望文本显示的位置(目前为“未定义”)
我想添加单独的标题文字(不是产品标题,图片标题。每张图片都有不同的标题)。
有简单的方法吗?我正在使用 ToolSet,如果需要可以添加 JavaScript 片段。
我看到一个 post 谈到了这个,但不知道该把代码放在哪里:
我也尝试将此代码添加到我的工具集 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>');
}
}
}});
谢谢!
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>');
}
}
}});