New Woocommerce Shop Gallery Thumbnails Suddenly Smaller Than Previously Created Thumbnails

[ppe29]

I am still trying to get around to this but it’s proving difficult to fit this into my schedule. Is there no other way for you to analyze this issue? I also noticed that the icon next to “read more” is acting up, too. You’ll see if when you hover over any product at this page: https://pulstarmfg.com/shop/

[ruenel]

Hello @ppe29,

Please do the following:

1.) Go to Settings > General and disable “Endurance Cache” or set it to “OFF”.

2.) In your Plugins section, install “Regenerate Thumbnails” plugins. Run the plugin to regenerate all your image thumbnails to display the correct image settings including the cropped 300x300 product catalog thumbnail sizes.

Best Regards.

[ppe29]

Tried this but the issue persists. There’s still something over-riding the rendered and intrinsic ratios from 1:1.

[ruenel]

Hello @ppe29,

The old images are still displaying because you have enabled the Site Accelerator feature in Jetpack plugin.

I went ahead and turn OFF the feature. Your should now be seeing the new cropped images.

Best Regards.

[ppe29]

That definitely made a change, so we’re heading in the right direction. Thank you for that. But now the top 4 images (newest posts) that were being incorrectly resized to 350 x 262 are still 350 x 262 and all the ones after those 4 that were correctly sized at 350 x 350 are now also being incorrectly resized at 300 x 300. You can see in the screenshot how the older posts no longer match the width of the product title banners.

The goal is to reset all images back to their original size of 350 x 350, but I don’t see an option in that plugin that lets you custom set the size you want. What am I missing about getting it back to the way it was at 350 x 350?

[ruenel]

Hello @ppe29,

Please make sure to set your Image dimensions to 350. You can do that in Appearance > Customize > WoCommerce and in Settings > Media as well. After that, you run the Regenerate Thumbnails plugin again. It may take a while if you have several images.

Clear all your plugin caches and browser cache and then test the shop page again.

[ppe29]

OK I did all of those things but the issue still occurs

[ppe29]

I did this all and it didn’t have any effect. Still showing gallery thumbnails at sizes that aren’t square unless I load them in as square.

[Neil_Randle]

Been having the same issue since Woo 6.8 rolling back to 6.7.0 fixes it.
New products added are not using the cropped Thumbnail even though the file is there.
Oddly updating back to 6.8.2 keeps using the correct thumbnail

I have tested on another install with only pro and Woocommerce active and have the same issue.

Swapping the theme to Twenty Twenty-Two shows the correct thumbnail.
Swapping back to pro does not keep the correct thumbnail.

Our product images are 1200 x 600 cropped to 450 x 450

[christian]

Thanks for your input, @Neil_Randle. I’ll try to replicate the issue in as many environments as I can.

@ppe29, while we’re investigating, the best course of action for you to take right now are to

1. take note of your orders
2. contact your web host to revert your site to a previous working state

We currently don’t have a solution.

Thank you for understanding.

[ppe29]

I have been testing this as much as I can in between workloads and have also determined that the issue is isolated to X theme, as the issue does not persist in other themes.

I’ve also noticed that sizing the original photo to square (like 600 x 600) shows the gallery thumbnail as a square as it should. However, not all pictures on my website look best as squares. This is not the ideal solution, but I thought I’d share that with anyone else following this thread.

Thanks for the info @Neil_Randle. I will try rolling back Woo to see if that helps while we wait for the awesome Themeco guys to try to fix the issue. Thanks so much @christian

[ruenel]

You are most welcome, @ppe29. It is good to know that @Christian and @Neil_Randle was able to help you out.

[ppe29]

Has anyone looked into why this is happening yet? It’s still an issue for me. Meanwhile, can I get some assistance on how to target this class that’s saying the min width for woo thumbnails is 300? I need to change it to 350 so the images match the width of the label. I have tried to do this in Appearance>Customize>Woo>Product Images, but there is something else over-riding it b/c changing the size to 350 has no effect.

You can see in the third screenshot that changing it to 350 gets the job done.

[christian]

@ppe29, We currently don’t have a solution. We do not have a CSS solution either.

I’d recommend you do the previous suggestion which is to:

1. take note of your orders
2. contact your web host to revert your site to a previous working state

Thank you for understanding.

[Neil_Randle]

Changing

$thumb = ‘shop_catalog’;

To

$thumb = ‘woocommerce_thumbnail’;

framework/legacy/functions/plugins/woocommerce.php

Seems to have fixed it for me, But not 100% sure I know what I’m doing.

Added the below to the Child functions.php so I did not have to edit the theme file.

// Thumb Fix
function b_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'woocommerce_thumbnail';
  $rating = ( function_exists( 'wc_get_rating_html' ) ) ? wc_get_rating_html( $product->get_average_rating() ) : $product->get_rating_html();

  woocommerce_show_product_sale_flash();

  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';

      echo has_post_thumbnail() ? get_the_post_thumbnail( $id, $thumb ) : '<img src="' . x_woocommerce_shop_placeholder_thumbnail() . '" class="x-shop-placeholder-thumbnail">';

      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }

    echo '</a>';
  echo "</div>";

}

add_filter('init', function() {
  remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
});

add_action( 'woocommerce_before_shop_loop_item_title', 'b_woocommerce_shop_product_thumbnails', 10 ); 

//End

If you could let me know if this is ok to use or provide a better solution would be grateful.

Before (fix):

After (Fix):

Now using the 1:1 Woocommerce cropped thumbnail

[ruenel]

Hello @Neil_Randle,

Thanks for sharing this very useful code. We really appreciate it.

Cheers.

[ruenel]

Hello @Neil_Randle and @ppe29,

The updated PHP code to fix the issue is this:

// Woo Thumbnails Fix
// =============================================================================
function b_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'woocommerce_thumbnail';
  $rating = ( function_exists( 'wc_get_rating_html' ) ) ? wc_get_rating_html( $product->get_average_rating() ) : $product->get_rating_html();

  woocommerce_show_product_sale_flash();

  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';

      echo has_post_thumbnail() ? get_the_post_thumbnail( $id, $thumb ) : '<img src="' . b_woocommerce_shop_placeholder_thumbnail() . '" class="x-shop-placeholder-thumbnail">';

      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }

    echo '</a>';
  echo "</div>";

}

function b_woocommerce_shop_placeholder_thumbnail() {

  $placeholder = x_get_option( 'x_woocommerce_shop_placeholder_thumbnail' );

  if ( empty( $placeholder ) && function_exists( 'cornerstone_make_placeholder_image_uri' ) ) {

    $sizes = wp_get_additional_image_sizes();
    $image_size = apply_filters( 'single_product_archive_thumbnail_size', 'woocommerce_thumbnail' );
    $size = isset($sizes[$image_size]) ? $sizes[$image_size] : array( 'height' => 300, 'width' => 300 );
    $placeholder = cornerstone_make_placeholder_image_uri( 'transparent', $size['height'], $size['width'] );

  }else{

    $image_url = cs_resolve_image_source( $placeholder, 'woocommerce_thumbnail');
    $placeholder = $image_url;

  }

  return $placeholder;

}

add_filter('init', function() {
  remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
});

add_action( 'woocommerce_before_shop_loop_item_title', 'b_woocommerce_shop_product_thumbnails', 10 ); 
// =============================================================================
//End

This has been reported as a bug so that our developers are aware of the issue. Hopefully this can be fixed in the newer versions of the theme.

Thanks for your understanding.

[ppe29]

I will play around with this solution started by @Neil_Randle and @ruenel, but let me also share that this bit of CSS code was helping too.

[class*=woocommerce] li.product .entry-featured img {
min-width: 350px;
}

[tristup]

Hi @ppe29,

Thanks for sharing that too.