如何解决在WooCommerce单一产品页面的第一张图片下方添加图片标题
使用 Add image caption under image thumbnail in WooCommerce single product page 答案的代码,我想做同样的事情,但只针对第一个图像而不是所有缩略图。
我该怎么办?
解决方法
请尝试以下挂钩,
add_filter('woocommerce_single_product_image_thumbnail_html','thumb_add_caption',10,4 );
function thumb_add_caption( $html,$id,$parent,$class) {
$attachment = get_post( $id );
$img_cap = "<div class=\"img-cap\"><span class=\"cap-text\">{$attachment->post_excerpt}</span></div>$html";
return $img_cap;
}
或
function add_caption_below_product_image() {
echo '<h4 style="text-align: center;">';
$caption = get_post( get_post_thumbnail_id() )->post_excerpt;
echo $caption;
echo '</h4>';
}
add_action( 'woocommerce_product_thumbnails','add_caption_below_product_image' );
,
我用这段代码有东西
jQuery(document).ready(function($) {
$('.woocommerce-product-gallery__wrapper').each(function(){
$('.woocommerce-product-gallery__image',this).after('<div class="legende_image"></div>');
$('.legende_image',this).html($('img',this).attr('data-caption'));
}); });
和此CSS代码
.woocommerce-product-gallery__wrapper {
position: relative;}
.legende_image {
position: absolute;
z-index: 1;
padding: 10px;
background-color: #000;
font-style: italic;
line-height: 1em;
font-size: 14px;
color: #fff;
bottom:0;
white-space: pre-line;}
但标题停留在我的图片上方 你有好主意吗 ? 谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。