[StarsAndFishParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Did you already regenerated your thumbnails? After doing it, since you have installed WP fastest cache, you need to clear your plugin cache. And upon checking, you are using CLoudFlare. You also need to login to your CloudFlare account and you must purge your site cache before testing your site. You should see a lot more changes once all your cache has been purge.

Please let us know how it goes.

[StarsAndFishParticipant]

One step forwards, one step backwards.

Firstly, my apologies for not thinking of the CloudFlare cache. I deleted that, re-deleted the WP cache and tried the site again.

All thumbnails and product images seemed appropriate sizes. It worked!

BUT!

The display was still showing two (stacked vertically) of each product thumbnail wherever the product thumbnail was displayed.

So I reverted the last functions.php change – went back to the first one suggested in this thread. Cleared all caches. Cleared browser history. And tried again.

Back to single product thumbnails – but they’re the wrong size files again. It’s using near 800px image versions to show 200px thumbnails.

Can you take another look?

Thank you!

[ZeshanMember]

Hi there,

Thanks for updating the thread!

I’ve added following code in your child theme’s functions.php file:

// =============================================================================
// WooCommerce Shop Thumbnail Size Change to Shop Catalog
// =============================================================================

function x_woocommerce_shop_product_thumbnails_2() {

  GLOBAL $product;
  
  $id     = get_the_ID();
  $thumb  = 'shop_catalog';
  $rating = $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      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', 'x_woocommerce_shop_product_thumbnails_2', 10 ); 

It’s showing the correct size thumbnail in your shop page that is set under your WooCommerce image display settings (see: http://prntscr.com/as4cl6).

Thank you!

[StarsAndFishParticipant]

That’s smashing, thank you!

Last point is perhaps me being a bit picky…

If I size my screen width down to the point that the site homepage shows two products side by side, the product thumbnails at that point are displayed at something like 300px wide – but they’re still using the same source image which is now 250px and so are a little blurry.

When you view on a tablet in landscape (like normal people do) or a phone in portrait (like normal people do) the images are lovely.

Not sure if X is meant to be providing a different image for that screen width / image size or if I’m, as I say, being too particular.

Thanks for your advice!!

[RadModerator]

Hi there,

X theme uses a medium size image for products automatically. This is to support both bigger and smaller display, but since the change is applied as above, it now uses Woocommerce default sizes which are smaller.

In that case, you should change your image settings in Woocommerce bigger than 250px, then install force regenerate thumbnails plugin and generate your image again.

Please note that the change made the image no longer connected to X image’s sizes.

Thanks!

[StarsAndFishParticipant]

That’s awesome. You guys are very helpful. Thanks for sorting this all out for me!

[JadeModerator]

You’re most welcome.

[Author]

Posts