WooCommerce images are cropped

Hi thisisbcc,

It looks like an extra image size is being added to your srcset attribute that shouldn’t be there. It’s likely a custom size with the dimensions 1000×662, but there are also some extra data- attributes being added which contain srcset and sizes information. Do you have any other plugins running that could be affecting this markup?

Here’s an example:

<img width="1000" height="1000" src="https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-710x710.jpg" class="attachment-entry size-entry wp-post-image" alt="Flexfit-Baseball-Cap-Black-Front" title="Flexfit-Baseball-Cap-Black-Front" srcset="https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-150x150.jpg 150w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-300x300.jpg 300w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-100x100.jpg 100w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-710x710.jpg 710w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-1000x662.jpg 1000w" sizes="(max-width: 710px) 100vw, 710px" data-o_src="https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front.jpg" data-o_srcset="https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-150x150.jpg 150w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-300x300.jpg 300w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-100x100.jpg 100w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-710x710.jpg 710w, https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/09/08160916/Flexfit-Baseball-Cap-Black-Front-1000x662.jpg 1000w" data-o_sizes="(max-width: 1000px) 100vw, 1000px" data-o_title="Flexfit-Baseball-Cap-Black-Front" data-o_alt="Flexfit-Baseball-Cap-Black-Front">

The data-o_* attributes are added by the WooCommerce plugin in case of variable products where each variation has its own image. These data- attributes contain the values for the general product image. JavaScript is used to replace the values of the image attributes by the ones of their data-o_ equivalent in case the general image needs to be shown.

The srcset is added by WooCommerce with a call to wp_get_attachment_image_srcset() so the fact that the 1000px width non-square image is included in there seems to be a bug in WordPress. I have to debug more though to figure out what goes wrong.

Hi Joe, Jasper,

Thank you for the information you provided. I have made some further tests without plugins (only WooCommerce since the single-product pages are affected) and with Twenty Fifteen and the non-square image was still picked over the available square images. I have tried to find a setting somewhere that would refer to 662px height but couldn’t find any.

I will add this information to the trac ticket here : https://core.trac.www.ads-software.com/ticket/34998

Kind regards,
Bastien