[Resolved] Odd behavior with WooThumbs plugin

[Matthew]

I’m seeing some layout issues with several product page gallery plugins I’ve attempted to use to add videos to our galleries. The issue is that there’s no space between the gallery and the column to the right. My initial thought was this was a plugin issue, but after I saw it happen with several different plugins and discussed with one of their developers, it may be that GeneratePress is doing something in an non-standard way, so I’m reaching out to see if there’s a better solution to this.

I’m currently using WooThumbs by Iconic who provided some CSS to attempt to correct the issue. It is working on most product pages, but on variable products, when I select a product variation, the space between columns still gets dropped (see private URL for an example).

Here’s the CSS that’s making it mostly work:

/* WPThumbs spacing */
.iconic-woothumbs-all-images-wrap.iconic-woothumbs-all-images-wrap--thumbnails-below.iconic-woothumbs-reset.iconic-woothumbs-zoom-enabled {
    margin-right: 50px;
}

Thanks for taking a look at it!

[Leo]

Hi there,

I believe the gallery section is entirely handled by WooCommerce.

Do you see the same issue with a Twenty series WP theme?

[Matthew]

Obvious question. Yes, I’m seeing the same issue on our staging site with Twenty Twenty-Three. I’ll make sure Iconic understands that.

[Leo]

That’s always a good thing to check when the plugin support thinks it’s a theme problem 🙂

[Matthew]

After further troubleshooting, I’ve determined that this issue has something to do with GP Premium. The problem is still there when I switch to Twenty Twenty-Three, but only if GP Premium is active when I switch themes. If I switch back to GeneratePress and deactivate just the WooCommerce module in GP Premium, the problem goes away when either theme is selected.

So, I removed all of our additional CSS and it made no change. I tried adjusting settings in Layout/WooCommerce/Single Product and saw no change. I did notice that the Product Image Area Width slider no longer has an effect on the page. That seems to be taken over by a comparable setting in WooThumbs, so I suspect this is a clue.

I’d appreciate any help you can provide!

[Matthew]

Well, I think I have it sorted. I was able to identify another selector that the CSS wasn’t catching. Here’s what I used if anyone else stumbles across this:

/* WPThumbs spacing */
.iconic-woothumbs-all-images-wrap.iconic-woothumbs-all-images-wrap--thumbnails-below.iconic-woothumbs-reset.iconic-woothumbs-zoom-enabled, .iconic-woothumbs-all-images-wrap.iconic-woothumbs-all-images-wrap--thumbnails-below.iconic-woothumbs-zoom-enabled {
    margin-right: 50px;
}

[Leo]

Glad to hear and thanks for sharing your solution!

[Author]

Posts