CODEWITHSUNDEEP
imageloopsoverridingproductwoocommerce
Boycott A.I.
Boycott A.I.

Reputation: 18931

WooCommerce - how to stop small product images dwarfing larger product images in the product loop?

At the moment, my featured images are being used in the product loop (as is the default).

The problem is that, because all the product images are resized to a fixed size (for nicer layout), the images of the smaller products are actually dwarfing the images of the larger products.

Unless anyone has a better suggestion, I've decided one way to fix this would be for me use a different product image in the product loop. This way, I could add a white space above the smaller product images so that they do not dwarf the other products when they are resized. (NB - I cannot just set this edited image as the featured image because I do not want this white space to be shown in the lightbox.)

So, firstly, is that the best way to solve my problem? And, if so, what's the best way to go about specifying a custom image to be used in the product loop?

Thanks in advance.

Upvotes: 1

Views: 1124

Answers (1)

Boycott A.I.
Boycott A.I.

Reputation: 18931

Here is the function I came up with to solve this. It needs to be placed in your functions.php file. See function comments for usage...

/**
 * This function is used to display a custom image in the shop page if a custom
 * image exists for the product. This may be required, for example, to prevent
 * images of small products dwarfing images of larger products on the shop page.
 * 
 * To set a custom image for a product, create a custom field for it (in the
 * Edit Product page) called custom_product_thumbnail_url . (The image that you
 * specify can contain additional white space to prevent it being enlarged.)
 * 
 * This function overrides the function of the same name in WooCommerce's
 * woocommerce-template.php file.
 *
 * @access public
 * @subpackage  Loop
 * @param string $size (default: 'shop_catalog')
 * @param int $placeholder_width (default: 0)
 * @param int $placeholder_height (default: 0)
 * @return string
 */
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {

    global $post, $woocommerce;

    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' );

    $imgSrc = get_post_meta($post->ID, 'custom_product_thumbnail_url', true);
    if ($imgSrc)
            return '<img src="'. $imgSrc .'" alt="' . get_the_title($post->ID) . '" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';
    if ( has_post_thumbnail() )
            return get_the_post_thumbnail( $post->ID, $size );
    elseif ( woocommerce_placeholder_img_src() )
            return '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';

}

Upvotes: 2

Related Questions