WooCommerce Product Image Slideshow Using WooSlider

At WooThemes we have this cool plugin called WooSlider which basically allows you to create awesome sliders just about anywhere on your site, it is a powerful WordPress slideshow plugin yet simple to use.

One of the questions that has been popping up a lot lately in support is, how can I turn my WooCommerce product images on the single product page into a slideshow instead of displaying a normal image, well luckily with WooSlider this is a breeze to do.

You simply need to purchase and install WooSlider, then you need to place the code below into your theme’s functions.php file

	<?php
	add_filter( 'woocommerce_single_product_image_html', 'wc_product_image_slider' );
	function wc_product_image_slider() {
	return do_shortcode( '[wooslider slider_type="attachments"]' );
	}
	?>

view raw

functions.php

hosted with ❤ by GitHub

8 Comments

Nick

November 2, 2013 — 3:01 am

Hi,
This is just what I needed to know thank you.

But can I ask how would you go about hiding / removing the thumbnails of the other images in the gallery that appear under the main image / slider?

THanks

Ira

November 21, 2013 — 11:21 pm

Hi Gerhard,
I have purchased and installed Woo Slider. I have created a child theme and placed the code above in my functions.php file. Can you explain how the slider replaces the single product image? I have a product page with “attached images” but there is no slider showing up. I have tried it with the featured image set and without. I have tried it with an image gallery set and without. I have tried to insert a slider using shortcode in the product description. If you could explain the steps to override the product image, that would be very helpful.

Thank you.

Frank

February 1, 2014 — 4:23 pm

Hi Gerhard,
I would like to have the slideshow only in the product loop (product list) using the featured image and galery images of the product.
How do I have to modify your filter for this?

Thank you,
Frank

leonardo

June 5, 2014 — 4:20 am

is possible make this without the WooCommerce Product Image Slideshow?

Paul

August 19, 2014 — 3:03 pm

I had some difficulty in getting this working.

1. Add the shortcode.
2. If attaching images to products does not work via usual ‘Add Media’ button.

Try this plugin – http://wordpress.org/plugins/xili-re-un-attach-media/changelog/

Fixed all issues I was having – as I too tried all options like Ira had.

Cheers

Paul

kainer

October 12, 2014 — 12:32 pm

As I see woothemes are offering this piece of code as a product for 29$. 😉 Seems to be a good joke and a way to kill the own reputation. The wooslider plugin is hardchor useless and coded really bad. It has zero options and is a pain to set up. Nothing logically here. A real heavy pain in the ass to see my money go down the raod for this piece of crap… I am not sure why woothemes is still offering this cheap and really small shitty product for a price of 49$. Unbelievable scammy if you ask me. I bought it and tried to set it up (I work with many other slider plugins so I know what to do usually). I have no idea why someone would not combine the featured image with the slide itself. Why have the featured image there anyway? This is made without love just to earn some money. It is not what the wordpress community deserve! Shame on who ever did this and shame on who ever allowed this to be sold on woothemes.com! Get rid of it or make it a good product please! BTW: Why do you have a comment section if you do not answer the comments of your readers/customers?

Gerhard
October 13, 2014 — 8:05 pm

Reply

Hi Kainer, to each their own, WooSlider is a WordPress integration for Flexslider, it has plenty option, perhaps you were just not looking in the right place?

Regarding the WooCommerce WooSlider integration, it does not exactly do what this code does.

Regarding the comment, I do this in my spare time, taking my personal time to write tutorial and code to assist others for free, excuse me if I do not alway have the time to go through all the comments and answer each and every one.

This site has built quite a large community and most of the times the visitors help each other out without me needing to, this is what WordPress is built on, a thriving community that helps each other.

Loading...

sameer

April 16, 2015 — 3:18 pm

Only showing single image on product single page.

0 Pingbacks

Nick
November 2, 2013 — 3:01 am


Hi,
This is just what I needed to know thank you.

But can I ask how would you go about hiding / removing the thumbnails of the other images in the gallery that appear under the main image / slider?

THanks

Loading...
Ira
November 21, 2013 — 11:21 pm


Hi Gerhard,
I have purchased and installed Woo Slider. I have created a child theme and placed the code above in my functions.php file. Can you explain how the slider replaces the single product image? I have a product page with “attached images” but there is no slider showing up. I have tried it with the featured image set and without. I have tried it with an image gallery set and without. I have tried to insert a slider using shortcode in the product description. If you could explain the steps to override the product image, that would be very helpful.

Thank you.

Loading...
Frank
February 1, 2014 — 4:23 pm


Hi Gerhard,
I would like to have the slideshow only in the product loop (product list) using the featured image and galery images of the product.
How do I have to modify your filter for this?

Thank you,
Frank

Loading...
leonardo
June 5, 2014 — 4:20 am


is possible make this without the WooCommerce Product Image Slideshow?

Loading...
Paul
August 19, 2014 — 3:03 pm


I had some difficulty in getting this working.

1. Add the shortcode.
2. If attaching images to products does not work via usual ‘Add Media’ button.

Try this plugin – http://wordpress.org/plugins/xili-re-un-attach-media/changelog/

Fixed all issues I was having – as I too tried all options like Ira had.

Cheers

Paul

Loading...
kainer
October 12, 2014 — 12:32 pm


As I see woothemes are offering this piece of code as a product for 29$. 😉 Seems to be a good joke and a way to kill the own reputation. The wooslider plugin is hardchor useless and coded really bad. It has zero options and is a pain to set up. Nothing logically here. A real heavy pain in the ass to see my money go down the raod for this piece of crap… I am not sure why woothemes is still offering this cheap and really small shitty product for a price of 49$. Unbelievable scammy if you ask me. I bought it and tried to set it up (I work with many other slider plugins so I know what to do usually). I have no idea why someone would not combine the featured image with the slide itself. Why have the featured image there anyway? This is made without love just to earn some money. It is not what the wordpress community deserve! Shame on who ever did this and shame on who ever allowed this to be sold on woothemes.com! Get rid of it or make it a good product please! BTW: Why do you have a comment section if you do not answer the comments of your readers/customers?

Loading...
- Gerhard
  October 13, 2014 — 8:05 pm
  
  
  Hi Kainer, to each their own, WooSlider is a WordPress integration for Flexslider, it has plenty option, perhaps you were just not looking in the right place?
  
  Regarding the WooCommerce WooSlider integration, it does not exactly do what this code does.
  
  Regarding the comment, I do this in my spare time, taking my personal time to write tutorial and code to assist others for free, excuse me if I do not alway have the time to go through all the comments and answer each and every one.
  
  This site has built quite a large community and most of the times the visitors help each other out without me needing to, this is what WordPress is built on, a thriving community that helps each other.
  
  Loading...
sameer
April 16, 2015 — 3:18 pm


Only showing single image on product single page.

Loading...

Gerhard Potgieter

Senior Software Engineer @ Automattic specializing in eCommerce