[Resolved] Displaying product image

[Hamid]

Hi, I’m quite beginner in WordPress/Woocommerce. We are developing a website and initially used Generatepress to setting up elements and structure. We have now purchased the premium version to get more functionality for improving the layout. Probably I will have several questions during the development phase. I try to read your documentation to find the most of the answers. At the present time, I have a question that I have not figured out how to handle it. The question is
How to define the size of gridbox and displaying the product image in the center of the box. Currently the height of box varies with the image. I have tried the custom and 1:1 option. Both of them destroys the images, one cropp and the other one destroy the image. Please visit the website URL and any category page in order to get an idea what I’m talking about.
Appreciate your advice and support in this issue. Best regards Hamid

[David]

Hi there,

can you check the URL you provided as its not valid. You can edit your original topic to update the URL.

The best thing to do with Woocommerce images is to ensure they are all the same dimensions before uploading. Ideally they should be square. Even if that means including some ‘whitespace’ around theme. The upfront effort will save a lot of hassle in the future.

[Hamid]

Hi David Thanks for your prompt response. All images have same size (regarding pixels 1200 x 1200) before uploading. I have run the regenerate to create thumbnails by the plugin.
I have temporarily set the max height to 300 px the custom css. However, this is in somehow working in the Edge & Internet Explorer but in Google Chrome the pictures are disformed.
The best option should be displaying an image, resized to the size of the box and displaying the image in the middle of box which I have not figure how to do it. Another problem is displaying the product in the single product page, There, the image is displayed as it is.
see below links:
Page where almost the grids are displayed at same level
http://testdev.mattkompaniet.se.hemsida.eu/produkt-kategori/klassiska-mattor/
http://testdev.mattkompaniet.se.hemsida.eu/produkt-kategori/gallerimattor/
please compare the images in Edge and Chrome.
Concerning the single product page see below link
http://testdev.mattkompaniet.se.hemsida.eu/produkt/azerbadjan-535×110-cm/

Note the link are developing plattform and not in real production.

[Tom]

Hi there,

Are you sure that all of the images are the same size?

For example, the image at the bottom right is 300×308, while the others are 300×439.

Your single product link doesn’t seem to be working.

[Hamid]

Hi Tom
The original pictures are the same size. I will check the size once more again and upload them. It takes some times and I will get back to you.
Please see another link to single product page

Do you have any explanation about the difference between Chrom and Edge behavior?
Brgds
Hamid

[Tom]

On the klassiska-mattor page, I’m not seeing a difference between Chrome and Edge.

It may be worth un-setting the WooCommerce image sizes in Customize > WooCommerce in case they’re messing with your original image sizes.

[Hamid]

Thx. Will reload the images.
Brgds
Hseb

[Author]

Posts