Woocommerce single product image blurred and small. Actual image is big

I believe @JMau is referring to the following:

enter image description here

The actual image is only 211px wide, it displays at 281px wide, therefore pixelation is occurring.

The bigger issue here is that the little thumbnail image displaying to the left of the main product image is throwing the alignment off. Add the following to your custom CSS styles to fix the alignment:

.single-product.woocommerce .product .avatar {
width: 10%;
}
.single-product.woocommerce .product .avatar img {
max-width: 100%;
height: auto;
}
.single-product.woocommerce .product .images {
width: 37%;
}

This will result in everything fitting on the same row, rather than having the title/price/add-to-cart button shifted underneath the image, like so:

enter image description here

This also results in the main product image consistently displaying at 217px wide (I see it varies across your products currently) and will also reduce the pixelation a bit on your example link, as now the difference will be only 6px rather than 70px.

Related Posts: