[Resolved] Thumbnail images of WooCommerce products don't show with View Custom Search

[Author]

Posts

[MichaelR9215]

Hello,

I just came across something a bit funky.

If you go to this product page: hidden link

Everything loads fine.

However, if you choose a category from the custom search filter (like "grater bowl"), the images disappear.

If you then refresh the page with the search queries intact, the images load.

Please let me know if you have seen this before.

Thanks!

[Luo Yang]

Dear Michael,

Thanks for the details, I can see the problem in the URL you mentioned above, it seems to be a CSS/JS conflict, after you choose a category from the custom search filter, it will trigger the Views AJAX search, but it does not trigger those image zoom effect.

I searched it in our forum, and found this thread:
https://toolset.com/forums/topic/bug-fix-wpv-woo-product-image-lightbox-breaks-in-ajax-paginated-views/

Please test it, feedback if the problem is fixed. thanks

[MichaelR9215]

Luo,

I tried the solution in the link you sent me, and it did not work.

Also, I turned off the zoom effect, and the issue is still occurring, so I don't think it has anything to do with the zoom effect.

I will leave this zoom effect off, so you can take an additional look.

Please let me know if you require any admin access.

Thanks!

[Luo Yang]

Please check the HTML source code of the problem URL:
view-source:hidden link

line 169:

<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 0; ...

Above HTML div tag is being setup as opacity: 0, so you will not be able to see it.

If you want see it, you can try this CSS codes:

div.woocommerce-product-gallery{
opacity: 1 !important;
}

See screenshot: opacity.JPG

[MichaelR9215]

Luo,

Thank you, I appreciate your input. I understand that the product photos start out with a 0 opacity, but if you notice there is a fade in transition when the page is loaded. I believe the 0 opacity is supposed to be the beginning state of the fade in, which transitions into a 1 opacity.

This transition works when you first get to the page, however, after using the custom search filter, there is something preventing this transition from working again. My belief is that because the custom search filter uses AJAX to change the products, it is technically not a reload of the page. Because of this, the product fade in transition is not triggered again after the custom search filter triggers the AJAX change.

Does this sound accurate?

By changing the CSS like you suggested, I don't believe the fade in transition will work anymore.

To be honest, I don't know where that fade in transition is coming from. Is that from the custom search in the view?

Thanks!

[Luo Yang]

Q1) Does this sound accurate?
Yes, I agree what you mentioned above, so in my first answer:
https://toolset.com/forums/topic/thumbnail-images-of-woocommerce-products-dont-show-with-view-custom-search/#post-589341
It seems to be a CSS/JS conflict

Q2) Is that from the custom search in the view?
Views won't add such kind of JS/CSS effect (fade transition) by default, you can edit the view, check if there is any special CSS/JS codes in it, if it is from other plugin/theme, you can locate it by this:
deactivate other plugins and switch to wordpress default theme, and test again