Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Because right now, it is not. The product galleries do not work properly with the Vantage theme and WooCommerce 3.0.1. There is no transparency, and captions do not show. I tried Storefront, which is WooCommerce’s default theme, and they do work there now. I have invested time into customizing Vantage and I prefer its design, so would rather not switch the site to Storefront, but if you don’t plan to update to be compatible I need to know, because I’ll have no choice but to switch themes to Storefront.
Hi George,
We’re working on a compatibility update now.
Can you please clarify what transparency and captions you’re referring too?
Regarding the product gallery, for a temporary fix, please install Code Snippets and then navigate to WP AdminSnippetsAdd New and add the following PHP:
function vantage_child_theme_setup() { add_theme_support( 'wc-product-gallery-lightbox' ); } add_action( 'after_setup_theme', 'vantage_child_theme_setup' );Click Save Changes and Activate. How does that look?
How does it look with the code snippet you provided above? It looks awkward. The thumbnails for the gallery on the product page beneath the main product image are reduced proportionally to the same width, but vary in height and are not aligned vertically, and also are touching each other instead of having some space between them, which looks strange. I can email you a screenshot if you want.
As for the transparency and captions, that turns out to be a flaw (at least, as far as I’m concerned it’s a flaw) in the WooCommerce 3.0 upgrade rather than an incompatibility with Vantage. With WooCommerce 2.6, a lightbox would pop up when you clicked the thumbnails that was semi-transparent so you could see that it was a pop-up and that you were still on the same page. For some unfathomable reason, they decided to fill the entire screen with an unattractive opaque black background instead. Also, they decided they didn’t need to support the inclusion of titles and captions in the lightbox anymore. Well, our business depends on those captions being there. I wouldn’t have chosen WooCommerce if it didn’t have the capability to attach captions to the images. I explained this to them in a bug report (https://github.com/woocommerce/woocommerce/issues/14218 ) and it looks like they are taking this seriously for the next update, so we’ll see.
Hi George,
Sadly the thumbnails below the image will need to be updated in a theme update which we’re currently working towards now. Very sorry any frustrations this may have caused you.
Based on the linked GitHub thread, it looks like they’ve added support for this. Is that the case?
They’ve added caption support, but it’s still buggy. Short captions appear away from the image at the bottom of the browser window and off to the left, and items with long captions fail to advance when you click the arrow in the viewer — and that’s with their Storefront theme. I submitted a couple more bug reports yesterday about those issues. So far, don’t have a fix.
I just updated Vantage and it looks even worse with WooCommerce 3.0 than it did prior to the update. :-(
Hi George,
The current release more of a hotfix for this. Another update will be coming shortly once all of the design-related issues are resolved. With that said, I should be able to assist you with them. Do you have a public URL where we can take a look at what’s going on?
Here’s a product page with multiple images that you can look at. Note that we are still in the process of bringing our site into WordPress so it is incomplete and has not been unveiled to the public yet. So if you see missing icons or wonder why the navigation bar at the top links to our current site, that’s why.
https://www.georgeglazer.com/wpmain/product/the-works-in-architecture-of-robert-and-james-adam-architectural-prints-in-fine-frames-london-1770s/
As an addendum to the previous post: I don’t mind that some of the new WooCommerce 3.0 “improvements” to the lightbox are missing, because I’m not crazy about them. If we could get the thumbnails that appear beneath the product image to format as uniformly sized squares with a little white space between them, I’d be happy.
By the way, I’ve also been asking them if the captions could appear right under the images instead of far away from the images at the bottom of the browser window, and one of their developers said, “Turns out positioning the caption is going to be tricky because the script we’re using figures out the placement depending on the dimensions of the image being magnified. So to do this properly you’d need to modify that script which is not something I’d recommend.” But if were part of a theme…? Not that I really understand what the dimensions of the image have to do with putting the text at the bottom of a browser window, which only makes sense if you’re looking at it on a very small screen like a smartphone.
Hi George,
Regarding the images underneath the product image. Please add the following CSS to WP AdminAppearanceCustom CSS:
.woocommerce div.product div.images img:not(.wp-post-image) { height: 111px; }But if were part of a theme…?
Basically, the lightbox isn’t designed to allow for that. The only way to allow for it would be to edit the script or forcefully prevent it from working in the way it currently works (which WooCommerce can’t do). The latter of which isn’t something that can be easily done.
Thanks for the thumbnail height code. It looks much better now.
Just downloaded the latest update to the Vantage theme today (May 1). There is a bug in the lightbox. When you click the thumbnail, instead of a full size image appearing above the thumbnails, another thumbnail appears. You only can see it full size if you slide the mouse up to where that window is. But that’s not how it’s supposed to work. In Storefront, which is WooCommerce’s theme, clicking the thumbnail advances full size images.
Hi George,
That’s odd. I don’t see a record of a Vantage update for today – to clarify, what version are you using, 1.6?. Do you have a public URL where we can take a look at what’s going on?
Yes, it is version 1.6. I haven’t worked on the site since last week so I don’t know what date that update came out, I just noticed today that when I checked the themes that it said there was an update available. Take a look at this page:
https://www.georgeglazer.com/wpmain/product/star-charts-smiths-illustrated-astronomy-mid-19th-century/
Click the thumbnails and the large image slides to show the same thumbnail, same size, instead of the full size image. That’s not what is supposed to happen.
Hi George,
That’s odd. I can’t seem to replicate that. Oh. Wait, that’s likely related to the previously provided CSS. Please open your custom CSS and replace:
.woocommerce div.product div.images img:not(.wp-post-image) {With:
.woocommerce div.product div.images .flex-control-thumbs img {How does that look? Although, the dimensions being specified via this CSS shouldn’t be required anymore.
That’s not it, because I had already removed that command.
Also, I tried switching to the Storefront theme and it works the way it’s supposed to. It seems to be a Vantage problem.
In addition, without that command, the thumbnails are stretched and distorted instead of having the overflow hidden. See https://www.georgeglazer.com/wpmain/product/apollo-with-bow-and-arrow-apollo-with-lyre-pair-of-neoclassical-nude-studies-late-18th-century/
Hi George,
The CSS is still present on your website and it’s theme specific which explains why it’s not affecting Storefront. I don’t know where you’ve added it but you can view it here – it’s at the very bottom of the file.
If that’s the case, use the second selector instead.
When I read your comment I was confused, because I had deleted the code via Appearance: Custom CSS. So then I looked at Appearance: Customize: Additional CSS, and there it was. I commented it out, and now it works. So thanks for taking a look and helping out with this! I didn’t realize that editing in Appearance: Custom CSS doesn’t affect anything.
One other question I have is if there is a way to have the title pop up when the mouse hovers over the thumbnail. It used to in the previous version of WooCommerce.
Hi George,
I didn’t realize that editing in Appearance: Custom CSS doesn’t affect anything.
It’s not that it wasn’t doing something it’s that’s that you had the code added to two methods of adding CSS and both of them were outputting the CSS.
By popup, do you mean this:
Or this?
Or something else? If something else, can you please elaborate?
The first image shows what I mean.
Hi George,
I’ve had a look over at how we handle things and it looks like WooCommerce handles that section. Unfortunately, it looks like they have opted not to include this at the moment. I’ll see if this is something we can change.
What have I opted not to include? By the way, I think you’re right it is a WooCommerce issue, and I just reopened the issue on WooCommerce’s Github site. It was working in 3.0.4, but is not working in 3.0.5, including with their Storefront theme.
Hi George,
Sorry! That was a typo – I meant, they’ve.