[Resolved] How to show product image gallery slider with woocommerce view?

[Author]

Posts

[Himanshu Agarwal]

Hi there,

I am using woocommerce and woocommerce view.

I created a view for product listing page.

Now i want to show product gallery images as slider (Including featured image) for each product in product listing (View) page.

If there is featured image is selected and gallery images are also selected, then show image slider, or if only featured image is selected then only show simple featured image.

Please help me to achieve this.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

You want to display product images together with the featured image in a slider on the single product page, but if there is only a featured image and no product gallery images, to only show the featured image.

That is effectively what already happens when you add the product images to your product template using the wpv-woo-product-image shortcode.

I have a test site that has the sample WooCommerce content imported.

"T-shirt" is an example of a product with a product image (the featured image) but no product gallery images, and you can see in the screenshot that it is rendered as just this featured image (screenshot t-shirt.png).

"V-Neck T-shirt" is an example of a product with a featured product image and some product gallery images, and you can see in the screenshot that this renders as a slider with thumbnail navigation, showing the featured image first, then the other gallery images.

It would be possible to create your own custom slider if you wanted based upon a solution that is described here: https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295

In your case it is more complex because you would not be using a Types image field to iterate over, you would first output the featured image (easily enough with the wpv-post-featured-image shortcode), but then the product image galleries are stored as postmeta with a key of _product_image_gallery as a comma-separated list. I can give some thought as to how you would handle that, but only if this is the solution you want to implement and you are able to implement the rest of it (i.e. setting up the flexslider).

[Himanshu Agarwal]

Thank you Nigel,

I dont want Slider on single product page, i need gallery image slider with featured image on product listing page (using view).

Please help me to make slider on product listing page.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

If you use the wpv-woo-product-image shortcode in an archive or in a View, by default it will only show a single product image, not the slider as you see on the single product pages.

If you want the same in a product View or archive then you need to add the "gallery_on_listings" attribute, like so:

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

https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-product-image

[Himanshu Agarwal]

My issue is resolved now. Thank you!