我在Woocommerce上安装了Wordpress。
商店的每个产品都有一个“特色图片”将显示在“商店页面”和“单个产品页面”中,而“画廊”图像将仅显示在“单个产品页面”中(首先是拇指,然后在单击的Lightbox中变大)。
这是由以下代码产生的:
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title,
'alt' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
在正常的“单一产品”页面中,这将产生以下结果:
<div class="images">
<a href="br1-opression.jpg"
itemprop="image"
class="woocommerce-main-image zoom"
title=""
data-rel="prettyPhoto[product-gallery]">
<img width="750"
height="544"
src="br1-opression.jpg"
class="attachment-shop_single wp-post-image"
alt="br1-opression"
title="br1-opression">
</a>
<div class="thumbnails columns-3">
<a href="br1-opression-1.jpg"
class="zoom first"
title="br1-opression-1"
data-rel="prettyPhoto[product-gallery]">
<img width="180"
height="180"
src="br1-opression-1-180x180.jpg"
class="attachment-shop_thumbnail"
alt="br1-opression-1">
</a>
<a href="br1-opression-2.jpg"
class="zoom"
title="br1-opression-2"
data-rel="prettyPhoto[product-gallery]">
<img width="180"
height="120"
src="br1-opression-2-180x120.jpg"
class="attachment-shop_thumbnail"
alt="br1-opression-2">
</a>
</div>
</div>
如您所见,它基本上是在一个图库中将精选图片(大尺寸)和图库图片以拇指(较小,在精选图片下方)组合在一起。
我正在尝试实现以下目标:
从单个产品页面删除特色图片
从图库中获取第一张图片,然后放入大尺寸(与“精选图片”大小相同)
将其他拇指放在下面
长话短说,我想将“特色图片”替换为“单一产品”页面中图库中的第一张图片。
到目前为止,我已经尝试过:
使用CSS和Functions.php中的新钩子隐藏特色图像。
它确实会杀死精选图片,但仍会显示在灯箱中。
而且拇指仍然很小,因此在“单一产品”页面上没有大图像,这是不希望的。
有什么想法或想法吗?
最佳答案
您可以尝试以下方法:
$imgid = $product->get_gallery_attachment_ids();
get_gallery_attachment_ids()
函数获取数组中的所有图库ID,因此现在您可以通过以下方式获取该数组的第一张图片:<a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" class="woocommerce-main-image zoom"><img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt=""></a>
关于php - 从Woocommerce中的单个产品页面中删除特色图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31630542/