[bpotter]

Hi,

I have a couple of issues with the single products page and the product images:

1) I like the product page like this: https://www.benpotterart.com/product/heaven-hell-a-rotating-conundrum/ But is there a way to move the smaller gallery images below the main product background image? And also to increase the white border around the smaller gallery images, like I’ve seen in the demo?

2) If the above can’t be changed, I would have to go with this layout: https://www.benpotterart.com/product/the-consequences-of-trying-to-hide-in-the-ocean/ But I can’t change the main image size smaller so it fits completely in the frame without having to scroll to view the whole image. I changed the product image size in Customise, but that didn’t work. How else can I make this main product image smaller?

Thanks for your help.
Ben

[Althemist]

Hello bpotter,

1. I am afraid the gallery images can’t be moved bellow the cover image. IT was meant to be as a decorative background, not as a standalone image. There is no same way to make the iamges bellow the cover and make sure it would work fine on all devices and resolutions.

As for the border – it’s the same on the demo. The only difference there is that the product images on the demo are on a white background.

However, you can change the border thickness with CSS. Something like this (adjust as per your needs):

div.woocommerce-product-gallery__image a img {
    border: 6px solid #f1f1f1;
} 

2. I am afraid that wouldn’t be possible too, as with the default WooCommerce gallery, the main image will always display in it’s original aspect ratio.

BTW, I just saw some of your works. They are really great.

Best regards,
Dimitar

[bpotter]

Thanks for your response Dimitar.

I will have to just use the WooCommerce default and remove the product background cover image. Which I’m fine with. I suppose I have to upload the main product images as a smaller size.

Although, now that I updated the theme, the gallery images on the product page are now large and vertically inline. Not small thumbnails and horizontal below the main product image.

I did make a few changes in WooCommerce customize, but then I reverted the settings, and the product page images are still too big and not horizontal.

How can I fix this?
Thanks

[Althemist]

Now that’s really strange. Could you, please provide temporary admin access to your site, so we can check what could be wrong?

[bpotter]

This reply has been marked as private.

[Althemist]

Hello Ben,

I have just checked your website. There is something completely wrong there. There were two instances of the theme plugin (Refer plugin). This should basically be impossible, but it somehow happened on your site.

However, the problem is still there and I can’t tell exactly what’s causing it. Could be related to too aggressive settings in your hummingbird OR Defender Pro plugins. This can’t be replicated on our servers where everything works just fine.

I’d suggest disabling those plugins one by one and see if that would fix the problem (i’d start with the Hummingbird first). Those plugin’s default settings are usually too aggressive on premium theme and must be sue with extra caution.

If it turns out that this is the problem, I’d suggest using a combination of WP Super Cache and Autoptimize. WP Super Cache was built by the WordPress developers and Autoptimize is officially recommended by them.

Please, let me know if disabling one or both plugins would fix the problem, so I can give you further instructions.

Regards,
Dimitar

[bpotter]

Hi Dimitar,

I did as instructed, but no change.

I also did a complete plugin conflict test, and still no change.

This problem did only happen after I updated the theme. Since then I have not installed any new plugins. Although I did adjust image size settings a little. But I don;t think that should have an effect on the layout.

Is it possible to revert back to the previous theme version?

[bpotter]

I think it’s a theme conflict. I just changed to default Twenty Twenty theme, and the product page images are as they should be.

[bpotter]

I have backups going back to when I started working with this theme. Should I try and restore a backup from before I updated the theme?

[Althemist]

Hello Ben,

I wouldn’t recommend reverting to an old backup version. Try re-uploading the entire theme via FTP. Most probably something went wrong during the update. The theme itself doesn’t have such errors in it’s latest version. We have checked that numerous times.

[bpotter]

OK so I downloaded the theme file from my Themeforest account (I assume that is the latest one since I also received an email from Themeforest about the update).
And I uploaded the theme via FileZilla with no problems. But that didn’t fix the issue.

I ran a plugin conflict test with just the WPMEDEV plugins (Hummingbird and Defender)- no change.

I ran a full plugin conflict test- no change.

I cleared the cache- no change.

But when I change to default Twenty Twenty theme, it works properly. So it’s obviously a theme issue.

Unless the theme that I’m downloading from ThemeForest isn’t actually the latest version. Do you have a latest version you can send me?

[Althemist]

Hello Ben,

The version on ThemeForest is the latest one. There is clearly something there that breaks the functionality.

As I already suspected it was too aggressive settings in your Defender, HummingBird and Smush plugins.

Also, it looks like your site was set to sue .webp image file format, which is still not fully supported by most major browsers.

I have jsut disabled those plugins AND also ran a product images thumbnail regeneration via WooCommerce > Status > Tools.

Now, it looks like everything works fine:

Heaven & Hell: A Rotating Conundrum

I’d suggest being extra careful with those plugins. To be completely honest, I am not a huge fan of WPMU DEV team at all. They are using too aggressive settings just to stand out of the crowd.

For image optimization the Smush (free) should be more than enough. For the minification, compression and caching, as I already suggested a combination of WP Super Cache and Autoptimize would be much better choice. WP Super Cache was built by the WordPress developers and Autoptimize is officially recommended by them.

Regards,
Dimitar

[bpotter]

Thanks Dimitar.

Sorry for the delayed reply.

I just uploaded a smaller image to replace the larger product image. But the larger product image is still the main image, and the new smaller product image is the second one on the list.

And the layout has changed again.

You can see here: https://www.benpotterart.com/product/the-consequences-of-trying-to-hide-in-the-ocean/

I did reactivate SMush for a short while, only because all the images on the front page had reverted to cropped. Smush is off now, but images still aren’t correct.

[bpotter]

I was able to fix the product page image layout issue.

But for some reason, when I delete the old, larger main product image, and replace it with a small image, the large image still remains as the main image, whilst the new product image goes to the bottom, along with the other thumbnails.

I tried the thumbnail regeneration and transient deletion, but nothing works.

Also, I tried just editing the main image to make it smaller, but that change doesn’t work, so I have to manually change the size in Photoshop and reupload. But the new upload still doesn;t replace the old product image.

[Althemist]

If the image file name is the same, the system will have it cached and the thumbnail may not be regenerated. That’s not theme related.

I’d suggest regenerating all thumbnails AND also clear your browser cache (try reloading the page with Ctrl + F5)

[Author]

Posts