Product Gallery display problems only with Product with variations

Hi,
I’m getting a problem with Product Gallery display only with Product with variations.
The issue isabout the images in the product gallery doesn’t change when clicking on them.
On all other product (no variations) it’s ok, working fine.
Please check your demo VS a production my site.
your demo: https://woodmart.xtemos.com/shop/furniture/panton-оunior-chair/
my site product: https://narrateworld.testmenow.it/prodotto/tea-shirt-narrate-il-primo-te-indossabile/
Please click thumbnails on the left side to see that nothing happens. Also, the arrow to see more product images are missing (there are 5 images in total)

otherwise in a standard product (no variations) everything works fine(https://narrateworld.testmenow.it/prodotto/essenza-della-maremma-in-un-te/)

Is it possible it depends by some java settings?

Thnaks.

Attachments:

You must be logged in to view attached files.

Hello,

Please confirm the permission for plugins deactivation, and switching to the parent/default theme. As soon as we complete the testing we will enable it all back. You would better make the full backup of your site.

Kind Regards.

Hi,
checking the cause of the issue I found that there’s a conflict between ‘Yith Product add on Extra option’ (that I use to ad a gadget to the product) and the Product page (only when Variations are activated).
By deactivating it, the Variable product images works fine.
The problem is that I use that plugin to add a Greeting Card to the product with a text field for the message.
If you have an idea of how to get the same without the plugin, I can remove the plugin.
Thanks a lot

PS
at the moment the plugin is deactivated.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Kind Regards

Hi,
it works fine with standard WP theme.
I tried withTwenty-Twenty. I attached a short screen capture video.
I’m coming back with your theme to work on the site.
Thanks.I
PS
If I remember well there’s a backend panel to work with java for several java functions (load java and java settings).
We can try there?

here the video. It was too big in the previous message.
IMPORTANT:
may be it helps you:
Another issue using Woodmart + With plugin + Product variation:
Also if I set Horizontal Thumbnails view (i tried to see if something changes), in the product page it shows left Thumbnail view after a lamp (just a second) of showing Horizontal thumbnail view.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

After we looked into the situation, we found that it will not work properly with the third-party plugins, unfortunately.

Don’t hesitate to let me know if you need any further help or any other info

Kind Regards

hi,
sorry, I can’t understand what you mean.
Could better explain, thanks

Hello,

I meant that the gallery will not work properly with that third party plugin, you need to disable all third-party plugins that affect the proper work of the gallery.

Kind Regards

Hi
thanks for fast reply.
you asked to me to do a test with standard wordpress theme to see if the page works with that plugin. It works fine. Then I was convinced you will try to find a solution..
So for WordPress standard, the plugin is ok. It’s your theme that create the problem. Usually what happens is that the theme Staff should try to solve the issue that is not a plugin issue since it works with standard WordPress+Woocommerce. As you have seen my video, the gallery works fine it is more or less the same gallery of the one in your theme. The minimum that I can aspect is to have an analysis of the code to understand what is the issue, and if is possibile a solution or an alternative plugin to to the same (..if exist a plugin that is ok for your theme).
Please let me know.

[Luke Nielsen]

Hello,

Most likely that plugin will not work with the theme because when the plugin is active, it breaks the structure of the page, e.g. on the swatches: https://monosnap.com/file/pdeaR51CLypYCpJ9UPUtVmfUUMeEKA , https://monosnap.com/file/prvtWVM8g3RC8qO1M27feq3V4dKygP

Kind Regards

• This reply was modified 1 year, 5 months ago by Luke Nielsen.

Hi,
that is clear. It breaks only Woodmart theme page. Not the WordPress standard theme page.
Now the standard WP theme show the same elements on the same page with the structure of WooCommerce.
So could you please tell me if you think if the problem is in the Plugin or in the Woodmart Theme?
About the second question: I asked if you can suggest another similar plugin. Because if your theme is has compatibility problem, it can be very hard to buy/ask for refund till I find something compatible (if there’s one). You suggest Cache plugin and other plugin by suggesting specific brand . Please provide a similar plugin. It seem odd I can’t add a option field on a woocomemrce site. I followed your indications till here. I’m disappointed. I think It’s not good to tell your customers that your plugin that shows the same layout of twenty-twenty is ok and the problem is about plugin. That Yith plugin is developed on the WooCommerce layout. And works on other themes.
Thanks.

Please it seems you find a break-page issue. Could you please give me some code evidence to show to Yith plugin staff. So they can try to fix the plugin basing on your theme incompatibility.

Hello,

Please, send us your admin and FTP access so we can check what is wrong.

Looking forward to hearing back from you!

Kind Regards

Hi;
excuse me for delay in responding.
I hope is it already possible to check it.
if so I will send my FTP credentials.

Thanks again

Hello,

Yes, if you have the same issue, please send us the FTP access via the private area.

Thank you in advance.

Kind Regards

Hi,
i’m sending my FTP credential in private content.
thanks a lot.

Hello,

Please add the below code into the “Global Custom JS” area in Theme Settings -> Custom JS.

jQuery(document).on('yith_wccl_product_gallery_loaded', function () {
	jQuery(document).trigger('wdReplaceMainGallery')
})

Kind Regards

Hi,
thanks for replying.
Unfortunately, the test doesnt work, because not only it doesn’t eliminate the problem by adding your code in
Global Custom JS” area in Theme Settings -> Custom JS (please look at the screenshot), but generate new problems to standard products (also if I don’t paste the your code, after your FTP trial)
I explain better: if i add your code the problem is not solved, the image gallery arrows are not visible, previews are truncated and the gallery images does’t change or looping in a loading mode. So more or less what append at the beginning of the request support.
By adding (or not) the code in Custom CSS, also standard products (the ones without options) get trouble and the vertical gallery previews is truncated and now vertical arrows (please look attachment beginning with 1 and 2, where 1 is before FTP trial and 2 is after in a standard product)
In attached image 3 you can see also the still-problem on ‘product-with-option page’. At the beginning seems working well (if we ignore that the standard products don’t work well anymore, as said above), but then infinite loading and white space by changing product images (small image included in the screenshot)

To recap: unfortunately no progress on Option Products and some new problems on standard product

I’m leaving the code into JS to let you try again

Please use this product (https://narrateworld.testmenow.it/prodotto/tea-bag-narrate-shopper/) with options to see if your code has success and any standard product (like this: https://narrateworld.testmenow.it/prodotto/essenza-della-sicilia-in-un-te/) to see if the code doesn’t create collateral effects on standard products (no option).

Important: I also deactivate any optimisation plugin or WPRocket for cache.

I hope I can explain at my best the test result.
For any information please contact me or tell me if you need WP credential to test the site.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

The custom code we gave you works because the carousel works when no variation is selected. The problem is when a variation is selected and the main picture is not displayed, to solve it just add a picture for the variation and everything will work: https://monosnap.com/file/0aBOHS4OAK8xr91l4Yn7IGXJ7F9WyT

Kind Regards

Hi,
Thanks again.
Probably I can’t explain the issue. I use to add some images to better explain. But I need kindly suggest to watch again the previous post here in the support request.
I do what you ask me to do with your tutorial.
Now, again, can you please see that the product image previews in the product gallery (at the left side of the main image) are truncated (cut off, thinner).
I attach these screenshot again here (like i did before). screenshot both for normal product and for product with variation (every product has the images preview issue). They should be square but they’re not. If you look well, in very first moment the keep their shape but then they are truncated while the page finish loading. And they remain truncated. Please could you confirm the point is clear?

Here the links, to see this product live: https://narrateworld.testmenow.it/prodotto/tea-bag-narrate-shopper/ and https://narrateworld.testmenow.it/prodotto/essenza-della-sicilia-in-un-te/.
Could you please confirm if is clear what the issue is?

Can I hope you try to solve this issue before my subscription is yet active? If some issue details are not yet clear I’m available to a call or similar.

Thanks again

Hoping we can get to a solution, what happens if in future I will upgrade the Theme to the ftp file you add? (please could you specify where did you add?) thanks.

I have a good opinion of your theme, and I would keep this opinion also for future reviews, thanks

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

Please accept my apologies for the delay.

Define the below code in Theme Settings -> Custom CSS, and then clear the cache and recheck the issue.

.single-product .slick-slider {
    padding: 0;
}

Let me know the results.

Kind Regards

Hi,
thanks for reply.
I was under covid for some days.
I can’t reply by the the support page (also if you extended ny subscription), so i write here.
The CSS code solves the issue, thanks.
Very last thing: you wrote you have placed some code by FTP (better you ask me FTP credentials). Could I please ask you where you modify/add the code. Of course I don’t want to edit it again, but I just fear that, with a some upgrade of the plugin or of the theme, I will loose the code. So, to know where they are will prevent loose it.

Thanks and regards.

Hello,

We didn’t edit any code, just checked the files and that is all.

If you have any other questions or concerns, please do not hesitate to reach out, I’d love to help!

Kind Regards

Hi,
I’m getting again the same problem of left side product preview images truncated (so they loose left and right side).
It happens again as I updated the theme to latest version. (https://narrateworld.testmenow.it/prodotto/essenza-di-milano-in-un-te/)
It happens also that in Safari browsers when I go to product an image and zoom works two backlines appear around the image (left and side padding). This happens only in Variation Products (https://narrateworld.testmenow.it/prodotto/te-shirt-people/)

I think there’s a link between what is happens and the preview steps of this support items.
please look at attached pictures to better understand.
Many thanks

Attachments:

You must be logged in to view attached files.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand if is it our theme issue or not?

I await your response.

Kind Regards.

Hi,
well it’s the same on Safari about black borders with twenty twenty (attached file). Also in standard product (not only in Variable products).
The truncated images error happens only with Large Product Image setting (always variable or not). This can be considered a minor level issue.

Attachments:

You must be logged in to view attached files.

In the product page there’s the ‘product image width’ (please look at attached picture).
this is the setting for one product. It is set to Inherit. I’m wondering, if it’s inherit, where is the global (for all products), so I can change all products?
I try to find it in Theme setting->Single product and in Appereance->Woocomemrce. I can’t find.
Perhaps I’ve already global change in the past, but I can’t find it anymore.

Attachments:

You must be logged in to view attached files.

Hello,

The global “product image width” option is situated in Theme Settings -> Single product -> Product page layout

https://take.ms/HccNM

So you mean that when the “Large” image is activated you have such an issue?

Kind Regards

[supergap]

Hi,
many thanks. I visited a lot of time that setting panel, but I was looking for something with ‘image’ name.
It was easy to find indeed.
Thanks
Could you help me also with the black border on safari thanks.
Thanks again.

• This reply was modified 1 year ago by supergap.

Hello,

Please define the code below into the “Global custom CSS” area in Theme Settings -> Custom CSS.

.browser-Safari .woocommerce-product-gallery .zoomImg[src$=".png"] {
    background-color: unset;
}

Clear the cache and recheck the issue.

Kind Regards

[Author]

Posts