[英]Add image caption under the first image in a 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;}
但是標題留在我的圖像之上你有什么想法嗎? 謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.