I am needing to try and unify all of the product images that show up on the listings page. At the moment they are all different lengths and I want to try and make them all the same length. I’ve looked on Woocommerces own website and they say here http://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/

that there should be options to change the default image settings in Woocommerce/Settings/Products/Display but this isn’t the case with my website. See screenshot here:

https://copy.com/ppAbMGgyN3q4sCBL

Is this something the X theme has stripped out? Would you know how I might change the default Product Listing Image size to ensure they are all cropped the same size? Is there code I can add somewhere? If so what code and where should I put it, thanks so much!

We have a predefine image sizes for the product images in X theme. The default sizes are

$catalog = array(
    'width'  => '258',
    'height' => '275',
    'crop'   => 1
  );

  $single = array(
    'width'  => '450',
    'height' => '470',
    'crop'   => 1
  );

  $thumbnail = array(
    'width'  => '100',
    'height' => '100',
    'crop'   => 1
  );

These setting were stripped in the Woocommerce settings page. To change the image size, we need to add again those settings inside the Woocommerce Product Display settings page. We need to add a custom code inside your child theme’s functions.php. If you are not using it, we would highly suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once your child theme ready, please insert the following code in your child theme’s function.php;

// Do Not Remove Woocommerce Plugin Settings
// =============================================================================
function x_woocommerce_donot_remove_plugin_setting(){
  if ( ! is_admin() ) {
    return;
  }
  remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}
add_action('init', 'x_woocommerce_donot_remove_plugin_setting');

Once added, you will have the Product Display Image option settings back. You can check it out in Woocommerce > Settings > Products > Display tab; http://prntscr.com/6eysla
After changing the image size for your products do not forget to regenerate your thumbnails.

Please let us know if this has work for you.

X

http://screencast.com/t/D2V8Mg91

http://screencast.com/t/FFZNhZt2Wp

However even with them set, it doesn’t seem to have changed anything. My images are all still different sizes:

http://screencast.com/t/fexv8UNGxM

Now it does say I to regenerate thumbnails, which I have done. It also says I may need to change the CSS for the front end, but I have no idea what to change and whether I should do this via customizer ‘custom’ or via the child theme itself. I’d really appreciate your help, even if its just to point me to existing info to help me elsewhere on your site. Thank you, so so much

This is because your shop images are still using X image sizes. You’ll need to change the X sizes with default WooCommerce shop catalog image size. This requires more in depth custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

So to change your shop catalog image sizes with default WooCommerce catalog image size, add following code as well in your child theme’s functions.php file:

// =============================================================================
// WooCommerce Short Thumbnail size change 
// =============================================================================

function x_woocommerce_shop_thumbnail2() {

  GLOBAL $product;

  $stack            = x_get_stack();
  $stack_thumb      = 'shop_catalog';
  $stack_shop_thumb = $stack_thumb;
  $id               = get_the_ID();
  $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 , $stack_shop_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_thumbnail', 10 );

});

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

Thank you for understanding.

http://chapels.coloradowebdesign.com/shop/

So we’re very close!

But I think maybe there is a problem with this line of code in your example:

add_filter('init', function() {

   remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_thumbnail', 10 );

});

I realize this is out of scope, but would you mind confirming if this is the problem or if you see any typo or other issue with your code? Any suggestions?

Thanks so much

Bill