Woocommerce：与产品图片不同的特色图片 [英] Woocommerce: Featured image different than product image

问题描述

有没有办法为产品添加特色图片以显示在产品列表中，但是显示另一个图像作为产品图像？ （只是图片，而不是图片库）？

Is there a way to add a featured image for the product to show in the product listings, but display another image as the product image? (just an image, not gallery of images)?

单击列表中的产品（带有特色图片）时，产品只显示一张图片，其中包含描述和东西，但不同的图像，而不是特色。

When clicking the product in the listing (with a featured image) the product displays just an image, with the description and stuff, but a different image, not the featured.

推荐答案

您可以将产品图库中的第一个图像设置为产品图像和特色您设置的图片将显示在产品列表页面上。

You can set the first image from Product Gallery as Product image and featured image that you set will be displayed on Product listing page.

现在要将产品库中的第一张图片设置为产品图片，您需要覆盖woocommerce模板文件 - product- image.php。

Now to set your first image from Product Gallery as Product image, you need to override woocommerce template file - product-image.php.

要覆盖，请将文件从woocommerce插件文件夹复制到您的主题/ woocommerce / single-product / product-image.php

To override, copy the file from woocommerce plugin folder to your theme/woocommerce/single-product/product-image.php

使用以下代码替换< div> 部分 -

Replace the <div> part with the following code -

<div class="images">

<?php

    $attachment_ids = $product->get_gallery_attachment_ids();
    isset ($placeholder_width)? : $placeholder_width=0;
    isset ($placeholder_height)? : $placeholder_height=0;

    if ( $attachment_ids ) {
        $attachment_id = $attachment_ids[0];

    if ( ! $placeholder_width )
        $placeholder_width = $woocommerce->get_image_size( 'shop_catalog_image_width' );
    if ( ! $placeholder_height )
        $placeholder_height = $woocommerce->get_image_size( 'shop_catalog_image_height' );

        $output = '<div class="imagewrapper">';

        //$classes = array( 'imagewrapper' );
        $classes = array();
        $image_link = wp_get_attachment_url( $attachment_id );

        if ( $image_link ) {

        $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_thumbnail_size', 'shop_thumbnail' ) );
        $image_class = esc_attr( implode( ' ', $classes ) );
        $image_title = esc_attr( get_the_title( $attachment_id ) );

        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s"  rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_title, $image ), $post->ID );

        } else {

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );

        }

    }
?>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>

还覆盖产品缩略图。 php文件并在foreach循环之前添加以下代码。

Also override product-thumbnails.php file and add following code just before foreach loop.

unset($attachment_ids);

通过添加此行，第一张图片将不会显示在产品库中，只会显示为产品图片。

By adding this line, the first image will not be displayed in product gallery, only be displayed as Product image.

这篇关于Woocommerce：与产品图片不同的特色图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！