如何在 woocommerce 中获取产品的特色图片

Posted 2023-03-25

【中文标题】如何在 woocommerce 中获取产品的特色图片

【英文标题】：How to get featured image of a product in woocommerce

【发布时间】：2015-12-26 13:54:05

【问题描述】：

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

   $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>

我已经在后台添加了特色图片

【问题讨论】：

$product->get_image( $size, $attr)

【参考方案1】：

我得到了解决方案。 我试过了。

<?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; ?>">

【讨论】：

我知道这是公认的答案，但是 $img_url 的意义何在？这仅适用于回显 $image[0]

此解决方案不考虑 ALT 标记或响应性。可访问的合规性在美国非常重要，并且在全球范围内变得越来越突出。仅获取图像 URL 并宣传空 ALT 标签的解决方案会使您和您的客户面临可访问性歧视和潜在诉讼的巨大风险。请依靠 WordPress (wp_get_attachment_image( $product->get_image_id(), 'large' );) 为您呈现 HTML，这提供了额外的优势，例如移动响应能力（为各种浏览器宽度提供多种图像尺寸）、ALT 内容和标题。

我当然同意你的看法，@StephanRobberts。整个事情可以写成： echo wp_get_attachment_image( get_post_thumbnail_id( $product_id ), [ 30, 30 ] );

【参考方案2】：

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

<?php global $product; ?>
<img src="<?php echo wp_get_attachment_url( $product->get_image_id() ); ?>" />

使用wp_get_attachment_url()显示

【讨论】：

最好使用wp_get_attachment_image_src，因为它总是返回图像，即使附件是视频或pdf。您也可以指定尺寸。然后：wp_get_attachment_image_src( $product->get_image_id(), 'thumbnail' )[0]

【参考方案3】：

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

<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" />

【讨论】：

WordPress 的最佳方式 >= 4.4.

【参考方案4】：

在 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]

【参考方案5】：

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

while ( $loop->have_posts() ) : $loop->the_post();
   echo woocommerce_get_product_thumbnail('woocommerce_full_size');
endwhile;

可用参数：

woocommerce_thumbnail woocommerce_full_size

【参考方案6】：

我这样做了，效果很好

<?php if ( has_post_thumbnail() )  ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
<?php  ?>

【参考方案7】：

get_the_post_thumbnail 函数返回 html 而不是特色图像的 url。您应该使用 get_post_thumbnail_id 获取特色图片的帖子 ID，然后使用 wp_get_attachment_image_src 获取特色图片的 url。

试试这个：

<?php
$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; ?>">
        <?php $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID)); ?>
        <?php if($featured_image)  ?>
        <img src="<?php $featured_image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
        <?php  ?>
        <p><?php the_title(); ?></p>
        <span class="price"><?php echo $product->get_price_html(); ?></span>
    </div>
<?php endwhile; ?>

【讨论】：

嗨limexs，我已经得到了解决方案，但是感谢您的回答...您能否告诉我是否想从后端（woocommerce）为特定产品提供数据变量而不是哪个我应该使用字段（SKU 或标签或其他东西来添加标识符）。由于这个唯一标识符我想用作 html 数据变量......我希望你有我的问题

嗯，也许我不明白这个问题。您已经在使用 post_id，我认为这足以识别产品。

limexs：实际上我正在将一个项目升级到 woocommerce .. 所以我需要存储另一个标识符，该标识符已经存在于现有项目中

好的，知道了，您可以使用自定义字段。

应该是

【参考方案8】：

这应该可以解决问题：

<?php
    $product_meta = get_post_meta($post_id);
    echo wp_get_attachment_image( $product_meta['_thumbnail_id'][0], 'full' );
?>

您可以根据需要更改参数。

【讨论】：

多了一个括号，wp_get_attachment_image( $product_meta['_thumbnail_id'][0], 'full' );

【参考方案9】：

WC_Product::get_image() – 返回主要产品图片。

用法

$string = WC_Product::get_image( $size, $attr, $placeholder );

参数

$size - （字符串）可选默认值：woocommerce_thumbnail

$attr - (array) 可选 - 图片属性。

$placeholder - ( bool ) 可选默认值：1 - 如果未找到图像，则返回 $placeholder，否则返回空字符串。

退货

字符串

$product->get_image('thumbnail');