[tom_dskyParticipant]

Hi,

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!

[Rue NelModerator]

Hello There,

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

[tom_dskyParticipant]

I was already using a Child Theme, so this was so simple and worked perfectly, thank you so much!!!

[tom_dskyParticipant]

Ok, so since applying this I am now getting this message appearing in the top of all my admin windows. I have no idea if it was a co-incidence or the issues are related. Should I reapply the templates as they suggest? Thanks so much.

http://screencast.com/t/D2V8Mg91

[tom_dskyParticipant]

Alright, you’re gonna hate me. So, as mentioned before, you’re extra code worked a treat in that the options are now available to me as they should be:

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

[ZeshanMember]

Hi Lara,

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.

[tom_dskyParticipant]

This reply has been marked as private.

[tom_dskyParticipant]

Opps sorry, didn’t see your reply. Thanks for this. I totally understand, I’ll try to figure it out from here. I appreciate your help to this point.

[ChristianModerator]

You’re welcome Tom.

[billium99Participant]

Hi there – I just deployed this code to use the WooCommerce thumbnail settings, I regenerated my thumbnails, and it looks like now I have two sets of images showing up. You can see here:

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

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.woocommerce li.product .entry-featured a:first-child, 
.woocommerce-page li.product .entry-featured a:first-child {
    display: none;
}

Hope this helps.

[billium99Participant]

Thank you! That’s perfect!

One last question:

This functions.php code that I just put in place, why would it not affect 100% of the images on the shop page:

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

I mean it does affect it mostly. Most of the images are now cropped and matching, (the home page is perfect) but on the Shop page or any of the category pages there are two AiM Evo3 Pista accessories where the image isn’t following the new rules. What the…?

Any ideas why those two rogue images aren’t behaving?

Thanks

Bill

[Rue NelModerator]

Hello Bill,

Have you check the Product Display Image option settings? 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.

[Iain MParticipant]

Hi,

I have followed these instructions and any changes I make to catalog and product display sizes makes no difference to the display.

There has to be an easier way to make changes in X without all this custom coding…

even your stated sizes don’t seem to mean anything in comparison to my shop..

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

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

$thumbnail = array(
‘width’ => ‘100’,

I set my values in products/display as follows;

Catalog Images
125 × 125px Hard Crop?

Single Product Image
300 × 300px Hard Crop?

Product Thumbnails
100 × 100px Hard Crop?

regenrated thumbnails and…..no change….

see http://www.macgent.com/product-category/omega-3-fish-oil/ which is a test install with various different product categories in there… so how do I get this to work properly out of the box… I have some big image and some small ones and so would like to try and standardise the display of these on a smaller size so that for instance the related products image are all the same size….

[billium99Participant]

Hi – thanks for the reply, however you seem to have ignored the previous posts on this thread. We have all set product images, regenerated thumbnails, and got the duplicates. You helped us fix that by hiding the original image:

.woocommerce li.product .entry-featured a:first-child,
.woocommerce-page li.product .entry-featured a:first-child {
display: none;
}

And this works for 98% of all the images. But I can’t figure out why a couple of the images don’t adhere to the new rules. Quite strange.

Here is the link again:
http://chapels.coloradowebdesign.com/shop/

Any suggestions would be welcome.

Thanks

Bill

[Author]

Posts