Product pictures

[Doxster]

Hi,

When going in to the general shop page where all my products are listed some product pictures show the intended picture along with another half of the picture below. How do I fix this?

Thanks

[Melanie – SUPPORT]

Hi,

it looks like you switched themes or changed the picture sizes and did not regenerate your thumbnails afterwards. I just started regenerating the thumbnails for you and will post back if it solved it.
It might take a while as you got almost 600 pictures.

Mel

[Doxster]

Hi Melanie,

Uhm 600? It must be the ones that came with the Neighborhood theme, I’ve added maybe 10-15 pictures. If that. Oh well, if it works I’m happy 🙂

Thanks!

[Melanie – SUPPORT]

We’re at 70% 🙂 Can’t be taking much longer and I think it already fixed some of the malfunctioning images at the homepage.

Afterwards I’d say maybe go through the media section to remove the images you don’t need so you can do this step faster in the future in case you need it again 🙂

[Melanie – SUPPORT]

So we’re done with regenerating but it didn’t seem to solve everything. What I don’t get tho is why the same image works in one of your elements but not in another one. Have you set your image sizes in the woocommerce settings before uploading them?

[Doxster]

Not that I can recall. I’ve been working on the site on and off for quite some time. I had a look in WooCommerce settings and the product image size settings looks familiar. But I honestly don’t know if I changed any of it.

[Doxster]

I added some more pictures of some new products, they seem to work fine. However they are zoomed in the carousels on the home page. The pictures also work in the intended category page.

They fail to view properly in the main shop page though. Very weird.

Edit: Maybe I just need to reduce the height of the pictures on the woocommerce page? I just remembered that the category pages are not WooCommerce pages, they are custom built.

Edit 2: If I should try and change the height of the pictures, please let me know what to use.

Current settings are:

Catalog Images: 540 x 720 Hardcropped (don’t know what hardcropped is)
Single Product Image: 540 x 720 Hardcropped
Product Thumbnails: 120 x 178 Hardcropped

[Kyle – SUPPORT]

Hi

The reason your product images are displaying like that is because your images are different sizes. The theme works out the size of the first product on the page and then applies that size to all of your other product images.

– Kyle

[Doxster]

Hi Kyle,

Alright, hmm. Is there a simple way to sort this out? Preferably without having to change the size of every single image I’m using and will be using in the future?

Thanks!

[Kyle – SUPPORT]

Not really, the only solution is to pick a size and force all the images to use that size, with this css:

@media only screen and (min-width: 769px) { 
.woocommerce ul.products li.product figure {
  padding-bottom: 236px!important;
}
}

– Kyle

[Doxster]

I tried it, doesn’t look good. Is it possible to force the pictures to be bigger instead?

[Kyle – SUPPORT]

Yes but then you will still get the products that show duplicate pictures just like they were originally?

– Kyle

[Doxster]

Ah sorry for the confusion, I ment force the picture to be bigger without duplicating.

I guess if that’s not possible I have to find a simple image editor program and expand the pictures to the proper size. Seems like most pictures work, just a couple that looks weird.

Wich one of the product image size options is it that is interesting for this purpose?

Thanks Kyle!

[Kyle – SUPPORT]

Ok no problem

Please remove the CSS I provided above to make it work properly.

The sizes set in WooCommerce Settings are only for the image quality. The actually height of the image is worked out by the first image on the page

– Kyle

[Doxster]

Hmm, the first one added on the product page (in the WooCommerce part) or the one that’s in the top left on the shop screen?