Woocommerce catalog image not using correct size

[designerken]

We have old products that we created a few years ago that are using the settings from:
customizer > wooCommerce > product images
Thumbnail width 500 and cropping set to 1:1

They have always been square and the code in the images have always been set to 500 width and height.

We recently added a new product and the image that is being used is the full size image not the cropped image.

We are still on Pro version 5.1.5 and not ready to update the theme. But I want to know why new products are not using the customizer settings for cropped images. I know for a fact that the 500x500 square image was generated as I can link directly to it.

[tristup]

Hi @designerken,

Unfortunately, we are not able to check your website as it is showing Access from your Country was disabled by the administrator.. I would suggest you please remove the IP restriction and let us know to examine it further.
Please note that we are from different parts of the World and most of us have a dynamic IP so we can’t provide a specific IP address to you for whitelisting.

Thanks

[designerken]

Staging Site created without country restrictions. Same issue applies.

Updated secure note with new login details.

[ruenel]

Hello @designerken,

This is a known issue with Pro 5.1.5. Please have your theme updated to Pro 6.0.7 as this version should fix that issue. And after the updates, if you are still experiencing some issues, you check out this article first before testing the site again:

• https://theme.co/docs/site-appears-broken-after-updates

Kindly let us know how it goes.

[designerken]

That’s a problem since the client is not ready to update the site until things are more stable and we are ready to covert to the new methods.

if you have other suggestions id like to hear them.

[ruenel]

Hi @designerken,

If that is the case, you will need to update the Woo image in framework/legacy/functions/plugins/woocommerce.php lines 115, 145 and 151:

// Shop Product Thumbnails
// -----------------------

function x_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'shop_catalog';
  $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>";

}

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );


function x_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', 'shop_catalog' );
    $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, 'shop_catalog');
    $placeholder = $image_url;

  }

  return $placeholder;

}

The updated code should be this:

// Shop Product Thumbnails
// -----------------------

function x_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>";

}

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );


function x_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;

}

Thanks.