[Resolved] How to create image swap in woocommerce product listing page?

[Author]

Posts

[wandyC]

Hi,

We want to create image swap effect (when we hover product image, it's replaced by other image) in product listing / product category page like
https://wordpress.org/plugins/tp-product-image-flipper-for-woocommerce/
https://wordpress.org/plugins/magni-image-flip-for-woocommerce/

Is it possible to do that?

Thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

I suggest you should try to follow the following course:
- https://toolset.com/course/custom-woocommerce-sites/

Toolset offers shortcode [wpv-woo-product-image] that you should use to display the product gallery images.
- https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-product-image

For example:

[wpv-woo-product-image gallery_on_listings="yes"]

I suggest best option for you to learn Toolset quickly and export its capabilities:

You can use our free test platform hidden link; and use any of our reference site that is build on top using Toolset features.

This will allow you to create a test site or our free test platform: http://www.discover-wp.com
- https://discover-wp.com/site-templates/

In addition to that - if you want to install any of our reference site we offer on http://www.discover-wp.com on your local machine or server, you can use the framework installer plugin:
- https://toolset.com/course-lesson/using-framework-installer-to-install-reference-sites/

Once you create test site using any of the reference site on your local machine or server - you can add your additional plugins and test with any theme and explore and take decision with your findings that what way you would like to go with, if you would like to use existing features or add add-on plugin for your requirement.

By following this path you will have hand-on experience about how you can implement the functionality using Toolset or check the existing features of the current referent site that will give best of the knowledge.

you can also try to follow any of the course we offer:
- https://toolset.com/course/

[wandyC]

I tried to use that previously but i don't see the gallery.

What could possibly cause the issue?

[Minesh]

Can you please check if you have setup the product gallery images for the product.

Can you please share problem URL where exactly you want to display the product gallery images and share admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - it shows me 404 page not found error when I try to access wp-login.php or wp-admin or even when I try to load the problem URL you shared:
- hidden link

Can you please send me working staging site with access details.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Thank you for sharing access details and it works now.

Can you please tell me where exactly on what page you added the view you shared:
- hidden link

And also tell me for what product (you can share one or two example products) where you want display image gallery?

[wandyC]

It is the products page.

I want to have all products show the galleries on the listing page.

Products:
1. Iced Banana Gum
2. Iced Blacknpink Macchiato

Thanks
.

[wandyC]

Also, is it possible to use image slider for the product images?

[Minesh]

When I checked with the following product there was only one image - so I've added few images to Product Gallery section on right sidebar on the following product edit page:
- hidden link

To your view I've added the following shortcode:

 [wpv-woo-product-image size="woocommerce_gallery_thumbnail" gallery_on_listings="yes" enable_third_party_filters="no"]

When I checked on frontend I can see those images but styles are not working or has conflict:
- hidden link

If you want to have product slider then [ You might consider other plugins or custom codes, for example:
- https://wordpress.org/plugins/search/product+gallery+AutoPlay/
- https://wordpress.org/plugins/woo-product-gallery-slider/
- https://wordpress.org/plugins/tp-woocommerce-product-gallery/
- https://wordpress.org/plugins/advanced-woocommerce-product-gallery-slider/

[wandyC]

Oh, the image gallery cannot be looped. is that correct?

is it possible to get the second image in the gallery via loop?

[Minesh]

Oh, the image gallery cannot be looped. is that correct?
===>
Well - you are listing all products using view so view will loop product one by one and the gallery images will be displayed for each product.

is it possible to get the second image in the gallery?
==>
what you mean? There is no such feature.

If you want to display gallery using custom field, then you can add repeating image field and use the gallery or slider block to display the image.

[wandyC]

sorry for not making myself clear.

Is it possible to loop product gallery images? Is there a function to do that?

[Minesh]

No but you can easily achieve this by adding custom shortcode.

Please check the following related links:
- https://stackoverflow.com/questions/37274685/woocommerce-get-image-galleries-by-product-id
- https://stackoverflow.com/questions/27702915/how-to-get-woocommerce-product-gallery-image-urls

[wandyC]

Thanks for the reference.

Another question, how do i get the product id in the view loop so i can pass it to get the gallery?

[Minesh]

Well - if you set your view to list post type Product posts.

Then you can use the shortcode [wpv-post-id] that is the current product post ID in view loop.

If you want to get the product ID in PHP while targeting the current product in view's loop, you can use within shortcode or any other hook:

glocal $post;
$product_id = $post->ID;