如何在woocommerce中获得产品的特色图像

Ama*_*ngh 27 wordpress woocommerce

请告诉我哪里出错了.产品特色图片未显示.

   $args = array( 'post_type' => 'product', 'posts_per_page' => 80, 'product_cat' => 'profiler', 'orderby' => 'rand' );

    $loop = new WP_Query( $args );

   while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

    <div class="dvThumb col-xs-4 col-sm-3 col-md-3 profiler-select profiler<?php echo the_title(); ?>" data-profile="<?php echo $loop->post->ID; ?>">

    <img src="<?php  get_the_post_thumbnail($loop->post->ID); ?>" data-id="<?php echo $loop->post->ID; ?>">

    <p><?php the_title(); ?></p>

    <span class="price"><?php echo $product->get_price_html(); ?></span>                    
    </div>
Run Code Online (Sandbox Code Playgroud)

我已经在后端添加了一个精选图片

Ama*_*ngh 47

我得到了解决方案.我试过这个.

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>

    <img src="<?php  echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
Run Code Online (Sandbox Code Playgroud)

  • 此解决方案不考虑 ALT 标记或响应能力。无障碍合规性在美国规模巨大,并且在全球范围内变得更加突出。仅获取图像 URL 并推广空 ALT 标签的解决方案会让您和您的客户面临可访问性歧视和潜在诉讼的巨大风险。请依靠 WordPress ( `wp_get_attachment_image( $product-&gt;get_image_id(), 'large' );` ) 为您呈现 HTML,这提供了额外的优势,例如移动响应能力(为各种浏览器宽度提供多种图像尺寸)、ALT内容和标题。 (3认同)

小智 11

我只是用get_the_post_thumbnail_url()而不是get_the_post_thumbnail()

<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" alt=""/>
Run Code Online (Sandbox Code Playgroud)


小智 11

WC_Product::get_image()\xe2\x80\x93 返回主产品图像。

\n

用法

\n
$string = WC_Product::get_image( $size, $attr, $placeholder );\n
Run Code Online (Sandbox Code Playgroud)\n

参数

\n

$size- ( string ) 可选默认值:woocommerce_thumbnail

\n

$attr- ( array ) 可选 \xe2\x80\x93 图像属性。

\n

$placeholder$placeholder- ( bool ) 可选默认值: 1 \xe2\x80\x93如果未找到图像,则返回 True,否则返回空字符串。

\n

退货

\n

细绳

\n
$product->get_image('thumbnail');\n
Run Code Online (Sandbox Code Playgroud)\n


Nis*_* Up 8

在 WC 3.0+ 版本中,可以通过以下代码获取图像。

$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $item->get_product_id() ), 'single-post-thumbnail' );
echo $image_url[0]
Run Code Online (Sandbox Code Playgroud)


Edd*_*Edd 8

我遇到了同样的问题,并通过使用默认的 woocommerce 挂钩来显示产品图像来解决它。

while ( $loop->have_posts() ) : $loop->the_post();
   echo woocommerce_get_product_thumbnail('woocommerce_full_size');
endwhile;
Run Code Online (Sandbox Code Playgroud)

可用参数:

  • woocommerce_thumbnail
  • woocommerce_full_size


Jak*_*ake 7

这里的答案太复杂了。这是我最近使用过的东西:

<?php global $product; ?>
<img src="<?php echo wp_get_attachment_url( $product->get_image_id() ); ?>" />
Run Code Online (Sandbox Code Playgroud)

使用wp_get_attachment_url()显示

  • 最好使用“wp_get_attachment_image_src”,因为它总是返回图像,即使附件是视频或 pdf。您也可以指定尺寸。然后:`wp_get_attachment_image_src( $product-&gt;get_image_id(), 'thumbnail' )[0]` (2认同)

小智 5

我这样做了,效果很好

<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
<?php } ?>
Run Code Online (Sandbox Code Playgroud)